/* ==========================================================
   AVARTHANA TECHNOLOGIES
   ABOUT PAGE
   Release : 2.1.1

   Page-Level Styles
========================================================== */


/* ==========================================================
   PAGE FOUNDATION
========================================================== */

.about-page{

    background:#ffffff;

}

.about-section{

    padding:120px 0;

}

.about-section:nth-child(even){

    background:#f8fbfe;

}


/* ==========================================================
   SHARED HEADINGS
========================================================== */

.about-heading{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.about-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--blue);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.about-heading h2{

    margin:0 0 24px;

    font-size:3rem;

    font-weight:700;

    color:#0d213d;

    line-height:1.2;

}

.about-heading p{

    margin:0;

    color:#5f7186;

    font-size:1.15rem;

    line-height:1.9;

}


/* ==========================================================
   CONTENT GRID
========================================================== */

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-grid.reverse{

    direction:rtl;

}

.about-grid.reverse>*{

    direction:ltr;

}


/* ==========================================================
   IMAGES
========================================================== */

.about-image{

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 24px 60px rgba(0,0,0,.12);

}

.about-image img{

    width:100%;

    display:block;

    object-fit:cover;

}


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

.about-content h3{

    margin:0 0 24px;

    font-size:2rem;

    color:#0d213d;

}

.about-content p{

    margin:0 0 26px;

    color:#5f7186;

    line-height:1.9;

    font-size:1.05rem;

}

.about-content ul{

    margin:32px 0 0;

    padding-left:20px;

}

.about-content li{

    margin-bottom:14px;

    color:#4e6176;

    line-height:1.8;

}


/* ==========================================================
   HIGHLIGHT PANEL
========================================================== */

.about-highlight{

    padding:50px;

    border-radius:22px;

    background:#0d213d;

    color:#ffffff;

}

.about-highlight h3{

    color:#ffffff;

}

.about-highlight p{

    color:#d5e4f4;

}


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

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-heading h2{

        font-size:2.5rem;

    }

}

@media(max-width:768px){

    .about-section{

        padding:80px 0;

    }

    .about-heading{

        margin-bottom:50px;

    }

    .about-heading h2{

        font-size:2rem;

    }

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

.about-hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:72vh;

    padding:40px 0;

    background:
        linear-gradient(rgba(7,20,33,.22),rgba(7,20,33,.22)),
        url("../images/about/hero/about-hero.webp")
        center/cover no-repeat;

    overflow:hidden;

}

.about-hero-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(25,194,255,.15),
        transparent 15%);

    pointer-events:none;

}

.about-hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

}

.about-hero h1{

    margin:0 0 28px;

    font-size:4rem;

    line-height:1.1;

    color:#ffffff;

}

.about-hero p{

    margin:0;

    font-size:1.18rem;

    line-height:1.9;

    color:#d6e4f2;

    max-width:650px;

}

.about-hero-actions{

    display:flex;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

@media(max-width:992px){

    .about-hero{

        min-height:60vh;

    }

    .about-hero h1{

        font-size:3rem;

    }

}

@media(max-width:768px){

    .about-hero{

        min-height:auto;

        padding:100px 0 80px;

    }

    .about-hero h1{

        font-size:2.4rem;

    }

}

.about-hero::before{

    background:
        linear-gradient(
            90deg,
            rgba(5,16,28,.72) 0%,
            rgba(5,16,28,.38) 45%,
            rgba(5,16,28,.10) 100%
        );

}

.about-hero-content{

    position:relative;

    z-index:3;

}
.about-hero img,
.about-hero .hero-logo{
    filter:
        drop-shadow(0 0 12px rgba(0,170,255,.35))
        drop-shadow(0 0 24px rgba(0,170,255,.18));
}


/* ==========================================================
   COMPANY OVERVIEW
========================================================== */

.company-section{

    padding:110px 0;

    background:#ffffff;

}

.company-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:80px;

    align-items:center;

}
.company-left{

    display:flex;

    flex-direction:column;

    gap:32px;

}
/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

.company-image{

    position:relative;

    transform:translateY(-30px);

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(18,60,110,.16);

    box-shadow:
        0 24px 70px rgba(15,35,65,.14);

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

}

