/*====== CSS STYLES =======*/
/*:root{*/

/*--theme-color:#ff6a00;*/
/*--theme-dark:#e45700;*/
/*--text-dark:#222;*/
/*--text-light:#fff;*/

/*}*/

/*:root{*/

/*--theme-primary:#1A7A50;*/
/*--theme-dark:#2D4A5C;*/
/*--theme-accent:#F4B942;*/
/*--theme-light:#EFE6C7;*/

/*}*/
:root{

--theme-primary:#4d7d1b;     /*Primary green*/
--theme-dark-green:#9BC264;   /* blue */
--theme-secondary:#021b32;   /*Dark Forest*/
--theme-accent:#d64805;    /*Accent Gold*/
--theme-highlight:#F5EFDE;   /*Light Earth*/
--theme-dark:#09637E;
--theme-white:#fff;
--bg-soft:#F5F2EC;

}
body{
margin:0;
font-family:Poppins,sans-serif;
font-size:1.0rem;
background:#f4f5f7;
}

/* ======= Menu Navbar =========== */
*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Poppins;
}

h1{font-size:2.6rem; color:var(--theme-secondary);}
h2{font-size:2.3rem; color:var(--theme-primary);}
h3{font-size:1.8rem; color:var(--theme-accent);}
.text-center{text-align:center;}
.text-justify{text-align:justify;}
/* header */
.header{
position:sticky;
top:0;
left:0;
width:100%;
z-index:999;
transition:top 0.3s ease, transform 0.3s ease;
background:#fff;
box-shadow:0 2px 15px rgba(0,0,0,0.08);
}

/* header reveal animation */

.header-reveal{
transform:translateY(0);
opacity:1;
}

.header-hidden{
transform:translateY(-20px);
opacity:0.95;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 10px;
max-width:1200px;
margin:auto;

}
.text-box{width:100%; padding:15px; border-radius:15px; background:#fff; margin:30px 0;}
.text-box li {margin-left:20px;}
.content {padding-top:450px; position:relative;}
.content .picture {position:absolute; top:0; left:0; right:0;}
.picture img{width:100%;}
.no-pic img{width:100%;}
/* logo */

.logo{
width:35%;
display:flex;
align-items:center;
gap:10px;
font-weight:600;
}

.logo img{
height:70px;
border-radius:50%;
border:1px solid #eee;
}
.site-name {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.site-name strong{
font-family:'Syne',sans-serif;
font-size:1.1rem;
color:var(--theme-secondary); 
}

.site-name small{
font-size:10px;
letter-spacing:2px;
opacity:.6;
}

/* nav */

.nav {
width:55%;
display:flex;
gap:20px;
align-items:center;
}
.nav .menu {
display:flex;
gap:28px;
align-items:center;
}
.nav .menu a{
position:relative;
display:block;
padding:12px 12px;
color:#1A3020;
text-decoration:none;
font-weight:600;
z-index:1;
}

.nav .menu a::before{

content:"";

position:absolute;

left:-5px;
top:50%;

transform:translateY(-50%) scaleX(0);

width:95px;
height:38px;

background:var(--theme-accent);

border-radius:20px 40px 20px 40px;

opacity:.85;

z-index:-1;

transition:0.3s;

}

.nav .menu a:hover::before{
transform:translateY(-50%) scaleX(1);
}

.nav .menu a:hover{
color:#fff;
}

.menu a.active{

color:#C07828;

font-weight:600;

}

/* donate button */

.donate-btn{
border:1px solid red;
/*background:var(--theme-primary);*/
color:#fff !important;
padding:8px 28px;
border-radius:6px;
 background-image: linear-gradient(to right, var(--theme-primary) 0%, var(--theme-dark-green) 51%, var(--theme-primary) 100%);
transition:all .4s ease;
background-size:300% 100%;    
}
.donate-btn:hover{

background-position:right center;

transform:translateY(-4px) scale(1.05);

box-shadow:
0 10px 25px rgba(0,0,0,0.25),
0 0 18px rgba(192,120,40,0.6);

}
/* hamburger */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}
.titleBar{
display:none;
}

/* Hero Class*/
/*.hero{*/
/*background:#F3F4F4;*/
/*background:*/
/*linear-gradient(*/
/*rgba(0,0,0,0.65),*/
/*rgba(0,0,0,0.75)*/
/*),*/
/*url("/images/asset/swachh-sankal-volenteers-working-for-cleaness-in-public-park.png");*/

/*background-size:cover;*/
/*background-position:center;*/

/*min-height:95vh;*/

/*display:flex;*/
/*align-items:center;*/

/*position:relative;*/

/*color:var(--text-light);*/

/*}*/

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

.hero{

padding:100px 20px;

background:var(--bg-soft);

}
.container{
width:90%;
max-width:1200px;
margin:auto;

}

/* grid */

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}
/* spinner */
.spinner{
width:34px;
height:34px;
border:4px solid #ddd;
border-top:3px solid var(--theme-accent);
border-radius:50%;
animation:spin 0.8s linear infinite;
display:inline-block;
vertical-align:middle;
margin-left:8px;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* hero text */

.hero-tag{

display:inline-block;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#C07828;

margin-bottom:20px;

}

.hero h1{

font-family:'Playfair Display', serif;

font-size:2.2rem;

line-height:1.1;

color:var(--theme-secondary);

margin-bottom:25px;

}

.hero h1 span{

color:var(--theme-accent);

}

.hero p{

font-size:16px;

line-height:1.7;

color:#444;

margin-bottom:30px;

}

/* buttons */

.hero-buttons{

display:flex;

gap:15px;

}

.btn-primary{

background:linear-gradient(45deg,#C07828,#e59c3a);

color:#fff;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

font-weight:600;

display:inline-block;

transition:all .35s ease;

position:relative;

overflow:hidden;

}

/* hover effect */

.btn-primary:hover{

background:linear-gradient(45deg,#e59c3a,#C07828,#4988C4);

transform:translateY(-4px) scale(1.05);

box-shadow:
0 10px 25px rgba(0,0,0,0.25),
0 0 18px rgba(192,120,40,0.6);

}

.btn-outline{

border:2px solid #1A3020;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

color:#1A3020;

font-weight:600;

}

.btn-outline:hover{

background:#1A3020;

color:#fff;

}

/* image */

.hero-image{

position:relative;

}

.hero-circle{

width:340px;
height:340px;

border-radius:50%;

overflow:hidden;

margin-left:auto;

position:relative;

border:6px solid var(--theme-primary);

transition:0.4s ease;

/* shadow */

box-shadow:
0 25px 50px rgba(0,0,0,0.25),
0 0 25px rgba(192,120,40,0.35);

/* floating */

animation:heroFloat 6s ease-in-out infinite;

}
.hero-circle:hover{background: rgba(255,255,255, 0.2);}
/* image */

.hero-circle img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

}

/* ===== hover effect ===== */

.hero-circle:hover{

transform:scale(1.25);

/* colorful border */

border:6px solid transparent;

background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(45deg,#2D7A45,#C07828,#4AAC6A,#C07828) border-box;

/* stronger glow */

box-shadow:
0 35px 70px rgba(0,0,0,0.35),
0 0 40px rgba(192,120,40,0.6);

}
@keyframes heroFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-14px);
}

100%{
transform:translateY(0px);
}

}
/* stat card */

