/* 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);
}
.flexbox-container {
  position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}

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

.flexbox-item1 {
  position:absolute;
  top:-1.5%;
  left:80%;
  z-index: 4;
  height:10vh;
}

.star {
  width:4vw;
  display:flex;
  color:white;
  text-decoration: none;
  list-style: none;
  justify-content: center;
  align-items: center;
}

.flexbox-item-1-5 {
  position: absolute;
  top:0.8%;
  left:85%;
}
.flexbox-item-1-6 {
  position: absolute;
  top:0.8%;
  left:90%;
}

.reachs, .reachus {
  display:flex;
  color:rgb(255, 255, 255);
  text-decoration: none;
  list-style: none;
  text-align: center;
  font-size: 1.1vw;
  }

.flexbox-item-2{
  display:flex;
  height:90vh;
  width:50vw;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 25vw;  
  }

  .flexbox-item-2-5{
    position:absolute;
    z-index:2;
    top:79%;
  }
  .firstp {
    color:rgb(255, 255, 255);
    font-family: Avenir-Light;
    font-size:1.2vw;
    display: flex;
    text-align:center;
    align-items: center;
    padding:10px;
    z-index: 1;
    }

.flexbox-item-3 {
  position:absolute;
  width: 90vw;
  z-index:3;
  top:65%;
}
.flexbox-item-3-1 {
  position:absolute;
  width: 50vh;
  z-index:3;
  top:80%;
  transform: rotate(270deg);
}
.flexbox-item-3-1 img{
  width: 10vw;
}

.flexbox-item-3-2 {
  position:absolute;
  width: 50vh;
  z-index:3;
  top:85%;
  transform: rotate(270deg);
}
.flexbox-item-3-2 img{
  width: 8vw;
}
.flexbox-item-3-3 {
  position:absolute;
  width: 50vh;
  z-index:3;
  top:90%;
  transform: rotate(270deg);
}
.flexbox-item-3-3 img{
  width: 5vw;
}
.enter {
  justify-content: center;
  display: flex;
  color:rgb(255, 255, 255);
  align-items: center;
  z-index: 3;
  flex-shrink: 1;
  padding:10px;
  
  }
  #enter {
    display:flex;
    font-size:7vw;
    color:white;
    z-index: 1;
    flex-shrink: 1;
    font-family: Avenir-Light;
    font-style: normal;
    }
 

  .flexbox-item-4 {
    width: 90vw;
  }

  .flexbox-item-5 {
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top:95%;
    display: flex;
    width:65vw;
    height:70vh;
  }

  .flexbox-item-6 {
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top:130%;
    display: flex;
    width:90vw;
    height:70vh;
  }
  .flexbox-item-7 {
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top:165%;
    display: flex;
    width:90vw;
    height:70vh;
  }
  .flexbox-item-8 {
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top:200%;
    display: flex;
    width:90vw;
    height:70vh;
  }
  .flexbox-item-9 .footer{
    position:absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    top:330%;
    width:90vw;
    height:10vh;
  }

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


/* Title Styling */
.title {
  font-size: 13vh; /* Large text size */
  font-weight: bold;
  display: flex;
text-align: center;
  color:white;
  text-decoration: none;
  font-family: Avenir-Light;
  
}
.title:hover {
  color:rgb(136, 136, 136);
}
.title2 {
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(189, 189, 189);
  font-family: Avenir-Light;
}

.flexbox-item-9 {
  position:absolute;
  top:245%;
  display: flex;
  width:90vw;
  height:5vh;
}
 .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-item1 {
    position:absolute;
    top:-1.3%;
    left:55%;
    z-index: 4;
    height:10vh;
  }
        .star {
          width:10vw;
        }
        .flexbox-item-1-5 {
          position: absolute;
          top:0.8%;
          left:70%;
        }
        .flexbox-item-1-6 {
          position: absolute;
          top:0.8%;
          left:85%;
        }
        .reachs, .reachus {
          font-size: 3vw;
          }
        .logo {
          width: 60vw;  
          }
          .flexbox-item-2-5{
            position:absolute;
            z-index:2;
            top:73%;
            width: 70vw;
          }
          .firstp {
            font-size:3vw;
            }
            .flexbox-item-3{
              position:absolute;
              z-index:2;
              top:66%;
            }
            #enter {
              display:flex;
              font-size:11vw;
            }
            .flexbox-item-4 {
              width: 70vw;
              height:100vh;
            }
          .title {
            font-size:15vw;
          }
          .title2 {
            font-size: 3vw;
 }
 .flexbox-item-4{
  width:100vw;
  height:100vh;
}
 
 .flexbox-item-5{
   height: 50vh;
 }
 .flexbox-item-6{
  height: 50vh;
}
.flexbox-item-7{
  height: 50vh;
}
.flexbox-item-8{
  height: 50vh;
}
.flexbox-item-9{
  height: 5vh;
}


 .footer {
    
  font-size: 2vw; /* Set the font size */

}
.flexbox-item-10 {
  position:absolute;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top:266.5%;
left:40%;
  display: flex;
  width:90vw;
  height:5vh;
}
.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: 1.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-item1 {
    position:absolute;
    top:-0.5%;
    left:55%;
    z-index: 4;
    height:10vh;
  }
}
@media (max-width: 400px) {
  .flexbox-item1 {
    position:absolute;
    top:-0.8%;
    left:55%;
    z-index: 4;
    height:10vh;
  }
}
}