/* ================= EXTRA SMALL (≤575px) ================= */
@media (max-width: 575.98px) {

    /* NAV */
    .logo img {
        height: 55px;
        width: auto;
    }

    .navbar-nav {
        gap: 10px;
        text-align: center;
        background: var(--primary);
        padding: 12px;
        border-radius: 10px;
    }

    .cus_icon {
        font-size: 22px;
    }

    /* HERO */
    .hero {
        height: 55vh;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-content p {
        font-size: 14px;
        padding: 0 10px;
    }

    .btn-order {
        font-size: 14px;
    }



    /* SECTION */

    .cus_section {
        padding: 40px 20px 0;
    }

    .section-title {
        font-size: 20px;
        letter-spacing: 1px;

    }

    .section-subtitle {
        font-size: 11px;
        margin-top: 8px;

    }

    .category-btn {
        padding: 5px 12px;
        margin: 5px;
    }

    /* CARD */
    .card-img-wrapper {
        height: auto;
        aspect-ratio: 4/3;
    }

    .card-content h4 {
        font-size: 18px;
    }

    .details_btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }

    /* PROMO */
    .promo-banner img {
        height: 150px
    }


    /* FEATURE */

    .featured-section {
        padding-bottom: 40px;
    }


    .featured-card img {
        height: 200px;
    }

    /* FOOTER */
    .footer-logo h2 {
        font-size: 20px;
    }

}


/* ================= SMALL (576px–767px) ================= */
@media (min-width: 576px) and (max-width: 767.98px) {

    .hero {
        height: 85vh;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .cus_section {
        padding: 40px 20px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .card-img-wrapper {
        aspect-ratio: 4/3;
    }

    .promo-banner img {
        height: 230px;
    }

    .featured-card img {
        aspect-ratio: 4/5;
    }

}


/* ================= MEDIUM (768px–991px) ================= */
@media (min-width: 768px) and (max-width: 991.98px) {

    .hero {
        height: 90vh;
    }

    .hero-content h1 {
        font-size: 40px;
    }

    .section-title {
        font-size: 32px;
    }

    .navbar-nav {
        gap: 15px;
    }

    .cus_section {
        padding: 50px 40px 0;

    }

    .promo-banner img {
        height: 200px;
    }

    .featured-section {
        padding-bottom: 30px;
    }

    .featured-card img {
        height: 265px;
    }
}

/* ================= LARGE (992px–1199px) ================= */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .hero {
        height: 90vh;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 36px;
    }

    .cus_section {
        padding: 50px 25px 0;

    }

    .promo-banner img {
        height: 200px;
    }

    .featured-section {
        padding-bottom: 30px;
    }

    .featured-card img {
        height: 265px;
    }



}


/* ================= XL (1200px–1399px) ================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .hero-content h1 {
        font-size: 52px;
    }

}


/* ================= XXL (≥1400px) ================= */
@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

    .hero-content h1 {
        font-size: 60px;
    }

}