.hero-stat{

position:absolute;

bottom:30px;
left:100px;

background:var(--theme-primary);

color:#fff;

padding:20px 30px;

border-radius:12px;

text-align:center;
transition:all .4s ease;
}
.hero-stat:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:
0 10px 25px rgba(0,0,0,0.25),
0 0 18px rgba(192,120,40,0.6);
}
.hero-stat strong{

font-size:30px;

display:block;

}

.hero-stat span{

font-size:12px;

text-transform:uppercase;

}


/*
.submit-btn{

position:relative;

width:150px;
height:50px;

border:3px solid #C07828;

border-radius:50px;

background:var(--bg-soft);

cursor:pointer;

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

transition:.3s;

}

/* text */

/*.submit-btn .btn-text{*/

/*position:absolute;*/

/*font-weight:600;*/

/*letter-spacing:2px;*/

/*color:#1A3020;*/

/*}*/

/* icon */

/*.submit-btn .btn-icon{*/

/*position:absolute;*/

/*width:22px;*/

/*fill:transparent;*/

/*}*/

/* loading state */

/*.submit-btn.loading{*/

/*width:50px;*/

/*border-left:3px solid #2D7A45;*/
/*border-bottom:3px solid #2D7A45;*/

/*animation:spin 1.8s forwards;*/

/*}*/

/* hide text */

/*.submit-btn.loading .btn-text{*/
/*color:transparent;*/
/*}*/

/* show icon */

/*.submit-btn.loading .btn-icon{*/
/*animation:check .4s 2s forwards;*/
/*}*/

/* animations */

/*@keyframes spin{*/

/*80%{*/
/*border:3px solid transparent;*/
/*border-left:3px solid #2D7A45;*/
/*}*/

/*100%{*/
/*transform:rotate(1080deg);*/
/*border:3px solid #2D7A45;*/
/*}*/

/*}*/

