/* ======================================================
   SEAN B SOLUTIONS
   ABOUT HERO SECTION
   Premium Corporate Layout
====================================================== */


#about-page{

    overflow:hidden;

}




#about-page .container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





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


.about-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#ffffff;

}





/* BACKGROUND */

.about-hero-background{

    position:absolute;

    inset:0;

    background-image:

    url("/assets/images/projects-cover.jpg");

    background-size:cover;

    background-position:center;

    z-index:1;

}





/* OVERLAY ONLY FOR ABOUT */

.about-hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(11,31,58,.96),
        rgba(11,31,58,.78),
        rgba(11,31,58,.45)
    );

    z-index:2;

}







/* CONTENT AREA */

.about-hero .container{

    position:relative;

    z-index:3;

}





.about-hero-wrapper{

    display:flex;

    align-items:center;

}





.about-hero-content{

    max-width:850px;

    padding:120px 0;

}








/* TAG */

.about-hero .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 24px;

    border-radius:50px;

    background:rgba(230,0,0,.15);

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

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    margin-bottom:30px;

    backdrop-filter:blur(10px);

}





.about-hero .section-tag i{

    color:#e60000;

}








/* TITLE */


.about-hero h1{


    font-size:clamp(40px,5vw,68px);

    line-height:1.08;

    font-weight:900;

    letter-spacing:-1.5px;

    margin-bottom:25px;

    color:#ffffff;


}




.about-hero h1 span{

    color:#e60000;

}







/* DESCRIPTION */


.about-hero p{


    max-width:760px;

    font-size:18px;

    line-height:1.85;

    color:#f1f5f9;

    margin-bottom:40px;


}







/* BUTTONS */


.about-hero-buttons{


    display:flex;

    gap:18px;

    flex-wrap:wrap;

}




.about-hero-buttons a{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:10px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;


}




.about-btn-primary{


    background:#e60000;

    color:#ffffff;


}



.about-btn-primary:hover{


    transform:translateY(-4px);

    background:#c90000;


}




.about-btn-secondary{


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

    color:#ffffff;

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

    backdrop-filter:blur(8px);


}



.about-btn-secondary:hover{


    background:#ffffff;

    color:#0b1f3a;


}







/* ======================================================
   HERO STAT CARDS
====================================================== */


.about-hero-stats{


    display:flex;

    gap:25px;

    margin-top:55px;

    flex-wrap:wrap;


}




.about-stat{


    min-width:180px;

    padding:22px 25px;

    border-radius:16px;

    background:

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

    border:

    1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(12px);


}





.about-stat strong{


    display:block;

    font-size:38px;

    font-weight:900;

    color:#ffffff;

    line-height:1;


}





.about-stat span{


    display:block;

    margin-top:10px;

    font-size:14px;

    color:#e2e8f0;

    font-weight:600;


}








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


@media(max-width:992px){


.about-hero{

    min-height:650px;

}



.about-hero h1{

    font-size:48px;

}



.about-hero-content{

    padding:100px 0;

}


}








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


@media(max-width:768px){


.about-hero{

    min-height:auto;

}



.about-hero-content{


    padding:120px 0 70px;

    text-align:center;


}



.about-hero h1{


    font-size:36px;


}



.about-hero h1 span{


    display:inline;


}




.about-hero p{


    font-size:16px;


}




.about-hero-buttons{


    justify-content:center;


}



.about-hero-buttons a{


    width:100%;


}




.about-hero-stats{


    justify-content:center;


}



.about-stat{


    width:100%;

    max-width:280px;


}



}







@media(max-width:480px){



.about-hero h1{


    font-size:30px;


}



.about-hero .section-tag{


    font-size:12px;


}



.about-stat strong{


    font-size:30px;


}


}

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


.hero-stats{

    display:flex;

    gap:55px;

    margin-top:55px;

    flex-wrap:wrap;

}



.hero-stat{

    display:flex;

    flex-direction:column;

}



.hero-stat strong{

    font-size:36px;

    font-weight:800;

}



.hero-stat span{

    font-size:14px;

    color:#d1d5db;

}





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


.about-section{

    padding:100px 0;

    background:#fff;

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.about-content p{

    color:#475569;

    line-height:1.8;

}



.about-badge,

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#e60000;

    font-weight:700;

    margin-bottom:20px;

}



