/* ===========================
   Circular Build Africa
   Version 1.0
===========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#F8FAF7;
    color:#1F2937;
    overflow-x:hidden;
}

.container{
    width:min(92%,1280px);
    margin:auto;
}

/* HEADER */

.header{

    position:sticky;

    top:0;

    z-index:999;

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

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.4s;

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    color:inherit;

    text-decoration:none;

}

.logo img{

    width:70px;

    transition:.4s;

}

.logo img:hover{

    transform:rotate(-5deg) scale(1.05);

}

.logo-text h2{

    color:#0E5D2F;

    font-size:28px;

}

.logo-text p{

    color:#666;

    font-size:14px;

}

.navbar{

    display:flex;

    gap:35px;

}

.navbar a{

    position:relative;

    text-decoration:none;

    color:#1F2937;

    font-weight:600;

    transition:.35s;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:#0E5D2F;

    transition:.35s;

}

.navbar a:hover::after{

    width:100%;

}
.navbar a:hover{

    color:#0E5D2F;

}

.navbar .active{

    color:#0E5D2F;

    border-bottom:3px solid #0E5D2F;

}

.join-btn{

    background:#0E5D2F;

    color:white;

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    box-shadow:0 8px 25px rgba(14,93,47,.25);

}

.join-btn:hover{

    transform:translateY(-3px);

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

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

.hero{
    padding:90px 0;
    background:#f6f9f5;
}

.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.hero-content{
    flex:1;
    min-width:320px;
}

.tagline{
    display:inline-block;
    background:#e8f5e9;
    color:#0E5D2F;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.hero-content h1{
    font-size:56px;
    line-height:1.2;
    margin-bottom:25px;
    color:#16351F;
}

.hero-content p{
    font-size:18px;
    color:#666;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    text-decoration:none;
    padding:15px 28px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:#0E5D2F;
    color:white;
}

.btn-primary:hover{
    background:#0a4723;
}

.btn-secondary{
    border:2px solid #0E5D2F;
    color:#0E5D2F;
}

.btn-secondary:hover{
    background:#0E5D2F;
    color:white;
}

.hero-image{
    flex:1;
    min-width:320px;
}

.hero-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}
/* ================= TOP BAR ================= */

.top-bar{

    background:#0E5D2F;

    color:white;

    font-size:14px;

}

.top-bar-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

}

.top-left{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:500;

}

.top-right{

    display:flex;

    gap:18px;

}

.top-right a{

    color:white;

    font-size:18px;

    transition:.3s;

}

.top-right a:hover{

    color:#C8A45D;

}
/* ================= LOGO BRAND ================= */

.cba{

    display:inline-block;

    background:#0E5D2F;

    color:white;

    padding:5px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:6px;

}

.logo-text h2{

    font-size:26px;

    color:#0E5D2F;

    margin:0;

}

.logo-text p{

    font-size:12px;

    color:#dfbb04;

    margin-top:3px;

}
/* ===================================================
   CBA BRAND IDENTITY
=================================================== */

.logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo img{
    width:68px;
    height:68px;
    object-fit:contain;
}

.cba-badge{

    width:58px;
    height:58px;

    background:#0E5D2F;

    color:white;

    border-radius:48%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    box-shadow:0 8px 18px rgba(14,93,47,.30);

    transition:.35s;

}

.cba-badge:hover{

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

    background:#C8A45D;

}

.logo-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.logo-text h2{

    margin:0;

    font-size:22px;

    color:#0E5D2F;

    font-weight:700;

}

.logo-text p{

    margin-top:2px;

    color:#0a0901;

    font-size:9px;

    letter-spacing:.3px;

}
/*==================================================
 HERO PREMIUM
==================================================*/

.hero{

    background:#F8FAF7;

    padding:90px 0;

}

.hero-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    flex-wrap:wrap;

}

.hero-content{

    flex:1;

    min-width:350px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#EAF6ED;

    color:#0E5D2F;

    padding:10px 20px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

    font-size:62px;

    line-height:1.1;

    color:#17361F;

    margin-bottom:25px;

}

.hero h1 span{

    color:#C8A45D;

}

.hero p{

    font-size:20px;

    color:#666;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#0E5D2F;

    color:white;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    border:2px solid #0E5D2F;

    color:#0E5D2F;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-secondary:hover{

    background:#0E5D2F;

    color:white;

}

.hero-image{

    flex:1;

    min-width:350px;

}

.hero-image img{

    width:100%;

    border-radius:25px;

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

    transition:.4s;

}

.hero-image img:hover{

    transform:scale(1.02);

}
/*==================================================
IMPACT DASHBOARD
==================================================*/

.impact{

    padding:90px 0;

    background:#ffffff;

}

.impact-title{

    text-align:center;

    margin-bottom:60px;

}

.impact-title h2{

    font-size:42px;

    color:#0E5D2F;

}

.impact-title p{

    color:#666;

    font-size:18px;

    margin-top:10px;

}

.impact-grid{

    display:grid;

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

    gap:30px;

}

.impact-card{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

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

    transition:.35s;

}

.impact-card:hover{

    transform:translateY(-10px);

}

.impact-card i{

    font-size:40px;

    color:#0E5D2F;

    margin-bottom:20px;

}

.impact-card h3{

    font-size:42px;

    color:#C8A45D;

    margin-bottom:10px;

}

.impact-card p{

    color:#555;

    font-size:17px;

}/*==================================================
FOCUS AREAS
==================================================*/

.focus{

    padding:110px 0;

    background:#F8FAF7;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}

.section-title span{

    color:#0E5D2F;

    font-weight:700;

    letter-spacing:2px;

}

.section-title h2{

    font-size:46px;

    margin:20px 0;

    color:#17361F;

}

.section-title p{

    color:#666;

    font-size:18px;

    line-height:1.8;

}

.focus-grid{

    display:grid;

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

    gap:35px;

}

.focus-card{

    background:white;

    border-radius:20px;

    padding:40px;

    transition:.35s;

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

    border-top:5px solid transparent;

}

.focus-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #0E5D2F;

}

.focus-icon{

    width:75px;

    height:75px;

    background:#EAF6ED;

    color:#0E5D2F;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:25px;

    transition:.35s;

}
.focus-card:hover .focus-icon{

    background:#0E5D2F;

    color:white;

    transform:rotate(-8deg);

}
.focus-card h3{

    margin-bottom:18px;

    color:#17361F;

}

.focus-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
FEATURED PROJECT
=========================================*/

.featured-project{

    padding:120px 0;

    background:white;

}

.featured-container{

    display:flex;

    align-items:center;

    gap:80px;

    flex-wrap:wrap;

}

.featured-image{

    flex:1;

    min-width:350px;

}

.featured-image img{

    width:100%;

    border-radius:25px;

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

    transition:.4s;

}

.featured-image img:hover{

    transform:scale(1.03);

}

.featured-content{

    flex:1;

    min-width:350px;

}

.section-badge{

    background:#EAF6ED;

    color:#0E5D2F;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.featured-content h2{

    margin-top:25px;

    color:#0E5D2F;

    font-size:42px;

}

.featured-content h3{

    font-size:28px;

    margin:20px 0;

    color:#222;

}

.featured-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:40px;

}

.project-stats{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.stat{

    display:flex;

    align-items:center;

    gap:18px;

    background:#F8FAF7;

    padding:18px;

    border-radius:16px;

}

.stat i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#0E5D2F;

    color:white;

    font-size:22px;

}

.stat h4{

    margin:0;

    color:#C8A45D;

    font-size:24px;

}

