/* ========================================================
   Al Haider Foundation — styles.css (v2)
   Modern welfare foundation design
   Colors: Deep Green #0c3b1c + Gold #d4a017 + White
   ======================================================== */

/* ── TOKENS ── */
:root {
  --green-900: #071f0e;
  --green-800: #0c3b1c;
  --green-700: #0f4d25;
  --green-600: #186635;
  --green-500: #1f8046;
  --green-400: #2a9d5c;
  --green-100: #e8f5ee;
  --green-50:  #f3faf5;
  --gold-600:  #a07808;
  --gold-500:  #c49610;
  --gold-400:  #d4a017;
  --gold-300:  #e0b830;
  --gold-100:  #fdf6e0;
  --white:     #ffffff;
  --gray-50:   #f8f9f7;
  --gray-100:  #f0f3ee;
  --gray-200:  #dde5da;
  --gray-400:  #9aac9e;
  --gray-600:  #576860;
  --gray-800:  #2a3830;
  --text:      #1a2b1e;
  --text-2:    #3d5247;
  --text-3:    #6b7f72;
  --border:    #d4e0d8;
  --shadow-xs: 0 1px 3px rgba(12,59,28,.07);
  --shadow-sm: 0 2px 10px rgba(12,59,28,.09);
  --shadow-md: 0 6px 24px rgba(12,59,28,.12);
  --shadow-lg: 0 16px 48px rgba(12,59,28,.16);
  --radius-s:  6px;
  --radius-m:  12px;
  --radius-l:  20px;
  --radius-xl: 30px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --t:         .22s;
  --header-h:  70px;
  --topbar-h:  38px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Poppins','Segoe UI',Arial,sans-serif;background:var(--gray-50);color:var(--text);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:none;background:none}
ul{list-style:none}
input,textarea,select{outline:none;width:100%}

/* ── LANGUAGE ── */
[dir="ltr"] .ur-text{display:none!important}
[dir="rtl"] .en-text{display:none!important}
.ur-text{font-family:'Noto Nastaliq Urdu','Arial Unicode MS',serif;line-height:2}
[dir="rtl"] body{text-align:right}
[dir="rtl"] .header-inner,[dir="rtl"] .topbar-inner,[dir="rtl"] .footer-inner{flex-direction:row-reverse}
/* RTL nav only reverses row on desktop; on mobile it stays column */
@media(min-width:769px){
  [dir="rtl"] .site-nav{flex-direction:row-reverse}
}

/* ── CONTAINER ── */
.container{width:min(1280px,calc(100% - 3rem));margin:0 auto}

/* ════════════════════════════════════════
   TOP BAR
════════════════════════════════════════ */
.topbar{
  background:var(--green-800);
  color:rgba(255,255,255,.85);
  height:var(--topbar-h);
  display:flex;align-items:center;
  overflow:hidden;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:.75rem;
  flex-wrap:nowrap;
}
.topbar-contact{
  display:flex;align-items:center;gap:1rem;
  font-size:.75rem;font-weight:500;
  flex-shrink:1;min-width:0;overflow:hidden;
}
.topbar-contact a,.topbar-contact span{
  display:inline-flex;align-items:center;gap:.3rem;
  color:rgba(255,255,255,.85);transition:color var(--t);
  white-space:nowrap;
}
.topbar-contact a:hover{color:var(--gold-300)}
.topbar-contact svg{width:12px;height:12px;flex-shrink:0}
.topbar-social{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.topbar-social a{
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.topbar-social a:hover{background:var(--gold-400);color:var(--green-800)}
.topbar-social svg{width:12px;height:12px}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.header{
  position:sticky;top:0;z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t);
  /* overflow:visible is critical — allows the mobile dropdown nav
     (position:absolute; top:100%) to render below the header      */
  overflow:visible;
}
.header.scrolled{box-shadow:var(--shadow-md)}
.header-inner{
  display:flex;align-items:center;gap:1rem;
  min-height:var(--header-h);
}
/* Brand */
.brand{display:inline-flex;align-items:center;gap:.7rem;flex-shrink:0;color:var(--green-800)}
.brand-logo{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;border:2px solid var(--green-100);
  box-shadow:var(--shadow-xs);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-size:.95rem;font-weight:800;color:var(--green-800);letter-spacing:-.01em}
.brand-sub{font-size:.7rem;color:var(--text-3);font-weight:400}
/* Nav */
.site-nav{
  display:flex;align-items:center;gap:.1rem;
  margin:0 auto;
}
.nav-link{
  padding:.45rem .9rem;border-radius:var(--radius-s);
  font-size:.875rem;font-weight:500;color:var(--text-2);
  transition:all var(--t);white-space:nowrap;
  position:relative;
}
.nav-link::after{
  content:'';position:absolute;bottom:0;left:.9rem;right:.9rem;
  height:2px;background:var(--gold-400);border-radius:1px;
  transform:scaleX(0);transition:transform var(--t);
}
.nav-link:hover,.nav-link.active{color:var(--green-700)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
/* Controls */
.header-controls{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.lang-toggle{
  display:flex;background:var(--gray-100);
  border-radius:20px;padding:3px;gap:2px;
}
.lang-btn{
  padding:.26rem .65rem;border-radius:16px;
  font-size:.75rem;font-weight:700;color:var(--text-3);
  transition:all var(--t);cursor:pointer;
}
.lang-btn.active{background:var(--green-700);color:var(--white)}
.btn-donate-nav{
  padding:.5rem 1.3rem;border-radius:var(--radius-xl);
  background:var(--gold-400);color:var(--green-900);
  font-weight:700;font-size:.85rem;
  transition:all var(--t);white-space:nowrap;
  box-shadow:0 2px 8px rgba(212,160,23,.35);
  text-decoration:none;display:inline-block;
}
.btn-donate-nav:hover{
  background:var(--gold-300);transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(212,160,23,.45);
}
/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  padding:6px;border-radius:var(--radius-s);
  transition:background var(--t);
}
.hamburger:hover{background:var(--green-100)}
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--green-800);border-radius:2px;
  transition:all .3s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ════════════════════════════════════════
   HERO SLIDER
════════════════════════════════════════ */
.hero-slider{
  position:relative;
  background:var(--green-900);
  overflow:hidden;
  line-height:0;
}
/* CSS-Grid crossfade: all slides stack in cell 1/1 */
.slider-track{
  display:grid;
  width:100%;
  min-height:220px;  /* prevent zero-height before image loads */
}
.slide{
  grid-row:1;
  grid-column:1;
  opacity:0;
  transition:opacity .7s var(--ease);
  min-width:0;
}
.slide.active{opacity:1;z-index:1}
.slide img,.slide picture{width:100%;display:block}
.slide img{
  width:100%;height:auto;
  object-fit:cover;object-position:center center;
}
/* Arrows */
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:10;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.18);color:white;
  border:1.5px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);backdrop-filter:blur(4px);
}
.slider-arrow:hover{background:rgba(255,255,255,.32)}
.slider-arrow svg{width:20px;height:20px}
.slider-prev{left:1rem}
.slider-next{right:1rem}
/* Dots */
.slider-dots{
  position:absolute;bottom:1rem;left:50%;
  transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:10;
}
.slider-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:all var(--t);cursor:pointer;
}
.slider-dot.active{background:var(--gold-300);width:24px;border-radius:4px}
/* CTA bar below slider */
.hero-cta-bar{
  background:var(--green-800);padding:1.1rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
  gap:1rem;flex-wrap:wrap;
}
.hero-cta-bar a,.hero-cta-bar button{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;font-weight:600;
}

