.service-description {
  display: flex;
  flex-direction: column;
  justify-content: center; // Centers content vertically
  padding-bottom: 40px;

  @media (min-width: $breakpoint_lg) {
    padding-bottom: 0px;
  }
}

.service-elements-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.service-elements {
  position: relative;
  height: 100%;

  a {
    color: inherit;
    text-decoration: none;
  }
  
  &:hover .service-content {
    transform: translateY(-10px);
    transition: transform 0.5s ease;
  }
  
  .service-element {
    overflow: visible;
    border-radius: 50px;
    margin-bottom: 100px;
    
    .service-content {
      padding: 50px 40px;
      height: 100%;

      @media (max-width: $breakpoint_md) {
        padding: 30px 20px;
      }
      
      h3 {
        padding-bottom: 10px;
      }
    }

    .icon {
      width: 90px;
      height: 90px;
      margin-bottom: 30px;

      .material-symbols {
        color: $white;
        font-size: 3.125rem;
      }
    }
  }
  
  .arrow {
    background-image: url("/static/svg/cms_plugins/arrow.svg");
    margin: 30px 0;
    width: 52.4px;
    height: 30px;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    bottom: 0px;
    left: 40px;
  }
  
  &:hover .arrow {
    opacity: 1;
  }
}


.dots-wrapper {
  position: relative;

  .dots-navigation {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 10px;

    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 5px;
      background-color: #bbb;
      border-radius: 10px;
      cursor: pointer;

      &.active {
        background-color: $dark_orange;
        width: 80px;
      }
    }

    @media (min-width: $breakpoint_lg) {
      position: absolute;
      right: -70px;
      transform: rotate(90deg);
      padding-bottom: 50px;
    }
  }
}

.service-elements {
  position: relative;
}

.service-element {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-50%);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 0;
  pointer-events: none;
}

.service-element.active {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
  transform: translateY(-50%);
}

.service-element.slide-in-up {
  transform: translateY(0);
}

.service-element.slide-in-down {
  transform: translateY(-100%);
}

.service-element.active.slide-in-up,
.service-element.active.slide-in-down {
  transform: translateY(-50%);
}

.service-element.slide-out-up {
  transform: translateY(-100%);
  opacity: 0;
}

.service-element.slide-out-down {
  transform: translateY(0);
  opacity: 0;
}