/*@keyframes check{*/
/*to{*/
/*fill:#2D7A45;*/
/*}*/
/*}*/
/**/*/
/* mobile */
.programs-section{

padding:100px 20px;

background:#F5EFDE;

}

/* header */

.section-header{

text-align:center;
margin-bottom:70px;

}

.section-tag{

display:inline-block;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#C07828;

margin-bottom:10px;

}

.section-header h2{

font-size:40px;

color:#1A3020;

margin-bottom:15px;

}

.section-header p{

max-width:600px;

margin:auto;

color:#555;

line-height:1.7;

}

/* grid */

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
}
/* card */

.program-card{

background:#fff;

padding:35px 28px;

border-radius:18px;

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

transition:all .35s ease;

position:relative;

overflow:hidden;

}

/* gradient border */

/* hover */

.program-card:hover{

transform:translateY(-10px);

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

}

/* icon */
.card-icon { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.card-icon{font-size:60px; margin-bottom:20px;}
 .program-card:nth-child(1) { background: var(--theme-primary); color: #fff; }
  .program-card:nth-child(2) { background: var(--theme-secondary); color: #f5efde; }
  .program-card:nth-child(3) { background: var(--theme-accent); color: #fff; }
  .program-card:nth-child(4) { background: var(--theme-accent); color: #fff; }
  .program-card:nth-child(5) { background: var(--theme-primary); color: #f5efde; }
  .program-card:nth-child(6) { background: var(--theme-secondary); color: #fff; }
   
.program-card .card-icon { background: rgba(255,255,255, 0.2); }
/* title */

.program-card h3{

font-size:22px;

margin-bottom:12px;


}

/* text */

.program-card p{

font-size:15px;
line-height:1.7;

margin-bottom:20px;

}

/* button */

.card-btn{

text-decoration:none;

font-size:14px;

font-weight:600;

color:#C07828;

transition:.3s;

}

.card-btn:hover{

color:#2D7A45;

}
.card-btn2{

text-decoration:none;

font-size:14px;

font-weight:600;

color:#2d7a45;

transition:.3s;

}

.card-btn2:hover{

color:#1a3020;

}
/* SECTION */

.about-section{
padding:70px 0;
background:var(--bg-soft);
}

.about-container{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* IMAGE GRID */

.about-images{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.img-card{
height:170px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:white;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.4s;
position:relative;
overflow:hidden;
}
.img-card:nth-child(1){background:var(--theme-primary);}
.img-card:nth-child(2){background:var(--theme-highlight);}
.img-card:nth-child(3){background:var(--theme-accent);}
.img-card:nth-child(4){background:var(--theme-secondary);}
.img-card span{width:60px; height:60px; background: rgba(255,255,255, 0.2); border-radius:50%; }
/* shine effect */

.img-card:before{
content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
top:-100%;
left:-100%;
transition:0.6s;
}

.img-card:hover:before{
top:100%;
left:100%;
}

.img-card:hover{
transform:translateY(-8px) scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* CONTENT */

.about-tag{

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

font-size:14px;

letter-spacing:3px;

color:#C07828;

margin-bottom:20px;

}

.about-content h2{
font-family:'Playfair Display', serif;
font-size:34px;
line-height:1.3;
color:var(--theme-secondary);
margin-bottom:20px;
}

.about-content h2 em{
font-family:'Playfair Display', serif;
color:var(--theme-primary);
font-style:normal;
}

.about-content p{
color:#555;
line-height:1.7;
margin-bottom:25px;
}

/* BUTTONS */

.about-buttons{
display:flex;
gap:15px;
margin-bottom:30px;
}

.btn-primary{
background:var(--theme-primary);
color:white;
padding:12px 26px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:0.3s;
box-shadow:0 8px 20px rgba(45,122,69,0.4);
}

.btn-primary:hover{
background:var(--theme-secondary);
transform:translateY(-3px);
}

.btn-outline{
border:2px solid var(--theme-primary);
padding:11px 24px;
border-radius:30px;
text-decoration:none;
color:var(--theme-primary);
font-weight:600;
transition:0.3s;
}

.btn-outline:hover{
background:var(--theme-primary);
color:white;
}

/* STATS */

.about-stats{
display:flex;
gap:40px;
}

.stat h3{
color:var(--theme-accent);
font-size:26px;
margin-bottom:3px;
}

.stat span{
font-size:14px;
color:#555;
}


/* ===== Donation Strip ===== */

.donation-strip{

margin:80px auto;

max-width:1200px;

border-radius:22px;

padding:60px 40px;

background:var(--theme-secondary);

color:#fff;

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

position:relative;

overflow:hidden;

}

/* light effect */

.donation-strip::before{

content:"";

position:absolute;

width:300px;
height:300px;

background:rgba(255,255,255,0.08);

border-radius:50%;

top:-100px;
right:-100px;

filter:blur(60px);

}

/* layout */

.donation-strip .inner{

display:grid;

grid-template-columns:1fr auto;

gap:40px;

align-items:center;

}

/* heading */

.donation-strip h2{

font-size:34px;

margin-bottom:10px;

font-weight:700;

}

/* text */

.donation-strip p{

font-size:15px;

opacity:.9;

}

/* ===== Donation Buttons ===== */

.donation-amounts{

display:flex;

flex-wrap:wrap;

gap:12px;

}

/* button */

.amt-btn{

padding:12px 24px;

border-radius:40px;

font-size:14px;

font-weight:600;

cursor:pointer;

border:2px solid rgba(255,255,255,0.35);

background:var(--theme-secondary);

color:#fff;

backdrop-filter:blur(8px);

transition:.35s;

}

/* hover */

.amt-btn:hover{

background:var(--theme-accent);

border-color:#C07828;

transform:translateY(-3px) scale(1.05);

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

}

/* ===== Stats Section ===== */

.stats{

display:grid;

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

margin:80px auto;

max-width:1200px;

border-radius:18px;

overflow:hidden;

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

}

/* stat card */

.stat-item{

background:#fff;

padding:45px;

text-align:center;

transition:.3s;

}

/* hover */

.stat-item:hover{

background:#F5EFDE;

transform:translateY(-6px);

}

/* numbers */

.stat-item strong{

font-size:40px;

color:#C07828;

display:block;

margin-bottom:6px;

}

/* text */

.stat-item span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#666;

}

/* divider */

.stat-item + .stat-item{

border-left:1px solid #eee;

}
/* ===== FOOTER ===== */

.footer{

background:var(--theme-secondary);

color:#fff;

padding:80px 20px 30px;

}

/* container */

.footer .container{

max-width:1200px;

margin:auto;

}

/* grid */

.footer-grid{

display:grid;

grid-template-columns:1.5fr 1fr 1fr;

gap:40px;

margin-bottom:40px;

}

/* logo */

.footer-logo{

display:flex;

align-items:center;

gap:30px;

margin-bottom:14px;

}

.logo-icon{

width:36px;
height:36px;

border-radius:50%;

background:var(--theme-primary);

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

font-size:18px;

}

.footer-logo strong{

font-size:18px;

}

.footer-logo span{

display:block;

font-size:10px;

letter-spacing:2px;

opacity:.6;

}

/* text */

.desc{

font-size:14px;

line-height:1.7;

opacity:.8;

margin-bottom:12px;

}

.raised-label{

font-size:13px;

opacity:.7;

}

.total{

font-size:26px;

font-weight:700;

color:var(--theme-accent);

}

/* gallery */

.footer-gallery{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

}

.footer-gallery div{

height:70px;

border-radius:8px;

display:flex;

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

font-size:24px;

background:var(--theme-primary);

transition:.3s;

}

.footer-gallery div:nth-child(2){

background:var(--theme-accent);

color:#1a3020;

}

.footer-gallery div:nth-child(3){

background:#f5efde;

color:#333;

}

.footer-gallery div:nth-child(4){

background:#1a3020;

}

.footer-gallery div:hover{

transform:scale(1.05);

}

/* links */

.footer h4{

margin-bottom:16px;

font-size:16px;

}

.footer-links{

list-style:none;

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

}

.footer-links a{

text-decoration:none;

color:#ddd;

font-size:14px;

transition:.3s;

}

.footer-links a:hover{

color:var(--theme-accent);

padding-left:4px;

}

/* bottom */

.footer-bottom{

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

padding-top:20px;

text-align:center;

font-size:13px;

opacity:.6;

}

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

.join-section{

position:relative;

padding:100px 20px;

background:#f7f7f7;

overflow:hidden;

}

/* background blob */

.bg-blob{

position:absolute;

width:500px;
height:500px;

background:linear-gradient(
135deg,
var(--theme-primary),
var(--theme-accent)
);

border-radius:50%;

top:-200px;
right:-150px;

opacity:.15;

filter:blur(60px);

animation:blobMove 12s infinite ease-in-out;

}

/* blob animation */

@keyframes blobMove{

0%{transform:translateY(0);}
50%{transform:translateY(40px);}
100%{transform:translateY(0);}

}

/* container */

.join-section .container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

position:relative;

}

/* ===== TEXT SIDE ===== */

.join-text h2{

font-size:36px;

color:var(--theme-secondary);

margin-bottom:20px;

}

.join-text p{

font-size:15px;

line-height:1.8;

color:#444;

margin-bottom:20px;

}

/* toggle */

.toggle-btn{

background:var(--theme-accent);

color:#fff;

border:none;

padding:10px 22px;

border-radius:30px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.toggle-btn:hover{

background:var(--theme-primary);

transform:translateY(-3px);

}

/* ===== FORM CARD ===== */

.join-form{

background:rgba(255,255,255,0.85);

backdrop-filter:blur(10px);

padding:45px;

border-radius:18px;

box-shadow:0 20px 50px rgba(0,0,0,0.12);

position:relative;

}

/* gradient accent line */

.join-form::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
var(--theme-secondary);

border-radius:18px 18px 0 0;

}

.join-form h3{

font-size:22px;

color:var(--theme-secondary);

margin-bottom:10px;

}

.join-form p{

font-size:14px;

color:#666;

margin-bottom:20px;

}

/* form */

.join-form form{

display:grid;

gap:14px;

}

/* inputs */

.join-form input{

padding:12px 14px;

border-radius:8px;

border:1px solid #ddd;

font-size:14px;

transition:.3s;

}

.join-form input:focus{

border-color:var(--theme-primary);

outline:none;

box-shadow:0 0 0 2px rgba(45,122,69,0.15);

}

/* submit */

.join-form button{

margin-top:6px;

padding:12px;

border:none;

border-radius:30px;

background:linear-gradient(
45deg,
var(--theme-secondary),
var(--theme-dark)
);

color:#fff;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.join-form button:hover{

transform:translateY(-3px) scale(1.05);

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

}
/* ===== FOOTER TOP ===== */

/* ===== FOOTER TOP ===== */

.footer-top{

background:var(--theme-primary);

padding:50px 20px;

color:#fff;

}

.footer-top-inner{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:40px;

align-items:center;

}

/* titles */

.footer-top h3{

margin-bottom:15px;

font-size:20px;

}

/* newsletter */

.newsletter form{

display:flex;

gap:10px;

}

.newsletter input{

padding:10px 14px;

border:none;

border-radius:6px;

outline:none;

width:100%;

}

.newsletter button{

padding:10px 20px;

border:none;

background:var(--theme-accent);

color:#fff;

border-radius:6px;

cursor:pointer;

transition:.3s;

}

.newsletter button:hover{

background:#a5631f;

transform:translateY(-2px);

}

/* map */

.map-box{

width:100%;

height:120px;

border-radius:8px;

overflow:hidden;

box-shadow:0 6px 20px rgba(0,0,0,.3);

}

.map-box iframe{

width:100%;

height:100%;

border:0;

}

/* social icons */

.social-icons{

display:flex;

gap:12px;

}

.social-icons a{

width:40px;
height:40px;

display:flex;

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

background:#fff;

color:var(--theme-secondary);

border-radius:50%;

font-size:16px;

transition:.3s;

}

.social-icons a:hover{

background:var(--theme-accent);

color:#fff;

transform:translateY(-3px);

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

}
/* ===== MAIN GALLERY ===== */

.main-gallery{

padding:100px 20px;

background:#f7f7f7;

}

.container{

max-width:1200px;

margin:auto;

}

/* title */

.gallery-title{

text-align:center;

font-size:36px;

color:var(--theme-secondary);

margin-bottom:10px;

}

.gallery-desc{

text-align:center;

max-width:600px;

margin:auto;

color:#666;

margin-bottom:40px;

}

/* filter buttons */

.gallery-filter{

display:flex;

justify-content:center;

gap:10px;

margin-bottom:40px;

flex-wrap:wrap;

}

.filter-btn{

padding:10px 20px;

border:none;

background:#eee;

border-radius:30px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.filter-btn.active,
.filter-btn:hover{

background:var(--theme-accent);

color:#fff;

}

/* grid */

.gallery-grid{

display:grid;

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

gap:20px;

}

/* gallery item */

.gallery-item{

position:relative;

overflow:hidden;

border-radius:14px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

/* zoom */

.gallery-item:hover img{

transform:scale(1.15);

}

/* overlay */

.overlay{

position:absolute;

bottom:0;

left:0;

width:100%;

background:linear-gradient(
transparent,
rgba(0,0,0,.7)
);

padding:20px;

color:#fff;

font-weight:600;

opacity:0;

transition:.3s;

}

.gallery-item:hover .overlay{

opacity:1;

}
/* animation start state shift 100px */

.reveal{

opacity:0;
transform:translateY(150px);

transition:all .7s ease;

}

/* visible */

.reveal.active{

opacity:1;
transform:translateY(0);

}
/* top news and updates */

.top-news-bar{
position:fixed;
top:0;
left:0;
width:100%;
background:var(--theme-accent);
color:#fff;
padding:8px 0;
z-index:998;
transition:transform 0.3s ease;
border-bottom:2px solid #FFD400;
}

.news-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
gap:15px;
padding:0 15px;
}

.news-label{
background:#fff;
color:#2d7a45;
font-weight:bold;
padding:3px 10px;
border-radius:4px;
font-size:13px;
animation:newsBlink 1s infinite;
}

@keyframes newsBlink{

0%{
background:#ffffff;
color:#2d7a45;
}

50%{
background:#ffcc00;
color:#000;
}

100%{
background:#ffffff;
color:#2d7a45;
}

}
.top-news-bar marquee{
flex:1;
font-size:14px;
}

/* hide state */

.news-hide{
transform:translateY(-100%);
}

.blog-modern{
padding:80px 20px;
background:#f6f7f9;
}

.blog-modern .container{
max-width:1200px;
margin:auto;
}

.blog-title{
text-align:center;
font-size:36px;
margin-bottom:50px;
color:#2d7a45;
}

.blog-layout{
display:grid;
grid-template-columns:2fr 2fr;
gap:20px;
align-items: stretch; /* MUST */
margin-bottom:30px;
background:#F3F4F4;
padding:10px;
padding-bottom:50px;
border-radius:10px;
}

/* Featured */

.blog-featured{
grid-row:span 2;
position:relative;
overflow:hidden;
border-radius:12px;
}

.blog-featured img{
width:100%;
object-fit:cover;
}

.blog-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:25px;
background:linear-gradient(transparent,rgba(0,0,0,0.8));
color:#fff;
}

.blog-overlay h3{
margin:10px 0;
font-size:22px;
background:#eee;
padding:6px;
border-radius:10px;
}
.blog-overlay p{
font-size:13px;
}
.btn{
padding:5px 12px;
background:#B0E4CC;
margin-top:15px;
}
/* Medium */
.blog-posts{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-rows:250px;
gap: 10px;
height: 100%; /* IMPORTANT */
}
.blog-medium{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.blog-medium:hover{
transform:translateY(-5px);
}

.blog-medium img{
width:100%;
height:120px;
object-fit:cover;
}
.blog-category{
background:#2FA4D7;
border-radius:10px;
padding:6px;
}
.blog-description{
display:block;
width:100%;
padding:5px 10px;
}

.blog-description span{
font-size:12px;
color:#2d7a45;
font-weight:bold;
}

.blog-description h4{
font-size:14px;
}

/* Small */

.blog-small{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.06);
display:flex;
flex-direction:column;
justify-content:center;
margin:10px 0;
}

.blog-small h5{
font-size:15px;
margin-bottom:10px;
}
.blog-content{
display:grid;
grid-template-columns: 2fr 1fr;
gap:10px;
}
.posts{
display:flex;
flex-direction:column;
gap:20px;
}
/* Blog Link */
.blog-link {
    display: inline-block;
    color: #2d7a45;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Hover effect */
.blog-link:hover {
    background-color: #2d7a45;
    color: #ffffff;
    transform: translateX(4px);
}

/* Active / click effect */
.blog-link:active {
    transform: scale(0.98);
}

/* Focus for accessibility */
.blog-link:focus {
    outline: 2px dashed #2d7a45;
    outline-offset: 3px;
}
.blog-link sup {
    background: #ff3b3b;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-link sup {
    animation: blinkNew 1.2s infinite;
}

@keyframes blinkNew {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* faq html */
.faq-section {
  margin-top: 40px;
}

.faq-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.faq-item h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.faq-item p {
  margin: 0;
  color: #555;
}

.faq {
  margin: 40px 0;
  padding: 20px;
}

.faq h3 {
  font-size: 18px;
  color: var(--theme-secondary);
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
  padding-left: 20px;
}

/* left indicator */
.faq h3::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: var(--theme-accent);
  transition: 0.3s;
}

.faq p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-left: 20px;
  border-left: 2px solid #eee;
}

/* hover effect */
.faq h3:hover {
  color: var(--theme-primary);
}

/* optional card style */
.faq {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/*Date and Update*/
.update {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    font-size: 14px;
}

/* Each item */
.update-item {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content:space-between;
    background: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #eee;
}

/* Label */
.update .label {
    font-weight: 600;
    color: #555;
}

/* Value */
.update .value {
    color: #222;
}
/* Programs Section */

.ngo-programs{
padding:70px 20px;
background:#f7f7f7;
}

.ngo-programs .container{
max-width:1200px;
margin:auto;
}

.ngo-programs h2{
text-align:center;
font-size:34px;
margin-bottom:15px;
color:#2d7a45;
}

.ngo-programs p{
text-align:center;
max-width:850px;
margin:auto;
margin-bottom:45px;
line-height:1.7;
color:#444;
font-size:16px;
}

/* Program Grid */

/* Program Card */

.program-item{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:all 0.3s ease;.program-item{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
height:100%;
}

/* Button */

.program-btn{
display:inline-block;
margin-top:30px;
margin-bottom:0;
padding:10px 18px;
background:var(--theme-accent);
color:#fff;
text-decoration:none;
border-radius:6px;
font-size:14px;
transition:0.3s;
align-self:flex-start;
}

.program-btn:hover{
background:var(--theme-primary);
}
}

.program-item:hover{
transform:translateY(-6px);
box-shadow:0 8px 25px rgba(0,0,0,0.12);
}

.program-item h3{
font-size:20px;
margin-bottom:10px;
color:#2d7a45;
}

.program-item p{
flex-grow:1;
text-align:left;
font-size:15px;
margin:0;
line-height:1.6;
color:#555;
}
.contact-section{
padding:70px 20px;
background:#f7f7f7;
}

.contact-section .container{
max-width:1100px;
margin:auto;
}

.contact-section h2{
text-align:center;
font-size:34px;
margin-bottom:15px;
color:var(--theme-primary);
}

.contact-intro{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:40px;
line-height:1.7;
color:#444;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.contact-info h3{
margin-top:20px;
color:var(--theme-secondary);
}

.contact-info p{
line-height:1.7;
color:#444;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

.contact-form button{
padding:12px;
background:var(--theme-primary);
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
font-size:15px;
}

.contact-form button:hover{
background:var(--theme-accent);
}
/*gallery css*/
.gallery-grid{
width:90%;
margin:20px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;

}

.gallery-item{
position:relative;
background:#C5D89D;
padding:10px;
border-radius:6px;

}

.gallery-item img{

width:100%;
cursor:pointer;
display:block;

}

.gallery-filter{

text-align:center;
margin-bottom:25px;

}

.filter-btn{

padding:8px 18px;
border:none;
background:#eee;
margin:5px;
cursor:pointer;
border-radius:4px;

}

.filter-btn.active{

background:#2d7a45;
color:#fff;

}

.gallery-more{

text-align:center;
margin-top:25px;

}
.gallery-desc{
padding:0;
display:flex;
flex-direction:column;
gap:15px;
justify-content:center;
}
.gallery-desc h3{
   padding-top:15px;
   font-size:1.3rem;
   color:#406093;
}
.gallery-desc p{
   font-size:0.8rem;
   color:#8A7650;
}
#showMore{

padding:10px 20px;
background:#2d7a45;
color:#fff;
border:none;
cursor:pointer;

}


/* popup */

.imgPopup{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;

}

.imgPopup img{

width:70%;
max-height:90%;
object-fit:contain;

}

.closePopup{

position:absolute;
top:20px;
right:40px;
font-size:40px;
color:#fff;
cursor:pointer;

}
.gallery-tab{
display:flex;
gap:15px;
align-items:center;
justify-content:center;
margin:20px 0;
}
.gallery-tab a{
padding:8px 15px;
text-decoration:none;
background:#fff;
color:#222;
}
/* tablet */

@media(max-width:992px){

.gallery-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* mobile */

@media(max-width:600px){

.gallery-grid{
grid-template-columns:1fr;
}

}
/* mobile */

@media(max-width:768px){

.imgPopup img{

width:100%;

}

}
/* Mobile responsive */
@media (max-width: 768px) {
    .update {
        flex-direction: column;
        gap: 6px;
    }
}
/* responsive */

@media(max-width:900px){

.gallery-grid{

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

}
.program-grid{
grid-template-columns:repeat(2,1fr);
}

.ngo-programs h2{
font-size:28px;
}

}

@media(max-width:600px){

.gallery-grid{

grid-template-columns:1fr;

}

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

/* ===== Responsive ===== */

@media(max-width:900px){
.container{width:95%;}
.menu-toggle{
display:block;
}

.nav{

position:fixed;
top:0;
right:-100%;
height:100%;
width:260px;
background:#fff;
flex-direction:column;
align-items:flex-start;
padding:40px 30px;
gap:20px;
box-shadow:-5px 0 20px rgba(0,0,0,0.15);
transition:0.4s;
}

.nav.active{
right:0;
}
.program-grid{
grid-template-columns:repeat(2,1fr);
}
.about-container{
grid-template-columns:1fr;
}

.about-images{
grid-template-columns:repeat(2,1fr);
}

.about-stats{
justify-content:space-between;
}
.blog-layout{
grid-template-columns:1fr;
}
.blog-content{
grid-template-columns:1fr;    
}
img{max-width:100%;}
}
/* Tablet */
@media(max-width:768px){

.container{width:100%;}
 .menu-toggle{
display:block;
}
.logo {width:60%;}
.site-name strong{text-align:center; font-size:0.9rem;}
.nav{
width:20%;
position:fixed;
top:0;
right:-100%;
height:100%;
width:260px;

background:#fff;

flex-direction:column;
align-items:flex-start;

padding:0;

gap:20px;

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

transition:0.4s;
z-index:9999;
}
.nav.active{
right:0;
}{left:5px;}
.nav .menu a::before{left:5px; width:100px;}
/* ===== Title Bar ===== */

.titleBar{
position:relative;
display:flex;

width:100%;
margin:0;
padding:20px;

flex-direction:column;
gap:10px;

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

background:var(--theme-primary);
}

/* logo */

.titleBar img{
height:80px;
border-radius:50%;
}

/* title text */

.titleBar span:not(.close-icon){
font-size:24px;
font-weight:600;
color:var(--theme-white);
text-align:center;
line-height:1.3;
}

/* ===== Menu ===== */

.nav .menu{
display:flex;
padding:20px;

flex-direction:column;
align-items:flex-start;
gap:20px;
width:100%;
}
.nav .menu a{
display:block;

width:100%;
padding:12px 16px;

text-decoration:none;
font-size:16px;
font-weight:500;

color:#1A3020;

border-radius:8px;

transition:all .25s ease;
}
.nav .menu a:hover{

background:var(--theme-primary);

color:#fff;

padding-left:22px;

box-shadow:0 4px 12px rgba(45,122,69,0.35);

}
.nav .menu a.active{

background:#C07828;
color:#fff;

}
/* ===== Close Icon ===== */

.close-icon{

position:absolute;
top:20px;
right:20px;

font-size:32px;
line-height:1;

cursor:pointer;

color:var(--theme-white);

transition:all .25s ease;
}

/* hover effect */

.close-icon:hover{
color:transparent;
transform:scale(1.1);
}

/* dash show */

.close-icon:hover::after{

content:"—";

position:absolute;
top:0;
left:0;

font-size:32px;

color:var(--theme-white);

}

.hero-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.program-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:32px;

}
.hero-image{display:none;}
/* ===== Mobile Improvement ===== */
.about-container{
grid-template-columns:1fr;
gap:40px;
}

.about-images{
grid-template-columns:repeat(2,1fr);
}

.about-content h2{
font-size:28px;
}

.about-stats{
gap:25px;
}

.footer-grid{

grid-template-columns:1fr;

}
.donation-strip .inner{

grid-template-columns:1fr;

text-align:center;

}

.stats{

grid-template-columns:1fr;

}

.stat-item + .stat-item{

border-left:none;

border-top:1px solid #eee;

}
.join-section .container{

grid-template-columns:1fr;

text-align:center;

}

.join-form{

padding:35px;

}

/*Footer top */
.footer-top-inner{

flex-direction:column;

text-align:center;

}

.social-media{

text-align:center;

}

.social-icons{

justify-content:center;

}

.newsletter form{

flex-direction:column;

}

.newsletter input{

width:100%;

}
.footer-top-inner{

grid-template-columns:1fr;

}
.blog-posts{
grid-template-columns:1fr;   
gap:20px;
/*grid-auto-rows:auto;*/
}
img{
max-width:100%;
}
.content {padding-top:350px;}
.ngo-programs{
padding:50px 15px;
}

.program-grid{
grid-template-columns:1fr;
gap:20px;
}

.program-item{
padding:20px;
}

.program-item h3{
font-size:18px;
}

.program-item p{
font-size:14px;
}
.contact-grid{
grid-template-columns:1fr;
}

.contact-section h2{
font-size:26px;
}
.about-container{
width:100%;    
}
.donate-btn{
padding:8px 16px;
}
.blog-featured{
 height:400px;   
}
.blog-overlay h3{
font-size:16px;
}
.blog-overlay p{
display:none;
}
}


/* Small Mobile */

@media (max-width:480px){
.container{width:100%;}
.about-section{
padding:70px 20px;
}

.about-content h2{
font-size:24px;
}

.about-images{
gap:14px;
}

.img-card{
height:130px;
font-size:32px;
}

.about-buttons{
flex-direction:column;
align-items:flex-start;
}

.about-stats{
flex-direction:column;
gap:15px;
}
img{max-width:100%;}
}