.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ukuran gambar banner agar tidak terlalu besar */
.small-banner {
    max-width: 37%;
}

.small-banner-2 {
    max-width: 30%;
}

/* Ukuran gambar QR lebih kecil */
.small-qr {
    max-width: 30%;
    margin: 5px;
}

.small-qr-whatsapp {
    max-width: 30%;
    margin: 5px;
}

/* Responsif: Ukuran QR lebih kecil di layar besar */
@media (min-width: 768px) {
    .small-qr {
        max-width: 30%;
    }

    .small-qr-whatsapp {
        max-width: 28%;
    }
}

/* Agar teks tetap berada di sisi kanan gambar */
.text-section {
    text-align: left;
}

/* Ukuran teks lebih kecil */
.description-text {
    font-size: 0.75rem;
}

.description {
    font-size: 1rem;
}

/* =========================
   POPUP EVENT
========================= */

.popup {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 30px;

    background: rgba(0, 0, 0, 0.85);

    z-index: 9999;

    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}

/* Saat popup ditampilkan */
.popup.show {
    display: flex;
}


/* Container otomatis mengikuti ukuran gambar */
.popup-content {
    position: relative;

    width: fit-content;
    height: fit-content;

    max-width: 95vw;
    max-height: 90vh;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* Gambar responsive mengikuti rasio aslinya */
.popup-content img {
    display: block;

    width: auto;
    height: auto;

    max-width: 95vw;
    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;
}


/* Button Close */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;

    font-size: 32px;
    font-family: Arial, sans-serif;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    z-index: 2;
}

/* Supaya X benar-benar pas di tengah secara visual */
.popup-close {
    padding-bottom: 3px;
}

.popup-close:hover {
    background: rgba(0, 0, 0, 0.85);
}


/* =========================
   TABLET
========================= */

@media (max-width: 768px) {

    .popup {
        padding: 20px;
    }

    .popup-content {
        max-width: 95vw;
        max-height: 90vh;
    }

    .popup-content img {
        max-width: 95vw;
        max-height: 90vh;
    }

    .popup-close {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        font-size: 28px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {

    .popup {
        padding: 12px;
    }

    .popup-content {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .popup-content img {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);

        border-radius: 6px;
    }

    .popup-close {
        top: 6px;
        right: 6px;

        width: 34px;
        height: 34px;

        font-size: 26px;
    }
}

/* ------------------------- */
.responsive {
    width: 300%;
    height: auto;
}

* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 2px;
}

/* Clearfix (clear floats) */

.row::after {
    content: "";
    clear: both;
    display: table;
}
/* ------------------------- */


.carousel-content {
    position: absolute;
    top: 35vh;
    left: 0;
    color: white;
    width: 100%;
}

@media (max-width: 768px) {
    .carousel-content {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-width: 769px) {
    .carousel-content {
        text-align: left;
        padding-left: 15px;
        /* Sesuaikan jarak dari tepi kiri sesuai kebutuhan Anda */
    }
}