/* ── Download App — PRIMARY CTA ── */
.btn-download-app{
  padding:.75rem 2rem;border-radius:var(--radius-xl);
  background:var(--gold-400);color:var(--green-900);
  font-weight:800;font-size:1.05rem;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:all var(--t);
  box-shadow:0 4px 18px rgba(212,160,23,.5);
  min-height:48px;
}
.btn-download-app:hover{
  background:var(--gold-300);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,160,23,.6);
}
.btn-download-app svg{width:20px;height:20px;flex-shrink:0}
.btn-app-text{
  display:flex;flex-direction:column;
  align-items:flex-start;line-height:1.25;gap:.1rem;
}
.btn-app-main{font-size:1rem;font-weight:800}
.btn-app-sub{font-size:.72rem;font-weight:500;opacity:.82;letter-spacing:.01em}

/* ── Donate Now — SECONDARY CTA (outline) ── */
.btn-donate-hero{
  padding:.72rem 1.75rem;border-radius:var(--radius-xl);
  background:transparent;
  border:2px solid rgba(255,255,255,.75);
  color:var(--white);
  font-weight:700;font-size:.95rem;
  transition:all var(--t);
  min-height:48px;
}
.btn-donate-hero:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--white);
  transform:translateY(-2px);
}

.hero-cta-contact{
  display:inline-flex;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.85);font-size:.88rem;font-weight:500;
  transition:color var(--t);min-height:44px;
}
.hero-cta-contact:hover{color:var(--gold-300)}
.hero-cta-contact svg{width:16px;height:16px}

