.about-hero-section,
.about-story-section,
.about-purpose-section,
.about-mission-vision-section,
.about-support-section,
.about-values-section,
.about-cta-section {
    padding: 50px 0;
}

.about-hero-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5faf8 100%);
}

.about-small-title,
.about-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #167d6b;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.about-hero-content h1,
.about-story-content h2,
.purpose-heading h2,
.support-heading h2,
.values-heading h2,
.about-cta-content h2 {
    margin-bottom: 18px;
    color: #183b38;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
}
.about-hero-content p,
.about-story-content p,
.purpose-heading p,
.mission-vision-card p,
.support-card p,
.value-card p,
.about-cta-content p {
    color: #60736f;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
}

.about-hero-actions,
.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.about-btn-primary,
.about-btn-secondary {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
}

.about-btn-primary {
    background: #167d6b;
    border: 2px solid #167d6b;
    color: #ffffff;
}

    .about-btn-primary:hover {
        background: #106b5c;
        border-color: #106b5c;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(22, 125, 107, .18);
    }

.about-btn-secondary {
    background: #ffffff;
    border: 2px solid #167d6b;
    color: #167d6b;
}

    .about-btn-secondary:hover {
        background: #eef8f5;
        color: #106b5c;
        transform: translateY(-2px);
    }

.about-hero-image-wrap,
.about-story-image-wrap {
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(25, 77, 69, .10);
}

.about-hero-image,
.about-story-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-story-image {
    min-height: 400px;
}

.about-story-section .row {
    align-items: stretch !important;
}

.about-story-image-wrap {
    height: 100%;
}
.purpose-heading,
.support-heading,
.values-heading {
    max-width: 800px;
    margin: 0 auto 45px;
    text-align: center;
}

.purpose-card,
.support-card,
.value-card,
.mission-vision-card {
    height: 100%;
    padding: 30px 24px;
    border: 1px solid #e1ece9;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(25, 77, 69, .06);
    transition: all .3s ease;
}

    .purpose-card:hover,
    .support-card:hover,
    .value-card:hover,
    .mission-vision-card:hover {
        transform: translateY(-7px);
        border-color: rgba(22, 125, 107, .28);
        box-shadow: 0 20px 45px rgba(25, 77, 69, .12);
    }

.purpose-icon,
.support-card-icon,
.value-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 18px;
    background: #eaf6f3;
    color: #167d6b;
    font-size: 27px;
    transition: all .3s ease;
}

.purpose-card:hover .purpose-icon,
.support-card:hover .support-card-icon,
.value-card:hover .value-icon {
    background: #167d6b;
    color: #ffffff;
    transform: scale(1.05);
}

.purpose-card h3,
.support-card h3,
.value-card h3,
.mission-vision-card h3 {
    margin-bottom: 13px;
    color: #183b38;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
}

.purpose-card p,
.support-card p,
.value-card p {
    margin: 0;
    color: #637773;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
}

.about-mission-vision-section {
    background: #f5faf8;
}

.mv-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 50px;
    background: #eaf6f3;
    color: #167d6b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.about-values-section {
    background: #ffffff;
}

.about-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 34px 30px;
    border: 1px solid #dceae7;
    border-radius: 24px;
    background: linear-gradient(135deg, #edf8f5 0%, #f8fcfb 100%);
}

.about-cta-content {
    max-width: 760px;
}

@media (max-width: 991.98px) {
    .about-hero-section,
    .about-story-section,
    .about-purpose-section,
    .about-mission-vision-section,
    .about-support-section,
    .about-values-section,
    .about-cta-section {
        padding: 70px 0;
    }

    .about-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .about-hero-section,
    .about-story-section,
    .about-purpose-section,
    .about-mission-vision-section,
    .about-support-section,
    .about-values-section,
    .about-cta-section {
        padding: 60px 0;
    }

    .about-hero-content h1,
    .about-story-content h2,
    .purpose-heading h2,
    .support-heading h2,
    .values-heading h2,
    .about-cta-content h2 {
        font-size: 34px;
    }

    .purpose-heading,
    .support-heading,
    .values-heading {
        margin-bottom: 35px;
        text-align: left;
    }

    .about-hero-image {
        min-height: 340px;
    }

    .about-story-image {
        min-height: 320px;
    }
}

