.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-progress .elementor-title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar{background-color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================================
   [NGO NAME] — CAMPAIGNS PAGE ELEMENTOR STYLESHEET
   Paste this into: Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS).
   Pairs with campaigns-elementor-template.json.

   NOTE: Shares design tokens and several component classes (page-hero,
   card, buttons, cta-final, container, tabs) with the Home, Footer,
   About, Programs and Our Impact stylesheets already built for this
   site — identical rules where they overlap, so all files can be pasted
   into the same Custom CSS box with zero conflicts.

   IMPORTANT — FILTER TABS: same pattern as the Programs page. The filter
   buttons are an Elementor HTML widget with an inline <script> that
   queries for .campaign-card elements FRESH on every click (not cached
   at load time), because the script sits above the campaign grid in the
   document. If you copy this script elsewhere, keep that query inside
   the click handler — moving it back outside will silently break
   filtering again, exactly like the bug fixed on the Programs page.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --green-900:#0B3B2E;
  --green-800:#0E4A38;
  --green-700:#146247;
  --green-600:#1B7A56;

  --orange-600:#D06B24;
  --orange-500:#E8792B;
  --orange-400:#F0954F;

  --ink:#20242A;
  --ink-soft:#565E66;
  --ink-faint:#8A9198;
  --line:#E7E5DE;
  --line-soft:#F0EEE7;

  --radius-md:14px;
  --radius-pill:999px;

  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
}

body{overflow-x:hidden;}

/* =========================================================================
   1. GLOBAL TYPE
   ========================================================================= */
.elementor-heading-title{
  font-family:var(--font-display)!important;
  font-weight:700!important;
  color:var(--ink);
  line-height:1.15!important;
  letter-spacing:-.01em;
}
h1.elementor-heading-title{font-size:clamp(30px,4.4vw,46px)!important;}
h2.elementor-heading-title{font-size:clamp(28px,3.6vw,40px)!important;}
h3.elementor-heading-title{font-size:19px!important;}
.elementor-widget-text-editor{font-family:var(--font-body);color:var(--ink-soft);font-size:16px;line-height:1.6;}
.elementor-widget-text-editor p{margin:0 0 1em;}
.elementor-widget-text-editor p:last-child{margin-bottom:0;}

.cta-final .elementor-heading-title{color:#fff!important;}
.cta-final .elementor-widget-text-editor{color:rgba(255,255,255,.8);}

.elementor-section{padding-top:96px;padding-bottom:96px;}
.elementor-section.elementor-inner-section{padding-top:0;padding-bottom:0;}
@media (max-width:900px){.elementor-section{padding-top:56px;padding-bottom:56px;}}

/* =========================================================================
   2. LAYOUT / UTILITIES
   ========================================================================= */
.container{max-width:1200px;margin:0 auto!important;padding:0 24px;float:none;}
.container-narrow{max-width:820px;margin:0 auto!important;padding:0 24px;float:none;}
.section-tight{padding-top:40px!important;padding-bottom:8px!important;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green-600);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange-500);display:inline-block;}
.page-hero .eyebrow{color:var(--orange-400);}

.section-head-center{text-align:center;}
.section-head-center .elementor-heading-title{justify-content:center;display:flex;}

/* =========================================================================
   3. PAGE HERO
   ========================================================================= */
.page-hero{
  background:linear-gradient(135deg,var(--green-900),var(--green-700))!important;
  padding-top:70px!important;padding-bottom:60px!important;
}
.page-hero .breadcrumb{font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,.65);margin-bottom:18px;}
.page-hero .breadcrumb a{color:rgba(255,255,255,.65);}
.page-hero .breadcrumb a:hover{color:#fff;}
.page-hero .elementor-heading-title{color:#fff!important;}
.page-hero-lead{color:rgba(234,243,238,.82)!important;font-size:17px!important;max-width:620px;margin-top:14px!important;}

/* =========================================================================
   4. FILTER TABS
   ========================================================================= */
.tabs-wrap{text-align:center;}
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.tab-btn{
  border:1.5px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  padding:10px 20px;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--ink-soft);cursor:pointer;transition:.15s ease;
}
.tab-btn.active,.tab-btn:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;}

/* =========================================================================
   5. CAMPAIGN CARDS
   ========================================================================= */
/* cat-education / cat-health / cat-relief / cat-livelihood carry no visual
   styling of their own — they're markers read by the filter script above
   to show/hide each card. Left empty here intentionally. */
.cat-education,.cat-health,.cat-relief,.cat-livelihood{}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;height:100%;}
.card > .elementor-widget-wrap{padding:0 22px 24px;}
.card-photo{margin-bottom:0;}
.card-photo .elementor-widget-container img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;}
.campaign-card{border-top:3px solid var(--orange-500);transition:box-shadow .2s ease,transform .2s ease;}
.campaign-card:hover{box-shadow:0 12px 30px -10px rgba(11,59,46,.18);transform:translateY(-3px);}

.campaign-meta-row{
  display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);margin-top:18px;
}
.card .elementor-heading-title{margin-top:6px;}

.cs-progress .elementor-title{font-family:var(--font-display)!important;font-size:13px!important;font-weight:600!important;color:var(--ink-soft)!important;margin-bottom:8px!important;}
.cs-progress .elementor-progress-wrapper{height:9px!important;background:var(--line-soft)!important;border-radius:var(--radius-pill)!important;overflow:hidden;}
.cs-progress .elementor-progress-bar{background:linear-gradient(90deg,var(--orange-500),var(--orange-400))!important;border-radius:var(--radius-pill)!important;}
.cs-progress .elementor-progress-text{display:none!important;}

.card-btn-row{margin-top:16px;}
.card-btn-row .elementor-container{gap:10px;}

/* =========================================================================
   6. BUTTONS
   ========================================================================= */
.btn .elementor-button{
  font-family:var(--font-display)!important;font-weight:700!important;
  border-radius:var(--radius-pill)!important;padding:15px 28px!important;
  border:1.5px solid transparent!important;
  transition:transform .15s ease,background .15s ease,color .15s ease!important;
}
.btn .elementor-button:hover{transform:translateY(-2px);}
.btn-lg .elementor-button{padding:18px 36px!important;font-size:16px!important;}
.btn-block .elementor-button{width:100%!important;text-align:center;justify-content:center;}

.btn-primary .elementor-button{background:var(--orange-500)!important;color:#fff!important;box-shadow:0 10px 24px -8px rgba(232,121,43,.55);}
.btn-primary .elementor-button:hover{background:var(--orange-600)!important;}

.btn-outline .elementor-button{background:transparent!important;border-color:var(--ink)!important;color:var(--ink)!important;font-size:13px!important;padding:15px 20px!important;}
.btn-outline .elementor-button:hover{background:var(--ink)!important;color:#fff!important;}

.btn-outline-green .elementor-button{background:transparent!important;border-color:var(--green-600)!important;color:var(--green-700)!important;}
.btn-outline-green .elementor-button:hover{background:var(--green-600)!important;color:#fff!important;}

/* =========================================================================
   7. FINAL CTA
   ========================================================================= */
.cta-final{background:var(--green-900)!important;text-align:center;}
.cta-final .elementor-widget-text-editor{max-width:560px;margin:0 auto;}/* End custom CSS */