/* ==================================================
NEXUS DATA & DEFENSE
ABOUT PAGE
PREMIUM REDESIGN
================================================== */


/* ==================================================
ROOT
================================================== */

:root{

    --navy:#061521;
    --navy-2:#081D2C;
    --navy-3:#0C2638;

    --green:#00D66B;
    --green-2:#21E883;

    --white:#ffffff;
    --muted:#9BAEBA;
    --line:rgba(255,255,255,.09);

}


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

.about-hero,
.identity-section,
.capabilities-section,
.trust-section{

    position:relative;
    overflow:hidden;

}


.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:7px 13px;

    border-radius:30px;

    background:rgba(0,214,107,.09);

    border:1px solid rgba(0,214,107,.22);

    color:var(--green-2);

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}


.eyebrow::before{

    content:"";

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 10px var(--green);

}


.btn-primary,
.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 23px;

    border-radius:30px;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    transition:.3s ease;

}


.btn-primary{

    background:var(--green);

    color:#03120B;

    box-shadow:0 8px 30px rgba(0,214,107,.18);

}


.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 35px rgba(0,214,107,.3);

}


.btn-outline{

    color:#fff;

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

}


.btn-outline:hover{

    background:#fff;

    color:#071827;

}



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

.about-hero{

    min-height:650px;

    display:flex;

    align-items:center;

    background:

    radial-gradient(
        circle at 75% 40%,
        rgba(0,214,107,.11),
        transparent 28%
    ),

    linear-gradient(
        135deg,
        #061521 0%,
        #081D2C 55%,
        #061521 100%
    );

}


.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );

    background-size:55px 55px;

    mask-image:linear-gradient(
        to right,
        transparent,
        black,
        transparent
    );

}


.hero-glow{

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,214,107,.08);

    filter:blur(100px);

    border-radius:50%;

}


.about-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

}


.hero-content{

    max-width:680px;

}


.hero-content h1{

    margin:25px 0 22px;

    color:#fff;

    font-size:64px;

    line-height:1.05;

    letter-spacing:-2.5px;

    font-weight:800;

}


.hero-content h1 span{

    color:var(--green);

}


.hero-content p{

    max-width:610px;

    margin:0;

    color:#B8C8D1;

    font-size:15px;

    line-height:1.85;

}


.hero-buttons{

    display:flex;

    gap:13px;

    margin-top:30px;

}



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

.hero-visual{

    display:flex;

    justify-content:flex-end;

}


.visual-frame{

    position:relative;

    width:430px;

    height:390px;

    padding:22px;

    border:1px solid rgba(0,214,107,.2);

    border-radius:24px;

    background:

    linear-gradient(
        145deg,
        rgba(14,42,59,.95),
        rgba(5,21,32,.95)
    );

    box-shadow:

    0 35px 90px rgba(0,0,0,.3),

    inset 0 0 60px rgba(0,214,107,.025);

}


.visual-frame::before{

    content:"";

    position:absolute;

    inset:12px;

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

    border-radius:18px;

}


.visual-top{

    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    gap:9px;

    color:#AFC0CA;

    font-size:9px;

    letter-spacing:2px;

}


.status-dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 12px var(--green);

}


.secure-label{

    margin-left:auto;

    color:var(--green);

}


.visual-center{

    position:absolute;

    inset:70px 0 70px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.shield-ring{

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    radial-gradient(
        circle,
        rgba(0,214,107,.2),
        rgba(0,214,107,.03) 65%
    );

    border:1px solid rgba(0,214,107,.35);

    color:var(--green);

    font-size:50px;

    box-shadow:

    0 0 50px rgba(0,214,107,.12),

    inset 0 0 30px rgba(0,214,107,.08);

    z-index:3;

}


.orbit{

    position:absolute;

    border:1px solid rgba(0,214,107,.12);

    border-radius:50%;

}


.orbit-one{

    width:220px;

    height:220px;

}


.orbit-two{

    width:310px;

    height:310px;

    border-style:dashed;

    opacity:.5;

}


.visual-bottom{

    position:absolute;

    left:22px;

    right:22px;

    bottom:22px;

    z-index:3;

    display:grid;

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

    gap:10px;

}


.visual-bottom div{

    padding:12px;

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

    border-radius:10px;

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

}


.visual-bottom strong{

    display:block;

    color:#fff;

    font-size:10px;

}


.visual-bottom span{

    color:#748994;

    font-size:8px;

    letter-spacing:1px;

}



/* ==================================================
IDENTITY
================================================== */

.identity-section{

    padding:105px 0;

    background:#0A2131;

}


.identity-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}


.identity-intro h2{

    margin:24px 0;

    color:#fff;

    font-size:48px;

    line-height:1.12;

    letter-spacing:-1.5px;

}


.identity-intro h2 span{

    color:var(--green);

}


.identity-intro p{

    max-width:570px;

    color:#AABBC5;

    font-size:14px;

    line-height:1.9;

}


.identity-line{

    width:55px;

    height:2px;

    margin-top:30px;

    background:var(--green);

}


