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

@media (max-width: 1050px) {

    .category-grid,
    .app-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


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

@media (max-width: 800px) {

    .main-navigation {

        display: none;
    }


    .mobile-menu-button {

        display: grid;
    }


    .header-inner {

        width:
            calc(100% - 28px);
    }


    .content-section {

        width:
            calc(100% - 28px);

        padding:
            55px 0;
    }


    .category-grid,
    .app-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hero {

        min-height: 440px;

        padding-top: 65px;
    }


    .footer-inner {

        width:
            calc(100% - 28px);
    }
}


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

@media (max-width: 520px) {

    .brand-text span {

        display: none;
    }


    .header-inner {

        min-height: 64px;
    }


    .brand-icon {

        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .hero {

        min-height: 430px;

        padding:
            55px 14px 60px;
    }


    .hero h1 {

        font-size:
            clamp(39px, 13vw, 58px);
    }


    .hero p {

        font-size: 14px;

        padding: 0 10px;
    }


    .search-box {

        height: 55px;

        border-radius: 15px;
    }


    .hero-stats {

        gap: 25px;

        margin-top: 28px;
    }


    .hero-stat strong {

        font-size: 17px;
    }


    .content-section {

        width:
            calc(100% - 24px);

        padding:
            45px 0;
    }


    .section-heading {

        align-items: flex-start;

        margin-bottom: 20px;
    }


    .section-heading h2 {

        font-size: 26px;
    }


    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .category-card {

        min-height: 130px;

        padding: 15px;
    }


    .category-icon {

        width: 40px;
        height: 40px;

        margin-bottom: 11px;

        border-radius: 12px;

        font-size: 20px;
    }


    .category-name {

        font-size: 13px;
    }


    .category-description {

        font-size: 9px;
    }


    .app-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .app-card {

        padding: 12px;

        border-radius: 16px;
    }


    .app-icon-wrapper {

        width: 62px;
        height: 62px;

        border-radius: 17px;
    }


    .app-card h3 {

        font-size: 13px;
    }


    .app-card p {

        min-height: 44px;

        font-size: 9px;
    }


    .app-categories span {

        font-size: 7px;
    }


    .app-open-button {

        padding: 9px;

        font-size: 10px;
    }


    .footer-inner {

        min-height: 90px;

        flex-direction: column;

        justify-content: center;

        gap: 8px;
    }
}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 360px) {

    .app-grid {

        grid-template-columns:
            1fr;
    }


    .category-grid {

        grid-template-columns:
            1fr 1fr;
    }
}

@media (max-width: 1050px) {

    .app-library-section .app-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .app-library-section-header {
        align-items: flex-start;
    }

    .app-library-section .app-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 520px) {

    .app-library-section {
        margin-top: 2.25rem;
    }

    .app-library-section-header {
        display: block;
    }

    .app-library-see-all {
        margin-top: 0.65rem;
        padding: 0;
    }

    .app-library-section .app-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 360px) {

    .app-library-section .app-grid {
        grid-template-columns: 1fr;
    }
}