.hero{
    height:90vh;
    background:url("../images/sustainability.jpeg") center/cover;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.hero-content{
    position:relative;
    z-index:2;
    color:white;
    max-width:900px;
    padding:20px;
}

.hero h1{
    font-size:58px;
    margin-bottom:20px;
}

.hero p{
    font-size:20px;
}

section{
    padding:40px 8%;
}

.pillars h2 {
    font-size:46px;
    margin-bottom:20px;
}

.pillar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.card{
    background:white;
    padding:35px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.07);
}

.card h3{
    color:#2e7d32;
    margin-bottom:15px;
}


.stats{
    background:linear-gradient(135deg,#2e7d32,#4caf50);
    color:white;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.stat-box{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border-radius:24px;
    padding:40px;
    text-align:center;
}

.stat-box h3{
    font-size:52px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

@media(max-width:900px){
    .commitment,
    .stats-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:40px;
    }

    section h2{
        font-size:32px;
    }
}

.commitment{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:#f6fbf7;
}

.section-tag{
    display:inline-block;
    background:#d9f4dd;
    color:#2e7d32;
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:20px;
}

.commitment h2{
    font-size:46px;
    margin-bottom:20px;
}

.commitment .lead{
    color:#666;
    font-size:18px;
    line-height:1.8;
    margin-bottom:24px;
}

.commitment-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.item{
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.item span{
    font-size:32px;
}

.item h4{
    color:#2e7d32;
    margin-bottom:6px;
}

.item p{
    color:#666;
}

.commitment img{
    width:100%;
    border-radius:25px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.gallery{
    background:#fafafa;
}

.section-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 40px;
 
}

.section-heading h2{
    font-size:46px;
    margin:20px 0;
}

.section-heading p{
    color:#666;
    line-height:1.8;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
}

.gallery-card img{
    width:100%;
    height:380px;
    object-fit:cover;
    transition:.5s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}

.overlay-text{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:28px;
    color:white;
    background:linear-gradient(transparent,rgba(0,0,0,.82));
}

.overlay-text h3{
    margin-bottom:8px;
}

.overlay-text p{
    color:#eee;
}