.identity-cards{

    display:flex;

    flex-direction:column;

    gap:16px;

}


.identity-card{

    display:flex;

    gap:20px;

    padding:26px;

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

    border-radius:16px;

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

    transition:.3s ease;

}


.identity-card:hover{

    transform:translateX(6px);

    border-color:rgba(0,214,107,.25);

}


.card-icon{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    color:var(--green);

    background:rgba(0,214,107,.08);

}


.identity-card span{

    color:var(--green);

    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

}


.identity-card h3{

    margin:7px 0;

    color:#fff;

    font-size:19px;

}


.identity-card p{

    margin:0;

    color:#879AA6;

    font-size:12px;

    line-height:1.7;

}



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

.capabilities-section{

    padding:105px 0;

    background:#061521;

}


.section-intro{

    text-align:center;

    max-width:650px;

    margin:0 auto 55px;

}


.section-intro h2{

    margin:22px 0 14px;

    color:#fff;

    font-size:45px;

    line-height:1.1;

    letter-spacing:-1.5px;

}


.section-intro h2 span{

    color:var(--green);

}


.section-intro p{

    color:#8FA2AD;

    font-size:13px;

}


.capability-grid{

    display:grid;

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

    gap:16px;

}


.capability-card{

    position:relative;

    padding:30px 25px;

    min-height:290px;

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

    border-radius:18px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
    );

    transition:.35s ease;

    overflow:hidden;

}


.capability-card::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-50px;

    bottom:-50px;

    background:rgba(0,214,107,.08);

    border-radius:50%;

    filter:blur(20px);

}


.capability-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,214,107,.3);

    box-shadow:0 20px 50px rgba(0,0,0,.2);

}


.cap-number{

    position:absolute;

    top:22px;

    right:22px;

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

    font-size:11px;

    font-weight:700;

}


.cap-icon{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    border-radius:14px;

    background:rgba(0,214,107,.08);

    color:var(--green);

    font-size:20px;

}


.capability-card h3{

    color:#fff;

    font-size:18px;

    margin-bottom:12px;

}


.capability-card p{

    color:#81949F;

    font-size:12px;

    line-height:1.75;

}


.capability-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:var(--green);

    text-decoration:none;

    font-size:10px;

    font-weight:600;

}



/* ==================================================
TRUST
================================================== */

.trust-section{

    padding:110px 0 80px;

    background:#0A2131;

}


.trust-pattern{

    position:absolute;

    inset:0;

    opacity:.25;

    background-image:

    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );

    background-size:60px 60px;

}


.trust-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:100px;

    align-items:center;

}


.trust-content h2{

    margin:23px 0;

    color:#fff;

    font-size:52px;

    line-height:1.05;

    letter-spacing:-2px;

}


.trust-content h2 span{

    color:var(--green);

}


.trust-content p{

    max-width:450px;

    color:#9BAEB9;

    font-size:13px;

    line-height:1.9;

    margin-bottom:30px;

}


.trust-pillars{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}


.trust-pillar{

    display:flex;

    gap:15px;

    padding:22px;

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

    border-radius:15px;

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

}


.trust-icon{

    flex-shrink:0;

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--green);

    color:#03120B;

    font-size:11px;

}


.trust-pillar h3{

    margin:0 0 6px;

    color:#fff;

    font-size:14px;

}


.trust-pillar p{

    margin:0;

    color:#81949F;

    font-size:10px;

    line-height:1.6;

}


.final-message{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:90px auto 0;

    padding-top:55px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}


.final-message p{

    margin:0 0 14px;

    color:#fff;

    font-size:25px;

    font-weight:400;

    letter-spacing:.2px;

}


.final-message span{

    color:var(--green);

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;

}



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

@media(max-width:1050px){

    .about-hero-grid{

        grid-template-columns:1fr;

        gap:50px;

    }


    .hero-content{

        max-width:750px;

    }


    .hero-visual{

        justify-content:center;

    }


    .identity-grid{

        grid-template-columns:1fr;

        gap:55px;

    }


    .capability-grid{

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

    }


    .trust-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

}



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

@media(max-width:768px){

    .about-hero{

        min-height:auto;

        padding:120px 0 70px;

    }


    .hero-content h1{

        font-size:43px;

        letter-spacing:-1px;

    }


    .hero-content p{

        font-size:13px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }


    .hero-buttons a{

        width:100%;

        max-width:270px;

    }


    .visual-frame{

        width:100%;

        height:330px;

    }


    .identity-section,
    .capabilities-section,
    .trust-section{

        padding:75px 0;

    }


    .identity-intro h2{

        font-size:37px;

    }


    .section-intro h2{

        font-size:36px;

    }


    .capability-grid{

        grid-template-columns:1fr;

    }


    .capability-card{

        min-height:auto;

    }


    .trust-content h2{

        font-size:43px;

    }


    .trust-pillars{

        grid-template-columns:1fr;

    }


    .final-message{

        margin-top:65px;

        padding-top:40px;

    }


    .final-message p{

        font-size:20px;

        line-height:1.5;

    }

}
/* ==================================================
ABOUT HERO — NAVBAR CLEARANCE FIX
================================================== */