/* ════════════════════════════════════════
   SECTIONS BASE
════════════════════════════════════════ */
.section{padding:5rem 0}
.section-alt{background:var(--green-800)}
.section-light{background:var(--gray-50)}
.section-gold-bg{background:linear-gradient(135deg,var(--gold-100) 0%,#fff9e8 100%)}

.section-header{text-align:center;margin-bottom:3.5rem}
.section-header.left{text-align:left}

.eyebrow{
  display:inline-block;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-500);
  margin-bottom:.6rem;
}
.eyebrow-gold{color:var(--gold-400)!important}
.eyebrow-white{color:rgba(255,255,255,.7)!important}

.section-header h2{
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:800;line-height:1.2;color:var(--text);
  letter-spacing:-.02em;margin-bottom:.7rem;
}
.section-alt .section-header h2{color:var(--white)}
.section-desc{
  font-size:1rem;color:var(--text-3);
  max-width:540px;margin:0 auto;line-height:1.75;
}
.section-alt .section-desc{color:rgba(255,255,255,.72)}

/* Divider */
.divider{
  width:60px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--green-500),var(--gold-400));
  margin:.8rem auto 1.5rem;
}
.section-header.left .divider{margin-left:0}

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
.about-grid{
  display:grid;grid-template-columns:280px 1fr;
  gap:3.5rem;align-items:center;
}
.about-logo-wrap{
  position:relative;display:flex;justify-content:center;align-items:center;
}
.about-logo-frame{
  width:250px;height:250px;border-radius:50%;
  padding:5px;flex-shrink:0;
  background:linear-gradient(135deg,var(--green-600),var(--gold-400));
  box-shadow:var(--shadow-lg);
}
.about-logo-frame img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.about-body{}
.about-lead{
  font-size:1.02rem;color:var(--text-2);line-height:1.85;
  margin-bottom:1.75rem;
}
.about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pillar{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-m);padding:1.25rem;
  box-shadow:var(--shadow-xs);transition:all var(--t);
  border-top:3px solid var(--green-500);
}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pillar-icon{font-size:1.5rem;margin-bottom:.5rem}
.pillar h3{font-size:.9rem;font-weight:700;color:var(--green-800);margin-bottom:.4rem}
.pillar p{font-size:.82rem;color:var(--text-3);line-height:1.6}

/* ════════════════════════════════════════
   DOWNLOAD APP SECTION
════════════════════════════════════════ */
.section-app-cta{
  background:linear-gradient(135deg,var(--green-900) 0%,var(--green-800) 60%,#0d4422 100%);
  position:relative;overflow:hidden;
}
.section-app-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(212,160,23,.08) 0%,transparent 70%);
  pointer-events:none;
}
.app-cta-inner{
  display:grid;grid-template-columns:1fr 360px;
  gap:3rem;align-items:center;
  position:relative;z-index:1;
}
.app-cta-text .eyebrow{color:var(--gold-300)}
.app-cta-text h2{
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  font-weight:900;color:var(--white);
  line-height:1.2;margin-bottom:1rem;
  letter-spacing:-.025em;
}
.app-cta-text p{
  font-size:1rem;color:rgba(255,255,255,.75);
  line-height:1.8;margin-bottom:1.75rem;max-width:460px;
}
.app-cta-badges{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-top:1rem;
}
.app-badge-note{
  font-size:.78rem;color:rgba(255,255,255,.55);
  font-style:italic;
}
.app-cta-mockup{
  display:flex;justify-content:center;align-items:center;
}
.app-mockup-placeholder{
  width:220px;height:440px;
  /* background:rgba(255,255,255,.06); */
  /* border:2px dashed rgba(255,255,255,.2); */
  border-radius:28px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  /* color:rgba(255,255,255,.45); */
  font-size:.85rem;line-height:1.6;
  padding:1.5rem;
}

.app-mockup-placeholder small{font-size:.72rem;opacity:.7;margin-top:.5rem;display:block}
.app-mockup-img{
  width:220px;border-radius:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  display:block;
}

/* ── In-nav lang toggle shown on ≤480px ── */
.nav-lang-toggle{
  display:none;
  padding:.6rem 1rem;margin-top:.25rem;
  background:var(--gray-100);border-radius:var(--radius-s);
  align-items:center;gap:.4rem;
  border-top:1px solid var(--border);
}

/* ════════════════════════════════════════
   SERVICES
════════════════════════════════════════ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.25rem;
}
.service-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-l);
  overflow:hidden;
  text-align:center;color:var(--white);
  transition:all var(--t);
  border-top:3px solid rgba(212,160,23,.5);
  display:flex;flex-direction:column;
}
.service-card:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-5px);
  border-top-color:var(--gold-300);
  box-shadow:0 12px 36px rgba(0,0,0,.2);
}

/* Service image (replaces emoji icon) */
.service-img{
  width:100%;height:160px;
  overflow:hidden;margin:0;flex-shrink:0;
  background:rgba(255,255,255,.06);
  position:relative;
}
.service-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease);
}
.service-card:hover .service-img img{transform:scale(1.07)}

/* Placeholder when image is missing */
.service-img::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:rgba(255,255,255,.35);
  font-style:italic;
}
.service-img.has-img::after{display:none}

/* Card body padding */
.service-card-body{
  padding:1.5rem 1.25rem 2rem;
  flex:1;display:flex;flex-direction:column;
}
.service-card h3{font-size:1rem;font-weight:700;margin-bottom:.6rem}
.service-card p{font-size:.83rem;color:rgba(255,255,255,.75);line-height:1.65}

/* ════════════════════════════════════════
   GALLERY
════════════════════════════════════════ */
.gallery-filter{
  display:flex;justify-content:center;gap:.6rem;
  flex-wrap:wrap;margin-bottom:2.5rem;
}
.filter-btn{
  padding:.42rem 1.1rem;border-radius:var(--radius-xl);
  font-size:.82rem;font-weight:600;
  border:1.5px solid var(--border);color:var(--text-3);
  transition:all var(--t);
}
.filter-btn:hover,.filter-btn.active{
  background:var(--green-700);color:var(--white);border-color:var(--green-700);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
}
.gallery-card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-m);cursor:pointer;
  background:var(--gray-200);
  aspect-ratio:1/1;
  box-shadow:var(--shadow-xs);transition:all var(--t);
}
.gallery-card:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}
.gallery-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s var(--ease);
  display:block;
}
.gallery-card:hover img{transform:scale(1.08)}
.gallery-overlay{
  position:absolute;inset:0;
  background:rgba(12,59,28,.55);opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--t);
}
.gallery-card:hover .gallery-overlay{opacity:1}
.gallery-overlay svg{width:32px;height:32px;color:white}

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.3fr;
  gap:3rem;align-items:start;
}
.contact-info-card{
  background:var(--green-800);color:var(--white);
  border-radius:var(--radius-l);padding:2.5rem;
}
.contact-info-card h3{font-size:1.3rem;font-weight:800;margin-bottom:1.5rem}
.contact-list{display:flex;flex-direction:column;gap:1.1rem}
.contact-item{display:flex;align-items:flex-start;gap:.9rem}
.c-icon{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
.c-icon svg{width:18px;height:18px;color:var(--gold-300)}
.c-info{display:flex;flex-direction:column}
.c-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:.15rem}
.c-value,.c-value a{font-size:.9rem;color:var(--white);font-weight:500;transition:color var(--t)}
.c-value a:hover{color:var(--gold-300)}
.contact-socials{display:flex;gap:.6rem;margin-top:1.75rem}
.social-link{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.12);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.social-link:hover{background:var(--gold-400);color:var(--green-900);transform:translateY(-2px)}
.social-link svg{width:17px;height:17px}

