/* ============================================
   LAYOUT ALIGN — Sabhi pages par lagu
   Top bar, logo, main menu, footer — max-width 1800px, same left/right padding.
   Is file ko har page par link kiya gaya hai; yahi rules global apply hote hain.
   ============================================ */

/* Course page table container: max-width 1400px, padding 3% — isi ke saath align */
:root {
    --align-max: 1400px;
    --align-padding: 3%;
    --topbar-padding: 3%;   /* Top menu logo ke saath align */
    --navbar-max: 1800px;   /* Main menu ki width */
}

/* Top bar — border se nazdeek (kam padding) */
.top-bar .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--topbar-padding);
    padding-right: var(--topbar-padding);
}

/* Header — 1800px (navbar ke saath); footer bhi 1800px */
.main-header .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--align-padding);
    padding-right: var(--align-padding);
}

/* Footer — 1800px (top/logo/menu jaisa) */
footer .container,
footer .footer-grid,
.footer-sitemap .container,
.copyright .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--align-padding);
    padding-right: var(--align-padding);
}

/* Main menu (navbar) — 1800px */
.navbar .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--align-padding);
    padding-right: var(--align-padding);
}

@media (min-width: 1024px) {
    .top-bar .container {
        max-width: var(--navbar-max);
        padding-left: var(--topbar-padding);
        padding-right: var(--topbar-padding);
    }
    .main-header .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
    footer .container,
    footer .footer-grid,
    .footer-sitemap .container,
    .copyright .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
    .navbar .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
}

@media (min-width: 1600px) {
    .top-bar .container {
        max-width: var(--navbar-max);
        padding-left: var(--topbar-padding);
        padding-right: var(--topbar-padding);
    }
    .main-header .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
    footer .container,
    footer .footer-grid,
    .footer-sitemap .container,
    .copyright .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
    .navbar .container {
        max-width: var(--navbar-max);
        padding-left: var(--align-padding);
        padding-right: var(--align-padding);
    }
}

/* Footer: phone numbers - 2 spaces between, no stretch (desktop + mobile) */
footer .contact-list .phone-numbers {
    gap: 0 !important;
    max-width: fit-content !important;
}
footer .contact-list .phone-numbers a {
    flex: 0 0 auto !important;
    padding: 0 !important;
}
footer .contact-list .phone-sep {
    margin: 0 2px !important;
}
footer .contact-list li:has(i.fa-phone-alt) .phone-numbers,
footer .contact-list li:has(i.fa-phone) .phone-numbers {
    flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------------
   Ultrawide / 27"–32": cap % padding so chrome does not hug edges awkwardly
   --------------------------------------------------------------------------- */
@media (min-width: 1920px) {
    :root {
        --align-padding: min(3vw, 3.5rem);
        --topbar-padding: min(3vw, 3rem);
    }
}

@media (min-width: 2560px) {
    :root {
        --align-padding: min(2.75vw, 4rem);
        --topbar-padding: min(2.75vw, 3.5rem);
    }
}