.sdh-about {
    --orange: #E8681A;
    --orange-2: #E8681A;
    --orange-deep: #E8681A;
    --peach: #FDEFE2;
    --peach-2: #FCE2C8;
    --ink: #23262B;
    --ink-2: #2B2E34;
    --body: #5A6472;
    --line: #F1E2CF;
    --card-line: #F3E7D8;
}

    .sdh-about, .sdh-about *, .sdh-about *::before, .sdh-about *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

.sdh-about {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color: var(--body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.6;
}

    .sdh-about img {
        display: block;
        max-width: 100%
    }

    .sdh-about a {
        text-decoration: none;
        color: inherit
    }

    .sdh-about .wrap {
        max-width: 1230px;
        margin: 0 auto;
        padding: 0 24px
    }

    .sdh-about h1,
    .sdh-about h2,
    .sdh-about h3 {
        color: var(--ink);
        line-height: 1.18;
        letter-spacing: -.2px
    }

    .sdh-about .script {
        font-family: "Segoe Script","Brush Script MT","Lucida Handwriting",cursive !important;
        font-style: italic;
        font-weight: 400
    }

    .sdh-about /* ============ generic bits ============ */
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--orange);
        font-weight: 400;
        font-size: 12.5px;
        letter-spacing: 2.2px;
        text-transform: uppercase
    }

        .sdh-about .eyebrow .ln {
            width: 34px;
            height: 2px;
            background: var(--orange);
            border-radius: 2px
        }

    .sdh-about .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        font-weight: 400;
        font-size: 14.5px;
        padding: 13px 26px;
        cursor: pointer;
        border: 0;
        transition: .25s
    }

        .sdh-about .btn svg {
            transition: .25s
        }

        .sdh-about .btn:hover svg {
            transform: translateX(4px)
        }

    .sdh-about .btn-orange {
        background: linear-gradient(135deg,var(--orange-2),var(--orange-deep));
        color: #fff;
        box-shadow: 0 12px 24px rgba(232, 104, 26,.32)
    }

        .sdh-about .btn-orange:hover {
            box-shadow: 0 16px 30px rgba(232, 104, 26,.42);
            transform: translateY(-2px)
        }

    .sdh-about .btn-ghost {
        background: #fff;
        color: var(--ink);
        border: 1.6px solid #EFCEA6;
        padding: 11.5px 24px
    }

        .sdh-about .btn-ghost:hover {
            border-color: var(--orange);
            color: var(--orange)
        }

    .sdh-about .btn-dark-outline {
        background: transparent;
        color: #fff;
        border: 1.6px solid rgba(255,255,255,.45);
        padding: 11.5px 26px
    }

        .sdh-about .btn-dark-outline:hover {
            border-color: #fff;
            background: rgba(255,255,255,.08)
        }

    .sdh-about /* ============ HERO ============ */
    .hero {
        position: relative;
        overflow: hidden;
        background: radial-gradient(120% 130% at 100% 0%, #FBD9BC 0%, rgba(251,217,188,0) 52%), linear-gradient(112deg,#FFF9F4 0%,#FDEFE1 46%,#FBE0C6 100%);
    }

    .sdh-about .hero-arc {
        position: absolute;
        left: -150px;
        bottom: -290px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        border: 50px solid #F7DCBE;
        opacity: .55
    }

    .sdh-about .hero-media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 47%;
        z-index: 1;
        overflow: hidden
    }

        .sdh-about .hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 65% 40%
        }

        .sdh-about .hero-media::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,#FBE3C9 0%,rgba(251,227,201,0) 26%);
            z-index: 1
        }

        .sdh-about .hero-media::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 110px;
            background: linear-gradient(0deg,rgba(252,233,211,.65),rgba(252,233,211,0));
            z-index: 1
        }

    .sdh-about .hero-inner {
        position: relative;
        z-index: 2;
        padding: 40px 0 30px
    }

    .sdh-about .crumbs {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        font-weight: 400
    }

        .sdh-about .crumbs a {
            color: var(--orange)
        }

        .sdh-about .crumbs svg {
            color: #C9A476
        }

        .sdh-about .crumbs .cur {
            color: var(--ink)
        }

    .sdh-about .hero h1 {
        font-size: 58px;
        font-weight: 600;
        margin: 10px 0 8px;
        letter-spacing: -1.2px
    }

        .sdh-about .hero h1 .accent {
            color: var(--orange)
        }

    .sdh-about .hero .tag {
        font-weight: 400;
        color: #3A414B;
        font-size: 16.5px;
        margin-bottom: 14px
    }

    .sdh-about .hero .lede {
        max-width: 430px;
        font-size: 14.5px;
        line-height: 1.75
    }

    .sdh-about .hero-cta {
        display: flex;
        gap: 14px;
        margin: 24px 0 6px;
        flex-wrap: wrap
    }

    .sdh-about .hero-note {
        position: absolute;
        z-index: 3;
        color: #3E4650;
        font-size: 19px;
        line-height: 1.5;
        text-align: center;
        pointer-events: none;
        text-shadow: 0 0 6px rgba(255,248,238,.95),0 0 14px rgba(255,248,238,.95),0 0 26px rgba(255,248,238,.9)
    }

        .sdh-about .hero-note .swash {
            display: block;
            width: 62px;
            height: 12px;
            margin: 5px auto 0;
            border-bottom: 3px solid var(--orange);
            border-radius: 0 0 60% 60%/0 0 100% 100%
        }

    .sdh-about .note-1 {
        top: 46px;
        right: 53%
    }

    .sdh-about .note-2 {
        top: 34px;
        right: 48px
    }

    .sdh-about /* stats bar */
    .stats {
        margin: 30px 0 36px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(196,120,45,.10);
        display: grid;
        grid-template-columns: repeat(4,1fr);
        position: relative;
        z-index: 2
    }

    .sdh-about .stat {
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px
    }

        .sdh-about .stat + .stat {
            border-left: 1px solid #F6EADB
        }

        .sdh-about .stat .ic {
            color: var(--orange);
            margin-bottom: 3px
        }

        .sdh-about .stat b {
            font-size: 19px;
            color: var(--ink);
            font-weight: 400
        }

        .sdh-about .stat span {
            font-size: 12.5px;
            color: #8A93A0;
            font-weight: 400
        }

    .sdh-about /* ============ OUR STORY ============ */
    .story {
        background: linear-gradient(180deg,#FFFDFB 0%,#FFF8F0 100%);
        padding: 70px 0 72px;
        border-top: 1px solid #FBEFE1
    }

    .sdh-about .story-grid {
        display: grid;
        grid-template-columns: 1.02fr .98fr .78fr;
        gap: 46px;
        align-items: center
    }

    .sdh-about .story h2 {
        font-size: 34px;
        font-weight: 600;
        margin: 12px 0 16px
    }

    .sdh-about .story p {
        font-size: 14.5px;
        line-height: 1.8;
        margin-bottom: 26px
    }

    .sdh-about .story-photo {
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 26px 50px rgba(160,90,30,.18)
    }

        .sdh-about .story-photo img {
            width: 100%;
            height: 330px;
            object-fit: cover
        }

    .sdh-about .pillars {
        display: flex;
        flex-direction: column;
        gap: 26px
    }

    .sdh-about .pillar {
        display: flex;
        gap: 16px;
        align-items: flex-start
    }

        .sdh-about .pillar .pic {
            flex: 0 0 52px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--peach);
            display: grid;
            place-items: center;
            color: var(--orange)
        }

        .sdh-about .pillar h3 {
            font-size: 16.5px;
            font-weight: 600;
            margin-bottom: 4px
        }

        .sdh-about .pillar p {
            font-size: 13.5px;
            line-height: 1.65
        }

    .sdh-about /* ============ MISSION / VISION / VALUES ============ */
    .mvv {
        border-top: 1px solid var(--card-line);
        background: #fff;
        padding: 46px 0 50px
    }

    .sdh-about .mvv-grid {
        display: grid;
        grid-template-columns: 1.15fr 1.15fr 1fr;
        gap: 38px
    }

    .sdh-about .mvv {
        position: relative
    }

    .sdh-about .mvv-cell {
        display: flex;
        gap: 16px;
        align-items: flex-start
    }

        .sdh-about .mvv-cell + .mvv-cell {
            border-left: 1px solid #EFE3D2;
            padding-left: 38px
        }

        .sdh-about .mvv-cell .mic {
            flex: 0 0 46px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--peach);
            display: grid;
            place-items: center;
            color: var(--orange)
        }

        .sdh-about .mvv-cell h4 {
            color: var(--orange);
            font-size: 13px;
            letter-spacing: 2px;
            font-weight: 600;
            margin-bottom: 8px
        }

        .sdh-about .mvv-cell p {
            font-size: 13.5px;
            line-height: 1.7
        }

    .sdh-about .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 2px
    }

    .sdh-about .chip {
        border: 1px solid #F3D9BB;
        background: #FFF9F2;
        color: #7A5A35;
        border-radius: 999px;
        padding: 4px 13px;
        font-size: 12.5px;
        font-weight: 400
    }

    .sdh-about /* ============ DARK IMPACT BAND ============ */
    .impact {
        background: #24272C;
        position: relative;
        overflow: hidden;
        color: #fff
    }

        .sdh-about .impact::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,.22) 100%)
        }

    .sdh-about .impact-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr 2.6fr .95fr;
        gap: 26px;
        align-items: center;
        padding: 38px 0
    }

    .sdh-about .impact h2 {
        color: #fff;
        font-size: 29px;
        font-weight: 600;
        line-height: 1.22
    }

    .sdh-about .impact-stats {
        display: grid;
        grid-template-columns: repeat(5,1fr)
    }

    .sdh-about .imp {
        padding: 6px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center
    }

        .sdh-about .imp + .imp {
            border-left: 1px solid rgba(255,255,255,.12)
        }

        .sdh-about .imp .ic {
            color: var(--orange-2)
        }

        .sdh-about .imp b {
            font-size: 18px;
            font-weight: 400;
            color: #fff
        }

        .sdh-about .imp span {
            font-size: 12px;
            color: #A6ABB3;
            font-weight: 400
        }

    .sdh-about .impact-script {
        position: relative;
        text-align: right;
        color: #F4EFE9;
        font-size: 20px;
        line-height: 1.5;
        padding-right: 6px
    }

        .sdh-about .impact-script .swash {
            display: block;
            width: 66px;
            height: 12px;
            margin-left: auto;
            border-bottom: 3px solid var(--orange);
            border-radius: 0 0 60% 60%/0 0 100% 100%
        }

    .sdh-about /* ============ FACILITIES ============ */
    .facilities {
        background: linear-gradient(115deg,#FDEFE2 0%,#FEF6EC 55%,#FFFDFa 100%);
        padding: 70px 0
    }

    .sdh-about .fac-grid {
        display: grid;
        grid-template-columns: 1.08fr 1fr 1fr 1fr;
        gap: 22px;
        align-items: center
    }

    .sdh-about .fac-copy h2 {
        font-size: 30px;
        font-weight: 600;
        margin: 12px 0 14px
    }

    .sdh-about .fac-copy p {
        font-size: 13.8px;
        line-height: 1.75;
        margin-bottom: 24px
    }

    .sdh-about .fac-card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 18px 36px rgba(150,90,35,.16)
    }

        .sdh-about .fac-card img {
            width: 100%;
            height: 212px;
            object-fit: cover;
            transition: .5s
        }

        .sdh-about .fac-card:hover img {
            transform: scale(1.05)
        }

        .sdh-about .fac-card figcaption {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            font-weight: 400;
            font-size: 14.5px;
            padding: 40px 16px 13px;
            background: linear-gradient(180deg,rgba(22,24,28,0),rgba(22,24,28,.9))
        }

    .sdh-about /* ============ TEAM / TESTIMONIALS ============ */
    .team {
        padding: 74px 0
    }

    .sdh-about .team-grid {
        display: grid;
        grid-template-columns: .92fr 1.18fr .92fr;
        gap: 30px;
        align-items: stretch
    }

    .sdh-about .team-photo {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 48px rgba(140,95,45,.18)
    }

        .sdh-about .team-photo img {
            width: 100%;
            height: 100%;
            min-height: 320px;
            object-fit: cover
        }

    .sdh-about .team-copy h2 {
        font-size: 29px;
        font-weight: 600;
        margin: 12px 0 14px
    }

    .sdh-about .team-copy p {
        font-size: 14.5px;
        line-height: 1.8;
        margin-bottom: 26px
    }

    .sdh-about .speaks {
        position: relative;
        background: #FBF6EF;
        border: 1px solid #F2E5D3;
        border-radius: 16px;
        padding: 26px 46px 30px;
        display: flex;
        flex-direction: column
    }

        .sdh-about .speaks .eyebrow {
            margin-bottom: 14px
        }

        .sdh-about .speaks .qmark {
            color: var(--orange);
            margin-bottom: 8px
        }

    .sdh-about .slide {
        display: none;
        flex: 1
    }

        .sdh-about .slide.on {
            display: block
        }

        .sdh-about .slide p {
            font-size: 13.8px;
            line-height: 1.75;
            color: #55606D
        }

        .sdh-about .slide .who {
            margin-top: 16px;
            font-size: 13.5px;
            color: #75808D
        }

            .sdh-about .slide .who b {
                display: block;
                color: var(--ink);
                font-size: 14px
            }

    .sdh-about .s-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #E7DAC7;
        background: #fff;
        color: #9AA3AF;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: .2s
    }

        .sdh-about .s-nav:hover {
            color: var(--orange);
            border-color: var(--orange)
        }

        .sdh-about .s-nav.prev {
            left: -15px
        }

        .sdh-about .s-nav.next {
            right: -15px
        }

    .sdh-about .s-dots {
        display: flex;
        gap: 7px;
        justify-content: center;
        margin-top: 18px
    }

        .sdh-about .s-dots button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 0;
            background: #E3D5C2;
            cursor: pointer;
            padding: 0;
            transition: .2s
        }

            .sdh-about .s-dots button.on {
                background: var(--orange);
                transform: scale(1.2)
            }

    .sdh-about /* ============ CTA ============ */
    .cta {
        position: relative;
        background: #232629;
        color: #fff;
        overflow: hidden
    }

    .sdh-about .cta-img {
        position: absolute;
        inset: 0 0 0 auto;
        width: 44%;
        object-fit: cover;
        object-position: center;
        -webkit-mask-image: linear-gradient(90deg,transparent,#000 34%);
        mask-image: linear-gradient(90deg,transparent,#000 34%);
        opacity: .85
    }

    .sdh-about .cta-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,#232629 34%,rgba(35,38,41,.55) 62%,rgba(35,38,41,.12) 100%)
    }

    .sdh-about .cta-inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.6fr .8fr;
        gap: 30px;
        padding: 66px 0 70px;
        align-items: center
    }

    .sdh-about .cta h2 {
        color: #fff;
        font-size: 38px;
        font-weight: 600;
        margin: 12px 0 10px
    }

    .sdh-about .cta .eyebrow {
        color: var(--orange-2)
    }

    .sdh-about .cta p {
        color: #C6CBD2;
        font-size: 15px;
        margin-bottom: 28px
    }

    .sdh-about .cta-btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap
    }

    .sdh-about .cta-points {
        display: flex;
        flex-direction: column;
        gap: 22px
    }

    .sdh-about .cta-point {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 16px;
        font-weight: 400;
        color: #F2F4F6
    }

        .sdh-about .cta-point .ic {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,.09);
            border: 1px solid rgba(255,255,255,.14);
            display: grid;
            place-items: center;
            color: #F5B278
        }

    .sdh-about .cta-script {
        position: absolute;
        z-index: 2;
        right: 44px;
        bottom: 26px;
        color: #EDEAE4;
        font-size: 19px;
        line-height: 1.5;
        text-align: center;
        pointer-events: none
    }

        .sdh-about .cta-script .swash {
            display: block;
            width: 60px;
            height: 11px;
            margin: 4px auto 0;
            border-bottom: 3px solid var(--orange);
            border-radius: 0 0 60% 60%/0 0 100% 100%
        }
