/* =========================================================
   BAPBI REDESIGN
   ABOUT PAGE STYLESHEET
   Bethesda Apostolic Pentecostal Bible Institute
========================================================= */


/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700;800&display=swap'
);


/* =========================================================
   ROOT
========================================================= */

:root {

    --espresso: #120906;
    --espresso-light: #211008;
    --brown: #351707;
    --bronze: #6d350c;

    --gold-dark: #9f6816;
    --gold: #d5a32f;
    --gold-light: #f1cc72;

    --ivory: #f6f0e5;
    --cream: #e9dfcf;

    --white: #ffffff;

    --text-light: #e9e4dc;
    --text-muted: #b9b0a7;

    --text-dark: #2b2019;
    --text-dark-muted: #766960;

    --border-dark:
        rgba(213, 163, 47, 0.22);

    --border-light:
        rgba(38, 20, 8, 0.14);

    --shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);

    --container-width: 1280px;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:
        var(--espresso);

    color:
        var(--text-light);

    font-family:
        "Inter",
        sans-serif;

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font:
        inherit;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   CONTAINER
========================================================= */

.content-container {

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin:
        0 auto;

}


/* =========================================================
   TOP MESSAGE
========================================================= */

.site-header {

    position:
        relative;

    z-index:
        1000;

    background:
        linear-gradient(
            180deg,
            #160b07,
            #100807
        );

    border-bottom:
        1px solid var(--border-dark);

}


.top-message {

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    padding:
        0 5%;

    border-bottom:
        1px solid
        rgba(213, 163, 47, 0.14);

}


.top-message p {

    color:
        var(--gold-light);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


.top-message span {

    color:
        var(--gold);

    padding:
        0 5px;

}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-navigation {

    width:
        min(
            calc(100% - 48px),
            1400px
        );

    min-height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


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

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    flex-shrink:
        0;

}


.brand-logo {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.brand span {

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.45rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    margin-left:
        auto;

}


.desktop-nav > a,
.dropdown-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    background:
        none;

    border:
        none;

    color:
        var(--text-light);

    cursor:
        pointer;

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    padding:
        30px 0;

    transition:
        color 0.25s ease;

}


.desktop-nav > a:hover,
.dropdown-button:hover {

    color:
        var(--gold-light);

}


.desktop-nav > a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        20px;

    height:
        2px;

    background:
        var(--gold);

}


/* =========================================================
   DROPDOWNS
========================================================= */

.nav-dropdown {

    position:
        relative;

}


.dropdown-button span {

    color:
        var(--gold);

    font-size:
        0.85rem;

}


.dropdown-menu {

    position:
        absolute;

    top:
        calc(100% - 8px);

    left:
        -18px;

    width:
        220px;

    padding:
        10px;

    background:
        #1a0d08;

    border:
        1px solid var(--border-dark);

    box-shadow:
        var(--shadow);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}


.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.dropdown-menu a {

    display:
        block;

    padding:
        11px 14px;

    color:
        var(--text-muted);

    font-size:
        0.85rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.dropdown-menu a:hover,
.dropdown-menu a.active {

    color:
        var(--gold-light);

    background:
        rgba(213, 163, 47, 0.08);

}


/* =========================================================
   ENROLL BUTTON
========================================================= */

.enroll-button {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 23px;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #241506;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.enroll-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(213, 163, 47, 0.25);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display:
        none;

    width:
        48px;

    height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

    background:
        transparent;

    border:
        1px solid var(--border-dark);

    cursor:
        pointer;

}


.mobile-menu-button span {

    display:
        block;

    width:
        21px;

    height:
        2px;

    background:
        var(--gold-light);

}


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

.mobile-navigation {

    display:
        none;

}


/* =========================================================
   SHARED TYPOGRAPHY
========================================================= */

.section-eyebrow {

    color:
        var(--gold-light);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.section-heading {

    margin-bottom:
        50px;

    text-align:
        center;

}


.section-heading h2 {

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    font-weight:
        600;

    line-height:
        1.15;

    text-transform:
        uppercase;

}


.section-heading p {

    margin-top:
        12px;

    color:
        var(--bronze);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


/* =========================================================
   ABOUT INTRODUCTION
========================================================= */

.about-intro-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        120px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(213, 163, 47, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(119, 60, 15, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0f0806,
            #1b0d08
        );

}


.about-intro-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(213, 163, 47, 0.025),
            transparent
        );

}


.about-intro-grid {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    gap:
        90px;

    align-items:
        center;

}


.about-intro-content h1 {

    max-width:
        760px;

    margin:
        18px 0 25px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        );

    font-weight:
        600;

    line-height:
        1.04;

}


