/* General Reset */
 
@font-face {
  font-family: 'Avenir-Medium';
  src: url('/Fonts/Avenir-Medium.woff2') format('woff2'),
       url('/Fonts/Avenir-medium.woff') format('woff'),
       url('Fonts/Avenir-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
  font-family: 'Avenir-Light';
  src: url('/Fonts/Avenir-Light.woff2') format('woff2'),
       url('/Fonts/Avenir-Light.woff') format('woff'),
       url('/Fonts/Avenir-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: Avenir-Light;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling */
  background-color: rgb(0, 0, 0);
    overflow-x: hidden;
    }
.flexbox-container {
  position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}

.flexbox-item {
text-align: center;
justify-content: center;
}

.flexbox-item-2 {
  position: relative;
  display: flex;
  width: 100vw;
  z-index:2;
 height: 100vh;
}

.video-container {
position: relative;
  display:flex;
  align-items: center;
overflow: hidden;
object-fit: cover;
}
.video-container iframe {
  align-items: center;
  justify-content: center;
   /* Match the border radius for consistency */
height: 100vh;
width:177.78vh;
object-fit: cover;
filter: brightness(2);
filter: contrast(1.0);
transition: filter 0.2s ease;
z-index: 0;
}

.flexbox-item-3{
  display:flex;
  position: absolute;
  top:30%;
  left:0;
  height:40vh;
  width:100vw;
  align-items: center;
  justify-content: center;
  z-index: 6;
 
}

.logo {
  width: 120vw; 
  z-index: 9; 
  transition: 5s ease ease-in-out;
  }
  .logo:hover {
    filter:brightness(0.7);
  }

.flexbox-item-4 {
  position:absolute;
 display: flex;
 top:50%;
 left:0;
  width: 100vw;
  height:30vh;
  z-index:5;
}

.homenav {
  color: rgb(255, 255, 255);
        text-decoration: none;
        font-size: 1.6vw;
        font-family: Avenir-Light;
        display: inline-block;
}

.enter {
  justify-content: center;
  display: flex;
  color:rgb(255, 255, 255);
  align-items: center;
  z-index: 4;
  flex-shrink: 1;
 
}
.flexbox-item-4 .homenav h1 {
  transition:2s ease-in-out;
}
  .flexbox-item-4 .homenav h1:hover {
    filter:brightness(0.7);
  }
  
  #enter {
    display:flex;
    font-size:4vw;
    color:white;
    z-index: 4;
    flex-shrink: 1;
    font-family: Avenir-Light;
    font-style: normal;
   transition: 1s ease-in-out;
    }
  

  .flexbox-item-9 .footer{
    display: flex;
    top:99%;
    left:0;
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
    width:100vw;
    height:1vh;
    z-index: 8;
  }

  .flexbox-item-10 {
    position:absolute;
  top:102%;
  left:45%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    width:100vw;
    height:1vh;
    z-index: 8;
  
  }



.flexbox-item-9 {
  position:absolute;
  top:99%;
  left:0;
  display: flex;
  width:100vw;
  height:2vh;
}
 .footer {
    
          font-size: 0.8vw; /* Set the font size */
          color: white(0, 0, 0); /* Dark text color */
          font-family: Avenir-Light;
          color: rgb(182, 182, 182);
        }

        .privacy {
    
          font-size: 0.7vw; /* Set the font size */
          color: white(0, 0, 0); /* Dark text color */
          font-family: Avenir-Light;
          color: rgb(182, 182, 182);
        }
  
        #privacyModal.modal {
          display: none;
          position: fixed;
          z-index: 999;
          left: 0;
          top: 0;
          width: 100vw;
          height: 70vh;
          color:rgb(255, 255, 255);
          font-size: 1.5vh;
          background-color: rgba(0, 0, 0, 0.678);
        }

        .modal-content {
          background: rgba(0, 0, 0, 0.719);
          padding: 2vw;
          margin: 10% auto;
          max-width: 30vw;
          position: relative;
          color: white;
        }
        
        .close-button {
          position: absolute;
          top: 1vh;
          right: 2vw;
          font-size: 2.5vh;
          font-weight: bold;
          cursor: pointer;
        }