/* ============ RESPONSIVE ============ */
@media (max-width:1080px) {
    .sdh-about .hero-media {
        width: 44%
    }

    .sdh-about .hero-note {
        display: none
    }

    .sdh-about .hero h1 {
        font-size: 48px
    }

    .sdh-about .story-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px
    }

    .sdh-about .pillars {
        grid-column: 1/-1;
        flex-direction: row;
        gap: 22px
    }

    .sdh-about .mvv-grid {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .sdh-about .mvv-cell + .mvv-cell {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid #EFE3D2;
        padding-top: 26px
    }

    .sdh-about .impact-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .sdh-about .impact-script {
        text-align: left
    }

        .sdh-about .impact-script .swash {
            margin-left: 0
        }

    .sdh-about .fac-grid {
        grid-template-columns: 1fr 1fr
    }

    .sdh-about .fac-copy {
        grid-column: 1/-1
    }

    .sdh-about .team-grid {
        grid-template-columns: 1fr 1fr
    }

    .sdh-about .speaks {
        grid-column: 1/-1
    }

    .sdh-about .cta-inner {
        grid-template-columns: 1fr
    }

    .sdh-about .cta-img, .cta-shade {
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none
    }

    .sdh-about .cta-shade {
        background: rgba(30,33,36,.82)
    }

    .sdh-about .cta-script {
        display: none
    }
}

