/* Gaya untuk background bergerak */
.bg-slider {
  position: relative;
  overflow: hidden;
  height: 64vh; /* Tinggi background tetap penuh */
}

.bg-image {
  position: absolute;
  width: 100%; /* Tetap penuh */
  height: 100%; /* Tetap penuh */
  object-fit: cover;
  animation: slide 9s infinite; /* Durasi animasi */
  opacity: 0; /* Mulai dengan transparan */
}

.bg-image:nth-child(1) {
  animation-delay: 0s;
}

.bg-image:nth-child(2) {
  animation-delay: 3s; /* Gambar kedua muncul setelah 3 detik */
}

.bg-image:nth-child(3) {
  animation-delay: 6s; /* Gambar ketiga muncul setelah 6 detik */
}

@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* Card styles */
.card {
  background-color: #3b82f6; /* bg-blue-500 */
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px; /* atas, kanan, bawah, kiri */
}

.card-alt {
  background-color: #bfdbfe; /* bg-blue-100 */
  color: #3b82f6; /* text-blue-500 */
  margin: 20px; /* atas, kanan, bawah, kiri */
}

/* Icon styles */
.icon-bg {
  background-color: white;
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.icon-bg-alt {
  background-color: #3b82f6; /* bg-blue-500 */
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.custom-margin {
  margin-left: 50px; 
  margin-right: 50px; 
}

/* Heading styles */
h2 {
  color: #3b82f6; /* text-blue-500 */
}

/* Gaya tambahan jika ada */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Menambahkan gap */
}