/*
 * ============================================================
 * America Global Relations Foundation
 * styles.css — Complete Stylesheet
 * Language: CSS3
 * Design: UN-style institutional design system
 * ============================================================
 */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ───────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --un:       #009edb;   /* UN Blue — primary */
  --un-dk:    #1a3a5c;   /* Dark Navy */
  --un-md:    #2e6da4;   /* Medium Blue */
  --un-lt:    #e8f4fd;   /* Light Blue */
  --gold:     #c8912a;   /* Gold accent */
  --red:      #b5271c;   /* Alert / Urgent red */
  --grn:      #2e7d32;   /* Success green */

  /* Neutral Grays */
  --g1:       #f5f7fa;   /* Lightest gray — backgrounds */
  --g2:       #e8ecf0;   /* Light gray — borders */
  --g3:       #d0d8e0;   /* Mid-light gray — dividers */
  --g5:       #6b7c93;   /* Mid gray — body text */
  --g7:       #3d4f61;   /* Dark gray — secondary text */
  --g9:       #1a2332;   /* Near-black */

  /* Base */
  --wh:       #ffffff;
  --ink:      #1a2332;

  /* Typography */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', Arial, Helvetica, sans-serif;
}


/* ─────────────────────────────────────────────
   2. CSS RESET & BASE STYLES
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--wh);
  overflow-x: hidden;
  line-height: 1.5;
}

a {
  color: var(--un-md);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--un-dk);
}

img {
  max-width: 100%;
  display: block;
}


/* ─────────────────────────────────────────────
   3. CUSTOM SCROLLBAR
   ───────────────────────────────────────────── */
::-webkit-scrollbar         { width: 4px; }
::-webkit-scrollbar-track   { background: var(--g1); }
::-webkit-scrollbar-thumb   { background: var(--un); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--un-dk); }


/* ─────────────────────────────────────────────
   4. TOP INFORMATION BAR
   ───────────────────────────────────────────── */
.topbar {
  background: var(--un-dk);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  padding: 5px 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

.topbar a:hover {
  color: #fff;
  text-decoration: none;
}

.topbar-right {
  display: flex;
  gap: 14px;
  align-items: center;
}

.topbar-donate {
  background: var(--un);
  color: white;
  padding: 2px 12px;
  font-weight: 700;
  font-size: 11px;
}

.topbar-donate:hover {
  background: var(--gold);
  color: var(--un-dk);
  text-decoration: none;
}


/* ─────────────────────────────────────────────
   5. NAVIGATION
   ───────────────────────────────────────────── */
nav {
  background: var(--wh);
  border-bottom: 3px solid var(--un);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  padding: 0 4%;
  height: 60px;
  gap: 16px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-emblem {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.nav-emblem svg {
  width: 100%;
  height: 100%;
}

.nav-brand-main {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--un-dk);
  display: block;
  line-height: 1.2;
}

.nav-brand-sub {
  font-size: 9px;
  color: var(--g5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Nav divider line */
.ndiv {
  width: 1px;
  height: 34px;
  background: var(--g3);
  flex-shrink: 0;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  flex: 1;
  height: 60px;
}

.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links > li > a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--g7);
  white-space: nowrap;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}

.nav-links > li > a:hover {
  color: var(--un);
  background: var(--g1);
  text-decoration: none;
}

/* Dropdown menus */
.nav-links > li.hd:hover > .dd {
  display: block;
}

.dd {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--wh);
  border-top: 2px solid var(--un);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 200;
}

.dd a {
  display: block;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--g7);
  border-bottom: 1px solid var(--g1);
}

.dd a:hover {
  background: var(--un-lt);
  color: var(--un);
  text-decoration: none;
}

/* CTA Button */
.nav-cta {
  margin-left: auto;
  background: var(--un);
  color: white;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.2s;
}

.nav-cta:hover {
  background: var(--un-dk);
  color: white;
  text-decoration: none;
}