.about-intro-content h1 span {

    display:
        block;

    color:
        var(--gold-light);

}


.about-intro-lead {

    max-width:
        700px;

    color:
        var(--text-muted);

    font-size:
        1.08rem;

}


.about-intro-panel {

    position:
        relative;

    padding:
        50px;

    border:
        1px solid var(--border-dark);

    background:
        linear-gradient(
            135deg,
            rgba(213, 163, 47, 0.09),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        var(--shadow);

}


.about-intro-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}


.about-intro-panel > p:last-child {

    margin-top:
        20px;

    color:
        var(--cream);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.75rem;

    line-height:
        1.45;

}


/* =========================================================
   OUR MISSION
========================================================= */

.mission-section {

    padding:
        120px 0;

    background:
        var(--ivory);

    color:
        var(--text-dark);

}


.mission-grid {

    display:
        grid;

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

    gap:
        100px;

    align-items:
        start;

}


.mission-content h2 {

    margin:
        18px 0 30px;

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );

    font-weight:
        600;

    line-height:
        1.08;

}


.mission-content h2 span {

    display:
        block;

    color:
        var(--bronze);

}


.mission-content > p {

    max-width:
        680px;

    margin-bottom:
        22px;

    color:
        var(--text-dark-muted);

    font-size:
        1rem;

}


/* =========================================================
   WHO WE SERVE
========================================================= */

.who-we-serve-panel {

    padding:
        45px;

    background:
        #211008;

    border:
        1px solid var(--border-dark);

    box-shadow:
        0 25px 50px
        rgba(38, 20, 8, 0.16);

}


.who-we-serve-panel > .section-eyebrow {

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(213, 163, 47, 0.18);

}


.serve-item {

    display:
        grid;

    grid-template-columns:
        62px 1fr;

    gap:
        22px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

}


.serve-item:last-child {

    padding-bottom:
        0;

    border-bottom:
        none;

}


.serve-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

    font-size:
        0.82rem;

    border:
        1px solid var(--gold-dark);

}


.serve-item h3 {

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.25;

    text-transform:
        uppercase;

}


.serve-item p {

    margin-top:
        9px;

    color:
        var(--text-muted);

    font-size:
        0.9rem;

}


/* =========================================================
   OUR FOUNDATION
========================================================= */

.foundation-section {

    position:
        relative;

    padding:
        120px 0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(119, 60, 15, 0.22),
            transparent 55%
        ),
        #140a06;

}


.foundation-content {

    text-align:
        center;

}


.foundation-content h2 {

    margin:
        18px auto 24px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2.6rem,
            5vw,
            5rem
        );

    font-weight:
        600;

    line-height:
        1.1;

}


.foundation-content h2 span {

    display:
        block;

    color:
        var(--gold-light);

}


.foundation-lead {

    max-width:
        780px;

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size:
        1.05rem;

}


.foundation-grid {

    display:
        grid;

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

    gap:
        25px;

    margin-top:
        65px;

}


.foundation-item {

    padding:
        42px 34px;

    text-align:
        left;

    border:
        1px solid
        rgba(213, 163, 47, 0.18);

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.foundation-item:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(241, 204, 114, 0.55);

    background:
        rgba(213, 163, 47, 0.06);

}


.foundation-item > span {

    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

}


.foundation-item h3 {

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.2rem;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


.foundation-item p {

    margin-top:
        18px;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

}


/* =========================================================
   OUR COVERING
========================================================= */

.covering-section {

    padding:
        120px 0;

    background:
        #f0e7d8;

    color:
        var(--text-dark);

}


.covering-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        110px;

    align-items:
        center;

}


