/* Mobile (≤ 600px) */
@media (max-width: 600px) {
    html, body {
        font-size: 70%;
    }
    .header-container .logo img{
        width: 40%;
    }
    .container .content .content-mid-desc {
        flex-wrap: wrap;
    }
    .container .content .content-bottom-image .image img {
        width: 100%;
    }
    .footer-container {
        flex-wrap: wrap;
    }
    .table::after {
        content: "← Geser untuk lihat detail →";
        display: block;
        font-size: 0.8rem;
        font-weight: 800;
        text-align: center;
        margin: 1rem 0;
    }
    .popup-container .popup-content {
        width: 100%;
    }
}

/* Tablet (601px – 900px) */
@media (min-width: 601px) and (max-width: 900px) {
    html, body {
        font-size: 80%;
    }
    .header-container .logo img{
        width: 40%;
    }
    .container .content .content-mid-desc {
        flex-wrap: wrap;
    }
    .container .content .content-bottom-image .image img {
        width: 100%;
    }
    .footer-container {
        padding: 0.5rem;
        justify-content: flex-start;
        gap: 2rem;
    }
    .table::after {
        content: "← Geser untuk lihat detail →";
        display: block;
        font-size: 0.8rem;
        font-weight: 800;
        text-align: center;
        margin: 1rem 0;
    }
    .popup-container .popup-content {
        width: 100%;
    }
}

/* Laptop (901px – 1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
    html, body {
        font-size: 100%;
    }
}

/* Desktop (≥ 1201px) */
@media (min-width: 1201px) {
    html, body {
        font-size: 100%;
    }
}