/* =========================================================
   KARYARTHI GLOBAL
   ABOUT PAGE — PREMIUM DARK TECHNOLOGY DESIGN

   NO IMAGES USED
========================================================= */

:root {
    --kg-navy-950: #020b16;
    --kg-navy-900: #041322;
    --kg-navy-850: #061a2b;
    --kg-navy-800: #082238;
    --kg-navy-700: #0b2d48;
    --kg-aqua: #00d4e8;
    --kg-cyan: #42e7f3;
    --kg-blue: #1687ff;
    --kg-white: #f4fbff;
    --kg-text: #d2e2eb;
    --kg-muted: #91a9b9;
    --kg-border: rgba(82, 225, 240, .14);
    --kg-glass: rgba(8, 34, 56, .72);
}


/* =========================================================
   PAGE BASE
========================================================= */

.about-hero,
.about-section,
.about-cta-section,
.about-final-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .about-hero *,
    .about-section *,
    .about-cta-section *,
    .about-final-section * {
        box-sizing: border-box;
    }

    .about-hero p,
    .about-section p,
    .about-cta-section p {
        color: var(--kg-text);
        line-height: 1.85;
    }


    /* =========================================================
   TECHNOLOGY GRID BACKGROUND
========================================================= */

    .about-hero::before,
    .about-section::before,
    .about-cta-section::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: linear-gradient( rgba(0, 212, 232, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 212, 232, .025) 1px, transparent 1px );
        background-size: 55px 55px;
        pointer-events: none;
    }


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

.about-section {
    padding: 120px 0;
    background: linear-gradient( 180deg, var(--kg-navy-950), var(--kg-navy-900) );
}

    .about-section:nth-of-type(even) {
        background: linear-gradient( 145deg, #061a2b, #03101e );
    }


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

.about-hero {
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 150px 0 120px;
    background: radial-gradient( circle at 80% 20%, rgba(0, 212, 232, .18), transparent 28% ), radial-gradient( circle at 10% 80%, rgba(22, 135, 255, .12), transparent 30% ), linear-gradient( 135deg, #020b16 0%, #041727 55%, #061f35 100% );
}


    /* glowing circles */

    .about-hero::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -180px;
        top: 80px;
        border-radius: 50%;
        border: 1px solid rgba(0, 212, 232, .16);
        box-shadow: 0 0 80px rgba(0, 212, 232, .06), inset 0 0 80px rgba(0, 212, 232, .04);
        z-index: -1;
    }


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

.about-hero-content {
    max-width: 1050px;
}

.about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    color: var(--kg-aqua);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 6px;
}

    .about-kicker::before {
        content: "";
        width: 45px;
        height: 2px;
        background: var(--kg-aqua);
        box-shadow: 0 0 12px rgba(0, 212, 232, .7);
    }


.about-hero h1 {
    margin: 0;
    color: var(--kg-white);
    font-size: clamp(45px, 6.5vw, 82px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2px;
}

    .about-hero h1 span {
        display: block;
        color: transparent;
        background: linear-gradient( 90deg, #00d4e8, #72eff7 );
        -webkit-background-clip: text;
        background-clip: text;
    }


.about-tagline {
    margin-top: 25px;
    color: #a9c3d1;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
}


.about-hero-line {
    width: 110px;
    height: 3px;
    margin: 30px 0;
    border-radius: 20px;
    background: linear-gradient( 90deg, var(--kg-aqua), var(--kg-blue) );
    box-shadow: 0 0 18px rgba(0, 212, 232, .45);
}


.about-hero h2 {
    max-width: 850px;
    margin: 0 0 25px;
    color: var(--kg-white);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.15;
}


.about-hero p {
    max-width: 900px;
    font-size: 16px;
    color: #a9bfcc;
}


/* =========================================================
   SECTION HEADING
========================================================= */

/* =========================================================
   SECTION HEADING — FIX
========================================================= */

.about-section-heading h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--kg-white);
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}


/* Centered heading */

.about-section-heading.centered h2 {
    position: relative;
    top: auto;
    margin: 0 auto;
}


/* Heading paragraph */

