Donate & Zakat Calculator | 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 for long forms *\/\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 \/* News Card *\/\n .news-card:hover .news-image { transform: scale(1.05); }\n \n \/* Hero Text Transition *\/\n #hero-text-content {\n transition: opacity 0.5s ease-in-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 \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div><\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[280px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Fostering spiritual growth and spreading peaceful values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-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>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 <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n <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\"><\/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\"><\/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-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\"><span>Giving<\/span><i class=\"fas fa-chevron-down text-xs transition-transform\"><\/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-gray-600\">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\"><\/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 <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section id=\"hero-section\" class=\"relative text-white min-h-screen flex items-center justify-center overflow-hidden bg-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:\/\/images.unsplash.com\/photo-1532629345422-7515f3d16bb6?q=80&w=2940&auto=format&fit=crop'); 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\" class=\"transition-opacity duration-500\">\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\">Featured Campaign<\/span>\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl\">\n Calculate & Purify Your Wealth\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed\">\n Calculate your Zakat Maal accurately and distribute it to those in need. Every contribution counts towards a better world.\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"#news-container\" 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 See Impact\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 Calculator<\/h2>\n <i class=\"fas fa-calculator text-dt-yellow text-2xl\"><\/i>\n <\/div>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Currency<\/label>\n <select id=\"currency\" class=\"w-full p-2 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\"><\/select>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Nisab Base<\/label>\n <select id=\"nisabBasis\" class=\"w-full p-2 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\">\n <option value=\"gold\">Gold (85g)<\/option>\n <option value=\"silver\">Silver (595g)<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"bg-blue-50 rounded-lg p-3 mb-6 flex justify-between items-center\">\n <span class=\"text-xs text-gray-600 font-semibold\">Current Nisab:<\/span>\n <span id=\"nisabValue\" class=\"text-sm font-bold text-dt-blue flex items-center\">\n <div class=\"loader !w-4 !h-4 !border-2 mr-2\"><\/div> Loading…\n <\/span>\n <\/div>\n\n \n <div class=\"space-y-3 mb-6\">\n <h3 class=\"text-sm font-bold text-gray-800 uppercase tracking-wide\">Assets<\/h3>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"goldValue\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Gold Value\">\n <\/div>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"cash\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Cash \/ Bank\">\n <\/div>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"otherAssets\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Other Assets (Stocks\/Business)\">\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 mb-6\">\n <h3 class=\"text-sm font-bold text-gray-800 uppercase tracking-wide\">Liabilities<\/h3>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"debts\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Debts \/ Expenses\">\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-900 text-white rounded-xl p-5 text-center mb-4\">\n <p class=\"text-xs text-gray-400 uppercase mb-1\">Zakat Payable (2.5%)<\/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 assets 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 Pay via PayPal\n <\/button>\n <button id=\"openWiseModalBtn\" disabled class=\"w-full mt-3 border-2 border-gray-200 text-gray-600 font-bold py-3 px-6 rounded-lg hover:border-dt-blue hover:text-dt-blue transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center\">\n <i class=\"fas fa-globe mr-2\"><\/i> Pay via Wise\n <\/button>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <span class=\"text-dt-blue font-bold uppercase tracking-widest text-sm mb-2 block\">Transparency<\/span>\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Where Your Zakat Goes<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Stay updated with our latest activities and the impact of your donations.<\/p>\n <\/div>\n \n <div id=\"news-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"col-span-full text-center py-12\">\n <div class=\"loader mx-auto\"><\/div>\n <p class=\"text-gray-500 mt-4\">Loading stories…<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"text-center mt-12\" data-aos=\"fade-up\">\n <button id=\"loadMoreBtn\" class=\"hidden bg-white border-2 border-dt-blue text-dt-blue font-bold py-3 px-8 rounded-full hover:bg-dt-blue hover:text-white transition-all transform hover:scale-105 shadow-md flex items-center justify-center mx-auto\">\n <span>Load More Campaigns<\/span>\n <div id=\"btn-loader\" class=\"loader !w-4 !h-4 !border-t-white !border-gray-300 ml-3 hidden\"><\/div>\n <\/button>\n <p id=\"noMoreContent\" class=\"hidden text-gray-500 text-sm mt-4 italic\">No more campaigns to load.<\/p>\n <\/div>\n \n\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed\">A globally trusted charity empowering communities.<\/p>\n <div class=\"mt-4 text-xs text-gray-500 space-y-2\">\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>TR:<\/strong> K\u00fct\u00fck No: 34-285-124<\/p>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors\">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\/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 text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\"><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 text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <\/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\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n <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-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-bold text-dt-blue text-sm\">Sadaqah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf72<\/span><span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/ramadhan\/\" class=\"col-span-2 flex flex-col items-center p-4 rounded-2xl bg-indigo-50 border border-indigo-100 hover:border-indigo-300 hover:bg-indigo-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf19<\/span><span class=\"font-semibold text-gray-700 text-sm\">Ramadhan<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/qurban\/\" class=\"col-span-2 flex flex-col items-center p-4 rounded-2xl bg-yellow-50 border border-yellow-100 hover:border-yellow-300 hover:bg-yellow-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udc10<\/span><span class=\"font-semibold text-gray-700 text-sm\">Qurban<\/span><\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p><p class=\"text-xs text-gray-500\">Chat on WhatsApp<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p><p class=\"text-xs text-gray-500\">Direct line assistance<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"paymentModalContent\" class=\"modal-content bg-white rounded-xl shadow-2xl w-full max-w-md relative transform scale-95 opacity-0 transition-all duration-300\">\n <button id=\"closeModalButton\" class=\"absolute -top-3 -right-3 bg-white rounded-full h-8 w-8 flex items-center justify-center text-gray-600 hover:text-black hover:scale-110 transition-transform focus:outline-none shadow-lg\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200\"><h3 class=\"text-xl font-bold text-dt-blue text-center\">Pay Your Zakat<\/h3><\/div>\n <div class=\"p-6\">\n <div id=\"paymattic-form-container\" class=\"bg-gray-100 border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_384\">\n <form data-wpf_form_id='384' wpf_form_instance='wpf_form_instance_384_1' class='wpf_form wpf_form_instance_384_1 wpf_strip_default_style wpf_form_id_384 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_384' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__384__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"384\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"16\">\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_384_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_384_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_384_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_384_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_384_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_384_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_384_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_raised_donation\" data-raised=\"0\">\n $0 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 0 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_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: 0%;\"\n name=\"wpf_form_id_384_bar\"\n data-percentage=\"0\"\n >\n 0% <\/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_384_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_384_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_384_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_384\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_384\">\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_384\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_384\">\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_384_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_384_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_384_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_384' 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 <\/p>\n <p class=\"text-xs text-gray-500 mt-2\">Dynamic Form ID based on currency will appear here.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"wiseModalContent\" class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform transition-all opacity-0 -translate-y-10 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div><h2 class=\"text-2xl font-bold text-dt-blue\">Payment via Wise<\/h2><p class=\"text-gray-500 mt-1\">Complete your international payment.<\/p><\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\"><iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n\n \/\/ Header Logic\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ Mobile Menu Logic\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ Bottom Nav Logic\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n if(menuToShow && !menuToShow.classList.contains('hidden')) {\n openSubmenu(menuToShow);\n } else {\n closeSubmenu(menuToShow);\n }\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300);\n document.body.style.overflow = '';\n };\n\n \/\/ Mega Menu Desktop Hover\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ --- Zakat Calculator Logic ---\n const currencySelect = document.getElementById('currency');\n const nisabBasisSelect = document.getElementById('nisabBasis');\n const nisabValueEl = document.getElementById('nisabValue');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n const allInputs = document.querySelectorAll('.zakat-input');\n const currencySymbolEls = document.querySelectorAll('.currency-symbol');\n const donateZakatButton = document.getElementById('donateZakatButton');\n const openWiseModalBtn = document.getElementById('openWiseModalBtn');\n\n const paymentFormIds = { 'IDR': 384, 'AUD': 385, 'USD': 386, 'SGD': 387, 'MYR': 388, 'TRY': 389 };\n const NISAB_GOLD_GRAMS = 85;\n const NISAB_SILVER_GRAMS = 595;\n const ZAKAT_RATE = 0.025;\n const TROY_OUNCE_IN_GRAMS = 31.1035;\n\n let goldPriceUSD = 0, silverPriceUSD = 0, exchangeRates = {}, currentCurrency = 'USD', currentNisabValue = 0, currentZakatAmount = 0;\n\n async function initializeCalculator() {\n await fetchApiData();\n populateCurrencies();\n addCalculatorListeners();\n updateCalculator();\n }\n\n async function fetchApiData() {\n try {\n \/\/ Mock data for stability in preview, replace with real API in production if needed\n goldPriceUSD = 2350.50 \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = 30.50 \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = { \"USD\": 1, \"IDR\": 16250, \"EUR\": 0.92, \"GBP\": 0.79, \"AUD\": 1.50, \"SGD\": 1.35, \"MYR\": 4.70, \"TRY\": 32.25 };\n } catch (error) {\n console.error(\"Data fetch error\", error);\n }\n }\n\n function populateCurrencies() {\n const favoriteCurrencies = ['IDR', 'USD', 'AUD', '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 currencySelect.value = 'IDR';\n }\n\n function updateCalculator() {\n currentCurrency = currencySelect.value;\n const rate = exchangeRates[currentCurrency];\n const symbol = getCurrencySymbol(currentCurrency);\n \n currencySymbolEls.forEach(el => el.textContent = symbol);\n \n const nisabBasis = nisabBasisSelect.value;\n const grams = nisabBasis === 'gold' ? NISAB_GOLD_GRAMS : NISAB_SILVER_GRAMS;\n const priceUSD = nisabBasis === 'gold' ? goldPriceUSD : silverPriceUSD;\n \n currentNisabValue = grams * priceUSD * rate;\n nisabValueEl.textContent = formatMoney(currentNisabValue, currentCurrency);\n \n \/\/ Calculate Total Assets\n let assets = 0;\n ['goldValue', 'cash', 'otherAssets'].forEach(id => {\n assets += parseFloat(document.getElementById(id).value) || 0;\n });\n \n \/\/ Calculate Liabilities\n let debts = parseFloat(document.getElementById('debts').value) || 0;\n \n const netAssets = assets - debts;\n \n if (netAssets >= currentNisabValue) {\n currentZakatAmount = netAssets * ZAKAT_RATE;\n zakatResultEl.textContent = formatMoney(currentZakatAmount, currentCurrency);\n zakatMessageEl.textContent = \"MaashaAllah, you are eligible to pay Zakat.\";\n zakatMessageEl.className = \"text-xs text-green-500 mt-1 font-bold\";\n donateZakatButton.disabled = false;\n openWiseModalBtn.disabled = false;\n } else {\n currentZakatAmount = 0;\n zakatResultEl.textContent = formatMoney(0, currentCurrency);\n zakatMessageEl.textContent = \"Your net assets are below Nisab.\";\n zakatMessageEl.className = \"text-xs text-red-400 mt-1\";\n donateZakatButton.disabled = true;\n openWiseModalBtn.disabled = true;\n }\n }\n\n function addCalculatorListeners() {\n currencySelect.addEventListener('change', updateCalculator);\n nisabBasisSelect.addEventListener('change', updateCalculator);\n allInputs.forEach(input => input.addEventListener('input', updateCalculator));\n \n donateZakatButton.addEventListener('click', openPayment);\n openWiseModalBtn.addEventListener('click', openWise);\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 initializeCalculator();\n\n \/\/ Payment Modals\n const paymentModal = document.getElementById('paymentModal');\n const paymentModalContent = document.getElementById('paymentModalContent');\n const closePaymentBtn = document.getElementById('closeModalButton');\n const wiseModal = document.getElementById('wisePaymentModal');\n const wiseModalContent = document.getElementById('wiseModalContent');\n const closeWiseBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n\n function openPayment() {\n paymentModal.classList.remove('hidden');\n setTimeout(() => {\n paymentModal.classList.remove('opacity-0', 'pointer-events-none');\n paymentModalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n document.body.style.overflow = 'hidden';\n }\n function closePayment() {\n paymentModalContent.classList.add('scale-95', 'opacity-0');\n paymentModal.classList.add('opacity-0');\n setTimeout(() => {\n paymentModal.classList.add('hidden', 'pointer-events-none');\n document.body.style.overflow = '';\n }, 300);\n }\n \n function openWise() {\n wiseIframe.src = `https:\/\/dtpeduli.com\/donate-via-wise\/?amount=${currentZakatAmount.toFixed(2)}¤cy=${currentCurrency}`;\n wiseModal.classList.remove('hidden');\n setTimeout(() => {\n wiseModal.classList.remove('opacity-0', 'pointer-events-none');\n wiseModalContent.classList.remove('opacity-0', '-translate-y-10');\n }, 10);\n document.body.style.overflow = 'hidden';\n }\n function closeWise() {\n wiseModalContent.classList.add('opacity-0', '-translate-y-10');\n wiseModal.classList.add('opacity-0');\n setTimeout(() => {\n wiseModal.classList.add('hidden', 'pointer-events-none');\n wiseIframe.src = '';\n document.body.style.overflow = '';\n }, 300);\n }\n\n closePaymentBtn.addEventListener('click', closePayment);\n closeWiseBtn.addEventListener('click', closeWise);\n\n \/\/ Hero Slider Automation\n async function initHeroSlider() {\n const sliderContainer = document.getElementById('hero-slider');\n const heroTextContent = document.getElementById('hero-text-content');\n \n try {\n \/\/ Attempt to fetch latest posts from WordPress API\n const response = await fetch('https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=5');\n if (!response.ok) throw new Error('Network response was not ok');\n const posts = await response.json();\n\n \/\/ Filter posts that have images\n const slidesData = posts.filter(p => p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0].source_url).map(p => ({\n image: p._embedded['wp:featuredmedia'][0].source_url,\n title: p.title.rendered,\n link: p.link,\n excerpt: p.excerpt.rendered.replace(\/(<([^>]+)>)\/gi, \"\").substring(0, 100) + \"...\"\n }));\n\n if(slidesData.length === 0) throw new Error('No images');\n \n \/\/ Generate Background Slides\n sliderContainer.innerHTML = slidesData.map((slide, index) => `\n <div class=\"hero-slide absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 ease-in-out ${index === 0 ? 'opacity-100 active' : 'opacity-0'}\" style=\"background-image: url('${slide.image}');\"><\/div>\n `).join('');\n \n \/\/ Initial Text Render\n updateHeroText(slidesData[0]);\n\n \/\/ Start Interval\n const slides = sliderContainer.querySelectorAll('.hero-slide');\n let currentSlide = 0;\n setInterval(() => {\n \/\/ Fade out text\n if(heroTextContent) heroTextContent.style.opacity = '0';\n \n \/\/ Change Image\n slides[currentSlide].classList.remove('opacity-100', 'active');\n slides[currentSlide].classList.add('opacity-0');\n currentSlide = (currentSlide + 1) % slides.length;\n slides[currentSlide].classList.remove('opacity-0');\n slides[currentSlide].classList.add('opacity-100', 'active');\n\n \/\/ Update text after fade out\n setTimeout(() => {\n updateHeroText(slidesData[currentSlide]);\n if(heroTextContent) heroTextContent.style.opacity = '1';\n }, 500);\n\n }, 6000); \/\/ 6 seconds per slide\n\n } catch (e) {\n console.warn(\"Slider API failed, using static fallback\");\n }\n\n function updateHeroText(slide) {\n if(!heroTextContent) return;\n heroTextContent.innerHTML = `\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\">Featured Campaign<\/span>\n <h1 class=\"text-3xl md:text-5xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl line-clamp-2 h-[3.6em] overflow-hidden\">${slide.title}<\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed line-clamp-3 h-[4.5em] overflow-hidden\">\n ${slide.excerpt}\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"${slide.link}\" target=\"_blank\" 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 Donate Now\n <\/a>\n <\/div>\n `;\n }\n }\n initHeroSlider();\n\n \/\/ --- LOAD MORE CAMPAIGNS LOGIC ---\n const newsContainer = document.getElementById('news-container');\n const loadMoreBtn = document.getElementById('loadMoreBtn');\n const btnLoader = document.getElementById('btn-loader');\n const noMoreContent = document.getElementById('noMoreContent');\n \n let currentNewsPage = 1;\n const newsPerPage = 3;\n let isLoadingNews = false;\n\n async function fetchNews(isAppend = false) {\n if(isLoadingNews) return;\n isLoadingNews = true;\n\n if (!isAppend) {\n newsContainer.innerHTML = `\n <div class=\"col-span-full text-center py-12\">\n <div class=\"loader mx-auto\"><\/div>\n <p class=\"text-gray-500 mt-4\">Loading stories...<\/p>\n <\/div>`;\n } else {\n loadMoreBtn.disabled = true;\n btnLoader.classList.remove('hidden');\n }\n\n try {\n \/\/ Using public REST API instead of admin edit.php\n const apiUrl = `https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed&per_page=${newsPerPage}&page=${currentNewsPage}`;\n \n const response = await fetch(apiUrl);\n \n if (!response.ok) {\n \/\/ If page 2+ returns error (likely 400 for max pages), hide button\n if(isAppend) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n }\n throw new Error('API limit reached or error');\n }\n \n const posts = await response.json();\n \n \/\/ Clear loader if initial load\n if (!isAppend) newsContainer.innerHTML = '';\n \n if(posts.length === 0) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n if (!isAppend) newsContainer.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">No stories found.<\/p>';\n return;\n }\n\n posts.forEach(post => {\n const img = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=News';\n const card = `<div class=\"news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all\" data-aos=\"fade-up\">\n <a href=\"${post.link}\" target=\"_blank\" class=\"block\">\n <div class=\"overflow-hidden h-48\"><img decoding=\"async\" src=\"${img}\" class=\"news-image w-full h-full object-cover transition-transform duration-300\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg text-dt-blue mb-2 line-clamp-2\">${post.title.rendered}<\/h3>\n <p class=\"text-gray-600 text-sm line-clamp-3\">${post.excerpt.rendered.replace(\/<[^>]*>?\/gm, '')}<\/p>\n <span class=\"text-dt-yellow font-bold text-sm mt-4 inline-block\">Donate Now →<\/span>\n <\/div>\n <\/a>\n <\/div>`;\n newsContainer.insertAdjacentHTML('beforeend', card);\n });\n\n \/\/ Update UI state\n currentNewsPage++;\n loadMoreBtn.classList.remove('hidden'); \/\/ Ensure button is shown if data exists\n \n \/\/ If we got fewer posts than requested, it's the end\n if(posts.length < newsPerPage) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n }\n\n } catch (e) {\n console.error(\"News Fetch Error:\", e);\n if(!isAppend) {\n newsContainer.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">Latest updates currently unavailable.<\/p>';\n loadMoreBtn.classList.add('hidden');\n }\n } finally {\n isLoadingNews = false;\n loadMoreBtn.disabled = false;\n btnLoader.classList.add('hidden');\n }\n }\n\n \/\/ Initial load\n fetchNews(false);\n\n \/\/ Load More Click Event\n if(loadMoreBtn) {\n loadMoreBtn.addEventListener('click', function() {\n fetchNews(true);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Donate & Zakat Calculator | DT Peduli Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":26,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16,"date":"2025-07-17T06:11:06","date_gmt":"2025-07-17T06:11:06","guid":{"rendered":"https:\/\/dtpeduli.com\/donate\/?page_id=16"},"modified":"2025-12-05T03:23:43","modified_gmt":"2025-12-05T03:23:43","slug":"donate","status":"publish","type":"page","link":"https:\/\/dtpeduli.com\/donate\/","title":{"rendered":"Donate"},"content":{"rendered":"\n\n\n\n \n \n Donate & Zakat Calculator | 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 for long forms *\/\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 \/* News Card *\/\n .news-card:hover .news-image { transform: scale(1.05); }\n \n \/* Hero Text Transition *\/\n #hero-text-content {\n transition: opacity 0.5s ease-in-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 \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div><\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\"><div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div><\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[280px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Fostering spiritual growth and spreading peaceful values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-2 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-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>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 <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n <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\"><\/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\"><\/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-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\"><span>Giving<\/span><i class=\"fas fa-chevron-down text-xs transition-transform\"><\/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-gray-600\">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\"><\/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 <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section id=\"hero-section\" class=\"relative text-white min-h-screen flex items-center justify-center overflow-hidden bg-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:\/\/images.unsplash.com\/photo-1532629345422-7515f3d16bb6?q=80&w=2940&auto=format&fit=crop'); 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\" class=\"transition-opacity duration-500\">\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\">Featured Campaign<\/span>\n <h1 class=\"text-4xl md:text-6xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl\">\n Calculate & Purify Your Wealth\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed\">\n Calculate your Zakat Maal accurately and distribute it to those in need. Every contribution counts towards a better world.\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"#news-container\" 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 See Impact\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 Calculator<\/h2>\n <i class=\"fas fa-calculator text-dt-yellow text-2xl\"><\/i>\n <\/div>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Currency<\/label>\n <select id=\"currency\" class=\"w-full p-2 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\"><\/select>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1 uppercase\">Nisab Base<\/label>\n <select id=\"nisabBasis\" class=\"w-full p-2 border border-gray-300 rounded-lg bg-gray-50 text-sm focus:ring-2 focus:ring-dt-blue\">\n <option value=\"gold\">Gold (85g)<\/option>\n <option value=\"silver\">Silver (595g)<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"bg-blue-50 rounded-lg p-3 mb-6 flex justify-between items-center\">\n <span class=\"text-xs text-gray-600 font-semibold\">Current Nisab:<\/span>\n <span id=\"nisabValue\" class=\"text-sm font-bold text-dt-blue flex items-center\">\n <div class=\"loader !w-4 !h-4 !border-2 mr-2\"><\/div> Loading…\n <\/span>\n <\/div>\n\n \n <div class=\"space-y-3 mb-6\">\n <h3 class=\"text-sm font-bold text-gray-800 uppercase tracking-wide\">Assets<\/h3>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"goldValue\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Gold Value\">\n <\/div>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"cash\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Cash \/ Bank\">\n <\/div>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"otherAssets\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Other Assets (Stocks\/Business)\">\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-3 mb-6\">\n <h3 class=\"text-sm font-bold text-gray-800 uppercase tracking-wide\">Liabilities<\/h3>\n <div class=\"input-group\">\n <span class=\"currency-symbol\">$<\/span>\n <input type=\"number\" id=\"debts\" class=\"w-full p-3 border border-gray-300 rounded-lg zakat-input text-sm\" placeholder=\"Debts \/ Expenses\">\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-900 text-white rounded-xl p-5 text-center mb-4\">\n <p class=\"text-xs text-gray-400 uppercase mb-1\">Zakat Payable (2.5%)<\/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 assets 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 Pay via PayPal\n <\/button>\n <button id=\"openWiseModalBtn\" disabled class=\"w-full mt-3 border-2 border-gray-200 text-gray-600 font-bold py-3 px-6 rounded-lg hover:border-dt-blue hover:text-dt-blue transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center\">\n <i class=\"fas fa-globe mr-2\"><\/i> Pay via Wise\n <\/button>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <span class=\"text-dt-blue font-bold uppercase tracking-widest text-sm mb-2 block\">Transparency<\/span>\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Where Your Zakat Goes<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Stay updated with our latest activities and the impact of your donations.<\/p>\n <\/div>\n \n <div id=\"news-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"col-span-full text-center py-12\">\n <div class=\"loader mx-auto\"><\/div>\n <p class=\"text-gray-500 mt-4\">Loading stories…<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"text-center mt-12\" data-aos=\"fade-up\">\n <button id=\"loadMoreBtn\" class=\"hidden bg-white border-2 border-dt-blue text-dt-blue font-bold py-3 px-8 rounded-full hover:bg-dt-blue hover:text-white transition-all transform hover:scale-105 shadow-md flex items-center justify-center mx-auto\">\n <span>Load More Campaigns<\/span>\n <div id=\"btn-loader\" class=\"loader !w-4 !h-4 !border-t-white !border-gray-300 ml-3 hidden\"><\/div>\n <\/button>\n <p id=\"noMoreContent\" class=\"hidden text-gray-500 text-sm mt-4 italic\">No more campaigns to load.<\/p>\n <\/div>\n \n\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed\">A globally trusted charity empowering communities.<\/p>\n <div class=\"mt-4 text-xs text-gray-500 space-y-2\">\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>TR:<\/strong> K\u00fct\u00fck No: 34-285-124<\/p>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors\">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\/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 text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\"><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 text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/www.youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <\/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\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n <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-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span><span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-blue-50 border border-blue-100 hover:border-dt-blue hover:bg-blue-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83e\udd32<\/span><span class=\"font-bold text-dt-blue text-sm\">Sadaqah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf72<\/span><span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span><span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/ramadhan\/\" class=\"col-span-2 flex flex-col items-center p-4 rounded-2xl bg-indigo-50 border border-indigo-100 hover:border-indigo-300 hover:bg-indigo-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83c\udf19<\/span><span class=\"font-semibold text-gray-700 text-sm\">Ramadhan<\/span><\/a>\n <a href=\"https:\/\/dtpeduli.com\/qurban\/\" class=\"col-span-2 flex flex-col items-center p-4 rounded-2xl bg-yellow-50 border border-yellow-100 hover:border-yellow-300 hover:bg-yellow-100 transition-all\"><span class=\"text-3xl mb-2\">\ud83d\udc10<\/span><span class=\"font-semibold text-gray-700 text-sm\">Qurban<\/span><\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p><p class=\"text-xs text-gray-500\">Chat on WhatsApp<\/p><\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div><p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p><p class=\"text-xs text-gray-500\">Direct line assistance<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"paymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"paymentModalContent\" class=\"modal-content bg-white rounded-xl shadow-2xl w-full max-w-md relative transform scale-95 opacity-0 transition-all duration-300\">\n <button id=\"closeModalButton\" class=\"absolute -top-3 -right-3 bg-white rounded-full h-8 w-8 flex items-center justify-center text-gray-600 hover:text-black hover:scale-110 transition-transform focus:outline-none shadow-lg\"><i class=\"fas fa-times\"><\/i><\/button>\n <div class=\"p-6 border-b border-gray-200\"><h3 class=\"text-xl font-bold text-dt-blue text-center\">Pay Your Zakat<\/h3><\/div>\n <div class=\"p-6\">\n <div id=\"paymattic-form-container\" class=\"bg-gray-100 border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_384\">\n <form data-wpf_form_id='384' wpf_form_instance='wpf_form_instance_384_1' class='wpf_form wpf_form_instance_384_1 wpf_strip_default_style wpf_form_id_384 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_384' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__384__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"384\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"16\">\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_384_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_384_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_384_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_384_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_384_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_384_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_384_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_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_384_raised_donation\" data-raised=\"0\">\n $0 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 0 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_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: 0%;\"\n name=\"wpf_form_id_384_bar\"\n data-percentage=\"0\"\n >\n 0% <\/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_384_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_384_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_384_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_384\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_384\">\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_384\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_384\">\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_384_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_384_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_384_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_384' 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 <\/p>\n <p class=\"text-xs text-gray-500 mt-2\">Dynamic Form ID based on currency will appear here.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"fixed inset-0 bg-black bg-opacity-60 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 pointer-events-none opacity-0 transition-opacity duration-300 hidden\">\n <div id=\"wiseModalContent\" class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform transition-all opacity-0 -translate-y-10 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div><h2 class=\"text-2xl font-bold text-dt-blue\">Payment via Wise<\/h2><p class=\"text-gray-500 mt-1\">Complete your international payment.<\/p><\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\"><iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe><\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n\n \/\/ Header Logic\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ Mobile Menu Logic\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ Bottom Nav Logic\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n if(menuToShow && !menuToShow.classList.contains('hidden')) {\n openSubmenu(menuToShow);\n } else {\n closeSubmenu(menuToShow);\n }\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300);\n document.body.style.overflow = '';\n };\n\n \/\/ Mega Menu Desktop Hover\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ --- Zakat Calculator Logic ---\n const currencySelect = document.getElementById('currency');\n const nisabBasisSelect = document.getElementById('nisabBasis');\n const nisabValueEl = document.getElementById('nisabValue');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n const allInputs = document.querySelectorAll('.zakat-input');\n const currencySymbolEls = document.querySelectorAll('.currency-symbol');\n const donateZakatButton = document.getElementById('donateZakatButton');\n const openWiseModalBtn = document.getElementById('openWiseModalBtn');\n\n const paymentFormIds = { 'IDR': 384, 'AUD': 385, 'USD': 386, 'SGD': 387, 'MYR': 388, 'TRY': 389 };\n const NISAB_GOLD_GRAMS = 85;\n const NISAB_SILVER_GRAMS = 595;\n const ZAKAT_RATE = 0.025;\n const TROY_OUNCE_IN_GRAMS = 31.1035;\n\n let goldPriceUSD = 0, silverPriceUSD = 0, exchangeRates = {}, currentCurrency = 'USD', currentNisabValue = 0, currentZakatAmount = 0;\n\n async function initializeCalculator() {\n await fetchApiData();\n populateCurrencies();\n addCalculatorListeners();\n updateCalculator();\n }\n\n async function fetchApiData() {\n try {\n \/\/ Mock data for stability in preview, replace with real API in production if needed\n goldPriceUSD = 2350.50 \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = 30.50 \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = { \"USD\": 1, \"IDR\": 16250, \"EUR\": 0.92, \"GBP\": 0.79, \"AUD\": 1.50, \"SGD\": 1.35, \"MYR\": 4.70, \"TRY\": 32.25 };\n } catch (error) {\n console.error(\"Data fetch error\", error);\n }\n }\n\n function populateCurrencies() {\n const favoriteCurrencies = ['IDR', 'USD', 'AUD', '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 currencySelect.value = 'IDR';\n }\n\n function updateCalculator() {\n currentCurrency = currencySelect.value;\n const rate = exchangeRates[currentCurrency];\n const symbol = getCurrencySymbol(currentCurrency);\n \n currencySymbolEls.forEach(el => el.textContent = symbol);\n \n const nisabBasis = nisabBasisSelect.value;\n const grams = nisabBasis === 'gold' ? NISAB_GOLD_GRAMS : NISAB_SILVER_GRAMS;\n const priceUSD = nisabBasis === 'gold' ? goldPriceUSD : silverPriceUSD;\n \n currentNisabValue = grams * priceUSD * rate;\n nisabValueEl.textContent = formatMoney(currentNisabValue, currentCurrency);\n \n \/\/ Calculate Total Assets\n let assets = 0;\n ['goldValue', 'cash', 'otherAssets'].forEach(id => {\n assets += parseFloat(document.getElementById(id).value) || 0;\n });\n \n \/\/ Calculate Liabilities\n let debts = parseFloat(document.getElementById('debts').value) || 0;\n \n const netAssets = assets - debts;\n \n if (netAssets >= currentNisabValue) {\n currentZakatAmount = netAssets * ZAKAT_RATE;\n zakatResultEl.textContent = formatMoney(currentZakatAmount, currentCurrency);\n zakatMessageEl.textContent = \"MaashaAllah, you are eligible to pay Zakat.\";\n zakatMessageEl.className = \"text-xs text-green-500 mt-1 font-bold\";\n donateZakatButton.disabled = false;\n openWiseModalBtn.disabled = false;\n } else {\n currentZakatAmount = 0;\n zakatResultEl.textContent = formatMoney(0, currentCurrency);\n zakatMessageEl.textContent = \"Your net assets are below Nisab.\";\n zakatMessageEl.className = \"text-xs text-red-400 mt-1\";\n donateZakatButton.disabled = true;\n openWiseModalBtn.disabled = true;\n }\n }\n\n function addCalculatorListeners() {\n currencySelect.addEventListener('change', updateCalculator);\n nisabBasisSelect.addEventListener('change', updateCalculator);\n allInputs.forEach(input => input.addEventListener('input', updateCalculator));\n \n donateZakatButton.addEventListener('click', openPayment);\n openWiseModalBtn.addEventListener('click', openWise);\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 initializeCalculator();\n\n \/\/ Payment Modals\n const paymentModal = document.getElementById('paymentModal');\n const paymentModalContent = document.getElementById('paymentModalContent');\n const closePaymentBtn = document.getElementById('closeModalButton');\n const wiseModal = document.getElementById('wisePaymentModal');\n const wiseModalContent = document.getElementById('wiseModalContent');\n const closeWiseBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n\n function openPayment() {\n paymentModal.classList.remove('hidden');\n setTimeout(() => {\n paymentModal.classList.remove('opacity-0', 'pointer-events-none');\n paymentModalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n document.body.style.overflow = 'hidden';\n }\n function closePayment() {\n paymentModalContent.classList.add('scale-95', 'opacity-0');\n paymentModal.classList.add('opacity-0');\n setTimeout(() => {\n paymentModal.classList.add('hidden', 'pointer-events-none');\n document.body.style.overflow = '';\n }, 300);\n }\n \n function openWise() {\n wiseIframe.src = `https:\/\/dtpeduli.com\/donate-via-wise\/?amount=${currentZakatAmount.toFixed(2)}¤cy=${currentCurrency}`;\n wiseModal.classList.remove('hidden');\n setTimeout(() => {\n wiseModal.classList.remove('opacity-0', 'pointer-events-none');\n wiseModalContent.classList.remove('opacity-0', '-translate-y-10');\n }, 10);\n document.body.style.overflow = 'hidden';\n }\n function closeWise() {\n wiseModalContent.classList.add('opacity-0', '-translate-y-10');\n wiseModal.classList.add('opacity-0');\n setTimeout(() => {\n wiseModal.classList.add('hidden', 'pointer-events-none');\n wiseIframe.src = '';\n document.body.style.overflow = '';\n }, 300);\n }\n\n closePaymentBtn.addEventListener('click', closePayment);\n closeWiseBtn.addEventListener('click', closeWise);\n\n \/\/ Hero Slider Automation\n async function initHeroSlider() {\n const sliderContainer = document.getElementById('hero-slider');\n const heroTextContent = document.getElementById('hero-text-content');\n \n try {\n \/\/ Attempt to fetch latest posts from WordPress API\n const response = await fetch('https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed=wp:featuredmedia&per_page=5');\n if (!response.ok) throw new Error('Network response was not ok');\n const posts = await response.json();\n\n \/\/ Filter posts that have images\n const slidesData = posts.filter(p => p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0].source_url).map(p => ({\n image: p._embedded['wp:featuredmedia'][0].source_url,\n title: p.title.rendered,\n link: p.link,\n excerpt: p.excerpt.rendered.replace(\/(<([^>]+)>)\/gi, \"\").substring(0, 100) + \"...\"\n }));\n\n if(slidesData.length === 0) throw new Error('No images');\n \n \/\/ Generate Background Slides\n sliderContainer.innerHTML = slidesData.map((slide, index) => `\n <div class=\"hero-slide absolute inset-0 w-full h-full bg-cover bg-center transition-opacity duration-1000 ease-in-out ${index === 0 ? 'opacity-100 active' : 'opacity-0'}\" style=\"background-image: url('${slide.image}');\"><\/div>\n `).join('');\n \n \/\/ Initial Text Render\n updateHeroText(slidesData[0]);\n\n \/\/ Start Interval\n const slides = sliderContainer.querySelectorAll('.hero-slide');\n let currentSlide = 0;\n setInterval(() => {\n \/\/ Fade out text\n if(heroTextContent) heroTextContent.style.opacity = '0';\n \n \/\/ Change Image\n slides[currentSlide].classList.remove('opacity-100', 'active');\n slides[currentSlide].classList.add('opacity-0');\n currentSlide = (currentSlide + 1) % slides.length;\n slides[currentSlide].classList.remove('opacity-0');\n slides[currentSlide].classList.add('opacity-100', 'active');\n\n \/\/ Update text after fade out\n setTimeout(() => {\n updateHeroText(slidesData[currentSlide]);\n if(heroTextContent) heroTextContent.style.opacity = '1';\n }, 500);\n\n }, 6000); \/\/ 6 seconds per slide\n\n } catch (e) {\n console.warn(\"Slider API failed, using static fallback\");\n }\n\n function updateHeroText(slide) {\n if(!heroTextContent) return;\n heroTextContent.innerHTML = `\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\">Featured Campaign<\/span>\n <h1 class=\"text-3xl md:text-5xl font-lora font-bold mb-6 leading-tight tracking-tight drop-shadow-2xl line-clamp-2 h-[3.6em] overflow-hidden\">${slide.title}<\/h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 leading-relaxed line-clamp-3 h-[4.5em] overflow-hidden\">\n ${slide.excerpt}\n <\/p>\n <div class=\"hidden lg:block\">\n <a href=\"${slide.link}\" target=\"_blank\" 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 Donate Now\n <\/a>\n <\/div>\n `;\n }\n }\n initHeroSlider();\n\n \/\/ --- LOAD MORE CAMPAIGNS LOGIC ---\n const newsContainer = document.getElementById('news-container');\n const loadMoreBtn = document.getElementById('loadMoreBtn');\n const btnLoader = document.getElementById('btn-loader');\n const noMoreContent = document.getElementById('noMoreContent');\n \n let currentNewsPage = 1;\n const newsPerPage = 3;\n let isLoadingNews = false;\n\n async function fetchNews(isAppend = false) {\n if(isLoadingNews) return;\n isLoadingNews = true;\n\n if (!isAppend) {\n newsContainer.innerHTML = `\n <div class=\"col-span-full text-center py-12\">\n <div class=\"loader mx-auto\"><\/div>\n <p class=\"text-gray-500 mt-4\">Loading stories...<\/p>\n <\/div>`;\n } else {\n loadMoreBtn.disabled = true;\n btnLoader.classList.remove('hidden');\n }\n\n try {\n \/\/ Using public REST API instead of admin edit.php\n const apiUrl = `https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/posts?_embed&per_page=${newsPerPage}&page=${currentNewsPage}`;\n \n const response = await fetch(apiUrl);\n \n if (!response.ok) {\n \/\/ If page 2+ returns error (likely 400 for max pages), hide button\n if(isAppend) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n }\n throw new Error('API limit reached or error');\n }\n \n const posts = await response.json();\n \n \/\/ Clear loader if initial load\n if (!isAppend) newsContainer.innerHTML = '';\n \n if(posts.length === 0) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n if (!isAppend) newsContainer.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">No stories found.<\/p>';\n return;\n }\n\n posts.forEach(post => {\n const img = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=News';\n const card = `<div class=\"news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all\" data-aos=\"fade-up\">\n <a href=\"${post.link}\" target=\"_blank\" class=\"block\">\n <div class=\"overflow-hidden h-48\"><img decoding=\"async\" src=\"${img}\" class=\"news-image w-full h-full object-cover transition-transform duration-300\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg text-dt-blue mb-2 line-clamp-2\">${post.title.rendered}<\/h3>\n <p class=\"text-gray-600 text-sm line-clamp-3\">${post.excerpt.rendered.replace(\/<[^>]*>?\/gm, '')}<\/p>\n <span class=\"text-dt-yellow font-bold text-sm mt-4 inline-block\">Donate Now →<\/span>\n <\/div>\n <\/a>\n <\/div>`;\n newsContainer.insertAdjacentHTML('beforeend', card);\n });\n\n \/\/ Update UI state\n currentNewsPage++;\n loadMoreBtn.classList.remove('hidden'); \/\/ Ensure button is shown if data exists\n \n \/\/ If we got fewer posts than requested, it's the end\n if(posts.length < newsPerPage) {\n loadMoreBtn.classList.add('hidden');\n noMoreContent.classList.remove('hidden');\n }\n\n } catch (e) {\n console.error(\"News Fetch Error:\", e);\n if(!isAppend) {\n newsContainer.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">Latest updates currently unavailable.<\/p>';\n loadMoreBtn.classList.add('hidden');\n }\n } finally {\n isLoadingNews = false;\n loadMoreBtn.disabled = false;\n btnLoader.classList.add('hidden');\n }\n }\n\n \/\/ Initial load\n fetchNews(false);\n\n \/\/ Load More Click Event\n if(loadMoreBtn) {\n loadMoreBtn.addEventListener('click', function() {\n fetchNews(true);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Donate & Zakat Calculator | DT Peduli Home About Us Profile Our Management History Official Address Programs Core Pillars Da’wah […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":26,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/16\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}