/* =====================================
   PAGE BANNER
===================================== */

.page-banner{

    position:relative;

    height:450px;

    background:
    url('../images/about-banner.jpg')
    center center/cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

}

.banner-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(6,58,89,.88),
        rgba(14,125,159,.75)
    );

}

.banner-content{

    position:relative;
    z-index:2;

    text-align:center;
    color:white;

}

.banner-content h1{

    font-size:4rem;
    margin-bottom:15px;

}

.banner-content p{

    font-size:1.2rem;

}

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

.company-overview{

    background:white;

}

.overview-grid{

    display:grid;
    grid-template-columns:45% 55%;
    gap:80px;
    align-items:center;

}

.overview-image img{

    width:100%;
    max-height:550px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.section-subtitle{

    color:var(--primary-green);

    font-weight:600;

    letter-spacing:1px;
    text-transform:uppercase;

}

.overview-text h2{

    font-size:2.7rem;

    color:var(--primary-dark);

    margin-top:15px;
    margin-bottom:25px;

}

.overview-text p{

    margin-bottom:20px;

    color:var(--gray);

}

.overview-text{

    max-width:650px;

}

.overview-text p{

    margin-bottom:25px;

    color:var(--gray);

    text-align:justify;

}

.overview-points{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.overview-points div{

    background:#f8fbfc;

    padding:15px 20px;

    border-radius:10px;

}

.overview-points div{

    font-weight:500;

}

.overview-points i{

    color:var(--primary-green);

    margin-right:8px;

}

/* =====================================
   VISION MISSION
===================================== */

.vision-mission{

    background:var(--light);

}

.vm-grid{

    display:grid;

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

    gap:40px;

}

.vm-card{

    background:white;

    padding:50px;

    border-radius:15px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.4s;

}

.vm-card:hover{

    transform:translateY(-10px);

}

.vm-card i{

    font-size:55px;

    color:var(--primary-green);

    margin-bottom:25px;

}

.vm-card h3{

    color:var(--primary-dark);

    margin-bottom:20px;

}

/* =====================================
   CORE VALUES
===================================== */

.values-grid{

    display:grid;
    position:relative;
    overflow:hidden;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.value-card{

    background:white;

    padding:40px;

    text-align:center;

    border-radius:15px;

    box-shadow:var(--shadow);

    transition:.4s;

}

.value-card p{

    margin-top:20px;

    color:var(--gray);

    font-size:.95rem;

    line-height:1.6;

    opacity:0;

    max-height:0;

    transition:.4s;

}

.value-card:hover p{

    opacity:1;

    max-height:120px;

}

.value-card:hover{

    transform:translateY(-10px);

    border-bottom:
    5px solid var(--primary-green);

}

.value-card i{

    font-size:50px;

    color:var(--primary-green);

    margin-bottom:20px;

}

.value-card h3{

    color:var(--primary-dark);

}

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

.transformation{

    position:relative;

    background:
    linear-gradient(
        rgba(6,58,89,.92),
        rgba(6,58,89,.92)
    ),
    url('../images/values-bg.jpg')
    center center/cover;

    color:white;

}

.transformation-content{

    text-align:center;

}

.transformation-content h2{

    font-size:3rem;

    margin-bottom:25px;

}

.transformation-content p{

    max-width:850px;

    margin:auto;

    color:#d8d8d8;

}

.transformation-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.transform-box{

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

    padding:40px;

    border-radius:15px;

    backdrop-filter:blur(10px);

}

.transform-box h3{

    font-size:2.8rem;

    color:var(--primary-green);

    margin-bottom:10px;

}


/* =====================================
WHY CHOOSE ECOSOLVE
======================================*/
.why-us{
    background-color: #f8f0f0;
}

.why-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(270px,1fr));

    gap:30px;

}

.why-card{

    background:white;

    padding:40px;

    border-radius:15px;

    text-align:center;

    box-shadow:var(--shadow);

}

.why-card i{

    font-size:55px;

    color:var(--primary-green);

    margin-bottom:25px;

}

.why-card h3{

    color:var(--primary-dark);

    margin-bottom:20px;

}

.why-card p{

    color:var(--gray);

    line-height:1.8;

}

/* =====================================
 VISION & MISSION
====================================== */

.vision-section{
background:
linear-gradient(
    rgba(6,58,89,.95),
    rgba(6,58,89,.95)
),
url('../images/values-bg.jpg')
center center/cover;
color:white;

}

.section-title.light h2{
color:white;

}

.section-title.light p{
color:#d8d8d8;
max-width:800px;
margin:auto;

}

.vision-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:70px;

}

.vision-box{
background:
rgba(255,255,255,.08);
padding:50px;
border-radius:20px;
backdrop-filter:blur(10px);
text-align:center;

}

.vision-box i{
font-size:60px;
color:var(--primary-green);
margin-bottom:25px;

}

.vision-box h3{
margin-bottom:20px;

}

.vision-box p{
color:#e2e2e2;
line-height:1.9;

}



/*=====================================
AFFILIATIONS
=====================================*/
.affiliation-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

}


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

.about-cta{

    position:relative;

    background:
    url('../images/cta-bg.jpg')
    center center/cover;

    padding:140px 0;

    text-align:center;

}

.cta-overlay{

    position:absolute;
    inset:0;

    background:
    rgba(6,58,89,.85);

}

.cta-content{

    position:relative;
    z-index:2;

    color:white;

}

.cta-content h2{

    font-size:3rem;

    margin-bottom:20px;

}

.cta-content p{

    max-width:700px;

    margin:auto auto 35px;

    color:#e2e2e2;

}

/* =====================================
   ANIMATION EFFECTS
===================================== */

.company-overview,
.vision-mission,
.core-values,
.transformation,
.about-cta{

    overflow:hidden;

}

.value-card,
.vm-card,
.transform-box{

    transition:.4s ease;

}

.transform-box:hover{

    transform:translateY(-8px);

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

}