/* Services banner: layout only. Typography from style.css. */

.aptly-service-banner {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: left;
  color: white;
  overflow: hidden;
  padding-top: 85px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.aptly-service-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 35%, rgba(114, 179, 255, 0.24), rgba(114, 179, 255, 0) 45%),
    radial-gradient(circle at 76% 62%, rgba(129, 102, 255, 0.22), rgba(129, 102, 255, 0) 48%),
    linear-gradient(120deg, #060a1a 0%, #0f2347 44%, #112c5f 100%);
}

/* Animated line waves (decorative, behind overlay) */
.aptly-service-banner__waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aptly-service-banner__wave-track {
  position: absolute;
  left: 0;
  display: flex;
  width: 200%;
  height: min(48vh, 380px);
  will-change: transform;
}

.aptly-service-banner__wave-track--primary {
  bottom: 6%;
  animation: aptly-service-banner-wave-drift 32s linear infinite;
}

.aptly-service-banner__wave-track--secondary {
  bottom: 18%;
  height: min(40vh, 300px);
  opacity: 0.85;
  animation: aptly-service-banner-wave-drift-reverse 48s linear infinite;
}

.aptly-service-banner__wave-svg {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  display: block;
}

@keyframes aptly-service-banner-wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes aptly-service-banner-wave-drift-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aptly-service-banner__wave-track--primary,
  .aptly-service-banner__wave-track--secondary {
    animation: none;
    transform: translateX(0);
  }
}

.aptly-service-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 8, 20, 0.75) 0%, rgba(4, 8, 20, 0.55) 44%, rgba(4, 8, 20, 0.28) 100%);
  z-index: 1;
}

.aptly-service-banner > .site-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 4rem;
}

.aptly-service-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

@media (min-width: 1600px) {
  .aptly-service-banner > .site-wrap {
    padding-bottom: 5rem;
  }
}

@media (max-width: 1024px) {
  .aptly-service-banner {
    padding-top: 72px;
  }

  .aptly-service-banner > .site-wrap {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .aptly-service-banner__content {
    gap: 1.75rem;
  }
}

@media (max-width: 768px) {
  .aptly-service-banner {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 70vh;
    padding-top: 72px;
  }

  .aptly-service-banner > .site-wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .aptly-service-banner__content {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .aptly-service-banner {
    min-height: 100vh;
  }
}