.elementor-10569 .elementor-element.elementor-element-943a4d6{--display:flex;--min-height:60vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:10em;--padding-bottom:10em;--padding-left:10em;--padding-right:10em;}.elementor-10569 .elementor-element.elementor-element-943a4d6:not(.elementor-motion-effects-element-type-background), .elementor-10569 .elementor-element.elementor-element-943a4d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://resilience.org.in/wp-content/uploads/2026/02/4.jpg.jpeg");background-position:center center;background-size:cover;}.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-10569 .elementor-element.elementor-element-c4197b3 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:43px;font-weight:600;line-height:41px;color:#FFFFFF;}.elementor-10569 .elementor-element.elementor-element-90f9840{--display:flex;--margin-top:2em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-10569 .elementor-element.elementor-element-0765fc9{margin:0em 30em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;padding:0em 0em 0em 0em;}.elementor-10569 .elementor-element.elementor-element-c7eed17{margin:1em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;}.elementor-10569 .elementor-element.elementor-element-c7eed17 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:36px;font-weight:600;line-height:41px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-65425f7 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:28px;font-weight:600;line-height:29px;color:#1C3D2E;}.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-10569 .elementor-element.elementor-element-590e31e{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-590e31e p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-19c44b8{margin:1em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;}.elementor-10569 .elementor-element.elementor-element-19c44b8 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:28px;font-weight:600;line-height:29px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-6126428{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-6126428 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-95fda18 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-0507303{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-0507303 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-b832449 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-d35b881{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-d35b881 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-842c0d0 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-c1c9b94{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-c1c9b94 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-a213bdc .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-1a24d50{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-1a24d50 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-dd17322 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-d7c33b6{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-d7c33b6 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-556365d .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-2d37e0d{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-2d37e0d p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-d2f8612 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-420e63d{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-420e63d p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-e4d96b2 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-48feb01{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-48feb01 p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-d362cf2 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-038eade{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-038eade p{margin-block-end:0px;}.elementor-10569 .elementor-element.elementor-element-91d6870 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:21px;font-weight:600;line-height:22px;color:#1C3D2E;}.elementor-10569 .elementor-element.elementor-element-9d93ac8{width:var( --container-widget-width, 100% );max-width:100%;padding:0em 0em 0em 0em;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-10569 .elementor-element.elementor-element-9d93ac8 p{margin-block-end:0px;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-0765fc9 *//* ╔══════════════════════════════════════════════════════════════╗
   ║  RESILIENCE ACTIONS — DONATION FORM CUSTOM CSS                 ║
   ║  Scope: .donation-form (set via Gravity Forms "CSS Class Name")║
   ║  Where to paste: Elementor page → Advanced → Custom CSS        ║
   ║  Target page: resilience.org.in/donate/                        ║
   ╚══════════════════════════════════════════════════════════════╝

   ────────────────────────────────────────────────────────────────
   IMPORTANT — VERIFY THE BRAND COLOR BEFORE GOING LIVE
   ────────────────────────────────────────────────────────────────
   I matched --re-green below directly from your screenshot
   pixels (the nav bar / "Donate" button color). It LOOKS like a
   deep forest green in the #1B4332–#1E5631 range, but a screenshot
   is photographed/compressed light, not a hex code, so it can be
   slightly off the true value used elsewhere on the site.

   TO CONFIRM THE EXACT VALUE:
     1. Open https://resilience.org.in/donate/ in Chrome/Edge
     2. Right-click the "Donate" button → Inspect
     3. In the Styles panel, find "background-color" and hover
        the color swatch — it'll show the exact hex
     4. Paste that exact hex into --re-green below

   This single token drives every green element in this file —
   fixing it in one place fixes the whole form.
   ────────────────────────────────────────────────────────────────

   QUICK CUSTOMIZATION CHEAT-SHEET
   ────────────────────────────────────────────────────────────────
   • Change brand green        → edit --re-green below
   • Change form width         → edit --form-max-width below
   • Change overall text size  → edit --form-font-size below
   • Change field spacing      → edit --field-gap below
   • Change radio pill columns → "DONATION AMOUNT" section,
                                  edit --pill-min-width
   • Mobile breakpoint         → edit max-width: 640px at the
                                  bottom to change when it kicks in
   ──────────────────────────────────────────────────────────────── */

/* ============================================
   1. DESIGN TOKENS  (COMPACT VERSION)
   ============================================ */
