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*/






/*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;
}
.carousel-item img {
  position: relative;
  width: 100%;
  height: 100%;
  animation: slideImage 10s linear infinite;
  bottom: 500px;
}

/* Styles for mobile view */
@media only screen and (max-width: 768px) {
  .carousel-item img {
    bottom: 0; /* Adjust this value as needed for your mobile view */
  }
  .carousel-control-prev,.carousel-control-next {
    width: 40px;
    height: 100%;
  }
}


/**/


.logo {
  position: absolute; /* This will position the logo relative to the nearest positioned ancestor */
  top: 50%; /* Centers the logo vertically */
  left: 50%; /* Centers the logo horizontally */
  transform: translate(-50%, -50%); /* Adjusts the positioning to the center by shifting the logo back by half its width and height */
  z-index: 1000; /* Ensure this is higher than other elements */
  width: 40%; /* Adjust the width as needed */
  display: block;
}

.logo img {
  width: 100%; /* This ensures the image scales to the width of its container */
  height: auto; /* This ensures the image keeps its aspect ratio */
}

/* 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*/




/**/


.logo {
  position: absolute; /* This will position the logo relative to the nearest positioned ancestor */
  top: 50%; /* Centers the logo vertically */
  left: 50%; /* Centers the logo horizontally */
  transform: translate(-50%, -50%); /* Adjusts the positioning to the center by shifting the logo back by half its width and height */
  z-index: 1000; /* Ensure this is higher than other elements */
  width: 40%; /* Adjust the width as needed */
  display: block;
}

.logo img {
  width: 100%; /* This ensures the image scales to the width of its container */
  height: auto; /* This ensures the image keeps its aspect ratio */
}

/* 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;
}
.highlights{
  color: #747474;
  font-family: 'Koulen', sans-serif;
  padding: 130px;
  }
  .highlights img {
    width: 70%;
    border: 4px solid #CDB2AB;
  }
  .box2 img{
    width: 45%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .box2 h2{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .highlights h2 {
    color: #000000;
    font-family: 'Koulen', sans-serif;
    padding-top: 20px;
  }
  .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*/
  /*Boxes*/
  /*Highlights*/
  


/*Fade In*/
  /*Box1*/
  .highlights.reveal{
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s ease;
  }

  .highlights.reveal.active{
    transform: translateY(0px);
    opacity: 1;
  }
  /*Box1*/  
  /*Box1*/
  .reveal{
    transform: translateX(150px);
    opacity: 0;
    transition: all 1s ease;
  }

  .reveal.active{
    transform: translateX(0px);
    opacity: 1;
  }
  /*Box1*/

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

  .box2.reveal.active{
    transform: translateY(0px);
    opacity: 1;
  }
  /*Box2*/
/*Fade In*/


@media only screen and (max-width: 768px) {
  .box1 p , .box2 p{
    line-height: 20px;
  }
  .box1 button , .box2 button{
    font-size: 12px;
    line-height: 15px;


  }
}




/*Footer*/
footer{
  text-align: center;
  width: 80%;
  height: 0px;
  margin: auto;
  border-top: 1px solid #747474;
}
footer p {
  padding-top: 20px;
}
/*Footer*/