.carousel-container {
  width: 100%; /* Lebar kontainer carousel */
  max-width: 640px; /* Lebar maksimum kontainer carousel */
  background-color: #ffffff; /* Warna latar belakang kontainer */
  border-radius: 1rem; /* Radius sudut kontainer */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Bayangan kontainer */
  overflow: hidden; /* Menyembunyikan konten yang meluap */
  user-select: none; /* Menonaktifkan seleksi teks */
  background-color: #031A2A;
}

.carousel-image-container {
  display: flex; /* Mengatur tata letak kontainer gambar sebagai flexbox */
  justify-content: center; /* Menyelaraskan gambar di tengah secara horizontal */
  align-items: center; /* Menyelaraskan gambar di tengah secara vertikal */
  width: 90%; /* Lebar kontainer gambar */
  height: 100%; /* Tinggi kontainer gambar */
  margin: 0 auto; /* Margin kiri dan kanan otomatis */
  overflow: hidden; /* Menyembunyikan konten yang meluap */
  border-radius: 1rem; /* Radius sudut kontainer gambar */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Bayangan kontainer gambar */
  touch-action: none; /* Menonaktifkan aksi sentuh */
}

.carousel-image {
  width: 100%; /* Lebar gambar */
  height: 100%; /* Tinggi gambar */
  object-fit: cover; /* Menyesuaikan gambar agar menutupi area */
  transition: transform 0.7s ease-in-out; /* Animasi transisi */
  cursor: grab; /* Mengubah kursor menjadi grab */
}

.carousel-image:hover {
  cursor: grabbing; /* Mengubah kursor menjadi grabbing saat di-hover */
}

.indicators {
  display: flex; /* Mengatur tata letak indikator sebagai flexbox */
  justify-content: center; /* Menyelaraskan indikator di tengah secara horizontal */
  margin-top: 1rem; /* Margin atas indikator */
  margin-bottom: 0.5rem; /* Margin bawah indikator */
  gap: 0.5rem; /* Jarak antar indikator */
}

.indicator {
  width: 12px; /* Lebar indikator */
  height: 12px; /* Tinggi indikator */
  border-radius: 50%; /* Radius sudut indikator */
  background-color: #9ca3af; /* Warna latar belakang indikator */
  transition: all 0.3s ease-in-out; /* Animasi transisi */
}

.indicator.active {
  width: 14px; /* Lebar indikator aktif */
  height: 14px; /* Tinggi indikator aktif */
  background-color: #3b82f6; /* Warna latar belakang indikator aktif */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}