/* ============================ HEADER / HERO ============================ */
@media (max-width: 1200px) {
    #header .hero .caption {
        width: 75%;
    }
}

@media (max-width: 992px) {
    #header .hero .hero-img {
        width: 100%;
        /* bottom: -18px; */
    }
        #header {
        min-height: 90vh;
    }
}

@media (max-width: 768px) {
    #header {
        min-height: 90vh;
    }
    #header .hero {
        padding: 110px 0 40px;
    }
    header::before {
        width: 130%;
    }
    #header .hero-img .span-1 {
        top: 22% !important;
    }
    #header .hero-img .span-2 {
        top: 12% !important;
    }
    .footer .footer-bottom {
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    #header .hero .caption {
        width: 90%;
    }
    .main-btn {
        width: 170px;
        font-size: 17px;
    }
    .main-btn .arrow-btn {
        width: 25px;
        height: 25px;
        font-size: 16px;
    }
    #header .hero-img .span-1 {
        top: 28% !important;
    }
        #header .hero-img .span-2 {
        top: 23% !important;
    }
    #header .hero .hero-img span {
        font-size: 14px;
        padding: 2px 10px;
    }
}

@media (max-width: 480px) {
    .user-icon {
        font-size: 20px;
    }
}
@media (max-width: 420px) {
        #header .hero-img .span-2 {
        top: 31% !important;
    }
        #header .hero-img .span-1 {
        top: 35% !important;
    }
}

/* ============================= CATEGORIES ============================= */
@media (max-width: 768px) {
    .categories__nav--prev { right: 0; }
    .categories__nav--next { left: 0; }

}

/* ================================ ABOUT ================================ */
@media (max-width: 992px) {
    .about__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about__content {
        order: 1;
        margin: 0;
        text-align: center;
        width: 100%;
    }
    .about__head {
        justify-content: center;
    }
    .about__text {
        max-width: 330px;
        margin-inline: auto;
    }
    .about__list {
        display: inline-grid;
        text-align: right;
    }
    .about__figure {
        order: 2;
        width: 85%;
        max-width: 400px;
        margin: 20px auto 10px;
    }

    /* .categories {
        padding: 100px 0 60px 0;
    } */
}

@media (max-width: 768px) {
    .about {
        padding: 60px 0;
    }
    .about__stat {
        padding: 10px 16px;
    }
    .about__stat-num {
        font-size: 18px;
    }
    .about__stat--orders {
        left: -14px;
    }
    .about__figure::before {
        inset: -8px 0 11px 11px;
        width: 90%;
    }
}

@media (max-width: 480px) {
    .about__figure {
        width: 90%;
    }
    .about__stat--clients {
        right: 42%;
    }
    .about__stat--orders {
        left: -8px;
        top: 46%;
    }
}

/* =============================== FEATURES =============================== */
@media (max-width: 992px) {
    .features {
        padding: 60px 0;
    }
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 24px;
    }
}

@media (max-width: 560px) {
    .features__grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin-inline: auto;
    }
}

/* ============================== CTA BANNER ============================== */
@media (max-width: 900px) {
    .cta-banner {
        padding-bottom: 60px;
    }
    .cta-banner__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0;
    }
    .cta-banner__media {
        max-width: 300px;
        margin-inline: auto;
    }
    .cta-banner__media img {
        margin-top: -40px;
    }
    .cta-banner__content {
        padding-top: 24px;
        order: 2;
    }
    .cta-banner__text {
        margin-inline: auto;
    }
    .cta-banner__content .main-btn {
        margin-inline: auto;
    }
}

/* =============================== RANKS =============================== */
@media (max-width: 860px) {
    .ranks__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
        gap: 34px;
    }
}

@media (max-width: 768px) {
    .ranks {
        padding: 60px 0;
    }
}

/* ================================= FAQ ================================= */
@media (max-width: 768px) {
    .faq {
        padding: 60px 0;
    }
}

/* ============================ DOWNLOAD BANNER ============================ */
@media (max-width: 900px) {
    .download {
        padding-bottom: 70px;
    }
    .download__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0;
    }
    .download__media {
        max-width: 240px;
        margin-inline: auto;
        order: 2;
    }
    .download__media img {
        margin-top: -44px;
    }
    .download__content {
        padding-top: 22px;
    }
    .download__text {
        margin-inline: auto;
    }
    .download__stores {
        justify-content: center;
    }
}

/* @media (max-height: 650px) {
    #header {
        min-height: 115vh !important;
    }
} */