/* ============================================================
   GOD PAUL FOUNDATION
   VISION & MISSION PAGE
   ============================================================ */


/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.mission-page {
    width: 100%;

    background:
        #f6faf7;
}


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

.mission-hero-section {
    position: relative;

    padding:
        70px 0;

    background:
        linear-gradient(
            135deg,
            #e3f3e9 0%,
            #eff8f2 48%,
            #e7f5fa 100%
        );

    overflow: hidden;
}


.mission-hero-section::before {
    content: '';

    position: absolute;

    top: -180px;
    right: -150px;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background:
        rgba(135, 206, 235, 0.12);
}


.mission-hero-section::after {
    content: '';

    position: absolute;

    left: -180px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(60, 179, 113, 0.08);
}


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

.mission-hero-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 60px;

    z-index: 2;
}


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

.mission-hero-image {
    position: relative;

    overflow: hidden;

    min-height: 430px;

    border-radius: 20px;

    background:
        #dce8df;

    box-shadow:
        0 25px 60px
        rgba(28, 75, 49, 0.16);
}


.mission-hero-image::after {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(18, 61, 36, 0.20),
            transparent 45%
        );

    pointer-events: none;
}


.mission-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.mission-hero-image:hover img {
    transform:
        scale(1.04);
}


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

.mission-hero-content {
    position: relative;
}


.mission-page-title {
    display: inline-block;

    position: relative;

    margin:
        0 0 28px;

    padding-bottom: 14px;

    color:
        #1d4f2b;

    font-family:
        'Poppins',
        sans-serif;

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

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1px;
}


.mission-page-title::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: 0;

    width: 85px;
    height: 5px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--primary-green),
            var(--primary-blue)
        );
}


/* ============================================================
   FOUNDER QUOTE
   ============================================================ */

.founder-quote {
    margin:
        0 0 25px;

    padding: 0;

    color:
        #184f35;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.4rem
        );

    line-height: 1.9;

    font-weight: 400;
}


.quote-mark {
    color:
        var(--primary-green);

    font-size: 2.3rem;

    line-height: 0;

    vertical-align: -7px;
}


/* ============================================================
   FOUNDER NAME
   ============================================================ */

.founder-name {
    margin:
        0 0 25px;

    padding:
        10px 0 10px 18px;

    border-left:
        4px solid
        var(--primary-green);

    color:
        #317050;

    font-size: 0.9rem;

    font-weight: 600;
}


/* ============================================================
   PHOTO CREDIT
   ============================================================ */

.photo-credit {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        #65736b;

    font-size: 0.78rem;
}


.photo-credit i {
    color:
        var(--primary-green);
}


.photo-credit span {
    padding:
        6px 12px;

    border:
        1px solid
        rgba(60, 179, 113, 0.20);

    border-radius: 20px;

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

    color:
        #2f6748;
}


/* ============================================================
   MAIN CONTENT SECTION
   ============================================================ */

.mission-content-section {
    padding:
        85px 0 100px;

    background:
        linear-gradient(
            180deg,
            #f6faf7 0%,
            #edf6f0 60%,
            #eaf5f8 100%
        );
}


/* ============================================================
   MAIN GRID
   ============================================================ */

.mission-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap: 50px;

    align-items: start;
}


.mission-main-column,
.mission-side-column {
    display: flex;

    flex-direction: column;

    gap: 35px;
}


/* ============================================================
   CONTENT BLOCK
   ============================================================ */

.content-block {
    padding:
        30px;

    border:
        1px solid
        rgba(60, 179, 113, 0.10);

    border-radius: 16px;

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

    box-shadow:
        0 10px 30px
        rgba(27, 75, 48, 0.05);
}


/* ============================================================
   HEADINGS
   ============================================================ */

.content-heading {
    display: inline-block;

    position: relative;

    margin:
        0 0 22px;

    padding-bottom: 9px;

    color:
        #2e7d5e;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.25rem
        );

    font-weight: 600;

    line-height: 1.2;
}


.content-heading::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: 0;

    width: 62px;
    height: 4px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--primary-green),
            #9be1bc
        );
}


.sub-heading {
    margin:
        0 0 22px;

    color:
        #2c7753;

    font-size: 1.55rem;

    font-weight: 600;
}


/* ============================================================
   BODY COPY
   ============================================================ */

.large-copy {
    margin: 0;

    color:
        #244d37;

    font-size: 1.03rem;

    line-height: 1.85;
}


/* ============================================================
   VALUE / OBJECTIVE LIST
   ============================================================ */

.mission-list {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.mission-list li {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    color:
        #28563e;

    font-size: 0.95rem;

    line-height: 1.75;
}


.list-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    margin-top: 9px;

    border-radius: 50%;

    background:
        var(--primary-green);

    box-shadow:
        0 0 0 5px
        rgba(60, 179, 113, 0.10);
}


