.carousel-container {
    perspective     : 200px;
    overflow        : hidden;
    display         : flex;
    flex-direction  : column; /* Mengubah orientasi ke vertikal */
    justify-content : center;
    align-items     : center;
    height          : 500px;
    position        : relative;
}

.slider-controls {
    color           : black;
    display         : flex;
    justify-content : space-between; /* Meletakkan tombol prev dan next di sebelah kiri dan kanan */
    width           : 100%; /* Mengisi lebar container */
    max-width       : 600px; /* Lebar maksimum untuk tombol prev dan next */
    margin          : 0 auto; /* Menengahkan slider-controls di atas slider */
  }

.carousel-slider {
    display         : flex;
    overflow        : hidden;
    color           : red;
}
    
.carousel-slide {
    position        : relative;
    width           : 300px;
    max-width       : 100%;
    background-color: rgba(255, 255, 255, 0.0);
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    box-shadow      : 0 10px 20px rgba(0, 0, 0, 0.2);
    transform       : scale(0.8);
    transition      : transform 0.5s;
    cursor          : pointer;
    overflow        : hidden;
    margin          : 10px;
    box-sizing      : border-box;
    user-select     : none; /* Ini untuk mencegah pemilihan teks saat mengklik slide */
}
.carousel-slide.active {
    transform       : scale(1);
    z-index         : 1;
    transition      : transform 0.5s; /* Tambahkan animasi transform */
}


.carousel-slide img {
    max-width       : 100%;
    max-height      : 100%; 
    width           : auto;
    height          : auto;
    transition      : transform 0.5s;
}

.caption {
    cursor          : pointer;
    position        : absolute;
    bottom          : -100%; /* Mulai dengan caption di luar tampilan */
    left            : 0;
    width           : 100%;
    /* background      : rgba(164, 15, 107, 0.5); Latar belakang dengan transparansi 0.5 (setengah transparan) */
    /* background      : rgb(164, 15, 107); Latar belakang Sesuai Kebutuhan */
    background      : #C2C4BF; /* Latar belakang Sesuai Kebutuhan */
    padding         : 2px;
    opacity         : 0.8;
    text-align      : center;
    z-index         : 0 ; /* Letakkan caption di atas gambar */
    box-sizing      : border-box;
    transition      : bottom 0.3s; /* Animasi caption muncul */
}

.caption h3,
.caption p {
    text-align      :center;
    font-weight     : bold; /* Menambahkan gaya tebal pada teks */
    box-sizing      : border-box;
    transition      : bottom 0.3s;
    background-color: white;
    border          : 2px solid #9F0051; /* Tambahkan border putih */
    color           :  black; /* Ganti warna teks menjadi putih */
    text-shadow     : 0 0 15px black; /* Mengatur shadow putih dengan blur 5px */
}

.caption h3 p a {
    font-size       : 20px;
    text-align      :center;
    color           : white;

}

.caption p a{
    margin-bottom:13px;
    text-decoration:none;
    color:black;
    font-size:15px;
}

.carousel-slide:hover .caption {
    bottom          : 0; /* Geser caption ke atas saat dihover */
}

.carousel-slide:hover {
    transform       : scale(1);
}
.carousel-slide:hover img {
    transform       : scale(1.2);
}

.carousel-slide.active {
    transform       : scale(1);
    z-index         : 1;
}

.caption.active {
    opacity         : 1;
    transform       : translateY(0);
}

/* Gaya untuk slider-button */
.slider-button {
    cursor          : pointer;
    font-size       : 24px; /* Ubah ukuran ikon sesuai kebutuhan Anda */
    color           : black; /* Ubah warna ikon sesuai kebutuhan Anda */
    transform       : translateY(-50%);
}



/* Tambahkan gaya CSS berikut untuk tombol bulatan */
.carousel-dots {
    display         : flex;
    justify-content : center;
    margin-top      : 20px;
}

.carousel-dot {
    width           : 15px; /* Sesuaikan ukuran bulatan sesuai kebutuhan Anda */
    height          : 15px; /* Sesuaikan ukuran bulatan sesuai kebutuhan Anda */
    background-color: #333; /* Sesuaikan warna latar belakang sesuai kebutuhan Anda */
    border-radius   : 50%; /* Membuat bulatan */
    margin          : 0 5px; /* Jarak antara bulatan */
    cursor          : pointer;
    transition      : background-color 0.3s;
}