.donation-form {

  /* --- Color tokens, matched to the Resilience Actions brand --- */
  --re-green: #1B4332;          /* VERIFY THIS — see note above. Primary brand green (Donate button, accents, focus states) */
  --re-green-dark: #14342670;   /* darker shade for hover states — roughly 15-20% darker than --re-green */
  --re-green-darker: #102A20;   /* used for button hover specifically */
  --re-green-light: #E8F0EC;    /* very light green tint — used for hover backgrounds + focus glow, NOT a saturated color */
  --re-text: #1A1A1A;           /* main body/label text — matches the dark charcoal used in body copy on the page */
  --re-text-muted: #6B7280;     /* secondary text, sub-labels, placeholder-like text */
  --re-border: #D1D5DB;         /* neutral border/underline color, unselected/default state */
  --re-border-light: #E5E7EB;   /* even lighter border, used for the underline style on text inputs */

  /* --- Layout tokens — tightened for a more compact form --- */
  --form-max-width: 600px;      /* OPTION: widen/narrow the whole form by changing this one value */
  --re-radius: 6px;             /* corner roundness — kept modest since the rest of the page favors soft, not pill-sharp corners */
  --field-gap: 14px;            /* REDUCED from 22px → vertical space between fields */
  --row-gap: 10px;              /* REDUCED from 16px → horizontal gap between fields sharing a row */

  /* --- Typography tokens — slightly smaller for compactness --- */
  --form-font-size: 14px;       /* REDUCED from 15px → base font size */
  --form-heading-font: "Poppins", "Segoe UI", -apple-system, sans-serif;
  /* OPTION: if the site's actual heading font is NOT Poppins, inspect an
     <h2> like "Donation Form" in DevTools → Computed → font-family,
     and replace the value above with the real one. Poppins is a common
     choice for NGO/sustainability sites with this kind of heading style,
     used here as a reasonable placeholder until confirmed. */

  max-width: var(--form-max-width);
  width: 100%;
  margin: 0 auto;
  font-family: -apple-system, "Segoe UI", sans-serif;
  color: var(--re-text);
  font-size: var(--form-font-size);
}

/* ============================================
   2. HEADING — slightly smaller
   ============================================ */
.donation-form .gform_heading {
  margin-bottom: 18px;          /* REDUCED from 24px */
}
.donation-form .gform_title {
  font-family: var(--form-heading-font);
  font-size: 26px;              /* REDUCED from 28px */
  font-weight: 700;
  color: var(--re-green);
  letter-spacing: -0.01em;
}

/* ============================================
   3. FIELD LABELS — ALL MAIN LABELS NOW 21px (with !important for testing)
   ============================================ */
.donation-form .gfield_label,
.donation-form legend.gfield_label {
  font-size: 21px !important;   /* <<< INCREASED to 21px + !important to ensure it overrides cached files */
  font-weight: 600;
  color: var(--re-text);
  margin-bottom: 4px;           /* REDUCED from 6px */
  line-height: 1.3;
}

.donation-form .gfield_required {
  color: var(--re-green);
  font-size: 12px;
  margin-left: 3px;
}

/* Sub-labels for compound fields (Address sub-parts, Name parts) — kept at 11px */
.donation-form .ginput_complex label,
.donation-form .address_line_1 label,
.donation-form .address_city label,
.donation-form .address_state label,
.donation-form .address_zip label,
.donation-form .address_country label {
  font-size: 11px;              /* unchanged — these are sub‑labels, not the main labels */
  font-weight: 500;
  color: var(--re-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;           /* REDUCED from 4px */
}

/* ============================================
   4. VERTICAL RHYTHM — uses compact gap
   ============================================ */
.donation-form .gfield {
  margin-bottom: var(--field-gap) !important;
}

/* ============================================
   5. TEXT INPUTS — underline style, compact
   ============================================ */
.donation-form input[type="text"],
.donation-form input[type="email"],
.donation-form input[type="tel"],
.donation-form input[type="number"],
.donation-form input[type="date"],
.donation-form select {
  border: none !important;
  border-bottom: 1.5px solid var(--re-border-light) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 6px 2px !important;        /* REDUCED from 8px 2px */
  font-size: var(--form-font-size) !important;
  height: auto;
  width: 100% !important;
  box-sizing: border-box;
  transition: border-color .15s ease;
}

.donation-form input::placeholder {
  color: var(--re-text-muted);
  font-weight: 400;
}

.donation-form input:focus,
.donation-form select:focus {
  border-bottom-color: var(--re-green) !important;
  outline: none !important;
}

.donation-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  padding-right: 24px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231B4332' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}

/* ============================================
   6. PROPORTIONAL MULTI-COLUMN GRID
   ============================================ */
.donation-form .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--row-gap);
}

.donation-form .gfield--width-narrow { grid-column: span 3; }
.donation-form .gfield--width-wide   { grid-column: span 4; }
.donation-form .gfield--width-medium { grid-column: span 5; }
.donation-form .gfield--width-half   { grid-column: span 6; }
.donation-form .gfield--width-full   { grid-column: 1 / -1; }

/* ═══════ NEW RULE: Date, Phone, Email forced to equal width ═══════ */
/* They will each take 1/3 of the row (span 4) when placed together.
   If you prefer half‑width (span 6), change '4' to '6' in the rule below.
   If you want them always full‑width, remove this rule entirely. */
