.modal-backdrop {
    background-color: rgba(0, 1, 82, 0.72) !important; 
}

.modal-content {
    background-color: rgba(0, 0, 0, 0.63); 
    border: none; 
    box-shadow: none; 
}

.modal-body img {
    height: 100% !important; 
    width: 100% !important; 
    object-fit: fill; 
    border-radius: 10px; 
    display: block; 
    margin: 0 auto; 
}
.btn-close {
    filter: invert(1) !important; 
    opacity: 1; 
}

.btn-close:hover {
    filter: invert(0.8); 
}
.gradient-image {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
    -webkit-mask-size: cover;
    mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 100, 0) 2%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1));
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
}
.carousel-control-prev,
.carousel-control-next {
}


@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 45px; 
        height: 45px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        padding: 5px; 
    }
}
.custom-scrollbar {
    scrollbar-width: thin; /* Scrollbar lebih tipis untuk Firefox */
    scrollbar-color: rgba(0, 134, 157, 0.5) rgba(0, 0, 0, 0.1); /* Warna scrollbar dan track untuk Firefox */
}

/* Untuk browser berbasis WebKit (Chrome, Edge, Safari) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Lebar scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Warna background track */
    border-radius: 5px; /* Membuat sudut membulat */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 134, 157, 0.5); /* Warna scrollbar */
    border-radius: 5px; /* Membuat sudut membulat */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 134, 157, 0.7); /* Warna scrollbar saat di-hover */
}