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

:root{
--primary:#0F6D3C;
--primary-dark:#0b4f2c;
--accent:#1F8F4E;
--light:#f6fbf8;
--soft:#eef7f1;
--text:#333;
--muted:#666;
}

body{
font-family:Arial, sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;
}

/* =========================
   CONTAINER
========================= */

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

/* =========================
   NAVBAR
========================= */

.navbar{
position:sticky;
top:0;
z-index:2000;

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

padding:14px 5%;

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

backdrop-filter:blur(12px);

box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

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

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

.logo-area h1{
font-size:28px;
font-weight:800;
color:var(--primary);
}

.menu{
display:flex;
align-items:center;
gap:28px;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:600;
font-size:15px;
transition:0.3s ease;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--primary);
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}

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

/* dropdown */

.dropdown{
position:relative;
}

.dropdown-menu{
display:none;

position:absolute;

top:45px;
left:0;

background:white;

min-width:240px;

border-radius:14px;

padding:10px 0;

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

overflow:hidden;

z-index:999;
}

.dropdown-menu a{
display:block;
padding:14px 20px;
}

.dropdown-menu a:hover{
background:#f5f5f5;
}

/* mobile menu */

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

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

.institute-hero{

position:relative;

min-height:100vh;

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

overflow:hidden;

padding:120px 20px 140px;

background:
linear-gradient(
90deg,
rgba(0,40,18,0.88),
rgba(0,40,18,0.70)
),
url("main.webp");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.hero-overlay{

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(31,143,78,0.30),
transparent 35%
);

z-index:1;
}

.hero-content-box{

position:relative;
z-index:2;

max-width:1000px;

text-align:center;

color:white;
}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:40px;

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

backdrop-filter:blur(12px);

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

font-size:14px;
font-weight:600;

margin-bottom:28px;
}

.hero-content-box h1{

font-size:78px;
line-height:1.05;

margin-bottom:28px;

font-weight:800;

letter-spacing:-2px;
}

.hero-content-box p{

font-size:21px;
line-height:1.9;

max-width:760px;

margin:auto auto 40px;

color:rgba(255,255,255,0.92);
}

/* hero buttons */

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

.hero-btn{

padding:16px 34px;

border-radius:40px;

font-weight:700;

text-decoration:none;

transition:0.3s ease;

font-size:15px;
}

.primary-btn{
background:var(--accent);
color:white;
}

.primary-btn:hover{

transform:translateY(-5px);

background:#15703c;

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

.secondary-btn{

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

border:1px solid rgba(255,255,255,0.20);

color:white;

backdrop-filter:blur(8px);
}

.secondary-btn:hover{

background:white;
color:var(--primary);

transform:translateY(-5px);
}

/* hero stats */

.hero-stats{

margin-top:70px;

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

gap:22px;
}

.hero-stat{

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

backdrop-filter:blur(12px);

padding:28px 20px;

border-radius:22px;

border:1px solid rgba(255,255,255,0.10);

transition:0.3s ease;
}

.hero-stat:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.15);
}

.hero-stat h3{

font-size:40px;
margin-bottom:10px;
}

.hero-stat span{

font-size:15px;
color:rgba(255,255,255,0.85);
}

/* =========================
   SECTION TAG
========================= */

.section-tag{

display:inline-block;

background:#e8f5ee;
color:var(--primary);

padding:8px 18px;

border-radius:30px;

font-size:13px;
font-weight:700;

margin-bottom:20px;
}

/* =========================
   INTRO
========================= */

.institute-intro{
padding:110px 20px;
background:#f8faf8;
}

.intro-grid{

display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:50px;
align-items:center;
}

.intro-text h2{

font-size:48px;
line-height:1.2;

margin-bottom:25px;
}

.intro-text p{

font-size:17px;
line-height:1.9;
color:#555;

margin-bottom:22px;
}

/* intro buttons */