/* ─────────────────────────────────────────────
   6. HERO SECTION
   ───────────────────────────────────────────── */
.hero {
  background: linear-gradient(155deg, var(--un-dk) 0%, #1a4a6e 55%, #0d3558 100%);
  color: white;
  padding: 52px 4% 0;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Background grid lines pattern */
.hero-bglines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 60px);
  pointer-events: none;
}

/* Hero text content */
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 44px;
}

/* Kicker badge */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--un);
  border: 1px solid rgba(0, 158, 219, 0.3);
  padding: 4px 13px;
  margin-bottom: 18px;
  background: rgba(0, 158, 219, 0.1);
}

/* Blinking dot in kicker */
.hero-kicker-dot {
  width: 5px;
  height: 5px;
  background: var(--un);
  border-radius: 50%;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* Hero heading */
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 14px;
  color: white;
}

.hero h1 span {
  color: var(--un);
}

/* Hero description */
.hero-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  max-width: 500px;
  margin-bottom: 26px;
}

/* Hero buttons */
.hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Globe SVG illustration */
.hero-globe {
  width: min(300px, 90%);
  filter: drop-shadow(0 0 36px rgba(0, 158, 219, 0.28));
  animation: float 7s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* Hero statistics bar at the bottom */
.hero-statbar {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 4%;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
}

.hst      { text-align: center; }
.hst-n    { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--un); line-height: 1; }
.hst-l    { font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }


/* ─────────────────────────────────────────────
   7. STATISTICS BANDS
   ───────────────────────────────────────────── */
/* Dark blue statistics band */
.bb {
  background: var(--un-dk);
  padding: 22px 4%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bb-i  { text-align: center; }
.bb-n  { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--un); line-height: 1; }
.bb-l  { font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }


/* ─────────────────────────────────────────────
   8. TAB NAVIGATION BAR
   ───────────────────────────────────────────── */
.tab-nav {
  background: var(--g1);
  border-bottom: 1px solid var(--g3);
  display: flex;
  overflow-x: auto;
  padding: 0 4%;
  position: sticky;
  top: 60px;
  z-index: 800;
}

.tab-nav::-webkit-scrollbar { height: 3px; }

.tab-btn {
  flex-shrink: 0;
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--g5);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: var(--font-sans);
}

.tab-btn:hover,
.tab-btn.active {
  color: var(--un);
  border-bottom-color: var(--un);
  background: var(--wh);
}


/* ─────────────────────────────────────────────
   9. TAB PANELS
   ───────────────────────────────────────────── */
.tab-panel {
  display: none;
  padding: 40px 4%;
  animation: fadeIn 0.3s ease;
}

.tab-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────
   10. COMMON UTILITY CLASSES
   ───────────────────────────────────────────── */
/* Section label (eyebrow text) */
.sl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--un);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sl::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--un);
  display: block;
}

/* Section headings */
h2.sh {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--un-dk);
  line-height: 1.2;
  margin-bottom: 12px;
}

h2.sh em {
  font-style: italic;
  color: var(--un);
}

/* Lead paragraph */
.lead {
  font-size: 15px;
  font-weight: 300;
  color: var(--g5);
  line-height: 1.75;
  max-width: 660px;
}

/* Grid layouts */
.g2 { display: grid; grid-template-columns: 1fr 1fr;            gap: 28px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr);     gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr);     gap: 16px; }

/* Divider line */
.divider {
  height: 1px;
  background: var(--g2);
  margin: 28px 0;
}

/* Alert / info box */
.alert {
  background: var(--un-lt);
  border-left: 4px solid var(--un);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--un-dk);
  margin-bottom: 18px;
}