.covering-emblem {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        1px solid
        rgba(109, 53, 12, 0.28);

    background:
        radial-gradient(
            circle at center,
            rgba(213, 163, 47, 0.2),
            transparent 45%
        ),
        #1c0d07;

    box-shadow:
        0 25px 55px
        rgba(38, 20, 8, 0.16);

}


.covering-emblem::before {

    content:
        "";

    position:
        absolute;

    inset:
        22px;

    border:
        1px solid
        rgba(213, 163, 47, 0.35);

    pointer-events:
        none;

}


.covering-emblem p {

    position:
        relative;

    color:
        var(--gold-light);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            3.5rem,
            7vw,
            6rem
        );

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.covering-emblem span {

    position:
        relative;

    max-width:
        220px;

    margin-top:
        18px;

    color:
        var(--cream);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.35rem;

    font-style:
        italic;

    line-height:
        1.3;

}


.covering-content h2 {

    margin:
        18px 0 30px;

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );

    font-weight:
        600;

    line-height:
        1.08;

}


.covering-content h2 span {

    display:
        block;

    color:
        var(--bronze);

}


.covering-content > p {

    max-width:
        680px;

    margin-bottom:
        22px;

    color:
        var(--text-dark-muted);

}


/* =========================================================
   WHAT WE ARE PREPARING FOR
========================================================= */

.preparation-section {

    padding:
        120px 0;

    background:
        var(--ivory);

}


.preparation-list {

    max-width:
        980px;

    margin:
        0 auto;

    border-top:
        1px solid var(--border-light);

}


.preparation-item {

    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        35px;

    padding:
        40px 0;

    border-bottom:
        1px solid var(--border-light);

}