@media (min-width: 769px){

    .about-hero{
        box-sizing:border-box;
        padding-top:100px;
    }

}


/* MOBILE */

@media (max-width: 768px){

    .about-hero{
        padding-top:120px;
    }

}
/* ==================================================
ABOUT HERO BACKGROUND IMAGE
================================================== */

.about-hero{

    background:

    linear-gradient(
        90deg,
        rgba(5,21,32,.96) 0%,
        rgba(5,21,32,.88) 42%,
        rgba(5,21,32,.58) 72%,
        rgba(5,21,32,.72) 100%
    ),

    url("../images/about/about-hero.jpg")
    center center / cover no-repeat;

}
/* =========================================================
   NEXUS ABOUT PAGE — PREMIUM FINAL POLISH
   ADD THIS AT THE VERY BOTTOM OF about.css
========================================================= */


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

.about-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:

    linear-gradient(
        90deg,
        rgba(3,15,25,.97) 0%,
        rgba(3,15,25,.90) 34%,
        rgba(3,15,25,.68) 62%,
        rgba(3,15,25,.46) 100%
    ),

    url("../images/about/about-hero.jpg")
    center center / cover no-repeat;

}


/* cinematic green atmosphere */

.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(
        circle at 76% 48%,
        rgba(0,214,107,.13),
        transparent 25%
    ),

    radial-gradient(
        circle at 20% 80%,
        rgba(0,140,255,.07),
        transparent 30%
    );

}


/* subtle grid */

.about-hero::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    opacity:.18;

    background-image:

    linear-gradient(
        rgba(255,255,255,.035) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.035) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    mask-image:linear-gradient(
        90deg,
        black,
        transparent 85%
    );

}


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

.about-hero .hero-content{

    position:relative;

    max-width:720px;

    z-index:3;

}


.about-hero .section-tag{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:8px 15px;

    border:1px solid rgba(0,214,107,.25);

    border-radius:40px;

    background:rgba(0,214,107,.07);

    color:#27e985;

    font-size:9px;

    font-weight:700;

    letter-spacing:2.4px;

    text-transform:uppercase;

    box-shadow:

    inset 0 0 20px rgba(0,214,107,.03),

    0 0 25px rgba(0,214,107,.04);

}


.about-hero .section-tag::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00d66b;

    box-shadow:0 0 12px #00d66b;

}


.about-hero h1{

    margin:27px 0 24px;

    max-width:760px;

    color:#fff;

    font-size:66px;

    line-height:1.03;

    letter-spacing:-3px;

    font-weight:800;

}


.about-hero h1 span{

    color:#00dc70;

    text-shadow:

    0 0 30px rgba(0,214,107,.12);

}


.about-hero .hero-content p{

    max-width:625px;

    margin:0;

    color:#b5c6cf;

    font-size:14px;

    line-height:1.9;

}


/* =========================================================
   NEW ABOUT BUTTONS
========================================================= */

.about-hero .hero-buttons{

    display:flex;

    align-items:center;

    gap:26px;

    margin-top:34px;

}


/* primary */

.about-hero-primary{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:13px;

    padding:14px 19px 14px 22px;

    border-radius:10px;

    background:#00d66b;

    color:#03130b;

    text-decoration:none;

    font-size:11px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:

    0 10px 35px rgba(0,214,107,.16);

    transition:.35s ease;

}


.about-hero-primary i{

    width:25px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:7px;

    background:rgba(0,0,0,.12);

    font-size:9px;

}


.about-hero-primary:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 40px rgba(0,214,107,.27);

}


/* secondary */

.about-hero-secondary{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:11px;

    padding:12px 0;

    color:#d8e3e8;

    text-decoration:none;

    font-size:11px;

    font-weight:600;

    transition:.3s ease;

}


.about-hero-secondary::after{

    content:"";

    position:absolute;

    left:0;

    right:25px;

    bottom:4px;

    height:1px;

    background:rgba(0,214,107,.55);

    transform-origin:left;

    transition:.3s ease;

}


.about-hero-secondary i{

    color:#00d66b;

    font-size:10px;

    transition:.3s ease;

}


.about-hero-secondary:hover{

    color:#fff;

}


.about-hero-secondary:hover::after{

    right:0;

}


.about-hero-secondary:hover i{

    transform:translateX(4px);

}


/* =========================================================
   HERO IMAGE / VISUAL PANEL
========================================================= */

.about-hero .hero-image{

    position:relative;

    z-index:2;

}


.about-hero .hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:22px;

}


/* If image panel exists */

.about-hero .hero-image{

    overflow:hidden;

    border:1px solid rgba(0,214,107,.22);

    border-radius:24px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.35),

    0 0 45px rgba(0,214,107,.05);

}


/* =========================================================
   WHO WE ARE / IDENTITY
========================================================= */

.identity-section{

    position:relative;

    padding:115px 0;

    background:#0a2232;

    overflow:hidden;

}


.identity-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-250px;

    top:-200px;

    border-radius:50%;

    background:rgba(0,214,107,.035);

    filter:blur(80px);

}


.identity-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:100px;

    align-items:center;

}


.identity-intro h2{

    margin:23px 0;

    color:#fff;

    font-size:49px;

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:800;

}


.identity-intro h2 span{

    color:#00d66b;

}


.identity-intro p{

    max-width:540px;

    color:#a3b6c0;

    font-size:13px;

    line-height:1.9;

}


.identity-line{

    width:70px;

    height:2px;

    margin-top:30px;

    background:

    linear-gradient(
        90deg,
        #00d66b,
        transparent
    );

}


/* mission cards */

.identity-cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}


.identity-card{

    position:relative;

    min-height:190px;

    padding:28px;

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

    border-radius:18px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.012)
    );

    overflow:hidden;

    transition:.35s ease;

}


.identity-card::before{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-50px;

    bottom:-50px;

    border-radius:50%;

    background:rgba(0,214,107,.08);

    filter:blur(20px);

}


.identity-card:hover{

    transform:translateY(-6px);

    border-color:rgba(0,214,107,.28);

    box-shadow:

    0 20px 50px rgba(0,0,0,.2);

}


.card-icon{

    width:43px;

    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:12px;

    background:rgba(0,214,107,.09);

    color:#00d66b;

}


.identity-card span{

    display:block;

    margin-bottom:7px;

    color:#00d66b;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.8px;

}


.identity-card h3{

    margin:0 0 9px;

    color:#fff;

    font-size:17px;

}


.identity-card p{

    margin:0;

    color:#8499a4;

    font-size:10px;

    line-height:1.7;

}


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

.capabilities-section{

    position:relative;

    padding:110px 0;

    background:#061521;

}


.capabilities-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 50% 0%,
        rgba(0,214,107,.06),
        transparent 38%
    );

}


.section-intro{

    position:relative;

    z-index:2;

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}


.section-intro h2{

    margin:22px 0 15px;

    color:#fff;

    font-size:45px;

    line-height:1.08;

    letter-spacing:-1.8px;

}


.section-intro h2 span{

    color:#00d66b;

}


.section-intro p{

    color:#8fa4af;

    font-size:12px;

    line-height:1.7;

}


/* capability cards */

.capability-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:15px;

}


.capability-card{

    position:relative;

    min-height:285px;

    padding:28px;

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

    border-radius:18px;

    background:

    linear-gradient(
        145deg,
        rgba(12,38,55,.92),
        rgba(5,22,33,.88)
    );

    overflow:hidden;

    transition:.4s ease;

}


.capability-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        transparent 45%,
        rgba(0,214,107,.05)
    );

    opacity:0;

    transition:.4s ease;

}


.capability-card:hover{

    transform:translateY(-9px);

    border-color:rgba(0,214,107,.3);

    box-shadow:

    0 25px 60px rgba(0,0,0,.3);

}


.capability-card:hover::before{

    opacity:1;

}


.cap-number{

    position:absolute;

    top:21px;

    right:21px;

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

    font-size:10px;

    font-weight:700;

}


.cap-icon{

    position:relative;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:27px;

    border-radius:14px;

    background:rgba(0,214,107,.08);

    color:#00d66b;

    font-size:18px;

}


.capability-card h3{

    position:relative;

    margin:0 0 12px;

    color:#fff;

    font-size:16px;

}


.capability-card p{

    position:relative;

    margin:0;

    color:#8195a0;

    font-size:10px;

    line-height:1.8;

}


.capability-card a{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:24px;

    color:#00d66b;

    font-size:9px;

    font-weight:700;

    text-decoration:none;

}


.capability-card a i{

    transition:.3s ease;

}


.capability-card:hover a i{

    transform:translateX(4px);

}


/* =========================================================
   TRUST / WHY NEXUS
========================================================= */

.trust-section{

    position:relative;

    padding:110px 0 80px;

    background:#0a2232;

    overflow:hidden;

}


.trust-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:400px;

    right:-250px;

    bottom:-200px;

    background:rgba(0,214,107,.05);

    filter:blur(100px);

    border-radius:50%;

}


.trust-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:90px;

    align-items:center;

}


.trust-content h2{

    margin:22px 0;

    color:#fff;

    font-size:52px;

    line-height:1.03;

    letter-spacing:-2px;

}


.trust-content h2 span{

    color:#00d66b;

}


.trust-content p{

    max-width:450px;

    color:#99adb8;

    font-size:12px;

    line-height:1.9;

}


/* trust cards */

.trust-pillars{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}


.trust-pillar{

    position:relative;

    display:flex;

    gap:14px;

    padding:22px;

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

    border-radius:15px;

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

    transition:.35s ease;

}


.trust-pillar:hover{

    transform:translateY(-4px);

    border-color:rgba(0,214,107,.25);

    background:rgba(0,214,107,.035);

}


.trust-icon{

    flex-shrink:0;

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#00d66b;

    color:#03130b;

    font-size:9px;

    box-shadow:0 0 20px rgba(0,214,107,.12);

}


.trust-pillar h3{

    margin:0 0 5px;

    color:#fff;

    font-size:12px;

}


