/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    /* Global font-size override */
    body,
    .top-bar,
    .top-bar a,
    .menu > li > a,
    .menu .apply-btn,
    .logo-text-group span,
    .hero h1,
    .hero h2,
    .quick-links p,
    .dropdown li a,
    .explore h2,
    .footer-content h3,
    .footer-content p,
    .footer-copy {
        font-size: 12px !important;
    }

    /* Optional: line height to keep spacing readable */
    body, .top-bar, .hero, .quick-links, .explore, .footer {
        line-height: 1.4;
    }
}

@media (max-width: 768px) {


    .logo-img {
        height: 65px;
    }

    .logo-text {
        font-size: 16px;
    }

    .logo-title {
        font-size: 20px;
    }

    .logo-slogan,
    .logo-motto {
        font-size: 12px;
    }

    .top-bar {
        flex-direction: column;
        text-align: center;
        position: relative;
        padding-bottom: 0;
    }

    /*start new mobile display*/
    /* NAV container */
    .top-links {
        margin-top: 270px;
        margin-left: 10px;
        width: fit-content;
        display: flex;
        justify-content: center; /* center the menu block */

        position: absolute;
        top: 55%; /* vertical placement over hero */
        left: 25px; /* left-most alignment */

        background: rgba(31, 95, 191, 0.35);
        padding: 14px 18px;
        border-radius: 10px;
        backdrop-filter: blur(4px);
        transform: translateY(-50%);
        z-index: 2000;
    }

    /* Menu becomes vertical */
    .menu {
        flex-direction: column;
        align-items: flex-start; /* left align text */
        width: fit-content;
        margin-top: 100px;
        margin-left: 20px;
        gap: 6px;
    }

        .menu > li > a {
            font-size: 16px;
            padding: 8px 0;
            color: #ffffff;
        }

        /* Apply button spacing */
        .menu .apply-btn {
            margin-left: 0;
            margin-top: 8px;
            align-self: flex-start;
        }

    /* Dropdown positioning for vertical menu */
    .dropdown {
        position: relative;
        top: 0;
        left: 0;
        box-shadow: none;
        border-radius: 0;
        margin-left: 10px;
    }
    /*end display for mobile*/

    /* Dropdowns flow downward */
    .dropdown {
        position: relative;
        box-shadow: none;
        border-radius: 0;
        margin-left: 12px;
    }

    /* Apply button */
    .menu .apply-btn {
        margin: 8px 0 0 0;
        align-self: flex-start;
    }
    /*end new  */

    .quick-links {
        flex-wrap: wrap;
        gap: 20px;
    }
}
/*end media queries*/