.jumbotron{
    padding-top: 10rem;
    background-color : #313c4f;  
}

#projects{
    background-color : #313c4f;    
}

#pengaduan{
    background-color: #273036;
}

.welcome{
    font-family: 'Press Start 2P', cursive;
}

.fs-7 {
    font-size: 0.75rem; /* atau 12px */
}

.text-justify {
    text-align: justify;
}

.text-link {
    color: inherit; /* Mempertahankan warna teks asli */
    text-decoration: none; /* Menghilangkan garis bawah */
}
.text-link:hover {
    text-decoration: underline; /* Menambahkan underline saat hover (opsional) */
    color: #f4d152;
}

.btn-hover:hover {
    background-color: #f4d152;
    color: white;
    transition: background-color 0.3s ease;
}

.animated-light {
    position: relative;
    display: inline-block;
  }

  /* Animasi cahaya di belakang gambar */
  .animated-light::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: glow 3s ease-in-out infinite;
  }

  @keyframes glow {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
  }

  section{
    padding-top: 5rem;
  }

  /* My Project Section */
  .project-box{
    position: relative;
    background-color: #273036;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    height: 500px;
    transform-style: preserve-3d;
}

.project-box::before{
  content: 'OUR';
  position: absolute;
  color:white;
  font-size: 4em;
  font-weight: bold;
  font-style: italic;
  top: 70px;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  -ms-transform: translate(-50%,0);
  -o-transform: translate(-50%,0);
  opacity: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.project-box:hover::before{
  
  opacity: 0.2;
}

.project-box::after{
  content: 'PROJECT';
  position: absolute;
  color:white;
  font-size: 3.2em;
  font-weight: bold;
  font-style: italic;
  top: 380px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  opacity: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;

}

.project-box:hover:after{
  opacity: 0.2;
}

.project-name{
  position: absolute;
  top: 0;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 2em;
  opacity: 0;
  transform: translate3d(0,0,50px);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transform: translate3d(0,0,50px);
  -moz-transform: translate3d(0,0,50px);
  -ms-transform: translate3d(0,0,50px);
  -o-transform: translate3d(0,0,50px);
}

.project-box:hover .project-name{
  top: 30px;
  opacity: 1;
}

.project-button{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%,0,100px);
  -webkit-transform: translate3d(-50%,0,100px);
  -moz-transform: translate3d(-50%,0,100px);
  -ms-transform: translate3d(-50%,0,100px);
  -o-transform: translate3d(-50%,0,100px);
  opacity: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  font-size: x-small;
}

.project-box:hover .project-button{
  opacity: 1;
  bottom: 20px;
}

.project-img{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate3d(-50%,-52%, 80px);
  -webkit-transform: translate3d(-50%,-52%, 80px);
  -moz-transform: translate3d(-50%,-52%, 80px);
  -ms-transform: translate3d(-50%,-52%, 80px);
  -o-transform: translate3d(-50%,-52%, 80px);
  max-width: 350px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.project-box:hover .project-img{
  transform: translate3d(-50%, -52%, 80px) scale(1.7);
  -webkit-transform: translate3d(-50%, -52%, 80px) scale(1.7);
  -moz-transform: translate3d(-50%, -52%, 80px) scale(1.7);
  -ms-transform: translate3d(-50%, -52%, 80px) scale(1.7);
  -o-transform: translate3d(-50%, -52%, 80px) scale(1.7);
}