.section-title{

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    color:#0b1f3a;

}



.section-title span{

    color:#e60000;

}



.about-features{

    margin:35px 0;

    display:grid;

    gap:20px;

}



.about-feature{

    display:flex;

    gap:18px;

    padding:18px;

    background:#f5f7fa;

    border-radius:12px;

}



.about-feature i{

    font-size:28px;

    color:#e60000;

}



.about-feature h4{

    margin:0;

    color:#0b1f3a;

}



.about-feature span{

    color:#64748b;

}





.about-image{

    position:relative;

}



.image-wrapper img{

    width:100%;

    border-radius:20px;

    display:block;

}



.experience-card{

    position:absolute;

    bottom:25px;

    left:-25px;

    background:#0b1f3a;

    color:#fff;

    padding:25px;

    border-radius:15px;

}



.experience-card strong{

    display:block;

    font-size:36px;

    color:#e60000;

}





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


.mission-section{

    padding:100px 0;

    background:#f5f7fa;

}



.mission-grid{

    display:grid;

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

    gap:30px;

}



.mission-card{

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}



.mission-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b1f3a;

    color:#fff;

    border-radius:50%;

    font-size:24px;

    margin-bottom:20px;

}





/* ======================================================
   WHY CHOOSE
====================================================== */


.why-section{

    padding:100px 0;

    background:#fff;

}



.why-grid{

    display:grid;

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

    gap:25px;

}



.why-card{

    padding:30px;

    border-radius:15px;

    background:#f5f7fa;

    transition:.3s;

}



.why-card:hover{

    transform:translateY(-8px);

}



.why-icon{

    font-size:35px;

    color:#e60000;

    margin-bottom:20px;

}





/* ======================================================
   TEAM
====================================================== */


.team-section{

    padding:100px 0;

    background:#f5f7fa;

}



.team-grid{

    display:grid;

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

    gap:30px;

}



.team-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    text-align:center;

}



.team-image img{

    width:130px;

    height:130px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:20px;

}



.team-role{

    color:#e60000;

    font-weight:700;

}





/* ======================================================
   PROFESSIONAL STATISTICS SECTION
   Sean B Solutions
====================================================== */


.stats-section{

    padding:110px 0;

    background:
    linear-gradient(
        135deg,
        #0b1f3a,
        #102d52
    );

    color:#ffffff;

    position:relative;

    overflow:hidden;

}





.stats-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

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

    border-radius:50%;

    top:-200px;

    right:-150px;

}





.stats-section .container{

    position:relative;

    z-index:2;

}






/* GRID */

.stats-grid{

    display:grid;

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

    gap:30px;

}






/* CARD */

.stat-card{

    text-align:center;

    padding:35px 25px;

    border-radius:18px;

    background:

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

    border:

    1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    transition:.35s ease;

}





.stat-card:hover{

    transform:translateY(-8px);

    background:

    rgba(255,255,255,.14);

}





/* NUMBER */

.stat-card h2{

    margin:0 0 12px;

    font-size:52px;

    line-height:1;

    font-weight:900;

    color:#e60000;

    letter-spacing:-1px;

}





/* TITLE */

.stat-card h3{

    margin:0 0 10px;

    font-size:20px;

    font-weight:700;

    color:#ffffff;

}





/* DESCRIPTION */

.stat-card p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#dbeafe;

}



.stats-section .section-description{

    color:#000000;

    font-size:18px;

    font-weight:600;

    line-height:1.8;

}

/* ICON */

.stat-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:55px;

    height:55px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#e60000;

    color:#ffffff;

    font-size:22px;

}







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


@media(max-width:992px){


.stats-grid{

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

}


}