@media (max-width:760px) {
    .sdh-about .hero-media {
        position: relative;
        inset: auto;
        width: 100%;
        height: 260px;
        margin-top: 8px
    }

        .sdh-about .hero-media::before {
            background: linear-gradient(180deg,#FBE3C9 0%,rgba(251,227,201,0) 22%)
        }

    .sdh-about .hero-note {
        display: none
    }

    .sdh-about .hero-note {
        display: none
    }

    .sdh-about .hero h1 {
        font-size: 38px
    }

    .sdh-about .stats {
        grid-template-columns: 1fr 1fr
    }

    .sdh-about .stat:nth-child(3) {
        border-left: 0
    }

    .sdh-about .stat:nth-child(n+3) {
        border-top: 1px solid #F6EADB
    }

    .sdh-about .story-grid,
    .sdh-about .pillars {
        grid-template-columns: 1fr
    }

    .sdh-about .pillars {
        flex-direction: column
    }

    .sdh-about .fac-grid,
    .sdh-about .team-grid {
        grid-template-columns: 1fr
    }

    .sdh-about .impact-stats {
        grid-template-columns: repeat(2,1fr);
        gap: 16px 0
    }

    .sdh-about .imp:nth-child(3) {
        border-left: 0
    }

    .sdh-about .hero h1 br {
        display: none
    }
}
/* ================================================================
     FAQ SECTION — copy everything between the MARKERS below
     (this <style> block, the <section> and the <script>) into your
     page. It is fully self-contained and matches your orange theme.
     ================================================================ */

.faq-section {
    background: #ffffff;
    padding: 96px 24px;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

.faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #E8681A;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

    .faq-eyebrow::before {
        content: '';
        width: 32px;
        height: 2px;
        background: #E8681A;
        flex-shrink: 0;
    }

.faq-heading {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.2;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 18px;
}

.faq-intro {
    color: #64748b;
    line-height: 1.75;
    font-size: 16px;
    margin: 0 0 28px;
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #E8681A;
    color: #ffffff;
    font-weight: 400;
    font-size: 15px;
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(232, 104, 26, 0.28);
    transition: background 0.25s, transform 0.25s;
}

    .faq-btn:hover {
        background: #C2540E;
        transform: translateY(-2px);
    }

    .faq-btn svg {
        transition: transform 0.25s;
    }

    .faq-btn:hover svg {
        transform: translateX(4px);
    }

.faq-side-note {
    margin-top: 36px;
    background: #fff7ed;
    border: 1px solid #ffedd5;
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

    .faq-side-note .icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #ffedd5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #E8681A;
    }

    .faq-side-note strong {
        display: block;
        color: #0f172a;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .faq-side-note span {
        color: #64748b;
        font-size: 14px;
        line-height: 1.6;
    }

/* Accordion items */
.faq-item {
    background: #fff8f0;
    border: 1px solid #ffe8d1;
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .faq-item:hover {
        border-color: #fdba74;
    }

    .faq-item.open {
        background: #ffffff;
        border-color: #fdba74;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 400;
    color: #0f172a;
    line-height: 1.45;
}

    .faq-question:focus-visible {
        outline: 2px solid #E8681A;
        outline-offset: 2px;
    }

.faq-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #E8681A;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s, background 0.3s;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: #C2540E;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

    .faq-answer p {
        margin: 0;
        padding: 0 24px 22px;
        color: #64748b;
        font-size: 15px;
        line-height: 1.75;
    }

@media (max-width: 992px) {
    .faq-section {
        padding: 72px 20px;
    }

    .faq-container {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@media (max-width: 520px) {
    .faq-question {
        font-size: 15.5px;
        padding: 18px 20px;
    }

    .faq-answer p {
        padding: 0 20px 20px;
    }
}

/* ===== END FAQ SECTION STYLES ===== */
/* =========================================
   MISSION & VISION SECTION
========================================= */

.mv-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 55px 20px 65px;
    background: #ffffff;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* -----------------------------------------
   CONTAINER
----------------------------------------- */

.mv-container {
    position: relative;
    z-index: 2;
    width: min(1120px, 100%);
    margin: 0 auto;
}


/* -----------------------------------------
   HEADING
----------------------------------------- */

.mv-heading {
    text-align: center;
    margin-bottom: 38px;
}

.mv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #C2540E;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mv-eyebrow-line {
    width: 28px;
    height: 2px;
    background: #C2540E;
    border-radius: 20px;
}

.mv-heading h2 {
    margin: 7px 0 4px;
    color: #182235;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.5px;
}

    .mv-heading h2 span {
        color: #E8681A;
    }

.mv-heading p {
    margin: 0;
    color: #5f6875;
    font-size: 12px;
    line-height: 1.7;
}


/* -----------------------------------------
   CARDS
----------------------------------------- */

.mv-cards {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: stretch;
}


/* -----------------------------------------
   CARD
----------------------------------------- */

.mv-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 158px;
    padding: 25px 30px;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 13px;
    box-shadow: 0 10px 30px rgba(24, 34, 53, 0.055);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .mv-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 38px rgba(24, 34, 53, 0.10);
    }


/* -----------------------------------------
   ICON
----------------------------------------- */

.mv-icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    border-radius: 50%;
}

    .mv-icon svg {
        width: 37px;
        height: 37px;
        fill: none;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* Mission Icon */

.mv-mission .mv-icon {
    background: #fff0e5;
}

    .mv-mission .mv-icon svg {
        stroke: #E8681A;
    }


/* Vision Icon */

.mv-vision .mv-icon {
    background: #edf5ff;
}

    .mv-vision .mv-icon svg {
        stroke: #1769c2;
    }


/* -----------------------------------------
   CONTENT
----------------------------------------- */

.mv-content {
    flex: 1;
}

.mv-small-title {
    display: block;
    margin-bottom: 1px;
    color: #E8681A;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
}

.mv-vision .mv-small-title {
    color: #3b83d1;
}

.mv-content h3 {
    margin: 3px 0 5px;
    color: #E8681A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.mv-vision .mv-content h3 {
    color: #1769c2;
}


/* -----------------------------------------
   UNDERLINE
----------------------------------------- */

.mv-line {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px 0 12px;
    border-radius: 10px;
    background: #E8681A;
}

.mv-vision .mv-line {
    background: #1769c2;
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.mv-content p {
    max-width: 390px;
    margin: 0;
    color: #4e5968;
    font-size: 11.5px;
    line-height: 1.65;
    font-weight: 400;
}


/* -----------------------------------------
   CENTER DIVIDER
----------------------------------------- */

.mv-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 95px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}

    .mv-divider span {
        width: 1px;
        height: 38px;
        background: #f1d9c9;
    }

    .mv-divider i {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        transform: translate(-50%, -50%);
        background: #E8681A;
        border-radius: 50%;
        box-shadow: 0 0 0 4px #fff;
    }


/* -----------------------------------------
   BACKGROUND DECORATIONS
----------------------------------------- */

.mv-bg-circle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}


/* Top Right */

.mv-circle-top {
    width: 110px;
    height: 110px;
    top: -45px;
    right: 5%;
    background: rgba(247, 174, 115, 0.08);
}


/* Bottom Left */

.mv-circle-left {
    width: 260px;
    height: 180px;
    bottom: -135px;
    left: -70px;
    border-radius: 50%;
    background: rgba(247, 174, 115, 0.13);
    transform: rotate(-15deg);
}


/* Bottom Right */

.mv-circle-right {
    width: 250px;
    height: 170px;
    bottom: -120px;
    right: -70px;
    background: rgba(83, 157, 230, 0.10);
    transform: rotate(15deg);
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 900px) {

    .mv-section {
        padding: 50px 20px;
    }

    .mv-cards {
        gap: 35px;
    }

    .mv-card {
        padding: 22px;
    }

    .mv-icon {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
        margin-right: 18px;
    }

        .mv-icon svg {
            width: 32px;
            height: 32px;
        }

    .mv-content h3 {
        font-size: 19px;
    }

    .mv-content p {
        font-size: 11px;
    }
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .mv-section {
        padding: 45px 16px 50px;
    }

    .mv-heading {
        margin-bottom: 28px;
    }

        .mv-heading h2 {
            font-size: 25px;
        }

        .mv-heading p {
            font-size: 11px;
        }

    .mv-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mv-card {
        min-height: auto;
        padding: 22px;
    }

    .mv-divider {
        display: none;
    }

    .mv-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        margin-right: 17px;
    }

        .mv-icon svg {
            width: 30px;
            height: 30px;
        }

    .mv-small-title {
        font-size: 9px;
    }

    .mv-content h3 {
        font-size: 20px;
    }

    .mv-content p {
        font-size: 11px;
        line-height: 1.7;
    }
}


/* -----------------------------------------
   SMALL MOBILE
----------------------------------------- */

@media (max-width: 430px) {

    .mv-card {
        padding: 18px;
    }

    .mv-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        margin-right: 14px;
    }

        .mv-icon svg {
            width: 27px;
            height: 27px;
        }

    .mv-content h3 {
        font-size: 18px;
    }

    .mv-content p {
        font-size: 10.5px;
    }
}