.about-section-heading p {
    position: relative;
    z-index: 3;
    display: block;
    max-width: 850px;
    margin: 20px auto 0;
    color: var(--kg-muted);
    font-size: 16px;
    line-height: 1.7;
}


    /* Multiple paragraphs */

    .about-section-heading p + p {
        margin-top: 8px;
    }


/* =========================================================
   TWO COLUMN
========================================================= */

.about-two-column {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 90px;
    align-items: start;
}


.about-section-heading h2 {
    position: sticky;
    top: 120px;
}


.about-content p {
    margin-bottom: 25px;
}


/* =========================================================
   PHILOSOPHY BOX
========================================================= */

.philosophy-box {
    position: relative;
    margin: 40px 0;
    padding: 35px;
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(11, 45, 72, .85), rgba(4, 19, 34, .95) );
    border: 1px solid var(--kg-border);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .22);
    overflow: hidden;
}


    .philosophy-box::before {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        right: -80px;
        top: -80px;
        border-radius: 50%;
        background: rgba(0, 212, 232, .10);
        filter: blur(25px);
    }


    .philosophy-box h3 {
        position: relative;
        margin: 0 0 25px;
        color: var(--kg-white);
        font-size: 21px;
    }


.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}


.philosophy-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 65px;
    padding: 15px;
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    transition: .3s ease;
}


    .philosophy-item:hover {
        transform: translateY(-4px);
        background: rgba(0,212,232,.07);
        border-color: rgba(0,212,232,.22);
    }


    .philosophy-item span {
        color: var(--kg-aqua);
        font-size: 11px;
        font-weight: 800;
    }


    .philosophy-item strong {
        color: #d7e8ef;
        font-size: 13px;
    }


.business-belief {
    margin: 40px 0;
    padding: 25px 30px;
    border-left: 3px solid var(--kg-aqua);
    background: linear-gradient( 90deg, rgba(0,212,232,.08), transparent );
}


    .business-belief span {
        display: block;
        margin-bottom: 10px;
        color: var(--kg-muted);
        font-size: 13px;
    }


    .business-belief strong {
        display: block;
        color: var(--kg-white);
        font-size: 18px;
        line-height: 1.7;
    }


/* =========================================================
   PURPOSE SECTION
========================================================= */

.purpose-section {
    background: radial-gradient( circle at 85% 50%, rgba(0,212,232,.10), transparent 28% ), #061a2b;
}


.purpose-card {
    max-width: 1050px;
    padding: 60px;
    border-radius: 35px;
    background: linear-gradient( 145deg, rgba(12, 51, 79, .75), rgba(3, 17, 30, .9) );
    border: 1px solid rgba(0,212,232,.16);
    box-shadow: 0 35px 90px rgba(0,0,0,.3);
}


    .purpose-card h2 {
        margin-bottom: 30px;
    }


    .purpose-card p {
        color: #b2c7d2;
    }


/* =========================================================
   CORE CAPABILITIES
========================================================= */

.capabilities-section {
    background: linear-gradient( 180deg, #020b16, #061a2b );
}


.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


.capability-card {
    position: relative;
    min-height: 330px;
    padding: 32px;
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(12, 45, 70, .82), rgba(4, 18, 31, .92) );
    border: 1px solid rgba(86,220,235,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.20);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}


    .capability-card::before {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        right: -65px;
        top: -65px;
        border-radius: 50%;
        background: rgba(0,212,232,.07);
        transition: .4s ease;
    }


    .capability-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--kg-aqua), transparent );
        transform: scaleX(0);
        transition: .4s ease;
    }


    .capability-card:hover {
        border-color: rgba(0,212,232,.32);
        box-shadow: 0 30px 70px rgba(0,0,0,.32), 0 0 30px rgba(0,212,232,.05);
    }


        .capability-card:hover::before {
            transform: scale(2);
        }


        .capability-card:hover::after {
            transform: scaleX(1);
        }


.capability-number {
    position: absolute;
    top: 22px;
    right: 25px;
    color: rgba(128,225,235,.16);
    font-size: 14px;
    font-weight: 800;
}


