/* Pembungkus luar untuk menyembunyikan overflow */
.scrolling-wrapper {
    overflow: hidden;
    width: 100%;
}

/* Kontainer yang akan bergerak. Isinya adalah semua kolom */
.scrolling-content {
    display: flex;
    /* Lebar total adalah 200% karena kita punya 6 kolom (3 asli + 3 duplikat) */
    /* Setiap kolom lebarnya sekitar 33.3%, jadi 6 kolom ~ 200% */
    width: 135%;
}

/* Mengatur lebar kolom agar tetap konsisten */
.scrolling-content .col-md-4 {
    flex: 0 0 25%;
    /* Jangan menyusut, jangan membesar, basisnya 1/3 lebar */
    padding: 0 8px;
    /* Sedikit jarak antar kartu */
}


/* Definisi animasi bergerak ke kiri */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Bergerak sejauh 50% dari total lebarnya (sepanjang 3 kartu) */
        transform: translateX(-50%);
    }
}

/* Definisi animasi bergerak ke kanan */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Terapkan animasi ke elemen yang sesuai */
.scroll-left {
    animation: scroll-left 20s linear infinite;
}

.scroll-right {
    animation: scroll-right 20s linear infinite;
}

/* Opsional: Jeda animasi saat kursor mouse di atasnya */
.scrolling-wrapper:hover .scrolling-content {
    animation-play-state: paused;
}

.putar-45 {
    transform: rotate(75deg);
}

.card-fit-content {
    display: inline-block;
    /* Membuat card menyusut sesuai konten */
    width: auto;
    margin: 0 10px;
    /* Memberi jarak antar kartu */
    flex-shrink: 0;
    /* Mencegah kartu menyusut */
}

.container-own {
    width: 100%;
    max-width: 1200px;
    /* atau lebar yang Anda inginkan */
    margin: 0 auto;
}

.gambar-rotate {
    transform: rotate(-90deg);
    /* -90 derajat = rotasi ke kiri */
    /* Opsional: tambahkan properti berikut jika diperlukan */
    transform-origin: center;
    /* Titik pusat rotasi */
    display: inline-block;
    /* Untuk menghindari layout broken */
}

.scrolling-content .card-img-top {
    transform: rotate(-90deg);
    /* 90 derajat ke kiri */
    transform-origin: center;
    /* Opsional: Atur ukuran jika diperlukan */
    width: auto;
    max-height: 100%;
}

/* Aturan ini hanya berlaku untuk layar HP & Tablet (lebar di bawah 992px) */
/* Anda bisa menimpa atau mengedit CSS sebelumnya dengan kode ini */
/* ... CSS Anda yang lain untuk desktop ... */

/* Aturan ini hanya berlaku untuk layar HP & Tablet (lebar di bawah 992px) */
@media (max-width: 991.98px) {

    #hero .row {
        position: relative;
        /* Ini tetap diperlukan sebagai konteks posisi */
    }

    /* [DISABLED] Overlay biru dihapus karena menutupi konten pada mobile */
    /* #hero .row::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom,
                rgba(32, 164, 176, 0.95) 0%,
                rgba(0, 148, 255, 0.95) 80%,
                transparent 100%
            );
        z-index: 2;
    } */

    /* [DIUBAH] Kolom gambar sekarang tidak perlu lagi opacity */
    .hero-img {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Posisikan di lapisan paling bawah */
        opacity: 1;
        /* <-- Kembalikan ke normal, karena sudah ada lapisan gelap di atasnya */
    }

    /* [DIUBAH] Naikkan z-index kolom teks agar berada di paling atas */
    #hero .col-lg-6.order-lg-1 {
        position: relative;
        z-index: 3;
        /* <-- Posisikan di lapisan paling atas */
        background-color: transparent;
    }

    /* (Opsional) Pertegas bayangan teks */
    #hero h1 {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    }

    #hero h2 {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }
}