body {
  scroll-behavior: smooth;
}

/* Untuk header tetap di atas */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; /* Pastikan di atas konten lain */
}

/* Atau gunakan fixed-top untuk benar-benar tetap di atas */
/* .fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
} */

.fixed-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1030;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #333;
  background: linear-gradient(135deg, #f9f9f9, #f0f0e9, #eae6da);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}

.section-title {
  margin-bottom: 30px;
  font-weight: bold;
}

.card {
  margin-bottom: 30px;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.95); /* hampir putih */
  backdrop-filter: blur(8px); /* efek modern blur kaca */
}

.navbar .nav-link {
  color: #333 !important;
}

.navbar .nav-link.active {
  font-weight: bold;
  color: #007f5f !important; /* warna aksen hijau, atau sesuaikan brand */
}

/* Atur lebar navbar khusus di desktop */
.custom-navbar-width {
  width: 100%;
  max-width: 75%;
}

/* Agar tetap full di mobile */
@media (max-width: 991.98px) {
  .custom-navbar-width {
    max-width: 100%;
  }
}


@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Warna background untuk container layanan */
.layanan-container {
  background: linear-gradient(135deg, #e3f2fd 60%, #fffde7 100%);
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(60, 60, 60, 0.08);
  padding: 32px 24px;
}

/* Card custom */
.layanan-card-1 {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 6px solid #1976d2;
}
.layanan-card-2 {
  background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
  border-left: 6px solid #fbc02d;
}
.layanan-card-3 {
  background: linear-gradient(135deg, #f1f8e9 0%, #c8e6c9 100%);
  border-left: 6px solid #388e3c;
}
.layanan-card-1, .layanan-card-2, .layanan-card-3 {
  transition: transform 0.2s, box-shadow 0.2s;
}
.layanan-card-1:hover, .layanan-card-2:hover, .layanan-card-3:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px 0 rgba(60, 60, 60, 0.15);
}

.layanan-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(60,60,60,0.06);
  padding: 8px;
}