@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;
  }
 
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
   
  body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #000000;
      margin: 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-1 {
      width: 100vw;
      height:10vh;
      z-index:1;
    }
    .flexbox-item-1-2{
      width: 50vw;
      height:20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index:1;
     
    }
.star {
    width: 60vw;
    transition: 2s;
}
.star:hover{
    width: 5vw;
    opacity: 0.5;
}
.star:hover + #kung{
  opacity: 0.2;
}

    .flexbox-item-2 {
      width: 80vw;
      height:40vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:10vh;
      z-index:1;
    }
    #kung {
      width: 40vw;
      position:absolute;
      justify-content: center;
      align-items: center;
      margin:0 ;
      
  }
    .flexbox-item-3 {
      width: 70vw;
      height:20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      
      z-index:1;
    }
 

    .flexbox-item-5 {
      width: 50vw;
      height:50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index:1;
      
      
    }
    #descript {
      font-size: 2.5vh;
      font-family: Avenir-Light;
      color:rgb(255, 255, 255);  
      padding:2vw;
      text-align:left;
      text-align-last: left;
    }
    .flexbox-item-6 {
      width: 100vw;
      height:70vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index:1;
    }
    .flexbox-item-7 {
      width: 70vw;
      height:80vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:-10vh;
      z-index:1;
    }
    .background_image{
 position: absolute;
  display: flex;
 top:0;
 left:0;
  z-index:0;
  width: 100%;
 height: 100vh;
 overflow: hidden;

  object-fit: cover;
 
}
 .background_image img{
  display: block;
  object-fit: cover;
  z-index:-1;
   overflow: hidden;

 
}

    .flexbox-item-8 {
      width: 70vw;
      height:10vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index:1;
    }
    .footer {
      display:flex;
    justify-content: center;
      text-align: center; /* Center-align the text */
      font-size: 0.8vw; /* Set the font size */
      color:rgb(255, 255, 255); /* Dark text color */
      font-family: Avenir-Light;
    
    }
    .header {
      width: 100%;
      background-color: rgb(0, 0, 0);
      padding: 1em 0;
      text-align: center;
      justify-content: center;
      z-index: 1000;
      border-bottom: 0.1vh solid #ffffff;
      }
      .home-link {
          color: rgb(255, 255, 255);
          text-decoration: none;
          font-size: 1.6vw;
          font-family: Avenir-Light;
          margin:4vw;
          }
          .home-link:hover {
            color:grey;
            }

.gallery {
  text-align: center;
  overflow: hidden;
}



h1 {
  font-size: 6vh;
  font-family: Avenir-Light;
  color:rgb(255, 255, 255);

}
.textbox p {

  font-family: Avenir-Light;
  text-align: justify;
  text-align-last: center;
  font-size: 2vh;
margin-top:3%;
}

.image-container {
  position: relative;
  display: inline-block;
  margin: 3vw;
  
}

.hover-image {
  position:relative;
  width: 12vw;
  height: auto;
  margin-top:-13%;
  border: 0.1vh solid white;
}

.textbox {
  position:fixed; /* Fix the position to the viewport */
   /* Center horizontally */
  transform: translateY(-10px);
  transform: translate(-50%, -50%);
 top:20%;
 left:50%;
 transform: translateX(-50%) translateY(-10px);
 pointer-events: none;
  background-color: rgba(0, 0, 0, 0.89);
  color: #fff;
  padding: 1vh;
  border-radius: 0.1vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease-in-out, visibility 0.5s ease-in-out;
  text-align: center;
  font-family: Avenir-Light;
  width: 45%; /* Adjust width for the textbox */
  font-size: 1em; /* Font size */
  word-wrap: break-word;
  max-height: 65vh; /* Max height for overflow */
  overflow-y: auto; /* Scroll if content exceeds the height */
  z-index: 10; /* Ensure textbox is on top */
  border: 0.1vh solid rgb(189, 189, 189);
}

.textbox.visible {
  opacity: 1; /* Make the text box visible */
  transform: translateX(-50%) translateY(0); /* Moves the box to its visible position */
  pointer-events: auto; /* Allow interaction */
  visibility: visible;
}

/* Close button style */
.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.close-btn:hover {
  color: rgb(90, 90, 90); /* Change color on hover */
}

.name-tag, .role-tag {
  color: rgb(255, 255, 255);
  font-family: Avenir-medium;
  font-size: 2.5vh;
  position:relative;
margin-top:1vh;
}

.textbox p {
  margin-bottom: 3%;
}

#message {
  color:rgb(117, 117, 3);
}
 
