Zakat Fitr | DT Peduli<\/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 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 .ring-dt-yellow { --tw-ring-color: #ffaf23; }\n\n \/* 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 \/* Hero Animation *\/\n @keyframes kenburns {\n 0% { transform: scale(1); }\n 100% { transform: scale(1.15); }\n }\n .hero-slide.active {\n animation: kenburns 20s ease-out forwards;\n }\n .hero-slide {\n transition: opacity 1.5s ease-in-out;\n }\n\n \/* 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%; \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 \/* 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; \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 \n \/* Custom Loader *\/\n .loader {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #00358f;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n display: inline-block;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n \/* Form Inputs *\/\n .input-group { position: relative; }\n .input-group .currency-symbol {\n position: absolute;\n top: 50%;\n left: 0.75rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: #6b7280;\n font-weight: 600;\n font-size: 0.875rem;\n }\n .input-group input { padding-left: 2.5rem; }\n \n \/* Calculator Scrollbar *\/\n .calc-scroll::-webkit-scrollbar { width: 6px; }\n .calc-scroll::-webkit-scrollbar-track { background: #f1f1f1; }\n .calc-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }\n .calc-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n\n \/* Modal Transition *\/\n #paymentModal {\n transition: opacity 0.3s ease-out;\n }\n #paymentModalContent {\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\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 <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 <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 <\/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 <\/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 <\/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 <\/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 <\/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-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">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 <button onclick=\"openPaymentModal()\" 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 Now\n <\/button>\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 pt-20\">\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\"><span>About Us<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/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\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Official Address<\/a>\n <\/div>\n <\/div>\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\"><span>Programs<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Da’wah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Economy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Education<\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Health<\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Social Humanitarian<\/a>\n <\/div>\n <\/div>\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\"><span>Giving<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/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\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Palestine Relief<\/a>\n <\/div>\n <\/div>\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\"><span>Governance<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Audit Result<\/a>\n <\/div>\n <\/div>\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 <button onclick=\"openPaymentModal()\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/button>\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-gray-900\">\n \n <div id=\"hero-slider\" class=\"absolute inset-0 w-full h-full z-0\">\n <div class=\"hero-slide active absolute inset-0 w-full h-full bg-cover bg-center\" style=\"background-image: url('https:\/\/dtpeduli.com\/donate\/wp-content\/uploads\/2025\/07\/tents.jpg'); opacity: 1;\"><\/div>\n <\/div>\n\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent z-10 pointer-events-none\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-20 pt-24 pb-12 h-full flex flex-col lg:flex-row items-center justify-center lg:justify-between gap-12\">\n \n \n <div class=\"text-center lg:text-left max-w-2xl\" data-aos=\"fade-right\">\n <div id=\"hero-text-content\">\n <span class=\"inline-block bg-dt-yellow text-white text-xs font-bold px-3 py-1 rounded-full mb-4 shadow-sm uppercase tracking-wide\">Zakat Fitr<\/span>\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl\">\n Purify Your Fast & Share the Joy\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed\">\n Zakat Fitr is a beautiful obligation that cleanses us and ensures no one is left hungry on the day of Eid. Calculate and pay yours easily.\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"#understanding-zakat\" class=\"inline-block border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-dt-blue transition-all transform hover:scale-105\">\n Read More\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-md bg-white\/95 backdrop-blur-xl rounded-3xl shadow-2xl p-6 md:p-8 border border-white\/20 text-gray-800 calc-scroll overflow-y-auto max-h-[80vh]\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"flex items-center justify-between mb-6 border-b pb-4 border-gray-200\">\n <h2 class=\"text-2xl font-bold text-dt-blue\">Zakat Fitr Calculator<\/h2>\n <i class=\"fas fa-calculator text-dt-yellow text-2xl\"><\/i>\n <\/div>\n \n <div class=\"space-y-5\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Select Currency<\/label>\n <select id=\"currency\" class=\"w-full p-3 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\"><\/select>\n <\/div>\n \n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Price per kg of Staple Food<\/label>\n <div class=\"input-group\">\n <span class=\"currency-symbol\" id=\"staple-currency-symbol\">$<\/span>\n <input type=\"number\" id=\"stapleFoodPrice\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"0.00\" step=\"0.01\">\n <\/div>\n <p class=\"text-xs text-gray-400 mt-1\">Enter local price for 1kg of rice\/staple.<\/p>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Number of People<\/label>\n <input type=\"number\" id=\"peopleCount\" value=\"1\" min=\"1\" class=\"w-full p-3 border border-gray-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-dt-blue\">\n <\/div>\n \n <div class=\"bg-blue-50 rounded-lg p-3 text-xs text-gray-600\">\n <strong>Amount per person:<\/strong> 2.5 kg of staple food.\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-900 text-white rounded-xl p-5 text-center mt-6 mb-4\">\n <p class=\"text-xs text-gray-400 uppercase mb-1\">Your Zakat Fitr Obligation<\/p>\n <p id=\"zakatResult\" class=\"text-3xl font-bold text-dt-yellow\">0.00<\/p>\n <p id=\"zakatMessage\" class=\"text-xs text-gray-400 mt-1\">Enter details to calculate<\/p>\n <\/div>\n\n <button id=\"donateZakatButton\" disabled class=\"w-full bg-dt-yellow text-white font-bold py-3 px-6 rounded-lg hover:bg-yellow-500 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed\">\n Donate Now\n <\/button>\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"understanding-zakat\" class=\"py-16 lg:py-24 bg-white relative overflow-hidden\">\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 <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-start\">\n <div data-aos=\"fade-right\">\n <h2 class=\"text-3xl font-bold text-dt-blue mb-6 leading-snug\">Understanding Zakat Fitr<\/h2>\n <div class=\"space-y-6 text-gray-600 leading-relaxed\">\n <p>Zakat al-Fitr (or Fitrah) is a special charity paid by all Muslims at the end of the fasting month of Ramadhan. It is an obligation on every Muslim, young and old, male and female, as long as they have the means to do so.<\/p>\n \n <h3 class=\"text-xl font-bold text-dt-blue mt-8 mb-4\">The Obligation and Purpose<\/h3>\n <p>Based on the hadith narrated by Ibn ‘Umar, the Prophet Muhammad (peace be upon him) enjoined the payment of one Sa’ of dates or one Sa’ of barley as Zakat al-Fitr. Its primary purpose is twofold: to purify the fasting person from any indecent act or speech and to help the poor and needy, ensuring they can also celebrate Eid al-Fitr joyfully.<\/p>\n <\/div>\n <\/div>\n <div class=\"space-y-6\" 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=\"font-bold text-xl text-dt-blue mb-4\">Scholarly Consensus<\/h3>\n <ul class=\"space-y-3 text-sm text-gray-700\">\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Amount:<\/strong> Equivalent to approximately <strong>2.5 kg to 3.0 kg<\/strong> of staple food.<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Type:<\/strong> Traditionally paid as staple food (e.g., rice, wheat, dates).<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Paying in Cash:<\/strong> Many contemporary scholars permit paying the monetary equivalent, making it easier for recipients to buy what they need.<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Timing:<\/strong> Must be paid before the Eid prayer.<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue text-white\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16\">\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 <h3 class=\"text-2xl font-bold mb-4 text-white\">DT Peduli<\/h3>\n <p class=\"text-gray-300 text-sm leading-relaxed mb-4\">A globally trusted charity empowering communities.<\/p>\n <div class=\"text-xs text-gray-400 space-y-1\">\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 <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm text-gray-300\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors\">About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors\">News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors\">Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"hover:text-dt-yellow transition-colors\">Our Reports<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-300 text-sm\">\n <li class=\"flex items-start\"><i class=\"fas fa-map-marker-alt mr-3 mt-1 text-dt-yellow\"><\/i><span>Jl. Gegerkalong Girang No.32, Bandung<\/span><\/li>\n <li class=\"flex items-center\"><i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i><a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow\">hello@dtpeduli.org<\/a><\/li>\n <li class=\"flex items-center\"><i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i><span>+62 813-1712-1712<\/span><\/li>\n <\/ul>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"#\" 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=\"#\" 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=\"#\" 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 <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\"><div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">© 2025 DT Peduli. All Rights Reserved.<\/div><\/div>\n <\/footer>\n \n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/90 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-40 pb-2 pt-1 border-t border-white\/50\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <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 <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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><h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3><p class=\"text-xs text-gray-500\">Select a category to help<\/p><\/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-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-bold text-dt-blue 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-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-semibold text-gray-700 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 \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-70 z-[100] flex justify-center items-center p-4 opacity-0 pointer-events-none transition-all duration-300\">\n <div id=\"paymentModalContent\" class=\"bg-white rounded-xl shadow-2xl w-full max-w-lg relative transform scale-95 transition-all duration-300 flex flex-col max-h-[90vh]\">\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-red-500 shadow-lg z-10\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200 text-center bg-gray-50 rounded-t-xl flex-shrink-0\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Pay Your Zakat Fitr<\/h3>\n <p id=\"modal-subtitle\" class=\"text-gray-500 text-sm mt-1\">Purify your wealth<\/p>\n <\/div>\n <div class=\"p-6 overflow-y-auto\">\n <div class=\"bg-gray-50 p-6 rounded-lg border-2 border-dashed border-gray-300 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">Secure Payment Form<\/p>\n <code 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_563\">\n <form data-wpf_form_id='563' wpf_form_instance='wpf_form_instance_563_1' class='wpf_form wpf_form_instance_563_1 wpf_strip_default_style wpf_form_id_563 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wppayform_has_payment wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_563' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__563__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"563\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"193\">\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_563_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_563_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_563_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_563_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_563_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_563_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_563_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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> \n <div style = \"display : \" data-element_type=\"donation_item\" data-required_element=\"radio\" data-required=\"yes\" data-target_element=\"donation_item\" class=\"wpf_form_group wpf_item_donation_item\" >\n\n <div class=\"donation-wrapper \">\n <div class=\"wpf_donation_status\">\n <div class=\"raised_amount\">\n <div class=\"number\" name=\"wpf_form_id_563_raised_donation\" data-raised=\"18000\">\n $180 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 4 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_563_goal_amount\" data-goal=\"100000\">\n $1,000 <\/div>\n <div class=\"text\">Goal<\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_donation_bar_wrapper\">\n <div class=\"wpf_donation_fields_bar\">\n <div\n class=\"wpf_bar\"\n style=\"width: 18%;\"\n name=\"wpf_form_id_563_bar\"\n data-percentage=\"18\"\n >\n 18% <\/div>\n <\/div>\n <\/div>\n \n <div class=\"wpf_donation_fields_wrapper\" >\n <div class=\"wpf_input_content wpf_donation_controls_custom\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_563_donation_item\" >Donation Progress Item <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\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=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_563_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" disabled=\"1\" \/>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_563_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" style=\"display: none\" \/>\n <\/div>\n <\/div>\n <br\/>\n <div class=\"wpf_input_content wpf_donation_controls_radio\">\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_0\" type=\"radio\" data-price=\"1000\" base-price=\"1000\" name=\"donation_item\" id=\"donation_item_0_563\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_563\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $10 <\/span>\n <meta itemprop=\"price\" content=\"10\">\n <\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_1\" type=\"radio\" data-price=\"2000\" base-price=\"2000\" name=\"donation_item\" id=\"donation_item_1_563\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_563\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $20 <\/span>\n <meta itemprop=\"price\" content=\"20\">\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <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=\"yes\" 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 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"yes\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_563_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=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <option value=\"ANG\" data-currency=\"ANG\" customname=\"Netherlands Antillean Gulden\" >Netherlands Antillean Gulden (ANG)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\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=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\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 <\/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_563_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_563_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_563' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Zakat Now<\/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 <\/code>\n <div class=\"animate-pulse flex flex-col items-center mt-4\">\n <div class=\"h-10 w-full bg-gray-200 rounded mb-4\"><\/div>\n <div class=\"h-10 w-full bg-gray-200 rounded mb-4\"><\/div>\n <div class=\"h-12 w-full bg-dt-yellow rounded mt-2 opacity-50\"><\/div>\n <\/div>\n <\/div>\n <\/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 });\n\n \/\/ --- Header Logic ---\n const header = document.getElementById('mainHeader');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n\n \/\/ --- Mobile Menu ---\n const mobileMenuBtn = document.getElementById('mobileMenuButton');\n const mobileMenu = document.getElementById('mobileMenu');\n const menuOpenIcon = document.getElementById('menu-open-icon');\n const menuCloseIcon = document.getElementById('menu-close-icon');\n\n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n if (isOpen) {\n document.body.style.overflow = '';\n menuOpenIcon.classList.remove('hidden');\n menuCloseIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n menuOpenIcon.classList.add('hidden');\n menuCloseIcon.classList.remove('hidden');\n }\n }\n if(mobileMenuBtn) mobileMenuBtn.addEventListener('click', toggleMobileMenu);\n\n \/\/ Program links hover logic (Desktop Mega Menu)\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\n \/\/ --- Modals ---\n const openModal = (modalId, contentId) => {\n const modal = document.getElementById(modalId);\n const content = document.getElementById(contentId);\n document.body.style.overflow = 'hidden';\n modal.classList.remove('pointer-events-none', 'opacity-0');\n if(content) content.classList.remove('scale-95');\n };\n \n const closeModal = (modalId, contentId) => {\n const modal = document.getElementById(modalId);\n const content = document.getElementById(contentId);\n document.body.style.overflow = '';\n modal.classList.add('opacity-0');\n if(content) content.classList.add('scale-95');\n setTimeout(() => modal.classList.add('pointer-events-none'), 300);\n };\n \n \/\/ Connected to actual shortcode modal\n const openPaymentModal = () => {\n openModal('paymentModal', 'paymentModalContent');\n };\n\n document.getElementById('closeModalButton').addEventListener('click', () => closeModal('paymentModal', 'paymentModalContent'));\n \n \/\/ --- Mobile Bottom Nav Logic ---\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const menuTriggerBtn = document.getElementById('mobileMenuTriggerBottom');\n \n const toggleBottom = (idToShow) => {\n const toShow = document.getElementById(idToShow);\n if(!toShow.classList.contains('hidden')) {\n toShow.classList.remove('is-open');\n setTimeout(() => toShow.classList.add('hidden'), 300);\n } else {\n toShow.classList.remove('hidden');\n setTimeout(() => toShow.classList.add('is-open'), 10);\n }\n };\n \n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottom('quickDonateSubmenu'));\n if(menuTriggerBtn) menuTriggerBtn.addEventListener('click', () => document.getElementById('mobileMenuButton').click());\n document.getElementById('closeQuickDonate').addEventListener('click', () => toggleBottom('quickDonateSubmenu'));\n\n\n \/\/ --- ZAKAT FITR CALCULATOR LOGIC ---\n const currencySelect = document.getElementById('currency');\n const stapleFoodPriceInput = document.getElementById('stapleFoodPrice');\n const peopleCountInput = document.getElementById('peopleCount');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n const currencySymbolEl = document.getElementById('staple-currency-symbol');\n const donateZakatButton = document.getElementById('donateZakatButton');\n\n const AMOUNT_PER_PERSON_KG = 2.5;\n let exchangeRates = {};\n\n async function initializeCalculator() {\n try {\n const response = await fetch('https:\/\/api.exchangerate-api.com\/v4\/latest\/USD').catch(e => null);\n const data = response && response.ok ? await response.json() : null;\n if(data) exchangeRates = data.rates;\n } catch (e) {\n console.log(\"Using fallback rates\");\n }\n \/\/ Fallback rates if API fails\n if(Object.keys(exchangeRates).length === 0) {\n exchangeRates = { \"USD\": 1, \"EUR\": 0.92, \"GBP\": 0.79, \"AUD\": 1.50, \"IDR\": 16250.00, \"SGD\": 1.35, \"MYR\": 4.70 };\n }\n populateCurrencies();\n addCalculatorListeners();\n updateCalculator();\n }\n\n function populateCurrencies() {\n const favoriteCurrencies = ['IDR', 'AUD', 'USD', 'SGD', 'MYR', 'EUR', 'GBP'];\n favoriteCurrencies.forEach(currency => {\n if(exchangeRates[currency]) {\n const option = document.createElement('option');\n option.value = currency;\n option.textContent = currency;\n currencySelect.appendChild(option);\n }\n });\n \/\/ Default to AUD based on prompt requirements to show AUD 20 logic\n currencySelect.value = 'AUD';\n }\n\n function getCurrencySymbol(curr) {\n const symbols = { USD: '$', IDR: 'Rp', EUR: '\u20ac', GBP: '\u00a3', AUD: 'A$', SGD: 'S$', MYR: 'RM' };\n return symbols[curr] || curr;\n }\n\n function formatMoney(amount, curr) {\n return new Intl.NumberFormat('en-US', { style: 'currency', currency: curr }).format(amount);\n }\n\n function updateCalculator() {\n const selectedCurrency = currencySelect.value;\n currencySymbolEl.textContent = getCurrencySymbol(selectedCurrency);\n \n \/\/ Specific logic for AUD Zakat Fitr = 20 Dollars per person\n let pricePerKg = 0;\n if(selectedCurrency === 'AUD') {\n \/\/ Total per person is 20, so price per kg is 20 \/ 2.5 = 8\n pricePerKg = 20 \/ AMOUNT_PER_PERSON_KG;\n stapleFoodPriceInput.value = pricePerKg.toFixed(2);\n stapleFoodPriceInput.disabled = true; \/\/ Lock it to ensure AUD is exactly 20\n } else {\n stapleFoodPriceInput.disabled = false;\n pricePerKg = parseFloat(stapleFoodPriceInput.value) || 0;\n }\n\n const peopleCount = parseInt(peopleCountInput.value) || 0;\n \n if (pricePerKg <= 0 || peopleCount <= 0) {\n zakatResultEl.textContent = formatMoney(0, selectedCurrency);\n zakatMessageEl.textContent = 'Please enter a valid price and number of people.';\n donateZakatButton.disabled = true;\n return;\n }\n\n const totalValue = peopleCount * pricePerKg * AMOUNT_PER_PERSON_KG;\n const totalAmountKg = peopleCount * AMOUNT_PER_PERSON_KG;\n\n zakatResultEl.textContent = formatMoney(totalValue, selectedCurrency);\n zakatMessageEl.textContent = `Total for ${peopleCount} person(s) is ${totalAmountKg.toFixed(1)} kg.`;\n donateZakatButton.disabled = false;\n }\n\n function addCalculatorListeners() {\n currencySelect.addEventListener('change', updateCalculator);\n stapleFoodPriceInput.addEventListener('input', updateCalculator);\n peopleCountInput.addEventListener('input', updateCalculator);\n \n \/\/ Bind Donate Button to Modal\n if(donateZakatButton) {\n donateZakatButton.addEventListener('click', openPaymentModal);\n }\n }\n\n initializeCalculator();\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Zakat Fitr | DT Peduli Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah Economy Education […]<\/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-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193","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=193"}],"version-history":[{"count":21,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":193,"date":"2025-07-24T06:55:16","date_gmt":"2025-07-24T06:55:16","guid":{"rendered":"https:\/\/dtpeduli.com\/donate\/?page_id=193"},"modified":"2026-03-07T10:20:14","modified_gmt":"2026-03-07T10:20:14","slug":"zakat-al-fitr","status":"publish","type":"page","link":"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/","title":{"rendered":"Zakat al Fitr"},"content":{"rendered":"\n\n\n\n \n \n Zakat Fitr | DT Peduli<\/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 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 .ring-dt-yellow { --tw-ring-color: #ffaf23; }\n\n \/* 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 \/* Hero Animation *\/\n @keyframes kenburns {\n 0% { transform: scale(1); }\n 100% { transform: scale(1.15); }\n }\n .hero-slide.active {\n animation: kenburns 20s ease-out forwards;\n }\n .hero-slide {\n transition: opacity 1.5s ease-in-out;\n }\n\n \/* 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%; \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 \/* 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; \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 \n \/* Custom Loader *\/\n .loader {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #00358f;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n display: inline-block;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n \/* Form Inputs *\/\n .input-group { position: relative; }\n .input-group .currency-symbol {\n position: absolute;\n top: 50%;\n left: 0.75rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: #6b7280;\n font-weight: 600;\n font-size: 0.875rem;\n }\n .input-group input { padding-left: 2.5rem; }\n \n \/* Calculator Scrollbar *\/\n .calc-scroll::-webkit-scrollbar { width: 6px; }\n .calc-scroll::-webkit-scrollbar-track { background: #f1f1f1; }\n .calc-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }\n .calc-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n\n \/* Modal Transition *\/\n #paymentModal {\n transition: opacity 0.3s ease-out;\n }\n #paymentModalContent {\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\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 <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 <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 <\/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 <\/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 <\/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 <\/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 <\/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-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">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 <button onclick=\"openPaymentModal()\" 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 Now\n <\/button>\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 pt-20\">\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\"><span>About Us<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/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\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Official Address<\/a>\n <\/div>\n <\/div>\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\"><span>Programs<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Da’wah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Economy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Education<\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Health<\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Social Humanitarian<\/a>\n <\/div>\n <\/div>\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\"><span>Giving<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/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\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Palestine Relief<\/a>\n <\/div>\n <\/div>\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\"><span>Governance<\/span><i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i><\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600\">Audit Result<\/a>\n <\/div>\n <\/div>\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 <button onclick=\"openPaymentModal()\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/button>\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-gray-900\">\n \n <div id=\"hero-slider\" class=\"absolute inset-0 w-full h-full z-0\">\n <div class=\"hero-slide active absolute inset-0 w-full h-full bg-cover bg-center\" style=\"background-image: url('https:\/\/dtpeduli.com\/donate\/wp-content\/uploads\/2025\/07\/tents.jpg'); opacity: 1;\"><\/div>\n <\/div>\n\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent z-10 pointer-events-none\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-20 pt-24 pb-12 h-full flex flex-col lg:flex-row items-center justify-center lg:justify-between gap-12\">\n \n \n <div class=\"text-center lg:text-left max-w-2xl\" data-aos=\"fade-right\">\n <div id=\"hero-text-content\">\n <span class=\"inline-block bg-dt-yellow text-white text-xs font-bold px-3 py-1 rounded-full mb-4 shadow-sm uppercase tracking-wide\">Zakat Fitr<\/span>\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl\">\n Purify Your Fast & Share the Joy\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed\">\n Zakat Fitr is a beautiful obligation that cleanses us and ensures no one is left hungry on the day of Eid. Calculate and pay yours easily.\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"#understanding-zakat\" class=\"inline-block border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-dt-blue transition-all transform hover:scale-105\">\n Read More\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full max-w-md bg-white\/95 backdrop-blur-xl rounded-3xl shadow-2xl p-6 md:p-8 border border-white\/20 text-gray-800 calc-scroll overflow-y-auto max-h-[80vh]\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"flex items-center justify-between mb-6 border-b pb-4 border-gray-200\">\n <h2 class=\"text-2xl font-bold text-dt-blue\">Zakat Fitr Calculator<\/h2>\n <i class=\"fas fa-calculator text-dt-yellow text-2xl\"><\/i>\n <\/div>\n \n <div class=\"space-y-5\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Select Currency<\/label>\n <select id=\"currency\" class=\"w-full p-3 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\"><\/select>\n <\/div>\n \n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Price per kg of Staple Food<\/label>\n <div class=\"input-group\">\n <span class=\"currency-symbol\" id=\"staple-currency-symbol\">$<\/span>\n <input type=\"number\" id=\"stapleFoodPrice\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"0.00\" step=\"0.01\">\n <\/div>\n <p class=\"text-xs text-gray-400 mt-1\">Enter local price for 1kg of rice\/staple.<\/p>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Number of People<\/label>\n <input type=\"number\" id=\"peopleCount\" value=\"1\" min=\"1\" class=\"w-full p-3 border border-gray-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-dt-blue\">\n <\/div>\n \n <div class=\"bg-blue-50 rounded-lg p-3 text-xs text-gray-600\">\n <strong>Amount per person:<\/strong> 2.5 kg of staple food.\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-900 text-white rounded-xl p-5 text-center mt-6 mb-4\">\n <p class=\"text-xs text-gray-400 uppercase mb-1\">Your Zakat Fitr Obligation<\/p>\n <p id=\"zakatResult\" class=\"text-3xl font-bold text-dt-yellow\">0.00<\/p>\n <p id=\"zakatMessage\" class=\"text-xs text-gray-400 mt-1\">Enter details to calculate<\/p>\n <\/div>\n\n <button id=\"donateZakatButton\" disabled class=\"w-full bg-dt-yellow text-white font-bold py-3 px-6 rounded-lg hover:bg-yellow-500 transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed\">\n Donate Now\n <\/button>\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"understanding-zakat\" class=\"py-16 lg:py-24 bg-white relative overflow-hidden\">\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 <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-start\">\n <div data-aos=\"fade-right\">\n <h2 class=\"text-3xl font-bold text-dt-blue mb-6 leading-snug\">Understanding Zakat Fitr<\/h2>\n <div class=\"space-y-6 text-gray-600 leading-relaxed\">\n <p>Zakat al-Fitr (or Fitrah) is a special charity paid by all Muslims at the end of the fasting month of Ramadhan. It is an obligation on every Muslim, young and old, male and female, as long as they have the means to do so.<\/p>\n \n <h3 class=\"text-xl font-bold text-dt-blue mt-8 mb-4\">The Obligation and Purpose<\/h3>\n <p>Based on the hadith narrated by Ibn ‘Umar, the Prophet Muhammad (peace be upon him) enjoined the payment of one Sa’ of dates or one Sa’ of barley as Zakat al-Fitr. Its primary purpose is twofold: to purify the fasting person from any indecent act or speech and to help the poor and needy, ensuring they can also celebrate Eid al-Fitr joyfully.<\/p>\n <\/div>\n <\/div>\n <div class=\"space-y-6\" 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=\"font-bold text-xl text-dt-blue mb-4\">Scholarly Consensus<\/h3>\n <ul class=\"space-y-3 text-sm text-gray-700\">\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Amount:<\/strong> Equivalent to approximately <strong>2.5 kg to 3.0 kg<\/strong> of staple food.<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Type:<\/strong> Traditionally paid as staple food (e.g., rice, wheat, dates).<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Paying in Cash:<\/strong> Many contemporary scholars permit paying the monetary equivalent, making it easier for recipients to buy what they need.<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fas fa-check-circle text-dt-yellow mt-1 mr-3\"><\/i><span><strong>Timing:<\/strong> Must be paid before the Eid prayer.<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue text-white\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16\">\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 <h3 class=\"text-2xl font-bold mb-4 text-white\">DT Peduli<\/h3>\n <p class=\"text-gray-300 text-sm leading-relaxed mb-4\">A globally trusted charity empowering communities.<\/p>\n <div class=\"text-xs text-gray-400 space-y-1\">\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 <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm text-gray-300\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors\">About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors\">News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors\">Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"hover:text-dt-yellow transition-colors\">Our Reports<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-300 text-sm\">\n <li class=\"flex items-start\"><i class=\"fas fa-map-marker-alt mr-3 mt-1 text-dt-yellow\"><\/i><span>Jl. Gegerkalong Girang No.32, Bandung<\/span><\/li>\n <li class=\"flex items-center\"><i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i><a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow\">hello@dtpeduli.org<\/a><\/li>\n <li class=\"flex items-center\"><i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i><span>+62 813-1712-1712<\/span><\/li>\n <\/ul>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold mb-4 tracking-wider text-white\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"#\" 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=\"#\" 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=\"#\" 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 <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\"><div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">© 2025 DT Peduli. All Rights Reserved.<\/div><\/div>\n <\/footer>\n \n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/90 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-40 pb-2 pt-1 border-t border-white\/50\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <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 <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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 <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\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><h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3><p class=\"text-xs text-gray-500\">Select a category to help<\/p><\/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-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-bold text-dt-blue 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-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-semibold text-gray-700 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 \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-70 z-[100] flex justify-center items-center p-4 opacity-0 pointer-events-none transition-all duration-300\">\n <div id=\"paymentModalContent\" class=\"bg-white rounded-xl shadow-2xl w-full max-w-lg relative transform scale-95 transition-all duration-300 flex flex-col max-h-[90vh]\">\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-red-500 shadow-lg z-10\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200 text-center bg-gray-50 rounded-t-xl flex-shrink-0\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Pay Your Zakat Fitr<\/h3>\n <p id=\"modal-subtitle\" class=\"text-gray-500 text-sm mt-1\">Purify your wealth<\/p>\n <\/div>\n <div class=\"p-6 overflow-y-auto\">\n <div class=\"bg-gray-50 p-6 rounded-lg border-2 border-dashed border-gray-300 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">Secure Payment Form<\/p>\n <code 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_563\">\n <form data-wpf_form_id='563' wpf_form_instance='wpf_form_instance_563_1' class='wpf_form wpf_form_instance_563_1 wpf_strip_default_style wpf_form_id_563 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wppayform_has_payment wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_563' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__563__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"563\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"193\">\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_563_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_563_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_563_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_563_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_563_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_563_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_563_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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_563_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> \n <div style = \"display : \" data-element_type=\"donation_item\" data-required_element=\"radio\" data-required=\"yes\" data-target_element=\"donation_item\" class=\"wpf_form_group wpf_item_donation_item\" >\n\n <div class=\"donation-wrapper \">\n <div class=\"wpf_donation_status\">\n <div class=\"raised_amount\">\n <div class=\"number\" name=\"wpf_form_id_563_raised_donation\" data-raised=\"18000\">\n $180 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 4 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_563_goal_amount\" data-goal=\"100000\">\n $1,000 <\/div>\n <div class=\"text\">Goal<\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_donation_bar_wrapper\">\n <div class=\"wpf_donation_fields_bar\">\n <div\n class=\"wpf_bar\"\n style=\"width: 18%;\"\n name=\"wpf_form_id_563_bar\"\n data-percentage=\"18\"\n >\n 18% <\/div>\n <\/div>\n <\/div>\n \n <div class=\"wpf_donation_fields_wrapper\" >\n <div class=\"wpf_input_content wpf_donation_controls_custom\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_563_donation_item\" >Donation Progress Item <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\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=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_563_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" disabled=\"1\" \/>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_563_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" style=\"display: none\" \/>\n <\/div>\n <\/div>\n <br\/>\n <div class=\"wpf_input_content wpf_donation_controls_radio\">\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_0\" type=\"radio\" data-price=\"1000\" base-price=\"1000\" name=\"donation_item\" id=\"donation_item_0_563\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_563\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $10 <\/span>\n <meta itemprop=\"price\" content=\"10\">\n <\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_1\" type=\"radio\" data-price=\"2000\" base-price=\"2000\" name=\"donation_item\" id=\"donation_item_1_563\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_563\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $20 <\/span>\n <meta itemprop=\"price\" content=\"20\">\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <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=\"yes\" 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 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"yes\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_563_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=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <option value=\"ANG\" data-currency=\"ANG\" customname=\"Netherlands Antillean Gulden\" >Netherlands Antillean Gulden (ANG)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\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=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\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 <\/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_563_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_563_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_563' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Zakat Now<\/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 <\/code>\n <div class=\"animate-pulse flex flex-col items-center mt-4\">\n <div class=\"h-10 w-full bg-gray-200 rounded mb-4\"><\/div>\n <div class=\"h-10 w-full bg-gray-200 rounded mb-4\"><\/div>\n <div class=\"h-12 w-full bg-dt-yellow rounded mt-2 opacity-50\"><\/div>\n <\/div>\n <\/div>\n <\/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 });\n\n \/\/ --- Header Logic ---\n const header = document.getElementById('mainHeader');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n\n \/\/ --- Mobile Menu ---\n const mobileMenuBtn = document.getElementById('mobileMenuButton');\n const mobileMenu = document.getElementById('mobileMenu');\n const menuOpenIcon = document.getElementById('menu-open-icon');\n const menuCloseIcon = document.getElementById('menu-close-icon');\n\n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n if (isOpen) {\n document.body.style.overflow = '';\n menuOpenIcon.classList.remove('hidden');\n menuCloseIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n menuOpenIcon.classList.add('hidden');\n menuCloseIcon.classList.remove('hidden');\n }\n }\n if(mobileMenuBtn) mobileMenuBtn.addEventListener('click', toggleMobileMenu);\n\n \/\/ Program links hover logic (Desktop Mega Menu)\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\n \/\/ --- Modals ---\n const openModal = (modalId, contentId) => {\n const modal = document.getElementById(modalId);\n const content = document.getElementById(contentId);\n document.body.style.overflow = 'hidden';\n modal.classList.remove('pointer-events-none', 'opacity-0');\n if(content) content.classList.remove('scale-95');\n };\n \n const closeModal = (modalId, contentId) => {\n const modal = document.getElementById(modalId);\n const content = document.getElementById(contentId);\n document.body.style.overflow = '';\n modal.classList.add('opacity-0');\n if(content) content.classList.add('scale-95');\n setTimeout(() => modal.classList.add('pointer-events-none'), 300);\n };\n \n \/\/ Connected to actual shortcode modal\n const openPaymentModal = () => {\n openModal('paymentModal', 'paymentModalContent');\n };\n\n document.getElementById('closeModalButton').addEventListener('click', () => closeModal('paymentModal', 'paymentModalContent'));\n \n \/\/ --- Mobile Bottom Nav Logic ---\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const menuTriggerBtn = document.getElementById('mobileMenuTriggerBottom');\n \n const toggleBottom = (idToShow) => {\n const toShow = document.getElementById(idToShow);\n if(!toShow.classList.contains('hidden')) {\n toShow.classList.remove('is-open');\n setTimeout(() => toShow.classList.add('hidden'), 300);\n } else {\n toShow.classList.remove('hidden');\n setTimeout(() => toShow.classList.add('is-open'), 10);\n }\n };\n \n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottom('quickDonateSubmenu'));\n if(menuTriggerBtn) menuTriggerBtn.addEventListener('click', () => document.getElementById('mobileMenuButton').click());\n document.getElementById('closeQuickDonate').addEventListener('click', () => toggleBottom('quickDonateSubmenu'));\n\n\n \/\/ --- ZAKAT FITR CALCULATOR LOGIC ---\n const currencySelect = document.getElementById('currency');\n const stapleFoodPriceInput = document.getElementById('stapleFoodPrice');\n const peopleCountInput = document.getElementById('peopleCount');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n const currencySymbolEl = document.getElementById('staple-currency-symbol');\n const donateZakatButton = document.getElementById('donateZakatButton');\n\n const AMOUNT_PER_PERSON_KG = 2.5;\n let exchangeRates = {};\n\n async function initializeCalculator() {\n try {\n const response = await fetch('https:\/\/api.exchangerate-api.com\/v4\/latest\/USD').catch(e => null);\n const data = response && response.ok ? await response.json() : null;\n if(data) exchangeRates = data.rates;\n } catch (e) {\n console.log(\"Using fallback rates\");\n }\n \/\/ Fallback rates if API fails\n if(Object.keys(exchangeRates).length === 0) {\n exchangeRates = { \"USD\": 1, \"EUR\": 0.92, \"GBP\": 0.79, \"AUD\": 1.50, \"IDR\": 16250.00, \"SGD\": 1.35, \"MYR\": 4.70 };\n }\n populateCurrencies();\n addCalculatorListeners();\n updateCalculator();\n }\n\n function populateCurrencies() {\n const favoriteCurrencies = ['IDR', 'AUD', 'USD', 'SGD', 'MYR', 'EUR', 'GBP'];\n favoriteCurrencies.forEach(currency => {\n if(exchangeRates[currency]) {\n const option = document.createElement('option');\n option.value = currency;\n option.textContent = currency;\n currencySelect.appendChild(option);\n }\n });\n \/\/ Default to AUD based on prompt requirements to show AUD 20 logic\n currencySelect.value = 'AUD';\n }\n\n function getCurrencySymbol(curr) {\n const symbols = { USD: '$', IDR: 'Rp', EUR: '\u20ac', GBP: '\u00a3', AUD: 'A$', SGD: 'S$', MYR: 'RM' };\n return symbols[curr] || curr;\n }\n\n function formatMoney(amount, curr) {\n return new Intl.NumberFormat('en-US', { style: 'currency', currency: curr }).format(amount);\n }\n\n function updateCalculator() {\n const selectedCurrency = currencySelect.value;\n currencySymbolEl.textContent = getCurrencySymbol(selectedCurrency);\n \n \/\/ Specific logic for AUD Zakat Fitr = 20 Dollars per person\n let pricePerKg = 0;\n if(selectedCurrency === 'AUD') {\n \/\/ Total per person is 20, so price per kg is 20 \/ 2.5 = 8\n pricePerKg = 20 \/ AMOUNT_PER_PERSON_KG;\n stapleFoodPriceInput.value = pricePerKg.toFixed(2);\n stapleFoodPriceInput.disabled = true; \/\/ Lock it to ensure AUD is exactly 20\n } else {\n stapleFoodPriceInput.disabled = false;\n pricePerKg = parseFloat(stapleFoodPriceInput.value) || 0;\n }\n\n const peopleCount = parseInt(peopleCountInput.value) || 0;\n \n if (pricePerKg <= 0 || peopleCount <= 0) {\n zakatResultEl.textContent = formatMoney(0, selectedCurrency);\n zakatMessageEl.textContent = 'Please enter a valid price and number of people.';\n donateZakatButton.disabled = true;\n return;\n }\n\n const totalValue = peopleCount * pricePerKg * AMOUNT_PER_PERSON_KG;\n const totalAmountKg = peopleCount * AMOUNT_PER_PERSON_KG;\n\n zakatResultEl.textContent = formatMoney(totalValue, selectedCurrency);\n zakatMessageEl.textContent = `Total for ${peopleCount} person(s) is ${totalAmountKg.toFixed(1)} kg.`;\n donateZakatButton.disabled = false;\n }\n\n function addCalculatorListeners() {\n currencySelect.addEventListener('change', updateCalculator);\n stapleFoodPriceInput.addEventListener('input', updateCalculator);\n peopleCountInput.addEventListener('input', updateCalculator);\n \n \/\/ Bind Donate Button to Modal\n if(donateZakatButton) {\n donateZakatButton.addEventListener('click', openPaymentModal);\n }\n }\n\n initializeCalculator();\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Zakat Fitr | DT Peduli Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah Economy Education […]<\/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-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193","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=193"}],"version-history":[{"count":21,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/193\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}