body{
  background-color: #FBC2B5;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  padding-bottom: 0px; 
  padding-top: 20px; 


}

/*Nav Bar*/
.nav-item{
    justify-content: center;
    text-align: center;
    padding-left: 40px;

}
.navbar-nav .nav-link.active.glow {
  color: white; 
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); 
}
.navbar-nav .nav-item:hover .nav-link {
  color: #A14A76; 
  text-decoration: underline;
}
.carousel-control-prev, .carousel-control-next {
  bottom: 75%;
  z-index: 5;

}
  #name{
    text-align: center;
    color: #353535;
    font-family: 'Koulen', sans-serif;
    text-decoration: none;
    font-size: 25px;
    padding-left: 110px;
  }
  .youmans {
    color: #747474;
}   
.navbar {
  backdrop-filter: blur(5px);
}
/*Nav Bar*/






  
  h2{
    font-family: 'Koulen';
    font-weight: lighter;
  }
  p{
    font-family: 'KoPub Batang';
    color: #747474;
  }
  
  
/*Front Page*/
.FP {
  position: relative;
  text-align: center;
  color: white;
  font-family: 'Komoda', sans-serif;
  margin-bottom: 10%;
  opacity: 0;
  animation: fadeIn 7s forwards;
  margin-top: 55px;
  position: relative;
  text-align: center;
  color: white;
  max-width: 100%;
  overflow: hidden;
  height: 550px;
}
.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and opacity */
  z-index: 2;
}
.FP img {
  position: relative;
  width: 150%;
  height: 100%;
  animation: slideImage 10s linear infinite;
  bottom: 500px;
}
@media only screen and (max-width: 768px) {
  .FP img {
    width: 100%; /* Adjust width for mobile view */
    bottom: 20px; /* Adjust bottom value as needed for your mobile view */
  }
  .carousel-control-prev,.carousel-control-next {
    width: 40px;
    height: 100%;
  }
}



.FP h1 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Koulen', sans-serif;
  font-size: 80px;
  letter-spacing: 2px;
  font-weight: lighter;
  background-color: transparent;
  padding: 25px;
  height: 250px;
  display: inline-block;
  z-index: 3;
}
.FP #phrase {
  position: absolute;
  top: 68%; 
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Koulen', sans-serif;
  color: #ffffff;
  font-size: 35px;
  letter-spacing: 3px;
  line-height: 0px;
  z-index: 3;
}
.FP #title {
  position: absolute;
  top: 75%; 
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Koulen', sans-serif;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0.5px;
  line-height: 0px;
  z-index: 3;
}

/* Fade Effect */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideImage {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1%); /* Adjust the percentage based on the desired sliding distance */
  }
}
/*Front Page*/



  /*Highlights*/
.line{
    border-top: 1px solid #747474;
    text-align: center;
    width: 80%;
    height: 0px;
    margin: auto;
  }
  .projects{
    color: #747474;
    font-family: 'Koulen', sans-serif;
    padding: 130px;
    }
    .projects img {
      width: 70%;
      border: 3px solid #A14A76;
  
    }
    .box2 img{
      border: 3px solid #CDB2AB;
      display: block;
    }
    .projects h2 {
      color: #000000;
      font-family: 'Koulen', sans-serif;
    }
    .highlights p {
    font-family: 'KoPub Batang';
    color: #747474;
    }
    /*Boxes*/
      .box1,.box2,.box3 {
        display: flex;
        justify-content: space-between; /* Align items with space between */
        margin-top: 10%;
      }
      .box2,.box3{
        margin-top: 30%;
      }
      .box1 .left,.box1 .right,.box2 .left,.box2 .right,.box3 .left,.box3 .right {
      width: 60%; 
      }
      .box1 .right ,.box2 .right ,.box3 .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 15% 0; /* Adjust the vertical margin as needed */
        line-height: 10px;
        margin-bottom: 20px;
        display: inline-block;
      }
      .box2{
        padding-bottom: 10%;
      }
      .box2 .left p{
        width: 80%;
      }
  
      /*button*/
      .box1 .right button,.box2 .right button,.box3 .right button{
        background-color: #FFA8A9;
        border-color: transparent;
        text-decoration: none;
        padding: 10px;
        border-radius: 10px;
        margin-top: 30px;
        display: inline-block;
        margin: 20px;
        transition: background-color 0.3s, transform 0.5s;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05); 
      }
          /* Hover effect */
            .box1 .right button:hover,.box2 .right button:hover,.box3 .right button:hover {
              background-color: #F786AA; 
              transform: scale(1.04);
              }
            /*Animations*/
            /* Add jump animation to the button */
              @keyframes jumpAnimation {
                0%, 20%, 50%, 80%, 100% {
                  transform: translateY(0);
                  }
                  40% {
                      transform: translateY(-5px);
                  }
                  60% {
                      transform: translateY(-3px);
                  }
                }   
                #current {
                  animation: jumpAnimation 10s infinite; /* Adjust the duration as needed */
              }
      /*button*/


      @media only screen and (max-width: 768px) {
        .box1 p , .box2 p{
          line-height: 20px;
        }
        .box1 button , .box2 button{
          font-size: 12px;
          line-height: 15px;
      
      
        }
      }
      
      
    /*Boxes*/
    /*Highlights*/
  /*projects*/
  
  
/*Footer*/
footer{
  text-align: center;
  width: 80%;
  height: 0px;
  margin: auto;
  border-top: 1px solid #747474;
  padding-bottom: 120px;
}
footer p {
  padding-top: 50px;
}
/*Footer*/

  
/*FadeIn*/
.projects.reveal{
  transform: translateX(150px);
  opacity: 0;
  transition: all 1s ease;
}

.projects.reveal.active{
  transform: translateX(0px);
  opacity: 1;
}


/*FadeIn*/