.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-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{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-26 .elementor-element.elementor-element-6ee4cd59 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-26 .elementor-element.elementor-element-4e87d289 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-26 .elementor-element.elementor-element-50e0b8af .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-26 .elementor-element.elementor-element-493b889f .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-26 .elementor-element.elementor-element-25bd3562{--grid-template-columns:repeat(0, auto);text-align:center;--grid-column-gap:5px;--grid-row-gap:0px;}.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 );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-26 .elementor-element.elementor-element-187a6c22{width:49.884%;}.elementor-26 .elementor-element.elementor-element-6729bd5e{width:48.417%;}}/* Start custom CSS *//* =========================================================================
   [NGO NAME] — CONTACT PAGE ELEMENTOR STYLESHEET
   Paste this into: Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS).
   Pairs with contact-elementor-template.json.

   NOTE: Shares design tokens and several component classes (page-hero,
   icon-box, buttons, container, bg-neutral) with the Home, Footer,
   About, Programs, Our Impact, Campaigns, Events and Blog 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 — CONTACT FORM: this is an Elementor HTML widget (Elementor
   Free has no native Form widget). It prevents real submission and shows
   an inline "Demo form" note instead. Unlike the filter scripts on the
   Programs/Campaigns/Blog pages, this script has no early-query risk —
   the form and its <script> live inside the same widget, so the button
   and inputs already exist by the time the script runs. When you're
   ready for a live site, swap this widget for a real form plugin
   (WPForms, Elementor Pro Forms, etc.) connected to your email/CRM.
   ========================================================================= */

@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;
  --green-100:#E4F1EA;

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

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

  --bg-neutral:#F7F6F2;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px rgba(11,59,46,.06);

  --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(26px,3.2vw,34px)!important;}
h3.elementor-heading-title{font-size:20px!important;margin-bottom:20px!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;}

.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;}
.bg-neutral{background:var(--bg-neutral)!important;}
.section-tight{padding-top:0!important;padding-bottom:0!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);}

/* =========================================================================
   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. CONTACT INFO ROWS (icon-box widget, position: left)
   ========================================================================= */
.contact-row{margin-bottom:20px;}
.contact-row .elementor-icon-box-wrapper{align-items:flex-start;gap:14px;}
.contact-row .elementor-icon-box-icon{flex-shrink:0;}
.contact-row .elementor-icon-box-icon .elementor-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-100)!important;color:var(--green-700)!important;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.contact-row .elementor-icon-box-title{
  font-family:var(--font-display)!important;font-weight:700!important;font-size:14px!important;
  color:var(--ink)!important;margin-bottom:2px!important;
}
.contact-row .elementor-icon-box-description{font-size:14.5px!important;color:var(--ink-soft);}

.contact-social{margin-top:8px;}
.contact-social .elementor-social-icon{
  width:36px;height:36px;background:transparent!important;
  border:1px solid var(--line)!important;color:var(--ink)!important;
  font-size:13px!important;transition:.15s ease;
}
.contact-social .elementor-social-icon:hover{
  background:var(--green-700)!important;border-color:var(--green-700)!important;color:#fff!important;
}
.contact-social .elementor-grid{gap:10px!important;}

/* =========================================================================
   5. CONTACT FORM
   ========================================================================= */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;box-shadow:var(--shadow-sm);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cs-form{margin:0;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);}
.form-field input,.form-field textarea{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px;
  background:#fff;color:var(--ink);font-family:var(--font-body);font-size:14.5px;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--green-600);}
.cs-form-submit{margin-top:20px;}
.form-demo-note{
  display:none;margin-top:16px;padding:14px 16px;background:var(--green-050,#F1F8F4);
  border:1px dashed var(--green-600);border-radius:var(--radius-sm);color:var(--green-700);font-size:13.5px;
}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* =========================================================================
   6. MAP
   ========================================================================= */
.map-image .elementor-widget-container img{
  width:100%;aspect-ratio:21/7;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);
}

/* =========================================================================
   7. 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-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;}

/* Raw HTML <button> inside the contact form (not an Elementor Button
   widget) — styled directly since it isn't wrapped in .elementor-button */
button.btn.cs-form-submit{
  font-family:var(--font-display);font-weight:700;border-radius:var(--radius-pill);
  padding:18px 36px;font-size:16px;border:1.5px solid transparent;cursor:pointer;
  background:var(--orange-500);color:#fff;box-shadow:0 10px 24px -8px rgba(232,121,43,.55);
  transition:transform .15s ease,background .15s ease;
}
button.btn.cs-form-submit:hover{background:var(--orange-600);transform:translateY(-2px);}

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .form-card{margin-top:24px;}
}/* End custom CSS */