@media(max-width:600px){


.stats-section{

    padding:80px 0;

}



.stats-grid{

    grid-template-columns:1fr;

}



.stat-card h2{

    font-size:42px;

}


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


.about-cta{

    padding:100px 0;

}



.cta-content{

    background:#0b1f3a;

    color:#fff;

    padding:60px;

    border-radius:25px;

    text-align:center;

}



.cta-content span{

    color:#e60000;

}




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


@media(max-width:992px){


.about-grid,

.mission-grid,

.team-grid,

.stats-grid{

    grid-template-columns:1fr 1fr;

}



.why-grid{

    grid-template-columns:1fr 1fr;

}



}



@media(max-width:768px){


.about-hero{

    min-height:auto;

}



.about-hero .hero-content{

    text-align:center;

    padding:120px 0 70px;

}



.hero-actions{

    justify-content:center;

}



.hero-btn{

    width:100%;

}



.hero-stats{

    justify-content:center;

}



.about-grid,

.mission-grid,

.team-grid,

.stats-grid,

.why-grid{

    grid-template-columns:1fr;

}



.section-title{

    font-size:32px;

}



.experience-card{

    position:relative;

    left:0;

    bottom:0;

    margin-top:20px;

}



.cta-content{

    padding:35px 20px;

}


}



@media(max-width:480px){


.about-hero h1{

    font-size:32px;

}



.hero-stat strong{

    font-size:28px;

}


}

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


.about-company-section{

    padding:100px 0;

    background:#ffffff;

}



.about-company-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}





.about-company-content p{

    color:#475569;

    font-size:16px;

    line-height:1.8;

    margin-bottom:18px;

}



.about-lead{

    font-size:18px !important;

    color:#334155 !important;

    font-weight:500;

}





.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#e60000;

    font-size:15px;

    font-weight:700;

    margin-bottom:20px;

}





.section-title{

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    color:#0b1f3a;

    margin-bottom:25px;

}



.section-title span{

    color:#e60000;

    display:block;

}







/* FEATURES */


.about-feature-list{

    display:grid;

    gap:18px;

    margin:35px 0;

}



.about-feature-item{

    display:flex;

    align-items:center;

    gap:18px;

    background:#f5f7fa;

    padding:18px;

    border-radius:14px;

    transition:.3s;

}



.about-feature-item:hover{

    transform:translateX(8px);

}





.feature-icon{

    width:55px;

    height:55px;

    background:#0b1f3a;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    font-size:22px;

}



.about-feature-item h4{

    color:#0b1f3a;

    margin:0 0 5px;

}



.about-feature-item span{

    color:#64748b;

    font-size:14px;

}







/* BUTTON */


.about-action-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#e60000;

    color:#fff;

    padding:15px 30px;

    border-radius:8px;

    font-weight:700;

    transition:.3s;

}



.about-action-btn:hover{

    transform:translateY(-3px);

}








/* IMAGE */


.about-company-image{

    position:relative;

}



.image-container img{

    width:100%;

    border-radius:20px;

    display:block;

}





.experience-box{

    position:absolute;

    bottom:30px;

    left:-30px;

    background:#0b1f3a;

    color:#fff;

    padding:25px 35px;

    border-radius:15px;

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

}



.experience-box strong{

    display:block;

    font-size:42px;

    color:#e60000;

}



.experience-box span{

    font-size:14px;

}





/* MOBILE */


@media(max-width:900px){


.about-company-grid{

    grid-template-columns:1fr;

    gap:40px;

}



.about-company-content{

    text-align:center;

}



.section-title{

    font-size:34px;

}



.about-feature-item{

    text-align:left;

}



.experience-box{

    position:relative;

    left:0;

    bottom:0;

    margin-top:20px;

    display:inline-block;

}


}

/* ======================================================
   MISSION VISION VALUES SECTION
====================================================== */


.mission-section{

    padding:100px 0;

    background:#f5f7fa;

}




.mission-header{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

}



.section-description{

    color:#64748b;

    font-size:17px;

    line-height:1.8;

}







/* GRID */


.mission-grid{

    display:grid;

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

    gap:30px;

}







/* CARD */


.mission-card{

    background:#ffffff;

    padding:40px 35px;

    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(11,31,58,.08);

    transition:.35s ease;

    border-top:4px solid transparent;

}





.mission-card:hover{

    transform:translateY(-10px);

    border-color:#e60000;

}






/* ICON */


.mission-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:20px;

    overflow:hidden;

    background:#f8fafc;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 10px 30px rgba(11,31,58,.12);

}



.mission-icon img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s ease;

}



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

    transform:scale(1.08);

}





/* LABEL */


.mission-label{

    display:inline-block;

    color:#e60000;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:12px;

}







