:root {
    --nav-scroll-z:11; 
    --hero-video-overlay-z:10;
}

body, html {
    overflow-x: hidden; 
}

body {
    margin: 0;
}

main {
    position: relative;
}
  
  .video-overlay {
    background: rgba(0,0,0, .65); 
    position: absolute;
    z-index: var(--hero-video-overlay-z, 10);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.6;
  }
  
  .video-background {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }
  
  .video-background iframe {
    position: absolute;
    filter: brightness(0.35) grayscale(1); 
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
  }
  
  @media (min-aspect-ratio: 16/9) {
    .video-background iframe {
      /* height = 100 * (9 / 16) = 56.25 */
      height: 56.25vw;
    }
  }
  @media (max-aspect-ratio: 16/9) {
    .video-background iframe {
      /* width = 100 / (9 / 16) = 177.777777 */
      width: 177.78vh;
    }
  }

  /* =======  Video Background style  ======= */


  .hero-btn {
    z-index: 12; 
    position: relative;
  }
  .hero-section h6 {
      display: inline-block;
      font-weight: 400;
      font-size: 0.75rem;
      color: #dc2751;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 2px;
  }
  .hero-section h1 {
      position: relative;
      font-size: clamp(1rem, -0.75rem + 5.7778vw, 6.25rem);
      line-height: 1;
      letter-spacing: 3px;
      font-weight: 900;
      color: #fff;
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
  }
  .hero-section h1 span {
      position: relative;
      font-size: clamp(3rem, 0.75rem + 8.7778vw, 6.25rem);
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
      color: transparent;
      -webkit-text-stroke: 1px #fff;
      opacity: .8;
  }

  @media (min-width: 768px) {
    .hero-section h1 {
        margin-top: 4rem;
        margin-bottom: 1rem;
    }
    .hero-section h1 span {
      /* height = 100 * (9 / 16) = 56.25 */
      line-height: 8rem;
    }
  }
  @media (max-width: 767px) {
    .hero-section h1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .hero-section h1 span {
        /* height = 100 * (9 / 16) = 56.25 */
        line-height: 6rem;
      }
  }
  .hero-section p {
      font-family: 'Hind', sans-serif;
      font-size: 1rem;
      color: #fff;
      margin-bottom: 15px;
  }


  .hero-v-middle {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }