/* ─── SupportFund.org — Main Stylesheet ─────────────────────
   Design: Aziz Belkharmoudi Guidelines
   Colors: #003399 | #333333 | #f7f7f7 | #cccccc | #000000
   Font:   Open Sans 400/600/700
   X unit: 46px
─────────────────────────────────────────────────────────── */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #003399;
  --black:      #000000;
  --dark-grey:  #333333;
  --mid-grey:   #cccccc;
  --light-grey: #f7f7f7;
  --white:      #ffffff;
  --x:          46px;
  --pad:        92px;   /* 2X side padding */
  --btn-h:      44px;
  --btn-w:      160px;
  --trans:      0.22s ease;
}

html  { scroll-behavior: smooth; }
body  { font-family: 'Open Sans', sans-serif; font-size: 18px;
        line-height: 1.5; color: var(--dark-grey); background: var(--white); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4 { font-weight: 700; color: var(--black); line-height: 1.15; letter-spacing:-.01em; }
h1 { font-size: clamp(34px,5vw,64px); }
h2 { font-size: clamp(26px,3vw,40px); }
h3 { font-size: 18px; }
p  { max-width: 72ch; }
a  { color: inherit; }

/* ─── LANGUAGE BAR ───────────────────────────────────────── */
#lang-bar {
  background: var(--black); color: var(--white);
  height: 36px; position: fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:flex-end;
  padding: 0 var(--pad);
}
#lang-bar a {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--mid-grey); text-decoration:none; margin-left:18px;
  transition: color var(--trans);
}
#lang-bar a:hover, #lang-bar a.active { color: var(--white); }

/* ─── NAVBAR ─────────────────────────────────────────────── */
#navbar {
  background: var(--white); border-bottom:1px solid var(--mid-grey);
  height: var(--x); display:flex; align-items:center; padding: 0 var(--pad);
  position:fixed; top:36px; left:0; right:0; z-index:999;
}
.logo {
  font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--black); text-decoration:none; display:flex; align-items:center; gap:9px;
  flex-shrink:0;
}
.logo .dot { display:inline-block; width:9px; height:9px; background:var(--blue); }
.logo span { color: var(--blue); }
#navbar nav { display:flex; align-items:stretch; height:100%; margin-left:auto; }
#navbar nav a {
  display:flex; align-items:center; padding: 0 16px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--dark-grey); text-decoration:none;
  border: 2px solid transparent; height:var(--x);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
#navbar nav a:hover, #navbar nav a.current {
  background:var(--black); color:var(--white); border-color:var(--black);
}
#navbar nav a.cta { background:var(--blue); color:var(--white); margin-left:12px; padding: 0 22px; }
#navbar nav a.cta:hover { background:var(--black); border-color:var(--black); }
.menu-toggle {
  display:none; background:none; border:none; font-size:22px;
  cursor:pointer; margin-left:auto; color:var(--black);
}
#mobile-nav {
  display:none; flex-direction:column;
  background:var(--white); border-bottom:2px solid var(--black);
  position:fixed; top:calc(36px + var(--x)); left:0; right:0; z-index:998;
}
#mobile-nav a {
  display:block; padding:14px var(--pad);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--black); text-decoration:none; border-bottom:1px solid var(--light-grey);
}
#mobile-nav a:hover { background:var(--black); color:var(--white); }
#mobile-nav.open { display:flex; }

/* ─── PAGE OFFSET ────────────────────────────────────────── */
.page-body { margin-top: calc(36px + var(--x)); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); min-width:var(--btn-w); padding: 0 28px;
  font-family:'Open Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border: 2px solid transparent; cursor:pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.btn-primary  { background:var(--white);  color:var(--black); border-color:var(--white); }