.stat span{

    color:#555;

    font-size:14px;

}
/*======================================
PROJECT SHOWCASE
======================================*/

.projects-showcase{

    padding:120px 0;

    background:#F8FAF7;

}

.project-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-12px);

}

.project-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.project-info{

    padding:30px;

}

.project-tag{

    display:inline-block;

    background:#EAF6ED;

    color:#0E5D2F;

    padding:7px 16px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

.project-info h3{

    margin:18px 0;

    color:#17361F;

}

.project-info p{

    color:#666;

    line-height:1.8;

}

.project-meta{

    display:flex;

    justify-content:space-between;

    margin:25px 0;

    color:#888;

    font-size:14px;

}

.project-info a{

    color:#0E5D2F;

    text-decoration:none;

    font-weight:700;

}

.project-info a:hover{

    color:#C8A45D;

}
/*=========================================
/*==================================================
PROJECT AUTHOR
==================================================*/

.project-author {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 25px 0;

    padding: 15px;

    background: #F8FAF7;

    border-radius: 14px;

}


/*==================================================
AUTHOR AVATAR
==================================================*/

.project-author .author-avatar {

    width: 65px;

    height: 65px;

    min-width: 65px;

    border-radius: 50%;

    overflow: hidden;

    border: 3px solid #0E5D2F;

    flex-shrink: 0;

}


.project-author .author-avatar img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    margin: 0;

}


/*==================================================
AUTHOR DETAILS
==================================================*/

.project-author .author-details {

    min-width: 0;

}


.project-author .author-details h4 {

    margin: 0;

    color: #0E5D2F;

    font-size: 14px;

}


.project-author .author-details span {

    display: block;

    font-weight: 600;

    color: #222;

    margin-top: 4px;

    line-height: 1.4;

}


.project-author .author-details small {

    display: block;

    color: #777;

    margin-top: 4px;

    line-height: 1.5;

}
/*=========================================
PARTNERS
=========================================*/

.partners{

    padding:110px 0;

    background:#ffffff;

}

.partners-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.partner-card{

    height:140px;

    background:white;

    border:1px solid #E6E6E6;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.partner-card:hover{

    transform:translateY(-6px);

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

}

.partner-card img{

    max-width:120px;

    max-height:80px;

}

.placeholder{

    color:#999;

    font-weight:600;

    border:2px dashed #C8A45D;

    background:#FCFCFC;

}
/*=========================================
INITIATIVES
=========================================*/

.initiatives{

    padding:120px 0;

    background:#F7FAF7;

}

.initiatives-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.initiative-card{

    background:white;

    border-radius:20px;

    padding:40px;

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

    transition:.35s;

    border-top:5px solid transparent;

}

.initiative-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #0E5D2F;

}

.initiative-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EAF6ED;

    color:#0E5D2F;

    font-size:32px;

    margin-bottom:25px;

    transition:.35s;

}

.initiative-card:hover .initiative-icon{

    background:#0E5D2F;

    color:white;

    transform:rotate(-8deg);

}

.initiative-card h3{

    margin-bottom:20px;

    color:#17361F;

}

.initiative-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.initiative-card a{

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.initiative-card a:hover{

    color:#C8A45D;

}
/*=========================================
NEWS & OPPORTUNITIES
=========================================*/

.news-section{

    padding:120px 0;

    background:white;

}

.news-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.news-card{

    background:#F8FAF7;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.news-card:hover{

    transform:translateY(-8px);

}

.news-badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    color:white;

    margin-bottom:20px;

}

.news{

    background:#0E5D2F;

}

.opportunity{

    background:#C8A45D;

}

.event{

    background:#0D6EFD;

}

.news-card h3{

    margin-bottom:18px;

    color:#17361F;

}

.news-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.news-date{

    display:block;

    color:#777;

    margin-bottom:20px;

}

.news-card a{

    color:#0E5D2F;

    text-decoration:none;

    font-weight:700;

}

.news-card a:hover{

    color:#C8A45D;

}
/*=========================================
OPPORTUNITIES HUB
=========================================*/

.opportunities{

    padding:120px 0;

    background:#F7FAF7;

}

.opportunities-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.opportunity-card{

    background:white;

    border-radius:20px;

    padding:35px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border-top:5px solid transparent;

}

.opportunity-card:hover{

    transform:translateY(-10px);

    border-top:5px solid #0E5D2F;

}

.icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#EAF6ED;

    color:#0E5D2F;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:25px;

    transition:.3s;

}

.opportunity-card:hover .icon{

    background:#0E5D2F;

    color:white;

    transform:rotate(-8deg);

}

.opportunity-card h3{

    margin-bottom:18px;

    color:#17361F;

}

.opportunity-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.opportunity-card a{

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.opportunity-card a:hover{

    color:#C8A45D;

}
/*=========================================
OPPORTUNITIES PAGE
=========================================*/

.opportunities-page{

padding:130px 0;

background:#F7FAF7;

}

.opportunities-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.opportunity-card{

background:white;

padding:40px;

border-radius:20px;

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

transition:.35s;

border-top:5px solid transparent;

}

.opportunity-card:hover{

transform:translateY(-10px);

border-top:5px solid #0E5D2F;

}

.opportunity-card .icon{

width:75px;

height:75px;

background:#EAF6ED;

color:#0E5D2F;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

border-radius:18px;

margin-bottom:25px;

transition:.35s;

}

.opportunity-card:hover .icon{

background:#0E5D2F;

color:white;

transform:rotate(-10deg);

}

.opportunity-card h3{

margin-bottom:20px;

}

.opportunity-card p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.opportunity-card a{

text-decoration:none;

font-weight:700;

color:#0E5D2F;

}

.opportunity-card a:hover{

color:#C8A45D;

}
/*=========================================
PAGE HERO
=========================================*/

.page-hero{

    padding:170px 0 100px;

    background:linear-gradient(rgba(14,93,47,.9),rgba(14,93,47,.9)),
    url("images/hero.jpg");

    background-size:cover;

    background-position:center;

    color:white;

    text-align:center;

}

.page-hero span{

    color:#C8A45D;

    font-weight:700;

    letter-spacing:2px;

}

.page-hero h1{

    font-size:56px;

    margin:20px 0;

}

.page-hero p{

    max-width:750px;

    margin:auto;

    line-height:1.9;

}

/*=========================================
INITIATIVES PAGE
=========================================*/

.initiatives-page{

    padding:120px 0;

}

.initiative-row{

    display:flex;

    align-items:center;

    gap:70px;

    margin-bottom:120px;

    flex-wrap:wrap;

}

.initiative-row.reverse{

    flex-direction:row-reverse;

}

.initiative-image{

    flex:1;

}

.initiative-image img{

    width:100%;

    border-radius:20px;

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

}

.initiative-content{

    flex:1;

}

.initiative-label{

    display:inline-block;

    background:#EAF6ED;

    color:#0E5D2F;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.initiative-content h2{

    font-size:42px;

    margin-bottom:20px;

}

.initiative-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}

.initiative-content ul{

    margin-bottom:35px;

    padding-left:20px;

}

.initiative-content li{

    margin-bottom:12px;

    color:#444;

}.page-hero{
    padding:170px 0 100px;
    background:linear-gradient(rgba(14,93,47,.9),rgba(14,93,47,.9)),
    url("images/hero.jpg");
    background-size:cover;
    background-position:center;
    color:white;
    text-align:center;
}
/*==============================
INITIATIVE INTRO
==============================*/