/* Tag / badge pills */
.tag    { display: inline-block; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.t-blue { background: var(--un-lt);  color: var(--un); }
.t-gold { background: #fef9ec;       color: var(--gold); }
.t-red  { background: #fdf0ef;       color: var(--red); }
.t-grn  { background: #f0f7f0;       color: var(--grn); }

/* Spacing helpers */
.mt12 { margin-top: 12px; }
.mt20 { margin-top: 20px; }
.mt28 { margin-top: 28px; }


/* ─────────────────────────────────────────────
   11. BUTTONS
   ───────────────────────────────────────────── */
.btn-p {
  background: var(--un);
  color: white;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.2s;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.btn-p:hover {
  background: #0080b8;
  color: white;
  text-decoration: none;
}

.btn-w {
  background: transparent;
  color: white;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
  display: inline-block;
  cursor: pointer;
}

.btn-w:hover {
  border-color: white;
  text-decoration: none;
}


/* ─────────────────────────────────────────────
   12. WELCOME CARDS (Leadership messages)
   ───────────────────────────────────────────── */
.wcard {
  background: var(--wh);
  border: 1px solid var(--g2);
  border-left: 4px solid var(--un);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.wcard.gold { border-left-color: var(--gold); }
.wcard.grn  { border-left-color: var(--grn); }

.wcard-from {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--un);
  margin-bottom: 8px;
}

.wcard.gold .wcard-from { color: var(--gold); }
.wcard.grn  .wcard-from { color: var(--grn); }

.wcard blockquote {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--g7);
  line-height: 1.8;
  margin-bottom: 12px;
}

.wcard-sig   { font-size: 13px; font-weight: 700; color: var(--un-dk); }
.wcard-title { font-size: 11px; color: var(--g5); margin-top: 2px; }


/* ─────────────────────────────────────────────
   13. EXECUTIVE BOARD CARDS
   ───────────────────────────────────────────── */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.bcard {
  background: var(--wh);
  border: 1px solid var(--g2);
  padding: 20px;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.bcard:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  border-color: var(--un);
}

.bavatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--un-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 12px;
}

.bname  { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--un-dk); margin-bottom: 3px; }
.brole  { font-size: 11px; font-weight: 600; color: var(--un); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; margin-bottom: 8px; }
.bdesc  { font-size: 12px; color: var(--g5); line-height: 1.6; }


/* ─────────────────────────────────────────────
   14. PROGRAM CARDS
   ───────────────────────────────────────────── */
.prog {
  background: var(--wh);
  border: 1px solid var(--g2);
  border-top: 3px solid var(--pc, var(--un));
  padding: 18px;
  transition: box-shadow 0.2s;
}

.prog:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.prog-ico { font-size: 24px; margin-bottom: 10px; }

.prog h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--un-dk);
  margin-bottom: 7px;
  line-height: 1.3;
}

.prog p {
  font-size: 12px;
  color: var(--g5);
  line-height: 1.65;
}

.prog .ptag {
  display: inline-block;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc, var(--un));
  border: 1px solid var(--pc, var(--un));
  padding: 2px 8px;
}


/* ─────────────────────────────────────────────
   15. FEATURED INITIATIVE PILLAR CARDS
   ───────────────────────────────────────────── */
.pillar {
  background: var(--wh);
  border: 1px solid var(--g2);
  border-bottom: 3px solid var(--pc, var(--un));
  padding: 22px;
}

.pillar h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--un-dk);
  margin-bottom: 9px;
}

.pillar p {
  font-size: 13px;
  color: var(--g5);
  line-height: 1.7;
  margin-bottom: 10px;
}

.pillar ul {
  padding-left: 15px;
  font-size: 13px;
  color: var(--g7);
  line-height: 1.9;
}


/* ─────────────────────────────────────────────
   16. CAMPAIGN CARDS
   ───────────────────────────────────────────── */
.camp {
  background: var(--wh);
  border: 1px solid var(--g2);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.camp:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.camp-top {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--g2);
}

.camp-ico { font-size: 32px; flex-shrink: 0; }

.camp-gl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.camp-ga {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.camp-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: white;
  margin-left: auto;
  flex-shrink: 0;
}