.btn-primary:hover  { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-outline  { background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-outline:hover  { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-blue     { background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn-blue:hover     { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-dark     { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-dark:hover     { background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn-full { width:100%; justify-content:center; }

/* ─── SECTIONS ───────────────────────────────────────────── */
section { padding: calc(var(--x)*2) var(--pad); }
.section-label {
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin-bottom:calc(var(--x)*.5);
  display:flex; align-items:center; gap:12px;
}
.section-label::before { content:''; display:block; width:32px; height:2px; background:var(--blue); flex-shrink:0; }
.section-title { margin-bottom:calc(var(--x)*.4); }
.section-rule  { width:48px; height:3px; background:var(--blue); margin-bottom:var(--x); }
.section-body  { font-size:18px; color:var(--dark-grey); line-height:1.5; max-width:680px; }
.section-center { text-align:center; }
.section-center .section-label { justify-content:center; }
.section-center .section-rule  { margin-left:auto; margin-right:auto; }
.section-center .section-body  { margin-left:auto; margin-right:auto; }

/* ─── HERO CAROUSEL ──────────────────────────────────────── */
#hero { height:100vh; min-height:580px; position:relative; overflow:hidden; }
.hero-slides { position:absolute; inset:0; display:flex; transition: transform .9s cubic-bezier(.77,0,.18,1); }
.hero-slide  { min-width:100%; height:100%; display:flex; align-items:center;
               padding: 0 var(--pad); position:relative; }
.hero-slide::before { content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(0,0,0,.58) 0%,rgba(0,51,153,.28) 100%); }
.hero-content { position:relative; z-index:2; max-width:660px;
  opacity:0; transform:translateY(26px); animation:hFade .8s .3s forwards; }
@keyframes hFade { to{ opacity:1; transform:translateY(0); } }
.hero-eyebrow { font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.65); margin-bottom:var(--x); }
.hero-title   { color:var(--white); margin-bottom:calc(var(--x)*.6); }
.hero-title em{ font-style:normal; color:rgba(255,255,255,.5); }
.hero-body    { font-size:18px; color:rgba(255,255,255,.78); max-width:500px;
  margin-bottom:var(--x); line-height:1.6; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

.carousel-controls { position:absolute; bottom:32px; left:var(--pad); z-index:10;
  display:flex; align-items:center; gap:10px; }
.carousel-dot { width:8px; height:8px; border:2px solid rgba(255,255,255,.55);
  border-radius:50%; cursor:pointer; background:transparent;
  transition:background var(--trans),border-color var(--trans); }
.carousel-dot.active { background:var(--white); border-color:var(--white); }
.carousel-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  color:var(--white); width:38px; height:38px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--trans); }
.carousel-btn:hover { background:rgba(255,255,255,.28); }
.carousel-pause { background:transparent; border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.65); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding: 0 12px; height:38px; cursor:pointer;
  transition:background var(--trans),color var(--trans); }
.carousel-pause:hover { background:rgba(255,255,255,.15); color:var(--white); }

/* ─── STATS BAND ─────────────────────────────────────────── */
#stats { background:var(--black); padding: var(--x) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--x); }
.stat-item { text-align:center; }
.stat-num  { font-size:clamp(30px,4vw,52px); font-weight:700; color:var(--white);
  letter-spacing:-.02em; line-height:1; }
.stat-num span { color:var(--blue); }
.stat-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mid-grey); margin-top:8px; }

/* ─── STEPS ──────────────────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--x); margin-top:var(--x); }
.step-card  { background:var(--white); padding: var(--x) calc(var(--x)*.7);
  border-left:3px solid var(--light-grey);
  transition:border-color var(--trans),box-shadow var(--trans); }
.step-card:hover { border-left-color:var(--blue); box-shadow:0 4px 24px rgba(0,0,0,.07); }
.step-num   { font-size:48px; font-weight:700; color:var(--light-grey); line-height:1;
  margin-bottom:12px; letter-spacing:-.04em; }
.step-title { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--black); margin-bottom:10px; }
.step-body  { font-size:16px; color:var(--dark-grey); line-height:1.55; }

/* ─── CATEGORIES GRID ────────────────────────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:var(--x); }
.cat-card { background:var(--light-grey); padding: calc(var(--x)*1.1) calc(var(--x)*.7);
  position:relative; overflow:hidden; cursor:pointer;
  transition:background var(--trans); }
.cat-card::after { content:''; position:absolute; bottom:0; left:0;
  width:0; height:3px; background:var(--blue); transition:width .3s; }
.cat-card:hover { background:var(--black); }
.cat-card:hover::after { width:100%; }
.cat-card:hover .cat-title,.cat-card:hover .cat-body { color:var(--white); }
.cat-card:hover .cat-icon { color:var(--blue); }
.cat-icon  { font-size:28px; margin-bottom:14px; color:var(--blue); }
.cat-title { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--black); margin-bottom:10px; transition:color var(--trans); }
.cat-body  { font-size:14px; color:var(--dark-grey); line-height:1.5; transition:color var(--trans); }

/* ─── PROJECT CARDS ──────────────────────────────────────── */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--x); margin-top:var(--x); }
.project-card  { background:var(--white); overflow:hidden; }
.project-img   { height:180px; overflow:hidden; position:relative; background:var(--blue); }
.project-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.project-card:hover .project-img img { transform:scale(1.04); }
.project-tag   { position:absolute; top:12px; left:12px; background:var(--blue); color:var(--white);
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; }
.project-body  { padding: calc(var(--x)*.65); }
.project-title { font-size:16px; font-weight:700; color:var(--black); margin-bottom:8px; line-height:1.3; }
.project-desc  { font-size:14px; color:var(--dark-grey); line-height:1.5; margin-bottom:14px; }
.project-meta  { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.project-amount { font-size:13px; font-weight:700; color:var(--black); }
.project-type   { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mid-grey); }
.progress-bar   { height:3px; background:var(--light-grey); margin-bottom:14px; }
.progress-fill  { height:100%; background:var(--blue); }

/* ─── APPLY / CTA SECTION ────────────────────────────────── */
#apply-cta { background:var(--blue); padding: calc(var(--x)*2.5) var(--pad); }
#apply-cta .section-label { color:rgba(255,255,255,.6); }
#apply-cta .section-label::before { background:rgba(255,255,255,.4); }
#apply-cta h2 { color:var(--white); }
#apply-cta .section-body { color:rgba(255,255,255,.75); margin-bottom:var(--x); }
.apply-btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--x); }
.section-center .apply-btns { justify-content:center; }

