/* Mobile Hero to Carousel Parallax Effect Fix */
/* Ensures smooth parallax transition from video hero to carousel on mobile */

@media screen and (max-width: 767px) {
  /* Make hero section allow overlap */
  .hero.video-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Content wrapper should allow carousel to slide over video */
  .content-wrapper {
    position: relative;
    z-index: 2;
    margin-top: 0 !important; /* Carousel starts at bottom of screen */
    background: transparent !important;
  }

  /* Mobile carousel should have solid background to cover video as it scrolls up */
  .carousel-section-mobile {
    background: #ececec !important;
    border-radius: 0 !important;
    padding-top: 2rem !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 -2vw 4vw rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for depth */
  }

  /* Ensure video background stays fixed during scroll */
  .video-background {
    position: fixed !important;
    z-index: 0 !important;
  }
}