/*==================================================
ABOUT PAGE
==================================================*/

.about-hero{

    position:relative;

    padding:180px 0 120px;

    overflow:hidden;

    background:
    linear-gradient(rgba(5,20,34,.82),rgba(5,20,34,.88)),
    url("../images/about/about-hero.jpg") center/cover no-repeat;

}


.about-hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    top:-280px;
    right:-180px;

    border-radius:50%;

    background:rgba(0,200,83,.08);

    filter:blur(70px);

}


.about-hero::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    bottom:-180px;
    left:-120px;

    border-radius:50%;

    background:#00C853;

    opacity:.08;

    filter:blur(90px);

}


.about-hero-grid{

    display:grid;

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

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}



.about-content h1{

    font-size:3.7rem;

    line-height:1.15;

    color:#fff;

    margin:18px 0 28px;

    font-weight:800;

}


.about-content p{

    color:#c7d6df;

    line-height:1.9;

    font-size:1.08rem;

    max-width:620px;

}



.section-tag{

    display:inline-block;

    padding:10px 22px;

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

    color:#00C853;

    border:1px solid rgba(0,200,83,.30);

    border-radius:30px;

    font-size:.85rem;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

}



.about-image{

    position:relative;

}



.about-image img{

    width:100%;

    border-radius:24px;

    display:block;

    box-shadow:0 35px 80px rgba(0,0,0,.45);

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

}



.about-image::after{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(0,200,83,.35);

    border-radius:24px;

    pointer-events:none;

}



/*==================================================
COMPANY STORY
==================================================*/

.company-story{

    padding:120px 0;

    background:#071B2C;

}



.story-grid{

    display:grid;

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

    gap:90px;

    align-items:center;

}



.story-image{

    position:relative;

}



.story-image img{

    width:100%;

    display:block;

    border-radius:22px;

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}



.story-image::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    top:18px;

    left:18px;

    border:2px solid rgba(0,200,83,.35);

    border-radius:22px;

    z-index:-1;

}



.story-content h2{

    color:#fff;

    font-size:2.8rem;

    margin:20px 0 28px;

    line-height:1.25;

}



.story-content p{

    color:#c9d6df;

    line-height:1.95;

    margin-bottom:22px;

    font-size:1.03rem;

}



/*==================================================
HIGHLIGHTS
==================================================*/

.story-highlights{

    display:grid;

    grid-template-columns:1fr;

    gap:22px;

    margin-top:45px;

}



.highlight{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:28px;

    border-radius:18px;

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

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

    transition:.35s;

}



.highlight:hover{

    transform:translateY(-8px);

    border-color:#00C853;

    box-shadow:0 20px 40px rgba(0,200,83,.12);

}



.highlight i{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:1.4rem;

    color:#00C853;

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

    flex-shrink:0;

}



.highlight h4{

    color:#fff;

    margin-bottom:8px;

    font-size:1.2rem;

}



.highlight p{

    margin:0;

    color:#c8d6df;

}



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

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}



.section-heading h2{

    color:#fff;

    font-size:3rem;

    margin:22px 0;

    line-height:1.2;

}



.section-heading p{

    color:#c7d5df;

    line-height:1.9;

}



/*==================================================
SMOOTH ANIMATION
==================================================*/

.about-content,
.story-content,
.about-image,
.story-image{

    animation:fadeUp 1s ease both;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==================================================
MISSION | VISION | VALUES
==================================================*/

.mission-section{

    padding:120px 0;

    background:#061725;

}


.mission-grid{

    display:grid;

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

    gap:35px;

}


.mission-card{

    position:relative;

    padding:45px 35px;

    border-radius:22px;

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

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

    transition:.4s ease;

    overflow:hidden;

}


.mission-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#00C853;

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}


.mission-card:hover{

    transform:translateY(-12px);

    border-color:#00C853;

    box-shadow:0 25px 60px rgba(0,200,83,.15);

}


.mission-card:hover::before{

    transform:scaleX(1);

}


.card-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

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

    color:#00C853;

    font-size:2rem;

}


.mission-card h3{

    color:#fff;

    font-size:1.6rem;

    margin-bottom:20px;

}


.mission-card p{

    color:#c7d6df;

    line-height:1.9;

}


.mission-card ul{

    margin-top:20px;

    padding-left:18px;

}


.mission-card li{

    color:#d2dde4;

    margin-bottom:12px;

    line-height:1.8;

}



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

.why-nexus{

    padding:120px 0;

    background:#071B2C;

}


.reasons-grid{

    display:grid;

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

    gap:30px;

}


