/*==================================================
ABOUT PAGE
SECTION 9 - FINAL CALL TO ACTION
Executive Blue Premium Theme

File : about-cta.css
Part 1 - Layout & Hero Area
==================================================*/


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

.cta-section{

    position:relative;

    padding:120px 0 60px;

    background:#f8fbff;

    overflow:hidden;

}


.cta-section .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 30px;

    position:relative;

    z-index:2;

}



/*==================================================
BACKGROUND
==================================================*/

.cta-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-300px;

    right:-260px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(14,73,124,.05),

        transparent 72%);

}


.cta-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    bottom:-220px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(219,46,40,.05),

        transparent 72%);

}



/*==================================================
MAIN WRAPPER
==================================================*/

.cta-wrapper{

    display:grid;

    grid-template-columns:

        1fr
        620px;

    gap:70px;

    align-items:center;

}



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

.cta-content{

    max-width:650px;

}


.cta-content .section-label{

    display:inline-block;

    margin-bottom:24px;

    padding:8px 18px;

    border-radius:40px;

    background:#edf5fc;

    color:var(--primary-blue);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}



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

.cta-content h2{

    margin:0;

    font-size:4rem;

    line-height:1.1;

    color:var(--primary-blue);

    font-weight:800;

}


.cta-content h2 span{

    color:#db2e28;

}



/*==================================================
DIVIDER
==================================================*/

.cta-divider{

    width:90px;

    height:5px;

    margin:30px 0;

    border-radius:20px;

    background:

        linear-gradient(

            90deg,

            var(--primary-blue),

            #db2e28);

}



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

.cta-highlight{

    margin-bottom:24px;

    color:#3d4f63;

    font-size:1.18rem;

    line-height:1.8;

}


.cta-content p{

    margin:0 0 22px;

    color:#5d6d82;

    font-size:1.05rem;

    line-height:1.9;

}



/*==================================================
BUTTONS
==================================================*/

.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}


.cta-buttons a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    transition:.35s;

}



/*==================================================
PRIMARY BUTTON
==================================================*/

.btn-primary{
 
    padding:16px 28px;
 
    border-radius:50px;
 
    background:var(--accent);
 
    color:#ffffff;
 
    font-weight:600;
 
}


.btn-primary:hover{
 
    transform:translateY(-3px);
 
    background:var(--accent-dark);
 
}



/*==================================================
SECONDARY BUTTON
==================================================*/

.btn-secondary{

    padding:16px 28px;

    border-radius:50px;

    background:#db2e28;

    color:#ffffff;

    font-weight:600;

}


.btn-secondary:hover{

    transform:translateY(-3px);

}



/*==================================================
OUTLINE BUTTON
==================================================*/

.btn-outline{

    padding:16px 28px;

    border-radius:50px;

    border:2px solid var(--primary-blue);

    color:var(--primary-blue);

    font-weight:600;

}


.btn-outline:hover{

    background:var(--primary-blue);

    color:#ffffff;

}



/*==================================================
BUTTON ICONS
==================================================*/

.cta-buttons img{

    width:22px;

    height:22px;

    object-fit:contain;

}



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

.cta-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}


.cta-visual img{

    width:100%;

    max-width:620px;

    display:block;

}



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

@media(max-width:1200px){

    .cta-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .cta-content{

        max-width:100%;

        margin:0 auto;

    }

    .cta-divider{

        margin:30px auto;

    }

    .cta-buttons{

        justify-content:center;

    }

    .cta-visual{

        margin-top:20px;

    }

}