.mission-card h3{

    color:#0b1f3a;

    font-size:24px;

    line-height:1.3;

    margin-bottom:18px;

}





.mission-card p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}







/* VALUES LIST */


.values-list{

    list-style:none;

    padding:0;

    margin:20px 0 0;

}



.values-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#475569;

    font-weight:500;

}



.values-list i{

    color:#e60000;

    font-size:18px;

}







/* RESPONSIVE */


@media(max-width:992px){


.mission-grid{

    grid-template-columns:1fr 1fr;

}



}



@media(max-width:768px){


.mission-section{

    padding:70px 0;

}



.mission-grid{

    grid-template-columns:1fr;

}



.mission-header{

    margin-bottom:40px;

}



.mission-card{

    padding:30px 25px;

}



.mission-card h3{

    font-size:21px;

}


}

/* ======================================================
   WHY CHOOSE US SECTION
====================================================== */


.why-section{

    padding:100px 0;

    background:#ffffff;

}




.why-header{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

}





.why-grid{

    display:grid;

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

    gap:25px;

}





.why-card{

    background:#ffffff;

    padding:22px;

    border-radius:20px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:0 8px 25px rgba(11,31,58,.08);

    border:1px solid #edf2f7;

}



.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#e60000;

    transform:scaleX(0);

    transition:.35s ease;

}





.why-card:hover::before{

    transform:scaleX(1);

}





.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(11,31,58,.16);

}




/* ==========================================
   WHY CARD IMAGE
========================================== */

.why-image{

    position:relative;

    width:100%;

    height:220px;

    margin:0 0 25px;

    overflow:hidden;

    border-radius:16px;

    background:#e9eef5;

    box-shadow:0 12px 30px rgba(11,31,58,.12);

}



.why-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;

}



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

    transform:scale(1.08);

}



/* Optional gradient overlay */

.why-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(11,31,58,.15),
        transparent 45%
    );

    pointer-events:none;

}


.why-card h3{

    color:#0b1f3a;

    font-size:24px;

    font-weight:800;

    margin-bottom:15px;

    line-height:1.3;

}



.why-card p{

    color:#64748b;

    font-size:16px;

    line-height:1.8;

}




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

@media (max-width:1200px){

    .why-grid{

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

        gap:24px;

    }

}


@media (max-width:992px){

    .why-section{

        padding:80px 0;

    }

    .why-header{

        margin-bottom:45px;

    }

    .why-image{

        height:220px;

    }

    .why-card{

        padding:24px;

    }

    .why-card h3{

        font-size:22px;

    }

    .why-card p{

        font-size:15px;

    }

}


@media (max-width:768px){

    .why-section{

        padding:70px 0;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .why-header{

        margin-bottom:35px;

    }

    .why-card{

        padding:24px;

        text-align:center;

    }

    .why-image{

        height:240px;

        border-radius:14px;

    }

    .why-card h3{

        font-size:21px;

    }

    .why-card p{

        font-size:15px;

        line-height:1.7;

    }

}


@media (max-width:576px){

    .why-section{

        padding:60px 0;

    }

    .why-image{

        height:200px;

    }

    .why-card{

        padding:20px;

        border-radius:16px;

    }

    .why-card h3{

        font-size:20px;

    }

    .why-card p{

        font-size:14px;

        line-height:1.7;

    }

}


@media (max-width:400px){

    .why-image{

        height:180px;

    }

    .why-card{

        padding:18px;

    }

    .why-card h3{

        font-size:18px;

    }

    .why-card p{

        font-size:14px;

    }

}

/* ======================================================
   LEADERSHIP TEAM
====================================================== */

.team-section{

    padding:100px 0;

    background:#f5f7fa;

}



.team-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}



.team-grid{

    display:grid;

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

    gap:30px;

}



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

.team-card{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    text-align:center;

    box-shadow:0 12px 35px rgba(11,31,58,.08);

    transition:.35s ease;

    border:1px solid #eef2f7;

}



.team-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(11,31,58,.16);

}



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

.team-image{

    position:relative;

    width:100%;

    height:320px;

    overflow:hidden;

}



.team-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;

}



.team-card:hover .team-image img{

    transform:scale(1.08);

}



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

