/*=========================================================
    LOUIS CARTER FOUNDATION
    MISSION & VISION PAGE
=========================================================*/


/*=========================================================
    HERO
=========================================================*/

.mission-vision-hero{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #061d38 0%,
            #0b4da1 55%,
            #2f6df6 100%
        );

    color:#fff;

}


/* Decorative overlay */

.mission-vision-hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(47,109,246,.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255,193,7,.16),
            transparent 35%
        );

    pointer-events:none;

}


/* Hero container */

.mission-vision-hero > .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}


/* Hero content */

.mission-vision-hero-content{

    width:100%;

    max-width:900px;

    margin:0 auto;

    padding:

        170px
        20px
        80px;

    text-align:center;

}


/* Hero tag */

.mission-vision-hero .mission-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 20px;

    border-radius:50px;

    background:rgba(255,255,255,.13);

    border:1px solid rgba(255,255,255,.15);

    color:#ffc107;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.2px;

}


/* Hero heading */

.mission-vision-hero h1{

    margin:24px auto 20px;

    max-width:850px;

    color:#fff;

    font-size:56px;

    line-height:1.18;

    font-weight:800;

}


/* Hero paragraph */

.mission-vision-hero p{

    max-width:760px;

    margin:0 auto;

    color:rgba(255,255,255,.9);

    font-size:18px;

    line-height:1.85;

}


/* Breadcrumb */

.mission-vision-breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;

    font-size:14px;

    font-weight:600;

}


.mission-vision-breadcrumb a{

    color:#ffc107;

    text-decoration:none;

    transition:.3s ease;

}


.mission-vision-breadcrumb a:hover{

    color:#fff;

}


.mission-vision-breadcrumb span{

    color:rgba(255,255,255,.85);

}


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

.foundation-birth .container,
.foundation-origin .container,
.mission-vision-section .container,
.chairlady-message .container,
.mission-impact .container,
.mission-legacy .container,
.mission-vision-cta .container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}


/*=========================================================
    COMMON SECTION TAG
=========================================================*/

.mission-section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:50px;

    background:#eef4ff;

    color:#2f6df6;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}


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

.foundation-birth{

    padding:100px 0;

    background:#fff;

}


.foundation-birth-content{

    max-width:900px;

    margin:0 auto;

}


.foundation-birth h2{

    margin:20px 0;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.foundation-birth p{

    margin:0 0 20px;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


/*=========================================================
    FOUNDATION ORIGIN / HISTORY
=========================================================*/

.foundation-origin{

    padding:100px 0;

    background:#f7faff;

}


.foundation-origin-header{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

}


.foundation-origin-header h2{

    margin:18px 0;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.foundation-origin-header p{

    margin:0;

    color:#68768b;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
    HISTORY TIMELINE
=========================================================*/

.foundation-timeline{

    position:relative;

    max-width:900px;

    margin:0 auto;

}


.foundation-timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    background:#dbe6f5;

}


.foundation-timeline-item{

    position:relative;

    width:50%;

    padding:0 45px 45px;

    box-sizing:border-box;

}


.foundation-timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}


.foundation-timeline-item:nth-child(even){

    left:50%;

    text-align:left;

}


.foundation-timeline-dot{

    position:absolute;

    top:3px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#ffc107;

    border:4px solid #fff;

    box-shadow:0 0 0 3px #2f6df6;

}


.foundation-timeline-item:nth-child(odd)
.foundation-timeline-dot{

    right:-8px;

}


.foundation-timeline-item:nth-child(even)
.foundation-timeline-dot{

    left:-8px;

}


.foundation-timeline-year{

    display:block;

    margin-bottom:8px;

    color:#2f6df6;

    font-size:13px;

    font-weight:800;

    letter-spacing:1px;

}


.foundation-timeline-item h3{

    margin:0 0 10px;

    color:#12355b;

    font-size:22px;

    font-weight:800;

}


.foundation-timeline-item p{

    margin:0;

    color:#68768b;

    font-size:15px;

    line-height:1.8;

}


/*=========================================================
    MISSION & VISION SECTION
=========================================================*/

.mission-vision-section{

    padding:100px 0;

    background:#fff;

}


.mission-vision-heading{

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;

}


.mission-vision-heading h2{

    margin:18px 0;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.mission-vision-heading p{

    margin:0;

    color:#68768b;

    font-size:17px;

    line-height:1.8;

}


.mission-vision-grid{

    display:grid;

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

    gap:30px;

}


/* Mission / Vision cards */

.mission-card,
.vision-card{

    position:relative;

    padding:50px 40px;

    overflow:hidden;

    border-radius:28px;

    border:1px solid #e3ebf5;

    background:#fff;

    box-shadow:0 18px 45px rgba(17,62,120,.08);

    transition:.35s ease;

}


.mission-card:hover,
.vision-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(17,62,120,.13);

}


/* Decorative top line */

.mission-card::before,
.vision-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:5px;

    background:
        linear-gradient(
            90deg,
            #0b4da1,
            #2f6df6,
            #ffc107
        );

}


/* Icons */

.mission-card-icon,
.vision-card-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:20px;

    background:#eef4ff;

    color:#2f6df6;

    font-size:27px;

}