.camp-body    { padding: 14px 18px; }
.camp-title   { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--un-dk); margin-bottom: 7px; line-height: 1.3; }
.camp-desc    { font-size: 12px; color: var(--g5); line-height: 1.65; margin-bottom: 10px; }
.camp-lnk     { font-size: 11px; font-weight: 700; color: var(--un); letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px; }
.camp-lnk:hover { color: var(--un-dk); }


/* ─────────────────────────────────────────────
   17. MEDIA / FILM CARDS
   ───────────────────────────────────────────── */
.mc {
  background: var(--un-dk);
  overflow: hidden;
  transition: transform 0.2s;
}

.mc:hover {
  transform: translateY(-3px);
}

.mc-hdr {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
}

.mc-body  { padding: 14px; }
.mc-type  { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--un); margin-bottom: 5px; }
.mc h3    { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: white; line-height: 1.35; }
.mc p     { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 6px; line-height: 1.55; }


/* ─────────────────────────────────────────────
   18. REGION / WHERE WE WORK
   ───────────────────────────────────────────── */
.rtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rtab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--g1);
  border: 1px solid var(--g3);
  cursor: pointer;
  color: var(--g7);
  transition: all 0.2s;
  font-family: var(--font-sans);
}

.rtab.active,
.rtab:hover {
  background: var(--un);
  color: white;
  border-color: var(--un);
}

.rpanel {
  display: none;
  background: var(--wh);
  border: 1px solid var(--g2);
  padding: 24px;
}

.rpanel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.rpanel > h3 {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--un-dk);
  margin-bottom: 4px;
}

.rpanel p   { font-size: 13px; color: var(--g5); line-height: 1.7; }
.rlist      { padding-left: 15px; font-size: 13px; color: var(--g7); line-height: 2; }


/* ─────────────────────────────────────────────
   19. PARTNERS GRID
   ───────────────────────────────────────────── */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.pitem {
  background: var(--g1);
  border: 1px solid var(--g2);
  padding: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--g7);
  transition: all 0.2s;
  line-height: 1.4;
}

.pitem:hover {
  background: var(--un-lt);
  border-color: var(--un);
  color: var(--un-dk);
}

.pflag { font-size: 18px; margin-bottom: 5px; }


/* ─────────────────────────────────────────────
   20. EVENT CARDS
   ───────────────────────────────────────────── */
.ecard {
  background: var(--wh);
  border: 1px solid var(--g2);
  padding: 18px;
  display: flex;
  gap: 14px;
  transition: border-color 0.2s;
  margin-bottom: 10px;
}

.ecard:hover { border-color: var(--un); }

.ebox {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  background: var(--un-dk);
  color: white;
  padding: 7px 5px;
}

.eday  { font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1; }
.emon  { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

.einfo h4  { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--un-dk); margin-bottom: 4px; line-height: 1.3; }
.einfo p   { font-size: 12px; color: var(--g5); line-height: 1.55; }

.emeta {
  display: flex;
  gap: 12px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.emeta span { font-size: 11px; color: var(--g5); }


/* ─────────────────────────────────────────────
   21. PARTNERSHIP PROPOSAL SECTION
   ───────────────────────────────────────────── */
.proposal {
  background: linear-gradient(135deg, var(--un-dk), #1a4a6e);
  color: white;
  padding: 36px;
  border-left: 5px solid var(--gold);
}

.proposal h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.proposal p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  margin-bottom: 14px;
}

.pproj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.pp {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  border-top: 2px solid var(--gold);
}

.pp h4 { font-size: 13px; font-weight: 700; color: white; margin-bottom: 5px; }
.pp p  { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }


/* ─────────────────────────────────────────────
   22. CONTACT SECTION
   ───────────────────────────────────────────── */
.cgrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
}

.iblock {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--g2);
}

.iblock:last-child { border: none; }

.ilabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--un);
  margin-bottom: 3px;
}

.ival {
  font-size: 13px;
  color: var(--g7);
  line-height: 1.55;
}