.trust-pillar p{

    margin:0;

    color:#80949f;

    font-size:9px;

    line-height:1.6;

}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.final-message{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:85px auto 0;

    padding-top:55px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.07);

}


.final-message p{

    margin:0 0 16px;

    color:#fff;

    font-size:24px;

    font-weight:400;

    letter-spacing:.1px;

}


.final-message span{

    color:#00d66b;

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

}


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

@media(max-width:1050px){

    .about-hero{

        min-height:auto;

        padding-top:110px;

        padding-bottom:90px;

    }


    .about-hero h1{

        font-size:56px;

    }


    .identity-grid,
    .trust-grid{

        grid-template-columns:1fr;

        gap:55px;

    }


    .capability-grid{

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

    }

}


@media(max-width:768px){

    .about-hero{

        padding-top:120px;

        padding-bottom:70px;

        background-position:center;

    }


    .about-hero h1{

        font-size:42px;

        line-height:1.06;

        letter-spacing:-1.5px;

    }


    .about-hero .hero-content p{

        font-size:12px;

    }


    .about-hero .hero-buttons{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;

    }


    .about-hero-primary{

        width:auto;

    }


    .identity-section,
    .capabilities-section,
    .trust-section{

        padding:75px 0;

    }


    .identity-grid{

        gap:45px;

    }


    .identity-cards{

        grid-template-columns:1fr;

    }


    .identity-intro h2{

        font-size:37px;

    }


    .section-intro h2{

        font-size:35px;

    }


    .capability-grid{

        grid-template-columns:1fr;

    }


    .trust-content h2{

        font-size:42px;

    }


    .trust-pillars{

        grid-template-columns:1fr;

    }


    .final-message{

        margin-top:60px;

        padding-top:40px;

    }


    .final-message p{

        font-size:19px;

        line-height:1.5;

    }

}
/* =========================================================
   ABOUT PAGE — READABILITY & TYPOGRAPHY BOOST
========================================================= */

/* General About paragraphs */
.about-page p,
.about-section p,
.about-content p,
.about-intro p,
.identity-intro p,
.identity-card p,
.capability-card p,
.trust-content p,
.trust-pillar p{
    font-size:13px;
    line-height:1.8;
    color:#a9bbc4;
}


/* WHO WE ARE main paragraph */
.about-content > p,
.identity-intro > p{
    font-size:14px;
    line-height:1.9;
    max-width:620px;
}


/* Mission & Vision */
.about-features .feature p,
.mission-box p,
.vision-box p{
    font-size:12.5px;
    line-height:1.75;
    color:#9fb2bc;
}


/* Capability cards */
.capability-card h3{
    font-size:17px;
    margin-bottom:12px;
}

.capability-card p{
    font-size:12px;
    line-height:1.75;
}


/* Learn More */
.capability-card a{
    font-size:10.5px;
    margin-top:22px;
}


/* Why Nexus */
.trust-pillar h3{
    font-size:13px;
}

.trust-pillar p{
    font-size:11px;
    line-height:1.7;
}


/* Hero supporting text */
.about-hero .hero-content p{
    font-size:14px;
    line-height:1.9;
}


/* Section introductory text */
.section-intro p{
    font-size:12.5px;
    line-height:1.8;
}


/* Mobile */
@media(max-width:768px){

    .about-page p,
    .about-section p,
    .about-content p,
    .about-intro p,
    .identity-intro p,
    .identity-card p,
    .capability-card p,
    .trust-content p,
    .trust-pillar p{
        font-size:12.5px;
        line-height:1.75;
    }

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

    .capability-card p{
        font-size:12px;
    }

}
/* =========================================================
   NEXUS ABOUT — INTERACTIVE EXPERIENCE
========================================================= */


/* =========================================================
   SCROLL REVEAL
========================================================= */

.about-hero .hero-content,
.about-hero .hero-image,
.identity-intro,
.identity-card,
.section-intro,
.capability-card,
.trust-content,
.trust-pillar,
.final-message{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}


.about-reveal-visible{

    opacity:1 !important;

    transform:translateY(0) !important;

}


/* stagger capability cards */

.capability-card:nth-child(1){
    transition-delay:.05s;
}

.capability-card:nth-child(2){
    transition-delay:.12s;
}

.capability-card:nth-child(3){
    transition-delay:.19s;
}

.capability-card:nth-child(4){
    transition-delay:.26s;
}


/* mission / vision stagger */

.identity-card:nth-child(1){
    transition-delay:.08s;
}

.identity-card:nth-child(2){
    transition-delay:.18s;
}


/* trust stagger */

.trust-pillar:nth-child(1){
    transition-delay:.05s;
}

.trust-pillar:nth-child(2){
    transition-delay:.12s;
}

.trust-pillar:nth-child(3){
    transition-delay:.19s;
}

.trust-pillar:nth-child(4){
    transition-delay:.26s;
}



/* =========================================================
   HERO IMAGE — CINEMATIC MOVEMENT
========================================================= */

.about-hero .hero-image{

    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;

}


