/* Running Text Styles */
.running-text {
    width: 100%;
    background-color: #4d3509; /* Warna merah, bisa diubah */
    color: white;
    padding: 8px 0;
    overflow: hidden; /* Penting untuk menyembunyikan teks yang keluar area */
    box-sizing: border-box;
}

.running-text-content {
    display: flex;
    animation: scroll-left 60s linear infinite;
}

.running-text-content span {
    white-space: nowrap; /* Mencegah teks agar tidak pindah baris */
    padding-left: 100%; /* Memulai dari luar layar sebelah kanan */
    font-size: 14px;
}

/* Animasi untuk bergerak dari kanan ke kiri */
@keyframes scroll-left {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
/*baru */
/* Container utama yang menjadi acuan posisi */
.slider-container-wrapper {
    position: relative; /* Sangat penting! */
}

/* Wadah untuk card transparan */
.overlay-cards {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
    z-index: 10;
}

/* ==================== PERUBAHAN DIMULAI DI SINI ==================== */

/* Styling untuk card transparan dengan ukuran yang diatur */
.overlay-cards .card {
    /* Atur ukuran card di sini */
    width: 500px; /* Anda bisa ubah nilai ini sesuai keinginan */
    
    /* Atau agar lebih responsif, gunakan max-width */
    /* width: 100%;
    max-width: 350px; */

    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overlay-cards .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
}

/* ==================== PERUBAHAN SELESAI DI SINI ==================== */

/* CSS untuk video dan gambar tetap sama seperti sebelumnya */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-item img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.carousel-item {
    /* Tambahkan baris ini untuk membuat sudut melengkung */
   border-radius: 15px; 
    overflow: hidden; /* Penting agar gambar tidak keluar dari border radius */
}

/* ==========================================
   RESPONSIVE UNTUK PERANGKAT MOBILE
   ========================================== */

/* Aturan ini berlaku untuk layar dengan lebar 767.98px ke bawah (ponsel dan tablet kecil) */
@media (max-width: 767.98px) {
    .overlay-cards .card {
        width: 300px; /* Ubah ukuran card menjadi 200px di ponsel */
    }

    /* --- PRO TIP (Opsional) --- */
    /* Anda juga bisa menyesuaikan ukuran font dan icon agar lebih proporsional di layar kecil */
    .overlay-cards .card .material-icons {
        font-size: 36px; /* Icon sedikit lebih kecil (dari 48px) */
    }
    .overlay-cards .card h2.card-text {
        font-size: 1.5rem; /* Angka utama sedikit lebih kecil */
    }
}