/* ==================================================
   MUSLIM PATH - ABOUT US
================================================== */

.mpa-about{
    --deep:#08284c;
    --navy:#174a73;
    --blue:#01478d;
    --soft:#6b9dc6;
    --gold:#fdb002;
    --line:#e1e9ef;

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

    margin:
        24px auto 100px;
}


/* ==================================================
   FACEBOOK-STYLE PROFILE COVER
================================================== */

.mpa-about-profile{
    text-align:center;
}


.mpa-about-cover{
    width:100%;
    aspect-ratio:16/4.3;

    overflow:hidden;

    background:#eef5f9;

    border-radius:
        10px 10px 4px 4px;
}


.mpa-about-cover img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-about-logo{
    position:relative;
    z-index:5;

    width:112px;
    height:112px;

    margin:
        -55px auto 0;
}


.mpa-about-logo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


.mpa-about-hero{
    max-width:940px;

    margin:
        15px auto 0;
}


.mpa-about-eyebrow,
.mpa-about-copy > span,
.mpa-about-video header > span{
    display:block;

    margin-bottom:10px;

    color:var(--soft);

    font-size:10px;
    font-weight:750;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.mpa-about-hero h1{
    margin:0;

    color:var(--deep);

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

    font-weight:730;

    line-height:1.02;

    letter-spacing:-.05em;
}


html[dir="rtl"]
.mpa-about-hero h1{
    letter-spacing:0;
}


.mpa-about-hero > p{
    max-width:820px;

    margin:
        21px auto 0;

    color:var(--soft);

    font-size:14px;

    line-height:1.9;
}


/* BUTTONS */

.mpa-about-actions{
    display:flex;

    flex-wrap:wrap;

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

    gap:8px;

    margin-top:23px;
}


.mpa-about-btn{
    display:inline-flex;

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

    min-height:40px;

    padding:
        0 17px;

    border-radius:7px;

    font-size:10.5px;
    font-weight:750;

    text-decoration:none !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.mpa-about-btn--primary{
    color:#fff !important;

    background:
        var(--deep);

    border:
        1px solid
        var(--deep);
}


.mpa-about-btn--primary:hover{
    background:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-1px);
}


.mpa-about-btn--secondary{
    color:
        var(--navy) !important;

    background:#fff;

    border:
        1px solid #bfd1df;
}


.mpa-about-btn--secondary:hover{
    border-color:
        var(--soft);

    transform:
        translateY(-1px);
}


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

.mpa-about-stats{
    display:grid;

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

    width:
        min(
            1180px,
            100%
        );

    margin:30px auto 0;

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

    border-bottom:
        1px solid var(--line);
}


.mpa-about-stat{
    position:relative;

    min-width:0;

    padding:
        26px 10px 25px;

    text-align:center;
}


.mpa-about-stat
+ .mpa-about-stat::before{
    content:"";

    position:absolute;

    top:25%;
    bottom:25%;
    left:0;

    width:1px;

    background:
        var(--line);
}


html[dir="rtl"]
.mpa-about-stat
+ .mpa-about-stat::before{
    left:auto;
    right:0;
}


.mpa-about-stat strong{
    display:block;

    min-height:46px;

    color:
        var(--blue);

    font-size:
        clamp(
            2rem,
            3vw,
            3.15rem
        );

    font-weight:800;

    line-height:1;

    letter-spacing:-.035em;

    font-variant-numeric:
        tabular-nums;
}


.mpa-about-stat span{
    display:block;

    margin-top:9px;

    color:#5e6d7d;

    font-size:12px;
    font-weight:650;

    line-height:1.3;
}


.mpa-about-stat::after{
    content:"";

    position:absolute;

    bottom:0;
    left:50%;

    width:0;
    height:3px;

    background:
        var(--gold);

    transform:
        translateX(-50%);

    transition:
        width .4s ease;
}


.mpa-about-stat:hover::after{
    width:42px;
}


/* ==================================================
   EDITORIAL STORY
================================================== */

.mpa-about-story{
    width:
        min(
            1050px,
            100%
        );

    margin:30px auto 0;
}


.mpa-about-row{
    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    align-items:center;

    gap:
        clamp(
            44px,
            7vw,
            88px
        );

    padding:26px 0;

    border-top:
        1px solid var(--line);
}


.mpa-about-row--reverse
.mpa-about-copy{
    order:2;
}


.mpa-about-row--reverse
.mpa-about-visual{
    order:1;
}


.mpa-about-copy h2,
.mpa-about-video h2{
    margin:0;

    color:
        var(--navy);

    font-size:
        clamp(
            1.9rem,
            2.8vw,
            2.85rem
        );

    font-weight:710;

    line-height:1.13;

    letter-spacing:-.03em;
}


html[dir="rtl"]
.mpa-about-copy h2,
html[dir="rtl"]
.mpa-about-video h2{
    letter-spacing:0;
}


.mpa-about-copy p{
    margin:
        17px 0 0;

    color:
        var(--soft);

    font-size:13.5px;

    line-height:1.95;
}


.mpa-about-copy
p + p{
    margin-top:13px;
}


.mpa-about-copy
.mpa-about-actions{
    justify-content:
        flex-start;
}


/* ==================================================
   IMAGES
================================================== */

.mpa-about-visual{
    width:100%;

    margin:0;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#edf5f9;

    border-radius:5px;
}


.mpa-about-visual img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.mpa-about-placeholder{
    display:block;

    width:100%;
    height:100%;

    min-height:300px;

    background:
        radial-gradient(
            circle at 28% 30%,
            rgba(253,176,2,.09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f8fbfd,
            #e7f2f8
        );
}


/* ==================================================
   TEACHER CREDENTIALS
================================================== */

.mpa-about-credentials{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:20px;
}


.mpa-about-credentials span{
    display:inline-flex;

    align-items:center;

    min-height:31px;

    padding:
        0 11px;

    color:
        var(--navy);

    background:#f4f8fb;

    border:
        1px solid #d9e6ef;

    border-radius:999px;

    font-size:9px;
    font-weight:700;
}


/* ==================================================
   VIDEO
================================================== */

.mpa-about-video{
    padding:34px 0;

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

    text-align:center;
}


.mpa-about-video header{
    max-width:760px;

    margin:
        0 auto 28px;
}


.mpa-about-video header p{
    max-width:660px;

    margin:
        16px auto 0;

    color:
        var(--soft);

    font-size:13px;

    line-height:1.85;
}


.mpa-about-video-box{
    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#08284c;

    border-radius:6px;
}


.mpa-about-video-frame{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border:0;

    background:#000;
}

/* ==================================================
   FINAL CTA
================================================== */

.mpa-about-final{
    max-width:790px;

    margin:0 auto;

    padding:34px 0 10px;

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

    text-align:center;
}


.mpa-about-final h2{
    margin:0;

    color:
        var(--deep);

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

    font-weight:720;

    line-height:1.08;
}


.mpa-about-final > p{
    max-width:650px;

    margin:
        17px auto 0;

    color:
        var(--soft);

    font-size:13px;

    line-height:1.85;
}


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

@media (max-width:700px){

    .mpa-about{
        width:
            calc(100% - 24px);

        margin:12px auto 47px;
    }


    .mpa-about-cover{
        aspect-ratio:16/6;
    }


    .mpa-about-logo{
        width:84px;
        height:84px;

        margin-top:-41px;
    }


    .mpa-about-hero h1{
        max-width:365px;

        margin:0 auto;

        font-size:2.08rem;
    }


    .mpa-about-hero > p{
        max-width:370px;

        margin-top:14px;

        font-size:11px;

        line-height:1.75;
    }


    /*
     * All four stats stay in ONE row.
     */

    .mpa-about-stats{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        margin-top:30px;
    }


    .mpa-about-stat{
        min-width:0;

        padding:
            14px 2px;
    }


    .mpa-about-stat strong{
        min-height:27px;

        font-size:1.35rem;

        white-space:nowrap;
    }


    .mpa-about-stat span{
        margin-top:6px;

        padding:0 1px;

        font-size:7.7px;

        line-height:1.15;

        overflow-wrap:anywhere;
    }


    .mpa-about-story{
        margin-top:30px;
    }


    .mpa-about-row,
    .mpa-about-row--reverse{
        display:flex;

        flex-direction:column;

        gap:26px;

        padding:26px 0;
    }


    .mpa-about-row--reverse
    .mpa-about-copy,
    .mpa-about-row--reverse
    .mpa-about-visual{
        order:initial;
    }


    .mpa-about-copy{
        max-width:390px;

        margin:0 auto;

        text-align:center;
    }


    .mpa-about-copy h2{
        font-size:1.72rem;
    }


    .mpa-about-copy p{
        font-size:11.5px;

        line-height:1.8;
    }


    .mpa-about-copy
    .mpa-about-actions{
        justify-content:center;
    }


    .mpa-about-credentials{
        justify-content:center;
    }


    .mpa-about-visual{
        aspect-ratio:16/11;
    }


    .mpa-about-video{
        padding:33px 0;
    }


    .mpa-about-video h2{
        font-size:1.75rem;
    }


    .mpa-about-video header p{
        font-size:11.5px;
    }


    .mpa-about-video-box{
        aspect-ratio:16/9;
    }


    .mpa-about-final{
        padding-top:33px;
    }


    .mpa-about-final h2{
        font-size:1.85rem;
    }


    .mpa-about-final > p{
        font-size:11.5px;
    }


    .mpa-about-btn{
        min-height:38px;

        padding:
            0 14px;

        font-size:9.5px;
    }

}


@media (max-width:390px){

    .mpa-about-stat strong{
        font-size:1.2rem;
    }


    .mpa-about-stat span{
        font-size:7px;
    }

}


/* MPA_ABOUT_CLEAN_SPACING_START */


/* =========================================
   REMOVE ALL SECTION DIVIDER LINES
========================================= */

.mpa-about-stats{
    border-top:0 !important;
    border-bottom:0 !important;
}


.mpa-about-stat
+ .mpa-about-stat::before{
    display:none !important;
}


.mpa-about-row{
    border-top:0 !important;
}


.mpa-about-video{
    border-top:0 !important;
}


.mpa-about-final{
    border-top:0 !important;
}



/* =========================================
   BRING SECTIONS SLIGHTLY CLOSER
========================================= */

.mpa-about-stats{
    margin-top:42px !important;
}


.mpa-about-story{
    margin-top:48px !important;
}


.mpa-about-row{
    gap:
        clamp(
            34px,
            5vw,
            64px
        ) !important;

    padding:26px 0 !important;
}


.mpa-about-video{
    padding:34px 0 !important;
}


.mpa-about-final{
    padding:34px 0 10px !important;
}



/* =========================================
   TIGHTEN TEXT SLIGHTLY
========================================= */

.mpa-about-copy p{
    margin-top:12px !important;

    line-height:1.82 !important;
}


.mpa-about-copy
p + p{
    margin-top:8px !important;
}


.mpa-about-video header p{
    margin-top:12px !important;

    line-height:1.78 !important;
}


.mpa-about-final > p{
    margin-top:13px !important;

    line-height:1.78 !important;
}



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

@media (max-width:700px){

    .mpa-about-stats{
        margin-top:30px !important;
    }


    .mpa-about-story{
        margin-top:30px !important;
    }


    .mpa-about-row,
    .mpa-about-row--reverse{
        gap:20px !important;

        padding:26px 0 !important;
    }


    .mpa-about-video{
        padding:34px 0 !important;
    }


    .mpa-about-final{
        padding-top:34px !important;
    }


    .mpa-about-copy p{
        margin-top:9px !important;

        line-height:1.72 !important;
    }


    .mpa-about-copy
    p + p{
        margin-top:6px !important;
    }

}


/* MPA_ABOUT_CLEAN_SPACING_END */