/* ─── PARTNERS ───────────────────────────────────────────── */
.partner-logos { display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:28px; margin-top:var(--x);
  padding: var(--x) 0; border-top:1px solid var(--light-grey); border-bottom:1px solid var(--light-grey); }
.partner-logo { font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mid-grey); text-decoration:none; transition:color var(--trans); }
.partner-logo:hover { color:var(--black); }

/* ─── TESTIMONIAL ────────────────────────────────────────── */
#testimonial { background:var(--black); }
.t-inner { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--x)*2); align-items:center; }
.t-quote { font-size:clamp(19px,2.4vw,30px); font-weight:600; color:var(--white); line-height:1.4; }
.t-quote::before { content:'\201C'; display:block; font-size:72px; color:var(--blue);
  line-height:.8; margin-bottom:16px; font-family:Georgia,serif; }
.t-author { margin-top:24px; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mid-grey); }
.t-author span { color:var(--blue); }
.t-stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--x); }
.t-stat  { border-left:3px solid var(--blue); padding-left:16px; }
.t-stat-num   { font-size:34px; font-weight:700; color:var(--white); line-height:1; }
.t-stat-label { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mid-grey); margin-top:6px; }

/* ─── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero { background:var(--blue); padding: calc(var(--x)*2) var(--pad); color:var(--white); }
.page-hero h1 { color:var(--white); }
.page-hero p  { color:rgba(255,255,255,.75); margin-top:12px; max-width:580px; }

/* ─── FORMS ──────────────────────────────────────────────── */
.form-wrap { max-width:760px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--x); }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:var(--x); }
.form-group label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--black); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 2px solid var(--mid-grey); padding: 12px 14px; font-family:'Open Sans',sans-serif;
  font-size:16px; color:var(--dark-grey); background:var(--white);
  transition:border-color var(--trans); outline:none; width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--blue); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-note { font-size:13px; color:var(--mid-grey); margin-top:4px; }

/* ─── ALERTS ─────────────────────────────────────────────── */
.alert { padding:14px 18px; margin-bottom:var(--x); font-size:14px; font-weight:600;
  border-left:4px solid; }
.alert-success { background:#f0faf4; border-color:#2e7d32; color:#1b4e22; }
.alert-error   { background:#fff0f0; border-color:#c62828; color:#7f0000; }

/* ─── TABLE ──────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; margin-top:var(--x); }
.data-table th { background:var(--black); color:var(--white); font-size:10px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:14px 16px; text-align:left; }
.data-table td { padding:13px 16px; font-size:14px; border-bottom:1px solid var(--light-grey); }
.data-table tr:hover td { background:var(--light-grey); }
.badge { display:inline-block; padding:3px 9px; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }
.badge-new      { background:#e3f0ff; color:#003399; }
.badge-approved { background:#e8f5e9; color:#1b5e20; }
.badge-pending  { background:#fff8e1; color:#5d4037; }
.badge-rejected { background:#fce4ec; color:#880e4f; }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer { background:var(--black); border-top:1px solid #1a1a1a;
  padding: calc(var(--x)*1.5) var(--pad) var(--x); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:calc(var(--x)*1.5);
  padding-bottom:var(--x); border-bottom:1px solid #1a1a1a; }
.footer-logo-text { font-size:14px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--white); }
.footer-logo-text span { color:var(--blue); }
.footer-brand p { font-size:14px; color:#666; line-height:1.6; margin-top:12px; max-width:280px; }
.footer-subscribe { display:flex; gap:0; margin-top:18px; }
.footer-subscribe input { border:2px solid #333; background:#111; color:var(--white);
  padding: 0 14px; font-size:13px; flex:1; height:var(--btn-h); outline:none;
  transition:border-color var(--trans); }
.footer-subscribe input:focus { border-color:var(--blue); }
.footer-subscribe .btn { min-width:auto; flex-shrink:0; }
.footer-col-title { font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.footer-col a { display:block; font-size:14px; color:#666; text-decoration:none;
  margin-bottom:8px; transition:color var(--trans); }
.footer-col a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--x); font-size:12px; color:#444; }
.footer-bottom a { color:#666; text-decoration:none; }
.footer-bottom a:hover { color:var(--white); }

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1100px) {
  :root { --pad: 48px; }
  .cat-grid        { grid-template-columns:repeat(2,1fr); }
  .projects-grid   { grid-template-columns:repeat(2,1fr); }
  #stats           { grid-template-columns:repeat(2,1fr); }
  .footer-grid     { grid-template-columns:1fr 1fr; }
  .t-inner         { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --pad: 22px; }
  .steps-grid      { grid-template-columns:1fr; }
  .cat-grid        { grid-template-columns:1fr; }
  .projects-grid   { grid-template-columns:1fr; }
  #stats           { grid-template-columns:repeat(2,1fr); gap:24px; }
  .footer-grid     { grid-template-columns:1fr; }
  .form-grid       { grid-template-columns:1fr; }
  .hero-actions    { flex-direction:column; }
  .apply-btns      { flex-direction:column; }
  #navbar nav      { display:none; }
  .menu-toggle     { display:block; }
}