.capability-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 19px;
    color: var(--kg-aqua);
    background: linear-gradient( 145deg, rgba(0,212,232,.13), rgba(22,135,255,.06) );
    border: 1px solid rgba(0,212,232,.15);
    font-size: 25px;
    transition: .35s ease;
}


.capability-card:hover .capability-icon {
    color: #ffffff;
    background: linear-gradient( 135deg, #00cfe2, #0962a8 );
    box-shadow: 0 0 25px rgba(0,212,232,.22);
    transform: translateZ(25px) rotate(-5deg) scale(1.07);
}


.capability-card h3 {
    position: relative;
    margin: 0 0 15px;
    color: var(--kg-white);
    font-size: 20px;
    line-height: 1.35;
}


.capability-card p {
    position: relative;
    margin: 0;
    color: #8fa8b7;
    font-size: 14px;
}


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

.execution-section {
    background: #03101e;
}


.strategy-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 60px;
}


.strategy-step {
    position: relative;
    min-width: 170px;
    padding: 27px 22px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient( 145deg, #0b2d48, #061827 );
    border: 1px solid rgba(0,212,232,.13);
    transition: .35s ease;
}


    .strategy-step:hover,
    .strategy-step.step-active {
        transform: translateY(-8px);
        border-color: rgba(0,212,232,.4);
        box-shadow: 0 20px 50px rgba(0,0,0,.25), 0 0 25px rgba(0,212,232,.06);
    }


    .strategy-step span {
        display: block;
        margin-bottom: 8px;
        color: var(--kg-aqua);
        font-size: 11px;
        font-weight: 800;
    }


    .strategy-step strong {
        color: var(--kg-white);
        font-size: 17px;
    }


.strategy-arrow {
    color: var(--kg-aqua);
    font-size: 26px;
}


.execution-content {
    max-width: 1050px;
    margin: auto;
}


    .execution-content h3 {
        margin-top: 40px;
        color: var(--kg-white);
    }


.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}


    .help-grid div,
    .next-grid div {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 16px;
        border-radius: 15px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.06);
        color: #b3c6d1;
        font-size: 13px;
        transition: .3s ease;
    }


        .help-grid div:hover,
        .next-grid div:hover {
            background: rgba(0,212,232,.06);
            border-color: rgba(0,212,232,.18);
            transform: translateY(-3px);
        }


    .help-grid i,
    .next-grid i {
        color: var(--kg-aqua);
    }


