body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  background-color: rgb(0, 0, 0);
  margin: 0%;
  padding: 40px 80px 0px 60px;
}
/* Add this in your style.css or create a new CSS file */
#loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* Set your preferred background color */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's on top of other elements */
}

.loading-text {
  font-size: 24px;
}

#second-row {
  padding-top: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 580px;

}

.vertical-menu {
  align-self: flex-end;
  align-content: flex-end;
  font-size: 16px;
  line-height: 25px;
  color: white;
  width: 420px;
}

video {
  margin: 30px 0px 0px 40px;
  /* margin:4% 0% 1% 3%; */
  height: 28%;
}


p {
  /* padding-bottom: 40px; */
  animation: animate 4s linear infinite;
  color: white;
  
}

@keyframes animate {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.1;
  }
}

a:link {
  color: white;
  font-weight: lighter;
  text-decoration: none;
}



/* .video-matrix-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    width: 80%;
} */
#video-matrix {
 opacity: 0;
  animation: fadeIn 4s ease forwards;

  width: 76%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* align-content: flex-end; */
  justify-content: flex-end;
  /* background-image: url('hudielangu/butterfly_garden3.png'); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;

}


.fadeOnScroll {
  color: white;
  opacity: 1;
  transition: opacity 3s ease;
}

.fadeOnScroll.fadeOut {
  opacity: 0.3;
}



/* .video-matrix {
 
    opacity: 0;
    animation: fadeIn 2.5s ease forwards; 
   
    width: 76%;
    height: 70vh;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: flex-end;
}

video {
    margin: 30px 0px 0px 40px;
    height: 28%;
} */

.spacer {
  padding-top:20px;
   padding-bottom:10px;
  height: 80px;
}

.preview-detail {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}


.project-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35%;
  padding-right: 13%;
}

.project-image-link {
  display: inline-block; /* Ensure the link respects dimensions */
  overflow: hidden; /* Hide overflowing content */
  position: relative; /* Establish positioning context */
  width: 52%; /* Adjust as needed */
  height: 400px; /* Adjust as needed */
}

.fadeOnScroll {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop the image to cover the container */
  position: absolute; /* Set position to absolute for centering */
  top: 50%; /* Move the image to the center vertically */
  left: 50%; /* Move the image to the center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */
}
.animation-graphic{
  justify-content: space-between;
  flex-direction: row;
  display: flex;
  width: 100%;
}

.animation-graphic-title{
  width: 47%;
}
.title-image-link {
  display: inline-block; 
  overflow: hidden; 
  position: relative; 
  width: 100%; /* Adjust as needed */
  height: 350px; /* Adjust as needed */
  margin-bottom: 10px;
}
.title-image{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop the image to cover the container */
  position: absolute; /* Set position to absolute for centering */
  top: 50%; /* Move the image to the center vertically */
  left: 50%; /* Move the image to the center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */
  margin-bottom: 10px;
}

.scroll-spacer{
  padding-top:10px;
  padding-bottom: 10px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: rgb(0, 0, 0); /* Choose your desired background color */
  color: white; /* Choose your desired text color */
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.divider {
  background-color: white;
  height: 0.75px;
  margin-top: 50px;
  margin-bottom: 0px;
}

.title-tag{
  margin-top:30px ;
}

.title-description{
  display: inline;
}

.bg_video{
  position: absolute; top: 0; left: 0; margin: 0;width: 100%; height: 95%; object-fit: cover; z-index: -1;
}

.new-media-spacer-top{
  height: 30px;
}
@media (min-width: 1540px) {
  #second-row {
    height: 70vh;
  }
  #video-matrix {
    width: 120vh;
  }
  .project-image-link,.title-image-link {
    height: 450px;
  }

}

@media (max-width: 1200px) {
  #video-matrix {
    width: 90%;
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }
  .vertical-menu {
    width: 300px;
  }

  .project-image-link,.title-image-link {
    height: 400px;
  }
}

@media (max-width: 1000px) {
    #video-matrix {
      background-image: url('hudielangu/butterfly_garden4.png');
      width: 100%;
      background-color: rgb(0, 0, 0);
      opacity: 0.2;
    }
    .vertical-menu {
      width: 100px;
    }
  
    .project-image-link,.title-image-link {
      height: 300px;
    }
   
  }
  

@media only screen and (max-width: 700px) {
  .bg_video{
height: 0;width: 0;
  }
  
  .new-media-spacer-top{
    height: 100px;
  }
#second-row{
background-image: url(hudielangu/butterfly_garden2.png);
background-color: black;

    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */

    top:0px;
    left: 0px;
    height:80vh;
    width: 100vw;
    z-index: -10000;
  

}

.title-description{
  display: none;
}

.title-tag{
  margin-top:0px ;
}

.vertical-menu {
    align-content: flex-start;
    padding-bottom: 10px;
padding-left: 20px;
  }

.spacer{
    background-image: linear-gradient(to top, black , rgba(0, 0, 0, 0));
  
}

  #video-matrix{
visibility: hidden;
    }

    body {
        padding: 0px;
      }
      
   
    #projectsSection{
        padding-right: 20px;
        padding-left: 20px;
        padding-top:0px;

    }

    

 .preview-detail,.animation-graphic {
    flex-direction: column; /* Change flex direction to column for smaller screens */
    text-align: center;
  }
  .animation-graphic{
    margin-top: -40px;
  }

  .project-image-link,.title-image-link{
      width: 100%;
      height: 250px;
  }
  
  .animation-graphic-title{
    width: 100%;
  }
  
  .project-image{
    padding-bottom: 20px;
  }
  .title-image{
    margin-top: 20px;
  }
.project-info, .title-project-info{
    padding: 0px;
    text-align: left;
    width: 100%;
    order: 1;

}
.tag{display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 90%;

}
.tag-detail{
  padding-right: 10px;
}
.divider{
  margin-top: 20px;
  margin-bottom: 0px;
}


}