#hero {
    min-height: fit-content;
}

#hero-overlay {
    background: linear-gradient(to top, white, #d1e1c270);
}

#hero-body {
    padding-top: 4em;
    gap: 6em;
}

.hero-header {
    max-width: 650px;
}

.hero-type {
    max-width: 650px;
    background: rgba(255, 255, 255, 0.303);
}

/* --- Carousel layout --- */

#hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* keeps a nice image ratio */
  margin: 0 auto;
}

/* Base styles for all carousel images */
#hero-carousel img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40vw;
  height: 70%;
  object-fit: cover;

  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  z-index: 0;

  border-radius: 12px;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    z-index 0.35s ease;
  pointer-events: none; /* front one will re-enable pointer events */
}

/* Front (active) image */
#hero-carousel img.is-front {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 3;
  pointer-events: auto;
}

/* Background images (about 80% size, 40% "poking out" left/right) */
#hero-carousel img.is-left {
  opacity: 0.7;
  transform: translate(-50%, -75%) scale(0.8); /* more to the left */
  z-index: 1;
}

#hero-carousel img.is-right {
  opacity: 0.7;
  transform: translate(-50%, -25%) scale(0.8); /* more to the right */
  z-index: 1;
}

/* Optional: make sure the container doesn't clip the sides too aggressively */
#hero-carousel {
  overflow: visible;
}

/* --- Hero type (button) interaction styles --- */

#hero-types-wrapper .hero-type {
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

#hero-types-wrapper .hero-type:hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

/* Active state when a card is selected */
#hero-types-wrapper .hero-type.active {
  border: 1px solid #1c9e6f;          /* tweak brand color */
  background-color: #f1fbf7;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

#scheduling {
    display: none;
}

@media (max-width: 1200px) {
  #scheduling {
    display: flex;
  }
  #scheduling-2 {
    display: none;
  }
}

@media (max-width: 900px) {
  #hero-body {
    flex-direction: column;
    gap: 6em;
  }
  .hero-type {
    max-width: unset;
  }

  #hero-carousel {
    max-height: 550px;
  }
  #hero-carousel img {
    width: 90vw;
    height: 100%;
  }

  /* Front (active) image */
  #hero-carousel img.is-front {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    pointer-events: auto;
  }

  /* Background images (about 80% size, 40% "poking out" left/right) */
  #hero-carousel img.is-left {
    opacity: 0.7;
    transform: translate(-63%, -50%) scale(0.8); /* more to the left */
    z-index: 1;
  }

  #hero-carousel img.is-right {
    opacity: 0.7;
    transform: translate(-37%, -50%) scale(0.8); /* more to the right */
    z-index: 1;
  }
}