Sadaqah – DT Peduli | Spreading Goodness<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n \/* 3. FIX TUMPANG TINDIH: Padding for mobile bottom nav *\/\n padding-bottom: 90px; \n overflow-x: hidden;\n }\n @media (min-width: 1024px) {\n body { padding-bottom: 0; }\n }\n\n .font-lora { font-family: 'Lora', serif; }\n .bg-dt-blue { background-color: #00358f; }\n .text-dt-blue { color: #00358f; }\n .bg-dt-yellow { background-color: #ffaf23; }\n .text-dt-yellow { color: #ffaf23; }\n .border-dt-yellow { border-color: #ffaf23; }\n\n \/* 3. Modern Sticky Mobile Styles *\/\n .shadow-soft-up {\n box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.1);\n }\n \n \/* Sticky Header *\/\n #mainHeader {\n transition: background-color 0.4s ease, box-shadow 0.4s ease;\n }\n .header-scrolled {\n background-color: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);\n }\n\n \/* 1. Full Width Banner Animation *\/\n @keyframes kenburns {\n 0% { transform: scale(1); }\n 100% { transform: scale(1.1); }\n }\n .hero-bg-animate::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: inherit;\n background-size: cover;\n background-position: center;\n animation: kenburns 20s ease-out forwards;\n z-index: 0;\n }\n\n \/* 7. HILANGKAN JARAK (Zero Gap Dropdown) *\/\n .group .mega-menu, .group .simple-dropdown {\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;\n opacity: 0;\n transform: translateY(10px);\n pointer-events: none;\n visibility: hidden;\n top: 100%; \/* Attached directly to the bottom of header *\/\n margin-top: 0;\n }\n .group:hover .mega-menu, .group:hover .simple-dropdown {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n visibility: visible;\n }\n\n \/* 2. Compact Mega Menu *\/\n .program-link:hover, .program-link.active {\n background-color: white;\n transform: translateX(4px);\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);\n }\n .program-link.active {\n border-left: 3px solid #00358f;\n }\n .program-link {\n border-left: 3px solid transparent;\n padding: 0.5rem 0.75rem;\n }\n .program-content-panel {\n position: absolute;\n top: 1rem;\n left: 1.5rem;\n right: 1.5rem;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out;\n }\n .program-content-panel.active {\n opacity: 1;\n visibility: visible;\n }\n .mega-menu-img {\n height: 160px; \/* Smaller image for compact view *\/\n object-fit: cover;\n }\n\n \/* Mobile Menu Animations *\/\n #mobileMenu.is-open { transform: translateY(0); }\n .mobile-submenu {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);\n }\n .animate-slide-up { animation: slide-up 0.3s ease-out forwards; }\n @keyframes slide-up {\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n \/* Arabic Text *\/\n .arabic-text {\n font-family: 'Lora', serif;\n direction: rtl; \n }\n \n \/* Quote Block *\/\n .quote-block {\n border-left: 4px solid #ffaf23;\n background-color: #f9fafb;\n }\n\n \/* Campaign Card Hover *\/\n .campaign-card:hover .campaign-image {\n transform: scale(1.05);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n \n <header id=\"mainHeader\" class=\"sticky top-0 z-50 w-full bg-white\/90 backdrop-blur-md border-b border-gray-100\">\n <div class=\"container mx-auto px-4 lg:px-6\">\n <div class=\"flex items-center justify-between h-16 lg:h-20\">\n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-06\/250618K5BPVT.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <\/a>\n \n \n <div class=\"hidden lg:flex items-center\">\n <nav class=\"flex items-center space-x-1 h-full\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">Home<\/a>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>About Us<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Programs<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"mega-menu absolute -right-24 w-screen max-w-4xl origin-top-right z-50\">\n <div class=\"bg-white rounded-xl shadow-2xl border border-gray-100 grid grid-cols-12 overflow-hidden\">\n \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div><\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[280px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Fostering spiritual growth and spreading peaceful values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-dt-blue font-bold text-sm uppercase tracking-wide px-3 py-2 rounded-lg bg-blue-50 transition-all h-10\">\n <span>Giving<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block px-4 py-2 text-sm text-dt-blue font-bold bg-blue-50 rounded-md\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Governance<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute right-0 w-56 origin-top-right bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">News<\/a>\n <\/nav>\n \n \n <div class=\"ml-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>About Us<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Programs<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu p-4 space-y-3 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" onerror=\"this.src='https:\/\/placehold.co\/100x100?text=Dawah'\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p>\n <\/a>\n \n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" onerror=\"this.src='https:\/\/placehold.co\/100x100?text=Economy'\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p>\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-dt-blue font-bold py-4 px-6 focus:outline-none bg-blue-50\/50\">\n <span>Giving<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Palestine Relief<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Governance<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform rotate-180 text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\" style=\"max-height: 500px;\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"block text-gray-700 hover:text-dt-blue font-medium py-4 px-6 border-b border-gray-100\">News & Stories<\/a>\n <div class=\"p-6\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section id=\"hero-section\" class=\"relative text-white min-h-screen flex items-center justify-center overflow-hidden bg-center hero-bg-animate\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1593113598332-cd288d649414?q=80&w=2070&auto=format&fit=crop');\">\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/70 via-black\/40 to-transparent z-10\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-20 flex flex-col items-center pt-20\">\n <div class=\"text-center w-full max-w-4xl mb-10\" data-aos=\"fade-up\">\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-4 leading-tight tracking-tight drop-shadow-lg\">Unlock Blessings Through Sadaqah<\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 max-w-3xl mx-auto\">Every gift, no matter how small, has the power to change lives and weigh heavily on our scales of good deeds.<\/p>\n <\/div>\n \n \n <div id=\"donation-form\" class=\"w-full max-w-lg bg-white\/10 backdrop-blur-md rounded-2xl shadow-2xl p-6 md:p-8 border border-white\/20\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <h2 class=\"text-2xl font-bold text-white text-center mb-6\">Sadaqah Donation Form<\/h2>\n <div class=\"space-y-6\">\n <div class=\"space-y-4\">\n <div>\n <label for=\"donor-name\" class=\"block text-sm font-medium text-gray-200 mb-2\">Full Name<\/label>\n <input type=\"text\" id=\"donor-name\" placeholder=\"Servant of Allah\" class=\"w-full bg-white\/10 border-white\/30 text-white placeholder-gray-300 rounded-lg py-3 px-4 focus:border-dt-yellow focus:ring-1 focus:ring-dt-yellow transition-all outline-none\">\n <\/div>\n <div>\n <label for=\"donor-email\" class=\"block text-sm font-medium text-gray-200 mb-2\">Email<\/label>\n <input type=\"email\" id=\"donor-email\" placeholder=\"email@example.com\" class=\"w-full bg-white\/10 border-white\/30 text-white placeholder-gray-300 rounded-lg py-3 px-4 focus:border-dt-yellow focus:ring-1 focus:ring-dt-yellow transition-all outline-none\">\n <\/div>\n <\/div>\n\n <div class=\"pt-2 space-y-4\">\n <button id=\"proceedToPaymentButton\" class=\"w-full inline-block bg-dt-yellow text-dt-blue font-bold py-3 px-10 rounded-full text-lg hover:bg-opacity-90 transition-transform transform hover:scale-105 shadow-lg\">\n Proceed to Payment\n <\/button>\n <button id=\"openWiseModalBtn\" class=\"mt-4 w-full bg-white text-gray-800 font-bold py-3 px-6 rounded-full hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg flex items-center justify-center text-lg\">\n <i class=\"fas fa-globe mr-3\"><\/i>\n Complete Payment via Wise\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 w-1\/2 h-full bg-gray-50 -z-10 skew-x-12 origin-top\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n <div data-aos=\"fade-right\">\n <h2 class=\"text-3xl font-bold text-dt-blue mb-6 leading-snug\">The Virtues of Sadaqah: The Best Investment for This Life and the Hereafter<\/h2>\n <div class=\"space-y-6 text-gray-600 leading-relaxed\">\n <p>Sadaqah is a proof of a servant’s faith and obedience to Allah SWT. It is not merely giving away a portion of wealth, but also purifying the soul, repelling calamities, and multiplying sustenance. Scholars and Sheikhs constantly remind us of the extraordinary power of charity.<\/p>\n <div class=\"quote-block p-6 rounded-lg\">\n <p class=\"font-lora italic text-lg text-gray-800\">“Heal your sick with charity. Fortify your wealth with zakat. And prepare for the coming of calamities with supplication.”<\/p>\n <p class=\"mt-3 font-semibold text-right text-sm text-dt-blue\">– Hadith reported by Al-Bayhaqi & At-Tabarani<\/p>\n <\/div>\n <p>Every dollar we spend in the way of Allah will be a witness and a helper for us on the Day of Judgment.<\/p>\n <\/div>\n <\/div>\n <div data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"bg-white p-8 rounded-2xl shadow-xl border border-gray-100\">\n <h3 class=\"text-2xl font-bold text-dt-blue mb-6 text-center\">Allah’s Promise<\/h3>\n <div class=\"text-center mb-6\">\n <p class=\"font-lora text-2xl md:text-3xl text-center leading-relaxed arabic-text text-gray-800 mb-4\">\u0645\u064e\u062b\u064e\u0644\u064f \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0652\u0646\u064e \u064a\u064f\u0646\u0652\u0641\u0650\u0642\u064f\u0648\u0652\u0646\u064e \u0627\u064e\u0645\u0652\u0648\u064e\u0627\u0644\u064e\u0647\u064f\u0645\u0652 \u0641\u0650\u064a\u0652 \u0633\u064e\u0628\u0650\u064a\u0652\u0644\u0650 \u0627\u0644\u0644\u0651\u0670\u0647\u0650 \u0643\u064e\u0645\u064e\u062b\u064e\u0644\u0650 \u062d\u064e\u0628\u064e\u0651\u0629\u064d \u0627\u064e\u0646\u0652\u06e2\u0628\u064e\u062a\u064e\u062a\u0652 \u0633\u064e\u0628\u0652\u0639\u064e \u0633\u064e\u0646\u064e\u0627\u0628\u0650\u0644\u064e \u0641\u0650\u064a\u0652 \u0643\u064f\u0644\u0650\u0651 \u0633\u064f\u0646\u0652\u06e2\u0628\u064f\u0644\u064e\u0629\u064d \u0645\u0650\u0651\u0627\u0626\u064e\u0629\u064f \u062d\u064e\u0628\u064e\u0651\u0629\u064d<\/p>\n <\/div>\n <p class=\"text-gray-600 italic text-center text-sm leading-relaxed\">“The example of those who spend their wealth in the way of Allah is like a seed [of grain] which grows seven spikes; in each spike is a hundred grains. And Allah multiplies [His reward] for whom He wills. And Allah is all-Encompassing and Knowing.”<\/p>\n <p class=\"mt-4 font-bold text-center text-dt-yellow text-sm\">– The Holy Qur’an, Al-Baqarah: 261<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"campaigns\" class=\"py-16 lg:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Choose Your Sadaqah Program<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Channel your sadaqah through our meaningful programs to create the maximum impact.<\/p>\n <\/div>\n \n \n <div id=\"campaign-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <\/div>\n\n \n <div id=\"loading-indicator\" class=\"text-center py-12\">\n <div class=\"news-loader\"><\/div>\n <p class=\"text-gray-500 mt-2\">Loading Programs…<\/p>\n <\/div>\n \n \n <div id=\"load-more-container\" class=\"text-center mt-12\">\n \n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed\">A globally trusted charity empowering communities and spreading goodness through sustainable programs in education, health, economy, and humanitarian aid.<\/p>\n <div class=\"mt-4 text-xs text-gray-500 space-y-2\">\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>TR:<\/strong> K\u00fct\u00fck No: 34-285-124<\/p>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Our Reports<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1 mr-3 text-dt-yellow\"><\/i>\n <span>Jl. Gegerkalong Girang No.32, Bandung, Jawa Barat 40153<\/span>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i>\n <a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow transition-colors\">hello@dtpeduli.org<\/a>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i>\n <span>+62 813-1712-1712<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"text-xs text-gray-500\">Subscribe to our newsletter for updates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\">\n <div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">\n © 2025 DT Peduli. All Rights Reserved.\n <\/div>\n <\/div>\n <\/footer>\n \n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n \n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1946\/1946436.png\" alt=\"Home\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\"> \n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Home<\/span>\n <\/a>\n\n \n <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3063\/3063822.png\" alt=\"Services\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Services<\/span>\n <\/button>\n\n \n <button id=\"quickDonateButton\" class=\"relative -top-6 group focus:outline-none tap-highlight-transparent\">\n <div class=\"bg-gradient-to-br from-dt-yellow to-orange-400 rounded-full p-4 shadow-xl border-4 border-white\/80 transform transition-transform group-hover:scale-105 group-active:scale-95\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z\" clip-rule=\"evenodd\" \/><\/svg>\n <\/div>\n <span class=\"absolute -bottom-5 left-1\/2 transform -translate-x-1\/2 text-[10px] font-bold text-dt-blue whitespace-nowrap\">Donate<\/span>\n <\/button>\n \n \n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1077\/1077114.png\" alt=\"Profile\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Profile<\/span>\n <\/a>\n \n <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2976\/2976215.png\" alt=\"Menu\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Menu<\/span>\n <\/button>\n <\/nav>\n \n \n <div id=\"quickDonateSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up max-h-[85vh] overflow-y-auto\">\n <div class=\"flex justify-between items-center mb-6 sticky top-0 bg-white pb-2 border-b border-gray-100\">\n <div>\n <h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3>\n <p class=\"text-xs text-gray-500\">Select a category to help<\/p>\n <\/div>\n <button id=\"closeQuickDonate\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800 hover:bg-gray-200\">×<\/button>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb0<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Maal<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-bold text-dt-blue text-sm\">Sadaqah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf72<\/span><span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span><\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p><p class=\"text-xs text-gray-500\">Chat on WhatsApp<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p><p class=\"text-xs text-gray-500\">Direct line assistance<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-red-50 border border-red-100 hover:bg-red-100\">\n <i class=\"fas fa-exclamation-circle text-2xl text-red-500 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Complaint Service<\/p><p class=\"text-xs text-gray-500\">Report an issue<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"paymentModalContent\" class=\"modal-content bg-white rounded-xl shadow-2xl w-full max-w-md relative transform scale-95 opacity-0 transition-all duration-300\">\n <button id=\"closeModalButton\" class=\"absolute -top-3 -right-3 bg-white rounded-full h-8 w-8 flex items-center justify-center text-gray-600 hover:text-black hover:scale-110 transition-transform focus:outline-none shadow-lg\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200\"><h3 class=\"text-xl font-bold text-dt-blue text-center\">Sadaqah Payment<\/h3><\/div>\n <div class=\"p-6\">\n <div id=\"paymattic-form-container\" class=\"bg-gray-100 border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_377\">\n <form data-wpf_form_id='377' wpf_form_instance='wpf_form_instance_377_1' class='wpf_form wpf_form_instance_377_1 wpf_strip_default_style wpf_form_id_377 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_377' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__377__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"377\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"207\">\n <div data-element_type=\"customer_name\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_customer_name\" >Your Name <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_name\" condition_id=\"customer_name\" placeholder=\"Name\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_customer_name\" required=\"1\" \/>\n <\/div>\n <\/div>\n <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div data-element_type=\"customer_email\"\n class=\"wpf_form_group wpf_item_email\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_customer_email\" >Email Address <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_email\" condition_id=\"customer_email\" placeholder=\"Email Address\" value=\"\" type=\"email\" class=\"wpf_form_control wpf_customer_email\" id=\"wpf_input_377_customer_email\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <p id=\"error_phone_code_wpf_input_377_phone_input\" hidden\n name=\"Phone Number\" data-element_type=\"wpf_phone_input_error\">\n <\/p>\n\n <div field_name=\"phone\" style=\"display: block\"\n data-element_type=\"phone\"\n class=\"wpf_form_group wpf_item_tel\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_phone\" >Phone Number<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input style=\"padding-left: 65px;\" value=\"\" class=\"wpf_form_control\" type=\"tel\" id=\"phone_code_wpf_input_377_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_377_phone_input_hidden\" \/>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_address_wrapper\"><label condition_id=address_input class=\"wpf_address_heading\">Address<\/label><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_address_line_1_\" >Address Line 1 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[address_line_1]\" condition_id=\"address_line_1\" placeholder=\"Address Line 1\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_address_line_1_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_address_line_2_\" >Address Line 2<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[address_line_2]\" condition_id=\"address_line_2\" placeholder=\"Address Line 2\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_address_line_2_\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_city_\" >City<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[city]\" condition_id=\"city\" placeholder=\"City\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_city_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_state_\" >State <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[state]\" condition_id=\"state\" placeholder=\"State\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_state_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_zip_code_\" >ZIP Code<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[zip_code]\" condition_id=\"zip_code\" placeholder=\"ZIP Code\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_zip_code_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div style=\"display : block\" id=\"wpf_address_input\" data-element_type=\"address_input\" class=\"wpf_form_group wpf_item_select\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_country_\" >Country <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <select data-required=\"yes\" name=\"address_input[country]\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_country_\" condition_id=\"country\" required=\"1\" >\n <option data-type=\"placeholder\" value= >Select Country<\/option>\n <option value=\"AF\" >Afghanistan<\/option>\n <option value=\"AX\" >\u00c5land Islands<\/option>\n <option value=\"AL\" >Albania<\/option>\n <option value=\"DZ\" >Algeria<\/option>\n <option value=\"AS\" >American Samoa<\/option>\n <option value=\"AD\" >Andorra<\/option>\n <option value=\"AO\" >Angola<\/option>\n <option value=\"AI\" >Anguilla<\/option>\n <option value=\"AQ\" >Antarctica<\/option>\n <option value=\"AG\" >Antigua and Barbuda<\/option>\n <option value=\"AR\" >Argentina<\/option>\n <option value=\"AM\" >Armenia<\/option>\n <option value=\"AW\" >Aruba<\/option>\n <option value=\"AU\" >Australia<\/option>\n <option value=\"AT\" >Austria<\/option>\n <option value=\"AZ\" >Azerbaijan<\/option>\n <option value=\"BS\" >Bahamas<\/option>\n <option value=\"BH\" >Bahrain<\/option>\n <option value=\"BD\" >Bangladesh<\/option>\n <option value=\"BB\" >Barbados<\/option>\n <option value=\"BY\" >Belarus<\/option>\n <option value=\"BE\" >Belgium<\/option>\n <option value=\"PW\" >Belau<\/option>\n <option value=\"BZ\" >Belize<\/option>\n <option value=\"BJ\" >Benin<\/option>\n <option value=\"BM\" >Bermuda<\/option>\n <option value=\"BT\" >Bhutan<\/option>\n <option value=\"BO\" >Bolivia<\/option>\n <option value=\"BQ\" >Bonaire, Saint Eustatius and Saba<\/option>\n <option value=\"BA\" >Bosnia and Herzegovina<\/option>\n <option value=\"BW\" >Botswana<\/option>\n <option value=\"BV\" >Bouvet Island<\/option>\n <option value=\"BR\" >Brazil<\/option>\n <option value=\"IO\" >British Indian Ocean Territory<\/option>\n <option value=\"VG\" >British Virgin Islands<\/option>\n <option value=\"BN\" >Brunei<\/option>\n <option value=\"BG\" >Bulgaria<\/option>\n <option value=\"BF\" >Burkina Faso<\/option>\n <option value=\"BI\" >Burundi<\/option>\n <option value=\"KH\" >Cambodia<\/option>\n <option value=\"CM\" >Cameroon<\/option>\n <option value=\"CA\" >Canada<\/option>\n <option value=\"CV\" >Cape Verde<\/option>\n <option value=\"KY\" >Cayman Islands<\/option>\n <option value=\"CF\" >Central African Republic<\/option>\n <option value=\"TD\" >Chad<\/option>\n <option value=\"CL\" >Chile<\/option>\n <option value=\"CN\" >China<\/option>\n <option value=\"CX\" >Christmas Island<\/option>\n <option value=\"CC\" >Cocos (Keeling) Islands<\/option>\n <option value=\"CO\" >Colombia<\/option>\n <option value=\"KM\" >Comoros<\/option>\n <option value=\"CG\" >Congo (Brazzaville)<\/option>\n <option value=\"CD\" >Congo (Kinshasa)<\/option>\n <option value=\"CK\" >Cook Islands<\/option>\n <option value=\"CR\" >Costa Rica<\/option>\n <option value=\"HR\" >Croatia<\/option>\n <option value=\"CU\" >Cuba<\/option>\n <option value=\"CW\" >Curaçao<\/option>\n <option value=\"CY\" >Cyprus<\/option>\n <option value=\"CZ\" >Czech Republic<\/option>\n <option value=\"DK\" >Denmark<\/option>\n <option value=\"DJ\" >Djibouti<\/option>\n <option value=\"DM\" >Dominica<\/option>\n <option value=\"DO\" >Dominican Republic<\/option>\n <option value=\"EC\" >Ecuador<\/option>\n <option value=\"EG\" >Egypt<\/option>\n <option value=\"SV\" >El Salvador<\/option>\n <option value=\"GQ\" >Equatorial Guinea<\/option>\n <option value=\"ER\" >Eritrea<\/option>\n <option value=\"EE\" >Estonia<\/option>\n <option value=\"ET\" >Ethiopia<\/option>\n <option value=\"FK\" >Falkland Islands<\/option>\n <option value=\"FO\" >Faroe Islands<\/option>\n <option value=\"FJ\" >Fiji<\/option>\n <option value=\"FI\" >Finland<\/option>\n <option value=\"FR\" >France<\/option>\n <option value=\"GF\" >French Guiana<\/option>\n <option value=\"PF\" >French Polynesia<\/option>\n <option value=\"TF\" >French Southern Territories<\/option>\n <option value=\"GA\" >Gabon<\/option>\n <option value=\"GM\" >Gambia<\/option>\n <option value=\"GE\" >Georgia<\/option>\n <option value=\"DE\" >Germany<\/option>\n <option value=\"GH\" >Ghana<\/option>\n <option value=\"GI\" >Gibraltar<\/option>\n <option value=\"GR\" >Greece<\/option>\n <option value=\"GL\" >Greenland<\/option>\n <option value=\"GD\" >Grenada<\/option>\n <option value=\"GP\" >Guadeloupe<\/option>\n <option value=\"GU\" >Guam<\/option>\n <option value=\"GT\" >Guatemala<\/option>\n <option value=\"GG\" >Guernsey<\/option>\n <option value=\"GN\" >Guinea<\/option>\n <option value=\"GW\" >Guinea-Bissau<\/option>\n <option value=\"GY\" >Guyana<\/option>\n <option value=\"HT\" >Haiti<\/option>\n <option value=\"HM\" >Heard Island and McDonald Islands<\/option>\n <option value=\"HN\" >Honduras<\/option>\n <option value=\"HK\" >Hong Kong<\/option>\n <option value=\"HU\" >Hungary<\/option>\n <option value=\"IS\" >Iceland<\/option>\n <option value=\"IN\" >India<\/option>\n <option value=\"ID\" >Indonesia<\/option>\n <option value=\"IR\" >Iran<\/option>\n <option value=\"IQ\" >Iraq<\/option>\n <option value=\"IE\" >Ireland<\/option>\n <option value=\"IM\" >Isle of Man<\/option>\n <option value=\"IL\" >Israel<\/option>\n <option value=\"IT\" >Italy<\/option>\n <option value=\"CI\" >Ivory Coast<\/option>\n <option value=\"JM\" >Jamaica<\/option>\n <option value=\"JP\" >Japan<\/option>\n <option value=\"JE\" >Jersey<\/option>\n <option value=\"JO\" >Jordan<\/option>\n <option value=\"KZ\" >Kazakhstan<\/option>\n <option value=\"KE\" >Kenya<\/option>\n <option value=\"KI\" >Kiribati<\/option>\n <option value=\"KW\" >Kuwait<\/option>\n <option value=\"KG\" >Kyrgyzstan<\/option>\n <option value=\"LA\" >Laos<\/option>\n <option value=\"LV\" >Latvia<\/option>\n <option value=\"LB\" >Lebanon<\/option>\n <option value=\"LS\" >Lesotho<\/option>\n <option value=\"LR\" >Liberia<\/option>\n <option value=\"LY\" >Libya<\/option>\n <option value=\"LI\" >Liechtenstein<\/option>\n <option value=\"LT\" >Lithuania<\/option>\n <option value=\"LU\" >Luxembourg<\/option>\n <option value=\"MO\" >Macao S.A.R., China<\/option>\n <option value=\"MK\" >Macedonia<\/option>\n <option value=\"MG\" >Madagascar<\/option>\n <option value=\"MW\" >Malawi<\/option>\n <option value=\"MY\" >Malaysia<\/option>\n <option value=\"MV\" >Maldives<\/option>\n <option value=\"ML\" >Mali<\/option>\n <option value=\"MT\" >Malta<\/option>\n <option value=\"MH\" >Marshall Islands<\/option>\n <option value=\"MQ\" >Martinique<\/option>\n <option value=\"MR\" >Mauritania<\/option>\n <option value=\"MU\" >Mauritius<\/option>\n <option value=\"YT\" >Mayotte<\/option>\n <option value=\"MX\" >Mexico<\/option>\n <option value=\"FM\" >Micronesia<\/option>\n <option value=\"MD\" >Moldova<\/option>\n <option value=\"MC\" >Monaco<\/option>\n <option value=\"MN\" >Mongolia<\/option>\n <option value=\"ME\" >Montenegro<\/option>\n <option value=\"MS\" >Montserrat<\/option>\n <option value=\"MA\" >Morocco<\/option>\n <option value=\"MZ\" >Mozambique<\/option>\n <option value=\"MM\" >Myanmar<\/option>\n <option value=\"NA\" >Namibia<\/option>\n <option value=\"NR\" >Nauru<\/option>\n <option value=\"NP\" >Nepal<\/option>\n <option value=\"NL\" >Netherlands<\/option>\n <option value=\"NC\" >New Caledonia<\/option>\n <option value=\"NZ\" >New Zealand<\/option>\n <option value=\"NI\" >Nicaragua<\/option>\n <option value=\"NE\" >Niger<\/option>\n <option value=\"NG\" >Nigeria<\/option>\n <option value=\"NU\" >Niue<\/option>\n <option value=\"NF\" >Norfolk Island<\/option>\n <option value=\"MP\" >Northern Mariana Islands<\/option>\n <option value=\"KP\" >North Korea<\/option>\n <option value=\"NO\" >Norway<\/option>\n <option value=\"OM\" >Oman<\/option>\n <option value=\"PK\" >Pakistan<\/option>\n <option value=\"PS\" >Palestinian Territory<\/option>\n <option value=\"PA\" >Panama<\/option>\n <option value=\"PG\" >Papua New Guinea<\/option>\n <option value=\"PY\" >Paraguay<\/option>\n <option value=\"PE\" >Peru<\/option>\n <option value=\"PH\" >Philippines<\/option>\n <option value=\"PN\" >Pitcairn<\/option>\n <option value=\"PL\" >Poland<\/option>\n <option value=\"PT\" >Portugal<\/option>\n <option value=\"PR\" >Puerto Rico<\/option>\n <option value=\"QA\" >Qatar<\/option>\n <option value=\"RE\" >Reunion<\/option>\n <option value=\"RO\" >Romania<\/option>\n <option value=\"RU\" >Russia<\/option>\n <option value=\"RW\" >Rwanda<\/option>\n <option value=\"BL\" >Saint Barthélemy<\/option>\n <option value=\"SH\" >Saint Helena<\/option>\n <option value=\"KN\" >Saint Kitts and Nevis<\/option>\n <option value=\"LC\" >Saint Lucia<\/option>\n <option value=\"MF\" >Saint Martin (French part)<\/option>\n <option value=\"SX\" >Saint Martin (Dutch part)<\/option>\n <option value=\"PM\" >Saint Pierre and Miquelon<\/option>\n <option value=\"VC\" >Saint Vincent and the Grenadines<\/option>\n <option value=\"SM\" >San Marino<\/option>\n <option value=\"ST\" >São Tomé and Príncipe<\/option>\n <option value=\"SA\" >Saudi Arabia<\/option>\n <option value=\"SN\" >Senegal<\/option>\n <option value=\"RS\" >Serbia<\/option>\n <option value=\"SC\" >Seychelles<\/option>\n <option value=\"SL\" >Sierra Leone<\/option>\n <option value=\"SG\" >Singapore<\/option>\n <option value=\"SK\" >Slovakia<\/option>\n <option value=\"SI\" >Slovenia<\/option>\n <option value=\"SB\" >Solomon Islands<\/option>\n <option value=\"SO\" >Somalia<\/option>\n <option value=\"ZA\" >South Africa<\/option>\n <option value=\"GS\" >South Georgia\/Sandwich Islands<\/option>\n <option value=\"KR\" >South Korea<\/option>\n <option value=\"SS\" >South Sudan<\/option>\n <option value=\"ES\" >Spain<\/option>\n <option value=\"LK\" >Sri Lanka<\/option>\n <option value=\"SD\" >Sudan<\/option>\n <option value=\"SR\" >Suriname<\/option>\n <option value=\"SJ\" >Svalbard and Jan Mayen<\/option>\n <option value=\"SZ\" >Swaziland<\/option>\n <option value=\"SE\" >Sweden<\/option>\n <option value=\"CH\" >Switzerland<\/option>\n <option value=\"SY\" >Syria<\/option>\n <option value=\"TW\" >Taiwan<\/option>\n <option value=\"TJ\" >Tajikistan<\/option>\n <option value=\"TZ\" >Tanzania<\/option>\n <option value=\"TH\" >Thailand<\/option>\n <option value=\"TL\" >Timor-Leste<\/option>\n <option value=\"TG\" >Togo<\/option>\n <option value=\"TK\" >Tokelau<\/option>\n <option value=\"TO\" >Tonga<\/option>\n <option value=\"TT\" >Trinidad and Tobago<\/option>\n <option value=\"TN\" >Tunisia<\/option>\n <option value=\"TR\" >Turkey<\/option>\n <option value=\"TM\" >Turkmenistan<\/option>\n <option value=\"TC\" >Turks and Caicos Islands<\/option>\n <option value=\"TV\" >Tuvalu<\/option>\n <option value=\"UG\" >Uganda<\/option>\n <option value=\"UA\" >Ukraine<\/option>\n <option value=\"AE\" >United Arab Emirates<\/option>\n <option value=\"GB\" >United Kingdom (UK)<\/option>\n <option value=\"US\" >United States (US)<\/option>\n <option value=\"UM\" >United States (US) Minor Outlying Islands<\/option>\n <option value=\"VI\" >United States (US) Virgin Islands<\/option>\n <option value=\"UY\" >Uruguay<\/option>\n <option value=\"UZ\" >Uzbekistan<\/option>\n <option value=\"VU\" >Vanuatu<\/option>\n <option value=\"VA\" >Vatican<\/option>\n <option value=\"VE\" >Venezuela<\/option>\n <option value=\"VN\" >Vietnam<\/option>\n <option value=\"WF\" >Wallis and Futuna<\/option>\n <option value=\"EH\" >Western Sahara<\/option>\n <option value=\"WS\" >Samoa<\/option>\n <option value=\"YE\" >Yemen<\/option>\n <option value=\"ZM\" >Zambia<\/option>\n <option value=\"ZW\" >Zimbabwe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div><\/div><\/div><input data-wpf_payment_method=\"paypal\" type=\"hidden\" name=\"__paypal_payment_gateway\" value=\"paypal\" \/> <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style=\"display : block\" data-element_type=\"currency_switcher\" data-required_element=\"select\" data-required=\"no\" data-target_element=\"currency_switcher\" required_id=\"currency_switcher\" class=\"wpf_form_group wpf_item_currency_switcher\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_currency_switcher\" >Currency Switcher Options<\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"no\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_377_currency_switcher\" >\n <option data-type=\"placeholder\" value=\"\">--Select--<\/option>\n <option value=\"USD\" data-currency=\"USD\" customname=\"United States Dollar\" >United States Dollar (USD)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\n <\/option>\n <option value=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\n <\/option>\n <option value=\"EGP\" data-currency=\"EGP\" customname=\"Egyptian Pound\" >Egyptian Pound (EGP)\n <\/option>\n <option value=\"EUR\" data-currency=\"EUR\" customname=\"Euro\" >Euro (EUR)\n <\/option>\n <option value=\"JPY\" data-currency=\"JPY\" customname=\"Japanese Yen\" >Japanese Yen (JPY)\n <\/option>\n <option value=\"MYR\" data-currency=\"MYR\" customname=\"Malaysian Ringgit\" >Malaysian Ringgit (MYR)\n <\/option>\n <option value=\"NZD\" data-currency=\"NZD\" customname=\"New Zealand Dollar\" >New Zealand Dollar (NZD)\n <\/option>\n <option value=\"QAR\" data-currency=\"QAR\" customname=\"Qatari Riyal\" >Qatari Riyal (QAR)\n <\/option>\n <option value=\"SAR\" data-currency=\"SAR\" customname=\"Saudi Riyal\" >Saudi Riyal (SAR)\n <\/option>\n <option value=\"SGD\" data-currency=\"SGD\" customname=\"Singapore Dollar\" >Singapore Dollar (SGD)\n <\/option>\n <option value=\"TRY\" data-currency=\"TRY\" customname=\"Turkish Lira\" >Turkish Lira (TRY)\n <\/option>\n <option value=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style= \"display : block\" data-element_type=\"custom_payment_input\"\n class=\"wpf_form_group wpf_item_custom_payment_input\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_custom_payment_input\" >Custom Payment Amount<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"no\" data-type=\"input\" name=\"custom_payment_input\" placeholder=\"\" value=\"\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" min=\"\" data-price=\"0\" id=\"wpf_input_377_custom_payment_input\" customname=\"Custom Payment Amount\" class=\"wpf_form_control wpf_custom_amount wpf_money_amount wpf_payment_item input-prepend\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n <div class=\"wpf_form_group wpf_form_submissions\" style=\"margin-top: 20px;\">\n <button id='stripe_form_submit_377' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Sadaqah<\/span>\n <span style=\"display: none;\" class=\"wpf_txt_loading\">\n Please Wait\u2026 <\/span>\n <\/button>\n <div class=\"wpf_loading_svg\">\n <svg version=\"1.1\" id=\"loader-1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"30px\" height=\"30px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\" \/>\n <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 20 20\" to=\"360 20 20\" dur=\"0.5s\" repeatCount=\"indefinite\" \/>\n <\/path>\n <\/svg>\n <\/div>\n <\/div>\n <\/form>\n <div style=\"display: none\" class=\"wpf_form_notices\"><\/div>\n <\/div>\n\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"wiseModalContent\" class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform transition-all opacity-0 -translate-y-10 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div><h2 class=\"text-2xl font-bold text-dt-blue\">Payment via Wise<\/h2><p class=\"text-gray-500 mt-1\">Complete your international payment.<\/p><\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\"><iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n\n \/\/ Header Logic\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ Mobile Menu Logic\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ Bottom Nav Logic\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n if(menuToShow && !menuToShow.classList.contains('hidden')) {\n openSubmenu(menuToShow);\n } else {\n closeSubmenu(menuToShow);\n }\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300);\n document.body.style.overflow = '';\n };\n\n \/\/ Mega Menu Desktop Hover\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ Payment Modal Logic\n const paymentModal = document.getElementById('paymentModal');\n const paymentModalContent = document.getElementById('paymentModalContent');\n const proceedButton = document.getElementById('proceedToPaymentButton');\n const closeButton = document.getElementById('closeModalButton');\n\n const openModal = () => {\n if (!paymentModal || !paymentModalContent) return;\n document.body.style.overflow = 'hidden';\n paymentModal.classList.remove('hidden');\n setTimeout(() => {\n paymentModal.classList.remove('opacity-0', 'pointer-events-none');\n paymentModalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n };\n\n const closeModal = () => {\n if (!paymentModal || !paymentModalContent) return;\n document.body.style.overflow = '';\n paymentModal.classList.add('opacity-0');\n paymentModalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n paymentModal.classList.add('hidden', 'pointer-events-none');\n }, 300);\n };\n\n if (proceedButton) proceedButton.addEventListener('click', openModal);\n if (closeButton) closeButton.addEventListener('click', closeModal);\n if (paymentModal) paymentModal.addEventListener('click', (event) => { if (event.target === paymentModal) closeModal(); });\n\n \/\/ Wise Modal Logic\n const wiseModal = document.getElementById('wisePaymentModal');\n const wiseModalContent = document.getElementById('wiseModalContent');\n const openWiseBtn = document.getElementById('openWiseModalBtn');\n const closeWiseBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n\n const openWise = () => {\n if (!wiseModal) return;\n wiseIframe.src = 'https:\/\/dtpeduli.com\/donate-via-wise\/';\n document.body.style.overflow = 'hidden';\n wiseModal.classList.remove('hidden');\n setTimeout(() => {\n wiseModal.classList.remove('opacity-0', 'pointer-events-none');\n wiseModalContent.classList.remove('opacity-0', '-translate-y-10');\n }, 10);\n };\n\n const closeWise = () => {\n if (!wiseModal) return;\n document.body.style.overflow = '';\n wiseModalContent.classList.add('opacity-0', '-translate-y-10');\n wiseModal.classList.add('opacity-0');\n setTimeout(() => {\n wiseModal.classList.add('hidden', 'pointer-events-none');\n wiseIframe.src = '';\n }, 300);\n };\n\n if (openWiseBtn) openWiseBtn.addEventListener('click', openWise);\n if (closeWiseBtn) closeWiseBtn.addEventListener('click', closeWise);\n if (wiseModal) wiseModal.addEventListener('click', (e) => { if(e.target === wiseModal) closeWise(); });\n\n \/\/ API Fetch Campaigns\n const campaignGrid = document.getElementById('campaign-grid');\n const loadingIndicator = document.getElementById('loading-indicator');\n const loadMoreContainer = document.getElementById('load-more-container');\n let currentPage = 1;\n let isLoading = false;\n const perPage = 4;\n\n async function fetchCampaigns() {\n if (isLoading) return;\n isLoading = true;\n if (currentPage === 1) loadingIndicator.style.display = 'block';\n\n try {\n \/\/ Using fallback mock data for robustness in preview\n \/\/ Original URL: `https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=${perPage}&page=${currentPage}`\n const response = await fetch(`https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=${perPage}&page=${currentPage}`);\n if (!response.ok) throw new Error('Network response was not ok');\n const posts = await response.json();\n \n if (currentPage === 1) loadingIndicator.style.display = 'none';\n \n posts.forEach((post, index) => {\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/placehold.co\/600x400\/e2e8f0\/adb5bd?text=DT+Peduli';\n const cardHTML = `\n <div class=\"campaign-card bg-white rounded-xl shadow-md overflow-hidden transition-all transform hover:-translate-y-1 hover:shadow-xl\" data-aos=\"fade-up\" data-aos-delay=\"${index * 100}\">\n <a href=\"${post.link}\" target=\"_blank\" class=\"block\">\n <div class=\"overflow-hidden h-48\">\n <img decoding=\"async\" class=\"campaign-image w-full h-full object-cover transition-transform duration-300\" src=\"${imageUrl}\" alt=\"${post.title.rendered}\">\n <\/div>\n <div class=\"p-5\">\n <h3 class=\"font-bold text-gray-800 text-lg leading-tight h-14 overflow-hidden line-clamp-2\">${post.title.rendered}<\/h3>\n <div class=\"campaign-excerpt text-gray-600 text-sm mt-2 h-20 overflow-hidden line-clamp-3\">${post.excerpt.rendered}<\/div>\n <div class=\"mt-4\"><span class=\"bg-dt-yellow text-white font-bold py-2 px-5 rounded-full inline-block text-sm hover:bg-yellow-500 transition-colors\">Learn More<\/span><\/div>\n <\/div>\n <\/a>\n <\/div>`;\n campaignGrid.insertAdjacentHTML('beforeend', cardHTML);\n });\n\n if (!document.getElementById('load-more-btn')) {\n const loadMoreBtn = document.createElement('button');\n loadMoreBtn.id = 'load-more-btn';\n loadMoreBtn.className = 'bg-dt-blue text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105';\n loadMoreBtn.innerText = 'Load More Programs';\n loadMoreBtn.onclick = () => { currentPage++; fetchCampaigns(); };\n loadMoreContainer.appendChild(loadMoreBtn);\n }\n } catch (error) {\n console.error(\"Failed to fetch campaigns:\", error);\n \/\/ Mock data injection if API fails\n if(currentPage === 1) {\n loadingIndicator.style.display = 'none';\n campaignGrid.innerHTML = '<div class=\"col-span-4 text-center p-8\"><p class=\"text-gray-500 mb-4\">Unable to load campaigns directly. Here is a preview.<\/p><\/div>';\n \/\/ You can inject static mock cards here if desired\n }\n } finally {\n isLoading = false;\n }\n }\n fetchCampaigns();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sadaqah – DT Peduli | Spreading Goodness Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":26,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":554,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\/revisions\/554"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":207,"date":"2025-07-24T08:15:50","date_gmt":"2025-07-24T08:15:50","guid":{"rendered":"https:\/\/dtpeduli.com\/donate\/?page_id=207"},"modified":"2025-12-05T04:24:59","modified_gmt":"2025-12-05T04:24:59","slug":"sadaqah","status":"publish","type":"page","link":"https:\/\/dtpeduli.com\/donate\/sadaqah\/","title":{"rendered":"Sadaqah"},"content":{"rendered":"\n\n\n\n \n \n Sadaqah – DT Peduli | Spreading Goodness<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n \/* 3. FIX TUMPANG TINDIH: Padding for mobile bottom nav *\/\n padding-bottom: 90px; \n overflow-x: hidden;\n }\n @media (min-width: 1024px) {\n body { padding-bottom: 0; }\n }\n\n .font-lora { font-family: 'Lora', serif; }\n .bg-dt-blue { background-color: #00358f; }\n .text-dt-blue { color: #00358f; }\n .bg-dt-yellow { background-color: #ffaf23; }\n .text-dt-yellow { color: #ffaf23; }\n .border-dt-yellow { border-color: #ffaf23; }\n\n \/* 3. Modern Sticky Mobile Styles *\/\n .shadow-soft-up {\n box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.1);\n }\n \n \/* Sticky Header *\/\n #mainHeader {\n transition: background-color 0.4s ease, box-shadow 0.4s ease;\n }\n .header-scrolled {\n background-color: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);\n }\n\n \/* 1. Full Width Banner Animation *\/\n @keyframes kenburns {\n 0% { transform: scale(1); }\n 100% { transform: scale(1.1); }\n }\n .hero-bg-animate::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: inherit;\n background-size: cover;\n background-position: center;\n animation: kenburns 20s ease-out forwards;\n z-index: 0;\n }\n\n \/* 7. HILANGKAN JARAK (Zero Gap Dropdown) *\/\n .group .mega-menu, .group .simple-dropdown {\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;\n opacity: 0;\n transform: translateY(10px);\n pointer-events: none;\n visibility: hidden;\n top: 100%; \/* Attached directly to the bottom of header *\/\n margin-top: 0;\n }\n .group:hover .mega-menu, .group:hover .simple-dropdown {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n visibility: visible;\n }\n\n \/* 2. Compact Mega Menu *\/\n .program-link:hover, .program-link.active {\n background-color: white;\n transform: translateX(4px);\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);\n }\n .program-link.active {\n border-left: 3px solid #00358f;\n }\n .program-link {\n border-left: 3px solid transparent;\n padding: 0.5rem 0.75rem;\n }\n .program-content-panel {\n position: absolute;\n top: 1rem;\n left: 1.5rem;\n right: 1.5rem;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out;\n }\n .program-content-panel.active {\n opacity: 1;\n visibility: visible;\n }\n .mega-menu-img {\n height: 160px; \/* Smaller image for compact view *\/\n object-fit: cover;\n }\n\n \/* Mobile Menu Animations *\/\n #mobileMenu.is-open { transform: translateY(0); }\n .mobile-submenu {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);\n }\n .animate-slide-up { animation: slide-up 0.3s ease-out forwards; }\n @keyframes slide-up {\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n \/* Arabic Text *\/\n .arabic-text {\n font-family: 'Lora', serif;\n direction: rtl; \n }\n \n \/* Quote Block *\/\n .quote-block {\n border-left: 4px solid #ffaf23;\n background-color: #f9fafb;\n }\n\n \/* Campaign Card Hover *\/\n .campaign-card:hover .campaign-image {\n transform: scale(1.05);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n \n <header id=\"mainHeader\" class=\"sticky top-0 z-50 w-full bg-white\/90 backdrop-blur-md border-b border-gray-100\">\n <div class=\"container mx-auto px-4 lg:px-6\">\n <div class=\"flex items-center justify-between h-16 lg:h-20\">\n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-06\/250618K5BPVT.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <\/a>\n \n \n <div class=\"hidden lg:flex items-center\">\n <nav class=\"flex items-center space-x-1 h-full\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">Home<\/a>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>About Us<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Programs<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"mega-menu absolute -right-24 w-screen max-w-4xl origin-top-right z-50\">\n <div class=\"bg-white rounded-xl shadow-2xl border border-gray-100 grid grid-cols-12 overflow-hidden\">\n \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div><\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[280px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Fostering spiritual growth and spreading peaceful values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-dt-blue font-bold text-sm uppercase tracking-wide px-3 py-2 rounded-lg bg-blue-50 transition-all h-10\">\n <span>Giving<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block px-4 py-2 text-sm text-dt-blue font-bold bg-blue-50 rounded-md\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Governance<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute right-0 w-56 origin-top-right bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block px-4 py-2 text-sm text-gray-600 hover:text-dt-blue\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">News<\/a>\n <\/nav>\n \n \n <div class=\"ml-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>About Us<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Programs<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu p-4 space-y-3 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" onerror=\"this.src='https:\/\/placehold.co\/100x100?text=Dawah'\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p>\n <\/a>\n \n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" onerror=\"this.src='https:\/\/placehold.co\/100x100?text=Economy'\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p>\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-dt-blue font-bold py-4 px-6 focus:outline-none bg-blue-50\/50\">\n <span>Giving<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Palestine Relief<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Governance<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform rotate-180 text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\" style=\"max-height: 500px;\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"block text-gray-700 hover:text-dt-blue font-medium py-4 px-6 border-b border-gray-100\">News & Stories<\/a>\n <div class=\"p-6\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section id=\"hero-section\" class=\"relative text-white min-h-screen flex items-center justify-center overflow-hidden bg-center hero-bg-animate\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1593113598332-cd288d649414?q=80&w=2070&auto=format&fit=crop');\">\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/70 via-black\/40 to-transparent z-10\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-20 flex flex-col items-center pt-20\">\n <div class=\"text-center w-full max-w-4xl mb-10\" data-aos=\"fade-up\">\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-4 leading-tight tracking-tight drop-shadow-lg\">Unlock Blessings Through Sadaqah<\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 max-w-3xl mx-auto\">Every gift, no matter how small, has the power to change lives and weigh heavily on our scales of good deeds.<\/p>\n <\/div>\n \n \n <div id=\"donation-form\" class=\"w-full max-w-lg bg-white\/10 backdrop-blur-md rounded-2xl shadow-2xl p-6 md:p-8 border border-white\/20\" data-aos=\"fade-up\" data-aos-delay=\"200\">\n <h2 class=\"text-2xl font-bold text-white text-center mb-6\">Sadaqah Donation Form<\/h2>\n <div class=\"space-y-6\">\n <div class=\"space-y-4\">\n <div>\n <label for=\"donor-name\" class=\"block text-sm font-medium text-gray-200 mb-2\">Full Name<\/label>\n <input type=\"text\" id=\"donor-name\" placeholder=\"Servant of Allah\" class=\"w-full bg-white\/10 border-white\/30 text-white placeholder-gray-300 rounded-lg py-3 px-4 focus:border-dt-yellow focus:ring-1 focus:ring-dt-yellow transition-all outline-none\">\n <\/div>\n <div>\n <label for=\"donor-email\" class=\"block text-sm font-medium text-gray-200 mb-2\">Email<\/label>\n <input type=\"email\" id=\"donor-email\" placeholder=\"email@example.com\" class=\"w-full bg-white\/10 border-white\/30 text-white placeholder-gray-300 rounded-lg py-3 px-4 focus:border-dt-yellow focus:ring-1 focus:ring-dt-yellow transition-all outline-none\">\n <\/div>\n <\/div>\n\n <div class=\"pt-2 space-y-4\">\n <button id=\"proceedToPaymentButton\" class=\"w-full inline-block bg-dt-yellow text-dt-blue font-bold py-3 px-10 rounded-full text-lg hover:bg-opacity-90 transition-transform transform hover:scale-105 shadow-lg\">\n Proceed to Payment\n <\/button>\n <button id=\"openWiseModalBtn\" class=\"mt-4 w-full bg-white text-gray-800 font-bold py-3 px-6 rounded-full hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg flex items-center justify-center text-lg\">\n <i class=\"fas fa-globe mr-3\"><\/i>\n Complete Payment via Wise\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 w-1\/2 h-full bg-gray-50 -z-10 skew-x-12 origin-top\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n <div data-aos=\"fade-right\">\n <h2 class=\"text-3xl font-bold text-dt-blue mb-6 leading-snug\">The Virtues of Sadaqah: The Best Investment for This Life and the Hereafter<\/h2>\n <div class=\"space-y-6 text-gray-600 leading-relaxed\">\n <p>Sadaqah is a proof of a servant’s faith and obedience to Allah SWT. It is not merely giving away a portion of wealth, but also purifying the soul, repelling calamities, and multiplying sustenance. Scholars and Sheikhs constantly remind us of the extraordinary power of charity.<\/p>\n <div class=\"quote-block p-6 rounded-lg\">\n <p class=\"font-lora italic text-lg text-gray-800\">“Heal your sick with charity. Fortify your wealth with zakat. And prepare for the coming of calamities with supplication.”<\/p>\n <p class=\"mt-3 font-semibold text-right text-sm text-dt-blue\">– Hadith reported by Al-Bayhaqi & At-Tabarani<\/p>\n <\/div>\n <p>Every dollar we spend in the way of Allah will be a witness and a helper for us on the Day of Judgment.<\/p>\n <\/div>\n <\/div>\n <div data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"bg-white p-8 rounded-2xl shadow-xl border border-gray-100\">\n <h3 class=\"text-2xl font-bold text-dt-blue mb-6 text-center\">Allah’s Promise<\/h3>\n <div class=\"text-center mb-6\">\n <p class=\"font-lora text-2xl md:text-3xl text-center leading-relaxed arabic-text text-gray-800 mb-4\">\u0645\u064e\u062b\u064e\u0644\u064f \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0652\u0646\u064e \u064a\u064f\u0646\u0652\u0641\u0650\u0642\u064f\u0648\u0652\u0646\u064e \u0627\u064e\u0645\u0652\u0648\u064e\u0627\u0644\u064e\u0647\u064f\u0645\u0652 \u0641\u0650\u064a\u0652 \u0633\u064e\u0628\u0650\u064a\u0652\u0644\u0650 \u0627\u0644\u0644\u0651\u0670\u0647\u0650 \u0643\u064e\u0645\u064e\u062b\u064e\u0644\u0650 \u062d\u064e\u0628\u064e\u0651\u0629\u064d \u0627\u064e\u0646\u0652\u06e2\u0628\u064e\u062a\u064e\u062a\u0652 \u0633\u064e\u0628\u0652\u0639\u064e \u0633\u064e\u0646\u064e\u0627\u0628\u0650\u0644\u064e \u0641\u0650\u064a\u0652 \u0643\u064f\u0644\u0650\u0651 \u0633\u064f\u0646\u0652\u06e2\u0628\u064f\u0644\u064e\u0629\u064d \u0645\u0650\u0651\u0627\u0626\u064e\u0629\u064f \u062d\u064e\u0628\u064e\u0651\u0629\u064d<\/p>\n <\/div>\n <p class=\"text-gray-600 italic text-center text-sm leading-relaxed\">“The example of those who spend their wealth in the way of Allah is like a seed [of grain] which grows seven spikes; in each spike is a hundred grains. And Allah multiplies [His reward] for whom He wills. And Allah is all-Encompassing and Knowing.”<\/p>\n <p class=\"mt-4 font-bold text-center text-dt-yellow text-sm\">– The Holy Qur’an, Al-Baqarah: 261<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"campaigns\" class=\"py-16 lg:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Choose Your Sadaqah Program<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Channel your sadaqah through our meaningful programs to create the maximum impact.<\/p>\n <\/div>\n \n \n <div id=\"campaign-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <\/div>\n\n \n <div id=\"loading-indicator\" class=\"text-center py-12\">\n <div class=\"news-loader\"><\/div>\n <p class=\"text-gray-500 mt-2\">Loading Programs…<\/p>\n <\/div>\n \n \n <div id=\"load-more-container\" class=\"text-center mt-12\">\n \n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed\">A globally trusted charity empowering communities and spreading goodness through sustainable programs in education, health, economy, and humanitarian aid.<\/p>\n <div class=\"mt-4 text-xs text-gray-500 space-y-2\">\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>TR:<\/strong> K\u00fct\u00fck No: 34-285-124<\/p>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Our Reports<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors duration-300\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1 mr-3 text-dt-yellow\"><\/i>\n <span>Jl. Gegerkalong Girang No.32, Bandung, Jawa Barat 40153<\/span>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i>\n <a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow transition-colors\">hello@dtpeduli.org<\/a>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i>\n <span>+62 813-1712-1712<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"text-xs text-gray-500\">Subscribe to our newsletter for updates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\">\n <div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">\n © 2025 DT Peduli. All Rights Reserved.\n <\/div>\n <\/div>\n <\/footer>\n \n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n \n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1946\/1946436.png\" alt=\"Home\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\"> \n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Home<\/span>\n <\/a>\n\n \n <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3063\/3063822.png\" alt=\"Services\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Services<\/span>\n <\/button>\n\n \n <button id=\"quickDonateButton\" class=\"relative -top-6 group focus:outline-none tap-highlight-transparent\">\n <div class=\"bg-gradient-to-br from-dt-yellow to-orange-400 rounded-full p-4 shadow-xl border-4 border-white\/80 transform transition-transform group-hover:scale-105 group-active:scale-95\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z\" clip-rule=\"evenodd\" \/><\/svg>\n <\/div>\n <span class=\"absolute -bottom-5 left-1\/2 transform -translate-x-1\/2 text-[10px] font-bold text-dt-blue whitespace-nowrap\">Donate<\/span>\n <\/button>\n \n \n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1077\/1077114.png\" alt=\"Profile\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Profile<\/span>\n <\/a>\n \n <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2976\/2976215.png\" alt=\"Menu\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Menu<\/span>\n <\/button>\n <\/nav>\n \n \n <div id=\"quickDonateSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up max-h-[85vh] overflow-y-auto\">\n <div class=\"flex justify-between items-center mb-6 sticky top-0 bg-white pb-2 border-b border-gray-100\">\n <div>\n <h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3>\n <p class=\"text-xs text-gray-500\">Select a category to help<\/p>\n <\/div>\n <button id=\"closeQuickDonate\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800 hover:bg-gray-200\">×<\/button>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb0<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Maal<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-bold text-dt-blue text-sm\">Sadaqah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf72<\/span><span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span><\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p><p class=\"text-xs text-gray-500\">Chat on WhatsApp<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p><p class=\"text-xs text-gray-500\">Direct line assistance<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-red-50 border border-red-100 hover:bg-red-100\">\n <i class=\"fas fa-exclamation-circle text-2xl text-red-500 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Complaint Service<\/p><p class=\"text-xs text-gray-500\">Report an issue<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"paymentModalContent\" class=\"modal-content bg-white rounded-xl shadow-2xl w-full max-w-md relative transform scale-95 opacity-0 transition-all duration-300\">\n <button id=\"closeModalButton\" class=\"absolute -top-3 -right-3 bg-white rounded-full h-8 w-8 flex items-center justify-center text-gray-600 hover:text-black hover:scale-110 transition-transform focus:outline-none shadow-lg\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200\"><h3 class=\"text-xl font-bold text-dt-blue text-center\">Sadaqah Payment<\/h3><\/div>\n <div class=\"p-6\">\n <div id=\"paymattic-form-container\" class=\"bg-gray-100 border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_377\">\n <form data-wpf_form_id='377' wpf_form_instance='wpf_form_instance_377_1' class='wpf_form wpf_form_instance_377_1 wpf_strip_default_style wpf_form_id_377 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_377' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__377__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"377\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"207\">\n <div data-element_type=\"customer_name\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_customer_name\" >Your Name <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_name\" condition_id=\"customer_name\" placeholder=\"Name\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_customer_name\" required=\"1\" \/>\n <\/div>\n <\/div>\n <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div data-element_type=\"customer_email\"\n class=\"wpf_form_group wpf_item_email\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_customer_email\" >Email Address <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_email\" condition_id=\"customer_email\" placeholder=\"Email Address\" value=\"\" type=\"email\" class=\"wpf_form_control wpf_customer_email\" id=\"wpf_input_377_customer_email\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <p id=\"error_phone_code_wpf_input_377_phone_input\" hidden\n name=\"Phone Number\" data-element_type=\"wpf_phone_input_error\">\n <\/p>\n\n <div field_name=\"phone\" style=\"display: block\"\n data-element_type=\"phone\"\n class=\"wpf_form_group wpf_item_tel\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_phone\" >Phone Number<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input style=\"padding-left: 65px;\" value=\"\" class=\"wpf_form_control\" type=\"tel\" id=\"phone_code_wpf_input_377_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_377_phone_input_hidden\" \/>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_address_wrapper\"><label condition_id=address_input class=\"wpf_address_heading\">Address<\/label><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_address_line_1_\" >Address Line 1 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[address_line_1]\" condition_id=\"address_line_1\" placeholder=\"Address Line 1\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_address_line_1_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_address_line_2_\" >Address Line 2<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[address_line_2]\" condition_id=\"address_line_2\" placeholder=\"Address Line 2\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_address_line_2_\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_city_\" >City<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[city]\" condition_id=\"city\" placeholder=\"City\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_city_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_state_\" >State <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[state]\" condition_id=\"state\" placeholder=\"State\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_state_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_zip_code_\" >ZIP Code<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[zip_code]\" condition_id=\"zip_code\" placeholder=\"ZIP Code\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_zip_code_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div style=\"display : block\" id=\"wpf_address_input\" data-element_type=\"address_input\" class=\"wpf_form_group wpf_item_select\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_address_input_country_\" >Country <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <select data-required=\"yes\" name=\"address_input[country]\" class=\"wpf_form_control\" id=\"wpf_input_377_address_input_country_\" condition_id=\"country\" required=\"1\" >\n <option data-type=\"placeholder\" value= >Select Country<\/option>\n <option value=\"AF\" >Afghanistan<\/option>\n <option value=\"AX\" >\u00c5land Islands<\/option>\n <option value=\"AL\" >Albania<\/option>\n <option value=\"DZ\" >Algeria<\/option>\n <option value=\"AS\" >American Samoa<\/option>\n <option value=\"AD\" >Andorra<\/option>\n <option value=\"AO\" >Angola<\/option>\n <option value=\"AI\" >Anguilla<\/option>\n <option value=\"AQ\" >Antarctica<\/option>\n <option value=\"AG\" >Antigua and Barbuda<\/option>\n <option value=\"AR\" >Argentina<\/option>\n <option value=\"AM\" >Armenia<\/option>\n <option value=\"AW\" >Aruba<\/option>\n <option value=\"AU\" >Australia<\/option>\n <option value=\"AT\" >Austria<\/option>\n <option value=\"AZ\" >Azerbaijan<\/option>\n <option value=\"BS\" >Bahamas<\/option>\n <option value=\"BH\" >Bahrain<\/option>\n <option value=\"BD\" >Bangladesh<\/option>\n <option value=\"BB\" >Barbados<\/option>\n <option value=\"BY\" >Belarus<\/option>\n <option value=\"BE\" >Belgium<\/option>\n <option value=\"PW\" >Belau<\/option>\n <option value=\"BZ\" >Belize<\/option>\n <option value=\"BJ\" >Benin<\/option>\n <option value=\"BM\" >Bermuda<\/option>\n <option value=\"BT\" >Bhutan<\/option>\n <option value=\"BO\" >Bolivia<\/option>\n <option value=\"BQ\" >Bonaire, Saint Eustatius and Saba<\/option>\n <option value=\"BA\" >Bosnia and Herzegovina<\/option>\n <option value=\"BW\" >Botswana<\/option>\n <option value=\"BV\" >Bouvet Island<\/option>\n <option value=\"BR\" >Brazil<\/option>\n <option value=\"IO\" >British Indian Ocean Territory<\/option>\n <option value=\"VG\" >British Virgin Islands<\/option>\n <option value=\"BN\" >Brunei<\/option>\n <option value=\"BG\" >Bulgaria<\/option>\n <option value=\"BF\" >Burkina Faso<\/option>\n <option value=\"BI\" >Burundi<\/option>\n <option value=\"KH\" >Cambodia<\/option>\n <option value=\"CM\" >Cameroon<\/option>\n <option value=\"CA\" >Canada<\/option>\n <option value=\"CV\" >Cape Verde<\/option>\n <option value=\"KY\" >Cayman Islands<\/option>\n <option value=\"CF\" >Central African Republic<\/option>\n <option value=\"TD\" >Chad<\/option>\n <option value=\"CL\" >Chile<\/option>\n <option value=\"CN\" >China<\/option>\n <option value=\"CX\" >Christmas Island<\/option>\n <option value=\"CC\" >Cocos (Keeling) Islands<\/option>\n <option value=\"CO\" >Colombia<\/option>\n <option value=\"KM\" >Comoros<\/option>\n <option value=\"CG\" >Congo (Brazzaville)<\/option>\n <option value=\"CD\" >Congo (Kinshasa)<\/option>\n <option value=\"CK\" >Cook Islands<\/option>\n <option value=\"CR\" >Costa Rica<\/option>\n <option value=\"HR\" >Croatia<\/option>\n <option value=\"CU\" >Cuba<\/option>\n <option value=\"CW\" >Curaçao<\/option>\n <option value=\"CY\" >Cyprus<\/option>\n <option value=\"CZ\" >Czech Republic<\/option>\n <option value=\"DK\" >Denmark<\/option>\n <option value=\"DJ\" >Djibouti<\/option>\n <option value=\"DM\" >Dominica<\/option>\n <option value=\"DO\" >Dominican Republic<\/option>\n <option value=\"EC\" >Ecuador<\/option>\n <option value=\"EG\" >Egypt<\/option>\n <option value=\"SV\" >El Salvador<\/option>\n <option value=\"GQ\" >Equatorial Guinea<\/option>\n <option value=\"ER\" >Eritrea<\/option>\n <option value=\"EE\" >Estonia<\/option>\n <option value=\"ET\" >Ethiopia<\/option>\n <option value=\"FK\" >Falkland Islands<\/option>\n <option value=\"FO\" >Faroe Islands<\/option>\n <option value=\"FJ\" >Fiji<\/option>\n <option value=\"FI\" >Finland<\/option>\n <option value=\"FR\" >France<\/option>\n <option value=\"GF\" >French Guiana<\/option>\n <option value=\"PF\" >French Polynesia<\/option>\n <option value=\"TF\" >French Southern Territories<\/option>\n <option value=\"GA\" >Gabon<\/option>\n <option value=\"GM\" >Gambia<\/option>\n <option value=\"GE\" >Georgia<\/option>\n <option value=\"DE\" >Germany<\/option>\n <option value=\"GH\" >Ghana<\/option>\n <option value=\"GI\" >Gibraltar<\/option>\n <option value=\"GR\" >Greece<\/option>\n <option value=\"GL\" >Greenland<\/option>\n <option value=\"GD\" >Grenada<\/option>\n <option value=\"GP\" >Guadeloupe<\/option>\n <option value=\"GU\" >Guam<\/option>\n <option value=\"GT\" >Guatemala<\/option>\n <option value=\"GG\" >Guernsey<\/option>\n <option value=\"GN\" >Guinea<\/option>\n <option value=\"GW\" >Guinea-Bissau<\/option>\n <option value=\"GY\" >Guyana<\/option>\n <option value=\"HT\" >Haiti<\/option>\n <option value=\"HM\" >Heard Island and McDonald Islands<\/option>\n <option value=\"HN\" >Honduras<\/option>\n <option value=\"HK\" >Hong Kong<\/option>\n <option value=\"HU\" >Hungary<\/option>\n <option value=\"IS\" >Iceland<\/option>\n <option value=\"IN\" >India<\/option>\n <option value=\"ID\" >Indonesia<\/option>\n <option value=\"IR\" >Iran<\/option>\n <option value=\"IQ\" >Iraq<\/option>\n <option value=\"IE\" >Ireland<\/option>\n <option value=\"IM\" >Isle of Man<\/option>\n <option value=\"IL\" >Israel<\/option>\n <option value=\"IT\" >Italy<\/option>\n <option value=\"CI\" >Ivory Coast<\/option>\n <option value=\"JM\" >Jamaica<\/option>\n <option value=\"JP\" >Japan<\/option>\n <option value=\"JE\" >Jersey<\/option>\n <option value=\"JO\" >Jordan<\/option>\n <option value=\"KZ\" >Kazakhstan<\/option>\n <option value=\"KE\" >Kenya<\/option>\n <option value=\"KI\" >Kiribati<\/option>\n <option value=\"KW\" >Kuwait<\/option>\n <option value=\"KG\" >Kyrgyzstan<\/option>\n <option value=\"LA\" >Laos<\/option>\n <option value=\"LV\" >Latvia<\/option>\n <option value=\"LB\" >Lebanon<\/option>\n <option value=\"LS\" >Lesotho<\/option>\n <option value=\"LR\" >Liberia<\/option>\n <option value=\"LY\" >Libya<\/option>\n <option value=\"LI\" >Liechtenstein<\/option>\n <option value=\"LT\" >Lithuania<\/option>\n <option value=\"LU\" >Luxembourg<\/option>\n <option value=\"MO\" >Macao S.A.R., China<\/option>\n <option value=\"MK\" >Macedonia<\/option>\n <option value=\"MG\" >Madagascar<\/option>\n <option value=\"MW\" >Malawi<\/option>\n <option value=\"MY\" >Malaysia<\/option>\n <option value=\"MV\" >Maldives<\/option>\n <option value=\"ML\" >Mali<\/option>\n <option value=\"MT\" >Malta<\/option>\n <option value=\"MH\" >Marshall Islands<\/option>\n <option value=\"MQ\" >Martinique<\/option>\n <option value=\"MR\" >Mauritania<\/option>\n <option value=\"MU\" >Mauritius<\/option>\n <option value=\"YT\" >Mayotte<\/option>\n <option value=\"MX\" >Mexico<\/option>\n <option value=\"FM\" >Micronesia<\/option>\n <option value=\"MD\" >Moldova<\/option>\n <option value=\"MC\" >Monaco<\/option>\n <option value=\"MN\" >Mongolia<\/option>\n <option value=\"ME\" >Montenegro<\/option>\n <option value=\"MS\" >Montserrat<\/option>\n <option value=\"MA\" >Morocco<\/option>\n <option value=\"MZ\" >Mozambique<\/option>\n <option value=\"MM\" >Myanmar<\/option>\n <option value=\"NA\" >Namibia<\/option>\n <option value=\"NR\" >Nauru<\/option>\n <option value=\"NP\" >Nepal<\/option>\n <option value=\"NL\" >Netherlands<\/option>\n <option value=\"NC\" >New Caledonia<\/option>\n <option value=\"NZ\" >New Zealand<\/option>\n <option value=\"NI\" >Nicaragua<\/option>\n <option value=\"NE\" >Niger<\/option>\n <option value=\"NG\" >Nigeria<\/option>\n <option value=\"NU\" >Niue<\/option>\n <option value=\"NF\" >Norfolk Island<\/option>\n <option value=\"MP\" >Northern Mariana Islands<\/option>\n <option value=\"KP\" >North Korea<\/option>\n <option value=\"NO\" >Norway<\/option>\n <option value=\"OM\" >Oman<\/option>\n <option value=\"PK\" >Pakistan<\/option>\n <option value=\"PS\" >Palestinian Territory<\/option>\n <option value=\"PA\" >Panama<\/option>\n <option value=\"PG\" >Papua New Guinea<\/option>\n <option value=\"PY\" >Paraguay<\/option>\n <option value=\"PE\" >Peru<\/option>\n <option value=\"PH\" >Philippines<\/option>\n <option value=\"PN\" >Pitcairn<\/option>\n <option value=\"PL\" >Poland<\/option>\n <option value=\"PT\" >Portugal<\/option>\n <option value=\"PR\" >Puerto Rico<\/option>\n <option value=\"QA\" >Qatar<\/option>\n <option value=\"RE\" >Reunion<\/option>\n <option value=\"RO\" >Romania<\/option>\n <option value=\"RU\" >Russia<\/option>\n <option value=\"RW\" >Rwanda<\/option>\n <option value=\"BL\" >Saint Barthélemy<\/option>\n <option value=\"SH\" >Saint Helena<\/option>\n <option value=\"KN\" >Saint Kitts and Nevis<\/option>\n <option value=\"LC\" >Saint Lucia<\/option>\n <option value=\"MF\" >Saint Martin (French part)<\/option>\n <option value=\"SX\" >Saint Martin (Dutch part)<\/option>\n <option value=\"PM\" >Saint Pierre and Miquelon<\/option>\n <option value=\"VC\" >Saint Vincent and the Grenadines<\/option>\n <option value=\"SM\" >San Marino<\/option>\n <option value=\"ST\" >São Tomé and Príncipe<\/option>\n <option value=\"SA\" >Saudi Arabia<\/option>\n <option value=\"SN\" >Senegal<\/option>\n <option value=\"RS\" >Serbia<\/option>\n <option value=\"SC\" >Seychelles<\/option>\n <option value=\"SL\" >Sierra Leone<\/option>\n <option value=\"SG\" >Singapore<\/option>\n <option value=\"SK\" >Slovakia<\/option>\n <option value=\"SI\" >Slovenia<\/option>\n <option value=\"SB\" >Solomon Islands<\/option>\n <option value=\"SO\" >Somalia<\/option>\n <option value=\"ZA\" >South Africa<\/option>\n <option value=\"GS\" >South Georgia\/Sandwich Islands<\/option>\n <option value=\"KR\" >South Korea<\/option>\n <option value=\"SS\" >South Sudan<\/option>\n <option value=\"ES\" >Spain<\/option>\n <option value=\"LK\" >Sri Lanka<\/option>\n <option value=\"SD\" >Sudan<\/option>\n <option value=\"SR\" >Suriname<\/option>\n <option value=\"SJ\" >Svalbard and Jan Mayen<\/option>\n <option value=\"SZ\" >Swaziland<\/option>\n <option value=\"SE\" >Sweden<\/option>\n <option value=\"CH\" >Switzerland<\/option>\n <option value=\"SY\" >Syria<\/option>\n <option value=\"TW\" >Taiwan<\/option>\n <option value=\"TJ\" >Tajikistan<\/option>\n <option value=\"TZ\" >Tanzania<\/option>\n <option value=\"TH\" >Thailand<\/option>\n <option value=\"TL\" >Timor-Leste<\/option>\n <option value=\"TG\" >Togo<\/option>\n <option value=\"TK\" >Tokelau<\/option>\n <option value=\"TO\" >Tonga<\/option>\n <option value=\"TT\" >Trinidad and Tobago<\/option>\n <option value=\"TN\" >Tunisia<\/option>\n <option value=\"TR\" >Turkey<\/option>\n <option value=\"TM\" >Turkmenistan<\/option>\n <option value=\"TC\" >Turks and Caicos Islands<\/option>\n <option value=\"TV\" >Tuvalu<\/option>\n <option value=\"UG\" >Uganda<\/option>\n <option value=\"UA\" >Ukraine<\/option>\n <option value=\"AE\" >United Arab Emirates<\/option>\n <option value=\"GB\" >United Kingdom (UK)<\/option>\n <option value=\"US\" >United States (US)<\/option>\n <option value=\"UM\" >United States (US) Minor Outlying Islands<\/option>\n <option value=\"VI\" >United States (US) Virgin Islands<\/option>\n <option value=\"UY\" >Uruguay<\/option>\n <option value=\"UZ\" >Uzbekistan<\/option>\n <option value=\"VU\" >Vanuatu<\/option>\n <option value=\"VA\" >Vatican<\/option>\n <option value=\"VE\" >Venezuela<\/option>\n <option value=\"VN\" >Vietnam<\/option>\n <option value=\"WF\" >Wallis and Futuna<\/option>\n <option value=\"EH\" >Western Sahara<\/option>\n <option value=\"WS\" >Samoa<\/option>\n <option value=\"YE\" >Yemen<\/option>\n <option value=\"ZM\" >Zambia<\/option>\n <option value=\"ZW\" >Zimbabwe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div><\/div><\/div><input data-wpf_payment_method=\"paypal\" type=\"hidden\" name=\"__paypal_payment_gateway\" value=\"paypal\" \/> <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style=\"display : block\" data-element_type=\"currency_switcher\" data-required_element=\"select\" data-required=\"no\" data-target_element=\"currency_switcher\" required_id=\"currency_switcher\" class=\"wpf_form_group wpf_item_currency_switcher\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_currency_switcher\" >Currency Switcher Options<\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"no\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_377_currency_switcher\" >\n <option data-type=\"placeholder\" value=\"\">--Select--<\/option>\n <option value=\"USD\" data-currency=\"USD\" customname=\"United States Dollar\" >United States Dollar (USD)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\n <\/option>\n <option value=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\n <\/option>\n <option value=\"EGP\" data-currency=\"EGP\" customname=\"Egyptian Pound\" >Egyptian Pound (EGP)\n <\/option>\n <option value=\"EUR\" data-currency=\"EUR\" customname=\"Euro\" >Euro (EUR)\n <\/option>\n <option value=\"JPY\" data-currency=\"JPY\" customname=\"Japanese Yen\" >Japanese Yen (JPY)\n <\/option>\n <option value=\"MYR\" data-currency=\"MYR\" customname=\"Malaysian Ringgit\" >Malaysian Ringgit (MYR)\n <\/option>\n <option value=\"NZD\" data-currency=\"NZD\" customname=\"New Zealand Dollar\" >New Zealand Dollar (NZD)\n <\/option>\n <option value=\"QAR\" data-currency=\"QAR\" customname=\"Qatari Riyal\" >Qatari Riyal (QAR)\n <\/option>\n <option value=\"SAR\" data-currency=\"SAR\" customname=\"Saudi Riyal\" >Saudi Riyal (SAR)\n <\/option>\n <option value=\"SGD\" data-currency=\"SGD\" customname=\"Singapore Dollar\" >Singapore Dollar (SGD)\n <\/option>\n <option value=\"TRY\" data-currency=\"TRY\" customname=\"Turkish Lira\" >Turkish Lira (TRY)\n <\/option>\n <option value=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style= \"display : block\" data-element_type=\"custom_payment_input\"\n class=\"wpf_form_group wpf_item_custom_payment_input\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_377_custom_payment_input\" >Custom Payment Amount<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"no\" data-type=\"input\" name=\"custom_payment_input\" placeholder=\"\" value=\"\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" min=\"\" data-price=\"0\" id=\"wpf_input_377_custom_payment_input\" customname=\"Custom Payment Amount\" class=\"wpf_form_control wpf_custom_amount wpf_money_amount wpf_payment_item input-prepend\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n <div class=\"wpf_form_group wpf_form_submissions\" style=\"margin-top: 20px;\">\n <button id='stripe_form_submit_377' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Sadaqah<\/span>\n <span style=\"display: none;\" class=\"wpf_txt_loading\">\n Please Wait\u2026 <\/span>\n <\/button>\n <div class=\"wpf_loading_svg\">\n <svg version=\"1.1\" id=\"loader-1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"30px\" height=\"30px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\" \/>\n <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 20 20\" to=\"360 20 20\" dur=\"0.5s\" repeatCount=\"indefinite\" \/>\n <\/path>\n <\/svg>\n <\/div>\n <\/div>\n <\/form>\n <div style=\"display: none\" class=\"wpf_form_notices\"><\/div>\n <\/div>\n\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"wiseModalContent\" class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform transition-all opacity-0 -translate-y-10 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div><h2 class=\"text-2xl font-bold text-dt-blue\">Payment via Wise<\/h2><p class=\"text-gray-500 mt-1\">Complete your international payment.<\/p><\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\"><iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n\n \/\/ Header Logic\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ Mobile Menu Logic\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ Bottom Nav Logic\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n if(menuToShow && !menuToShow.classList.contains('hidden')) {\n openSubmenu(menuToShow);\n } else {\n closeSubmenu(menuToShow);\n }\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300);\n document.body.style.overflow = '';\n };\n\n \/\/ Mega Menu Desktop Hover\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ Payment Modal Logic\n const paymentModal = document.getElementById('paymentModal');\n const paymentModalContent = document.getElementById('paymentModalContent');\n const proceedButton = document.getElementById('proceedToPaymentButton');\n const closeButton = document.getElementById('closeModalButton');\n\n const openModal = () => {\n if (!paymentModal || !paymentModalContent) return;\n document.body.style.overflow = 'hidden';\n paymentModal.classList.remove('hidden');\n setTimeout(() => {\n paymentModal.classList.remove('opacity-0', 'pointer-events-none');\n paymentModalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n };\n\n const closeModal = () => {\n if (!paymentModal || !paymentModalContent) return;\n document.body.style.overflow = '';\n paymentModal.classList.add('opacity-0');\n paymentModalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n paymentModal.classList.add('hidden', 'pointer-events-none');\n }, 300);\n };\n\n if (proceedButton) proceedButton.addEventListener('click', openModal);\n if (closeButton) closeButton.addEventListener('click', closeModal);\n if (paymentModal) paymentModal.addEventListener('click', (event) => { if (event.target === paymentModal) closeModal(); });\n\n \/\/ Wise Modal Logic\n const wiseModal = document.getElementById('wisePaymentModal');\n const wiseModalContent = document.getElementById('wiseModalContent');\n const openWiseBtn = document.getElementById('openWiseModalBtn');\n const closeWiseBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n\n const openWise = () => {\n if (!wiseModal) return;\n wiseIframe.src = 'https:\/\/dtpeduli.com\/donate-via-wise\/';\n document.body.style.overflow = 'hidden';\n wiseModal.classList.remove('hidden');\n setTimeout(() => {\n wiseModal.classList.remove('opacity-0', 'pointer-events-none');\n wiseModalContent.classList.remove('opacity-0', '-translate-y-10');\n }, 10);\n };\n\n const closeWise = () => {\n if (!wiseModal) return;\n document.body.style.overflow = '';\n wiseModalContent.classList.add('opacity-0', '-translate-y-10');\n wiseModal.classList.add('opacity-0');\n setTimeout(() => {\n wiseModal.classList.add('hidden', 'pointer-events-none');\n wiseIframe.src = '';\n }, 300);\n };\n\n if (openWiseBtn) openWiseBtn.addEventListener('click', openWise);\n if (closeWiseBtn) closeWiseBtn.addEventListener('click', closeWise);\n if (wiseModal) wiseModal.addEventListener('click', (e) => { if(e.target === wiseModal) closeWise(); });\n\n \/\/ API Fetch Campaigns\n const campaignGrid = document.getElementById('campaign-grid');\n const loadingIndicator = document.getElementById('loading-indicator');\n const loadMoreContainer = document.getElementById('load-more-container');\n let currentPage = 1;\n let isLoading = false;\n const perPage = 4;\n\n async function fetchCampaigns() {\n if (isLoading) return;\n isLoading = true;\n if (currentPage === 1) loadingIndicator.style.display = 'block';\n\n try {\n \/\/ Using fallback mock data for robustness in preview\n \/\/ Original URL: `https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=${perPage}&page=${currentPage}`\n const response = await fetch(`https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=${perPage}&page=${currentPage}`);\n if (!response.ok) throw new Error('Network response was not ok');\n const posts = await response.json();\n \n if (currentPage === 1) loadingIndicator.style.display = 'none';\n \n posts.forEach((post, index) => {\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/placehold.co\/600x400\/e2e8f0\/adb5bd?text=DT+Peduli';\n const cardHTML = `\n <div class=\"campaign-card bg-white rounded-xl shadow-md overflow-hidden transition-all transform hover:-translate-y-1 hover:shadow-xl\" data-aos=\"fade-up\" data-aos-delay=\"${index * 100}\">\n <a href=\"${post.link}\" target=\"_blank\" class=\"block\">\n <div class=\"overflow-hidden h-48\">\n <img decoding=\"async\" class=\"campaign-image w-full h-full object-cover transition-transform duration-300\" src=\"${imageUrl}\" alt=\"${post.title.rendered}\">\n <\/div>\n <div class=\"p-5\">\n <h3 class=\"font-bold text-gray-800 text-lg leading-tight h-14 overflow-hidden line-clamp-2\">${post.title.rendered}<\/h3>\n <div class=\"campaign-excerpt text-gray-600 text-sm mt-2 h-20 overflow-hidden line-clamp-3\">${post.excerpt.rendered}<\/div>\n <div class=\"mt-4\"><span class=\"bg-dt-yellow text-white font-bold py-2 px-5 rounded-full inline-block text-sm hover:bg-yellow-500 transition-colors\">Learn More<\/span><\/div>\n <\/div>\n <\/a>\n <\/div>`;\n campaignGrid.insertAdjacentHTML('beforeend', cardHTML);\n });\n\n if (!document.getElementById('load-more-btn')) {\n const loadMoreBtn = document.createElement('button');\n loadMoreBtn.id = 'load-more-btn';\n loadMoreBtn.className = 'bg-dt-blue text-white font-bold py-3 px-8 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105';\n loadMoreBtn.innerText = 'Load More Programs';\n loadMoreBtn.onclick = () => { currentPage++; fetchCampaigns(); };\n loadMoreContainer.appendChild(loadMoreBtn);\n }\n } catch (error) {\n console.error(\"Failed to fetch campaigns:\", error);\n \/\/ Mock data injection if API fails\n if(currentPage === 1) {\n loadingIndicator.style.display = 'none';\n campaignGrid.innerHTML = '<div class=\"col-span-4 text-center p-8\"><p class=\"text-gray-500 mb-4\">Unable to load campaigns directly. Here is a preview.<\/p><\/div>';\n \/\/ You can inject static mock cards here if desired\n }\n } finally {\n isLoading = false;\n }\n }\n fetchCampaigns();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Sadaqah – DT Peduli | Spreading Goodness Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-207","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":26,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":554,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/207\/revisions\/554"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}