.mission-card h3,
.vision-card h3{

    margin:0 0 15px;

    color:#12355b;

    font-size:27px;

    font-weight:800;

}


.mission-card p,
.vision-card p{

    margin:0;

    color:#68768b;

    font-size:16px;

    line-height:1.9;

}


/*=========================================================
    CHAIRLADY MESSAGE
=========================================================*/

.chairlady-message{

    padding:100px 0;

    background:#f7faff;

}


.chairlady-message-wrapper{

    max-width:950px;

    margin:0 auto;

    padding:60px;

    border-radius:30px;

    background:#fff;

    border:1px solid #e4ebf4;

    box-shadow:0 18px 50px rgba(17,62,120,.08);

}


.chairlady-message-header{

    margin-bottom:30px;

}


.chairlady-message-header span{

    display:block;

    margin-bottom:8px;

    color:#2f6df6;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

}


.chairlady-message-header h2{

    margin:0;

    color:#12355b;

    font-size:32px;

    line-height:1.3;

    font-weight:800;

}


.chairlady-message p{

    margin:0 0 18px;

    color:#68768b;

    font-size:16px;

    line-height:1.9;

}


.chairlady-message-author{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #e5ebf3;

}


.chairlady-message-author strong{

    display:block;

    color:#12355b;

    font-size:16px;

}


.chairlady-message-author span{

    display:block;

    margin-top:4px;

    color:#68768b;

    font-size:14px;

}


/*=========================================================
    IMPACT
=========================================================*/

.mission-impact{

    padding:100px 0;

    background:#fff;

}


.mission-impact-heading{

    max-width:800px;

    margin:0 auto 55px;

    text-align:center;

}


.mission-impact-heading h2{

    margin:18px 0;

    color:#12355b;

    font-size:42px;

    font-weight:800;

}


.mission-impact-heading p{

    color:#68768b;

    font-size:17px;

    line-height:1.8;

}


.mission-impact-grid{

    display:grid;

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

    gap:25px;

}


.mission-impact-card{

    padding:35px 25px;

    text-align:center;

    border-radius:24px;

    background:#f7faff;

    border:1px solid #e5ebf3;

}


.mission-impact-number{

    display:block;

    margin-bottom:8px;

    color:#0b4da1;

    font-size:42px;

    font-weight:800;

}


.mission-impact-card h3{

    margin:0 0 10px;

    color:#12355b;

    font-size:19px;

    font-weight:800;

}


.mission-impact-card p{

    margin:0;

    color:#68768b;

    font-size:14px;

    line-height:1.7;

}


/*=========================================================
    LEGACY
=========================================================*/

.mission-legacy{

    padding:100px 0;

    background:#f7faff;

}


.mission-legacy-content{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}


.mission-legacy-content h2{

    margin:18px 0 22px;

    color:#12355b;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

}


.mission-legacy-content p{

    margin:0 0 18px;

    color:#68768b;

    font-size:17px;

    line-height:1.9;

}


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

.mission-vision-cta{

    padding:90px 0 100px;

    background:#fff;

}