.process-line {
    margin-top: 50px;
    text-align: center;
    color: var(--kg-aqua);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* =========================================================
   TECHNOLOGY PILLARS
========================================================= */

.pillars-section {
    background: linear-gradient( 145deg, #061a2b, #020b16 );
}


.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


.pillar-card {
    min-height: 300px;
    padding: 30px;
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(11,45,72,.8), rgba(3,16,28,.95) );
    border: 1px solid rgba(0,212,232,.10);
    transition: .35s ease;
}


    .pillar-card:hover {
        transform: translateY(-9px);
        border-color: rgba(0,212,232,.30);
        box-shadow: 0 25px 60px rgba(0,0,0,.28);
    }


    .pillar-card > i {
        color: var(--kg-aqua);
        font-size: 29px;
        margin-bottom: 24px;
        transition: .35s ease;
    }


    .pillar-card:hover > i {
        transform: scale(1.12);
        text-shadow: 0 0 20px rgba(0,212,232,.45);
    }


    .pillar-card h3 {
        margin: 0 0 13px;
        color: var(--kg-white);
        font-size: 18px;
    }


    .pillar-card p {
        margin: 0;
        color: #8fa8b7;
        font-size: 13px;
    }


/* =========================================================
   BUSINESS FIRST
========================================================= */

.business-first-section {
    background: #020b16;
}


.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.process-card {
    position: relative;
    min-height: 300px;
    padding: 32px;
    border-radius: 26px;
    background: linear-gradient( 145deg, #0b2d48, #051522 );
    border: 1px solid rgba(0,212,232,.11);
    transition: .35s ease;
}


    .process-card:hover {
        transform: translateY(-9px);
        border-color: rgba(0,212,232,.3);
        box-shadow: 0 25px 65px rgba(0,0,0,.3);
    }


    .process-card > span {
        position: absolute;
        top: 20px;
        right: 22px;
        color: rgba(0,212,232,.14);
        font-size: 30px;
        font-weight: 900;
    }


    .process-card > i {
        color: var(--kg-aqua);
        font-size: 27px;
        margin-bottom: 25px;
    }


    .process-card h3 {
        margin: 0 0 14px;
        color: var(--kg-white);
    }


    .process-card p {
        margin: 0;
        color: #8fa8b7;
        font-size: 13px;
    }


/* =========================================================
   WHY KARYARTHI
========================================================= */

.why-section {
    background: linear-gradient( 180deg, #061a2b, #020b16 );
}


.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.why-card {
    padding: 32px;
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    transition: .35s ease;
}


    .why-card:hover {
        transform: translateY(-8px);
        background: linear-gradient( 145deg, rgba(11,45,72,.9), rgba(4,18,31,.95) );
        border-color: rgba(0,212,232,.28);
    }


    .why-card > span {
        color: var(--kg-aqua);
        font-size: 12px;
        font-weight: 800;
    }


    .why-card h3 {
        margin: 17px 0 12px;
        color: var(--kg-white);
        font-size: 19px;
    }


    .why-card p {
        margin: 0;
        color: #91a9b9;
        font-size: 13px;
    }


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {
    background: #03101e;
}


.industry-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}


.industry-item {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(12,45,70,.75), rgba(4,18,31,.9) );
    border: 1px solid rgba(0,212,232,.09);
    transition: .35s ease;
}


    .industry-item:hover {
        transform: translateY(-7px);
        background: linear-gradient( 145deg, #0c4566, #062238 );
        border-color: rgba(0,212,232,.35);
        box-shadow: 0 20px 45px rgba(0,0,0,.25);
    }


    .industry-item i {
        margin-bottom: 13px;
        color: var(--kg-aqua);
        font-size: 25px;
    }


    .industry-item span {
        color: #c5d8e1;
        font-size: 12px;
        font-weight: 700;
    }


/* =========================================================
   STARTUPS / SME / ENTERPRISE
========================================================= */

.audience-section {
    background: #061a2b;
}


.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.audience-card {
    padding: 45px 32px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient( 145deg, #0b304c, #041827 );
    border: 1px solid rgba(0,212,232,.12);
    transition: .35s ease;
}


    .audience-card:hover {
        transform: translateY(-10px);
        border-color: rgba(0,212,232,.35);
        box-shadow: 0 30px 65px rgba(0,0,0,.28);
    }


.audience-icon {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 24px;
    color: var(--kg-aqua);
    background: rgba(0,212,232,.08);
    border: 1px solid rgba(0,212,232,.14);
    font-size: 30px;
}


.audience-card h3 {
    color: var(--kg-white);
    margin-bottom: 13px;
}


.audience-card p {
    margin: 0;
    color: #91a9b9;
    font-size: 14px;
}


/* =========================================================
   MISSION / VISION
========================================================= */

.mission-section {
    background: #020b16;
}


.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.mission-card {
    position: relative;
    min-height: 330px;
    padding: 45px;
    border-radius: 32px;
    background: linear-gradient( 145deg, #0b304c, #041725 );
    border: 1px solid rgba(0,212,232,.13);
    overflow: hidden;
}


    .mission-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        bottom: -90px;
        border-radius: 50%;
        background: rgba(0,212,232,.08);
        filter: blur(20px);
    }


    .mission-card h2 {
        margin: 0 0 22px;
        color: var(--kg-white);
        font-size: 34px;
    }


    .mission-card p {
        position: relative;
        z-index: 2;
        margin: 0;
        color: #a4bbc7;
        font-size: 15px;
    }


/* =========================================================
   VALUES
========================================================= */

.values-section {
    background: #061a2b;
}


.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


.value-card {
    padding: 30px;
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    transition: .35s ease;
}


    .value-card:hover {
        transform: translateY(-8px);
        background: linear-gradient( 145deg, rgba(11,45,72,.9), rgba(4,18,31,.95) );
        border-color: rgba(0,212,232,.3);
    }


    .value-card > span {
        color: var(--kg-aqua);
        font-size: 12px;
        font-weight: 800;
    }


    .value-card h3 {
        margin: 17px 0 12px;
        color: var(--kg-white);
    }


    .value-card p {
        margin: 0;
        color: #91a9b9;
        font-size: 13px;
    }


/* =========================================================
   LOOKING AHEAD
========================================================= */

.looking-section {
    background: radial-gradient( circle at 85% 50%, rgba(0,212,232,.08), transparent 30% ), #020b16;
}


.looking-card {
    max-width: 1050px;
    margin: auto;
    padding: 70px;
    border-radius: 35px;
    background: linear-gradient( 145deg, #0a304d, #031525 );
    border: 1px solid rgba(0,212,232,.15);
    box-shadow: 0 35px 80px rgba(0,0,0,.3);
}


    .looking-card h2 {
        margin-bottom: 25px;
    }


    .looking-card p {
        color: #a7bdc9;
    }


    .looking-card strong {
        display: block;
        margin-top: 30px;
        color: var(--kg-aqua);
        font-size: 19px;
        line-height: 1.6;
    }


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

.about-cta-section {
    padding: 120px 0;
    background: radial-gradient( circle at 70% 30%, rgba(0,212,232,.15), transparent 25% ), linear-gradient( 135deg, #061f35, #020b16 );
}


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


    .about-cta-content h2 {
        margin-bottom: 25px;
    }


.next-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}


    .next-grid div {
        background: rgba(255,255,255,.04);
        border-color: rgba(0,212,232,.10);
    }


.cta-ready {
    margin-top: 45px;
    color: var(--kg-white) !important;
    font-size: 23px !important;
    font-weight: 800;
}


/* =========================================================
   FINAL BRAND
========================================================= */

.about-final-section {
    padding: 120px 0;
    background: radial-gradient( circle at 50% 30%, rgba(0,212,232,.09), transparent 35% ), #010812;
}


.final-brand {
    text-align: center;
}


.final-brand-name {
    color: #ffffff;
    font-size: clamp(50px, 8vw, 95px);
    font-weight: 900;
    letter-spacing: 10px;
    text-shadow: 0 0 35px rgba(0,212,232,.13);
}


.final-brand p {
    margin: 20px auto;
    color: #8fa8b7;
    font-size: 15px;
}


.final-brand > strong {
    display: block;
    margin-top: 22px;
    color: var(--kg-aqua);
    font-size: 22px;
}


.final-brand > span {
    display: block;
    margin-top: 12px;
    color: #829aa9;
    letter-spacing: 2px;
}


.final-lines {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 45px 0 35px;
}


    .final-lines div {
        padding: 13px 22px;
        border-radius: 50px;
        color: #c6dce5;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(0,212,232,.10);
        font-size: 13px;
    }


.final-location {
    color: #718a99;
    margin-top: 25px;
}


.final-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 15px;
    color: #718a99;
    font-size: 13px;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.kg-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s ease;
}


    .kg-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 991px) {

    .about-section {
        padding: 90px 0;
    }

    .about-two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-section-heading h2 {
        position: static;
    }

    .help-grid,
    .next-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .strategy-flow {
        flex-wrap: wrap;
    }
}


@media (max-width: 767px) {

    .about-hero {
        min-height: auto;
        padding: 100px 0 80px;
    }

        .about-hero h1 {
            font-size: 43px;
        }

        .about-hero h2 {
            font-size: 29px;
        }

        .about-hero p {
            font-size: 14px;
        }

    .about-section {
        padding: 75px 0;
    }

    .philosophy-grid,
    .capabilities-grid,
    .pillars-grid,
    .process-grid,
    .why-grid,
    .values-grid,
    .industry-grid,
    .help-grid,
    .next-grid {
        grid-template-columns: 1fr;
    }

    .purpose-card,
    .looking-card,
    .mission-card {
        padding: 30px 24px;
    }

    .strategy-flow {
        flex-direction: column;
    }

    .strategy-arrow {
        display: none;
    }

    .strategy-step {
        width: 100%;
    }

    .final-brand-name {
        font-size: 46px;
        letter-spacing: 5px;
    }

    .final-contact {
        flex-direction: column;
        gap: 10px;
    }
}