:root {
    --primary-color: #1a4d2e; /* Deep green for growth/foundation */
    --secondary-color: #ff9f1c; /* Warm action color */
    --text-dark: #333;
    --text-light: #fff;
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: var(--text-dark); 
}

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

.site-header{
    position: sticky;
    top:0;
    z-index:1000;

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

    padding:12px 6%;

    background:#ffffff;

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

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

.logo img{
    height:65px;
    width:auto;
    display:block;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:32px;

    list-style:none;
    margin:0;
    padding:0;
}

.nav-links a{
    text-decoration:none;
    color:#222;
    font-weight:600;
    transition:.3s;
    position:relative;
}

.nav-links a:hover{
    color:var(--primary-color);
}

.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:0;

    height:2px;

    background:var(--secondary-color);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

.btn-donate{

    background:var(--secondary-color);

    color:#fff !important;

    padding:12px 22px;

    border-radius:30px;

    transition:.3s;

}

.btn-donate:hover{

    background:var(--primary-color);

}

.menu-toggle{

    display:none;

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;

}
/* Slideshow Container */



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

.hero-slider{

    position:relative;

    width:100%;

    height:90vh;

    overflow:hidden;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 1.2s ease;

    animation:zoomHero 15s linear infinite;

}

.slide.active{

    opacity:1;

    z-index:2;

}

.slide-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.hero-content{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    max-width:700px;

    margin-left:8%;

    color:white;

}

.hero-tag{

    display:inline-block;

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

    padding:10px 18px;

    border-radius:30px;

    margin-bottom:20px;

    font-weight:600;

    letter-spacing:.5px;

    backdrop-filter:blur(8px);

}

.hero-content h1{

    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-content p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:650px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#ff9f1c;

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:40px;

    font-weight:bold;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid white;

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:40px;

    transition:.35s;

}

.btn-secondary:hover{

    background:white;

    color:#1a4d2e;

}

@keyframes zoomHero{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

/* Intro Section */
/*=====================================
IMPACT SECTION
=====================================*/

.impact-section{

padding:90px 8%;

background:#f7f9fb;

}

.impact-header{

max-width:750px;

margin:auto;

text-align:center;

margin-bottom:60px;

}

.impact-header h2{

font-size:2.6rem;

color:var(--primary-color);

margin-bottom:20px;

}

.impact-header p{

font-size:1.1rem;

line-height:1.8;

color:#666;

}

.impact-grid{

display:grid;

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

gap:30px;

}

.impact-card{

background:white;

padding:35px;

border-radius:18px;

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

transition:.35s;

}

.impact-card:hover{

transform:translateY(-8px);

}

.impact-icon{

font-size:55px;

margin-bottom:20px;

}

.impact-card h3{

margin-bottom:15px;

color:var(--primary-color);

}

.impact-card p{

line-height:1.7;

color:#666;

}
/*======================================
MISSION SECTION
======================================*/

.mission-section{

padding:100px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.mission-image img{

width:100%;

border-radius:20px;

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

display:block;

}

.section-tag{

display:inline-block;

background:#eef7f0;

color:var(--primary-color);

padding:10px 18px;

border-radius:30px;

font-weight:bold;

margin-bottom:20px;

}

.mission-content h2{

font-size:2.6rem;

margin-bottom:25px;

color:var(--primary-color);

}

.mission-content p{

line-height:1.9;

color:#555;

margin-bottom:30px;

}

.mission-boxes{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:35px;

}

.mission-box{

background:#fff;

padding:25px;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,.07);

border-top:4px solid var(--secondary-color);

}

.mission-box h3{

margin-bottom:12px;

color:var(--primary-color);

}

.learn-btn{

display:inline-block;

background:var(--primary-color);

color:#fff;

padding:15px 30px;

border-radius:35px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.learn-btn:hover{

background:var(--secondary-color);

}

@media(max-width:900px){

.mission-section{

grid-template-columns:1fr;

}

.mission-boxes{

grid-template-columns:1fr;

}

.mission-content h2{

font-size:2rem;

}

}

/* Footer */
footer { 
    background: #111; 
    color: #aaa; 
    text-align: center; 
    padding: 3rem 5%; 
    margin-top: 2rem; 
}

footer p { 
    margin: 0.5rem 0; 
    font-size: 0.95rem; 
}
  

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .content-section { 
            max-width: 900px; 
            margin: 4rem auto; 
            padding: 0 5%; 
            line-height: 1.8; 
            color: var(--text-dark); 
        }
        
        .content-section h2 { 
            color: var(--primary-color); 
            border-bottom: 2px solid var(--secondary-color); 
            padding-bottom: 0.5rem; 
            margin-top: 2.5rem; 
        }
        
        .governance-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 2rem; 
            margin-top: 2rem; 
        }
        
        .gov-card { 
            background: #f4f6f5; 
            padding: 2rem; 
            border-left: 4px solid var(--secondary-color); 
            border-radius: 6px; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .gov-card h3 {
            margin-top: 0;
            color: var(--primary-color);
        }   

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .objectives-container {
            max-width: 1000px;
            margin: 4rem auto;
            padding: 0 5%;
        }

        .objectives-intro {
            text-align: center;
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 3rem;
            line-height: 1.6;
        }

        .objectives-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .objective-card {
            background: #fff;
            border: 1px solid #eee;
            border-top: 4px solid var(--primary-color);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .objective-card:hover {
            transform: translateY(-5px);
            border-top-color: var(--secondary-color);
        }

        .objective-card h3 {
            color: var(--primary-color);
            margin-top: 0;
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }

        .objective-card ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .objective-card li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 0.8rem;
            line-height: 1.5;
            color: var(--text-dark);
        }

        .objective-card li::before {
            content: "•";
            color: var(--secondary-color);
            font-weight: bold;
            font-size: 1.5rem;
            position: absolute;
            left: 0;
            top: -4px;
        }

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .programs-container {
            max-width: 1100px;
            margin: 4rem auto;
            padding: 0 5%;
        }

        .programs-intro {
            text-align: center;
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 3rem;
            line-height: 1.6;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .programs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
        }

        .program-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .program-card:hover {
            transform: translateY(-5px);
        }

        .program-image {
            height: 200px;
            background-color: #e0e0e0;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        /* Overlay text on image placeholder */
        .program-image::after {
            content: "Image Placeholder";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #777;
            font-weight: bold;
        }

        .program-content {
            padding: 2rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .program-content h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 1rem;
            font-size: 1.4rem;
        }

        .program-content p {
            color: var(--text-dark);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .program-action {
            margin-top: auto;
            text-align: right;
        }
        
        .program-action a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: color 0.3s;
        }

        .program-action a:hover {
            color: var(--primary-color);
        }

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .donate-container {
            max-width: 1000px;
            margin: 4rem auto;
            padding: 0 5%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        @media (max-width: 768px) {
            .donate-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        .donate-info h2 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .donate-info p {
            line-height: 1.6;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
        }

        .donate-info ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin-bottom: 2rem;
            line-height: 1.6;
            color: var(--text-dark);
        }

        .coming-soon-badge {
            display: inline-block;
            background: var(--secondary-color);
            color: var(--text-dark);
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .donate-form-container {
            background: #fff;
            padding: 2.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-top: 4px solid var(--secondary-color);
        }

        .donate-form-container h3 {
            margin-top: 0;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        
        .donate-form-container p {
            margin-bottom: 1.5rem;
            color: #555;
            line-height: 1.5;
            font-size: 0.95rem;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        .form-group input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            font-family: inherit;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .btn-submit {
            background: var(--secondary-color);
            color: var(--text-dark);
            padding: 1rem;
            width: 100%;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 1rem;
        }

        .btn-submit:hover {
            background: #e38d19;
        }

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .volunteer-container {
            max-width: 1100px;
            margin: 4rem auto;
            padding: 0 5%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        @media (max-width: 768px) {
            .volunteer-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        .volunteer-info h2 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .volunteer-info p {
            line-height: 1.6;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
        }

        .role-list {
            margin-top: 2rem;
        }

        .role-item {
            background: #f4f6f5;
            padding: 1.5rem;
            border-left: 4px solid var(--secondary-color);
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }

        .role-item h3 {
            margin-top: 0;
            color: var(--primary-color);
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .role-item p {
            margin: 0;
            font-size: 0.95rem;
        }

        .volunteer-form-container {
            background: #fff;
            padding: 2.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-top: 4px solid var(--primary-color);
        }

        .volunteer-form-container h3 {
            margin-top: 0;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            font-family: inherit;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .btn-submit {
            background: var(--primary-color);
            color: var(--text-light);
            padding: 1rem;
            width: 100%;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 1rem;
        }

        .btn-submit:hover {
            background: #123620;
        }

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }

        .gallery-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 5%;
        }

        .gallery-intro {
            text-align: center;
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 3rem;
            line-height: 1.6;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            aspect-ratio: 4 / 3;
            background-color: #eee;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

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

        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 1.5rem 1rem 1rem;
            box-sizing: border-box;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .gallery-caption {
            opacity: 1;
        }

        .gallery-caption h3 {
            margin: 0 0 0.2rem 0;
            font-size: 1.1rem;
        }

        .gallery-caption p {
            margin: 0;
            font-size: 0.9rem;
            color: #ddd;
        }

        .page-header { 
            background: var(--primary-color); 
            color: var(--text-light); 
            padding: 4rem 5%; 
            text-align: center; 
        }
        
        .page-header h1 { 
            margin: 0; 
            font-size: 2.8rem; 
        }
        
        .contact-container {
            max-width: 1100px;
            margin: 4rem auto;
            padding: 0 5%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        @media (max-width: 768px) {
            .contact-container {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
        }

        .contact-info h2 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 1.5rem;
        }

        .info-block {
            margin-bottom: 2rem;
        }

        .info-block h3 {
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .info-block p {
            color: var(--text-dark);
            line-height: 1.6;
            margin: 0;
        }

        .contact-form-container {
            background: #fff;
            padding: 2.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-top: 4px solid var(--primary-color);
        }

        .contact-form-container h3 {
            margin-top: 0;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            font-family: inherit;
            box-sizing: border-box;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .btn-submit {
            background: var(--primary-color);
            color: var(--text-light);
            padding: 1rem;
            width: 100%;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 1rem;
        }

        .btn-submit:hover {
            background: #123620;
        }
        @media (max-width:900px){

.menu-toggle{

display:block;

}

.navbar{

position:absolute;

top:90px;

left:0;

width:100%;

background:#fff;

display:none;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.navbar.active{

display:block;

}

.nav-links{

flex-direction:column;

padding:25px;

gap:20px;

}

}
@media(max-width:768px){

.hero-slider{

height:75vh;

}

.hero-content{

margin:0 25px;

}

.hero-content h1{

font-size:2.4rem;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

text-align:center;

}

}