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

@media (max-width: 767px) {

    /* ================= NAVBAR ================= */

    .navbar {
        height: 68px;
    }

    .navbar-container {
        padding: 0 20px;
    }

    .brand {
        gap: 9px;
    }

    .logo-icon {
        margin-left: -17px;
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 21px;
    }


    /* ================= HAMBURGER ================= */

    .menu-btn {
        display: flex;

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

        width: 42px;
        height: 42px;

        border: none;
        background: transparent;

        font-size: 28px;
        color: #101a3a;

        cursor: pointer;
    }


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

    .nav-links {
        display: none;

        position: absolute;
        top: 68px;
        left: 0;

        width: 100%;

        padding: 12px 20px 20px;

        background: #ffffff;

        border-bottom: 1px solid #eeeeff;

        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        box-sizing: border-box;

        z-index: 100;
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links a {
        width: 100%;

        padding: 14px 5px;

        font-size: 16px;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .universities-hero {
        min-height: auto;

        padding: 42px 6% 30px;
    }

    .universities-hero-container {
        grid-template-columns: minmax(0, 1fr);

        gap: 20px;
    }

    .universities-hero-content {
        max-width: none;
    }

    .universities-label {
        font-size: 10px;

        margin-bottom: 10px;
    }

    .universities-hero h1 {
        font-size: 33px !important;

        line-height: 1.07;

        letter-spacing: -1.2px;

        margin-bottom: 14px;
    }

    .universities-hero-content p {
        font-size: 13px;

        line-height: 1.6;
    }

    .universities-hero-image {
        min-height: 170px;
    }


    /* =====================================================
       UNIVERSITIES SECTION
       ===================================================== */

    .universities-section {
        padding: 35px 6% 45px;

        width: 100%;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* ================= SECTION HEADING ================= */

    .universities-heading {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
}

.universities-heading-content {
    width: 100%;
}

.universities-heading h2 {
    font-size: 25px;
    margin-bottom: 7px;
    padding-right: 80px;
}

.universities-heading p {
    width: 100%;
    max-width: none;
    font-size: 12px;
    line-height: 1.55;
}

.view-all {
    position: absolute;
    top: 0px;
    right: 0;
}


    /* =====================================================
       UNIVERSITY GRID
       
       8 UNIVERSITIES
       4 ROWS × 2 COLUMNS
       ===================================================== */

    .university-grid {
        display: grid;

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

        grid-template-rows:
            repeat(4, auto);

        gap: 12px;

        width: 100%;

        box-sizing: border-box;

        overflow: visible;

        padding: 2px 0 5px;
    }


    /* =====================================================
       UNIVERSITY CARD
       ===================================================== */

    .university-card {
        width: 100%;

        min-width: 0;

        min-height: 205px;

        padding: 16px 10px;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        text-align: center;

        gap: 0;

        overflow: hidden;
    }


    /* =====================================================
       UNIVERSITY LOGO
       ===================================================== */

    .university-logo {
        width: 62px;

        height: 62px;

        min-width: 62px;

        flex: 0 0 62px;

        margin: 0 auto 10px;

        display: flex;

        align-items: center;

        justify-content: center;
    }

    .university-logo img {
        width: 100%;

        height: 100%;

        object-fit: contain;
    }


    /* =====================================================
       UNIVERSITY INFORMATION
       ===================================================== */

    .university-info {
        width: 100%;

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    /* University name */

    .university-info h3 {
        width: 100%;

        margin: 0 0 6px;

        font-size: 12px;

        line-height: 1.35;

        text-align: center;

        word-break: normal;

        overflow-wrap: break-word;
    }


    /* Location */

    .location {
        width: 100%;

        margin: 0 0 9px;

        font-size: 9px;

        line-height: 1.4;

        text-align: center;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 3px;
    }


    /* =====================================================
       UNIVERSITY STATS
       ===================================================== */

    .university-stats {
        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 5px;

        min-width: 0;

        margin-top: auto;

        text-align: center;
    }

    .university-stats span {
        font-size: 7px;

        white-space: nowrap;

        text-align: center;
    }


    /* =====================================================
       CARD ARROW
       ===================================================== */

    .university-stats .card-arrow {
        width: 27px;

        height: 27px;

        min-width: 27px;

        flex: 0 0 27px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-left: 2px;
    }


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

    @media (max-width: 380px) {

        .universities-section {
            padding-left: 5%;

            padding-right: 5%;
        }


        .universities-heading h2 {
            font-size: 23px;
        }

        .universities-heading p {
            font-size: 11px;
        }


        /* 2 columns still */

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

            gap: 10px;
        }


        /* Slightly smaller cards */

        .university-card {
            min-height: 195px;

            padding: 14px 7px;
        }


        /* Logo */

        .university-logo {
            width: 56px;

            height: 56px;

            min-width: 56px;

            flex-basis: 56px;

            margin-bottom: 9px;
        }


        /* Name */

        .university-info h3 {
            font-size: 11px;

            line-height: 1.3;
        }


        /* Location */

        .location {
            font-size: 8px;

            margin-bottom: 8px;
        }


        /* Stats */

        .university-stats {
            gap: 3px;
        }

        .university-stats span {
            font-size: 6px;
        }


        /* Arrow */

        .university-stats .card-arrow {
            width: 25px;

            height: 25px;

            min-width: 25px;

            flex-basis: 25px;
        }
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    footer {
        padding: 0 20px;

        box-sizing: border-box;
    }

    .footer-container {
        max-width: none;

        display: grid;

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

        column-gap: 20px;

        row-gap: 32px;

        padding: 42px 0 22px;

        box-sizing: border-box;
    }


    /* ================= FOOTER BRAND ================= */

    .footer-brand {
        grid-column: 1 / -1;

        grid-row: 1;

        align-items: center;

        text-align: center;

        margin-bottom: 5px;
    }

    .footer-logo {
        display: flex;

        align-items: center;

        justify-content: center;

        gap: 1px;
    }

    .footer-logo img {
        width: 30px;

        height: 30px;

        margin-right: 0;
    }

    .footer-logo > span {
        font-size: 21px;

        line-height: 1;
    }

    .footer-description {
        margin: 14px auto 0;

        max-width: 260px;

        font-size: 12px;

        line-height: 1.65;

        color: #66789b;
    }

    .footer-description br {
        display: none;
    }


    /* ================= LEGAL ================= */

    .footer-container > .footer-links:nth-child(2) {
        grid-column: 1;

        grid-row: 2;

        margin-left: 25px;

        padding-left: 10px;
    }


    /* ================= SUPPORT ================= */

    .footer-container > .footer-links:nth-child(3) {
        grid-column: 2;

        grid-row: 2;

        margin-left: 100px;

        padding-left: 10px;
    }


    /* ================= LINK HEADINGS ================= */

    .footer-links h3 {
        margin: 0 0 17px;

        font-size: 14px;
    }

    .footer-links a {
        margin-bottom: 11px;

        font-size: 12px;

        line-height: 1.5;

        white-space: nowrap;
    }


    /* ================= CONNECT ================= */

    .footer-right {
        grid-column: 1 / -1;

        grid-row: 3;

        align-items: center;

        text-align: center;

        margin-top: 2px;
    }

    .footer-right h3 {
        margin: 0 0 15px;

        font-size: 14px;
    }

    .social {
        display: flex;

        align-items: center;

        justify-content: center;

        gap: 20px;
    }


    /* ================= SOCIAL ICONS ================= */

    .insta-logo {
        width: 22px;

        height: 22px;
    }

    .telegram-logo,
    .email-logo {
        width: 25px;

        height: 25px;
    }


    /* ================= FOOTER BOTTOM ================= */

    .footer-bottom {
        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 7px;

        text-align: center;
    }

    .copyright,
    .made-for-students {
        font-size: 10px;
    }

}