/* ═══════════════════════════════════════════════════════════
   SERVICES SECTION - CSS Variables
   ═══════════════════════════════════════════════════════════ */
.section-services {
  /* Layout & Spacing */
  --svg-wrapper-min-height: 600px;
  --images-wrapper-margin-top: 70px;
  --images-wrapper-translate-y: 60px;

  /* Canvas Dimensions */
  --canvas-height: 710px;
  --canvas-2-top: 70%;

  /* Services Images Container */
  --services-images-width: 390px;
  --services-images-top: -25px;

  /* Individual Image Positions (vertical) */
  --faucet-top: -80px;
  --drop-top: 50px;
  --earth-top: 140px;

  /* Shared values */
  --wave-oversize: 120%;
  --wave-offset: -10%;
}


.section-canvas {
  --canvas-2-top: 90%;
}

.section-services {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-top: 0 !important;
}

.canvas-2 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  top: var(--canvas-2-top);
  height: 900px;
}

@media screen and (min-width: 1600px) {
  .canvas-2 {
    --canvas-2-top: 85%;
  }
}

.canvas-2 svg {
  height: 100%;
  width: 100%;
}

.section-services .section-header {
  align-self: start;
}

.section-services .section-header .section-description {
  color: black;
}

.section-services .canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--canvas-height);
}

.section-services .canvas svg {
  width: var(--wave-oversize);
  height: 100%;
  max-width: unset;
}

.section-services {
}


/* Oversize the SVG horizontally */
.section-services .waves {
  position: absolute;
  left: var(--wave-offset);
  width: var(--wave-oversize);
  height: 100%;
}

/* Animations */
.section-services .wave {
  will-change: transform;
}

@keyframes waveMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-120px);
  }
}

@keyframes waveFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.section-services .wave-front {
  animation: waveMove 10s linear infinite,
  waveFloat 6s ease-in-out infinite;
}

.section-services .wave-back {
  animation: waveMove 18s linear infinite reverse,
  waveFloat 9s ease-in-out infinite;
  opacity: 0.6;
}


section.section.section-canvas {
  padding: 0;
}

/* Performance hint */
#services-waves-1,
#services-waves-2,
#services-waves-3 {
  will-change: transform;
}

/* Horizontal motion */
@keyframes services-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-140px);
  }
}

/* Vertical motion */
@keyframes services-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
  }
}

/* Back layer */
#services-waves-3 {
  animation: services-drift 30s linear infinite,
  services-float 14s ease-in-out infinite;
}

/* Middle layer */
#services-waves-2 {
  animation: services-drift 22s linear infinite reverse,
  services-float 10s ease-in-out infinite;
}

/* Front layer */
#services-waves-1 {
  animation: services-drift 14s linear infinite,
  services-float 7s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  #services-waves-1,
  #services-waves-2,
  #services-waves-3 {
    animation: none;
  }
}


.section-services .images-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: var(--images-wrapper-margin-top);
  transform: translateY(var(--images-wrapper-translate-y));
}


.section-services .circle-label {
  color: white;
}


.section-services .svg-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  min-height: var(--svg-wrapper-min-height);
}

.section-services svg {
  /*max-width: 50vw;*/
  display: block;
}

#diagram-container path {
  stroke-width: 3px;
}

.section-services .circle-label {
  position: absolute;
  font-size: var(--font-size-body-md);
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  /* Hidden initially for animation */
}

.section-services .circle-label.left {
  text-align: right;
}

.section-services .circle-label.right {
  text-align: left;
}

.section-services .circle-label.has-link,
.section-services [data-type="icon"].has-link {
  cursor: pointer;
}

/* Services Images */
.section-services .services-images {
  position: absolute;
  top: var(--services-images-top);
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--services-images-width);
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-services .services-images img {
  position: absolute;
  /* left: 50%; */
  display: block;
}

.section-services .services-images .faucet {
  top: var(--faucet-top);
  height: auto;
  opacity: 0;
}

.section-services .services-images .drop-of-water {
  top: var(--drop-top);
  height: auto;
  opacity: 0;
}

.section-services .services-images .earth {
  top: var(--earth-top);
  height: auto;
  opacity: 0;
}


/*to be removed*/
#diagram-container > foreignObject:has(*[data-lottie-source*="assets/lottieicons/open-enrollment.json"]) > div {
  width: 60px !important; /* new width */
  height: 70px !important; /* new height */
  display: flex;
  justify-content: center;
  align-items: center;
}

#diagram-container > foreignObject:has(*[data-lottie-source*="assets/lottieicons/open-enrollment.json"]) {
  width: 53px !important;
  height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0px, -16px);
}

@media (min-width: 768px) {
  .services-items {
    display: none;
  }
}

@media (max-width: 1280px) {
  .section-services .circle-label {
    font-size: 1.2rem;
    width: 100px;
    white-space: normal;
  }

}

@media (max-width: 1000px) {
  .service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: var(--radius-2);
  }

  .service-item.has-link {
    cursor: pointer;
  }

  .services-items {
    z-index: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 330px;
  }

  .service-title {
    color: var(--primary-color);
    font-size: 1.3rem;
  }

  .service-icon {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-icon svg {
    width: 20px !important;
  }
}

@media (max-width: 767px) {


  #diagram-container {
    display: none;
  }

  .section-services .svg-wrapper {
    display: none;
  }

  .section-services .services-images {
    position: revert;
    transform: unset;
  }

  .section-services {
    --faucet-top: 0px;
    --drop-top: 110px;
    --earth-top: 150px;
  }

  .section-services .images-wrapper {
    transform: unset;
    margin-top: 20px;
  }

  .section-services .services-images .faucet {
    max-width: 90px;
  }

  .section-services .services-images .drop-of-water {
    max-width: 30px;
  }

  .section-services .services-images .earth {
    max-width: 200px;
  }


  .section-services .canvas {
    --canvas-height: 570px;
  }

  .section-services .canvas svg {
    --wave-oversize: 250%;
  }

  .canvas-2 {
    min-height: 540px;
    --canvas-2-top: 66%;
  }


}