.about-hero .hero-image:hover{

    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:

        0 35px 90px rgba(0,0,0,.4),

        0 0 50px rgba(0,214,107,.08);

}


.about-hero .hero-image img{

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter .5s ease;

}


.about-hero .hero-image:hover img{

    transform:scale(1.035);

    filter:
        brightness(1.06)
        saturate(1.08);

}



/* =========================================================
   CAPABILITY CARD — PREMIUM INTERACTION
========================================================= */

.capability-card{

    cursor:pointer;

}


.capability-card .cap-icon{

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}


.capability-card:hover .cap-icon{

    transform:
        translateY(-3px)
        rotate(-4deg);

    background:rgba(0,214,107,.14);

    box-shadow:

        0 0 25px rgba(0,214,107,.12);

}


.capability-card h3{

    transition:
        color .3s ease,
        transform .3s ease;

}


.capability-card:hover h3{

    color:#00d66b;

    transform:translateX(3px);

}


.capability-card a{

    transition:
        color .3s ease,
        gap .3s ease;

}


.capability-card:hover a{

    gap:13px;

}



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

.identity-card{

    cursor:default;

}


.identity-card .card-icon{

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.identity-card:hover .card-icon{

    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:

        0 0 25px rgba(0,214,107,.12);

}


.identity-card h3{

    transition:color .3s ease;

}


.identity-card:hover h3{

    color:#00d66b;

}



/* =========================================================
   TRUST PILLARS
========================================================= */

.trust-pillar{

    cursor:default;

}


.trust-icon{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}


.trust-pillar:hover .trust-icon{

    transform:scale(1.12);

    box-shadow:

        0 0 25px rgba(0,214,107,.25);

}


.trust-pillar h3{

    transition:color .3s ease;

}


.trust-pillar:hover h3{

    color:#00d66b;

}



/* =========================================================
   HERO TEXT ENTRANCE
========================================================= */

.about-hero .hero-content .section-tag{

    transition-delay:.05s;

}


.about-hero .hero-content h1{

    transition-delay:.12s;

}


.about-hero .hero-content p{

    transition-delay:.20s;

}


.about-hero .hero-content .hero-buttons{

    transition-delay:.28s;

}



/* =========================================================
   BUTTON MICRO-INTERACTION
========================================================= */

.about-hero-primary i{

    transition:

        transform .3s ease;

}


.about-hero-primary:hover i{

    transform:

        translate(2px,-2px);

}


.about-hero-secondary i{

    transition:

        transform .3s ease;

}


.about-hero-secondary:hover i{

    transform:

        translateX(5px);

}



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

.about-hero .section-tag,
.identity-section .eyebrow,
.capabilities-section .eyebrow,
.trust-section .eyebrow{

    transition:

        background .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}


.about-hero .section-tag:hover{

    background:rgba(0,214,107,.12);

    border-color:rgba(0,214,107,.4);

    box-shadow:

        0 0 25px rgba(0,214,107,.08);

}



/* =========================================================
   FINAL STATEMENT
========================================================= */

.final-message{

    transition:

        opacity 1s ease,

        transform 1s cubic-bezier(.22,1,.36,1);

}


.final-message span{

    position:relative;

}


.final-message span::after{

    content:"";

    display:block;

    width:35px;

    height:1px;

    margin:9px auto 0;

    background:#00d66b;

    transition:

        width .5s ease;

}


.final-message:hover span::after{

    width:70px;

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce){

    .about-hero .hero-content,
    .about-hero .hero-image,
    .identity-intro,
    .identity-card,
    .section-intro,
    .capability-card,
    .trust-content,
    .trust-pillar,
    .final-message{

        opacity:1;

        transform:none;

        transition:none;

    }


    .about-hero .hero-image,
    .about-hero .hero-image img,
    .capability-card,
    .identity-card,
    .trust-pillar{

        transform:none !important;

        transition:none !important;

    }

}
/* =========================================================
   NEXUS SYSTEMS — CSS INTERACTIVE EFFECTS
   HTML UNCHANGED
========================================================= */


/* ---------------------------------------------------------
   MAIN SYSTEM PANEL
--------------------------------------------------------- */

.hero-image{

    position:relative;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .5s ease;

}


.hero-image:hover{

    transform:translateY(-6px);

    filter:brightness(1.04);

}


/* ---------------------------------------------------------
   NEXUS SYSTEMS HEADER
--------------------------------------------------------- */

.hero-image::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    box-shadow:

        inset 0 0 0 1px rgba(0,214,107,.08),

        inset 0 0 45px rgba(0,214,107,.025);

    z-index:10;

}


/* ---------------------------------------------------------
   GLOWING SYSTEM ATMOSPHERE
--------------------------------------------------------- */

.hero-image::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:rgba(0,214,107,.06);

    filter:blur(55px);

    pointer-events:none;

    animation:nexusGlow 4s ease-in-out infinite;

}


@keyframes nexusGlow{

    0%,100%{

        opacity:.45;

        transform:translate(-50%,-50%) scale(.9);

    }

    50%{

        opacity:.8;

        transform:translate(-50%,-50%) scale(1.12);

    }

}



