body {
    background-color: #0D0D0D;
    color: #F8F9FA;
    font-family: 'Poppins', sans-serif;
}

.border-gold {
    border-color: #FFD700 !important; /* Gunakan !important jika ada konflik */
}

.btn-outline-gold {
color: #FFD700;
border: 1px solid #FFD700;
background-color: transparent;
transition: all 0.3s ease;
}

.btn-outline-gold:hover,
.btn-gold {
background-color: #FFD700;
color: #000;
font-weight: bold;
}

.navbar-custom {
    background-color: #0D0D0D;
    border-bottom: 1px solid #FFD700;
}

.navbar-custom .navbar-brand {
    color: #FFD700 !important;
    font-weight: 600;
}

.navbar-custom .nav-link {
    color: #FFD700 !important;
    margin-right: 15px;
    font-weight: 500;
}

.navbar-custom .nav-link:hover {
    color:rgb(8, 8, 8) !important;
}

.btn-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-gold {
    background-color: #FFD700;
    color: #0D0D0D;
}

.bg-gold:hover {
    background-color: #e6c200;
    color: #000;
}

.btn-primary {
    background-color: #C1121F;
    border-color: #C1121F;
}

.btn-primary:hover {
    background-color: #a50e1a;
}

.text-gold {
    color: #FFD700;
}

.card {
    background-color: #1A1A1A;
    color: #F8F9FA;
    border: 1px solid #FFD700;
}

footer {
    background-color: #1A1A1A;
    color: #FFD700;
    text-align: center;
    padding: 30px 0;
}

.carousel-caption .carousel-title-text {
    word-wrap: break-word; /* Memastikan kata yang panjang akan pecah dan wrap */
    overflow-wrap: break-word; /* Alternatif modern untuk word-wrap */
    white-space: normal; /* Memastikan teks tidak dipaksa dalam satu baris */
    width: 100%; /* Memastikan elemen mengambil lebar penuh yang tersedia */
    /* Tambahan properti untuk mengatasi masalah wrapping yang lebih agresif */
    min-width: 0; /* Memungkinkan elemen menyusut */
    flex-shrink: 1; /* Memungkinkan elemen menyusut jika perlu */
    hyphens: auto; /* Mengaktifkan hyphenation (pemenggalan kata) */
}

/* Sesuaikan lebar carousel-caption agar ada padding di sisi */
.carousel-caption {
    max-width: 90%; /* Contoh: batasi lebar caption agar ada padding di sisi */
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%; /* Sesuaikan posisi vertikal jika perlu */
    padding: 15px; /* Tambahkan padding agar teks tidak terlalu mepet ke border */
}

/* Media queries untuk responsivitas pada ukuran layar yang berbeda */
@media (max-width: 768px) {
    .carousel-caption {
        max-width: 95%; /* Lebih lebar di layar kecil */
        bottom: 5%; /* Sedikit lebih rendah di layar kecil */
        padding: 10px;
    }
    .carousel-caption h1.carousel-title-text {
        font-size: 1.2rem !important; /* Ukuran font lebih kecil di mobile */
    }
    .carousel-caption p {
        font-size: 0.8rem !important; /* Ukuran font lebih kecil di mobile */
    }
}

@media (max-width: 576px) {
    .carousel-caption {
        max-width: 98%; /* Hampir penuh di layar sangat kecil */
        bottom: 2%; /* Lebih rendah lagi */
        padding: 8px;
    }
    .carousel-caption h1.carousel-title-text {
        font-size: 1rem !important; /* Lebih kecil lagi */
    }
    .carousel-caption p {
        font-size: 0.7rem !important; /* Lebih kecil lagi */
    }
}

.btn-primary {
    background-color: #C1121F;
    border-color: #C1121F;
    color: #F8F9FA;
}
.btn-primary:hover {
    background-color: #a50e1a;
    border-color: #a50e1a;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

/* List group styling for categories */
.list-group-item {
    color: #F8F9FA; /* Default text color */
}
.list-group-item.active-category { /* Class untuk kategori aktif */
    background-color: #FFD700 !important;
    color: #0D0D0D !important;
    font-weight: bold;
    border-color: #FFD700 !important;
}
.list-group-item-action:hover:not(.active-category) {
    background-color: rgba(255, 215, 0, 0.1) !important; /* Sedikit highlight saat hover */
    color: #FFD700 !important;
}

/* Pagination styling */
.pagination .page-item .page-link {
    background-color: #1A1A1A;
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}
.pagination .page-item .page-link:hover {
    background-color: #FFD700;
    color: #0D0D0D;
    border-color: #FFD700;
}
.pagination .page-item.active .page-link {
    background-color: #FFD700;
    color: #0D0D0D;
    border-color: #FFD700;
}
.pagination .page-item.disabled .page-link {
    background-color: #1A1A1A;
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 215, 0, 0.1);
}

.gallery-image {
    height: 250px; /* Tinggi tetap untuk gambar galeri */
    object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */
    width: 100%;
}
.gallery-description {
    font-size: 0.9em;
    color: #ccc;
}

.swal2-popup {
    background-color: #1A1A1A !important; /* Background gelap */
    color: #F8F9FA !important; /* Warna teks putih */
    border: 1px solid #FFD700 !important; /* Border emas */
    border-radius: 0.75rem !important; /* Rounded corners */
}

.swal2-title {
    color: #FFD700 !important; /* Warna judul emas */
}

.swal2-html-container {
    color: #F8F9FA !important; /* Warna teks konten putih */
}

.swal2-styled.swal2-confirm {
    background-color: #FFD700 !important; /* Warna tombol konfirmasi emas */
    color: #000000 !important; /* Warna teks tombol hitam */
    border: none !important;
    font-weight: bold !important;
}

.swal2-styled.swal2-cancel {
    background-color: #C1121F !important; /* Warna tombol cancel merah */
    color: #F8F9FA !important; /* Warna teks tombol putih */
    border: none !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long],
.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    background-color: #FFD700 !important; /* Warna centang sukses emas */
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #C1121F !important; /* Warna X error merah */
}
.swal2-progresssteps .swal2-progress-step.swal2-active {
    background-color: #FFD700 !important;
}

.swal2-loader {
    border-color: #FFD700 rgba(255, 215, 0, 0.4) rgba(255, 215, 0, 0.4) !important;
}