/* Contact form box */
.form-box {
  background: var(--g1);
  padding: 24px;
  border: 1px solid var(--g2);
}

.ff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.ff label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--g7);
}

.ff input,
.ff textarea,
.ff select {
  background: white;
  border: 1px solid var(--g3);
  padding: 9px 13px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  -webkit-appearance: none;
}

.ff input:focus,
.ff textarea:focus,
.ff select:focus {
  border-color: var(--un);
}

.ff textarea { height: 95px; resize: vertical; }

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.fsub {
  background: var(--un);
  color: white;
  border: none;
  padding: 11px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

.fsub:hover { background: var(--un-dk); }


/* ─────────────────────────────────────────────
   23. DONATION SECTION
   ───────────────────────────────────────────── */
.donate-bar {
  background: var(--un);
  padding: 36px 4%;
  text-align: center;
  color: white;
}

.donate-bar h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 7px;
}

.donate-bar p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}

/* Preset amount buttons */
.d-opts {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.d-opt {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: white;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-serif);
}

.d-opt:hover,
.d-opt.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--un-dk);
}

/* Custom amount row */
.d-row {
  display: flex;
  max-width: 420px;
  margin: 0 auto 8px;
}

.d-inp {
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-right: none;
  color: white;
  font-size: 15px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  outline: none;
}

.d-inp::placeholder { color: rgba(255, 255, 255, 0.38); }

.d-btn {
  background: var(--un-dk);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.d-btn:hover { background: #000; }
.d-note      { font-size: 11px; color: rgba(255, 255, 255, 0.42); }


/* ─────────────────────────────────────────────
   24. FOOTER
   ───────────────────────────────────────────── */
footer {
  background: var(--un-dk);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.ftop {
  padding: 36px 4%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fbrand {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin-top: 11px;
}

.fcol h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--un);
  margin-bottom: 11px;
}

.fcol ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcol ul li a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  transition: color 0.2s;
}

.fcol ul li a:hover {
  color: white;
  text-decoration: none;
}

/* Footer bottom bar */
.fbot {
  padding: 16px 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}

.fbot a { color: rgba(255, 255, 255, 0.25); font-size: 11px; }
.fbot a:hover { color: white; text-decoration: none; }

/* Social icons */
.fsoc {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.soc {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: all 0.2s;
}

.soc:hover {
  background: var(--un);
  border-color: var(--un);
  color: white;
  text-decoration: none;
}


/* ─────────────────────────────────────────────
   25. INFORMATION / IDENTITY BOX
   ───────────────────────────────────────────── */
.ibox {
  background: var(--g1);
  border: 1px solid var(--g2);
  padding: 22px;
  margin-bottom: 16px;
}

.ibox h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--un-dk);
  margin-bottom: 8px;
}

.ibox p {
  font-size: 13px;
  color: var(--g5);
  line-height: 1.7;
}


/* ─────────────────────────────────────────────
   26. RESPONSIVE — Mobile & Tablet
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hide hero globe on mobile */
  .hero { grid-template-columns: 1fr; }
  .hero-globe { display: none; }

  /* Hide desktop navigation links */
  .nav-links { display: none; }

  /* Collapse all multi-column grids to single column */
  .g2,
  .g3,
  .g4,
  .board-grid,
  .cgrid,
  .ftop,
  .pproj-grid,
  .pgrid,
  .rpanel.active {
    grid-template-columns: 1fr;
  }

  /* Collapse contact form row */
  .frow { grid-template-columns: 1fr; }

  /* Smaller padding on mobile */
  .tab-panel { padding: 24px 4%; }

  /* Hide extra stats on small screens */
  .hero-statbar .hst:nth-child(n+5) { display: none; }
  .bb .bb-i:nth-child(n+4) { display: none; }
}

@media (max-width: 600px) {
  .tab-btn { padding: 10px 12px; font-size: 11px; }
  .proposal { padding: 24px 20px; }
  .hero { padding: 32px 4% 0; }
}