@media(max-width:768px){

    .cta-section{

        padding:90px 0 50px;

    }

    .cta-content h2{

        font-size:2.7rem;

    }

    .cta-highlight{

        font-size:1.05rem;

    }

    .cta-content p{

        font-size:1rem;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .cta-buttons a{

        justify-content:center;

    }

}

/*==================================================
ABOUT PAGE HARMONIZATION
Matches index.html heading/body scale and section rhythm
==================================================*/

.about-hero-title{

    font-size:clamp(3.2rem,5.2vw,4.5rem) !important;

    line-height:1.05 !important;

}

.about-hero-introduction{

    font-size:clamp(1rem,1.2vw,1.08rem) !important;

    line-height:1.7 !important;

}

.our-story,
.beliefs,
.technology-journey,
.about-approach,
.founder-section,
.team-section,
.impact-section,
.cta-section{

    padding:42px 0 !important;

}

.our-story .section-header,
.beliefs .section-header,
.technology-journey .section-header,
.approach-header,
.founder-header,
.team-header,
.impact-header{

    margin:0 auto 56px !important;

}

.our-story .section-title,
.beliefs .section-title,
.technology-journey .section-title,
.approach-header h2,
.founder-header h2,
.team-header h2,
.impact-header h2,
.cta-content h2{

    font-size:clamp(2.2rem,3.4vw,3.15rem) !important;

    line-height:1.15 !important;

}

.our-story .section-description,
.beliefs .section-description p,
.journey-intro p,
.approach-header p,
.founder-header p,
.team-header p,
.impact-header p,
.section-description,
.closing-intro,
.cta-highlight,
.cta-content p{

    font-size:clamp(1rem,1.2vw,1.08rem) !important;

    line-height:1.7 !important;

}

/*==================================================
ABOUT PAGE
SECTION 9
Part 2 - Impact Strip & Footer
==================================================*/


/*==================================================
IMPACT STRIP
==================================================*/

.cta-impact-strip{

    margin-top:80px;

    display:grid;

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

    background:var(--primary-blue);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(14,73,124,.18);

}


.impact-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px 30px;

    border-right:1px solid rgba(255,255,255,.10);

    transition:.35s ease;

}


.impact-item:last-child{

    border-right:none;

}


.impact-item:hover{

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

}



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

.cta-impact-strip .impact-icon{

    width:62px;

    height:62px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}


.cta-impact-strip .impact-icon img{

    width:30px;

    height:30px;

    object-fit:contain;

}



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

.impact-text h3{

    margin:0 0 4px;

    color:#ffffff;

    font-size:1.7rem;

    font-weight:700;

    line-height:1.1;

}


.impact-text p{

    margin:0;

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

    font-size:.92rem;

    line-height:1.5;

}



/*==================================================
FOOTER
==================================================*/

.cta-footer{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:60px;

    text-align:center;

}


.footer-line{

    flex:1;

    max-width:140px;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary-blue),
        transparent);

    opacity:.25;

}


.cta-footer h3{

    margin:0;

    font-size:2rem;

    font-weight:700;

    color:var(--primary-blue);

    line-height:1.3;

}


.cta-footer h3 span{

    color:#db2e28;

}



/*==================================================
BUTTON POLISH
==================================================*/

.btn-primary,
.btn-secondary,
.btn-outline{

    box-shadow:
        0 10px 25px rgba(15,42,85,.10);

}


.btn-primary:hover{

    box-shadow:
        0 16px 35px rgba(14,73,124,.22);

}


.btn-secondary:hover{

    box-shadow:
        0 16px 35px rgba(219,46,40,.22);

}


.btn-outline:hover{

    box-shadow:
        0 16px 35px rgba(14,73,124,.18);

}



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

.cta-visual img{

    filter:
        drop-shadow(0 20px 45px rgba(15,42,85,.15));

}



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

@media(max-width:1200px){

    .cta-impact-strip{

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

    }

    .impact-item:nth-child(2){

        border-right:none;

    }

    .impact-item{

        border-bottom:1px solid rgba(255,255,255,.10);

    }

    .impact-item:nth-last-child(-n+2){

        border-bottom:none;

    }

}


@media(max-width:768px){

    .cta-impact-strip{

        grid-template-columns:1fr;

        margin-top:60px;

    }

    .impact-item{

        border-right:none;

        border-bottom:1px solid rgba(255,255,255,.10);

        padding:24px;

    }

    .impact-item:last-child{

        border-bottom:none;

    }

    .cta-footer{

        flex-direction:column;

        gap:18px;

        margin-top:45px;

    }

    .footer-line{

        max-width:80px;

    }

    .cta-footer h3{

        font-size:1.6rem;

    }

}