.company-image:hover{

    transform:translateY(-36px);

    box-shadow:
        0 35px 85px rgba(15,35,65,.20);

}

.company-image img{

    width:106%;

    max-width:none;

    display:block;

    object-fit:cover;

}

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

.company-content h2{

    margin:18px 0 30px;

    font-size:3rem;

    line-height:1.15;

    letter-spacing:-0.02em;

    color:#0d213d;

}

.company-content p{

    margin:0 0 26px;

    color:#5f7186;

    font-size:1.08rem;

    line-height:1.95;

    max-width:95%;

}

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

.company-stats{

    display:grid;

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

    gap:18px;

    margin-top:40px;

}

.stat-box{

    padding:24px;

    border:1px solid #e4edf7;

    border-radius:16px;

    background:#f8fbff;

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;

}

.stat-box:hover{

    transform:translateY(-6px);

    border-color:#bdd8ff;

    box-shadow:
        0 18px 45px rgba(18,44,79,.10);

}

.stat-box h3{

    margin:0;

    font-size:1.42rem;

    color:#0d213d;

    font-weight:700;

}

.stat-box span{

    display:block;

    margin-top:8px;

    font-size:.95rem;

    line-height:1.5;

    color:#5f7186;

}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

    .company-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

    .company-image{

        transform:none;

        max-width:680px;

        margin:0 auto;

    }

    .company-image:hover{

        transform:none;

    }

    .company-image img{

        width:100%;

    }

    .company-content{

        text-align:center;

    }

    .company-content p{

        max-width:100%;

    }

}

@media(max-width:768px){

    .company-section{

        padding:80px 0;

    }

    .company-content h2{

        font-size:2.4rem;

    }

    .company-stats{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   VISION • MISSION • CORE VALUES
   Release 2.2.0
========================================================== */

.vision-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:#f7fbff;

}
/* subtle engineering glow */

.vision-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../images/about/vision/vision-bg.webp");

    background-repeat:no-repeat;

    background-position:center top;

    background-size:cover;

    opacity:.25;

    filter:contrast(1.15) brightness(.92);

    pointer-events:none;

}
.vision-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            ellipse at center,

            rgba(255,255,255,.05) 0%,

            rgba(255,255,255,.35) 65%,

            rgba(255,255,255,.70) 100%

        );

    pointer-events:none;

}
.section-heading,
.vision-grid{

    position:relative;

    z-index:2;

}
/* -------------------------------------- */

.section-heading{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.section-heading h2{

    margin:18px 0 28px;

    font-size:3rem;

    line-height:1.15;

    letter-spacing:-0.02em;

    color:#0d213d;

}

.section-heading p{

    max-width:820px;

    margin:auto;

    font-size:1.18rem;

    line-height:1.85;

    color:#5f7186;

}

/* -------------------------------------- */

.vision-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:34px;

}

/* -------------------------------------- */

.vision-card{

    position:relative;

    padding:42px;

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

    backdrop-filter:blur(8px);

    border:1px solid rgba(24,72,130,.12);

    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(15,35,65,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.vision-card:hover{

    transform:translateY(-8px);

    border-color:#bfd8fb;

    box-shadow:
        0 28px 65px rgba(15,35,65,.14);

}

/* -------------------------------------- */

.vision-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    font-size:2rem;

    color:#1677ff;

    background:
        linear-gradient(
            135deg,
            rgba(20,110,255,.08),
            rgba(20,110,255,.03)
        );

    border:1px solid rgba(20,110,255,.12);

}

/* -------------------------------------- */

.vision-card h3{

    margin:0 0 18px;

    font-size:2rem;

    color:#0d213d;

}

.vision-card p{

    margin:0;

    font-size:1.08rem;

    line-height:1.9;

    color:#5f7186;

}

.vision-card ul{

    margin:0;

    padding-left:22px;

}

.vision-card li{

    margin-bottom:14px;

    line-height:1.75;

    color:#5f7186;

}

/* -------------------------------------- */

@media(max-width:1100px){

    .vision-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .vision-section{

        padding:80px 0;

    }

    .section-heading h2{

        font-size:2.4rem;

    }

    .vision-card{

        padding:32px;

    }

}
/* ==========================================================
   ENGINEERING PHILOSOPHY
   Release 2.4.0
========================================================== */

.philosophy-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #12233b 0%,
            #0d1828 100%
        );

}