/* Gaya untuk bulatan yang aktif */
.carousel-dot.active {
    background-color: #f00; /* Ganti warna sesuai kebutuhan Anda */
}

@keyframes slideAnimation {
    from {
        opacity     : 0;
        margin-left : -100%;
    }
    to {
        opacity     : 1;
        margin-left : 0;
    }
}

.carousel-slide {
    animation       : slideAnimation 1.5s;
}

.kepala{
    font-size       : 25px;
    color           : black;
    text-align      : center;
    padding-top     : 10px;
}


/* Ini Untuk Caption Dari Carousel Slide Yang Akan Ditampilkan */
.carousel-caption {
    height          : 380px;
    width           : 725px;
    color           : black;
    text-align      : left; /* Caption di tengah */
    position        : static; /* Relatif untuk penempatan di bawah gambar */
}

/* Mengatur jarak (padding) pada carousel inner */
.carousel-inner {
    padding         : 20px; /* Sesuaikan dengan kebutuhan Anda */
    animation       : fadeInUp 1.5s;
}

/* Mengatur ukuran container carousel */
#carousel-hero {
    max-width       : 5000px; /* Sesuaikan dengan ukuran yang Anda inginkan */
    margin          : 0 auto; /* Untuk membuat container berada di tengah */
}

/* Transisi fade in/out dari kanan ke kiri untuk caption */
.fade-in {
    opacity         : 0;
    transform       : scale(0.8);
    transition      : opacity 5.5s ease-in-out;
    
}

.carousel-item.active .fade-in {
    opacity         : 1;
    transform       : scale(1);
    transition      : opacity 3.5s ease-in-out;
}

/* Transisi fade in left untuk caption selanjutnya */
.fade-in-left {
    opacity         : 0;
    transition      : opacity 2.5s ease-in-out, transform 2.5s ease-in-out;
    transform       : translateX(-30px); /* Translasi awal ke kiri */
}

.carousel-item.active .fade-in-left {
    opacity         : 1;
    transition      : opacity 2.5s ease-in-out, transform 2.5s ease-in-out;
    transform       : translateX(0); /* Translasi ke posisi awal */
}

.fade-in-right {
    opacity         : 0;
    transition      : opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform       : translateX(30px); /* Translasi awal ke kanan */
}

.carousel-item.active .fade-in-right {
    opacity         : 1;
    transform       : translateX(0); /* Translasi ke posisi awal */
}

/* Media query untuk layar dengan lebar maksimum 768px (mode Android) */
@media (max-width: 768px) {
    .carousel-caption {
        height      : 280px;
        width       : 375px;
        margin-top  : 20px;
        size        : 20px;
        text-align  : left; /* Caption di tengah */
        position    : static; /* Relatif untuk penempatan di bawah gambar */
        top         : auto; /* Reset top position */
        bottom      : 10px; /* Jarak antara gambar dan caption */  
    }
}

/* Animasi zoom in (scale) */
@keyframes zoomIn {
    from {
        transform   : scale(0.8);
    }
    to {
        transform   : scale(1);
    }
}

/* Animasi zoom out (scale) */
@keyframes zoomOut {
    from {
        transform   : scale(1);
    }
    to {
        transform   : scale(0.8);
    }
}

@keyframes fadeInUp {
    from {
        opacity     : 0;
        transform   : translateY(20px); /* Mulai dari opacity 0 dan tergeser ke bawah sejauh 20px */
    }
    to {
        opacity     : 1;
        transform   : translateY(0); /* Akhiri dengan opacity 1 dan kembali ke posisi awal */
    }
}

/* Menerapkan keyframe ke elemen yang ingin dianimasikan */
.fade-in-up {
    animation       : fadeInUp 0.5s ease-in-out; /* Gunakan keyframe fadeInUp dengan durasi 0.5 detik */
}

/* Transisi ZoomIn untuk caption selanjutnya */
.ZoomIn {
    opacity         : 0;
    animation       : fade-in-left 0.5s ease-in-out, zoomIn 0.5s ease-in-out;
}

.carousel-item.active .ZoomIn {
    opacity         : 1;
}