/* ============================================================
   STRATEGY PANELS
   ============================================================ */

.strategy-panel {
    position: relative;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 20px;

    padding:
        32px;

    overflow: hidden;

    border-radius: 18px;

    box-shadow:
        0 15px 40px
        rgba(31, 83, 51, 0.08);
}


.healthcare-panel {
    border-left:
        7px solid
        var(--primary-green);

    background:
        linear-gradient(
            135deg,
            #e3f4e9,
            #f2faf5
        );
}


.education-panel {
    border-left:
        7px solid
        var(--dark-blue);

    background:
        linear-gradient(
            135deg,
            #e5f4fb,
            #f3fafc
        );
}


/* ============================================================
   STRATEGY ICON
   ============================================================ */

.strategy-panel-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 12px;

    color: #ffffff;

    background:
        var(--primary-green);

    font-size: 1.15rem;
}


.education-panel
.strategy-panel-icon {

    background:
        var(--dark-blue);
}


/* ============================================================
   STRATEGY CONTENT
   ============================================================ */

.strategy-title {
    margin:
        0 0 18px;

    color:
        #245c3d;

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.7;
}


.education-panel
.strategy-title {

    color:
        #2f6785;
}


.strategy-list {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.strategy-list li {
    position: relative;

    padding-left: 21px;

    color:
        #2a573f;

    font-size: 0.88rem;

    line-height: 1.75;
}


.education-panel
.strategy-list li {

    color:
        #345b70;
}


.strategy-list li::before {
    content: '';

    position: absolute;

    left: 0;
    top: 10px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--primary-green);
}


.education-panel
.strategy-list li::before {

    background:
        var(--dark-blue);
}


/* ============================================================
   PARTNERS
   ============================================================ */

.partners-block {
    padding:
        32px;

    border:
        1px solid
        rgba(93, 173, 226, 0.14);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #edf8fc,
            #f7fcfe
        );

    box-shadow:
        0 12px 35px
        rgba(49, 107, 136, 0.06);
}


.partners-message {
    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        20px;

    border:
        1px dashed
        rgba(60, 179, 113, 0.45);

    border-radius: 12px;

    background:
        rgba(226, 246, 235, 0.70);

    color:
        #2c6949;

    font-size: 0.95rem;

    font-weight: 600;

    font-style: italic;
}


.partners-message i {
    color:
        var(--primary-green);

    font-size: 1.35rem;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.mission-divider {
    width: 100%;
    height: 2px;

    margin-top: 70px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary-green),
            var(--primary-blue),
            transparent
        );
}


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

@media (max-width: 992px) {

    .mission-hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .mission-hero-image {
        min-height: 380px;
    }


    .mission-hero-image img {
        min-height: 380px;
    }


    .mission-main-grid {
        grid-template-columns: 1fr;
    }


    .mission-side-column {
        display: grid;

        grid-template-columns:
            0.8fr 1.2fr;

        gap: 30px;
    }

}


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

@media (max-width: 768px) {

    .mission-hero-section {
        padding:
            45px 0;
    }


    .mission-hero-grid {
        gap: 30px;
    }


    .mission-hero-image {
        min-height: 280px;

        border-radius: 14px;
    }


    .mission-hero-image img {
        min-height: 280px;
    }


    .mission-page-title {
        margin-bottom: 22px;

        font-size: 2.2rem;
    }


    .founder-quote {
        font-size: 1.05rem;

        line-height: 1.75;
    }


    .mission-content-section {
        padding:
            60px 0 75px;
    }


    .mission-main-grid {
        gap: 30px;
    }


    .mission-main-column,
    .mission-side-column {
        gap: 24px;
    }


    .mission-side-column {
        display: flex;

        flex-direction: column;
    }


    .content-block,
    .partners-block {
        padding:
            25px 22px;
    }


    .strategy-panel {
        grid-template-columns: 1fr;

        padding:
            26px 22px;
    }


    .strategy-panel-icon {
        width: 46px;
        height: 46px;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .mission-hero-section {
        padding:
            35px 0 40px;
    }


    .mission-hero-image,
    .mission-hero-image img {
        min-height: 230px;
    }


    .mission-page-title {
        font-size: 1.85rem;
    }


    .founder-quote {
        font-size: 0.98rem;
    }


    .photo-credit {
        align-items: flex-start;
    }


    .photo-credit span {
        font-size: 0.7rem;
    }


    .content-heading {
        font-size: 1.6rem;
    }


    .sub-heading {
        font-size: 1.35rem;
    }


    .large-copy {
        font-size: 0.95rem;
    }


    .mission-list li {
        font-size: 0.9rem;
    }


    .strategy-title {
        font-size: 0.95rem;
    }


    .strategy-list li {
        font-size: 0.84rem;
    }

}