/* Contact form */
.contact-form-card{
  background:var(--white);border-radius:var(--radius-l);
  padding:2.5rem;box-shadow:var(--shadow-md);
  border:1px solid var(--border);
}
.contact-form-card h3{font-size:1.2rem;font-weight:800;color:var(--green-800);margin-bottom:1.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.9rem}
.form-group label{font-size:.8rem;font-weight:700;color:var(--text)}
.req{color:#dc2626}
.form-group input,.form-group textarea,.form-group select{
  padding:.68rem 1rem;border-radius:var(--radius-s);
  border:1.5px solid var(--border);background:var(--gray-100);
  color:var(--text);font-size:.9rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--green-500);background:var(--white);
  box-shadow:0 0 0 3px rgba(31,128,70,.12);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f72' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
  background-size:15px;padding-right:2.5rem;
}
.btn-submit{
  width:100%;padding:.85rem;border-radius:var(--radius-xl);
  background:var(--green-700);color:var(--white);
  font-weight:700;font-size:1rem;
  transition:all var(--t);
  box-shadow:0 3px 14px rgba(25,102,53,.25);
}
.btn-submit:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:0 6px 20px rgba(25,102,53,.35)}
.form-status{margin-top:.75rem;font-size:.85rem;text-align:center;min-height:1.4rem}
.form-status.success{color:#16a34a}
.form-status.error{color:#dc2626}

/* ════════════════════════════════════════
   COPY BUTTON
════════════════════════════════════════ */
.copy-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.28rem .72rem;border-radius:14px;
  background:var(--green-100);color:var(--green-700);
  font-size:.73rem;font-weight:700;
  border:1px solid var(--border);
  transition:all var(--t);white-space:nowrap;flex-shrink:0;
}
.copy-btn:hover{background:var(--green-700);color:var(--white);border-color:var(--green-700)}
.copy-btn.copied{background:#22c55e;color:var(--white);border-color:#22c55e}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer{background:var(--green-900);color:rgba(255,255,255,.78);padding-top:4rem}
.footer-inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:3rem;
}
.footer-brand-col{}
.footer-brand{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer-logo{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.15)}
.footer-brand strong{display:block;font-size:.92rem;font-weight:800;color:var(--white)}
.footer-brand small{display:block;font-size:.68rem;color:rgba(255,255,255,.45)}
.footer-tagline-ur{
  font-family:'Noto Nastaliq Urdu',serif;font-size:.95rem;
  color:var(--gold-300);line-height:2.2;margin-bottom:1.25rem;
  direction:rtl;text-align:right;
}
.footer-social{display:flex;gap:.55rem}
.f-social{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.f-social:hover{background:var(--gold-400);color:var(--green-900);transform:translateY(-2px)}
.f-social svg{width:15px;height:15px}
.footer-col h4{
  font-size:.83rem;font-weight:700;color:var(--white);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col ul li,.footer-col ul a{font-size:.83rem;color:rgba(255,255,255,.62);transition:color var(--t)}
.footer-col ul a:hover{color:var(--gold-300)}
.footer-col p{font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.7;margin-bottom:.8rem}
.btn-footer-donate{
  display:inline-block;padding:.58rem 1.3rem;border-radius:var(--radius-xl);
  background:var(--gold-400);color:var(--green-900);
  font-weight:700;font-size:.82rem;transition:all var(--t);
}
.btn-footer-donate:hover{background:var(--gold-300);transform:translateY(-1px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.1rem 0;
}
.footer-bottom-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
}
.footer-bottom p{font-size:.75rem;color:rgba(255,255,255,.38)}
.footer-bottom a{color:rgba(255,255,255,.55);transition:color var(--t)}
.footer-bottom a:hover{color:var(--gold-300)}

/* ════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════ */
.lightbox{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.93);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox-img{
  max-width:90vw;max-height:88vh;
  object-fit:contain;border-radius:var(--radius-m);
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  transition:opacity .2s;
}
.lb-btn{
  position:fixed;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:white;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);border:1px solid rgba(255,255,255,.2);
}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:1.25rem;right:1.25rem}
.lb-close:hover{transform:rotate(90deg)}
.lb-prev{top:50%;left:1rem;transform:translateY(-50%)}
.lb-next{top:50%;right:1rem;transform:translateY(-50%)}
.lb-prev:hover{transform:translateY(-50%) translateX(-2px)}
.lb-next:hover{transform:translateY(-50%) translateX(2px)}
.lb-counter{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.65);font-size:.82rem;
  background:rgba(0,0,0,.4);padding:.35rem .9rem;border-radius:20px;
}

/* ════════════════════════════════════════
   WHATSAPP FLOAT
════════════════════════════════════════ */
.whatsapp-float{
  position:fixed;bottom:1.75rem;right:1.75rem;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:white;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(37,211,102,.45);
  transition:all var(--t);
}
.whatsapp-float:hover{background:#1da851;transform:scale(1.1);box-shadow:0 10px 30px rgba(37,211,102,.55)}
.whatsapp-float svg{width:28px;height:28px}
.wa-tip{
  position:absolute;right:calc(100% + .6rem);
  background:var(--green-800);color:white;
  font-size:.75rem;font-weight:600;white-space:nowrap;
  padding:.3rem .7rem;border-radius:7px;
  opacity:0;pointer-events:none;transform:translateX(6px);
  transition:all var(--t);
}
.whatsapp-float:hover .wa-tip{opacity:1;transform:translateX(0)}
.wa-tip::after{
  content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--green-800);
}