/* ---------------------------------------------------------
   MISSION DASHBOARD
--------------------------------------------------------- */

.mission-dashboard{

    transition:

        transform .6s cubic-bezier(.22,1,.36,1),

        box-shadow .5s ease;

}


.hero-image:hover .mission-dashboard{

    transform:scale(1.015);

}



/* ---------------------------------------------------------
   RADAR RINGS
--------------------------------------------------------- */

.dashboard-ring{

    transition:

        border-color .4s ease,

        box-shadow .4s ease,

        transform .8s ease;

}


.hero-image:hover .dashboard-ring{

    border-color:rgba(0,214,107,.24);

    box-shadow:

        0 0 25px rgba(0,214,107,.035);

}


.ring-1{

    animation:nexusRingPulse 3s ease-in-out infinite;

}


.ring-2{

    animation:nexusRingPulse 3s ease-in-out infinite 1s;

}


.ring-3{

    animation:nexusRingPulse 3s ease-in-out infinite 2s;

}


@keyframes nexusRingPulse{

    0%,100%{

        opacity:.45;

    }

    50%{

        opacity:1;

    }

}



/* ---------------------------------------------------------
   RADAR SWEEP
--------------------------------------------------------- */

.radar-sweep{

    animation:

        nexusRadar 6s linear infinite;

    transform-origin:center;

}


@keyframes nexusRadar{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* ---------------------------------------------------------
   CENTRAL NEXUS CORE
--------------------------------------------------------- */

.mission-core{

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        box-shadow .45s ease,

        border-color .45s ease;

}


.hero-image:hover .mission-core{

    transform:translate(-50%,-50%) scale(1.04);

    border-color:rgba(0,214,107,.55);

    box-shadow:

        0 0 35px rgba(0,214,107,.13),

        inset 0 0 35px rgba(0,214,107,.06);

}


.core-icon{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}


.hero-image:hover .core-icon{

    transform:

        scale(1.08)

        rotate(-4deg);

    box-shadow:

        0 0 25px rgba(0,214,107,.16);

}



/* ---------------------------------------------------------
   ONLINE STATUS
--------------------------------------------------------- */

.status-dot{

    animation:

        nexusOnline 1.7s ease-in-out infinite;

}


@keyframes nexusOnline{

    0%,100%{

        opacity:1;

        box-shadow:0 0 5px rgba(0,214,107,.7);

    }

    50%{

        opacity:.35;

        box-shadow:0 0 15px rgba(0,214,107,1);

    }

}



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

.mission-card{

    position:relative;

    cursor:pointer;

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}


.mission-card:hover{

    border-color:rgba(0,214,107,.55);

    background:

        linear-gradient(

            135deg,

            rgba(0,214,107,.11),

            rgba(7,31,45,.96)

        );

    box-shadow:

        0 15px 35px rgba(0,0,0,.28),

        0 0 25px rgba(0,214,107,.08);

}


/* ---------------------------------------------------------
   INDIVIDUAL CARD MOVEMENT
--------------------------------------------------------- */

.card-top:hover{

    transform:

        translateX(-50%)

        translateY(-7px);

}


.card-left:hover{

    transform:

        translateX(-7px);

}


.card-right:hover{

    transform:

        translateX(7px);

}


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

.mission-icon{

    transition:

        transform .4s ease,

        background .35s ease,

        box-shadow .35s ease;

}


.mission-card:hover .mission-icon{

    transform:

        scale(1.12)

        rotate(-5deg);

    background:rgba(0,214,107,.14);

    box-shadow:

        0 0 18px rgba(0,214,107,.10);

}


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

.mission-text h4{

    transition:

        color .3s ease,

        transform .3s ease;

}


.mission-card:hover .mission-text h4{

    color:#00d66b;

    transform:translateX(3px);

}


.mission-text p{

    transition:

        color .3s ease;

}


.mission-card:hover .mission-text p{

    color:#a9c1ca;

}



/* ---------------------------------------------------------
   DATA / CYBER / DEFENSE SIGNAL
--------------------------------------------------------- */

.mission-card::after{

    content:"";

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    right:9px;

    top:9px;

    background:#00d66b;

    opacity:.35;

    box-shadow:

        0 0 7px rgba(0,214,107,.5);

    transition:

        opacity .3s ease,

        transform .3s ease;

}


.mission-card:hover::after{

    opacity:1;

    transform:scale(1.5);

}



/* ---------------------------------------------------------
   CONNECTING LINES / NETWORK FEEL
--------------------------------------------------------- */

.mission-card{

    backdrop-filter:blur(5px);

}


.mission-card:hover{

    z-index:20;

}



/* ---------------------------------------------------------
   SUBTLE FLOATING MOTION
--------------------------------------------------------- */

.card-top{

    animation:

        nexusFloatTop 5s ease-in-out infinite;

}


.card-left{

    animation:

        nexusFloatLeft 5.5s ease-in-out infinite;

}


.card-right{

    animation:

        nexusFloatRight 6s ease-in-out infinite;

}


@keyframes nexusFloatTop{

    0%,100%{

        margin-top:0;

    }

    50%{

        margin-top:-4px;

    }

}


@keyframes nexusFloatLeft{

    0%,100%{

        margin-top:0;

    }

    50%{

        margin-top:3px;

    }

}


@keyframes nexusFloatRight{

    0%,100%{

        margin-top:0;

    }

    50%{

        margin-top:-3px;

    }

}



/* ---------------------------------------------------------
   SECURITY LABEL
--------------------------------------------------------- */

.mission-dashboard > *{

    will-change:transform;

}



/* ---------------------------------------------------------
   HOVER ENERGY
--------------------------------------------------------- */

.hero-image:hover{

    box-shadow:

        0 35px 80px rgba(0,0,0,.38),

        0 0 45px rgba(0,214,107,.07);

}



/* ---------------------------------------------------------
   MOBILE — KEEP IT CLEAN
--------------------------------------------------------- */

@media(max-width:768px){

    .hero-image:hover{

        transform:none;

    }


    .hero-image:hover .mission-dashboard{

        transform:none;

    }


    .mission-card{

        animation:none;

    }


    .mission-card:hover{

        transform:none;

    }


    .hero-image::after{

        width:160px;

        height:160px;

    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    .radar-sweep,
    .ring-1,
    .ring-2,
    .ring-3,
    .status-dot,
    .card-top,
    .card-left,
    .card-right,
    .hero-image::after{

        animation:none !important;

    }

}
/* =========================================================
   NEXUS HERO VISUAL — CINEMATIC CSS EFFECT
   HTML UNCHANGED
========================================================= */

.about-hero .hero-image{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    border-radius:24px;

    transform:translateZ(0);

    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        box-shadow .7s ease,
        filter .5s ease;

    box-shadow:

        0 30px 80px rgba(0,0,0,.45),

        0 0 0 1px rgba(0,214,107,.16),

        0 0 45px rgba(0,214,107,.05);

}


/* IMAGE */

.about-hero .hero-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.015);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter 1s ease;

}