.initiative-intro{

    padding:100px 0;

    background:white;

}

.intro-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#EAF6ED;

    color:#0E5D2F;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

}

.intro-content h2{

    font-size:48px;

    margin-bottom:25px;

    color:#17361F;

}

.intro-content p{

    font-size:19px;

    line-height:1.9;

    color:#666;

}
/*=====================================
INITIATIVES GRID
=====================================*/

.initiatives-grid-section{

    padding:40px 0 120px;

    background:#F7FAF7;

}

.initiatives-grid{

    display:grid;

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

    gap:35px;

}

.initiative-card{

    background:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

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

    transition:.35s;

}

.initiative-card:hover{

    transform:translateY(-10px);

}

.initiative-card i{

    font-size:50px;

    color:#0E5D2F;

    margin-bottom:25px;

}

.initiative-card h3{

    margin-bottom:20px;

    color:#17361F;

}

.initiative-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.initiative-card a{

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.initiative-card a:hover{

    color:#C8A45D;

}
/*======================================
INITIATIVES GRID
======================================*/

.initiatives-grid-section{

    padding:40px 0 120px;

    background:#F7FAF7;

}

.initiatives-grid{

    display:grid;

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

    gap:35px;

}

.initiative-card{

    background:white;

    padding:45px;

    border-radius:22px;

    text-align:center;

    transition:.35s;

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

    border-top:5px solid transparent;

}

.initiative-card:hover{

    transform:translateY(-12px);

    border-top:5px solid #0E5D2F;

}

.initiative-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#EAF6ED;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.initiative-icon i{

    font-size:42px;

    color:#0E5D2F;

}

.initiative-card h3{

    margin-bottom:20px;

    color:#17361F;

}

.initiative-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}

.initiative-card a{

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.initiative-card a i{

    margin-left:8px;

    transition:.3s;

}

.initiative-card:hover a i{

    transform:translateX(6px);

}
/*====================================
OUR IMPACT
====================================*/

.impact-section{

    padding:120px 0;

    background:white;

}

.section-heading{

    text-align:center;

    max-width:800px;

    margin:auto auto 70px;

}

.section-heading h2{

    font-size:46px;

    margin:25px 0;

    color:#17361F;

}

.section-heading p{

    color:#666;

    line-height:1.9;

    font-size:18px;

}

.impact-grid{

    display:grid;

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

    gap:35px;

}

.impact-card{

    background:#F8FAF8;

    border-radius:20px;

    padding:45px 25px;

    text-align:center;

    transition:.35s;

}

.impact-card:hover{

    transform:translateY(-10px);

    background:#0E5D2F;

}

.impact-card i{

    font-size:45px;

    color:#C8A45D;

    margin-bottom:25px;

}

.impact-card h3{

    font-size:42px;

    color:#17361F;

    margin-bottom:12px;

}

.impact-card span{

    color:#666;

    font-weight:500;

}

.impact-card:hover h3,

.impact-card:hover span{

    color:white;

}
/*==========================================
FEATURED INITIATIVES
==========================================*/

.featured-initiatives{

    padding:120px 0;

    background:#F7FAF7;

}

.featured-item{

    display:flex;

    align-items:center;

    gap:70px;

    margin-top:90px;

    margin-bottom:90px;

    flex-wrap:wrap;

}

.featured-item.reverse{

    flex-direction:row-reverse;

}

.featured-image{

    flex:1;

}

.featured-image img{

    width:100%;

    border-radius:22px;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    transition:.35s;

}

.featured-image img:hover{

    transform:scale(1.03);

}

.featured-content{

    flex:1;

}

.initiative-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#EAF6ED;

    color:#0E5D2F;

    font-weight:600;

    margin-bottom:20px;

}

.featured-content h2{

    font-size:42px;

    color:#17361F;

    margin-bottom:20px;

}

.featured-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}

.featured-content ul{

    margin-bottom:35px;

    padding-left:22px;

}

.featured-content li{

    margin-bottom:12px;

    color:#444;

}

.featured-content li::marker{

    color:#0E5D2F;

}
/*========================================
PROJECT SHOWCASE
========================================*/

.project-showcase{

    padding:120px 0;

    background:#F7FAF7;

}

.showcase-grid{

    display:grid;

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

    gap:35px;

}

.showcase-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

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

}

.showcase-card:hover{

    transform:translateY(-12px);

}

.showcase-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.showcase-content{

    padding:30px;

}

.showcase-content span{

    color:#0E5D2F;

    font-size:14px;

    font-weight:600;

}

.showcase-content h3{

    margin:15px 0;

    color:#17361F;

}

.showcase-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.showcase-content a{

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.showcase-content a i{

    margin-left:8px;

    transition:.3s;

}

.showcase-card:hover a i{

    transform:translateX(6px);

}
/*======================================
PROJECT PORTFOLIO
======================================*/

.project-portfolio{

    padding:120px 0;

    background:#F7FAF7;

}

.portfolio-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-10px);

}

.project-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.project-body{

    padding:30px;

}

