/* 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: 45vh;             /* position 60% down viewport */
  left: 50%;             /* start from center horizontally */
  transform: translateX(-50%); /* shift left by 50% of its width to center */
  height: 50px;          /* or any fixed height you want */
  width: 10vw;           /* 10% viewport width */
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.logo {
  width: 60vw; 
  display: block; 
  z-index: 9; 
  user-select: none;
  transition: transform 5s; transition: 3s in and out;
   
  }

  .logo:hover {
  transform: scale(2.0);
  }

.flexbox-item-9 {
  position:absolute;
top:95vh;
  left:50vw;
    transform: translateX(-50%); 
  display: flex;
  z-index: 8;
}
 .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);
}

.flexbox-item-10 {
position:absolute;
top:95vh;
   left:92vw;
    transform: translateX(-50%); 
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;

    z-index: 8;
  }

        .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: 1/1; /* 👈 keeps it 9:16 */
    width: 240vw;    /* full height */
    
       /* (9/16)*100vh, keeps correct ratio */
  object-fit: cover;
  z-index: 0;
  }
  
  .flexbox-item-3{
    display:flex;
    position: absolute;
    overflow: hidden;
    top:30vh;
    left:50vw;
    width: 100vw;
    transform: translateX(-50%); 
    height:40vh;
    align-items: center;
    justify-content: center;
    z-index: 6;
   
  }
  
  .logo {
    width: 330vw; 
    z-index: 9; 
    display: block; 
    }

  
  .flexbox-item-9 {
    position:absolute;
    top:97vh;
    left:50vw;
    transform: translateX(-50%); 
    display: flex;
  }
   .footer {
font-size: 1vh; /* Set the font size */
color: white(0, 0, 0); /* Dark text color */
font-family: Avenir-Light;
color: rgb(182, 182, 182);
}

  .flexbox-item-10 {
    position:absolute;
    top:97vh;
    left:87vw;
      transform: translateX(-50%); 
      align-items: center;
      justify-content: center;
      flex-direction: column;
      display: flex;
      z-index: 8;
    }
.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: 1vh;
}
#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: 600vw;
    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: 1/1; /* 👈 keeps it 9:16 */
    width: 600vw;    /* full height */
    
       /* (9/16)*100vh, keeps correct ratio */
  object-fit: cover;
  z-index: 0;
  }
  
  .flexbox-item-3{
    display:flex;
    position: absolute;
    overflow: hidden;
    top:30vh;
    left:50vw;
    width: 100vw;
    transform: translateX(-50%); 
    height:40vh;
    align-items: center;
    justify-content: center;
    z-index: 6;
   
  }
  
  .logo {
    width: 400vw; 
    z-index: 9; 
    display: block; 
    }

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

  .flexbox-item-10 {
    position:absolute;
    top:97vh;
    left:85vw;
      transform: translateX(-50%); 
      align-items: center;
      justify-content: center;
      flex-direction: column;
      display: flex;
      z-index: 8;
    }
.privacy { 
  font-size: 0.8vh; /* 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;
}
}
}