.donation-form .gfield--type-date,
.donation-form .gfield--type-phone,
.donation-form .gfield--type-email {
  grid-column: span 4;   /* one‑third width — adjust to your layout needs */
}

/* ============================================
   7. ADDRESS FIELD — full width
   ============================================ */
.donation-form .address_line_1,
.donation-form .gfield--type-address {
  grid-column: 1 / -1;
}

/* ============================================
   8. DONATION AMOUNT — green card-style pills (compact height)
   ============================================ */
.donation-form .gfield_radio,
.donation-form ul.gfield_radio,
.donation-form .ginput_container_radio {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--pill-min-width, 120px), 1fr));
  gap: 8px;                     /* REDUCED from 10px */
  list-style: none !important;
  margin: 8px 0 !important;     /* REDUCED from 12px 0 */
  padding: 0 !important;
  width: 100%;
}

.donation-form .gfield_radio li,
.donation-form .gchoice {
  margin: 0 !important;
  position: relative;
  min-width: 0;
}

.donation-form .gfield_radio li label,
.donation-form .gchoice label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;                 /* REDUCED from 42px → more compact */
  border: 1.5px solid var(--re-border);
  border-radius: var(--re-radius);
  font-size: 13px;              /* REDUCED from 14px */
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 12px;              /* REDUCED from 16px */
  color: var(--re-text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.donation-form .gfield_radio li input[type="radio"],
.donation-form .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.donation-form .gfield_radio li label:hover,
.donation-form .gchoice label:hover {
  border-color: var(--re-green);
  background-color: var(--re-green-light);
}

.donation-form .gfield_radio li input[type="radio"]:checked + label,
.donation-form .gchoice input[type="radio"]:checked + label {
  border-color: var(--re-green);
  background-color: var(--re-green);
  color: #fff;
}

.donation-form .gfield_radio li:last-child label,
.donation-form .gchoice:last-child label {
  padding: 0 14px !important;   /* REDUCED from 20px */
  min-width: 130px;             /* REDUCED from 160px */
}

/* ============================================
   8b. "ONE OFF / MONTHLY" TOGGLE — compact
   ============================================ */
.donation-form .gfield--type-radio:first-of-type .gfield_radio,
.donation-form .gfield--type-radio:first-of-type ul.gfield_radio {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* REDUCED from 100px */
  max-width: 240px;             /* REDUCED from 280px */
  margin: 4px 0 16px !important; /* REDUCED from 8px 0 20px */
}

/* ============================================
   9. TOTAL — compact spacing
   ============================================ */
.donation-form .gform_total_field,
.donation-form .gfield--type-total {
  border-top: none;
  padding-top: 4px;             /* REDUCED from 8px */
  margin-top: 2px;              /* REDUCED from 4px */
}
.donation-form .ginput_total {
  font-size: 20px;              /* REDUCED from 22px */
  font-weight: 700;
  color: var(--re-green);
}

/* ============================================
   10. SUBMIT BUTTON — compact padding
   ============================================ */
.donation-form .gform_footer {
  margin-top: 18px;             /* REDUCED from 24px */
}
.donation-form .gform_button {
  background-color: var(--re-green) !important;
  border: none !important;
  border-radius: 24px !important;
  color: #fff !important;
  font-size: 14px !important;   /* REDUCED from 15px */
  font-weight: 600 !important;
  padding: 10px 28px !important; /* REDUCED from 12px 32px */
  height: auto;
  width: auto;
  cursor: pointer;
  transition: background-color .15s ease;
}
.donation-form .gform_button:hover {
  background-color: var(--re-green-darker) !important;
}

/* ============================================
   11. VALIDATION / ERROR STATES
   ============================================ */
.donation-form .validation_message {
  color: #B91C1C;
  font-size: 12px;              /* REDUCED from 13px */
  margin-top: 4px;              /* REDUCED from 6px */
}
.donation-form .gfield_error input,
.donation-form .gfield_error select {
  border-bottom-color: #B91C1C !important;
}

/* ============================================
   12. MOBILE BREAKPOINT
   ============================================ */
@media (max-width: 640px) {
  .donation-form {
    max-width: 100%;
    padding: 0 4px;
  }
  .donation-form .gform_fields {
    grid-template-columns: 1fr;
  }
  .donation-form .gfield--width-narrow,
  .donation-form .gfield--width-wide,
  .donation-form .gfield--width-medium,
  .donation-form .gfield--width-half,
  .donation-form .gfield--width-full,
  .donation-form .gfield--type-date,
  .donation-form .gfield--type-phone,
  .donation-form .gfield--type-email {
    grid-column: 1 / -1;        /* on mobile all fields go full width */
  }
  .donation-form .gfield_radio,
  .donation-form .ginput_container_radio {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
  .donation-form .gform_button {
    width: 100%;
  }
}

/* ============================================
   13. REDUCED MOTION — respects user preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .donation-form *,
  .donation-form *::before,
  .donation-form *::after {
    transition-duration: 0.01ms !important;
  }
}/* End custom CSS */