/* ════════════════════════════════════════
   DONATE PAGE SPECIFIC
════════════════════════════════════════ */
/* Page hero */
.page-hero{
  background:linear-gradient(135deg,var(--green-900) 0%,var(--green-800) 60%,#0f5030 100%);
  padding:4rem 0;color:var(--white);text-align:center;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:url('logo/logo.jpg') center/300px no-repeat;
  opacity:.04;
}
.page-hero-inner{position:relative;z-index:1}
.page-hero h1{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;
  margin-bottom:.75rem;letter-spacing:-.02em;
}
.page-hero p{font-size:1.05rem;color:rgba(255,255,255,.78);max-width:520px;margin:0 auto}
.page-hero .eyebrow{color:var(--gold-300)}

/* Donate cards grid */
.donate-layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2rem;align-items:start;
  margin-bottom:3rem;
}
.donate-card{
  background:var(--white);border-radius:var(--radius-l);
  padding:2rem;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.donate-card-header{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:2px solid var(--green-100);
}
.donate-card-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--green-100);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.donate-card-icon svg{width:22px;height:22px;color:var(--green-600)}
.donate-card h3{font-size:1.1rem;font-weight:800;color:var(--green-800)}
.bank-items{display:flex;flex-direction:column;gap:.9rem}
.bank-item{
  display:flex;flex-direction:column;gap:.2rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--gray-100);
}
.bank-item:last-child{border-bottom:none;padding-bottom:0}
.bank-item-label{font-size:.73rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.bank-item-val{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.bank-item-val strong{font-size:.92rem;color:var(--text);font-weight:700}

/* Note box */
.note-box{
  display:flex;align-items:flex-start;gap:.6rem;
  background:#fffbeb;border:1px solid #fcd34d;
  border-radius:var(--radius-m);padding:1rem 1.25rem;
  font-size:.84rem;color:#78610a;line-height:1.65;
  margin-top:1.25rem;
}
.note-box svg{flex-shrink:0;margin-top:2px;width:16px;height:16px;color:#d97706}

/* Donate form card */
.donate-form-card{
  background:var(--white);border-radius:var(--radius-l);
  border:2px solid var(--gold-400);
  box-shadow:0 8px 40px rgba(212,160,23,.18);
  overflow:hidden;
}
.donate-form-header{
  background:linear-gradient(135deg,var(--green-800),var(--green-700));
  padding:1.5rem 2rem;
  display:flex;align-items:center;gap:1rem;color:var(--white);
}
.donate-form-header img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.donate-form-header h2{font-size:1.25rem;font-weight:800}
.donate-form-header p{font-size:.82rem;color:rgba(255,255,255,.72)}
.donate-form-body{padding:2rem}
.dform-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dform-group{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.85rem}
.dform-group label{font-size:.8rem;font-weight:700;color:var(--text)}
.dform-group input,.dform-group select,.dform-group textarea{
  padding:.68rem 1rem;border-radius:var(--radius-s);
  border:1.5px solid var(--border);background:var(--gray-100);
  color:var(--text);font-size:.9rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.dform-group input:focus,.dform-group select:focus,.dform-group textarea:focus{
  border-color:var(--gold-400);background:var(--white);
  box-shadow:0 0 0 3px rgba(212,160,23,.15);
}
.dform-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f72' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
  background-size:15px;padding-right:2.5rem;
}
.dform-group textarea{resize:vertical;min-height:90px}
.btn-donate-submit{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.9rem;border-radius:var(--radius-xl);
  background:#25d366;color:var(--white);
  font-weight:700;font-size:1rem;
  transition:all var(--t);
  box-shadow:0 4px 16px rgba(37,211,102,.3);
  margin-top:.5rem;
}
.btn-donate-submit:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.4)}
.dform-status{margin-top:.75rem;font-size:.85rem;text-align:center}
.confirm-section{
  background:var(--green-800);border-radius:var(--radius-l);
  padding:2.5rem;color:var(--white);text-align:center;
  margin-top:2rem;
}
.confirm-section h3{font-size:1.3rem;font-weight:800;margin-bottom:.75rem}
.confirm-section p{color:rgba(255,255,255,.78);margin-bottom:1.5rem;font-size:.95rem}
.confirm-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-call{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.8rem;border-radius:var(--radius-xl);
  background:var(--gold-400);color:var(--green-900);
  font-weight:700;font-size:.95rem;transition:all var(--t);
  box-shadow:0 3px 12px rgba(212,160,23,.35);
}
.btn-call:hover{background:var(--gold-300);transform:translateY(-2px)}
.btn-wa{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.8rem;border-radius:var(--radius-xl);
  background:#25d366;color:white;
  font-weight:700;font-size:.95rem;transition:all var(--t);
}
.btn-wa:hover{background:#1da851;transform:translateY(-2px)}
.btn-call svg,.btn-wa svg{width:18px;height:18px}

/* ════════════════════════════════════════
   UTILITIES
════════════════════════════════════════ */
.hidden{display:none!important}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}

/* ════════════════════════════════════════
   RESPONSIVE — 1280px
════════════════════════════════════════ */
@media(max-width:1280px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
}

/* ════════════════════════════════════════
   RESPONSIVE — 1024px (LAPTOP)
════════════════════════════════════════ */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:240px 1fr;gap:2.5rem}
  .about-logo-frame{width:220px;height:220px}
  .about-pillars{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .donate-layout{grid-template-columns:1fr}
}

