/*==================================================
ABOUT PAGE
SECTION 8 - OUR IMPACT
Executive Blue Premium Theme

File : about-impact.css
Part 1 - Layout Foundation
==================================================*/


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

.impact-section{

    position:relative;

    padding:92px 0;

    background:#ffffff;

    overflow:hidden;

}


.impact-section .container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:0 auto;

    padding:0 30px;

}



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

.impact-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-320px;

    right:-320px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 72%);

}


.impact-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    bottom:-220px;

    left:-220px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 72%);

}



/*==================================================
HEADER
==================================================*/

.impact-header{

    max-width:980px;

    margin:0 auto 52px;

    text-align:center;

}


.impact-header .section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:24px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.85rem;

    font-weight:700;

    color:var(--primary-blue);

}


.impact-header .section-label::before,
.impact-header .section-label::after{

    content:"";

    width:70px;

    height:2px;

    background:var(--primary-blue);

    opacity:.30;

}


.impact-header h2{

    margin:0;

    font-size:3.3rem;

    line-height:1.15;

    color:var(--primary-blue);

}


.impact-header p{

    margin:18px auto 0;

    max-width:900px;

    font-size:1.08rem;

    line-height:1.7;

    color:#5d6d82;

}



/*==================================================
COMMON SECTION TITLE
==================================================*/

.impact-section-title,
.impact-closing-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-bottom:20px;

    text-align:center;

}


.title-line{

    flex:1;

    max-width:100px;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--primary-blue),

        transparent);

    opacity:.30;

}


.impact-section-title h3,
.impact-closing-header h3{

    margin:0;

    font-size:2.2rem;

    color:var(--primary-blue);

}



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

.section-description,
.closing-intro{

    max-width:920px;

    margin:0 auto 34px;

    text-align:center;

    color:#5d6d82;

    font-size:1.05rem;

    line-height:1.7;

}



/*==================================================
CONTENT BLOCK SPACING
==================================================*/

.impact-card-section{

    margin-bottom:64px;

}


.impact-logo-section{

    margin-bottom:64px;

}


.industry-section{

    margin-bottom:64px;

}


.impact-closing{

    margin-top:20px;

}



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

.impact-grid{

    display:grid;

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

    gap:20px;

}



/*==================================================
CLIENT LOGO GRID
==================================================*/

.client-logo-grid{

    display:grid;

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

    gap:20px;

    align-items:center;

}

.client-logo-more{

    margin:20px 0 0;

    text-align:center;

    font-weight:800;

    font-size:clamp(1.05rem,1.6vw,1.3rem);

    color:#0B3D91;

    letter-spacing:.02em;

    text-transform:uppercase;

}



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

.industry-grid{

    display:grid;

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

    gap:20px;

}



/*==================================================
QUOTE WRAPPER
==================================================*/

.impact-quote-wrapper{

    display:grid;

    grid-template-columns:

        220px
        minmax(0,1fr)
        220px;

    gap:40px;

    align-items:center;

}



/*==================================================
FINAL MESSAGE
==================================================*/

.impact-final-message{

    margin-top:42px;

    text-align:center;

}



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

@media(max-width:1200px){

    .impact-grid{

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

    }

    .client-logo-grid{

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

    }

    .industry-grid{

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

    }

    .impact-quote-wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

}



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

@media(max-width:992px){

    .impact-grid{

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

    }

    .client-logo-grid{

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

    }

    .industry-grid{

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

    }

}



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

@media(max-width:768px){

    .impact-section{

        padding:64px 0;

    }

    .impact-header{

        margin-bottom:34px;

    }

    .impact-header h2{

        font-size:2.4rem;

    }

    .impact-header p{

        font-size:1rem;

        line-height:1.8;

    }

    .impact-header .section-label::before,
    .impact-header .section-label::after{

        width:40px;

    }

    .impact-section-title h3,
    .impact-closing-header h3{

        font-size:1.8rem;

    }

    .impact-grid{

        grid-template-columns:1fr;

    }

    .client-logo-grid{

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

        gap:20px;

    }

    .industry-grid{

        grid-template-columns:1fr;

    }

    .impact-card-section,
    .impact-logo-section,
    .industry-section{

        margin-bottom:42px;

    }

}

/*==================================================
ABOUT PAGE
SECTION 8
Part 2
Impact Statistics Cards
==================================================*/


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