.status{

    display:inline-block;

    padding:8px 15px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.status.completed{

    background:#EAF8EF;

    color:#1E8E3E;

}

.status.ongoing{

    background:#FFF4D9;

    color:#B7791F;

}

.status.research{

    background:#E8F0FE;

    color:#2ce1de;

}

.project-body h3{

    color:#17361F;

    margin-bottom:15px;

}

.project-description{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.project-meta p{

    margin-bottom:12px;

    color:#555;

    font-size:15px;

}

.project-meta i{

    color:#0E5D2F;

    width:22px;

}

.project-btn{

    display:inline-block;

    margin-top:25px;

    text-decoration:none;

    color:#0E5D2F;

    font-weight:700;

}

.project-btn i{

    margin-left:8px;

    transition:.3s;

}

.project-btn:hover i{

    transform:translateX(6px);

}
/*====================================
JOIN CBA
====================================*/

.join-cba{

    padding:120px 0;

    background:linear-gradient(135deg,#0E5D2F,#145A32);

    color:white;

}

.join-content{

    text-align:center;

    max-width:850px;

    margin:auto;

}

.join-content h2{

    font-size:48px;

    margin:25px 0;

}

.join-content p{

    font-size:18px;

    line-height:1.9;

}

.join-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.join-card{

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

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.join-card:hover{

    transform:translateY(-10px);

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

}

.join-card i{

    font-size:46px;

    color:#F4C542;

    margin-bottom:20px;

}

.join-card h3{

    margin-bottom:18px;

}

.join-card p{

    line-height:1.8;

}

.join-buttons{

    text-align:center;

    margin-top:60px;

}

.join-buttons .btn{

    margin:10px;

}

/*==========================
JOIN PAGE
==========================*/

.join-page{

padding:170px 0 120px;

background:#F7FAF7;

}

.join-form{

background:white;

padding:50px;

border-radius:20px;

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

margin-top:60px;

}

.form-grid{

display:grid;

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

gap:25px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:10px;

font-weight:600;

color:#17361F;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-family:Poppins,sans-serif;

font-size:15px;

outline:none;

transition:.3s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:#0E5D2F;

box-shadow:0 0 0 3px rgba(14,93,47,.15);

}

.join-form button{

margin-top:25px;

}

/*====================================
ABOUT PAGE
====================================*/

.about-section{

padding:120px 0;

background:white;

}

.about-grid{

display:flex;

align-items:center;

gap:70px;

flex-wrap:wrap;

}

.about-image{

flex:1;

}

.about-image img{

width:100%;

border-radius:20px;

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.about-content{

flex:1;

}

.about-content h2{

font-size:45px;

margin:25px 0;

color:#17361F;

}

.about-content p{

line-height:1.9;

margin-bottom:20px;

color:#666;

font-size:17px;

}

/*====================================
OUR STORY
====================================*/

.our-story{

    padding:120px 0;

    background:#F7FAF7;

}

.timeline{

    max-width:900px;

    margin:70px auto 0;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    width:4px;

    height:100%;

    background:#0E5D2F;

}

.timeline-item{

    display:flex;

    margin-bottom:60px;

    position:relative;

}

.timeline-year{

    width:100px;

    font-weight:700;

    color:#0E5D2F;

    font-size:22px;

    text-align:right;

    margin-right:50px;

}

.timeline-content{

    background:white;

    padding:30px;

    border-radius:18px;

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

    flex:1;

}

.timeline-content h3{

    color:#17361F;

    margin-bottom:15px;

}

.timeline-content p{

    color:#666;

    line-height:1.8;

}
/*====================================
VISION • MISSION • VALUES
====================================*/

.vision-section{

    padding:120px 0;

    background:white;

}

.vmv-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.vmv-card{

    background:#F7FAF7;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.35s;

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

}

.vmv-card:hover{

    transform:translateY(-10px);

}

.vmv-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#0E5D2F;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.vmv-icon i{

    color:white;

    font-size:36px;

}

.vmv-card h3{

    color:#17361F;

    margin-bottom:20px;

}

.vmv-card p{

    color:#666;

    line-height:1.9;

}

.vmv-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.vmv-card ul li{

    padding:10px 0;

    color:#555;

    border-bottom:1px solid #e7e7e7;

}

.vmv-card ul li:last-child{

    border-bottom:none;

}
/*====================================
FOUNDER
====================================*/

.founder-section{

    padding:120px 0;

    background:#F7FAF7;

}

.founder-grid{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:70px;

    align-items:center;

}

.founder-image img{

    width:100%;

    border-radius:25px;

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

}

.founder-content h2{

    color:#17361F;

    margin:15px 0;

    font-size:42px;

}

.founder-content h4{

    color:#0E5D2F;

    margin-bottom:30px;

    font-weight:600;

}

.founder-content p{

    line-height:1.9;

    color:#666;

    margin-bottom:20px;

}

.founder-links{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.founder-links a{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#0E5D2F;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.3s;

}

.founder-links a:hover{

    transform:translateY(-6px);

    background:#F4C542;

    color:#17361F;

}

.signature{

    margin-top:35px;

    font-size:22px;

    font-style:italic;

    color:#0E5D2F;

}
/*====================================
FOCUS AREAS
====================================*/

.focus-section{

    padding:120px 0;

    background:white;

}

.focus-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.focus-card{

    background:#F7FAF7;

    padding:40px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

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

}

.focus-card:hover{

    transform:translateY(-10px);

}

.focus-card i{

    font-size:48px;

    color:#0E5D2F;

    margin-bottom:25px;

}

.focus-card h3{

    margin-bottom:20px;

    color:#17361F;

}

.focus-card p{

    color:#666;

    line-height:1.8;

}

/*====================================
SDGs
====================================*/

.sdg-section{

    padding:120px 0;

    background:#F7FAF7;

}

.sdg-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.sdg-card{

    background:white;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

    border-top:8px solid;

}

.sdg-card:hover{

    transform:translateY(-10px);

}

.sdg-number{

    width:65px;

    height:65px;

    border-radius:50%;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:20px;

}

.sdg-card h3{

    color:#17361F;

    margin-bottom:15px;

}

.sdg-card p{

    color:#666;

    line-height:1.8;

}

/* Official SDG Colors */

.sdg6{

    border-color:#26BDE2;

}

.sdg6 .sdg-number{

    background:#26BDE2;

}

.sdg9{

    border-color:#FD6925;

}

.sdg9 .sdg-number{

    background:#FD6925;

}

.sdg11{

    border-color:#F99D26;

}

.sdg11 .sdg-number{

    background:#F99D26;

}

.sdg12{

    border-color:#BF8B2E;

}

.sdg12 .sdg-number{

    background:#BF8B2E;

}

.sdg13{

    border-color:#3F7E44;

}

.sdg13 .sdg-number{

    background:#3F7E44;

}

.sdg17{

    border-color:#19486A;

}

.sdg17 .sdg-number{

    background:#19486A;

}

/* Hide the navigation ribbon while scrolling down; reveal it on scroll up. */
.header.is-hidden{
    transform:translateY(-110%);
}

@media(prefers-reduced-motion:reduce){
    .header{transition:none;}
}

/* ==================================================
   INITIATIVES PAGE — PROFESSIONAL PROGRAMME LAYOUT
   ================================================== */
.initiatives-pro { background:#f6f8f6; color:#334038; }
.initiatives-pro .page-hero { padding:110px 0 90px; background:linear-gradient(125deg,#103c22,#0e5d2f); text-align:left; }
.initiatives-pro .page-hero .container { max-width:1180px; }
.initiatives-pro .page-hero span { display:inline-block; margin-bottom:18px; padding:7px 14px; border:1px solid rgba(255,255,255,.32); border-radius:30px; color:#dff1e4; font-size:12px; font-weight:700; letter-spacing:.08em; }
.initiatives-pro .page-hero h1 { max-width:720px; font-size:clamp(42px,5vw,64px); line-height:1.08; }
.initiatives-pro .page-hero p { max-width:680px; font-size:18px; }
.initiatives-pro section { padding:95px 0; }
.initiatives-pro .programme-intro { background:#fff; }
.initiatives-pro .programme-intro-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; }
.initiatives-pro .eyebrow { color:#0e5d2f; font-size:12px; font-weight:800; letter-spacing:.1em; }
.initiatives-pro h2 { color:#17361f; font-size:42px; line-height:1.2; margin:15px 0 20px; }
.initiatives-pro .programme-intro p,.initiatives-pro .section-heading p { color:#66736a; line-height:1.85; }
.initiatives-pro .programme-figure { overflow:hidden; border-radius:18px; box-shadow:0 20px 40px rgba(16,54,31,.14); }
.initiatives-pro .programme-figure img { width:100%; height:370px; object-fit:cover; }
.initiatives-pro .initiative-section { background:#f6f8f6; }
.initiatives-pro .section-heading { max-width:720px; margin:0 auto 50px; text-align:center; }
.initiatives-pro .initiatives-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.initiatives-pro .initiative-card { padding:30px; border:1px solid #e0e8e1; border-radius:16px; background:#fff; box-shadow:none; text-align:left; }
.initiatives-pro .initiative-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(16,54,31,.10); }
.initiatives-pro .initiative-icon { display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin:0 0 22px; border-radius:12px; background:#e7f3e9; color:#0e5d2f; font-size:21px; }
.initiatives-pro .initiative-card h3 { margin:0 0 12px; font-size:21px; }
.initiatives-pro .initiative-card p { margin:0; color:#6b756e; line-height:1.75; }
.initiatives-pro .featured-programme { background:#fff; }
.initiatives-pro .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.initiatives-pro .feature-card { overflow:hidden; border:1px solid #e0e8e1; border-radius:16px; background:#fff; }
.initiatives-pro .feature-card img { width:100%; height:210px; object-fit:cover; }
.initiatives-pro .feature-card div { padding:24px; }
.initiatives-pro .feature-card h3 { margin-bottom:10px; }
.initiatives-pro .feature-card p { margin:0; color:#6b756e; line-height:1.7; }
.initiatives-pro .impact-band { padding:70px 0; background:#17361f; }
.initiatives-pro .impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.initiatives-pro .impact-item { padding:20px; border-left:1px solid rgba(255,255,255,.24); color:#dcebe0; }
.initiatives-pro .impact-item strong { display:block; color:#f4c542; font-size:34px; line-height:1.1; }
.initiatives-pro .impact-item span { font-size:14px; }
.initiatives-pro .join-panel { padding:60px; border-radius:20px; background:#e7f3e9; text-align:center; }
.initiatives-pro .join-panel h2 { margin-top:0; }
.initiatives-pro .join-panel p { max-width:670px; margin:0 auto 28px; color:#526058; }
@media(max-width:900px){.initiatives-pro .programme-intro-grid,.initiatives-pro .initiatives-grid,.initiatives-pro .feature-grid{grid-template-columns:repeat(2,1fr)}.initiatives-pro .programme-intro-grid{gap:35px}.initiatives-pro .impact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.initiatives-pro .page-hero,.initiatives-pro section{padding:70px 0}.initiatives-pro .programme-intro-grid,.initiatives-pro .initiatives-grid,.initiatives-pro .feature-grid,.initiatives-pro .impact-grid{grid-template-columns:1fr}.initiatives-pro h2{font-size:32px}.initiatives-pro .programme-figure img{height:280px}.initiatives-pro .join-panel{padding:38px 22px}}

/* Mobile navigation */
.menu-toggle{display:none;align-items:center;gap:8px;border:1px solid #d8e3da;border-radius:8px;background:#fff;color:#17361F;padding:10px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.menu-toggle i{font-size:17px;}
.mobile-join-link{display:none;}
@media(max-width:768px){
    .header .container{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:12px 0;text-align:left;}
    .header .logo{justify-content:flex-start;gap:10px;}
    .header .logo img{width:48px;}
    .header .logo-text h2{font-size:18px;}
    .header .logo-text p{display:none;}
    .menu-toggle{display:inline-flex;}
    .navbar{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:10px 0 2px;}
    .navbar.is-open{display:flex;}
    .navbar a{padding:12px 4px;border-bottom:1px solid #edf1ee;}
    .navbar .active{border-bottom:1px solid #edf1ee;border-left:3px solid #0E5D2F;padding-left:10px;}
    .navbar .mobile-join-link{display:block;margin-top:10px;padding:12px;text-align:center;border:0;border-radius:8px;background:#0E5D2F;color:#fff;}
    .join-btn{display:none;}
}
/*====================================
PARTNERS
====================================*/

.partners-section{

    padding:120px 0;

    background:white;

}

/*====================================
PARTNERS LOGOS
====================================*/

.partners-logos{

    display:grid;

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

    gap:40px;

    margin-top:70px;

    align-items:center;

}

.partners-logos img{

    width:140px;

    margin:auto;

    filter:grayscale(100%);

    opacity:.65;

    transition:.35s;

}

.partners-logos img:hover{

    filter:none;

    opacity:1;

    transform:scale(1.08);

}

.partner-cta{

    margin-top:90px;

    text-align:center;

}

.partner-cta h3{

    color:#17361F;

    margin-bottom:20px;

    font-size:34px;

}

.partner-cta p{

    color:#666;

    max-width:750px;

    margin:auto;

    line-height:1.9;

    margin-bottom:35px;

}

.partner-card:hover{

    transform:translateY(-8px);

}

.partner-card i{

    font-size:48px;

    color:#0E5D2F;

    margin-bottom:20px;

}

.partner-card h3{

    margin-bottom:18px;

    color:#17361F;

    font-size:24px;

}

.partner-card p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}

.future-partners{

    margin-top:80px;

    text-align:center;

}

.future-partners h3{

    margin-bottom:35px;

    color:#17361F;

}

.logo-placeholder{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.logo-placeholder span{

    padding:14px 28px;

    border-radius:30px;

    background:#0E5D2F;

    color:white;

    font-weight:600;

}

/*====================================
PARTNERS PAGE — PROFESSIONAL SHOWCASE
====================================*/
.partners-page{background:#f7f9f7;}
.partners-page .header{position:relative;z-index:5;}
.partners-hero{position:relative;isolation:isolate;overflow:hidden;padding:112px 0 118px;background:#113d25;color:#fff;}
.partners-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(118deg,#102f20 0%,#174d2d 58%,#0d3520 100%);}
.partners-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.42;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(90deg,#000,transparent 77%);}
.partners-hero__content{max-width:1180px;}
.partners-page .section-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:19px;color:#e8bd58;font-size:11px;font-weight:800;letter-spacing:.16em;}
.partners-hero .section-tag::before{content:"";width:28px;height:1px;background:currentColor;}
.partners-hero h1{max-width:830px;margin:0;font-size:clamp(44px,5.7vw,76px);line-height:1.04;letter-spacing:-.04em;color:#fff;}
.partners-hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#eac765;}
.partners-hero p{max-width:650px;margin:25px 0 0;color:#d9e7dc;font-size:18px;line-height:1.8;}
.partners-hero__pillars{display:flex;flex-wrap:wrap;gap:11px;margin-top:36px;}
.partners-hero__pillars span{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.07);color:#f4f8f4;font-size:13px;font-weight:600;}
.partners-hero__pillars i{color:#eac765;}
.partners-hero__orb{position:absolute;z-index:-1;border:1px solid rgba(238,198,93,.25);border-radius:50%;}
.partners-hero__orb--one{right:-100px;bottom:-240px;width:610px;height:610px;box-shadow:0 0 0 72px rgba(238,198,93,.045),0 0 0 145px rgba(238,198,93,.03);}
.partners-hero__orb--two{top:-180px;right:18%;width:285px;height:285px;}
.partners-page .partners-section{padding:104px 0;background:#f7f9f7;}
.partners-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:80px;align-items:end;margin-bottom:46px;}
.partners-intro .section-tag{margin-bottom:13px;color:#0e5d2f;}
.partners-intro h2{max-width:620px;margin:0;color:#17361f;font-size:clamp(32px,3.6vw,51px);line-height:1.1;letter-spacing:-.035em;}
.partners-intro p{max-width:475px;margin:0;color:#66736a;font-size:16px;line-height:1.85;}
.partner-showcase{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,.78fr);gap:24px;}
.partner-profile{display:grid;grid-template-columns:215px minmax(0,1fr);gap:36px;align-items:center;min-height:290px;padding:38px;border:1px solid #dce7de;border-radius:18px;background:#fff;box-shadow:0 14px 35px rgba(20,55,31,.07);}
.partner-profile__identity{display:flex;flex-direction:column;align-items:center;gap:20px;}
.partner-logo-wrap{display:flex;align-items:center;justify-content:center;width:142px;height:142px;padding:22px;border:1px solid #e2ebe3;border-radius:15px;background:#fff;box-shadow:0 8px 19px rgba(15,55,31,.08);}
.partner-logo-wrap img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:none;opacity:1;}
.partner-status{display:flex;align-items:center;gap:7px;color:#477053;font-size:12px;font-weight:700;white-space:nowrap;}
.partner-status i{color:#0e8a46;}
.partner-profile__copy{padding-left:35px;border-left:1px solid #e0e9e2;}
.partner-profile h3{margin:0 0 13px;color:#17361f;font-size:clamp(23px,2.2vw,30px);line-height:1.2;}
.partner-profile p{max-width:445px;margin:0 0 22px;color:#66736a;line-height:1.75;}
.partner-profile a{display:inline-flex;align-items:center;gap:8px;color:#0e5d2f;font-size:14px;font-weight:800;text-decoration:none;}
.partner-profile a:hover{color:#c49325;}
.partner-profile a i{font-size:11px;}
.partner-invitation{position:relative;overflow:hidden;padding:36px;border-radius:18px;background:#e8f1e9;color:#17361f;}
.partner-invitation::after{content:"";position:absolute;right:-52px;bottom:-62px;width:190px;height:190px;border:28px solid rgba(14,93,47,.1);border-radius:50%;}
.partner-invitation>*{position:relative;z-index:1;}
.partner-invitation__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:24px;border-radius:12px;background:#0e5d2f;color:#f5ce68;font-size:19px;}
.partner-invitation .section-tag{margin:0 0 9px;color:#0e5d2f;}
.partner-invitation h3{max-width:320px;margin:0 0 12px;font-size:27px;line-height:1.18;}
.partner-invitation p{max-width:330px;margin:0 0 26px;color:#566b5b;line-height:1.7;}
.partner-invitation .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;font-size:14px;}
.partner-invitation .btn i{font-size:12px;transition:transform .2s ease;}
.partner-invitation .btn:hover i{transform:translateX(3px);}
.partners-focus{padding:34px 0;background:#fff;border-top:1px solid #e6ece7;}
.partners-focus .container{display:flex;align-items:center;justify-content:space-between;gap:30px;}
.partners-focus p{margin:0;color:#7a887c;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.partners-focus .container>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px 37px;}
.partners-focus span{color:#1c3b25;font-size:15px;font-weight:700;}
.partners-focus span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 37px 3px 0;border-radius:50%;background:#dfb23e;vertical-align:middle;}
@media(max-width:850px){
    .partners-hero{padding:88px 0 94px;}
    .partners-intro,.partner-showcase{grid-template-columns:1fr;gap:28px;}
    .partners-intro{margin-bottom:35px;}
    .partner-invitation{min-height:0;}
}
@media(max-width:560px){
    .partners-hero{padding:72px 0 78px;}
    .partners-hero h1{font-size:42px;}
    .partners-hero p{font-size:16px;}
    .partners-page .partners-section{padding:70px 0;}
    .partner-profile{grid-template-columns:1fr;gap:26px;padding:27px 22px;text-align:center;}
    .partner-profile__copy{padding:0;border:0;}
    .partner-profile p{margin-left:auto;margin-right:auto;}
    .partner-showcase{gap:16px;}
    .partner-invitation{padding:30px 24px;}
    .partners-focus .container{display:block;}
    .partners-focus .container>div{justify-content:flex-start;margin-top:16px;gap:9px 16px;}
    .partners-focus span+span::before{margin-right:16px;}
}
/*==================================================
PROJECT SHOWCASE
==================================================*/

.project-filter{

    padding:50px 0;

    background:#fff;

}

.filter-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.filter-buttons button{

    padding:14px 30px;

    border:none;

    border-radius:40px;

    background:#eef5ef;

    color:#17361F;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.filter-buttons button:hover,
.filter-buttons .active{

    background:#0E5D2F;

    color:white;

}

.projects-grid-section{

    padding:80px 0 120px;

    background:#f7faf7;

}

.projects-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

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

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-12px);

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

}

.project-image{

    position:relative;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

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

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    background:rgba(14,93,47,.82);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.project-card:hover .project-overlay{

    opacity:1;

}

.project-overlay a{

    padding:14px 28px;

    background:white;

    color:#0E5D2F;

    text-decoration:none;

    border-radius:40px;

    font-weight:700;

}

.project-content{

    padding:28px;

}

.project-content h3{

    color:#17361F;

    margin:18px 0 15px;

    font-size:26px;

}

.project-content p{

    color:#666;

    line-height:1.8;

}

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

.completed{

    background:#dff5e3;

    color:#0E5D2F;

}

.ongoing{

    background:#fff2cf;

    color:#b27b00;

}

.planned{

    background:#e6ecff;

    color:#2453c3;

}

.project-meta{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    color:#555;

    font-size:15px;

    flex-wrap:wrap;

    gap:10px;

}

.project-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.sdgs{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:25px;

}

.sdgs span{

    padding:8px 14px;

    background:#0E5D2F;

    color:white;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

/* Responsive */

@media(max-width:768px){

    .top-bar-content,
    .header .container,
    .navbar{

        flex-direction:column;

        gap:16px;

        text-align:center;

    }

    .logo{

        justify-content:center;

    }

    .page-hero{

        padding:100px 0 70px;

    }

    .page-hero h1{

        font-size:36px;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-content h3{

        font-size:22px;

    }

}


/*==================================================
RESEARCH PAGE
==================================================*/

.research-intro {

    padding: 100px 0;

    background: #ffffff;

}

.research-intro-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 70px;

    align-items: center;

}

.research-intro-content h2 {

    font-size: 42px;

    line-height: 1.2;

    color: #17361F;

    margin: 20px 0;

}

.research-intro-content p {

    color: #666;

    line-height: 1.9;

    margin-bottom: 18px;

}

.research-intro-card {

    padding: 45px;

    background: #F7FAF7;

    border-radius: 25px;

    text-align: center;

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

}

.research-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #0E5D2F;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

}

.research-intro-card h3 {

    color: #17361F;

    margin-bottom: 15px;

}

.research-intro-card p {

    color: #666;

    line-height: 1.8;

}


/*==================================================
RESEARCH FOCUS
==================================================*/

.research-focus {

    padding: 100px 0;

    background: #F7FAF7;

}

.section-heading {

    max-width: 800px;

    margin: 0 auto 60px;

    text-align: center;

}

.section-heading h2 {

    font-size: 42px;

    color: #17361F;

    line-height: 1.25;

    margin: 18px 0;

}

.section-heading p {

    color: #666;

    line-height: 1.8;

}

.research-focus-grid {

    display: grid;

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

    gap: 25px;

}

.research-focus-card {

    position: relative;

    background: white;

    padding: 35px 28px;

    border-radius: 22px;

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

    transition: .35s;

    overflow: hidden;

}

.research-focus-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0,0,0,.10);

}

.research-focus-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #E6F3EA;

    color: #0E5D2F;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    margin-bottom: 22px;

}

.research-focus-card h3 {

    color: #17361F;

    font-size: 20px;

    margin-bottom: 15px;

}

.research-focus-card p {

    color: #666;

    line-height: 1.8;

}

.research-number {

    position: absolute;

    right: 20px;

    bottom: 15px;

    font-size: 50px;

    font-weight: 800;

    color: rgba(14,93,47,.07);

}


/*==================================================
FEATURED RESEARCH
==================================================*/

.featured-research {

    padding: 110px 0;

    background: white;

}

.featured-research-grid {

    display: grid;

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

    gap: 30px;

}

.research-card {

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

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

    transition: .35s;

}

.research-card:hover {

    transform: translateY(-10px);

}

.research-card-image {

    position: relative;

    height: 240px;

    overflow: hidden;

}

.research-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: .5s;

}

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

    transform: scale(1.07);

}

.research-card-image span {

    position: absolute;

    left: 18px;

    bottom: 18px;

    padding: 8px 15px;

    background: white;

    color: #0E5D2F;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.research-card-content {

    padding: 28px;

}

.research-card-content h3 {

    color: #17361F;

    font-size: 23px;

    margin-bottom: 15px;

}

.research-card-content p {

    color: #666;

    line-height: 1.8;

    margin-bottom: 22px;

}

.research-card-content a {

    color: #0E5D2F;

    font-weight: 700;

    text-decoration: none;

}

.research-card-content a i {

    margin-left: 7px;

}


/*==================================================
RESEARCH CTA
==================================================*/

.research-cta {

    padding: 100px 0;

    background: #0E5D2F;

    text-align: center;

}

.research-cta-content {

    max-width: 800px;

    margin: auto;

}

.research-cta .section-tag {

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

    color: white;

}

.research-cta h2 {

    color: white;

    font-size: 42px;

    line-height: 1.25;

    margin: 20px 0;

}

.research-cta p {

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

    line-height: 1.8;

    margin-bottom: 30px;

}


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

@media(max-width:1000px) {

    .research-focus-grid {

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

    }

    .featured-research-grid {

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

    }

}

@media(max-width:768px) {

    .research-intro-grid {

        grid-template-columns: 1fr;

    }

    .research-intro-content h2,
    .section-heading h2,
    .research-cta h2 {

        font-size: 32px;

    }

    .research-focus-grid,
    .featured-research-grid {

        grid-template-columns: 1fr;

    }

}

/*==================================================
PORCELAIN TILE PROJECT DETAIL
==================================================*/
.project-detail-page{background:#f6f8f6;color:#26362b;}
.project-detail-page .project-hero{position:relative;overflow:hidden;padding:94px 0 106px;background:#123b24;color:#fff;}
.project-detail-page .project-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 87% 18%,rgba(225,184,74,.24),transparent 22%),linear-gradient(118deg,#102e1f 0%,#14512e 100%);}
.project-detail-page .project-hero::after{content:"";position:absolute;right:-120px;bottom:-270px;width:580px;height:580px;border:1px solid rgba(240,203,105,.3);border-radius:50%;box-shadow:0 0 0 60px rgba(240,203,105,.06),0 0 0 125px rgba(240,203,105,.035);}
.project-detail-page .project-hero .container{position:relative;z-index:1;}
.project-detail-page .project-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);gap:72px;align-items:center;}
.project-detail-page .project-hero .section-tag,.project-detail-page .section-title .section-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 17px;padding:7px 11px;border-radius:20px;background:rgba(242,199,88,.16);color:#f3cb69;font-size:11px;font-weight:800;letter-spacing:.12em;}
.project-detail-page .project-hero-content h1{max-width:760px;margin:0;color:#fff;font-size:clamp(39px,4.6vw,63px);line-height:1.08;letter-spacing:-.045em;}
.project-detail-page .project-hero-content>p{max-width:630px;margin:23px 0 0;color:#dceade;font-size:17px;line-height:1.82;}
.project-detail-page .project-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:31px;}
.project-detail-page .project-badges span{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid rgba(255,255,255,.17);border-radius:7px;background:rgba(255,255,255,.08);color:#f2f7f2;font-size:13px;font-weight:600;}
.project-detail-page .project-badges i{color:#f4c85d;}
.project-detail-page .project-hero-image{position:relative;max-width:455px;justify-self:end;}
.project-detail-page .project-hero-image::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid rgba(243,202,100,.52);border-radius:17px;}
.project-detail-page .project-hero-image img{position:relative;z-index:1;display:block;width:100%;height:380px;object-fit:cover;border-radius:16px;box-shadow:0 24px 48px rgba(0,0,0,.25);}
.project-detail-page .project-details{padding:76px 0 100px;background:#f6f8f6;}
.project-detail-page .project-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:62px;align-items:start;}
.project-detail-page .project-sidebar{position:sticky;top:25px;display:grid;gap:18px;}
.project-detail-page .info-card{padding:24px 22px;border:1px solid #dce6de;border-radius:14px;background:#fff;box-shadow:0 9px 24px rgba(20,50,29,.05);}
.project-detail-page .info-card h3{margin:0 0 18px;color:#17361f;font-size:16px;}
.project-detail-page .info-card h3::after{content:"";display:block;width:32px;height:3px;margin-top:10px;border-radius:4px;background:#e2b446;}
.project-detail-page .info-card ul{display:grid;gap:15px;margin:0;padding:0;list-style:none;}
.project-detail-page .info-card li{display:grid;gap:3px;padding-bottom:14px;border-bottom:1px solid #edf1ed;}
.project-detail-page .info-card li:last-child{padding-bottom:0;border-bottom:0;}
.project-detail-page .info-card strong{color:#769079;font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.project-detail-page .info-card li span{color:#283d2d;font-size:13px;line-height:1.45;font-weight:600;}
.project-detail-page .sdgs{display:flex;gap:8px;flex-wrap:wrap;margin:0;}
.project-detail-page .sdgs span{padding:7px 10px;border:1px solid #bcd4c0;border-radius:6px;background:#eef6ef;color:#0e5d2f;font-size:11px;font-weight:800;}
.project-detail-page .project-main>h2{margin:0 0 14px;color:#17361f;font-size:31px;letter-spacing:-.03em;}
.project-detail-page .project-main>h2::before{content:"Project summary";display:block;margin-bottom:10px;color:#0e5d2f;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.project-detail-page .project-main>p{max-width:760px;margin:0;padding:0 0 47px;color:#607064;font-size:16px;line-height:1.9;border-bottom:1px solid #dce6de;}
.project-detail-page .project-main>section{padding:68px 0;border-bottom:1px solid #dce6de;}
.project-detail-page .project-main>section:last-child{border-bottom:0;padding-bottom:0;}
.project-detail-page .project-main .container{width:100%;max-width:none;margin:0;padding:0;}
.project-detail-page .section-title{max-width:730px;margin:0 0 30px;text-align:left;}
.project-detail-page .section-title .section-tag{margin-bottom:12px;background:#e7f2e9;color:#0e5d2f;}
.project-detail-page .section-title h2{margin:0;color:#17361f;font-size:clamp(28px,3vw,39px);line-height:1.18;letter-spacing:-.035em;}
.project-detail-page .section-title>p{margin:14px 0 0;color:#6a786d;line-height:1.8;}
.project-detail-page .challenge-card{display:grid;grid-template-columns:50px minmax(0,1fr);gap:19px;max-width:820px;padding:28px 30px;border-left:4px solid #d9a936;border-radius:0 12px 12px 0;background:#fff8e9;}
.project-detail-page .challenge-card>i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#f3d37d;color:#745206;font-size:18px;}
.project-detail-page .challenge-card p{margin:0;color:#5a573f;line-height:1.83;}
.project-detail-page .objectives-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.project-detail-page .objective-card,.project-detail-page .material-card,.project-detail-page .test-card,.project-detail-page .conclusion-card{padding:24px;border:1px solid #dce7de;border-radius:13px;background:#fff;box-shadow:0 6px 16px rgba(20,50,29,.035);transition:transform .22s ease,box-shadow .22s ease;}
.project-detail-page .objective-card:hover,.project-detail-page .material-card:hover,.project-detail-page .test-card:hover,.project-detail-page .conclusion-card:hover{transform:translateY(-4px);box-shadow:0 15px 28px rgba(20,50,29,.09);}
.project-detail-page .objective-card>i,.project-detail-page .material-card>i,.project-detail-page .test-card>i,.project-detail-page .conclusion-card>i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:19px;border-radius:10px;background:#e6f2e8;color:#0e5d2f;font-size:17px;}
.project-detail-page .objective-card h3,.project-detail-page .material-card h3,.project-detail-page .conclusion-card h3{margin:0 0 9px;color:#1c3d25;font-size:17px;line-height:1.35;}
.project-detail-page .objective-card p,.project-detail-page .material-card p,.project-detail-page .conclusion-card p{margin:0;color:#69776c;font-size:13px;line-height:1.75;}
.project-detail-page .materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
.project-detail-page .material-card{min-height:172px;}
.project-detail-page .methodology-section{position:relative;}
.project-detail-page .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;counter-reset:steps;}
.project-detail-page .timeline-item{position:relative;min-height:190px;padding:51px 22px 22px;border:1px solid #dce7de;border-radius:13px;background:#fff;}
.project-detail-page .timeline-item::before{counter-increment:steps;content:"0" counter(steps);position:absolute;top:17px;right:18px;color:#d7e6d9;font-size:31px;font-weight:800;line-height:1;}
.project-detail-page .timeline-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:17px;border-radius:9px;background:#0e5d2f;color:#f2cb65;font-size:16px;}
.project-detail-page .timeline-item h3{margin:0 0 8px;color:#17361f;font-size:16px;}
.project-detail-page .timeline-item p{margin:0;color:#68766b;font-size:13px;line-height:1.7;}
.project-detail-page .tests-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.project-detail-page .test-card{display:flex;align-items:center;gap:13px;padding:17px;min-height:82px;}
.project-detail-page .test-card>i{flex:0 0 37px;width:37px;height:37px;margin:0;border-radius:50%;font-size:15px;}
.project-detail-page .test-card h3{margin:0;color:#294530;font-size:14px;line-height:1.35;}
.project-detail-page .results-section{margin-top:68px;padding:46px!important;border:0!important;border-radius:17px;background:#153d26;}
.project-detail-page .results-section .section-title .section-tag{background:rgba(255,255,255,.1);color:#eecb70;}
.project-detail-page .results-section .section-title h2{color:#fff;}
.project-detail-page .results-section .section-title>p{color:#d1e0d4;}
.project-detail-page .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.project-detail-page .result-card{padding:20px 15px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);}
.project-detail-page .result-card h1{margin:0 0 7px;color:#f1c85e;font-size:25px;line-height:1.1;}
.project-detail-page .result-card p{margin:0;color:#e0ebe2;font-size:12px;line-height:1.5;}
.project-detail-page .conclusion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
.project-detail-page .recommendation-section{padding-bottom:0!important;}
.project-detail-page .recommendation-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;}
.project-detail-page .recommendation-list>div{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;border-radius:9px;background:#eaf4ec;color:#36573d;font-size:13px;font-weight:600;line-height:1.5;}
.project-detail-page .recommendation-list i{margin-top:2px;color:#0e8a46;}
@media(max-width:900px){
    .project-detail-page .project-hero-grid{grid-template-columns:1fr;gap:40px;}
    .project-detail-page .project-hero-image{max-width:640px;justify-self:start;}
    .project-detail-page .project-layout{grid-template-columns:1fr;gap:35px;}
    .project-detail-page .project-sidebar{position:static;grid-template-columns:1.35fr .65fr;}
    .project-detail-page .timeline{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
    .project-detail-page .project-hero{padding:66px 0 76px;}
    .project-detail-page .project-hero-content h1{font-size:38px;}
    .project-detail-page .project-hero-image img{height:260px;}
    .project-detail-page .project-details{padding:55px 0 70px;}
    .project-detail-page .project-sidebar{grid-template-columns:1fr;}
    .project-detail-page .project-main>section{padding:50px 0;}
    .project-detail-page .challenge-card{grid-template-columns:1fr;padding:23px;}
    .project-detail-page .objectives-grid,.project-detail-page .materials-grid,.project-detail-page .timeline,.project-detail-page .tests-grid,.project-detail-page .results-grid,.project-detail-page .conclusion-grid,.project-detail-page .recommendation-list{grid-template-columns:1fr;}
    .project-detail-page .results-section{margin-top:48px;padding:27px 22px!important;}
}

/* Eggshell powder and charcoal ash project illustration */
.eggshell-project-page .project-hero-illustration{position:relative;display:block;min-height:380px;overflow:hidden;border-radius:16px;background:radial-gradient(circle at 24% 25%,rgba(255,255,255,.16),transparent 22%),linear-gradient(145deg,#d7c89f 0%,#9f8460 46%,#403d38 100%);box-shadow:0 24px 48px rgba(0,0,0,.25);}
.eggshell-project-page .project-hero-illustration::before{content:"";position:absolute;inset:15px -16px -16px 16px;z-index:-1;border:1px solid rgba(243,202,100,.52);border-radius:17px;}
.eggshell-project-page .project-hero-illustration::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.13),transparent 38%);pointer-events:none;}
.material-bowl{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:174px;height:174px;border-radius:50%;box-shadow:inset 0 0 0 13px rgba(255,255,255,.23),0 18px 22px rgba(35,28,20,.26);font-size:13px;text-align:center;line-height:1.35;transform:rotate(-8deg);}
.material-bowl i{margin-bottom:10px;font-size:37px;}
.material-bowl--eggshell{top:43px;left:34px;background:#eee7d3;color:#9c7e45;}
.material-bowl--charcoal{right:31px;bottom:31px;background:#343536;color:#e8bc5b;transform:rotate(7deg);}
.material-bowl--charcoal b{color:#f3f3ed;}
.concrete-cube{position:absolute;right:70px;top:57px;display:flex;align-items:center;justify-content:center;width:124px;height:124px;border-radius:8px;background:linear-gradient(135deg,#b3b2aa,#70736e);box-shadow:inset -12px -12px 0 rgba(38,43,39,.2),13px 17px 20px rgba(35,28,20,.27);color:#f2f0e6;font-size:22px;font-weight:800;letter-spacing:.06em;transform:rotate(10deg);}
.project-image--eggshell{position:relative;overflow:hidden;min-height:235px;background:linear-gradient(135deg,#e6d9b5,#9d805e 55%,#4a4945);}
.project-image--eggshell::before{content:"";position:absolute;left:17px;top:30px;width:104px;height:104px;border:10px solid rgba(255,255,255,.38);border-radius:50%;background:#eee7d3;box-shadow:0 12px 15px rgba(34,30,25,.2);}
.project-image--eggshell::after{content:"";position:absolute;right:22px;bottom:20px;width:108px;height:108px;border:10px solid rgba(255,255,255,.14);border-radius:50%;background:#373938;box-shadow:0 12px 15px rgba(34,30,25,.24);}
.project-image--eggshell .project-material{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;}
.project-material--egg{left:49px;top:62px;color:#9c7e45;font-size:31px;}
.project-material--ash{right:56px;bottom:52px;color:#e8bc5b;font-size:28px;}
.project-material--cube{right:57px;top:42px;width:63px;height:63px;border-radius:6px;background:linear-gradient(135deg,#bdc0b7,#777c75);box-shadow:inset -7px -7px 0 rgba(31,40,33,.18),7px 10px 13px rgba(34,30,25,.22);color:#f6f4ec;font-size:13px;font-weight:800;transform:rotate(10deg);}
.project-image--eggshell .project-overlay{z-index:3;}
@media(max-width:620px){
    .eggshell-project-page .project-hero-illustration{min-height:280px;}
    .material-bowl{width:126px;height:126px;font-size:11px;}
    .material-bowl i{font-size:27px;}
    .material-bowl--eggshell{top:28px;left:23px;}
    .material-bowl--charcoal{right:21px;bottom:19px;}
    .concrete-cube{right:53px;top:36px;width:91px;height:91px;font-size:17px;}
}