@media (max-width: 1024px) {
  .home-link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size:3.5vw;
    font-family: Avenir-Light;
    margin:2vw;
    }
    .flexbox-item-1-2{
      width: 30vw;
      height:20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:5vh;
     
    }
.star {
    width: 20vw;
    transition: 2s;
}
.star:hover{
    width: 5vw;
    opacity: 0.5;
}
.star:hover + #kung{
  opacity: 0.2;
}

    .flexbox-item-2 {
      width: 80vw;
      height:30vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:0vh;
    }
    #kung {
      width: 60vw;
      position:absolute;
      justify-content: center;
      align-items: center;
      margin:0 ;
      
  }
    .flexbox-item-3 {
      width: 90vw;
      height:20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:0vh;
    }
    h1 {
      font-size: 4vh;
      font-family: Avenir-Light;
      color:rgb(255, 255, 255);
  
  }
  .textbox p {
      font-family: Avenir-Light;
      text-align: center;
      justify-content: center;
      font-size: 2vh;
  margin-top:3%;
  }

    .flexbox-item-5 {
      width: 60vw;
      height:90vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      
    }
    #descript {
      font-size: 2.5vh;
      font-family: Avenir-Light;
      color:rgb(255, 255, 255);  
      padding:2vw;
    }
    .flexbox-item-6 {
      width: 90vw;
      height:430vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .hover-image {
      position:relative;
      width: 50vw;
      height: auto;
      margin-top:-13%;
      border: 0.1vh solid white;
  }
  .image-container {
      position: relative;
      display: inline-block;
      margin: 10vh;
      
  }
  .name-tag, .role-tag {
      color: rgb(255, 255, 255);
      font-family: Avenir-medium;
      font-size: 4vh;
      position:relative;
  margin-top:1vh;
  }
  .textbox {
  width: 70%; 
  }
    .flexbox-item-7 {
      width: 70vw;
      height:80vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top:-10vh;
    }
    .flexbox-item-8 {
      width: 70vw;
      height:10vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
 
  .footer {
    display:flex;
  justify-content: center;
    text-align: center; /* Center-align the text */
    font-size: 2vw; /* Set the font size */
    color:rgb(255, 255, 255); /* Dark text color */
    font-family: Avenir-Light;
  
}
}
@media (max-width: 500px) {
  .home-link {
      color: rgb(255, 255, 255);
      text-decoration: none;
      font-size:3.5vw;
      font-family: Avenir-Light;
      margin:2vw;
      }
      .flexbox-item-1-2{
        width: 300vw;
        height:10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:5vh;
       
      }
  .star {
      width: 30vw;
      transition: 2s;
  }
  .star:hover{
      width: 5vw;
      opacity: 0.5;
  }
  .star:hover + #kung{
    opacity: 0.2;
}

      .flexbox-item-2 {
        width: 80vw;
        height:30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:0vh;
      }
      #kung {
        width: 80vw;
        position:absolute;
        justify-content: center;
        align-items: center;
        margin:0 ;
        
    }
      .flexbox-item-3 {
        width: 90vw;
        height:20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:0vh;
      }
      h1 {
        font-size: 4vh;
        font-family: Avenir-Light;
        color:rgb(255, 255, 255);
    
    }
    .textbox p {
        font-family: Avenir-Light;
        text-align: center;
        justify-content: center;
        font-size: 2vh;
    margin-top:3%;
    }

      .flexbox-item-5 {
        width: 80vw;
        height:105vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      #descript {
        font-size: 2.5vh;
        font-family: Avenir-Light;
        color:rgb(255, 255, 255);  
        padding:2vw;
        text-align-last: left;
      }
      .flexbox-item-6 {
        width: 90vw;
        height:320vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .hover-image {
        position:relative;
        width: 50vw;
        height: auto;
        margin-top:-13%;
        border: 0.1vh solid white;
    }
    .image-container {
        position: relative;
        display: inline-block;
        margin: 10vh;
        
    }
    .name-tag, .role-tag {
        color: rgb(255, 255, 255);
        font-family: Avenir-medium;
        font-size: 4vh;
        position:relative;
    margin-top:1vh;
    }
    .textbox {
    width: 70%; 
    }
      .flexbox-item-7 {
        width: 70vw;
        height:80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top:-10vh;
      }
      .flexbox-item-8 {
        width: 70vw;
        height:10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
   
    .footer {
      display:flex;
    justify-content: center;
      text-align: center; /* Center-align the text */
      font-size: 2vw; /* Set the font size */
      color:rgb(255, 255, 255); /* Dark text color */
      font-family: Avenir-Light;
    
  }
  }