/* Media query untuk tampilan mobile kecil */
@media (max-width: 576px) {
    .fs-mobile-very-smaller {
        font-size: 0.50rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-smaller {
        font-size: 0.70rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-very-medium {
        font-size: 0.60rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-medium {
        font-size: 0.90rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-high {
        font-size: 1rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-bannertitle {
        font-size: 12px !important; /* Sesuaikan ukuran font */
    }

    .fs-mobile-bannerket {
        font-size: 8px !important; /* Sesuaikan ukuran font */
    }

    .img-responsive-mobile {
        max-width: 50%; /* Sesuaikan persentase sesuai kebutuhan */
    }

    .img-responsive-mobile-paket {
        max-width: 35%; /* Sesuaikan persentase sesuai kebutuhan */
    }

    .flex-mobile {
        flex-direction: column; /* Ubah flex menjadi kolom */
        align-items: flex-start; /* Pastikan semua item disejajarkan ke kiri */
    }

    .flex-mobile p {
        width: 100%; /* Pastikan teks mengisi seluruh lebar div */
        margin: 0; /* Hilangkan margin tambahan */
    }

    .banner-image {
        height: 20vh; /* Sesuaikan tinggi gambar sesuai kebutuhan */
        object-fit: cover; /* Memastikan gambar menutupi area yang ditetapkan */
        filter: brightness(50%); /* Mengurangi kecerahan gambar */
    }

    .hero-slider {
        height: 25vh; /* Atur tinggi untuk tampilan ponsel kecil */
    }

    .frame-part {
        background-size: cover; /* Atur ukuran agar sesuai pada layar kecil */
        height: 150px; /* Kurangi tinggi pada mobile agar lebih proporsional */
    }
    
    .frame-left,
    .frame-center,
    .frame-right {
        background-position: center; /* Setel posisi gambar agar center pada layar kecil */
    }

    .hero-image {
        /* Penyesuaian ukuran gambar di perangkat mobile */
        width: 100%;
        height: auto; /* Sesuaikan tinggi otomatis berdasarkan lebar */
        object-fit: contain; /* Sesuaikan agar gambar tetap proporsional */
    }

    .frame-part {
        height: 200px; /* Sesuaikan tinggi di mobile */
    }

    .frame-part.active {
        transform: scale(1.5); /* Pembesaran di mobile */
    }

}

/* Media query untuk tampilan mobile Sedang */
@media (min-width: 577px) and (max-width: 992px) {
    .fs-mobile-very-smaller {
        font-size: 0.50rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-smaller {
        font-size: 0.70rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-medium {
        font-size: 0.90rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-very-medium {
        font-size: 0.60rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-high {
        font-size: 1rem; /* Ukuran lebih kecil dibandingkan fs-custom-small */
    }

    .fs-mobile-bannertitle {
        font-size: 18px !important; /* Sesuaikan ukuran font */
    }

    .fs-mobile-bannerket {
        font-size: 12px !important; /* Sesuaikan ukuran font */
    }

    .img-responsive-mobile {
        max-width: 50%; /* Sesuaikan persentase sesuai kebutuhan */
    }

    .img-responsive-mobile-paket {
        max-width: 30%; /* Sesuaikan persentase sesuai kebutuhan */
    }

    .flex-mobile {
        flex-direction: column; /* Ubah flex menjadi kolom */
        align-items: flex-start; /* Pastikan semua item disejajarkan ke kiri */
    }

    .flex-mobile p {
        width: 100%; /* Pastikan teks mengisi seluruh lebar div */
        margin: 0; /* Hilangkan margin tambahan */
    }

    .banner-image {
        height: 15vh; /* Sesuaikan tinggi gambar sesuai kebutuhan */
        object-fit: cover; /* Memastikan gambar menutupi area yang ditetapkan */
        filter: brightness(50%); /* Mengurangi kecerahan gambar */
    }

    .hero-slider {
        height: 25vh; /* Atur tinggi untuk tampilan mobile */
    }

    .frame-part {
        background-size: cover; /* Atur ukuran agar sesuai pada layar kecil */
        height: 350px; /* Kurangi tinggi pada mobile agar lebih proporsional */
    }
    
    .frame-left,
    .frame-center,
    .frame-right {
        background-position: center; /* Setel posisi gambar agar center pada layar kecil */
    }
}