.intro-buttons{
display:flex;
gap:18px;
margin-top:30px;
flex-wrap:wrap;
}

.intro-btn{

background:var(--accent);
color:white;

padding:14px 28px;

border-radius:35px;

text-decoration:none;
font-weight:600;

transition:0.3s ease;
}

.intro-btn:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(0,0,0,0.12);
}

.outline-btn{

background:white;
color:var(--primary);

border:2px solid var(--accent);
}

/* intro stats */

.intro-stats{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.stat-card{

background:white;

padding:35px 25px;

border-radius:18px;

text-align:center;

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

transition:0.3s ease;
}

.stat-card:hover{
transform:translateY(-6px);
}

.stat-card h3{

font-size:42px;
margin-bottom:10px;

color:var(--primary);
}

.stat-card p{
color:#666;
font-weight:500;
}

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

.about-section{
padding:110px 20px;
}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-image img{

width:100%;

border-radius:24px;

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

.about-content h2{

font-size:42px;
margin-bottom:25px;
}

.about-content p{

font-size:16px;
line-height:1.9;
color:#555;

margin-bottom:20px;
}

/* highlight */

.about-highlight{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

margin-top:35px;
}

.highlight-box{

background:#f7f7f7;

padding:18px;

border-radius:14px;

font-weight:600;

border-left:4px solid var(--accent);

transition:0.3s ease;
}

.highlight-box:hover{

transform:translateY(-4px);

background:#eef8f1;
}

/* =========================
   SERVICES
========================= */

.services-section{

background:#f9fbf9;
padding:110px 20px;
}

.services-header{

text-align:center;
max-width:800px;

margin:auto auto 60px;
}

.services-header h2{

font-size:46px;
margin-bottom:20px;
}

.services-header p{

font-size:17px;
line-height:1.8;
color:#666;
}

.services-grid{

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

.service-card{

background:white;

padding:35px 30px;

border-radius:24px;

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

transition:0.35s ease;

position:relative;
overflow:hidden;
}

.service-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:linear-gradient(
90deg,
var(--accent),
#38b46a
);
}

.service-card:hover{

transform:translateY(-10px);

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

.service-icon{

width:75px;
height:75px;

border-radius:20px;

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

font-size:34px;

background:#eef8f1;

margin-bottom:25px;
}

.service-card h3{

font-size:24px;
margin-bottom:20px;
}

.service-card ul{
list-style:none;
}

.service-card ul li{

position:relative;

padding-left:28px;

margin-bottom:14px;

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

color:#555;
}

.service-card ul li::before{

content:"✔";

position:absolute;

left:0;
top:0;

color:var(--accent);
font-weight:bold;
}

/* =========================
   BENEFICIARIES
========================= */

.beneficiaries-section{
padding:110px 20px;
}

.beneficiaries-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.section-description{

font-size:17px;
line-height:1.8;
color:#666;

margin-bottom:35px;
}

.beneficiary-list{

display:flex;
flex-direction:column;
gap:22px;
}

.beneficiary-item{

display:flex;
gap:20px;

padding:22px;

background:#f9faf9;

border-radius:18px;

transition:0.3s ease;
}

.beneficiary-item:hover{

transform:translateX(8px);

background:#eef8f1;
}

.beneficiary-icon{

width:65px;
height:65px;

border-radius:18px;

background:#e7f5ec;

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

font-size:28px;

flex-shrink:0;
}

.beneficiary-item h3{

margin-bottom:8px;
font-size:20px;
}

.beneficiary-item p{

font-size:15px;
line-height:1.7;
color:#666;
}

.beneficiaries-image img{

width:100%;

border-radius:28px;

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

/* =========================
   CONTACT
========================= */

.contact-section{

padding:120px 20px;

background:
linear-gradient(
135deg,
#f7faf8,
#eef7f1
);
}

.contact-header{

text-align:center;

max-width:800px;

margin:auto auto 70px;
}

.contact-header h2{

font-size:48px;
margin-bottom:20px;
}

.contact-header p{

font-size:17px;
line-height:1.8;
color:#666;
}

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:start;
}

.contact-info-wrapper{

display:flex;
flex-direction:column;
gap:20px;
}

.contact-card{

display:flex;
gap:20px;

align-items:flex-start;

background:white;

padding:25px;

border-radius:20px;

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

transition:0.3s ease;
}

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

.contact-icon{

width:60px;
height:60px;

border-radius:18px;

background:#eef8f1;

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

font-size:26px;

flex-shrink:0;
}

.contact-card h3{

font-size:20px;
margin-bottom:8px;
}

.contact-card p{

font-size:15px;
line-height:1.7;
color:#666;
}

.social-media-box{

background:white;

padding:30px;

border-radius:24px;

box-shadow:0 12px 35px rgba(0,0,0,0.06);
}

.social-media-box h3{

font-size:24px;
margin-bottom:25px;
}

.social-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.social-link{

display:flex;
align-items:center;
gap:12px;

padding:15px 18px;

border-radius:16px;

background:#f7faf8;

text-decoration:none;

transition:0.3s ease;
}

.social-link:hover{

transform:translateY(-4px);

background:#eef8f1;
}

.social-link img{

width:24px;
height:24px;
}

.social-link span{

font-weight:600;
color:#333;
}

.map-wrapper{

background:white;

padding:20px;

border-radius:28px;

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

.map-wrapper iframe{

width:100%;
height:650px;

border:none;

border-radius:20px;
}

.map-button-wrap{

display:flex;
justify-content:center;

margin-top:25px;
}

.map-btn{

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

padding:16px 34px;

background:var(--accent);

color:white;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:0.3s ease;
}

.map-btn:hover{

transform:translateY(-4px);

background:#15703c;
}

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

footer{

background:#0d3f22;

color:white;

text-align:center;

padding:30px 20px;
}

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

@media(max-width:950px){

.menu-toggle{
display:block;
}

.menu{

position:fixed;

top:85px;
right:-100%;

width:280px;
height:calc(100vh - 85px);

background:white;

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

padding:30px 25px;

transition:0.4s ease;

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

.menu.active{
right:0;
}

.hero-content-box h1{
font-size:54px;
}

.hero-content-box p{
font-size:18px;
}

.hero-stats{
grid-template-columns:1fr 1fr;
}

.intro-grid,
.about-grid,
.beneficiaries-grid,
.contact-grid{

grid-template-columns:1fr;
}

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

.contact-header h2,
.services-header h2{

font-size:38px;
}

}

@media(max-width:600px){

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

.hero-content-box p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-btn{
width:100%;
max-width:320px;
}

.hero-stats{
grid-template-columns:1fr;
}

.intro-text h2,
.about-content h2{

font-size:32px;
}

.intro-stats{
grid-template-columns:1fr;
}

.about-highlight{
grid-template-columns:1fr;
}

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

.map-wrapper iframe{
height:350px;
}

}

html,
body{
    overflow-x:hidden;
}

/* =========================
   MUSOWE PAGE REDESIGN
   Retains the original ZAFEMU green palette, navbar, contact and footer.
========================= */
:root{--ms-ink:#183b29;--ms-green:#0f6d3c;--ms-bright:#1f8f4e;--ms-pale:#f1f8f3;--ms-line:#dcebe1;--ms-shadow:0 16px 45px rgba(14,65,37,.08)}
.container{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.institute-hero{min-height:760px;padding:100px 20px 100px;background-position:center;background-image:linear-gradient(100deg,rgba(0,39,18,.91),rgba(0,55,27,.73)),}
.hero-content-box{max-width:1120px}.hero-content-box h1{font-size:clamp(42px,6vw,76px);line-height:1.06;letter-spacing:-1.8px;margin-bottom:22px}.hero-content-box h1 span{color:#a9e3b9}.hero-content-box p{max-width:800px;font-size:clamp(16px,2vw,20px);line-height:1.8}.hero-badge{margin-bottom:24px}.hero-stats{margin-top:55px;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.hero-stat{padding:24px 15px;border-radius:18px}.hero-stat strong{display:block;font-size:clamp(25px,3vw,38px);margin-bottom:7px}.hero-stat span{font-size:14px;line-height:1.5;display:block}
.ms-intro,.ms-impact,.ms-programmes,.ms-projects,.ms-water,.ms-education,.ms-iftar,.ms-hospital,.ms-outreach{padding:88px 0}.ms-intro{background:#fff}.ms-narrow{max-width:1000px;text-align:center}.ms-intro h2,.ms-section-heading h2{font-size:clamp(30px,4vw,45px);line-height:1.2;color:var(--ms-ink);margin:0 0 18px}.ms-lead{max-width:880px;margin:0 auto;color:#5c6b61;font-size:18px;line-height:1.85}.ms-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;text-align:left}.ms-facts article{border:1px solid var(--ms-line);border-radius:20px;padding:26px;background:linear-gradient(150deg,#fff,#f7fbf8);box-shadow:0 8px 26px rgba(20,80,43,.04)}.ms-number{font-size:34px;font-weight:800;color:var(--ms-green);display:block;margin-bottom:8px}.ms-facts h3{color:var(--ms-ink);font-size:19px;margin-bottom:8px}.ms-facts p{color:#66736a;line-height:1.7;font-size:15px}
.ms-impact,.ms-water,.ms-iftar,.ms-outreach{background:#f5faf6}.ms-section-heading{max-width:820px;margin:0 auto 42px;text-align:center}.ms-section-heading p{font-size:16px;line-height:1.8;color:#647168;margin-top:12px}.ms-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.ms-impact-card{padding:28px;border-radius:22px;background:#fff;border:1px solid #e5efe8;box-shadow:var(--ms-shadow);transition:transform .25s ease}.ms-impact-card:hover,.ms-programme:hover{transform:translateY(-5px)}.ms-icon{width:54px;height:54px;border-radius:16px;background:#eaf6ee;display:grid;place-items:center;font-size:27px;margin-bottom:18px}.ms-impact-card>strong{font-size:36px;line-height:1.1;color:var(--ms-green);display:block;margin-bottom:9px}.ms-impact-card h3{font-size:19px;color:var(--ms-ink);margin-bottom:9px}.ms-impact-card p,.ms-programme p{color:#667168;line-height:1.75;font-size:15px}
.ms-programmes{background:#fff}.ms-programme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.ms-programme{padding:26px 22px;border:1px solid var(--ms-line);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(14,65,37,.05);transition:transform .25s ease}.ms-programme h3{font-size:19px;color:var(--ms-ink);margin-bottom:10px}.ms-programme a{display:inline-block;margin-top:16px;color:var(--ms-green);font-size:14px;font-weight:700;text-decoration:none}.ms-programme a:hover{text-decoration:underline}
.ms-projects{background:#fff}.ms-project-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.ms-list-card{border:1px solid var(--ms-line);border-radius:22px;overflow:hidden;background:white;box-shadow:var(--ms-shadow)}.ms-list-top{padding:25px 25px 18px;background:#f4faf6;border-bottom:1px solid var(--ms-line)}.ms-list-top h3{font-size:21px;color:var(--ms-ink);margin-top:12px}.ms-status{display:inline-block;border-radius:30px;padding:7px 12px;font-size:12px;font-weight:800}.status-build{background:#e2f3e8;color:#12653a}.status-renovate{background:#fff0d9;color:#8a5600}.status-planned{background:#e8efff;color:#3455a2}.ms-list-card ol{padding:12px 25px 25px 45px}.ms-list-card li{padding:12px 0 12px 4px;border-bottom:1px solid #edf2ee;color:#46534a;line-height:1.55}.ms-list-card li:last-child{border-bottom:0}.ms-list-card li span{display:block;color:#728076;font-size:13px;margin-top:3px}.ms-list-card li strong{color:#293e30}.ms-land-note{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 25px;margin-top:20px;border-radius:16px;background:#edf7f0;color:var(--ms-ink)}.ms-land-note span{font-weight:600}.ms-completed{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.ms-completed>div{padding:25px;border-radius:18px;border:1px solid var(--ms-line)}.ms-completed h3{font-size:20px;color:var(--ms-ink)}.ms-completed h3 span{color:var(--ms-green);font-size:15px;font-weight:600;display:block;margin-top:5px}.ms-completed p{margin-top:10px;color:#667168;line-height:1.7}
.ms-province-grid,.ms-location-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ms-province-grid article,.ms-location-grid article{padding:22px;border:1px solid var(--ms-line);border-radius:18px;background:#fff}.ms-province-grid h3,.ms-location-grid h3{color:var(--ms-green);font-size:17px;margin-bottom:9px}.ms-province-grid p,.ms-location-grid p{font-size:14px;line-height:1.75;color:#5f6d63}.ms-education{background:#fff}.ms-table-wrap{overflow:auto;border:1px solid var(--ms-line);border-radius:18px;box-shadow:var(--ms-shadow);max-height:620px}.ms-table{width:100%;border-collapse:collapse;background:white}.ms-table th,.ms-table td{padding:13px 20px;text-align:left;border-bottom:1px solid #edf2ee}.ms-table thead th{position:sticky;top:0;background:#0f6d3c;color:#fff;z-index:1}.ms-table tbody tr:nth-child(even){background:#f7fbf8}.ms-table td:last-child,.ms-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}.ms-table tfoot th{background:#e9f5ed;color:#174c2d}.ms-warning{margin-top:18px;padding:18px 22px;background:#fff8e8;border:1px solid #f0dfb5;border-radius:14px;color:#75561c;line-height:1.7;font-size:14px}
.ms-iftar-summary{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto 28px}.ms-iftar-summary>div{display:flex;flex-direction:column;gap:7px;padding:24px;text-align:center;background:#0f6d3c;color:#fff;border-radius:18px}.ms-iftar-summary strong{font-size:36px}.ms-iftar-summary span{font-size:14px;line-height:1.6;color:#e4f4e9}.ms-location-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ms-location-grid article:first-child{grid-column:span 2}.ms-hospital{background:#fff}.ms-hospital-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.ms-hospital-grid article{padding:25px;border:1px solid var(--ms-line);border-radius:20px;background:#f9fcfa}.ms-hospital-grid article>span{font-size:32px;display:block;margin-bottom:15px}.ms-hospital-grid h3{color:var(--ms-ink);font-size:19px;margin-bottom:9px}.ms-hospital-grid p{font-size:15px;line-height:1.7;color:#667168}.ms-outreach-note{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:800px;margin:0 auto;padding:26px;background:#fff;border:1px solid var(--ms-line);border-radius:20px;box-shadow:var(--ms-shadow)}.ms-outreach-number{display:flex;flex-direction:column;text-align:center;gap:6px;font-size:35px;font-weight:800;color:var(--ms-green)}.ms-outreach-number span{font-size:14px;font-weight:600;color:#667168}.ms-source-note{max-width:800px;margin:20px auto 0;text-align:center;font-size:14px;line-height:1.8;color:#667168}
/* Contact and footer remain from the original page. */
@media(max-width:1000px){.ms-programme-grid,.ms-hospital-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ms-province-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ms-project-columns{grid-template-columns:1fr 1fr}.ms-project-columns .ms-list-card:last-child{grid-column:span 2}.ms-location-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.container{width:min(100% - 30px,1200px)}.institute-hero{min-height:auto;padding:80px 15px 70px}.hero-content-box h1{font-size:clamp(37px,10vw,54px);letter-spacing:-.8px}.hero-content-box p{font-size:16px;line-height:1.75}.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:35px}.hero-stat{padding:18px 10px}.hero-stat strong{font-size:27px}.hero-stat span{font-size:12px}.ms-intro,.ms-impact,.ms-programmes,.ms-projects,.ms-water,.ms-education,.ms-iftar,.ms-hospital,.ms-outreach{padding:60px 0}.ms-facts,.ms-impact-grid,.ms-programme-grid,.ms-project-columns,.ms-completed,.ms-province-grid,.ms-location-grid,.ms-hospital-grid{grid-template-columns:1fr}.ms-project-columns .ms-list-card:last-child,.ms-location-grid article:first-child{grid-column:auto}.ms-lead{font-size:16px}.ms-section-heading{margin-bottom:30px}.ms-iftar-summary{grid-template-columns:1fr}.ms-outreach-note{grid-template-columns:1fr}.ms-land-note{align-items:flex-start;flex-direction:column}.ms-table th,.ms-table td{padding:12px 14px;font-size:14px}}



/* ==============================
   MUSOWE PHOTO GALLERY
============================== */

.gallery-section {
  padding: 90px 20px;
  background: #f6fbf8;
}

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

.gallery-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 38px;
}

.gallery-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #e8f5ee;
  color: #0f6d3c;
  font-size: 13px;
  font-weight: 700;
}

.gallery-heading h2 {
  margin: 18px 0;
  color: #0b4f2c;
  font-size: clamp(32px, 5vw, 46px);
}

.gallery-heading p {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}

.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.gallery-filter {
  border: 1px solid #d8e9dd;
  background: #fff;
  color: #0f6d3c;
  padding: 11px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .25s ease;
}

.gallery-filter:hover,
.gallery-filter.active {
  background: #0f6d3c;
  color: white;
  border-color: #0f6d3c;
}

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

.gallery-item {
  position: relative;
  min-width: 0;
  margin: 0;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .07);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .13);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 245px;
  object-fit: cover;
  transition: transform .45s ease;
}

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

.gallery-item figcaption {
  padding: 20px;
}

.gallery-item figcaption span {
  display: inline-block;
  margin-bottom: 10px;
  color: #168044;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.gallery-item figcaption h3 {
  color: #24352a;
  font-size: 19px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.gallery-item figcaption p {
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}

.gallery-item[hidden] {
  display: none;
}

/* Image popup */

.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, .94);
  align-items: center;
  justify-content: center;
  padding: 65px 70px;
}

.gallery-lightbox.open {
  display: flex;
}

.lightbox-content {
  max-width: 1000px;
  max-height: 100%;
  text-align: center;
}

.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-content p {
  color: white;
  margin-top: 15px;
  font-size: 15px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: 0;
  color: white;
  background: rgba(255,255,255,.14);
  cursor: pointer;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 25px;
  display: grid;
  place-items: center;
}

.lightbox-close {
  top: 20px;
  right: 24px;
  font-size: 34px;
}

.lightbox-prev {
  left: 18px;
}

.lightbox-next {
  right: 18px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: #168044;
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .gallery-item img {
    height: 220px;
  }
}

@media (max-width: 560px) {
  .gallery-section {
    padding: 65px 16px;
  }

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

  .gallery-item img {
    height: 250px;
  }

  .gallery-filter {
    padding: 9px 13px;
    font-size: 12px;
  }

  .gallery-lightbox {
    padding: 60px 12px;
  }

  .lightbox-prev {
    left: 5px;
  }

  .lightbox-next {
    right: 5px;
  }
}


/* HERO BACKGROUND FIX */
section.page-hero.institute-hero {
    position: relative;
    background-color: #0b4f2c !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 40, 18, 0.55),
            rgba(0, 40, 18, 0.30)
        ),
        url("main.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

section.page-hero.institute-hero .hero-overlay {
    background: transparent !important;
    opacity: 1;
    pointer-events: none;
}