/* ==========================================================
   ENGINEERING AMBIENT GLOW
========================================================== */

.philosophy-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(0,180,255,.07),
            transparent 32%
        ),

        radial-gradient(
            circle at 82% 78%,
            rgba(0,120,255,.06),
            transparent 28%
        ),

        radial-gradient(
            circle at center,
            rgba(70,170,255,.03),
            transparent 55%
        );

    pointer-events:none;

}

/* ==========================================================
   GRID
========================================================== */

.philosophy-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.08fr 1fr;

    gap:90px;

    align-items:center;

}

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

.philosophy-content h2{

    margin:18px 0 28px;

    font-size:3rem;

    line-height:1.15;

    letter-spacing:-0.02em;

    color:#ffffff;

}

.philosophy-content p{

    margin:0 0 24px;

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

    font-size:1.08rem;

    line-height:1.95;

}

/* ==========================================================
   PRINCIPLES
========================================================== */

.philosophy-list{

    display:grid;

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

    gap:18px;

    margin-top:42px;

}

.philosophy-list div{

    padding:18px 22px;

    border-radius:16px;

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

    border:1px solid rgba(90,165,255,.18);

    color:#ffffff;

    font-weight:600;

    backdrop-filter:blur(10px);

    transition:
        transform .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}

.philosophy-list div:hover{

    transform:translateY(-5px);

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

    border-color:#49b1ff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.32);

}

/* ==========================================================
   IMAGE
========================================================== */

.philosophy-image{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    border:1px solid rgba(90,170,255,.22);

    background:#091220;

    box-shadow:

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

        0 0 0 1px rgba(70,170,255,.08),

        0 0 40px rgba(0,160,255,.12);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

/* Cyan engineering frame */

.philosophy-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    border:1px solid rgba(80,200,255,.22);

    box-shadow:

        inset 0 0 30px rgba(70,180,255,.06);

    pointer-events:none;

}

/* Hover */

.philosophy-image:hover{

    transform:translateY(-8px);

    border-color:rgba(80,200,255,.38);

    box-shadow:

        0 45px 90px rgba(0,0,0,.55),

        0 0 65px rgba(0,180,255,.20);

}

/* IMAGE */

.philosophy-image img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .6s ease,

        filter .6s ease;

    filter:

        brightness(1.10)

        contrast(1.05)

        saturate(1.08);

}

.philosophy-image:hover img{

    transform:scale(1.025);

    filter:

        brightness(1.15)

        contrast(1.08)

        saturate(1.12);

}

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

@media(max-width:992px){

    .philosophy-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .philosophy-list{

        grid-template-columns:1fr;

    }

    .philosophy-content{

        text-align:center;

    }

}
/* ==========================================================
   ENGINEERING LEADERSHIP
   Release 2.2.0
========================================================== */

.leadership-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #f9fcff 0%,
            #edf5fc 100%
        );

}

/* subtle blueprint */

.leadership-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(50,150,255,.035),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(40,170,255,.03),
            transparent 30%
        );

    pointer-events:none;

}

.leadership-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:34px;

    margin-top:70px;

}

/* ======================================================
   CARD
====================================================== */

.leadership-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:360px;

    padding:42px;

    background:#ffffff;

    border:1px solid #dfeaf6;

    border-radius:24px;

    box-shadow:
        0 18px 45px rgba(15,35,65,.05);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.leadership-card:hover{

    transform:translateY(-8px);

    border-color:#74c5ff;

    box-shadow:

        0 28px 60px rgba(15,35,65,.10),

        0 0 30px rgba(50,180,255,.10);

}

/* ======================================================
   ICON
====================================================== */

.leadership-icon{

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #132642,
            #183250
        );

    color:#35b8ff;

    font-size:2rem;

    box-shadow:

        0 10px 30px rgba(10,30,55,.18),

        inset 0 0 18px rgba(70,180,255,.10);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}
.leadership-icon img{

    width:52px;

    height:52px;

    display:block;

    transition:
        transform .35s ease,
        filter .35s ease;

    filter:
        drop-shadow(0 0 6px rgba(53,184,255,.18));

}

.leadership-card:hover .leadership-icon img{

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 16px rgba(53,184,255,.45));

}