.mission-vision-cta-wrapper{

    padding:75px 45px;

    text-align:center;

    border-radius:35px;

    background:
        linear-gradient(
            135deg,
            #0b4da1,
            #2f6df6
        );

    box-shadow:0 25px 65px rgba(17,62,120,.15);

}


.mission-vision-cta-wrapper h2{

    margin:22px auto 18px;

    color:#fff;

    font-size:44px;

    line-height:1.25;

    font-weight:800;

}


.mission-vision-cta-wrapper p{

    max-width:700px;

    margin:0 auto 32px;

    color:rgba(255,255,255,.9);

    font-size:17px;

    line-height:1.9;

}


.mission-vision-cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


.mission-primary-btn,
.mission-outline-btn{

    min-width:190px;

    min-height:55px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

    box-sizing:border-box;

}


.mission-primary-btn{

    background:#ffc107;

    color:#12355b;

}


.mission-primary-btn:hover{

    transform:translateY(-4px);

}


.mission-outline-btn{

    color:#fff;

    background:transparent;

    border:2px solid rgba(255,255,255,.55);

}


.mission-outline-btn:hover{

    background:#fff;

    color:#12355b;

}


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

@media(max-width:991px){

    .mission-vision-hero{

        min-height:500px;

    }


    .mission-vision-hero-content{

        padding-top:160px;

    }


    .mission-vision-hero h1{

        font-size:46px;

    }


    .mission-vision-grid{

        grid-template-columns:1fr;

    }


    .mission-impact-grid{

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

    }

}


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

@media(max-width:768px){

    .mission-vision-hero{

        min-height:470px;

    }


    .mission-vision-hero > .container{

        padding:0 15px;

    }


    .mission-vision-hero-content{

        padding:

            150px
            10px
            60px;

    }


    .mission-vision-hero h1{

        margin-top:20px;

        font-size:34px;

        line-height:1.2;

    }


    .mission-vision-hero p{

        font-size:15px;

        line-height:1.7;

    }


    .mission-vision-breadcrumb{

        margin-top:22px;

        font-size:13px;

    }


    .foundation-birth,
    .foundation-origin,
    .mission-vision-section,
    .chairlady-message,
    .mission-impact,
    .mission-legacy{

        padding:70px 0;

    }


    .foundation-birth .container,
    .foundation-origin .container,
    .mission-vision-section .container,
    .chairlady-message .container,
    .mission-impact .container,
    .mission-legacy .container,
    .mission-vision-cta .container{

        padding:0 15px;

    }


    .foundation-birth h2,
    .foundation-origin-header h2,
    .mission-vision-heading h2,
    .mission-impact-heading h2,
    .mission-legacy-content h2{

        font-size:32px;

    }


    .foundation-birth p,
    .mission-vision-heading p,
    .foundation-origin-header p,
    .mission-legacy-content p{

        font-size:15px;

        line-height:1.8;

    }


    /* Timeline becomes single column */

    .foundation-timeline::before{

        left:10px;

        transform:none;

    }


    .foundation-timeline-item,
    .foundation-timeline-item:nth-child(even),
    .foundation-timeline-item:nth-child(odd){

        width:100%;

        left:0;

        padding:

            0
            0
            40px
            40px;

        text-align:left;

    }


    .foundation-timeline-item:nth-child(odd)
    .foundation-timeline-dot,
    .foundation-timeline-item:nth-child(even)
    .foundation-timeline-dot{

        left:3px;

        right:auto;

    }


    .mission-card,
    .vision-card{

        padding:35px 25px;

    }


    .chairlady-message-wrapper{

        padding:35px 25px;

        border-radius:24px;

    }


    .mission-impact-grid{

        grid-template-columns:1fr;

    }


    .mission-vision-cta{

        padding:60px 0 70px;

    }


    .mission-vision-cta-wrapper{

        padding:55px 25px;

        border-radius:25px;

    }


    .mission-vision-cta-wrapper h2{

        font-size:32px;

    }


    .mission-vision-cta-buttons{

        flex-direction:column;

    }


    .mission-primary-btn,
    .mission-outline-btn{

        width:100%;

    }

}