@media (max-width: 1025px) {
 
  .flexbox-item-2 {
    position: relative;
    display: flex;
    width: 200vw;
    z-index:2;
   height: 100vh;
  }
  
  .video-container {
  position: relative;
    display:flex;
    align-items: center;
  overflow: hidden;
  object-fit: cover;
  }
  .video-container iframe {
    align-items: center;
    justify-content: center;
     /* Match the border radius for consistency */
     aspect-ratio: 9/16; /* 👈 keeps it 9:16 */
    width: 160vw;    /* full height */
    
       /* (9/16)*100vh, keeps correct ratio */
  object-fit: cover;
  filter: brightness(2);
  filter: contrast(1.0);
  transition: filter 0.2s ease;
  z-index: 0;
  }
  
  .flexbox-item-3{
    display:flex;
    position: absolute;
    top:30%;
    left:0;
    height:40vh;
    width:100vw;
    align-items: center;
    justify-content: center;
    z-index: 6;
   
  }
  
  .logo {
    width: 210vw; 
    z-index: 9; 
    }
  
  .flexbox-item-4 {
    position:absolute;
   display: flex;
   top:52%;
   left:0;
    width: 100vw;
    height:30vh;
    z-index:5;
  }
  
  
  
  .enter {
    justify-content: center;
    display: flex;
    color:rgb(255, 255, 255);
    align-items: center;
    z-index: 4;
    flex-shrink: 1;
    
    
    }
    #enter {
      display:flex;
      font-size:5vw;
      color:white;
      z-index: 4;
      flex-shrink: 1;
      font-family: Avenir-Light;
      font-style: normal;
      }
   
  
    .flexbox-item-9 .footer{
      display: flex;
      top:97%;
      left:0;
      position:absolute;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      
      width:100vw;
      height:1vh;
      z-index: 8;
    }
  
    .flexbox-item-10 {
      position:absolute;
    top:97%;
    left:42%;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      display: flex;
      width:100vw;
      height:1vh;
      z-index: 8;
      margin-top:-0.5vh;
    }
  
  
  
  .flexbox-item-9 {
    position:absolute;
    top:97%;
    left:0;
    display: flex;
    width:100vw;
    height:1vh;
    margin-top:-2vh;
  }
.privacy { 
  font-size: 0.7vw; /* Set the font size */
  color: white(0, 0, 0); /* Dark text color */
  font-family: Avenir-Light;
  color: rgb(182, 182, 182);
  font-size: 0.8vh;
}
#privacyModal.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 20vh;
  width: 100vw;
  height: 70vh;
  color:rgb(255, 255, 255);
  font-size: 1.1vh;
  background-color: rgba(0, 0, 0, 0.678);
}

.modal-content {
  background: rgba(0, 0, 0, 0.719);
  padding: 2vw;
  margin: 10% auto;
  max-width: 60vw;
  position: relative;
  color: white;
}
@media (max-width: 500px) {
 
 
 
 
  .flexbox-item-2 {
    position: relative;
    display: flex;
    width: 500vw;
    z-index:2;
   height: 100vh;
  }
  
  .video-container {
  position: relative;
    display:flex;
    align-items: center;
  overflow: hidden;
  object-fit: cover;
  }
  .video-container iframe {
    align-items: center;
    justify-content: center;
     /* Match the border radius for consistency */
     aspect-ratio: 9/16; /* 👈 keeps it 9:16 */
    width: 300vw;    /* full height */
    
       /* (9/16)*100vh, keeps correct ratio */
  object-fit: cover;
  filter: brightness(2);
  filter: contrast(1.0);
  transition: filter 0.2s ease;
  z-index: 0;
  }
  
  .flexbox-item-3{
    display:flex;
    position: absolute;
    top:30%;
    left:0;
    height:40vh;
    width:100vw;
    align-items: center;
    justify-content: center;
    z-index: 6;
   
  }
  
  .logo {
    width: 270vw; 
    z-index: 9; 
    }
  
  .flexbox-item-4 {
    position:absolute;
   display: flex;
   top:52%;
   left:0;
    width: 100vw;
    height:30vh;
    z-index:5;
  }
  
  
  
  .enter {
    justify-content: center;
    display: flex;
    color:rgb(255, 255, 255);
    align-items: center;
    z-index: 4;
    flex-shrink: 1;
    
    
    }
    #enter {
      display:flex;
      font-size:6vw;
      color:white;
      z-index: 4;
      flex-shrink: 1;
      font-family: Avenir-Light;
      font-style: normal;
      }
   
  
    .flexbox-item-9 .footer{
      display: flex;
      top:97%;
      left:0;
      position:absolute;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      
      width:100vw;
      height:1vh;
      z-index: 8;
    }
    .footer {
      font-size: 0.7vh;
    }
  
    .flexbox-item-10 {
      position:absolute;
    top:97%;
    left:42%;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      display: flex;
      width:100vw;
      height:1vh;
      z-index: 8;
      margin-top:-0.5vh;
    }
  
  
  
  .flexbox-item-9 {
    position:absolute;
    top:97%;
    left:0;
    display: flex;
    width:100vw;
    height:1vh;
    margin-top:-2vh;
  }
.privacy { 
  font-size: 0.8vw; /* Set the font size */
  color: white(0, 0, 0); /* Dark text color */
  font-family: Avenir-Light;
  color: rgb(182, 182, 182);
  font-size: 0.7vh;
}
#privacyModal.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 20vh;
  width: 100vw;
  height: 70vh;
  color:rgb(255, 255, 255);
  font-size: 1.1vh;
  background-color: rgba(0, 0, 0, 0.678);
}

.modal-content {
  background: rgba(0, 0, 0, 0.719);
  padding: 2vw;
  margin: 10% auto;
  max-width: 60vw;
  position: relative;
  color: white;
}

}
}