/* =========================================================
   HOVER — CAMERA MOVEMENT
========================================================= */

.about-hero .hero-image:hover{

    transform:
        translateY(-8px)
        scale(1.015);

    box-shadow:

        0 40px 100px rgba(0,0,0,.55),

        0 0 0 1px rgba(0,214,107,.35),

        0 0 65px rgba(0,214,107,.11);

}


.about-hero .hero-image:hover img{

    transform:scale(1.06);

    filter:

        brightness(1.08)

        contrast(1.04)

        saturate(1.12);

}


/* =========================================================
   GREEN ENERGY GLOW
========================================================= */

.about-hero .hero-image::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(0,214,107,.15),
            rgba(0,214,107,.05) 35%,
            transparent 70%
        );

    filter:blur(15px);

    opacity:.35;

    z-index:2;

    pointer-events:none;

    animation:nexusEnergy 4s ease-in-out infinite;

}


@keyframes nexusEnergy{

    0%,100%{

        opacity:.25;

        transform:
            translate(-50%,-50%)
            scale(.85);

    }

    50%{

        opacity:.55;

        transform:
            translate(-50%,-50%)
            scale(1.15);

    }

}


/* =========================================================
   MOVING SCAN LINE
========================================================= */

.about-hero .hero-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    height:2px;

    top:-10px;

    z-index:8;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(0,214,107,.0),
            rgba(0,214,107,.75),
            rgba(0,214,107,.0),
            transparent
        );

    box-shadow:

        0 0 15px rgba(0,214,107,.35);

    animation:nexusScan 5s linear infinite;

}


@keyframes nexusScan{

    0%{

        top:-5%;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        top:105%;

        opacity:0;

    }

}


/* =========================================================
   HOVER SCAN SPEED
========================================================= */

.about-hero .hero-image:hover::after{

    animation-duration:2.4s;

}


/* =========================================================
   DIGITAL EDGE
========================================================= */

.about-hero .hero-image{

    border:1px solid rgba(0,214,107,.18);

}


.about-hero .hero-image:hover{

    border-color:rgba(0,214,107,.42);

}


/* =========================================================
   CORNER TECH MARKERS
========================================================= */

.about-hero .hero-image{

    --corner-size:18px;

}


/* top-left */

.about-hero .hero-image > img{

    position:relative;

    z-index:1;

}


/* =========================================================
   SUBTLE FLOAT
========================================================= */

.about-hero .hero-image{

    animation:nexusFloat 6s ease-in-out infinite;

}


@keyframes nexusFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}


.about-hero .hero-image:hover{

    animation:none;

}


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

@media(max-width:768px){

    .about-hero .hero-image{

        animation:none;

    }

    .about-hero .hero-image:hover{

        transform:none;

    }

    .about-hero .hero-image:hover img{

        transform:scale(1.025);

    }

    .about-hero .hero-image::after{

        animation-duration:4s;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .about-hero .hero-image,
    .about-hero .hero-image img,
    .about-hero .hero-image::before,
    .about-hero .hero-image::after{

        animation:none !important;

        transition:none !important;

    }

}