.impact-card{

    position:relative;

    padding:28px 22px;

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

    backdrop-filter:blur(14px);

    border:1px solid rgba(224,235,246,.95);

    border-radius:24px;

    overflow:hidden;

    text-align:center;

    transition:.45s ease;

}


.impact-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 65px rgba(15,42,85,.14);

}



/*==================================================
TOP ACCENT
==================================================*/

.impact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #0E497C,

        #1E73BE);

}



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

.impact-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

        transparent 72%);

}



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

.impact-icon{

    position:relative;

    width:78px;

    height:78px;

    margin:0 auto 18px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

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

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

    transition:.4s;

}


.impact-icon::before{

    content:"";

    position:absolute;

    width:96px;

    height:96px;

    border-radius:50%;

    background:

        radial-gradient(circle,

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

            transparent 72%);

    z-index:1;

    transition:.4s;

}


.impact-card:hover .impact-icon{

    transform:scale(1.08);

}


.impact-card:hover .impact-icon::before{

    transform:scale(1.15);

}



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

.impact-icon img{

    position:relative;

    z-index:2;

    width:40px;

    height:40px;

    object-fit:contain;

    transition:.4s;

}


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

    transform:rotate(6deg) scale(1.08);

}



/*==================================================
NUMBER
==================================================*/

.impact-number{

    margin-bottom:10px;

    font-size:2.6rem;

    font-weight:800;

    line-height:1;

    color:var(--primary-blue);

    letter-spacing:-1px;

}


.impact-number span{

    color:#db2e28;

}



/*==================================================
TITLE
==================================================*/

.impact-card h4{

    margin:0 0 10px;

    color:var(--primary-blue);

    font-size:1.25rem;

    line-height:1.35;

}



/*==================================================
DESCRIPTION
==================================================*/

.impact-card p{

    margin:0;

    color:#5d6d82;

    line-height:1.65;

    font-size:.96rem;

}



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

.impact-card{

    transition:

        transform .45s,

        box-shadow .45s,

        border-color .45s;

}


.impact-card:hover{

    border-color:#d3e3f5;

}



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

@media(max-width:1200px){

    .impact-card{

        padding:24px 20px;

    }

    .impact-number{

        font-size:2.7rem;

    }

}


@media(max-width:768px){

    .impact-card{

        padding:22px 18px;

    }

    .impact-icon{

        width:84px;

        height:84px;

    }

    .impact-icon img{

        width:42px;

        height:42px;

    }

    .impact-number{

        font-size:2.5rem;

    }

    .impact-card h4{

        font-size:1.15rem;

    }

}

/*==================================================
ABOUT PAGE
SECTION 8
Part 3
Client Logos & Industries
==================================================*/


/*==================================================
CLIENT LOGO CARD
==================================================*/

.client-logo{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:132px;

    padding:22px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(224,235,246,.95);

    border-radius:22px;

    overflow:hidden;

    transition:.40s ease;

}


.client-logo:hover{

    transform:translateY(-8px);

    border-color:#d2e2f4;

    box-shadow:

        0 22px 55px rgba(15,42,85,.12);

}


.client-logo::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #0E497C,

        #1E73BE);

}


.client-logo::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:

        radial-gradient(circle,

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

            transparent 72%);

}



/*==================================================
CLIENT LOGO IMAGE
==================================================*/

.client-logo img{

    height:auto;

    display:block;

    margin:0 auto;

    object-fit:contain;

}


.client-logo:hover img{

    filter:none;

    transform:scale(1.08);

}

/*==================================================
CLIENT LOGO INDIVIDUAL SIZES
==================================================*/

.logo-reliance-industries{

    width:120px;

}

.logo-reliance-foundation{

    width:160px;

}

.logo-kpil{

    width:220px;

}

.logo-thermax{

    width:115px;

}

.logo-finolex{

    width:200px;

}

.logo-cie{

    width:200px;

}

.logo-smbt{

    width:200px;

}

.logo-tata{

    width:110px;

}

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

.industry-card{

    position:relative;

    padding:26px 22px;

    text-align:center;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(224,235,246,.95);

    border-radius:22px;

    overflow:hidden;

    transition:.40s ease;

}


.industry-card:hover{

    transform:translateY(-8px);

    border-color:#d2e2f4;

    box-shadow:

        0 24px 58px rgba(15,42,85,.13);

}


.industry-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #0E497C,

        #1E73BE);

}


.industry-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    bottom:-90px;

    border-radius:50%;

    background:

        radial-gradient(circle,

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

            transparent 72%);

}



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