.leadership-card:hover .leadership-icon{

    transform:scale(1.08);

    box-shadow:

        0 15px 35px rgba(10,30,55,.22),

        0 0 28px rgba(60,180,255,.28);

}

/* ======================================================
   TYPOGRAPHY
====================================================== */

.leadership-card h3{

    margin:0 0 18px;

    color:#0d213d;

    font-size:1.55rem;

    line-height:1.3;

}

.leadership-card p{

    margin:0;

    color:#5f7186;

    line-height:1.9;

    font-size:1.04rem;

}

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

@media(max-width:992px){

    .leadership-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .leadership-card{

        min-height:auto;

    }

}
/* ==========================================================
   WHY PARTNER WITH AVARTHANA
   Release 3.0.0
========================================================== */

.why-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f9ff 100%
        );

}

/* subtle engineering texture */

.why-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 15% 20%,
            rgba(53,184,255,.06),
            transparent 30%),

        radial-gradient(circle at 85% 80%,
            rgba(53,184,255,.05),
            transparent 28%),

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

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

    background-size:

        auto,

        auto,

        120px 120px,

        120px 120px;

    pointer-events:none;

}

/* ------------------------------------------------------ */

.why-grid{

    position:relative;

    z-index:2;

    margin-top:70px;

    display:grid;

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

    gap:34px;

}

/* ------------------------------------------------------ */

.why-card{

    position:relative;

    overflow:hidden;

    padding:50px;

    background:#ffffff;

    border:1px solid rgba(65,120,210,.12);

    border-radius:24px;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

    box-shadow:

        0 15px 40px rgba(18,39,74,.05);

}

/* premium hover */

.why-card:hover{

    transform:translateY(-8px);

    border-color:#35B8FF;

    box-shadow:

        0 25px 60px rgba(53,184,255,.14);

}

/* ------------------------------------------------------ */
/* giant watermark number */

.why-number{

    position:absolute;

    top:20px;

    right:28px;

    font-size:88px;

    font-weight:800;

    line-height:1;

    color:#0d213d;

    opacity:.05;

    pointer-events:none;

    transition:.35s;

}

.why-card:hover .why-number{

    opacity:.08;

}

/* ------------------------------------------------------ */

.why-card h3{

    position:relative;

    z-index:2;

    margin:0 0 18px;

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:-0.02em;

    color:#0d213d;

}

.why-card p{

    position:relative;

    z-index:2;

    margin:0;

    line-height:1.9;

    font-size:1.03rem;

    color:#5f7186;

}

/* ------------------------------------------------------ */
/* optional icon placeholder for WP-603 */

.why-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:18px;

    background:

        linear-gradient(
            135deg,
            #0d213d,
            #17365f
        );

    box-shadow:

        0 12px 30px rgba(13,33,61,.16);

}
.why-icon img,
.leadership-icon img{

    width:52px;
    height:52px;

    filter:
        drop-shadow(0 0 4px rgba(53,184,255,.20));

    transition:
        transform .35s ease,
        filter .35s ease;

}

.why-card:hover img,
.leadership-card:hover img{

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 12px rgba(53,184,255,.45));

}

.why-icon img{

    width:38px;

    height:38px;

    filter:

        drop-shadow(0 0 6px rgba(53,184,255,.30));

    transition:

        transform .35s ease,

        filter .35s ease;

}

.why-card:hover .why-icon img{

    transform:scale(1.08);

    filter:

        drop-shadow(0 0 14px rgba(53,184,255,.60));

}

/* ------------------------------------------------------ */

@media(max-width:992px){

    .why-grid{

        grid-template-columns:1fr;

        gap:26px;

    }

    .why-card{

        padding:38px;

    }

    .why-number{

        font-size:70px;

    }

}
/* ==========================================================
ENGINEERING EXCELLENCE
Release 3.1.0
Drop-In Replacement
========================================================== */

.engineering-excellence{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

}

/* subtle engineering glow */

.engineering-excellence::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 18% 28%,rgba(35,150,255,.05),transparent 30%),

        radial-gradient(circle at 82% 75%,rgba(35,150,255,.04),transparent 35%);

    pointer-events:none;

}

/* ==========================================================
PROCESS GRID
========================================================== */

