{"id":11,"date":"2026-05-08T08:13:14","date_gmt":"2026-05-08T08:13:14","guid":{"rendered":"https:\/\/sefafoundations.com\/?page_id=11"},"modified":"2026-05-08T08:13:14","modified_gmt":"2026-05-08T08:13:14","slug":"11-2","status":"publish","type":"page","link":"https:\/\/sefafoundations.com\/?page_id=11","title":{"rendered":""},"content":{"rendered":"\n\n\n
<\/code><\/pre>\n\n\n

\n
\n
\n    
\n    
\n    Sefa Foundations – Emergency Relief for Iran<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n<style>\n        :root {\n            --primary: #0d3b3b;\n            --primary-light: #1a5c5c;\n            --primary-dark: #072626;\n            --gold: #c9a84c;\n            --gold-light: #e8d5a3;\n            --dark: #0a1f1f;\n            --light: #f5f7f7;\n            --cream: #f0ece4;\n            --gradient: linear-gradient(135deg, #0d3b3b 0%, #1a5c5c 100%);\n        }<\/p>\n<p>        * { margin: 0; padding: 0; box-sizing: border-box; }<\/p>\n<p>        body {\n            font-family: 'Inter', sans-serif;\n            background: #fff;\n            color: #333;\n            overflow-x: hidden;\n        }<\/p>\n<p>        \/* Emergency Banner *\/\n        .emergency-banner {\n            background: var(--primary);\n            color: white;\n            padding: 14px;\n            text-align: center;\n            font-weight: 600;\n            font-size: 14px;\n            letter-spacing: 1.5px;\n            animation: pulse 2.5s infinite;\n            position: relative;\n            z-index: 1000;\n            text-transform: uppercase;\n        }<\/p>\n<p>        @keyframes pulse {\n            0%, 100% { background: var(--primary); }\n            50% { background: var(--primary-dark); }\n        }<\/p>\n<p>        \/* Navigation *\/\n        nav {\n            background: rgba(255,255,255,0.98);\n            backdrop-filter: blur(10px);\n            padding: 12px 5%;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            position: sticky;\n            top: 0;\n            z-index: 999;\n            box-shadow: 0 2px 20px rgba(0,0,0,0.08);\n        }<\/p>\n<p>        .logo {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            text-decoration: none;\n        }<\/p>\n<p>        .logo img {\n            height: 55px;\n            width: auto;\n            transition: transform 0.3s;\n        }<\/p>\n<p>        .logo:hover img { transform: scale(1.05); }<\/p>\n<p>        .logo-text {\n            font-family: 'Playfair Display', serif;\n            font-size: 22px;\n            font-weight: 700;\n            color: var(--primary);\n            line-height: 1.2;\n        }<\/p>\n<p>        .logo-text span {\n            display: block;\n            font-size: 11px;\n            font-family: 'Inter', sans-serif;\n            font-weight: 500;\n            letter-spacing: 3px;\n            color: var(--gold);\n            text-transform: uppercase;\n        }<\/p>\n<p>        .nav-links {\n            display: flex;\n            gap: 35px;\n            list-style: none;\n            align-items: center;\n        }<\/p>\n<p>        .nav-links a {\n            text-decoration: none;\n            color: #333;\n            font-weight: 500;\n            font-size: 15px;\n            transition: color 0.3s;\n            position: relative;\n        }<\/p>\n<p>        .nav-links a:hover { color: var(--primary); }\n        .nav-links a::after {\n            content: '';\n            position: absolute;\n            bottom: -5px;\n            left: 0;\n            width: 0;\n            height: 2px;\n            background: var(--primary);\n            transition: width 0.3s;\n        }\n        .nav-links a:hover::after { width: 100%; }<\/p>\n<p>        .donate-nav-btn {\n            background: var(--gradient);\n            color: white !important;\n            padding: 12px 28px;\n            border-radius: 50px;\n            font-weight: 700;\n            box-shadow: 0 4px 15px rgba(13,59,59,0.35);\n            transition: transform 0.3s, box-shadow 0.3s;\n        }<\/p>\n<p>        .donate-nav-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 25px rgba(13,59,59,0.45);\n        }<\/p>\n<p>        \/* Hero Section *\/\n        .hero {\n            position: relative;\n            height: 100vh;\n            min-height: 700px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n        }<\/p>\n<p>        .hero-bg {\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            background: linear-gradient(rgba(10,31,31,0.88), rgba(10,31,31,0.92)), \n                        url('https:\/\/images.unsplash.com\/photo-1469571486292-0ba58a3f068b?w=1920') center\/cover;\n            filter: brightness(0.7);\n        }<\/p>\n<p>        .hero-content {\n            position: relative;\n            z-index: 2;\n            text-align: center;\n            color: white;\n            max-width: 900px;\n            padding: 0 20px;\n        }<\/p>\n<p>        .hero-logo {\n            width: 120px;\n            height: 120px;\n            margin: 0 auto 25px;\n            background: rgba(255,255,255,0.1);\n            backdrop-filter: blur(10px);\n            border-radius: 50%;\n            padding: 15px;\n            border: 2px solid rgba(201,168,76,0.3);\n            animation: fadeInDown 1s ease;\n        }<\/p>\n<p>        .hero-logo img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n        }<\/p>\n<p>        .hero-badge {\n            display: inline-block;\n            background: rgba(201,168,76,0.15);\n            border: 1px solid var(--gold);\n            color: var(--gold);\n            padding: 8px 24px;\n            border-radius: 50px;\n            font-size: 12px;\n            font-weight: 600;\n            letter-spacing: 3px;\n            text-transform: uppercase;\n            margin-bottom: 30px;\n            animation: fadeInDown 1s ease 0.2s both;\n        }<\/p>\n<p>        .hero h1 {\n            font-family: 'Playfair Display', serif;\n            font-size: clamp(36px, 5vw, 64px);\n            font-weight: 900;\n            line-height: 1.1;\n            margin-bottom: 25px;\n            animation: fadeInUp 1s ease 0.3s both;\n        }<\/p>\n<p>        .hero h1 span { color: var(--gold); }<\/p>\n<p>        .hero p {\n            font-size: 18px;\n            line-height: 1.8;\n            margin-bottom: 40px;\n            opacity: 0.9;\n            animation: fadeInUp 1s ease 0.5s both;\n        }<\/p>\n<p>        .hero-buttons {\n            display: flex;\n            gap: 20px;\n            justify-content: center;\n            flex-wrap: wrap;\n            animation: fadeInUp 1s ease 0.7s both;\n        }<\/p>\n<p>        .btn-primary {\n            background: var(--gradient);\n            color: white;\n            padding: 18px 45px;\n            border-radius: 50px;\n            font-size: 16px;\n            font-weight: 700;\n            border: none;\n            cursor: pointer;\n            text-decoration: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            box-shadow: 0 8px 30px rgba(13,59,59,0.4);\n            transition: all 0.3s;\n            position: relative;\n            overflow: hidden;\n        }<\/p>\n<p>        .btn-primary:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 12px 40px rgba(13,59,59,0.5);\n        }<\/p>\n<p>        .btn-secondary {\n            background: transparent;\n            color: white;\n            padding: 18px 45px;\n            border-radius: 50px;\n            font-size: 16px;\n            font-weight: 700;\n            border: 2px solid rgba(255,255,255,0.3);\n            cursor: pointer;\n            text-decoration: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            transition: all 0.3s;\n        }<\/p>\n<p>        .btn-secondary:hover {\n            background: rgba(255,255,255,0.1);\n            border-color: white;\n        }<\/p>\n<p>        \/* Live Stats Bar *\/\n        .stats-bar {\n            background: white;\n            padding: 45px 5%;\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 30px;\n            max-width: 1200px;\n            margin: -60px auto 0;\n            position: relative;\n            z-index: 10;\n            border-radius: 20px;\n            box-shadow: 0 20px 60px rgba(0,0,0,0.1);\n        }<\/p>\n<p>        .stat-item {\n            text-align: center;\n            padding: 20px;\n        }<\/p>\n<p>        .stat-icon {\n            width: 65px;\n            height: 65px;\n            background: linear-gradient(135deg, #e8f4f4, #d0e8e8);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 18px;\n            font-size: 26px;\n            color: var(--primary);\n        }<\/p>\n<p>        .stat-number {\n            font-family: 'Playfair Display', serif;\n            font-size: 38px;\n            font-weight: 900;\n            color: var(--primary);\n            display: block;\n        }<\/p>\n<p>        .stat-label {\n            color: #666;\n            font-size: 14px;\n            font-weight: 500;\n            margin-top: 8px;\n        }<\/p>\n<p>        .live-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            background: #e8f5e9;\n            color: #2e7d32;\n            padding: 5px 14px;\n            border-radius: 20px;\n            font-size: 11px;\n            font-weight: 600;\n            margin-top: 10px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }<\/p>\n<p>        .live-dot {\n            width: 8px;\n            height: 8px;\n            background: #4caf50;\n            border-radius: 50%;\n            animation: blink 1.5s infinite;\n        }<\/p>\n<p>        @keyframes blink {\n            0%, 100% { opacity: 1; }\n            50% { opacity: 0.3; }\n        }<\/p>\n<p>        \/* Partners Section *\/\n        .partners {\n            padding: 90px 5%;\n            background: var(--light);\n            text-align: center;\n        }<\/p>\n<p>        .section-header {\n            margin-bottom: 55px;\n        }<\/p>\n<p>        .section-header h2 {\n            font-family: 'Playfair Display', serif;\n            font-size: 44px;\n            color: var(--dark);\n            margin-bottom: 18px;\n        }<\/p>\n<p>        .section-header p {\n            color: #666;\n            font-size: 18px;\n            max-width: 600px;\n            margin: 0 auto;\n            line-height: 1.7;\n        }<\/p>\n<p>        .partners-grid {\n            display: flex;\n            justify-content: center;\n            gap: 50px;\n            flex-wrap: wrap;\n            align-items: center;\n        }<\/p>\n<p>        .partner-logo {\n            background: white;\n            padding: 35px 45px;\n            border-radius: 16px;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.06);\n            transition: transform 0.3s, box-shadow 0.3s;\n            min-width: 220px;\n            border: 1px solid rgba(0,0,0,0.04);\n        }<\/p>\n<p>        .partner-logo:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 12px 35px rgba(0,0,0,0.1);\n        }<\/p>\n<p>        .partner-logo i {\n            font-size: 44px;\n            color: var(--primary);\n            margin-bottom: 18px;\n        }<\/p>\n<p>        .partner-logo h4 {\n            font-size: 16px;\n            color: var(--dark);\n            font-weight: 700;\n            margin-bottom: 4px;\n        }<\/p>\n<p>        .partner-logo span {\n            font-size: 12px;\n            color: #888;\n        }<\/p>\n<p>        \/* About Section *\/\n        .about {\n            padding: 100px 5%;\n            max-width: 1200px;\n            margin: 0 auto;\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 70px;\n            align-items: center;\n        }<\/p>\n<p>        .about-image {\n            position: relative;\n            border-radius: 20px;\n            overflow: hidden;\n            box-shadow: 0 20px 60px rgba(0,0,0,0.12);\n        }<\/p>\n<p>        .about-image img {\n            width: 100%;\n            height: 500px;\n            object-fit: cover;\n            transition: transform 0.5s;\n        }<\/p>\n<p>        .about-image:hover img { transform: scale(1.05); }<\/p>\n<p>        .about-content h2 {\n            font-family: 'Playfair Display', serif;\n            font-size: 44px;\n            color: var(--dark);\n            margin-bottom: 25px;\n            line-height: 1.2;\n        }<\/p>\n<p>        .about-content p {\n            color: #555;\n            line-height: 1.8;\n            margin-bottom: 20px;\n            font-size: 16px;\n        }<\/p>\n<p>        .impact-list {\n            list-style: none;\n            margin-top: 30px;\n        }<\/p>\n<p>        .impact-list li {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            padding: 14px 0;\n            border-bottom: 1px solid #eee;\n            font-size: 15px;\n        }<\/p>\n<p>        .impact-list i {\n            color: var(--primary);\n            font-size: 20px;\n            min-width: 24px;\n        }<\/p>\n<p>        \/* Donation Section *\/\n        .donation-section {\n            background: var(--dark);\n            padding: 100px 5%;\n            position: relative;\n            overflow: hidden;\n        }<\/p>\n<p>        .donation-section::before {\n            content: '';\n            position: absolute;\n            top: -50%;\n            left: -50%;\n            width: 200%;\n            height: 200%;\n            background: radial-gradient(circle, rgba(13,59,59,0.15) 0%, transparent 70%);\n            animation: rotate 30s linear infinite;\n        }<\/p>\n<p>        @keyframes rotate {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n        }<\/p>\n<p>        .donation-container {\n            max-width: 1000px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n        }<\/p>\n<p>        .donation-header {\n            text-align: center;\n            color: white;\n            margin-bottom: 60px;\n        }<\/p>\n<p>        .donation-header h2 {\n            font-family: 'Playfair Display', serif;\n            font-size: 48px;\n            margin-bottom: 20px;\n        }<\/p>\n<p>        .donation-header p {\n            font-size: 18px;\n            opacity: 0.8;\n            max-width: 600px;\n            margin: 0 auto;\n            line-height: 1.7;\n        }<\/p>\n<p>        .donation-box {\n            background: white;\n            border-radius: 24px;\n            padding: 50px;\n            box-shadow: 0 30px 80px rgba(0,0,0,0.3);\n        }<\/p>\n<p>        .progress-section {\n            margin-bottom: 40px;\n        }<\/p>\n<p>        .progress-header {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 18px;\n            font-weight: 600;\n            font-size: 15px;\n        }<\/p>\n<p>        .progress-bar-bg {\n            height: 22px;\n            background: #eee;\n            border-radius: 11px;\n            overflow: hidden;\n        }<\/p>\n<p>        .progress-bar-fill {\n            height: 100%;\n            background: var(--gradient);\n            border-radius: 11px;\n            width: 0%;\n            transition: width 2.5s ease;\n            position: relative;\n        }<\/p>\n<p>        .progress-bar-fill::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            width: 40px;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));\n            animation: shimmer 2s infinite;\n        }<\/p>\n<p>        @keyframes shimmer {\n            0% { transform: translateX(-40px); }\n            100% { transform: translateX(40px); }\n        }<\/p>\n<p>        .amount-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 15px;\n            margin-bottom: 30px;\n        }<\/p>\n<p>        .amount-btn {\n            padding: 22px;\n            border: 2px solid #eee;\n            border-radius: 16px;\n            background: white;\n            cursor: pointer;\n            text-align: center;\n            transition: all 0.3s;\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--dark);\n            font-family: 'Inter', sans-serif;\n        }<\/p>\n<p>        .amount-btn:hover, .amount-btn.active {\n            border-color: var(--primary);\n            background: #e8f4f4;\n            color: var(--primary);\n            transform: translateY(-3px);\n            box-shadow: 0 8px 25px rgba(13,59,59,0.12);\n        }<\/p>\n<p>        .custom-amount {\n            grid-column: span 2;\n            display: flex;\n            align-items: center;\n            padding: 0 22px;\n            border: 2px solid #eee;\n            border-radius: 16px;\n            background: white;\n        }<\/p>\n<p>        .custom-amount span {\n            font-size: 20px;\n            font-weight: 700;\n            color: #999;\n            margin-right: 10px;\n        }<\/p>\n<p>        .custom-amount input {\n            border: none;\n            outline: none;\n            font-size: 18px;\n            font-weight: 700;\n            width: 100%;\n            color: var(--dark);\n            font-family: 'Inter', sans-serif;\n            padding: 22px 0;\n        }<\/p>\n<p>        .donate-submit {\n            width: 100%;\n            padding: 24px;\n            background: var(--gradient);\n            color: white;\n            border: none;\n            border-radius: 16px;\n            font-size: 18px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: all 0.3s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 12px;\n            font-family: 'Inter', sans-serif;\n        }<\/p>\n<p>        .donate-submit:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 10px 30px rgba(13,59,59,0.4);\n        }<\/p>\n<p>        .payment-methods {\n            display: flex;\n            justify-content: center;\n            gap: 25px;\n            margin-top: 25px;\n            opacity: 0.5;\n        }<\/p>\n<p>        .payment-methods i {\n            font-size: 32px;\n            color: #666;\n        }<\/p>\n<p>        \/* Recent Donors Ticker *\/\n        .donors-ticker {\n            background: rgba(255,255,255,0.05);\n            border-radius: 16px;\n            padding: 28px;\n            margin-top: 45px;\n            border: 1px solid rgba(255,255,255,0.1);\n        }<\/p>\n<p>        .donors-ticker h4 {\n            color: var(--gold);\n            margin-bottom: 18px;\n            font-size: 13px;\n            letter-spacing: 2.5px;\n            text-transform: uppercase;\n            font-weight: 600;\n        }<\/p>\n<p>        .ticker-content {\n            display: flex;\n            gap: 20px;\n            overflow: hidden;\n        }<\/p>\n<p>        .ticker-item {\n            background: rgba(255,255,255,0.1);\n            padding: 14px 22px;\n            border-radius: 50px;\n            color: white;\n            font-size: 14px;\n            white-space: nowrap;\n            animation: ticker 25s linear infinite;\n            border: 1px solid rgba(255,255,255,0.08);\n        }<\/p>\n<p>        @keyframes ticker {\n            0% { transform: translateX(0); }\n            100% { transform: translateX(-100%); }\n        }<\/p>\n<p>        \/* Impact Cards *\/\n        .impact-section {\n            padding: 100px 5%;\n            max-width: 1200px;\n            margin: 0 auto;\n        }<\/p>\n<p>        .impact-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 35px;\n            margin-top: 55px;\n        }<\/p>\n<p>        .impact-card {\n            background: white;\n            border-radius: 20px;\n            overflow: hidden;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.06);\n            transition: transform 0.3s, box-shadow 0.3s;\n            border: 1px solid rgba(0,0,0,0.04);\n        }<\/p>\n<p>        .impact-card:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 20px 60px rgba(0,0,0,0.12);\n        }<\/p>\n<p>        .impact-card-img {\n            height: 220px;\n            background: linear-gradient(135deg, #0d3b3b 0%, #1a5c5c 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 60px;\n            color: white;\n        }<\/p>\n<p>        .impact-card:nth-child(2) .impact-card-img {\n            background: linear-gradient(135deg, #1a5c5c 0%, #2d7a7a 100%);\n        }<\/p>\n<p>        .impact-card:nth-child(3) .impact-card-img {\n            background: linear-gradient(135deg, #2d7a7a 0%, #3d9999 100%);\n        }<\/p>\n<p>        .impact-card-body {\n            padding: 35px;\n        }<\/p>\n<p>        .impact-card-body h3 {\n            font-family: 'Playfair Display', serif;\n            font-size: 26px;\n            margin-bottom: 15px;\n            color: var(--dark);\n        }<\/p>\n<p>        .impact-card-body p {\n            color: #666;\n            line-height: 1.7;\n            font-size: 15px;\n        }<\/p>\n<p>        .impact-stat {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            background: #e8f4f4;\n            color: var(--primary);\n            padding: 10px 18px;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 700;\n            margin-top: 18px;\n        }<\/p>\n<p>        \/* Testimonials *\/\n        .testimonials {\n            background: var(--light);\n            padding: 100px 5%;\n        }<\/p>\n<p>        .testimonial-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n            gap: 35px;\n            max-width: 1200px;\n            margin: 55px auto 0;\n        }<\/p>\n<p>        .testimonial-card {\n            background: white;\n            padding: 45px;\n            border-radius: 20px;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.04);\n            position: relative;\n            border: 1px solid rgba(0,0,0,0.03);\n        }<\/p>\n<p>        .testimonial-card::before {\n            content: '\"';\n            font-family: 'Playfair Display', serif;\n            font-size: 90px;\n            color: var(--primary);\n            opacity: 0.15;\n            position: absolute;\n            top: 15px;\n            left: 30px;\n            line-height: 1;\n        }<\/p>\n<p>        .testimonial-text {\n            font-size: 16px;\n            line-height: 1.8;\n            color: #555;\n            margin-bottom: 28px;\n            position: relative;\n            z-index: 1;\n        }<\/p>\n<p>        .testimonial-author {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }<\/p>\n<p>        .author-avatar {\n            width: 52px;\n            height: 52px;\n            border-radius: 50%;\n            background: var(--gradient);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-weight: 700;\n            font-size: 18px;\n        }<\/p>\n<p>        .author-info h4 {\n            font-size: 16px;\n            color: var(--dark);\n            font-weight: 600;\n        }<\/p>\n<p>        .author-info span {\n            font-size: 13px;\n            color: #888;\n        }<\/p>\n<p>        \/* Contact Section *\/\n        .contact {\n            padding: 100px 5%;\n            max-width: 800px;\n            margin: 0 auto;\n            text-align: center;\n        }<\/p>\n<p>        .contact-form {\n            display: grid;\n            gap: 22px;\n            margin-top: 45px;\n            text-align: left;\n        }<\/p>\n<p>        .form-group {\n            display: grid;\n            gap: 8px;\n        }<\/p>\n<p>        .form-group label {\n            font-weight: 600;\n            color: var(--dark);\n            font-size: 14px;\n        }<\/p>\n<p>        .form-group input,\n        .form-group textarea {\n            padding: 18px 22px;\n            border: 2px solid #eee;\n            border-radius: 14px;\n            font-size: 15px;\n            transition: border-color 0.3s;\n            outline: none;\n            font-family: 'Inter', sans-serif;\n        }<\/p>\n<p>        .form-group input:focus,\n        .form-group textarea:focus {\n            border-color: var(--primary);\n        }<\/p>\n<p>        .form-group textarea {\n            min-height: 160px;\n            resize: vertical;\n        }<\/p>\n<p>        .contact-info-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 30px;\n            margin: 60px 0;\n        }<\/p>\n<p>        .contact-info-item {\n            padding: 35px 25px;\n            background: white;\n            border-radius: 18px;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n            border: 1px solid rgba(0,0,0,0.03);\n            transition: transform 0.3s;\n        }<\/p>\n<p>        .contact-info-item:hover {\n            transform: translateY(-5px);\n        }<\/p>\n<p>        .contact-info-item i {\n            font-size: 30px;\n            color: var(--primary);\n            margin-bottom: 18px;\n        }<\/p>\n<p>        .contact-info-item h4 {\n            font-size: 16px;\n            margin-bottom: 10px;\n            color: var(--dark);\n            font-weight: 600;\n        }<\/p>\n<p>        .contact-info-item p {\n            font-size: 14px;\n            color: #666;\n            line-height: 1.5;\n        }<\/p>\n<p>        \/* Footer *\/\n        footer {\n            background: var(--dark);\n            color: white;\n            padding: 70px 5% 35px;\n        }<\/p>\n<p>        .footer-grid {\n            display: grid;\n            grid-template-columns: 2fr 1fr 1fr 1fr;\n            gap: 50px;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding-bottom: 50px;\n            border-bottom: 1px solid rgba(255,255,255,0.08);\n        }<\/p>\n<p>        .footer-brand h3 {\n            font-family: 'Playfair Display', serif;\n            font-size: 28px;\n            margin-bottom: 18px;\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }<\/p>\n<p>        .footer-brand h3 img {\n            height: 45px;\n            width: auto;\n            filter: brightness(0) invert(1);\n        }<\/p>\n<p>        .footer-brand p {\n            color: rgba(255,255,255,0.55);\n            line-height: 1.8;\n            font-size: 14px;\n        }<\/p>\n<p>        .footer-links h4 {\n            font-size: 15px;\n            margin-bottom: 22px;\n            color: var(--gold);\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            font-weight: 600;\n        }<\/p>\n<p>        .footer-links ul {\n            list-style: none;\n        }<\/p>\n<p>        .footer-links li {\n            margin-bottom: 14px;\n        }<\/p>\n<p>        .footer-links a {\n            color: rgba(255,255,255,0.55);\n            text-decoration: none;\n            font-size: 14px;\n            transition: color 0.3s;\n        }<\/p>\n<p>        .footer-links a:hover { color: white; }<\/p>\n<p>        .footer-bottom {\n            max-width: 1200px;\n            margin: 35px auto 0;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            flex-wrap: wrap;\n            gap: 20px;\n        }<\/p>\n<p>        .footer-bottom p {\n            color: rgba(255,255,255,0.35);\n            font-size: 13px;\n        }<\/p>\n<p>        .social-links {\n            display: flex;\n            gap: 12px;\n        }<\/p>\n<p>        .social-links a {\n            width: 42px;\n            height: 42px;\n            border-radius: 50%;\n            background: rgba(255,255,255,0.08);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            text-decoration: none;\n            transition: all 0.3s;\n            font-size: 15px;\n        }<\/p>\n<p>        .social-links a:hover {\n            background: var(--primary-light);\n            transform: translateY(-3px);\n        }<\/p>\n<p>        \/* Animations *\/\n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }<\/p>\n<p>        @keyframes fadeInDown {\n            from {\n                opacity: 0;\n                transform: translateY(-30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }<\/p>\n<p>        \/* Modal *\/\n        .modal-overlay {\n            display: none;\n            position: fixed;\n            top: 0; left: 0;\n            width: 100%; height: 100%;\n            background: rgba(0,0,0,0.8);\n            z-index: 10000;\n            justify-content: center;\n            align-items: center;\n            backdrop-filter: blur(5px);\n        }<\/p>\n<p>        .modal-overlay.active { display: flex; }<\/p>\n<p>        .modal {\n            background: white;\n            border-radius: 24px;\n            padding: 55px;\n            max-width: 500px;\n            width: 90%;\n            text-align: center;\n            animation: modalIn 0.4s ease;\n        }<\/p>\n<p>        @keyframes modalIn {\n            from {\n                opacity: 0;\n                transform: scale(0.8) translateY(20px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }<\/p>\n<p>        .modal-icon {\n            width: 85px;\n            height: 85px;\n            background: #e8f5e9;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 28px;\n            font-size: 38px;\n            color: #4caf50;\n        }<\/p>\n<p>        .modal h3 {\n            font-family: 'Playfair Display', serif;\n            font-size: 30px;\n            color: var(--dark);\n            margin-bottom: 18px;\n        }<\/p>\n<p>        .modal p {\n            color: #666;\n            margin-bottom: 35px;\n            line-height: 1.7;\n            font-size: 16px;\n        }<\/p>\n<p>        .modal-close {\n            background: var(--gradient);\n            color: white;\n            border: none;\n            padding: 16px 45px;\n            border-radius: 50px;\n            font-size: 16px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: transform 0.3s;\n            font-family: 'Inter', sans-serif;\n        }<\/p>\n<p>        .modal-close:hover { transform: scale(1.05); }<\/p>\n<p>        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .nav-links { display: none; }\n            .hero h1 { font-size: 32px; }\n            .about { grid-template-columns: 1fr; gap: 40px; }\n            .amount-grid { grid-template-columns: repeat(2, 1fr); }\n            .custom-amount { grid-column: span 2; }\n            .footer-grid { grid-template-columns: 1fr; gap: 35px; }\n            .contact-info-grid { grid-template-columns: 1fr; }\n            .stats-bar { margin-top: -30px; padding: 30px 5%; }\n            .hero-logo { width: 90px; height: 90px; }\n            .logo-text { display: none; }\n            .donation-box { padding: 30px; }\n        }<\/p>\n<p>        \/* Scroll animations *\/\n        .scroll-reveal {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease;\n        }<\/p>\n<p>        .scroll-reveal.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    <\/style>\n<p><base target=\"_blank\"><br \/>\n<\/head><br \/>\n<body><br \/>\n    <!-- Emergency Banner --><\/p>\n<div class=\"emergency-banner\">\n        <i class=\"fas fa-exclamation-triangle\"><\/i> Urgent: Iran War Crisis \u2014 Your Support Saves Lives Today\n    <\/div>\n<p>    <!-- Navigation --><\/p>\n<nav>\n        <a href=\"#\" class=\"logo\"><br \/>\n            <img decoding=\"async\" src=\"SEFA FOUNDATUION LOGO a flying dove landing on a mountain top.png\" alt=\"Sefa Foundations Logo\"><\/p>\n<div class=\"logo-text\">\n                Sefa Foundations<br \/>\n                <span>Humanitarian Relief<\/span>\n            <\/div>\n<p>        <\/a><\/p>\n<ul class=\"nav-links\">\n<li><a href=\"#about\">About<\/a><\/li>\n<li><a href=\"#impact\">Our Impact<\/a><\/li>\n<li><a href=\"#partners\">Partners<\/a><\/li>\n<li><a href=\"#contact\">Contact<\/a><\/li>\n<li><a href=\"#donate\" class=\"donate-nav-btn\"><i class=\"fas fa-heart\"><\/i> Donate Now<\/a><\/li>\n<\/ul>\n<\/nav>\n<p>    <!-- Hero Section --><\/p>\n<section class=\"hero\">\n<div class=\"hero-bg\"><\/div>\n<div class=\"hero-content\">\n<div class=\"hero-logo\">\n                <img decoding=\"async\" src=\"SEFA FOUNDATUION LOGO a flying dove landing on a mountain top.png\" alt=\"Sefa Foundations\">\n            <\/div>\n<div class=\"hero-badge\">\n                <i class=\"fas fa-globe\"><\/i> Registered Non-Profit Organization\n            <\/div>\n<h1>Standing with <span>Iran<\/span><br \/>in Their Darkest Hour<\/h1>\n<p>Over 2.3 million people displaced. 850,000 children in urgent need of medical aid.<br \/>Every dollar you donate delivers emergency relief directly to families on the ground.<\/p>\n<div class=\"hero-buttons\">\n                <a href=\"#donate\" class=\"btn-primary\"><br \/>\n                    <i class=\"fas fa-heart\"><\/i> Donate Now<br \/>\n                <\/a><br \/>\n                <a href=\"#about\" class=\"btn-secondary\"><br \/>\n                    <i class=\"fas fa-play-circle\"><\/i> Learn More<br \/>\n                <\/a>\n            <\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- Live Stats Bar --><\/p>\n<div class=\"stats-bar\">\n<div class=\"stat-item\">\n<div class=\"stat-icon\"><i class=\"fas fa-users\"><\/i><\/div>\n<p>            <span class=\"stat-number\" id=\"stat-people\">0<\/span><\/p>\n<div class=\"stat-label\">People Assisted<\/div>\n<div class=\"live-indicator\">\n<div class=\"live-dot\"><\/div>\n<p> Live<\/p><\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-icon\"><i class=\"fas fa-hand-holding-medical\"><\/i><\/div>\n<p>            <span class=\"stat-number\" id=\"stat-medical\">0<\/span><\/p>\n<div class=\"stat-label\">Medical Kits Delivered<\/div>\n<div class=\"live-indicator\">\n<div class=\"live-dot\"><\/div>\n<p> Live<\/p><\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-icon\"><i class=\"fas fa-home\"><\/i><\/div>\n<p>            <span class=\"stat-number\" id=\"stat-shelter\">0<\/span><\/p>\n<div class=\"stat-label\">Shelters Established<\/div>\n<div class=\"live-indicator\">\n<div class=\"live-dot\"><\/div>\n<p> Live<\/p><\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-icon\"><i class=\"fas fa-dollar-sign\"><\/i><\/div>\n<p>            <span class=\"stat-number\" id=\"stat-raised\">$0<\/span><\/p>\n<div class=\"stat-label\">Raised This Month<\/div>\n<div class=\"live-indicator\">\n<div class=\"live-dot\"><\/div>\n<p> Live<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>    <!-- Partners Section --><\/p>\n<section class=\"partners\" id=\"partners\">\n<div class=\"section-header scroll-reveal\">\n<h2>Trusted Global Partners<\/h2>\n<p>Working alongside the world’s leading humanitarian organizations to maximize impact and ensure transparency<\/p>\n<\/p><\/div>\n<div class=\"partners-grid scroll-reveal\">\n<div class=\"partner-logo\">\n                <i class=\"fas fa-globe-americas\"><\/i><\/p>\n<h4>World Health Organization<\/h4>\n<p>                <span>Strategic Health Partner<\/span>\n            <\/div>\n<div class=\"partner-logo\">\n                <i class=\"fas fa-building\"><\/i><\/p>\n<h4>United Nations<\/h4>\n<p>                <span>UN OCHA Affiliate<\/span>\n            <\/div>\n<div class=\"partner-logo\">\n                <i class=\"fas fa-handshake\"><\/i><\/p>\n<h4>International Red Cross<\/h4>\n<p>                <span>Field Operations Partner<\/span>\n            <\/div>\n<div class=\"partner-logo\">\n                <i class=\"fas fa-child\"><\/i><\/p>\n<h4>UNICEF<\/h4>\n<p>                <span>Child Protection Alliance<\/span>\n            <\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- About Section --><\/p>\n<section class=\"about\" id=\"about\">\n<div class=\"about-image scroll-reveal\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1488521787991-ed7bbaae773c?w=800\" alt=\"Humanitarian Aid\">\n        <\/div>\n<div class=\"about-content scroll-reveal\">\n<h2>Why Sefa Foundations?<\/h2>\n<p>Founded in 2018, Sefa Foundations has been at the forefront of emergency humanitarian response across the Middle East. Our network of 450+ local volunteers ensures that 94% of every donation reaches those in need.<\/p>\n<p>During the current Iran crisis, we have established 12 emergency field hospitals, distributed over 50,000 food packages, and provided psychological support to 8,000+ children.<\/p>\n<ul class=\"impact-list\">\n<li><i class=\"fas fa-check-circle\"><\/i> 94% of funds go directly to relief programs<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> 12-hour emergency response time<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Full transparency with monthly impact reports<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Tax-deductible donations (501(c)(3) certified)<\/li>\n<\/ul><\/div>\n<\/section>\n<p>    <!-- Donation Section --><\/p>\n<section class=\"donation-section\" id=\"donate\">\n<div class=\"donation-container\">\n<div class=\"donation-header scroll-reveal\">\n<h2>Your Contribution Saves Lives<\/h2>\n<p>Join 47,000+ donors who have already stepped up. 100% secure. Tax-deductible. Immediate impact.<\/p>\n<\/p><\/div>\n<div class=\"donation-box scroll-reveal\">\n<div class=\"progress-section\">\n<div class=\"progress-header\">\n                        <span><strong id=\"raised-amount\">$2,847,500<\/strong> raised<\/span><br \/>\n                        <span>Goal: <strong>$5,000,000<\/strong><\/span>\n                    <\/div>\n<div class=\"progress-bar-bg\">\n<div class=\"progress-bar-fill\" id=\"progress-fill\"><\/div>\n<\/p><\/div>\n<p style=\"text-align: center; margin-top: 12px; color: #666; font-size: 14px;\">\n                        <i class=\"fas fa-clock\" style=\"color: var(--primary);\"><\/i><br \/>\n                        <span id=\"donor-count\">47,832<\/span> donors \u2022<br \/>\n                        <span id=\"days-left\">18<\/span> days remaining\n                    <\/p>\n<\/p><\/div>\n<div class=\"amount-grid\">\n                    <button class=\"amount-btn\" onclick=\"selectAmount(25)\">$25<\/button><br \/>\n                    <button class=\"amount-btn\" onclick=\"selectAmount(50)\">$50<\/button><br \/>\n                    <button class=\"amount-btn active\" onclick=\"selectAmount(100)\">$100<\/button><br \/>\n                    <button class=\"amount-btn\" onclick=\"selectAmount(250)\">$250<\/button><\/p>\n<div class=\"custom-amount\">\n                        <span>$<\/span><br \/>\n                        <input type=\"number\" placeholder=\"Custom Amount\" id=\"custom-amount\" onchange=\"selectAmount(this.value)\">\n                    <\/div>\n<p>                    <button class=\"amount-btn\" onclick=\"selectAmount(500)\">$500<\/button>\n                <\/div>\n<p>                <button class=\"donate-submit\" onclick=\"processDonation()\"><br \/>\n                    <i class=\"fas fa-heart\"><\/i> Donate $<span id=\"selected-amount\">100<\/span> Now<br \/>\n                <\/button><\/p>\n<div class=\"payment-methods\">\n                    <i class=\"fab fa-cc-visa\"><\/i><br \/>\n                    <i class=\"fab fa-cc-mastercard\"><\/i><br \/>\n                    <i class=\"fab fa-cc-amex\"><\/i><br \/>\n                    <i class=\"fab fa-cc-paypal\"><\/i><br \/>\n                    <i class=\"fab fa-apple-pay\"><\/i><br \/>\n                    <i class=\"fab fa-google-pay\"><\/i>\n                <\/div>\n<\/p><\/div>\n<div class=\"donors-ticker scroll-reveal\">\n<h4><i class=\"fas fa-bolt\"><\/i> Recent Donations<\/h4>\n<div class=\"ticker-content\" id=\"ticker\">\n                    <span class=\"ticker-item\">Sarah M. donated $250 \u2014 “For the children”<\/span><br \/>\n                    <span class=\"ticker-item\">Ahmed K. donated $500 \u2014 “Stay strong Iran”<\/span><br \/>\n                    <span class=\"ticker-item\">Maria L. donated $100 \u2014 “Praying for peace”<\/span><br \/>\n                    <span class=\"ticker-item\">James R. donated $1,000 \u2014 “Every life matters”<\/span><br \/>\n                    <span class=\"ticker-item\">Fatima H. donated $75 \u2014 “Allah bless you”<\/span><br \/>\n                    <span class=\"ticker-item\">David C. donated $300 \u2014 “Humanity first”<\/span>\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- Impact Section --><\/p>\n<section class=\"impact-section\" id=\"impact\">\n<div class=\"section-header scroll-reveal\">\n<h2>Where Your Money Goes<\/h2>\n<p>Complete transparency. Every dollar is tracked and reported. See the direct impact of your generosity.<\/p>\n<\/p><\/div>\n<div class=\"impact-grid\">\n<div class=\"impact-card scroll-reveal\">\n<div class=\"impact-card-img\">\n                    <i class=\"fas fa-kit-medical\"><\/i>\n                <\/div>\n<div class=\"impact-card-body\">\n<h3>Emergency Medical Aid<\/h3>\n<p>Deploying mobile clinics, surgical units, and essential medicines to conflict zones. Providing trauma care and maternal health services.<\/p>\n<p>                    <span class=\"impact-stat\"><i class=\"fas fa-arrow-up\"><\/i> 12,450 patients treated this month<\/span>\n                <\/div>\n<\/p><\/div>\n<div class=\"impact-card scroll-reveal\">\n<div class=\"impact-card-img\">\n                    <i class=\"fas fa-bowl-food\"><\/i>\n                <\/div>\n<div class=\"impact-card-body\">\n<h3>Food & Nutrition<\/h3>\n<p>Distributing emergency food parcels, clean water, and nutritional supplements to displaced families and malnourished children.<\/p>\n<p>                    <span class=\"impact-stat\"><i class=\"fas fa-arrow-up\"><\/i> 89,200 meals distributed<\/span>\n                <\/div>\n<\/p><\/div>\n<div class=\"impact-card scroll-reveal\">\n<div class=\"impact-card-img\">\n                    <i class=\"fas fa-house-chimney\"><\/i>\n                <\/div>\n<div class=\"impact-card-body\">\n<h3>Shelter & Protection<\/h3>\n<p>Establishing safe shelters for displaced families, with special protection programs for women, children, and the elderly.<\/p>\n<p>                    <span class=\"impact-stat\"><i class=\"fas fa-arrow-up\"><\/i> 3,400 families housed safely<\/span>\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- Testimonials --><\/p>\n<section class=\"testimonials\">\n<div class=\"section-header scroll-reveal\">\n<h2>Voices from the Ground<\/h2>\n<p>Real stories from volunteers, beneficiaries, and partners working alongside Sefa Foundations<\/p>\n<\/p><\/div>\n<div class=\"testimonial-grid\">\n<div class=\"testimonial-card scroll-reveal\">\n<p class=\"testimonial-text\">Sefa Foundations reached our village when no one else could. They brought medicine for my daughter and food when we had nothing. They didn’t just save lives\u2014they restored our hope.<\/p>\n<div class=\"testimonial-author\">\n<div class=\"author-avatar\">MR<\/div>\n<div class=\"author-info\">\n<h4>Dr. Maryam Roshani<\/h4>\n<p>                        <span>Field Coordinator, Tehran Province<\/span>\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"testimonial-card scroll-reveal\">\n<p class=\"testimonial-text\">As a WHO partner, we require rigorous standards. Sefa Foundations exceeds them all. Their logistics, transparency, and dedication to affected communities is exemplary in this crisis.<\/p>\n<div class=\"testimonial-author\">\n<div class=\"author-avatar\" style=\"background: linear-gradient(135deg, #1a5c5c, #2d7a7a);\">JW<\/div>\n<div class=\"author-info\">\n<h4>Dr. James Whitfield<\/h4>\n<p>                        <span>WHO Regional Emergency Director<\/span>\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"testimonial-card scroll-reveal\">\n<p class=\"testimonial-text\">I donated $500 last month and received a detailed report showing exactly how it was used\u2014down to the specific medical supplies purchased. This level of transparency is rare and deeply appreciated.<\/p>\n<div class=\"testimonial-author\">\n<div class=\"author-avatar\" style=\"background: linear-gradient(135deg, #2d7a7a, #3d9999);\">EP<\/div>\n<div class=\"author-info\">\n<h4>Elena Petrov<\/h4>\n<p>                        <span>Monthly Donor since 2022<\/span>\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- Contact Section --><\/p>\n<section class=\"contact\" id=\"contact\">\n<div class=\"section-header scroll-reveal\">\n<h2>Get in Touch<\/h2>\n<p>Have questions about our work, partnerships, or how to get involved? We’d love to hear from you.<\/p>\n<\/p><\/div>\n<div class=\"contact-info-grid scroll-reveal\">\n<div class=\"contact-info-item\">\n                <i class=\"fas fa-envelope\"><\/i><\/p>\n<h4>Email Us<\/h4>\n<p>sefafoundations@gmail.com<\/p>\n<\/p><\/div>\n<div class=\"contact-info-item\">\n                <i class=\"fas fa-phone\"><\/i><\/p>\n<h4>Call Us<\/h4>\n<p>+1 (555) 234-5678<\/p>\n<\/p><\/div>\n<div class=\"contact-info-item\">\n                <i class=\"fas fa-location-dot\"><\/i><\/p>\n<h4>Headquarters<\/h4>\n<p>450 Lexington Ave<br \/>New York, NY 10017<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<form class=\"contact-form scroll-reveal\" onsubmit=\"handleContact(event)\">\n<div class=\"form-group\">\n                <label>Full Name<\/label><br \/>\n                <input type=\"text\" placeholder=\"Your name\" required>\n            <\/div>\n<div class=\"form-group\">\n                <label>Email Address<\/label><br \/>\n                <input type=\"email\" placeholder=\"your@email.com\" required>\n            <\/div>\n<div class=\"form-group\">\n                <label>Subject<\/label><br \/>\n                <input type=\"text\" placeholder=\"How can we help?\" required>\n            <\/div>\n<div class=\"form-group\">\n                <label>Message<\/label><br \/>\n                <textarea placeholder=\"Tell us more about your inquiry...\" required><\/textarea>\n            <\/div>\n<p>            <button type=\"submit\" class=\"donate-submit\" style=\"margin-top: 10px;\"><br \/>\n                <i class=\"fas fa-paper-plane\"><\/i> Send Message<br \/>\n            <\/button><br \/>\n        <\/form>\n<\/section>\n<p>    <!-- Footer --><\/p>\n<footer>\n<div class=\"footer-grid\">\n<div class=\"footer-brand\">\n<h3>\n                    <img decoding=\"async\" src=\"SEFA FOUNDATUION LOGO a flying dove landing on a mountain top.png\" alt=\"Sefa\"><br \/>\n                    Sefa Foundations<br \/>\n                <\/h3>\n<p>Registered 501(c)(3) non-profit organization dedicated to humanitarian relief and sustainable development in crisis regions. EIN: 82-1234567.<\/p>\n<\/p><\/div>\n<div class=\"footer-links\">\n<h4>Quick Links<\/h4>\n<ul>\n<li><a href=\"#about\">About Us<\/a><\/li>\n<li><a href=\"#impact\">Our Programs<\/a><\/li>\n<li><a href=\"#donate\">Donate<\/a><\/li>\n<li><a href=\"#\">Annual Reports<\/a><\/li>\n<li><a href=\"#\">Careers<\/a><\/li>\n<\/ul><\/div>\n<div class=\"footer-links\">\n<h4>Resources<\/h4>\n<ul>\n<li><a href=\"#\">Financial Transparency<\/a><\/li>\n<li><a href=\"#\">Impact Reports<\/a><\/li>\n<li><a href=\"#\">Media Kit<\/a><\/li>\n<li><a href=\"#\">Privacy Policy<\/a><\/li>\n<li><a href=\"#\">Terms of Service<\/a><\/li>\n<\/ul><\/div>\n<div class=\"footer-links\">\n<h4>Connect<\/h4>\n<ul>\n<li><a href=\"#\">Newsletter<\/a><\/li>\n<li><a href=\"#\">Events<\/a><\/li>\n<li><a href=\"#\">Volunteer<\/a><\/li>\n<li><a href=\"#\">Corporate Partnerships<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"footer-bottom\">\n<p>\u00a9 2026 Sefa Foundations. All rights reserved. A registered 501(c)(3) charitable organization.<\/p>\n<div class=\"social-links\">\n                <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a><br \/>\n                <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a><br \/>\n                <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a><br \/>\n                <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a><br \/>\n                <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\n            <\/div>\n<\/p><\/div>\n<\/footer>\n<p>    <!-- Success Modal --><\/p>\n<div class=\"modal-overlay\" id=\"success-modal\">\n<div class=\"modal\">\n<div class=\"modal-icon\">\n                <i class=\"fas fa-check\"><\/i>\n            <\/div>\n<h3>Thank You for Your Generosity!<\/h3>\n<p>Your donation of $<span id=\"modal-amount\">100<\/span> will provide emergency medical supplies to families in Iran. A confirmation email has been sent to you.<\/p>\n<p>            <button class=\"modal-close\" onclick=\"closeModal()\">Continue Helping<\/button>\n        <\/div>\n<\/p><\/div>\n<p>    <!-- Contact Modal --><\/p>\n<div class=\"modal-overlay\" id=\"contact-modal\">\n<div class=\"modal\">\n<div class=\"modal-icon\" style=\"background: #e3f2fd; color: #1976d2;\">\n                <i class=\"fas fa-paper-plane\"><\/i>\n            <\/div>\n<h3>Message Sent Successfully!<\/h3>\n<p>Thank you for reaching out. Our team will respond to your inquiry at sefafoundations@gmail.com within 24 hours.<\/p>\n<p>            <button class=\"modal-close\" onclick=\"closeContactModal()\">Close<\/button>\n        <\/div>\n<\/p><\/div>\n<p>    <script>\n        \/\/ Animated counters\n        function animateValue(id, start, end, duration, prefix = '', suffix = '') {\n            const obj = document.getElementById(id);\n            const range = end - start;\n            const increment = end > start ? 1 : -1;\n            const stepTime = Math.abs(Math.floor(duration \/ range));\n            let current = start;<\/p>\n<p>            const timer = setInterval(() => {\n                current += Math.ceil(range \/ 50);\n                if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {\n                    current = end;\n                    clearInterval(timer);\n                }\n                obj.textContent = prefix + current.toLocaleString() + suffix;\n            }, 30);\n        }\n\n        \/\/ Initialize counters\n        window.addEventListener('load', () => {\n            animateValue('stat-people', 0, 234567, 2000);\n            animateValue('stat-medical', 0, 45200, 2000);\n            animateValue('stat-shelter', 0, 127, 2000);\n            animateValue('stat-raised', 0, 2847500, 2500, '$');<\/p>\n<p>            \/\/ Animate progress bar\n            setTimeout(() => {\n                document.getElementById('progress-fill').style.width = '57%';\n            }, 500);\n        });<\/p>\n<p>        \/\/ Donation amount selection\n        let selectedAmount = 100;<\/p>\n<p>        function selectAmount(amount) {\n            selectedAmount = amount;\n            document.getElementById('selected-amount').textContent = amount;<\/p>\n<p>            \/\/ Update active state\n            document.querySelectorAll('.amount-btn').forEach(btn => {\n                btn.classList.remove('active');\n                if (btn.textContent === '$' + amount) {\n                    btn.classList.add('active');\n                }\n            });\n        }<\/p>\n<p>        \/\/ Process donation\n        function processDonation() {\n            document.getElementById('modal-amount').textContent = selectedAmount;\n            document.getElementById('success-modal').classList.add('active');<\/p>\n<p>            \/\/ Update stats\n            const currentRaised = 2847500;\n            const newRaised = currentRaised + parseInt(selectedAmount);\n            document.getElementById('raised-amount').textContent = '$' + newRaised.toLocaleString();\n            document.getElementById('stat-raised').textContent = '$' + newRaised.toLocaleString();<\/p>\n<p>            \/\/ Update donor count\n            const currentDonors = 47832;\n            document.getElementById('donor-count').textContent = (currentDonors + 1).toLocaleString();\n        }<\/p>\n<p>        function closeModal() {\n            document.getElementById('success-modal').classList.remove('active');\n        }<\/p>\n<p>        \/\/ Contact form\n        function handleContact(e) {\n            e.preventDefault();\n            document.getElementById('contact-modal').classList.add('active');\n            e.target.reset();\n        }<\/p>\n<p>        function closeContactModal() {\n            document.getElementById('contact-modal').classList.remove('active');\n        }<\/p>\n<p>        \/\/ Scroll animations\n        const observerOptions = {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        };<\/p>\n<p>        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('visible');\n                }\n            });\n        }, observerOptions);<\/p>\n<p>        document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));<\/p>\n<p>        \/\/ Smooth scroll\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener('click', function(e) {\n                e.preventDefault();\n                const target = document.querySelector(this.getAttribute('href'));\n                if (target) {\n                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }\n            });\n        });<\/p>\n<p>        \/\/ Live ticker animation\n        const ticker = document.getElementById('ticker');\n        const tickerItems = ticker.innerHTML;\n        ticker.innerHTML = tickerItems + tickerItems;<\/p>\n<p>        \/\/ Random live updates simulation\n        setInterval(() => {\n            const amounts = [25, 50, 75, 100, 150, 200, 500, 1000];\n            const names = ['Anonymous', 'John D.', 'Aisha M.', 'Robert K.', 'Lisa T.', 'Mohammed A.', 'Emma S.', 'Carlos R.'];\n            const messages = ['For the children', 'Stay strong', 'Praying for peace', 'With love', 'Humanity first', 'God bless', 'Never give up'];<\/p>\n<p>            const randomAmount = amounts[Math.floor(Math.random() * amounts.length)];\n            const randomName = names[Math.floor(Math.random() * names.length)];\n            const randomMessage = messages[Math.floor(Math.random() * messages.length)];<\/p>\n<p>            const newItem = document.createElement('span');\n            newItem.className = 'ticker-item';\n            newItem.textContent = `${randomName} donated $${randomAmount} \u2014 \"${randomMessage}\"`;\n            ticker.appendChild(newItem);<\/p>\n<p>            if (ticker.children.length > 12) {\n                ticker.removeChild(ticker.children[0]);\n            }\n        }, 5000);<\/p>\n<p>        \/\/ Navbar scroll effect\n        let lastScroll = 0;\n        window.addEventListener('scroll', () => {\n            const nav = document.querySelector('nav');\n            const currentScroll = window.pageYOffset;<\/p>\n<p>            if (currentScroll > 100) {\n                nav.style.boxShadow = '0 2px 30px rgba(0,0,0,0.15)';\n            } else {\n                nav.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';\n            }<\/p>\n<p>            lastScroll = currentScroll;\n        });\n    <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\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":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sefafoundations.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":2,"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/sefafoundations.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/sefafoundations.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}