.reason-card{

    text-align:center;

    padding:45px 30px;

    border-radius:22px;

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

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

    transition:.35s;

}


.reason-card:hover{

    transform:translateY(-10px);

    border-color:#00C853;

    box-shadow:0 18px 40px rgba(0,200,83,.12);

}


.reason-card i{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    font-size:2rem;

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

    color:#00C853;

}


.reason-card h3{

    color:#fff;

    margin-bottom:18px;

    font-size:1.35rem;

}


.reason-card p{

    color:#c8d6df;

    line-height:1.8;

}



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

.capabilities-section{

    padding:120px 0;

    background:#061725;

}


.capabilities-grid{

    display:grid;

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

    gap:30px;

}


.capability-item{

    position:relative;

    text-align:center;

    padding:50px 30px;

    border-radius:22px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

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

    transition:.35s;

    overflow:hidden;

}


.capability-item::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:#00C853;

    transition:.35s;

    transform:translateX(-50%);

}


.capability-item:hover{

    transform:translateY(-12px);

    border-color:#00C853;

    box-shadow:0 25px 60px rgba(0,200,83,.16);

}


.capability-item:hover::after{

    width:100%;

}


.capability-item i{

    font-size:2.3rem;

    color:#00C853;

    margin-bottom:25px;

}


.capability-item h4{

    color:#fff;

    font-size:1.3rem;

    font-weight:600;

}



/*==================================================
SECTION SPACING POLISH
==================================================*/

.mission-section,
.why-nexus,
.capabilities-section{

    position:relative;

    overflow:hidden;

}


.mission-section::before,
.capabilities-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#00C853;

    opacity:.05;

    filter:blur(90px);

}


.mission-section::before{

    top:-180px;

    right:-120px;

}


.capabilities-section::before{

    bottom:-180px;

    left:-120px;

}

/*==================================================
COMPANY JOURNEY
==================================================*/

.journey{

    padding:120px 0;

    background:#061725;

}


.journey-grid{

    display:grid;

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

    gap:30px;

}


.journey-card{

    position:relative;

    text-align:center;

    padding:45px 30px;

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

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

    border-radius:22px;

    transition:.35s;

}


.journey-card:hover{

    transform:translateY(-10px);

    border-color:#00C853;

}


.journey-card span{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:#00C853;

    color:#fff;

    font-size:1.3rem;

    font-weight:700;

}


.journey-card h3{

    color:#fff;

    margin-bottom:15px;

}


.journey-card p{

    color:#c9d6df;

    line-height:1.8;

}



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

.about-cta{

    padding:130px 20px;

    text-align:center;

    background:

    linear-gradient(rgba(5,20,34,.82),rgba(5,20,34,.88)),

    url("../images/about/about-hero.jpg")

    center/cover no-repeat;

}


.about-cta h2{

    color:#fff;

    font-size:3rem;

    margin:25px auto;

    max-width:820px;

    line-height:1.25;

}


.about-cta p{

    color:#d0dbe2;

    max-width:760px;

    margin:0 auto 45px;

    line-height:1.9;

}


.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



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

@media(max-width:1100px){

.about-hero-grid,
.story-grid{

grid-template-columns:1fr;

gap:60px;

}

.mission-grid,
.reasons-grid,
.capabilities-grid,{

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

}

.journey-grid{

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

}

}



@media(max-width:768px){

.about-hero{

padding:150px 0 90px;

}

.about-content h1{

font-size:2.5rem;

}

.story-content h2,
.section-heading h2,
.about-cta h2{

font-size:2.1rem;

}

.mission-grid,
.reasons-grid,
.capabilities-grid,
.journey-grid{

grid-template-columns:1fr;

}

.highlight{

flex-direction:column;

text-align:center;

align-items:center;

}

.about-content,
.story-content{

text-align:center;

}

.section-heading{

margin-bottom:50px;

}

}



@media(max-width:500px){

.about-content h1{

font-size:2rem;

}

.story-content h2,
.section-heading h2,
.about-cta h2{

font-size:1.8rem;

}

.card-icon{

width:65px;

height:65px;

font-size:1.5rem;

}

.highlight i{

width:60px;

height:60px;

font-size:1.2rem;

}

.mission-card,
.reason-card,
.capability-item,
.journey-card{

padding:35px 25px;

}

}



/*==================================================
PREMIUM POLISH
==================================================*/
.journey-card,
.mission-card,
.reason-card,
.capability-item,
.highlight{

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}


.story-image img,
.about-image img{

transition:.45s;

}


.story-image:hover img,
.about-image:hover img{

transform:scale(1.04);

}


html{

scroll-behavior:smooth;

}