.engineering-process{

    position:relative;

    display:grid;

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

    gap:28px;

    margin-top:70px;

    z-index:2;

}

/* timeline */

.timeline-line{

    position:absolute;

    top:54px;

    left:10%;

    right:10%;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #4aa8ff,
        #9bd8ff,
        #4aa8ff
    );

    opacity:.35;

    z-index:1;

}

/* ==========================================================
PROCESS CARD
========================================================== */

.process-step{

    position:relative;

    z-index:2;

    background:#ffffff;

    border:1px solid #dfe9f5;

    border-radius:22px;

    min-height:360px;

    padding:34px 26px;

    text-align:center;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.process-step:hover{

    transform:translateY(-8px);

    border-color:#45a6ff;

    box-shadow:

        0 24px 55px rgba(17,39,74,.10);

}

/* ==========================================================
ICON
========================================================== */

.process-icon{

    width:94px;

    height:94px;

    margin:0 auto 26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(circle at 30% 30%,
            #214a80,
            #163763  65%,
            #10284a  100%);

    border:2px solid rgba(70,170,255,.15);

    box-shadow:

        0 14px 35px rgba(13,33,61,.15),

        inset 0 1px 0 rgba(255,255,255,.05);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.process-step:hover .process-icon{

    transform:scale(1.08);

    box-shadow:

        0 0 24px rgba(55,165,255,.25),

        0 18px 40px rgba(13,33,61,.18);

}

/* SVG */

.process-icon img{

    width:54px;

    height:54px;

    display:block;

    object-fit:contain;

}

/* ==========================================================
TEXT
========================================================== */

.process-step h3{

    margin:0 0 18px;

    font-size:1.38rem;

    font-weight:700;

    color:#0d213d;

    letter-spacing:-0.02em;

}

.process-step p{

    margin:0;

    line-height:1.9;

    color:#5f7186;

    font-size:.98rem;

}

/* ==========================================================
ENGINEERING PRINCIPLES
========================================================== */

.engineering-principles{

    margin-top:70px;

    display:grid;

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

    gap:24px;

}

.principle{

    background:#ffffff;

    border:1px solid #dfe9f5;

    border-radius:18px;

    padding:30px;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}

.principle:hover{

    transform:translateY(-5px);

    border-color:#42a7ff;

    box-shadow:

        0 18px 40px rgba(35,150,255,.10);

}

.principle h4{

    margin:0 0 14px;

    color:#0d213d;

    font-size:1.12rem;

}

.principle p{

    margin:0;

    line-height:1.8;

    color:#5f7186;

}

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

@media(max-width:1200px){

    .engineering-process{

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

    }

    .engineering-principles{

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

    }

    .timeline-line{

        display:none;

    }

}

@media(max-width:768px){

    .engineering-process{

        grid-template-columns:1fr;

    }

    .engineering-principles{

        grid-template-columns:1fr;

    }

}
/*==========================================================
ABOUT CTA
Release 2.1.8
==========================================================*/

.about-cta{

    padding:120px 0;

    background:linear-gradient(135deg,#102746,#1d3f6c);

}

.about-cta-box{

    max-width:900px;

    margin:0 auto;

    padding:70px;

    text-align:center;

    border-radius:26px;

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

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

    backdrop-filter:blur(8px);

    box-shadow:0 25px 70px rgba(0,0,0,.18);

}

.about-cta .section-tag{

    color:#4fb3ff;

}

.about-cta h2{

    margin:18px 0 26px;

    font-size:3rem;

    line-height:1.2;

    color:#ffffff;

}

.about-cta p{

    max-width:700px;

    margin:0 auto 40px;

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

    line-height:1.9;

    font-size:1.05rem;

}

.about-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.about-cta .btn-primary{

    display:inline-block;

    padding:16px 34px;

    border-radius:50px;

    background:#2497f3;

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.about-cta .btn-primary:hover{

    background:#1785df;

    transform:translateY(-3px);

}

.about-cta .btn-secondary{

    display:inline-block;

    padding:16px 34px;

    border-radius:50px;

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

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.about-cta .btn-secondary:hover{

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

}

@media(max-width:768px){

    .about-cta{

        padding:90px 0;

    }

    .about-cta-box{

        padding:50px 35px;

    }

    .about-cta h2{

        font-size:2.2rem;

    }

}