html, body, h1, h2, h3, h4, h5, h6, p, ul, ol {
      margin: 0;
      padding: 0;
    }
       
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    overflow: auto;
  }


/* Fix video positioning */
.section-1-home {
  position: relative !important;
  height: 720px !important; /* or 100vh if you want it fullscreen */
  width: 100% !important;
  overflow: hidden !important;
  background-color: black !important; /* so you can confirm it's visible */
}

.hero-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 9999 !important;
  display: block !important;
}
/* Tablet Portrait specific adjustment */
@media only screen 
and (max-width: 991px) 
and (orientation: portrait) {
  /* Target both the container and the video */
  .section-1-home {
    height: 560px !important; /* Your radical height test */
    min-height: 560px !important; /* Force min-height too */
    max-height: 560px !important; /* Force max-height as well */
  }
  
  /* Ensure video proportions adjust with container */
  .hero-video {
    height: 100% !important;
    max-height: 560px !important;
  }
}


/* Override styles for scroll animation - with faster transitions */
.section-3-home {
  background-color: rgba(255, 255, 255, 1) !important; /* Force white background initially */
  transition: background-color 0.15s ease !important; /* Even faster transition */
}

/* Hide white text initially */
.section-3-home .white-font {
  color: #ffffff; /* Keep the white color */
  opacity: 0 !important; /* Start invisible */
  transition: opacity 0.15s ease !important; /* Match background speed */
}

/* Hide the image initially */
.section-3-home .box2-container-2-section-3-home .image {
  opacity: 0 !important; /* Hide image */
  transition: opacity 0.15s ease !important; /* Match background speed */
}

/* These classes will be added by JavaScript as user scrolls */
.section-3-home.bg-transitioning {
  background-color: rgba(33, 33, 33, var(--scroll-progress)) !important; /* Dynamic value */
}

.section-3-home.bg-visible {
  background-color: rgba(33, 33, 33, 1) !important; /* Final dark grey */
}

/* Text visibility */
.section-3-home .white-font.text-visible {
  opacity: 1 !important;
}

/* Image visibility */
.section-3-home .image.image-visible {
  opacity: 1 !important;
}


/* Dance spotligh CSS */

/* Initial state for all spotlight containers */
[class^="section-folk-spotlight-"] .container-1-section-folk-spotlight {
  transform: translateX(-100px) !important; /* Start position - off to the left */
  opacity: 0 !important; /* Start invisible */
  transition: transform 0.5s ease, opacity 0.4s ease !important; /* Smooth transition */
}

/* Class that will be added when container should be visible */
[class^="section-folk-spotlight-"] .container-1-section-folk-spotlight.slide-visible {
  transform: translateX(0) !important; /* Final position */
  opacity: 1 !important; /* Fully visible */
}