body {
      font-family: 'Montserrat', sans-serif;
      padding-top: 80px;
    }

    /* Navbar Putih */
    .custom-navbar {
      padding: 16px 20px;
    background: linear-gradient(to right, #ffffff, #d3cbcb);
        opacity: 0.7;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        
    }

    /* Link Style */
    .custom-navbar .nav-link {
      color: #333 !important;
      margin: 0 8px;
      padding: 10px 18px;
      border-radius: 8px;
      position: relative;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    /* Hover efek keren (underline animasi) */
    .custom-navbar .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 6px;
      width: 0%;
      height: 3px;
      background-color: #28a745;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .custom-navbar .nav-link:hover::after {
      width: 100%;
    }

    .custom-navbar .nav-link:hover {
      color: #28a745 !important;
    }
/* Dropdown menu style */
.custom-navbar .dropdown-menu {
  background-color: #fff;
  border-radius: 12px;
  border: none;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  animation: fadeIn 0.3s ease;
}

/* Animasi muncul */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

.custom-navbar .dropdown-item {
  color: #333;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Efek hover dropdown */
.custom-navbar .dropdown-item::after {
  content: '';
      position: absolute;
      left: 0;
      bottom: 6px;
      width: 0%;
      height: 3px;
      background-color: #28a745;
      border-radius: 2px;
      transition: width 0.3s ease;
}
.custom-navbar .dropdown-item:hover::after{
     width: 100%;
}.custom-navbar .dropdown-item:hover {
      color: #28a745 !important;
    }

    /* Brand */
    .navbar-brand {
      font-size: 1.6rem;
      font-weight: 700;
      color: #0a1d4a !important;
      letter-spacing: 1px;
    }

    /* Carousel Kustom */
    .carousel-item {
      height: 90vh;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 2rem;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: rgba(74, 78, 73, 0.5);
      border-radius: 50%;
    }
      footer {
  position: relative;
  width: 100%;
  background: #3586ff;
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer p {
  color: #fff;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 0.75rem;
}

footer .wave {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 90px;
  background: url(images/wave.png);
  background-size: 1000px 100px;
}

footer .wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWave1 4s linear infinite;
}

@keyframes animateWave1 {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-position-x: 0px;
  }
}

footer .wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animateWave2 4s linear infinite;
}

@keyframes animateWave2 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1000px;
  }
}

footer .wave#wave3 {
  z-index: 1000;
  opacity: 0.25;
  bottom: 15px;
  animation: animateWave3 3s linear infinite;
}

@keyframes animateWave3 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1000px;
  }
}

footer .wave#wave4 {
  z-index: 999;
  opacity: 0.75;
  bottom: 20px;
  animation: animateWave4 3s linear infinite;
}

@keyframes animateWave4 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1000px;
  }
}
.swiper-slide .card {
  max-width: 280px;   /* ukuran maksimal card */
  margin: auto;       /* biar tetap center */
  padding: 15px;      /* lebih kecil dari sebelumnya */
}

/* Kecilkan ukuran foto guru */
.swiper-slide img {
  width: 150px !important;
  height: 150px !important;
}
.animated-gradient {
   /* bisa diganti sesuai kebutuhan */
  background: linear-gradient(270deg, #e3e3ec, #ffffff, #e3e3ec);
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}.gallery-item {
  overflow: hidden;
  border-radius: 10px;
}

.gallery-item img {
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1); /* zoom saat hover */
}