.preparation-number {

    color:
        var(--gold-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.preparation-content {

    display:
        grid;

    grid-template-columns:
        minmax(180px, 0.65fr)
        minmax(0, 1.35fr);

    gap:
        40px;

}


.preparation-content h3 {

    color:
        var(--text-dark);

    font-family:
        "Cinzel",
        serif;

    font-size:
        1.3rem;

    line-height:
        1.3;

    text-transform:
        uppercase;

}


.preparation-content p {

    color:
        var(--text-dark-muted);

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    min-height:
        54px;

    padding:
        0 28px;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.button span {

    font-size:
        1.15rem;

}


.button-gold {

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    color:
        #261606;

    border:
        1px solid var(--gold-light);

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-gold:hover {

    box-shadow:
        0 15px 35px
        rgba(213, 163, 47, 0.25);

}


/* =========================================================
   CLOSING CALL
========================================================= */

.about-closing-section {

    position:
        relative;

    padding:
        130px 0;

    overflow:
        hidden;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(213, 163, 47, 0.22),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #160a06,
            #281208
        );

}


.about-closing-content {

    position:
        relative;

    max-width:
        900px;

}


.about-closing-content h2 {

    margin:
        20px auto 28px;

    color:
        var(--ivory);

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            2.7rem,
            6vw,
            5.5rem
        );

    font-weight:
        600;

    line-height:
        1.08;

}


.about-closing-content h2 span {

    display:
        block;

    color:
        var(--gold-light);

}


.about-closing-content > p {

    max-width:
        680px;

    margin:
        0 auto 35px;

    color:
        var(--text-muted);

    font-size:
        1.05rem;

}


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






































































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

@media (max-width: 1100px) {

    .desktop-nav {

        gap:
            17px;

    }


    .desktop-nav > a,
    .dropdown-button {

        font-size:
            0.65rem;

    }


    .main-navigation {

        gap:
            20px;

    }


    .about-intro-grid {

        gap:
            55px;

    }


    .mission-grid {

        gap:
            60px;

    }


    .covering-grid {

        gap:
            70px;

    }




}


/* =========================================================
   MOBILE NAVIGATION AND TABLET
========================================================= */

@media (max-width: 900px) {

    .top-message {

        display:
            none;

    }


    .main-navigation {

        min-height:
            74px;

        width:
            min(
                calc(100% - 32px),
                100%
            );

    }


    .desktop-nav,
    .enroll-button {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        margin-left:
            auto;

        position:
            relative;

        z-index:
            2100;

    }


    .mobile-navigation {

        position:
            fixed;

        top:
            0;

        right:
            0;

        bottom:
            0;

        z-index:
            2000;

        display:
            flex;

        flex-direction:
            column;

        width:
            min(
                380px,
                88vw
            );

        height:
            100vh;

        min-height:
            100vh;

        padding:
            22px;

        background:
            #130b08;

        border-left:
            1px solid var(--border-dark);

        box-shadow:
            -20px 0 60px
            rgba(0, 0, 0, 0.5);

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateX(110%);

        transition:
            transform 0.35s ease,
            visibility 0.35s ease;

    }


    .mobile-navigation.open {

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateX(0);

    }


    .mobile-nav-header {

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        padding:
            0 0 20px;

        margin-bottom:
            10px;

        border-bottom:
            1px solid var(--border-dark);

    }


    .mobile-nav-header span {

        color:
            var(--gold-light);

        font-family:
            "Cinzel",
            serif;

        font-size:
            1.1rem;

    }


    .mobile-nav-header button,
    .mobile-menu-close {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            40px;

        height:
            40px;

        padding:
            0;

        background:
            transparent;

        border:
            1px solid var(--border-dark);

        color:
            var(--gold-light);

        font-size:
            1.8rem;

        line-height:
            1;

        cursor:
            pointer;

    }


    .mobile-nav-header button:hover,
    .mobile-nav-header button:focus-visible,
    .mobile-menu-close:hover,
    .mobile-menu-close:focus-visible {

        background:
            var(--gold);

        border-color:
            var(--gold);

        color:
            var(--espresso);

    }


    .mobile-navigation a {

        display:
            block;

        padding:
            16px;

        margin-bottom:
            3px;

        color:
            var(--text-light);

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.05);

        font-size:
            1rem;

        font-weight:
            700;

        line-height:
            1.5;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease;

    }


    .mobile-navigation a:hover,
    .mobile-navigation a:focus-visible {

        color:
            var(--gold-light);

        background:
            rgba(213, 163, 47, 0.08);

    }


    .mobile-navigation a.mobile-active {

        color:
            var(--gold-light);

        background:
            linear-gradient(
                90deg,
                rgba(213, 163, 47, 0.17),
                transparent
            );

        border:
            1px solid var(--border-dark);

    }


    body.mobile-navigation-open {

        overflow:
            hidden;

    }


    .about-intro-section {

        padding:
            90px 0;

    }


    .about-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .about-intro-panel {

        max-width:
            700px;

    }


    .mission-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .who-we-serve-panel {

        max-width:
            700px;

    }


    .foundation-grid {

        grid-template-columns:
            1fr;

        max-width:
            700px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .covering-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .covering-emblem {

        max-width:
            600px;

    }


    .preparation-content {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }




























}


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

@media (max-width: 600px) {

    .content-container {

        width:
            min(
                calc(100% - 32px),
                var(--container-width)
            );

    }


    .brand-logo {

        width:
            50px;

        height:
            50px;

    }


    .brand span {

        font-size:
            1.2rem;

    }


    .about-intro-section {

        padding:
            75px 0;

    }


    .section-eyebrow {

        font-size:
            0.62rem;

        letter-spacing:
            0.12em;

        line-height:
            1.8;

    }


    .about-intro-content h1 {

        font-size:
            2.7rem;

    }


    .about-intro-lead {

        font-size:
            0.98rem;

    }


    .about-intro-panel {

        padding:
            32px 26px;

    }


    .about-intro-panel > p:last-child {

        font-size:
            1.5rem;

    }


    .mission-section,
    .foundation-section,
    .covering-section,
    .preparation-section {

        padding:
            75px 0;

    }


    .mission-content h2,
    .covering-content h2 {

        font-size:
            2.5rem;

    }


    .who-we-serve-panel {

        padding:
            30px 24px;

    }


    .serve-item {

        grid-template-columns:
            52px 1fr;

        gap:
            15px;

    }


    .foundation-item {

        padding:
            34px 26px;

    }


    .covering-emblem {

        min-height:
            320px;

    }


    .preparation-item {

        grid-template-columns:
            1fr;

        gap:
            15px;

        padding:
            32px 0;

    }


    .about-closing-section {

        padding:
            90px 0;

    }


    .about-closing-content h2 {

        font-size:
            2.8rem;

    }


    .button {

        width:
            100%;

    }

}

/* =========================================================
   PORTRAIT TABLET
   Balanced columns for iPad and similar screens
========================================================= */

@media (min-width: 601px)
       and (max-width: 900px)
       and (orientation: portrait) {


    /* =====================================================
       ABOUT INTRODUCTION
    ===================================================== */

    .about-intro-section {

        padding:
            90px 0;

    }


    .about-intro-grid {

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

        gap:
            40px;

        align-items:
            center;

    }


    .about-intro-content h1 {

        font-size:
            clamp(
                2.8rem,
                6vw,
                4.2rem
            );

    }


    .about-intro-lead {

        max-width:
            none;

        font-size:
            1rem;

    }


    .about-intro-panel {

        padding:
            34px 28px;

    }


    .about-intro-panel > p:last-child {

        font-size:
            1.45rem;

    }



    /* =====================================================
       MISSION
    ===================================================== */

    .mission-section {

        padding:
            90px 0;

    }


    .mission-grid {

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

        gap:
            40px;

        align-items:
            start;

    }


    .mission-content h2 {

        font-size:
            clamp(
                2.4rem,
                5vw,
                3.7rem
            );

    }


    .mission-content > p {

        max-width:
            none;

    }


    .who-we-serve-panel {

        padding:
            32px 26px;

    }


    .serve-item {

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

        gap:
            15px;

        padding:
            24px 0;

    }


    .serve-number {

        width:
            44px;

        height:
            44px;

    }


    .serve-item h3 {

        font-size:
            0.92rem;

    }


    .serve-item p {

        font-size:
            0.82rem;

    }



    /* =====================================================
       FOUNDATION
    ===================================================== */

    .foundation-section {

        padding:
            90px 0;

    }


    .foundation-grid {

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

        gap:
            16px;

        max-width:
            none;

    }


    .foundation-item {

        padding:
            32px 22px;

    }


    .foundation-item h3 {

        font-size:
            1rem;

    }


    .foundation-item p {

        font-size:
            0.84rem;

    }



    /* =====================================================
       COVERING
    ===================================================== */

    .covering-section {

        padding:
            90px 0;

    }


    .covering-grid {

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

        gap:
            45px;

        align-items:
            center;

    }


    .covering-emblem {

        min-height:
            330px;

    }


    .covering-emblem p {

        font-size:
            3.8rem;

    }


    .covering-emblem span {

        max-width:
            190px;

        font-size:
            1.15rem;

    }


    .covering-content h2 {

        font-size:
            clamp(
                2.3rem,
                5vw,
                3.7rem
            );

    }


    .covering-content > p {

        max-width:
            none;

        font-size:
            0.94rem;

    }



    /* =====================================================
       PREPARATION
    ===================================================== */

    .preparation-section {

        padding:
            90px 0;

    }


    .preparation-list {

        max-width:
            100%;

    }


    .preparation-item {

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

        gap:
            25px;

        padding:
            34px 0;

    }


    .preparation-content {

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

        gap:
            25px;

    }


    .preparation-content h3 {

        font-size:
            1.05rem;

    }


    .preparation-content p {

        font-size:
            0.9rem;

    }



    /* =====================================================
       CLOSING
    ===================================================== */

    .about-closing-section {

        padding:
            100px 0;

    }


    .about-closing-content {

        max-width:
            760px;

    }


    .about-closing-content h2 {

        font-size:
            clamp(
                2.7rem,
                6vw,
                4.5rem
            );

    }

}

/* =========================================================
   SHARED STICKY SITE NAVIGATION
   Keeps the BAPBI header visible while scrolling on every page.
========================================================= */
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
}