/* ════════════════════════════════════════
   RESPONSIVE — 768px (TABLET / MOBILE)
   KEY FIX: nav uses position:absolute (not
   fixed) to avoid Android stacking bugs
════════════════════════════════════════ */
@media(max-width:768px){
  :root{--topbar-h:34px;--header-h:62px}
  .section{padding:3rem 0}
  .section-header{margin-bottom:2.5rem}
  .container{width:calc(100% - 2rem)}

  /* ── Topbar ── */
  .topbar-contact .topbar-email{display:none}

  /* ── Header ──
     position:sticky creates a containing block
     so the dropdown nav (absolute) stays anchored
     directly under the header on scroll           */
  .header{overflow:visible}

  .site-nav{
    /* Absolute → relative to sticky header, NOT fixed to viewport */
    position:absolute;
    top:100%;       /* flush with header bottom */
    left:0;right:0;
    background:var(--white);
    flex-direction:column;align-items:stretch;
    gap:.2rem;
    border-top:2px solid var(--green-100);
    border-bottom:3px solid var(--green-100);
    box-shadow:0 14px 36px rgba(12,59,28,.14);
    /* Hidden via max-height (avoids transform/fixed bugs on Android) */
    max-height:0;
    overflow:hidden;
    padding:0;
    transition:max-height .35s cubic-bezier(.4,0,.2,1),
               padding .25s cubic-bezier(.4,0,.2,1);
    z-index:999;
  }
  .site-nav.open{
    max-height:520px;  /* extra for Download App link + lang toggle */
    padding:.6rem .75rem .75rem;
  }
  .nav-link{
    padding:.72rem 1rem;
    font-size:.95rem;
    border-radius:var(--radius-s);
  }
  .nav-link::after{display:none}
  .nav-link:hover,.nav-link.active{
    background:var(--green-50);
    color:var(--green-700);
  }
  /* Hamburger — always visible, 44px tap target (WCAG 2.5.5) */
  .hamburger{
    display:flex;
    padding:10px;
    min-width:44px;min-height:44px;
    align-items:center;justify-content:center;
    flex-shrink:0;
  }
  /* Donate Now hides from header on mobile — it lives in the CTA bar */
  .btn-donate-nav{display:none}

  /* ── Slider ── */
  .slider-arrow{width:34px;height:34px}
  .slider-arrow svg{width:15px;height:15px}
  .slider-prev{left:.5rem}
  .slider-next{right:.5rem}
  /* Fixed height on mobile — consistent display for landscape banners.
     When Banner1-mobile.jpg / Banner2-mobile.jpg (800×520 px) are provided,
     activate the commented <source> in index.html and cropping disappears. */
  .slide img{
    height:260px;
    min-height:0;
    object-fit:cover;
    object-position:center center;
  }

  /* ── Hero CTA bar ── */
  .hero-cta-bar{
    flex-direction:column;
    align-items:center;
    gap:.75rem;
    padding:1.25rem 1rem;
  }
  .btn-download-app{
    width:100%;max-width:320px;
    justify-content:center;
    font-size:1rem;
  }
  .btn-donate-hero{
    width:100%;max-width:280px;
    justify-content:center;
    font-size:.9rem;
  }
  .hero-cta-contact{font-size:.85rem}

  /* ── Download App section ── */
  .app-cta-inner{grid-template-columns:1fr;gap:2rem}
  .app-cta-text h2{font-size:1.75rem}
  .app-cta-mockup{display:none}  /* hide mockup on tablet/mobile — saves space */

  /* ── About ── */
  .about-grid{
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .about-logo-wrap{
    justify-content:center;  /* centered on all mobile sizes */
    padding:0;
  }
  .about-logo-frame{width:180px;height:180px}
  .about-pillars{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .about-lead{font-size:.97rem}
  .section-header.left{text-align:center}
  .section-header.left .divider{margin-left:auto}

  /* ── Services ── */
  .services-grid{grid-template-columns:repeat(2,1fr)}

  /* ── Gallery ── */
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}

  /* ── Contact ── */
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .contact-info-card{padding:1.75rem}
  .contact-form-card{padding:1.75rem}

  /* ── Footer ── */
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:.5rem}
  .footer{padding-top:3rem}

  /* ── Donate page ── */
  .dform-row{grid-template-columns:1fr}
  .confirm-btns{flex-direction:column;align-items:center}
  .donate-form-body{padding:1.5rem}
  .page-hero{padding:2.5rem 0}
}

