/* Styling untuk Carousel */
.carousel-inner {
    height: 95vh; /* Sesuaikan dengan ukuran background */
}

.carousel-item img {
    width: 100%;
    height: 95vh; /* Memastikan gambar slider sesuai dengan ukuran */
    object-fit: cover;
}

/* Pastikan carousel berada dibelakang navbar */
.carousel {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0; /* Carousel has a lower z-index */
}

.container-fluid, .row, .col-md-6 {
    padding-left: 0;
    padding-right: 0;
}

/* Mengatur tombol prev-icon dan next-icon */
button.carousel-control-prev.custom-prev,
button.carousel-control-next.custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100; /* Ensure the buttons are in front of other elements */
}

button.carousel-control-prev.custom-prev {
    left: 0px;
}

button.carousel-control-next.custom-next {
    right: 0px;
}

/* Atur ukuran ikon panah */
button.carousel-control-prev img.arrow-icon,
button.carousel-control-next img.arrow-icon {
    width: 70px;
    height: 70px;
}

/* Opsional: Menambahkan efek hover pada ikon panah */
button.carousel-control-prev:hover img.arrow-icon,
button.carousel-control-next:hover img.arrow-icon {
    opacity: 0.8;
    transition: 0.3s;
}

/* Gradient effect applied to carousel items */
.carousel-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradient hanya meng-cover bagian bawah */
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Gradient dari hitam ke transparan */
    z-index: 1; /* Pastikan gradient di bawah kontrol */
}

/* Styling caption */
.carousel-caption.custom-caption {
    position: absolute;
    bottom: 10%;
    margin-left: 3%;
    margin-right: 3%;
    text-align: left; /* Mengubah teks agar rata kiri */
    color: white;
    animation: fadeInFromBottom 1s ease-in-out;
    opacity: 0;
    z-index: 2; /* Pastikan teks di atas gradient */
}

.carousel-item.active .carousel-caption.custom-caption {
    animation: fadeInFromBottom 1s ease-in-out;
    opacity: 1;
}

/* Fade-in from bottom animation */
@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Styling untuk Judul Slide */
.carousel-caption .slide-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 32px;
    color: var(--primary-title-color);
}

/* Styling gambar underline */
.carousel-caption .underline-image {
    width: 200px;
    height: 6px;
    margin-top: 0px;
    padding-top: 0px;
    object-fit: contain;
    display: block;
    margin-left: 0;
}

/* Styling untuk Deskripsi Slide */
.carousel-caption .slide-description {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Bold */
    font-size: 24px;
    padding-top: 10px;
    color: var(--primary-description-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-caption.custom-caption {
        bottom: 5px;
    }
    .carousel-inner {
        height: 45vh; /* Sesuaikan dengan ukuran background */
    }
    
    .carousel-item img {
        width: 100%;
        height: 45vh; /* Memastikan gambar slider sesuai dengan ukuran */
        object-fit: cover;
    }
    
    button.carousel-control-prev img.arrow-icon,
    button.carousel-control-next img.arrow-icon {
        width: 50px;
        height: 50px;
    }

    /* Styling untuk Judul Slide */
    .carousel-caption .slide-title {
        font-size: 16px;
    }

    /* Styling gambar underline */
    .carousel-caption .underline-image {
        width: 200px;
        height: 6px;
        margin-top: 0px;
        padding-top: 0px;
        object-fit: contain;
        display: block;
        margin-left: 0;
    }

    /* Styling untuk Deskripsi Slide */
    .carousel-caption .slide-description {
        font-size: 14px;
    }
}