@media (max-width: 575.98px) {
    .about-hero-section,
    .about-story-section,
    .about-purpose-section,
    .about-mission-vision-section,
    .about-support-section,
    .about-values-section,
    .about-cta-section {
        padding: 50px 0;
    }

    .about-hero-content h1,
    .about-story-content h2,
    .purpose-heading h2,
    .support-heading h2,
    .values-heading h2,
    .about-cta-content h2 {
        font-size: 30px;
    }

    .about-hero-content p,
    .about-story-content p,
    .purpose-heading p,
    .mission-vision-card p,
    .support-card p,
    .value-card p,
    .about-cta-content p {
        font-size: 15px;
    }

    .about-btn-primary,
    .about-btn-secondary {
        width: 100%;
    }

    .purpose-card,
    .support-card,
    .value-card,
    .mission-vision-card {
        padding: 25px 21px;
    }

    .about-cta-box {
        padding: 24px 20px;
    }
}

/* About page visual refresh */
.about-hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 4vw, 4rem) 0 !important;
    background:
        radial-gradient(circle at 8% 18%, rgba(111, 214, 172, 0.33), transparent 25rem),
        radial-gradient(circle at 91% 84%, rgba(244, 184, 101, 0.19), transparent 23rem),
        linear-gradient(135deg, #9bcfbc 0%, #b9dfcf 46%, #9bcdbb 100%);
}

.about-hero-section::before,
.about-hero-section::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.about-hero-section::before {
    width: 18rem;
    height: 18rem;
    top: -8rem;
    right: 42%;
    border: 1.25rem solid rgba(9, 88, 70, 0.16);
}

.about-hero-section::after {
    width: 9rem;
    height: 9rem;
    right: 4%;
    bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.20);
}

.about-hero-content {
    position: relative;
    z-index: 1;
}