/* ════════════════════════════════════════
   RESPONSIVE — 480px (SMALL PHONES)
════════════════════════════════════════ */
@media(max-width:480px){
  :root{--header-h:58px;--topbar-h:30px}
  .section{padding:2.5rem 0}
  .section-header{margin-bottom:2rem}
  .container{width:calc(100% - 1.5rem)}

  /* Topbar — minimal on tiny screens */
  .topbar-social{display:none}
  .topbar-contact span{display:none}  /* hide address */
  .topbar{height:var(--topbar-h)}

  /* Header — compact on small phones */
  .brand-sub{display:none}
  .brand-logo{width:44px;height:44px}
  .brand-name{font-size:.88rem}
  /* lang-toggle stays visible in header at all sizes;
     nav-lang-toggle inside dropdown remains hidden */
  .nav-lang-toggle{display:none}

  /* About */
  .about-logo-frame{width:160px;height:160px}
  .about-pillars{grid-template-columns:1fr;gap:.75rem}
  .pillar{padding:1rem}

  /* Services */
  .services-grid{grid-template-columns:1fr}
  .service-img{height:180px}

  /* Hero slider — height already fixed at 260px in the 768px block */

  /* nav-lang-toggle kept hidden — toggle lives in the header controls */

  /* Gallery */
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}

  /* Lightbox arrows */
  .lb-prev{left:.4rem}
  .lb-next{right:.4rem}

  /* WhatsApp float */
  .whatsapp-float{bottom:1rem;right:1rem;width:48px;height:48px}
  .whatsapp-float svg{width:23px;height:23px}

  /* Donate form */
  .donate-form-header{padding:1.1rem 1.25rem}
  .donate-form-header img{width:44px;height:44px}
  .donate-form-header h2{font-size:1.1rem}
}

/* ════════════════════════════════════════
   RESPONSIVE — 375px (COMPACT PHONES)
════════════════════════════════════════ */
@media(max-width:375px){
  :root{--header-h:56px}
  .section{padding:2rem 0}
  .container{width:calc(100% - 1.25rem)}

  /* Brand shrinks to fit */
  .brand-logo{width:38px;height:38px}
  .brand-name{font-size:.8rem}

  /* Hero CTA */
  .hero-cta-bar{padding:.85rem .75rem;gap:.6rem}
  .btn-download-app{font-size:.9rem;padding:.65rem 1.25rem}
  .btn-donate-hero{font-size:.82rem;padding:.6rem 1.1rem}

  /* Gallery */
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.4rem}

  /* About */
  .about-logo-frame{width:140px;height:140px}

  /* Services */
  .services-grid{grid-template-columns:1fr}

  /* Cards */
  .contact-info-card{padding:1.25rem}
  .contact-form-card{padding:1.25rem}
  .donate-card{padding:1.25rem}
  .service-img{height:160px}
}

/* ════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--gray-100)}
::-webkit-scrollbar-thumb{background:var(--green-400);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--green-600)}

/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
.fade-up{
  opacity:0;transform:translateY(24px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.fade-up.visible{opacity:1;transform:translateY(0)}