.industry-card img{

    width:60px;

    height:60px;

    object-fit:contain;

    margin-bottom:16px;

    transition:.40s;

}


.industry-card:hover img{

    transform:

        translateY(-4px)

        scale(1.08);

}



/*==================================================
INDUSTRY TITLE
==================================================*/

.industry-card h4{

    margin:0;

    color:var(--primary-blue);

    font-size:1.10rem;

    line-height:1.55;

    font-weight:700;

}



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

@media(max-width:1200px){

    .client-logo{

        height:122px;

    }

    .client-logo img{

        max-width:135px;

        max-height:60px;

    }

    .industry-card{

        padding:22px 20px;

    }

}


@media(max-width:768px){

    .client-logo{

        height:108px;

        padding:16px;

    }

    .client-logo img{

        max-width:120px;

        max-height:55px;

    }

    .industry-card{

        padding:20px 18px;

    }

    .industry-card img{

        width:60px;

        height:60px;

        margin-bottom:18px;

    }

    .industry-card h4{

        font-size:1rem;

    }

}

/*==================================================
ABOUT PAGE
SECTION 8
Part 4
Beyond the Numbers & Closing
==================================================*/


/*==================================================
BEYOND THE NUMBERS PANEL
==================================================*/

.impact-closing{

    position:relative;

    padding:42px 34px;

    background:linear-gradient(
        135deg,
        #0E497C,
        #195B95);

    border-radius:34px;

    overflow:hidden;

    box-shadow:
        0 35px 90px rgba(15,42,85,.22);

}


.impact-closing::before{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-200px;

    top:-200px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.10),
        transparent 72%);

}


.impact-closing::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.07),
        transparent 72%);

}



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

.impact-closing-header{

    position:relative;

    z-index:2;

}


.impact-closing-header h3{

    color:#ffffff;

}


.impact-closing-header .title-line{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent);

}


.closing-intro{

    position:relative;

    z-index:2;

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

}



/*==================================================
SIDE ILLUSTRATIONS
==================================================*/

.quote-side{

    display:flex;

    justify-content:center;

    align-items:center;

}


.quote-image{

    width:140px;

    height:140px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    backdrop-filter:blur(10px);

    transition:.4s;

}


.quote-image:hover{

    transform:scale(1.05);

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

}


.quote-image img{

    width:92px;

    height:92px;

    object-fit:contain;

}



/*==================================================
QUOTE PANEL
==================================================*/

.quote-panel{

    position:relative;

    z-index:2;

    padding:38px 34px;

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

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

    backdrop-filter:blur(14px);

    border-radius:28px;

    text-align:center;

}


.quote-left{

    position:absolute;

    left:30px;

    top:25px;

    width:36px;

    opacity:.25;

}


.quote-right{

    position:absolute;

    right:30px;

    bottom:25px;

    width:36px;

    opacity:.25;

}



/*==================================================
QUOTE
==================================================*/

.quote-panel blockquote{

    margin:0;

    color:#ffffff;

    font-size:1.6rem;

    line-height:1.45;

    font-weight:700;

}


.quote-highlight{

    color:#ffffff;

}


.quote-accent{

    color:#ffdb26;

}



/*==================================================
FINAL MESSAGE
==================================================*/

.impact-final-message{

    position:relative;

    z-index:2;

    margin-top:42px;

    padding-top:30px;

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

}


.impact-final-message h3{

    margin:0 0 20px;

    color:#ffffff;

    font-size:2.3rem;

}


.impact-final-message p{

    max-width:850px;

    margin:0 auto;

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

    font-size:1.05rem;

    line-height:1.9;

}



/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.client-logo,
.industry-card,
.impact-card,
.quote-image{

    transition:all .35s ease;

}



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

@media(max-width:1200px){

    .impact-closing{

        padding:34px 28px;

    }

}


@media(max-width:992px){

    .quote-side{

        display:none;

    }

    .quote-panel{

        padding:32px 24px;

    }

}


@media(max-width:768px){

    .impact-closing{

        padding:24px 18px;

        border-radius:24px;

    }

    .quote-panel{

        padding:26px 18px;

    }

    .quote-panel blockquote{

        font-size:1.45rem;

    }

    .impact-final-message{

        margin-top:28px;

        padding-top:24px;

    }

    .impact-final-message h3{

        font-size:1.8rem;

    }

    .impact-final-message p{

        font-size:1rem;

    }

    .quote-left,
    .quote-right{

        width:26px;

    }

}