/* ============================================================
   CALRAX HEALTHCARE — Responsive Overrides
   Mobile-first: base styles live in style.css;
   this file adjusts layout across breakpoints.
   ============================================================ */

/* ---------- ≤ 1199px (large tablets / small laptops) ---------- */
@media (max-width: 1199.98px) {
    :root { --section-py: 4.5rem; }

    .main-menu .nav-link { padding: .6rem .7rem !important; }
}

/* ---------- ≤ 991px (tablets) ---------- */
@media (max-width: 991.98px) {
    :root { --section-py: 4rem; --header-h: 68px; }

    .brand-logo { height: 42px; }

    .newsletter-card { padding: 1.75rem; text-align: center; }
    .newsletter-title { font-size: 1.2rem; }

    .footer-main { padding-top: 6rem; }

    .page-banner { padding: 3.5rem 0 3rem; }
}

/* ---------- ≤ 767px (landscape phones) ---------- */
@media (max-width: 767.98px) {
    :root { --section-py: 3.5rem; }

    .section-head { margin-bottom: 2.25rem; }
    .section-title { font-size: 1.6rem; }

    .newsletter-form .input-group { flex-direction: column; }
    .newsletter-form .form-control,
    .newsletter-form .btn { border-radius: 50rem; width: 100%; }
    .newsletter-form .btn { margin-top: .6rem; }

    .footer-map iframe { height: 180px; }

    .footer-bottom { text-align: center; }
}

/* ---------- ≤ 575px (phones) ---------- */
@media (max-width: 575.98px) {
    :root { --section-py: 3rem; }

    .brand-logo { height: 38px; }

    .btn { padding: .6rem 1.3rem; font-size: .9rem; }

    .page-banner h1 { font-size: 1.65rem; }

    .icon-badge { width: 54px; height: 54px; font-size: 1.4rem; }

    .back-to-top { width: 42px; height: 42px; right: 1rem; bottom: 1rem; }

    .mobile-menu { width: 290px; }
}

/* ---------- Large screens polish ---------- */
@media (min-width: 1400px) {
    .container { max-width: 1280px; }
}

/* ---------- Logo scaling (real PNG logo) ---------- */
@media (max-width: 991.98px) {
    .brand-logo { height: 46px; }
    .footer-brand img { height: 56px; }
}
@media (max-width: 575.98px) {
    .brand-logo { height: 40px; }
}