{"id":236,"date":"2026-04-14T03:30:57","date_gmt":"2026-04-14T03:30:57","guid":{"rendered":"https:\/\/swrf.org.uk\/?page_id=236"},"modified":"2026-04-25T02:08:54","modified_gmt":"2026-04-25T02:08:54","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/swrf.org.uk\/ar\/contact-us\/","title":{"rendered":"\u0627\u062a\u0635\u0644 \u0628\u0646\u0627"},"content":{"rendered":"\n
\n\n\n\n\n\nContact Us \u2014 SWRF Humanitarian Foundation<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\"\/>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DESIGN TOKENS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.swrf-contact {\n --g-deep : #0f2f26;\n --g-mid : #1b4d3e;\n --g-soft : #2d6a56;\n --g-pale : #eaf3ef;\n --g-line : #ccdfd8;\n --gold : #c9a84c;\n --gold-lt : #faf4e6;\n --t1 : #0c1e18;\n --t2 : #3b5248;\n --t3 : #7a9389;\n --bg : #ffffff;\n --surf : #f7faf8;\n --err : #b83232;\n --radius : 10px;\n --sh : 0 2px 8px rgba(15,47,38,.05), 0 10px 36px rgba(15,47,38,.07);\n --ease : 200ms cubic-bezier(.4,0,.2,1);\n\n font-family: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;\n font-size : 15px;\n line-height: 1.6;\n color : var(--t1);\n background : var(--surf);\n -webkit-font-smoothing: antialiased;\n}\n\n.swrf-contact *, .swrf-contact *::before, .swrf-contact *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PAGE WRAPPER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-page {\n padding: 0 0 96px;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n 1. HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-hero {\n background: var(--g-deep);\n padding: 80px 24px 72px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\/* Subtle geometric texture *\/\n.sc-hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);\n background-size: 48px 48px;\n pointer-events: none;\n}\n\/* Gold accent line at bottom *\/\n.sc-hero::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);\n}\n\n.sc-hero-inner {\n position: relative;\n z-index: 1;\n max-width: 640px;\n margin: 0 auto;\n}\n.sc-hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 2.5px;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 18px;\n}\n.sc-hero-eyebrow::before,\n.sc-hero-eyebrow::after {\n content: '';\n width: 24px;\n height: 1px;\n background: var(--gold);\n opacity: .5;\n}\n.sc-hero-title {\n font-family: 'DM Serif Display', Georgia, serif;\n font-size: clamp(32px, 5vw, 52px);\n font-weight: 400;\n color: #ffffff;\n line-height: 1.1;\n letter-spacing: -.5px;\n margin-bottom: 18px;\n}\n.sc-hero-sub {\n font-size: 16px;\n color: rgba(255,255,255,.65);\n line-height: 1.75;\n max-width: 480px;\n margin: 0 auto;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION WRAPPER\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-section {\n max-width: 1040px;\n margin: 0 auto;\n padding: 0 24px;\n}\n\n.sc-section-hd {\n margin-bottom: 40px;\n}\n.sc-section-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 2.2px;\n text-transform: uppercase;\n color: var(--g-soft);\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n.sc-section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--g-line);\n max-width: 200px;\n}\n.sc-section-title {\n font-family: 'DM Serif Display', Georgia, serif;\n font-size: clamp(22px, 3vw, 30px);\n font-weight: 400;\n color: var(--g-deep);\n line-height: 1.2;\n}\n.sc-section-desc {\n font-size: 14px;\n color: var(--t2);\n margin-top: 8px;\n max-width: 520px;\n line-height: 1.75;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n 2. CONTACT INFORMATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-info-wrap {\n padding: 72px 24px 0;\n}\n\n.sc-info-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.sc-info-card {\n background: var(--bg);\n border: 1px solid var(--g-line);\n border-radius: var(--radius);\n padding: 28px 24px;\n display: flex;\n align-items: flex-start;\n gap: 16px;\n box-shadow: var(--sh);\n transition: border-color var(--ease), transform var(--ease);\n text-decoration: none;\n color: inherit;\n}\n.sc-info-card:hover {\n border-color: var(--g-soft);\n transform: translateY(-2px);\n}\n\n\/* Top accent bar *\/\n.sc-info-card {\n position: relative;\n overflow: hidden;\n}\n.sc-info-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--g-deep), var(--g-soft));\n opacity: 0;\n transition: opacity var(--ease);\n}\n.sc-info-card:hover::before { opacity: 1; }\n\n.sc-info-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: var(--g-pale);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--g-soft);\n transition: background var(--ease);\n}\n.sc-info-card:hover .sc-info-icon { background: #d5eae1; }\n.sc-info-icon svg { width: 18px; height: 18px; }\n\n.sc-info-body {}\n.sc-info-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--t3);\n margin-bottom: 5px;\n}\n.sc-info-value {\n font-size: 15px;\n font-weight: 500;\n color: var(--t1);\n line-height: 1.4;\n}\n.sc-info-value small {\n display: block;\n font-size: 12px;\n font-weight: 400;\n color: var(--t3);\n margin-top: 3px;\n}\n\n\/* WhatsApp CTA \u2014 full-width card *\/\n.sc-wa-card {\n background: var(--g-deep);\n border: 1px solid var(--g-mid);\n border-radius: var(--radius);\n padding: 28px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n box-shadow: var(--sh);\n flex-wrap: wrap;\n}\n.sc-wa-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n.sc-wa-icon {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: rgba(255,255,255,.08);\n border: 1px solid rgba(255,255,255,.1);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.sc-wa-icon svg { width: 22px; height: 22px; }\n.sc-wa-text-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: rgba(255,255,255,.45);\n margin-bottom: 4px;\n}\n.sc-wa-text-val {\n font-size: 16px;\n font-weight: 500;\n color: #ffffff;\n}\n.sc-wa-text-sub {\n font-size: 13px;\n color: rgba(255,255,255,.5);\n margin-top: 2px;\n}\n\n.sc-wa-btn {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n font-family: 'Instrument Sans', sans-serif;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: .4px;\n color: var(--g-deep);\n background: #ffffff;\n border: none;\n border-radius: 6px;\n padding: 12px 24px;\n cursor: pointer;\n text-decoration: none;\n white-space: nowrap;\n transition: background var(--ease), transform var(--ease);\n}\n.sc-wa-btn:hover {\n background: #e8f3ed;\n transform: translateY(-1px);\n}\n.sc-wa-btn svg { width: 16px; height: 16px; color: #25d366; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n 3. OFFICE LOCATIONS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-offices-wrap {\n padding: 72px 24px 0;\n}\n\n.sc-offices-grid {\n display: grid;\n grid-template-columns: 1.2fr repeat(4, 1fr);\n gap: 12px;\n align-items: start;\n}\n\n.sc-office-card {\n background: var(--bg);\n border: 1px solid var(--g-line);\n border-radius: var(--radius);\n padding: 24px 22px;\n box-shadow: var(--sh);\n transition: border-color var(--ease), transform var(--ease);\n}\n.sc-office-card:hover {\n border-color: var(--g-soft);\n transform: translateY(-2px);\n}\n\/* HQ card emphasis *\/\n.sc-office-card--hq {\n border-top: 3px solid var(--g-deep);\n padding-top: 22px;\n}\n\n.sc-office-tag {\n display: inline-block;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n padding: 3px 9px;\n border-radius: 3px;\n margin-bottom: 12px;\n}\n.sc-office-tag--hq {\n background: var(--g-deep);\n color: #fff;\n}\n.sc-office-tag--sub {\n background: var(--g-pale);\n color: var(--g-soft);\n}\n\n.sc-office-city {\n font-family: 'DM Serif Display', serif;\n font-size: 18px;\n font-weight: 400;\n color: var(--g-deep);\n line-height: 1.2;\n margin-bottom: 4px;\n}\n.sc-office-country {\n font-size: 12px;\n font-weight: 500;\n color: var(--t3);\n letter-spacing: .4px;\n text-transform: uppercase;\n}\n.sc-office-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-top: 14px;\n}\n.sc-office-card--hq .sc-office-dot { background: var(--g-deep); }\n.sc-office-card--sub .sc-office-dot { background: var(--gold); }\n\n\/* Reg status note *\/\n.sc-reg-note {\n margin-top: 20px;\n background: var(--bg);\n border: 1px solid var(--g-line);\n border-left: 3px solid var(--gold);\n border-radius: 0 var(--radius) var(--radius) 0;\n padding: 16px 20px;\n display: flex;\n align-items: flex-start;\n gap: 12px;\n box-shadow: var(--sh);\n}\n.sc-reg-note-icon {\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n color: var(--gold);\n margin-top: 1px;\n}\n.sc-reg-note-icon svg { width: 18px; height: 18px; }\n.sc-reg-note-text {\n font-size: 13px;\n color: var(--t2);\n line-height: 1.7;\n}\n.sc-reg-note-text strong { font-weight: 600; color: var(--t1); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n 4. CONTACT FORM\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.sc-form-wrap {\n padding: 72px 24px 0;\n}\n\n.sc-form-grid {\n display: grid;\n grid-template-columns: 1fr 440px;\n gap: 48px;\n align-items: start;\n}\n\n\/* Left: context panel *\/\n.sc-form-context {}\n.sc-form-context-body {\n font-size: 14px;\n color: var(--t2);\n line-height: 1.8;\n margin-bottom: 32px;\n}\n\n.sc-response-time {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 18px;\n background: var(--bg);\n border: 1px solid var(--g-line);\n border-radius: var(--radius);\n margin-bottom: 14px;\n}\n.sc-rt-icon {\n width: 34px;\n height: 34px;\n border-radius: 7px;\n background: var(--g-pale);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--g-soft);\n}\n.sc-rt-icon svg { width: 16px; height: 16px; }\n.sc-rt-label {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: .5px;\n color: var(--t3);\n text-transform: uppercase;\n}\n.sc-rt-val { font-size: 14px; font-weight: 500; color: var(--t1); }\n\n.sc-trust-line {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 12px;\n color: var(--t3);\n margin-top: 20px;\n}\n.sc-trust-line svg { width: 13px; height: 13px; color: var(--g-soft); flex-shrink: 0; }\n\n\/* Right: form card *\/\n.sc-form-card {\n background: var(--bg);\n border: 1px solid var(--g-line);\n border-radius: var(--radius);\n box-shadow: var(--sh);\n overflow: hidden;\n}\n.sc-form-card-top {\n height: 3px;\n background: linear-gradient(90deg, var(--g-deep) 0%, var(--gold) 60%, transparent 100%);\n}\n.sc-form-inner {\n padding: 36px 32px 32px;\n}\n\n\/* Floating label fields *\/\n.sc-field {\n position: relative;\n margin-bottom: 22px;\n}\n.sc-field:last-of-type { margin-bottom: 0; }\n\n.sc-field input,\n.sc-field select,\n.sc-field textarea {\n width: 100%;\n font-family: 'Instrument Sans', sans-serif;\n font-size: 14px;\n color: var(--t1);\n background: var(--surf);\n border: 1px solid var(--g-line);\n border-radius: 6px;\n padding: 20px 14px 8px;\n outline: none;\n transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);\n appearance: none;\n resize: none;\n}\n.sc-field textarea {\n min-height: 120px;\n line-height: 1.65;\n}\n.sc-field input:focus,\n.sc-field select:focus,\n.sc-field textarea:focus {\n border-color: var(--g-soft);\n background: var(--bg);\n box-shadow: 0 0 0 3px rgba(45,106,86,.1);\n}\n.sc-field input[aria-invalid=\"true\"],\n.sc-field textarea[aria-invalid=\"true\"] {\n border-color: var(--err);\n box-shadow: 0 0 0 3px rgba(184,50,50,.08);\n}\n\n\/* Floating label *\/\n.sc-field label {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 14px;\n color: var(--t3);\n pointer-events: none;\n transition: all var(--ease);\n background: transparent;\n white-space: nowrap;\n}\n.sc-field textarea ~ label {\n top: 20px;\n transform: none;\n}\n\/* Raised state: when focused OR has value *\/\n.sc-field input:focus ~ label,\n.sc-field input:not(:placeholder-shown) ~ label,\n.sc-field select:focus ~ label,\n.sc-field textarea:focus ~ label,\n.sc-field textarea:not(:placeholder-shown) ~ label {\n top: 8px;\n transform: none;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: .8px;\n text-transform: uppercase;\n color: var(--g-soft);\n}\n\n.sc-field select {\n padding-top: 16px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a9389' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 38px;\n}\n\n.sc-field-err {\n font-size: 11px;\n color: var(--err);\n margin-top: 5px;\n display: none;\n align-items: center;\n gap: 4px;\n}\n.sc-field-err.show { display: flex; }\n.sc-field-err svg { width: 11px; height: 11px; flex-shrink: 0; }\n\n\/* Submit button *\/\n.sc-form-submit {\n margin-top: 24px;\n}\n.sc-btn-submit {\n width: 100%;\n font-family: 'Instrument Sans', sans-serif;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: .4px;\n color: #ffffff;\n background: var(--g-deep);\n border: none;\n border-radius: 6px;\n padding: 15px 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: background var(--ease);\n}\n.sc-btn-submit:hover { background: var(--g-mid); }\n.sc-btn-submit:disabled { opacity: .6; cursor: not-allowed; }\n.sc-btn-submit.loading .sc-btn-spin { display: block; }\n.sc-btn-submit.loading .sc-btn-text { opacity: .75; }\n\n.sc-btn-spin {\n width: 16px; height: 16px;\n border: 2px solid rgba(255,255,255,.3);\n border-top-color: #fff;\n border-radius: 50%;\n animation: scSpin .6s linear infinite;\n display: none;\n flex-shrink: 0;\n}\n@keyframes scSpin { to { transform: rotate(360deg); } }\n\n.sc-btn-submit svg { width: 15px; height: 15px; }\n\n\/* Success panel *\/\n.sc-success {\n display: none;\n text-align: center;\n padding: 48px 24px;\n}\n.sc-success.show { display: block; }\n.sc-success-icon {\n width: 52px; height: 52px;\n background: var(--g-pale);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--g-soft);\n}\n.sc-success-icon svg { width: 24px; height: 24px; }\n.sc-success-title {\n font-family: 'DM Serif Display', serif;\n font-size: 20px;\n font-weight: 400;\n color: var(--g-deep);\n margin-bottom: 10px;\n}\n.sc-success-body {\n font-size: 14px;\n color: var(--t2);\n line-height: 1.75;\n max-width: 300px;\n margin: 0 auto 20px;\n}\n.sc-btn-again {\n font-family: 'Instrument Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: var(--g-soft);\n background: var(--g-pale);\n border: 1px solid var(--g-line);\n border-radius: 6px;\n padding: 9px 20px;\n cursor: pointer;\n transition: background var(--ease);\n}\n.sc-btn-again:hover { background: #d5eae1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 900px) {\n .sc-offices-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n .sc-office-card--hq {\n grid-column: 1 \/ -1;\n }\n .sc-form-grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n}\n@media (max-width: 680px) {\n .sc-info-grid { grid-template-columns: 1fr; }\n .sc-hero { padding: 60px 20px 56px; }\n .sc-form-inner { padding: 28px 20px 24px; }\n}\n@media (max-width: 480px) {\n .sc-offices-grid { grid-template-columns: 1fr; }\n .sc-office-card--hq { grid-column: auto; }\n .sc-wa-card { flex-direction: column; align-items: flex-start; }\n .sc-wa-btn { width: 100%; justify-content: center; }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HTML\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"swrf-contact\" id=\"swrf-contact-page\">\n<div class=\"sc-page\">\n\n <!-- \u2500\u2500 1. HERO \u2500\u2500 -->\n <section class=\"sc-hero\" aria-labelledby=\"sc-hero-title\">\n <div class=\"sc-hero-inner\">\n <p class=\"sc-hero-eyebrow\">SWRF Humanitarian Foundation<\/p>\n <h1 class=\"sc-hero-title\" id=\"sc-hero-title\">Contact Us<\/h1>\n <p class=\"sc-hero-sub\">We are here to assist you. Reach out for inquiries, partnerships, media, or donor support.<\/p>\n <\/div>\n <\/section>\n\n <!-- \u2500\u2500 2. CONTACT INFORMATION \u2500\u2500 -->\n <div class=\"sc-info-wrap\">\n <div class=\"sc-section\">\n <div class=\"sc-section-hd\">\n <p class=\"sc-section-label\">Get in touch<\/p>\n <h2 class=\"sc-section-title\">Contact Information<\/h2>\n <p class=\"sc-section-desc\">Our team is available to respond to all inquiries during business hours, Monday through Friday.<\/p>\n <\/div>\n\n <!-- 3-column info cards -->\n <div class=\"sc-info-grid\" role=\"list\">\n\n <!-- Phone -->\n <a class=\"sc-info-card\" href=\"tel:+966590665340\" role=\"listitem\" aria-label=\"Call our phone number\">\n <div class=\"sc-info-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012 .84h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/><\/svg>\n <\/div>\n <div class=\"sc-info-body\">\n <p class=\"sc-info-label\">Mobile<\/p>\n <p class=\"sc-info-value\">+966 59 066 5340<small>WhatsApp & calls<\/small><\/p>\n <\/div>\n <\/a>\n\n <!-- Email -->\n <a class=\"sc-info-card\" href=\"mailto:info@swrf.org.uk\" role=\"listitem\" aria-label=\"Send us an email\">\n <div class=\"sc-info-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n <\/div>\n <div class=\"sc-info-body\">\n <p class=\"sc-info-label\">Email<\/p>\n <p class=\"sc-info-value\">info@swrf.org.uk<small>General inquiries<\/small><\/p>\n <\/div>\n <\/a>\n\n <!-- Website -->\n <a class=\"sc-info-card\" href=\"https:\/\/swrf.org.uk\" target=\"_blank\" rel=\"noopener noreferrer\" role=\"listitem\" aria-label=\"Visit our website\">\n <div class=\"sc-info-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20\"\/><\/svg>\n <\/div>\n <div class=\"sc-info-body\">\n <p class=\"sc-info-label\">Website<\/p>\n <p class=\"sc-info-value\">swrf.org.uk<small>Official website<\/small><\/p>\n <\/div>\n <\/a>\n\n <\/div>\n\n <!-- WhatsApp CTA bar -->\n <div class=\"sc-wa-card\" role=\"region\" aria-label=\"WhatsApp contact\">\n <div class=\"sc-wa-left\">\n <div class=\"sc-wa-icon\" aria-hidden=\"true\">\n <!-- WhatsApp logo -->\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"#25d366\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\n <\/div>\n <div>\n <p class=\"sc-wa-text-label\">Direct Messaging<\/p>\n <p class=\"sc-wa-text-val\">WhatsApp Support<\/p>\n <p class=\"sc-wa-text-sub\">Quick responses \u00b7 Available in Arabic & English<\/p>\n <\/div>\n <\/div>\n <a class=\"sc-wa-btn\"\n href=\"https:\/\/wa.me\/message\/YE477DVIYV7GK1\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label=\"Open WhatsApp chat\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\n Chat on WhatsApp\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 3. OFFICE LOCATIONS \u2500\u2500 -->\n <div class=\"sc-offices-wrap\">\n <div class=\"sc-section\">\n <div class=\"sc-section-hd\">\n <p class=\"sc-section-label\">Global presence<\/p>\n <h2 class=\"sc-section-title\">Office Locations<\/h2>\n <p class=\"sc-section-desc\">SWRF operates across multiple countries to deliver humanitarian programs at scale.<\/p>\n <\/div>\n\n <div class=\"sc-offices-grid\">\n\n <!-- HQ -->\n <div class=\"sc-office-card sc-office-card--hq\">\n <span class=\"sc-office-tag sc-office-tag--hq\">Headquarters<\/span>\n <p class=\"sc-office-city\">Karachi<\/p>\n <p class=\"sc-office-country\">Pakistan<\/p>\n <div class=\"sc-office-dot\"><\/div>\n <\/div>\n\n <!-- Sub offices -->\n <div class=\"sc-office-card sc-office-card--sub\">\n <span class=\"sc-office-tag sc-office-tag--sub\">Sub Office<\/span>\n <p class=\"sc-office-city\">Peshawar<\/p>\n <p class=\"sc-office-country\">Pakistan<\/p>\n <div class=\"sc-office-dot\"><\/div>\n <\/div>\n\n <div class=\"sc-office-card sc-office-card--sub\">\n <span class=\"sc-office-tag sc-office-tag--sub\">Sub Office<\/span>\n <p class=\"sc-office-city\">Madinah<\/p>\n <p class=\"sc-office-country\">Saudi Arabia<\/p>\n <div class=\"sc-office-dot\"><\/div>\n <\/div>\n\n <div class=\"sc-office-card sc-office-card--sub\">\n <span class=\"sc-office-tag sc-office-tag--sub\">Sub Office<\/span>\n <p class=\"sc-office-city\">New York<\/p>\n <p class=\"sc-office-country\">United States<\/p>\n <div class=\"sc-office-dot\"><\/div>\n <\/div>\n\n <div class=\"sc-office-card sc-office-card--sub\">\n <span class=\"sc-office-tag sc-office-tag--sub\">Sub Office<\/span>\n <p class=\"sc-office-city\">England<\/p>\n <p class=\"sc-office-country\">United Kingdom<\/p>\n <div class=\"sc-office-dot\"><\/div>\n <\/div>\n\n <\/div>\n\n <!-- Registration note -->\n <div class=\"sc-reg-note\" role=\"note\">\n <div class=\"sc-reg-note-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n <\/div>\n <p class=\"sc-reg-note-text\">\n <strong>Registration Status:<\/strong> The organization is currently formally registered in Pakistan and is in the process of official registration in the United States, Saudi Arabia, and the United Kingdom.\n <\/p>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 4. CONTACT FORM \u2500\u2500 -->\n <div class=\"sc-form-wrap\">\n <div class=\"sc-section\">\n\n <div class=\"sc-form-grid\">\n\n <!-- Left: context -->\n <div class=\"sc-form-context\">\n <div class=\"sc-section-hd\">\n <p class=\"sc-section-label\">Send a message<\/p>\n <h2 class=\"sc-section-title\">We’d Like to Hear From You<\/h2>\n <\/div>\n <p class=\"sc-form-context-body\">\n Whether you have a question about our programs, wish to explore a partnership, or would like more information about how to support our work \u2014 our team reviews every message and responds promptly.\n <\/p>\n\n <div class=\"sc-response-time\">\n <div class=\"sc-rt-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n <\/div>\n <div>\n <p class=\"sc-rt-label\">Response time<\/p>\n <p class=\"sc-rt-val\">Within 1\u20132 business days<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sc-response-time\">\n <div class=\"sc-rt-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/><\/svg>\n <\/div>\n <div>\n <p class=\"sc-rt-label\">Languages<\/p>\n <p class=\"sc-rt-val\">English & Arabic supported<\/p>\n <\/div>\n <\/div>\n\n <p class=\"sc-trust-line\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0110 0v4\"\/><\/svg>\n Your information is handled securely and confidentially.\n <\/p>\n <\/div>\n\n <!-- Right: form card -->\n <div class=\"sc-form-card\">\n <div class=\"sc-form-card-top\" aria-hidden=\"true\"><\/div>\n\n <!-- Form block -->\n <div class=\"sc-form-inner\" id=\"scFormBlock\">\n <form id=\"scContactForm\" novalidate aria-label=\"Contact form\">\n\n<input type=\"hidden\" name=\"_subject\" value=\"New SWRF Contact Message\">\n<input type=\"hidden\" name=\"_captcha\" value=\"false\">\n<input type=\"hidden\" name=\"_template\" value=\"table\">\n\n <!-- Name -->\n <div class=\"sc-field\">\n <input type=\"text\" id=\"scName\" name=\"sc_name\"\n placeholder=\" \" autocomplete=\"name\"\n required aria-required=\"true\"\/>\n <label for=\"scName\">Full Name<\/label>\n <div class=\"sc-field-err\" id=\"scErrName\" role=\"alert\" aria-live=\"assertive\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Full name is required.\n <\/div>\n <\/div>\n\n <!-- Email -->\n <div class=\"sc-field\">\n <input type=\"email\" id=\"scEmail\" name=\"sc_email\"\n placeholder=\" \" autocomplete=\"email\"\n required aria-required=\"true\"\/>\n <label for=\"scEmail\">Email Address<\/label>\n <div class=\"sc-field-err\" id=\"scErrEmail\" role=\"alert\" aria-live=\"assertive\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n A valid email address is required.\n <\/div>\n <\/div>\n\n <!-- Subject -->\n <div class=\"sc-field\">\n <input type=\"text\" id=\"scSubject\" name=\"sc_subject\"\n placeholder=\" \"\n required aria-required=\"true\"\/>\n <label for=\"scSubject\">Subject<\/label>\n <div class=\"sc-field-err\" id=\"scErrSubject\" role=\"alert\" aria-live=\"assertive\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Subject is required.\n <\/div>\n <\/div>\n\n <!-- Message -->\n <div class=\"sc-field\">\n <textarea id=\"scMessage\" name=\"sc_message\"\n placeholder=\" \" rows=\"5\"\n required aria-required=\"true\"><\/textarea>\n <label for=\"scMessage\">Message<\/label>\n <div class=\"sc-field-err\" id=\"scErrMessage\" role=\"alert\" aria-live=\"assertive\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Please enter your message.\n <\/div>\n <\/div>\n\n <div class=\"sc-form-submit\">\n <button type=\"submit\" class=\"sc-btn-submit\" id=\"scSubmitBtn\">\n <div class=\"sc-btn-spin\" aria-hidden=\"true\"><\/div>\n <span class=\"sc-btn-text\">Send Message<\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n <\/button>\n <\/div>\n\n <\/form>\n <\/div><!-- \/sc-form-inner -->\n\n <!-- Success panel (hidden by default) -->\n <div class=\"sc-success\" id=\"scSuccess\" role=\"status\" aria-live=\"polite\">\n <div class=\"sc-success-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n <\/div>\n <p class=\"sc-success-title\">Message Sent<\/p>\n <p class=\"sc-success-body\">\n Thank you for reaching out. Our team will review your message and respond within 1\u20132 business days.\n <\/p>\n <button type=\"button\" class=\"sc-btn-again\" id=\"scBtnAgain\">Send Another Message<\/button>\n <\/div>\n\n <\/div><!-- \/sc-form-card -->\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div><!-- \/swrf-contact -->\n\n<script>\n(function () {\n 'use strict';\n\n \/* \u2500\u2500 Validators \u2500\u2500 *\/\n function isEmail(v) {\n return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(v.trim());\n }\n\n \/* \u2500\u2500 Error helpers \u2500\u2500 *\/\n function setErr(errId, fieldEl, show) {\n var err = document.getElementById(errId);\n if (err) err.classList.toggle('show', show);\n if (fieldEl) fieldEl.setAttribute('aria-invalid', show ? 'true' : 'false');\n }\n\n function clearAllErrors() {\n document.querySelectorAll('#swrf-contact-page .sc-field-err.show')\n .forEach(function(e) { e.classList.remove('show'); });\n document.querySelectorAll('#swrf-contact-page [aria-invalid=\"true\"]')\n .forEach(function(el) { el.setAttribute('aria-invalid', 'false'); });\n }\n\n \/* \u2500\u2500 Form validation \u2500\u2500 *\/\n function validateForm() {\n clearAllErrors();\n var ok = true;\n\n var name = document.getElementById('scName');\n var email = document.getElementById('scEmail');\n var subject = document.getElementById('scSubject');\n var message = document.getElementById('scMessage');\n\n if (!name.value.trim()) {\n setErr('scErrName', name, true); ok = false;\n }\n if (!isEmail(email.value)) {\n setErr('scErrEmail', email, true); ok = false;\n }\n if (!subject.value.trim()) {\n setErr('scErrSubject', subject, true); ok = false;\n }\n if (!message.value.trim()) {\n setErr('scErrMessage', message, true); ok = false;\n }\n if (!ok) {\n var first = document.querySelector('#swrf-contact-page [aria-invalid=\"true\"]');\n if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n return ok;\n }\n\n \/* \u2500\u2500 Blur validation \u2500\u2500 *\/\n [\n ['scName', 'scErrName', function(v){ return v.trim().length >= 2; }],\n ['scEmail', 'scErrEmail', function(v){ return isEmail(v); }],\n ['scSubject', 'scErrSubject', function(v){ return v.trim().length >= 2; }],\n ['scMessage', 'scErrMessage', function(v){ return v.trim().length >= 5; }],\n ].forEach(function(row) {\n var id = row[0], errId = row[1], fn = row[2];\n var el = document.getElementById(id);\n if (!el) return;\n el.addEventListener('blur', function() {\n setErr(errId, this, !fn(this.value));\n });\n });\n\n \/* \u2500\u2500 Submit \u2500\u2500 *\/\n var form = document.getElementById('scContactForm');\n var btn = document.getElementById('scSubmitBtn');\n var success = document.getElementById('scSuccess');\n var formInner = document.getElementById('scFormBlock');\n\n if (form) {\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n if (!validateForm()) return;\n\n \/* Loading state *\/\n btn.classList.add('loading');\n btn.disabled = true;\n\n \/*\n * \u2500\u2500 Backend hook \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Replace the setTimeout below with a real fetch() call:\n *\n * fetch('\/wp-json\/contact\/v1\/submit', {\n * method : 'POST',\n * headers: { 'Content-Type': 'application\/json' },\n * body : JSON.stringify({\n * name : document.getElementById('scName').value.trim(),\n * email : document.getElementById('scEmail').value.trim(),\n * subject: document.getElementById('scSubject').value.trim(),\n * message: document.getElementById('scMessage').value.trim(),\n * })\n * })\n * .then(function(r) { if (!r.ok) throw new Error('Network error'); return r.json(); })\n * .then(function() { showSuccess(); })\n * .catch(function(err) { console.error(err); btn.classList.remove('loading'); btn.disabled = false; });\n *\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\/\nfetch(\"https:\/\/formsubmit.co\/ajax\/info@swrf.org.uk\", {\n method: \"POST\",\n headers: {\n 'Accept': 'application\/json'\n },\n body: new FormData(form)\n})\n.then(function(response){\n if(response.ok){\n return response.json();\n } else {\n throw new Error(\"FormSubmit error\");\n }\n})\n.then(function(){\n btn.classList.remove('loading');\n btn.disabled = false;\n\n showSuccess();\n form.reset();\n})\n.catch(function(error){\n console.error(error);\n\n btn.classList.remove('loading');\n btn.disabled = false;\n\n alert(\"\u274c Message failed. Please try again.\");\n});\n });\n }\n\n function showSuccess() {\n if (formInner) formInner.style.display = 'none';\n if (success) {\n success.classList.add('show');\n success.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n\n \/* \u2500\u2500 Reset \u2500\u2500 *\/\n var btnAgain = document.getElementById('scBtnAgain');\n if (btnAgain) {\n btnAgain.addEventListener('click', function() {\n if (form) form.reset();\n clearAllErrors();\n if (success) success.classList.remove('show');\n if (formInner) formInner.style.display = '';\n });\n }\n\n})();\n<\/script>\n<\/html>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-236","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/pages\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":24,"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/pages\/236\/revisions"}],"predecessor-version":[{"id":876,"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/pages\/236\/revisions\/876"}],"wp:attachment":[{"href":"https:\/\/swrf.org.uk\/ar\/wp-json\/wp\/v2\/media?parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}