.team-role{

    display:inline-block;

    margin:25px 0 12px;

    padding:8px 18px;

    border-radius:50px;

    background:#e60000;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.team-card h3{

    color:#0b1f3a;

    font-size:24px;

    font-weight:800;

    margin:0 20px 15px;

}



.team-card p{

    color:#64748b;

    font-size:15px;

    line-height:1.8;

    padding:0 25px;

    margin-bottom:30px;

}



/* ======================================================
   SOCIAL LINKS
====================================================== */

.team-socials{

    display:flex;

    justify-content:center;

    gap:15px;

    padding:0 25px 30px;

}



.team-socials a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#0b1f3a;

    color:#ffffff;

    transition:.3s ease;

}



.team-socials a:hover{

    background:#e60000;

    transform:translateY(-4px);

}



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

@media (max-width:1200px){

    .team-grid{

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

    }

}



@media (max-width:768px){

    .team-section{

        padding:70px 0;

    }

    .team-header{

        margin-bottom:40px;

    }

    .team-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .team-image{

        height:300px;

    }

    .team-card h3{

        font-size:22px;

    }

    .team-card p{

        padding:0 20px;

    }

}



@media (max-width:480px){

    .team-image{

        height:260px;

    }

    .team-card{

        border-radius:16px;

    }

    .team-role{

        font-size:12px;

        padding:7px 16px;

    }

    .team-card h3{

        font-size:20px;

    }

    .team-card p{

        font-size:14px;

        line-height:1.7;

    }

    .team-socials{

        padding-bottom:25px;

    }

}

/* ======================================================
   COMPANY STATISTICS
====================================================== */

.stats-section{

    padding:100px 0;

    background:#ffffff;

}

.stats-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-card{

    background:#f8fafc;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    border:1px solid #edf2f7;

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(11,31,58,.12);

}

.stat-number{

    font-size:54px;

    font-weight:800;

    color:#e60000;

    line-height:1;

    margin-bottom:20px;

}

.stat-card h3{

    color:#0b1f3a;

    font-size:22px;

    margin-bottom:15px;

}

.stat-card p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}


/* Responsive */

@media(max-width:1100px){

    .stats-grid{

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

    }

}

@media(max-width:768px){

    .stats-section{

        padding:70px 0;

    }

    .stats-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .stat-card{

        padding:30px 25px;

    }

    .stat-number{

        font-size:46px;

    }

    .stat-card h3{

        font-size:20px;

    }

}

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

.about-cta{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
    linear-gradient(
        rgba(7,18,35,.94),
        rgba(7,18,35,.94)
    ),
    url("/assets/images/about/about-cta.webp")
    center center / cover no-repeat;

    color:#ffffff;

}

.cta-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.35)
        ),
        radial-gradient(
            circle at top right,
            rgba(230,0,0,.18),
            transparent 45%
        );

    z-index:1;

}

.about-cta .container{

    position:relative;

    z-index:2;

}

.cta-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border-radius:50px;

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

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

    color:#ffffff;

    font-weight:700;

    letter-spacing:.3px;

    margin-bottom:28px;

}
.cta-content h2{

    color:#ffffff;

    font-size:clamp(38px,5vw,60px);

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);

}

.cta-content h2 span{

    color:#ffffff;

    display:block;

}

.cta-content p{

    max-width:760px;

    margin:0 auto 45px;

    font-size:18px;

    line-height:1.9;

    color:#f1f5f9;

    text-shadow:
        0 1px 4px rgba(0,0,0,.45);

}

.cta-buttons .btn{

    min-width:220px;

    padding:16px 34px;

    font-weight:700;

    border-radius:8px;

}

.cta-buttons .btn-primary{

    background:#e60000;

    color:#ffffff;

    box-shadow:0 12px 30px rgba(230,0,0,.30);

}

.cta-buttons .btn-secondary{

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

    border:2px solid #ffffff;

    color:#ffffff;

}

.cta-buttons .btn-secondary:hover{

    background:#ffffff;

    color:#0b1f3a;

}

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

@media(max-width:768px){

    .about-cta{

        padding:80px 0;

    }

    .cta-content h2{

        font-size:34px;

    }

    .cta-content p{

        font-size:16px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons .btn{

        width:100%;

        max-width:340px;

    }

}