.about-small-title {
    margin-bottom: 1.15rem;
    padding: 0.48rem 0.85rem;
    border: 1px solid rgba(22, 125, 107, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 0.45rem 1rem rgba(22, 125, 107, 0.10);
}

.about-hero-content h1 {
    max-width: 44rem;
    font-size: clamp(2.5rem, 4.1vw, 4.65rem);
    letter-spacing: -0.055em;
    line-height: 1.04;
}

.about-hero-content p {
    max-width: 40rem;
    font-size: 1.08rem;
    color: #254f46;
}

.about-hero-image-wrap {
    position: relative;
    z-index: 1;
    border: 0.7rem solid rgba(255, 255, 255, 0.72);
    border-radius: 2rem;
    box-shadow: 1.2rem 1.2rem 0 rgba(22, 125, 107, 0.15), 0 1.6rem 3.2rem rgba(18, 79, 67, 0.19);
}

.about-hero-image {
    min-height: 18rem;
    border-radius: 1.35rem;
}

.about-story-section {
    padding: clamp(5rem, 8vw, 8rem) 0 !important;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 18%, rgba(238, 178, 94, 0.17), transparent 19rem),
        linear-gradient(135deg, #ffffff 0%, #f1faf6 100%);
}

.about-story-section::before {
    content: "";
    position: absolute;
    width: 20rem;
    height: 20rem;
    left: -13rem;
    bottom: -13rem;
    border: 2.2rem solid rgba(22, 125, 107, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.about-story-image-wrap {
    position: relative;
    z-index: 1;
    border: 0.55rem solid #eef8f4;
    border-radius: 1.7rem;
    box-shadow: -0.9rem 1rem 0 rgba(243, 185, 111, 0.18), 0 1.3rem 2.7rem rgba(18, 79, 67, 0.13);
}

.about-story-content {
    position: relative;
    z-index: 1;
    padding: clamp(0rem, 1.5vw, 1.2rem);
}

.about-story-content h2 {
    max-width: 36rem;
    color: #10493f;
    font-size: clamp(2rem, 3vw, 3.35rem);
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.about-story-content p {
    color: #4b6761;
}

.about-story-content p + p {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(22, 125, 107, 0.12);
}

.about-purpose-section,
.about-support-section {
    padding: clamp(5rem, 8vw, 7rem) 0 !important;
    background: linear-gradient(180deg, #f1faf6 0%, #e7f5ee 100%);
}

.about-mission-vision-section {
    padding: clamp(5rem, 7vw, 6.5rem) 0 !important;
    background: linear-gradient(135deg, #0c5f53, #137766 58%, #1e9379);
}

.about-mission-vision-section .mission-vision-card {
    min-height: 100%;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.97) !important;
}

.about-values-section {
    padding: clamp(5rem, 8vw, 7rem) 0 !important;
    background: linear-gradient(135deg, #fffaf4, #fff 48%, #f0faf6);
}

.about-cta-section {
    padding: clamp(4rem, 7vw, 6rem) 0 !important;
    background: #ffffff;
}

.purpose-card,
.support-card,
.value-card {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    box-shadow: 0 1rem 2.2rem rgba(20, 83, 70, 0.10) !important;
}

.purpose-card::after,
.support-card::after,
.value-card::after {
    content: "";
    position: absolute;
    width: 7rem;
    height: 7rem;
    right: -3.4rem;
    bottom: -3.5rem;
    border-radius: 50%;
    background: rgba(22, 125, 107, 0.08);
}

.about-purpose-section .row > :nth-child(1) .purpose-icon,
.about-support-section .row > :nth-child(1) .support-card-icon,
.about-values-section .row > :nth-child(1) .value-icon { background: #d9f2e7; color: #08755f; }
.about-purpose-section .row > :nth-child(2) .purpose-icon,
.about-support-section .row > :nth-child(2) .support-card-icon,
.about-values-section .row > :nth-child(2) .value-icon { background: #e1ecff; color: #316ab6; }
.about-purpose-section .row > :nth-child(3) .purpose-icon,
.about-support-section .row > :nth-child(3) .support-card-icon,
.about-values-section .row > :nth-child(3) .value-icon { background: #fff0db; color: #c67212; }
.about-purpose-section .row > :nth-child(4) .purpose-icon,
.about-support-section .row > :nth-child(4) .support-card-icon,
.about-values-section .row > :nth-child(4) .value-icon { background: #f2e8ff; color: #7b54af; }

.mission-vision-card:first-child { border-top: 0.32rem solid #e8a243 !important; }
.mission-vision-card:last-child { border-top: 0.32rem solid #179275 !important; }

.about-cta-box {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    padding: clamp(2rem, 4vw, 4rem) !important;
    background: linear-gradient(135deg, #0d685a, #16836e 55%, #36a887) !important;
    box-shadow: 0 1.4rem 3rem rgba(18, 94, 78, 0.24) !important;
}

.about-cta-box::after {
    content: "";
    position: absolute;
    width: 21rem;
    height: 21rem;
    right: -9rem;
    top: -12rem;
    border: 2.4rem solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.about-cta-content,
.about-cta-actions { position: relative; z-index: 1; }
.about-cta-content h2,
.about-cta-content p { color: #ffffff; }
.about-cta-content p { color: rgba(255, 255, 255, 0.84); }
.about-cta-box .about-section-label { color: #d8fff1; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.20); }
.about-cta-box .about-btn-primary { background: #ffffff !important; color: #08715e !important; box-shadow: none !important; }
.about-cta-box .about-btn-primary:hover { background: #e5fff4 !important; color: #075e50 !important; }
.about-cta-box .about-btn-secondary { background: transparent !important; border-color: rgba(255, 255, 255, 0.72) !important; color: #ffffff !important; }
.about-cta-box .about-btn-secondary:hover { background: rgba(255, 255, 255, 0.16) !important; }

@media (max-width: 991.98px) {
    .about-hero-section {
        padding: 2.75rem 0 3.25rem !important;
    }

    .about-hero-content {
        max-width: 42rem;
        margin: 0 auto;
    }

    .about-hero-image-wrap {
        max-width: 44rem;
        margin: 0 auto;
    }

    .about-hero-image { min-height: 17rem; }

    .about-story-content {
        max-width: 44rem;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .about-hero-section {
        padding: 2.25rem 0 2.5rem !important;
        background:
            radial-gradient(circle at 14% 7%, rgba(111, 214, 172, 0.35), transparent 17rem),
            linear-gradient(155deg, #92c9b5 0%, #b7dfcf 100%);
    }

    .about-hero-section::before {
        width: 12rem;
        height: 12rem;
        top: -5rem;
        right: -4rem;
    }

    .about-hero-content h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
        letter-spacing: -0.045em;
    }

    .about-hero-content p {
        font-size: 1rem;
    }

    .about-hero-actions {
        gap: 0.75rem;
    }

    .about-hero-actions .about-btn-primary,
    .about-hero-actions .about-btn-secondary {
        flex: 1 1 11rem;
    }

    .about-hero-image-wrap {
        border-width: 0.45rem;
        border-radius: 1.35rem;
        box-shadow: 0.7rem 0.75rem 0 rgba(22, 125, 107, 0.15), 0 1rem 2rem rgba(18, 79, 67, 0.18);
    }

    .about-hero-image {
        min-height: 13rem;
        border-radius: 0.9rem;
        object-fit: cover;
        object-position: center;
    }

    .about-story-section {
        padding: 3.75rem 0 !important;
    }

    .about-story-content {
        padding: 0;
    }

    .about-story-content h2 {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }
}

@media (max-width: 575.98px) {
    .about-hero-actions .about-btn-primary,
    .about-hero-actions .about-btn-secondary {
        width: auto;
        min-height: 38px;
        flex: 0 0 auto;
        padding: 7px 14px;
        font-size: 13px;
    }
}