{"id":1849,"date":"2026-02-15T19:43:27","date_gmt":"2026-02-15T19:43:27","guid":{"rendered":"https:\/\/hareerinitiative.com\/new2016\/?page_id=1849"},"modified":"2026-05-03T08:01:52","modified_gmt":"2026-05-03T08:01:52","slug":"join-us","status":"publish","type":"page","link":"https:\/\/hareerinitiative.com\/ar\/join-us\/","title":{"rendered":"\u0627\u0646\u0636\u0645 \u0627\u0644\u064a\u0646\u0627"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Action Section with Donation Modal<\/title>\r\n <style>\r\n \/* --- Original Section Styles --- *\/\r\n .modern-action-section {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n padding: 4rem 2rem;\r\n background: linear-gradient(135deg, #ec58a0 0%, #2cc0d4 100%);\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 20px;\r\n margin: 20px 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .action-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Decorative circles *\/\r\n .decor-circle {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.05);\r\n z-index: 1;\r\n pointer-events: none; \/* Ensures clicks pass through *\/\r\n }\r\n\r\n .circle-1 {\r\n width: 300px;\r\n height: 300px;\r\n top: -150px;\r\n right: -50px;\r\n background: rgba(236, 88, 160, 0.15);\r\n }\r\n\r\n .circle-2 {\r\n width: 200px;\r\n height: 200px;\r\n bottom: -50px;\r\n left: -50px;\r\n background: rgba(44, 192, 212, 0.15);\r\n }\r\n\r\n .content-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 3rem;\r\n margin-bottom: 4rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .text-content {\r\n flex: 1;\r\n min-width: 300px;\r\n }\r\n\r\n .badge {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n border-radius: 50px;\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n margin-bottom: 1.5rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .main-title {\r\n font-size: clamp(2rem, 5vw, 3rem);\r\n font-weight: 800;\r\n line-height: 1.2;\r\n color: white;\r\n margin-bottom: 1.5rem;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .description {\r\n font-size: 1.1rem;\r\n color: rgba(255, 255, 255, 0.9);\r\n max-width: 500px;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Updated Buttons Container *\/\r\n .buttons-container {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n min-width: 300px;\r\n flex-direction: column; \/* Stacks buttons vertically for better fit *\/\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .buttons-container {\r\n flex-direction: row; \/* Side by side on larger screens *\/\r\n align-items: stretch;\r\n }\r\n }\r\n\r\n .action-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n padding: 1rem 1.5rem;\r\n border-radius: 50px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: none;\r\n flex: 1;\r\n white-space: nowrap;\r\n }\r\n\r\n .volunteer-btn {\r\n background: #ffffff;\r\n color: #ec58a0;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .volunteer-btn:hover {\r\n background: #f0f0f0;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .donate-btn {\r\n background: #ec58a0;\r\n color: white;\r\n box-shadow: 0 10px 20px rgba(236, 88, 160, 0.3);\r\n border: 2px solid white;\r\n }\r\n\r\n .donate-btn:hover {\r\n background: #d43d85;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(236, 88, 160, 0.4);\r\n }\r\n\r\n \/* New Hair Donation Button Style *\/\r\n .hair-btn {\r\n background: #2cc0d4;\r\n color: white;\r\n box-shadow: 0 10px 20px rgba(44, 192, 212, 0.3);\r\n border: 2px solid white;\r\n }\r\n\r\n .hair-btn:hover {\r\n background: #1fa5b8;\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(44, 192, 212, 0.4);\r\n }\r\n\r\n .btn-icon {\r\n font-size: 1.2rem;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .action-btn:hover .btn-icon {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Stats section *\/\r\n .stats-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n gap: 2rem;\r\n padding: 2rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n flex: 1;\r\n min-width: 120px;\r\n }\r\n\r\n .stat-number {\r\n display: block;\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: white;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.95rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .stat-divider {\r\n width: 1px;\r\n height: 40px;\r\n background: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n \/* --- NEW: Modal Styles --- *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(5px);\r\n z-index: 9999;\r\n display: none; \/* Hidden by default *\/\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .modal-overlay.active {\r\n display: flex;\r\n opacity: 1;\r\n }\r\n\r\n .donation-modal {\r\n background: white;\r\n width: 90%;\r\n max-width: 500px;\r\n border-radius: 20px;\r\n padding: 2.5rem;\r\n position: relative;\r\n transform: translateY(20px);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal-overlay.active .donation-modal {\r\n transform: translateY(0);\r\n }\r\n\r\n .modal-header {\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .modal-title {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: #333;\r\n margin: 0;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .modal-title::after {\r\n content: '';\r\n display: block;\r\n width: 50%;\r\n height: 4px;\r\n background: linear-gradient(90deg, #ec58a0, #2cc0d4);\r\n margin: 0.5rem auto 0;\r\n border-radius: 2px;\r\n }\r\n\r\n .modal-close {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: #f0f0f0;\r\n border: none;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n color: #666;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .modal-close:hover {\r\n background: #e0e0e0;\r\n color: #333;\r\n transform: rotate(90deg);\r\n }\r\n\r\n .donation-method {\r\n background: #f9f9f9;\r\n border-radius: 12px;\r\n padding: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n border-left: 5px solid #ec58a0;\r\n }\r\n\r\n .method-title {\r\n font-weight: 700;\r\n color: #333;\r\n margin-bottom: 0.75rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .method-content {\r\n font-family: 'Courier New', Courier, monospace;\r\n background: white;\r\n padding: 0.75rem;\r\n border-radius: 6px;\r\n border: 1px solid #eee;\r\n color: #555;\r\n font-size: 0.95rem;\r\n word-break: break-all;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .copy-btn {\r\n background: none;\r\n border: none;\r\n color: #2cc0d4;\r\n cursor: pointer;\r\n font-weight: bold;\r\n font-size: 0.85rem;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .copy-btn:hover {\r\n background: #e0fbff;\r\n }\r\n\r\n .iban-details {\r\n display: grid;\r\n gap: 0.5rem;\r\n }\r\n\r\n .iban-row {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.9rem;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 0.25rem;\r\n }\r\n\r\n .iban-label {\r\n color: #888;\r\n font-weight: 500;\r\n }\r\n\r\n .iban-value {\r\n color: #333;\r\n font-weight: 600;\r\n text-align: right;\r\n }\r\n\r\n \/* Responsive design *\/\r\n @media (max-width: 768px) {\r\n .modern-action-section {\r\n padding: 3rem 1.5rem;\r\n }\r\n\r\n .content-wrapper {\r\n flex-direction: column;\r\n text-align: center;\r\n gap: 2rem;\r\n }\r\n\r\n .text-content {\r\n text-align: center;\r\n }\r\n\r\n .description {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .buttons-container {\r\n width: 100%;\r\n }\r\n\r\n .action-btn {\r\n width: 100%;\r\n min-width: auto;\r\n }\r\n\r\n .stats-container {\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n }\r\n\r\n .stat-divider {\r\n width: 80px;\r\n height: 1px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Main Action Section -->\r\n <section class=\"modern-action-section\">\r\n <div class=\"action-container\">\r\n <!-- Decorative elements -->\r\n <div class=\"decor-circle circle-1\"><\/div>\r\n <div class=\"decor-circle circle-2\"><\/div>\r\n \r\n <!-- Content wrapper -->\r\n <div class=\"content-wrapper\">\r\n <!-- Left content -->\r\n <div class=\"text-content\">\r\n <span class=\"badge\">\u0623\u062d\u062f\u062b \u0641\u0631\u0642\u064b\u0627<\/span>\r\n <h2 class=\"main-title\">\u0627\u0646\u0636\u0645 \u0625\u0644\u064a\u0646\u0627 \u0641\u064a \u0627\u0644\u0625\u0628\u062f\u0627\u0639<br>\u0627\u0644\u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0625\u064a\u062c\u0627\u0628\u064a<\/h2>\r\n <p class=\"description\">\u0628\u0625\u0645\u0643\u0627\u0646 \u062f\u0639\u0645\u0643\u0645 \u0623\u0646 \u064a\u063a\u064a\u0631 \u062d\u064a\u0627\u0629 \u0627\u0644\u0646\u0627\u0633 \u0648\u064a\u0628\u0646\u064a \u063a\u062f\u0627\u064b \u0623\u0641\u0636\u0644 \u0644\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0645\u062d\u062a\u0627\u062c\u0629.<\/p>\r\n <\/div>\r\n \r\n <!-- Buttons container -->\r\n <div class=\"buttons-container\">\r\n <!-- Volunteer Button -->\r\n <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdtzYQBP9DJSqfo1PYDGsTYP8ku1XrKfnxugOk_KZ-TkJ-Gvw\/viewform\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-btn volunteer-btn\">\r\n <span class=\"btn-text\">\u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u0641\u0631\u064a\u0642 \u0627\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646<\/span>\r\n <span class=\"btn-icon\">\ud83e\udd1d<\/span>\r\n <\/a>\r\n \r\n <!-- Donate Button: Now triggers modal -->\r\n <button type=\"button\" id=\"openDonateModal\" class=\"action-btn donate-btn\">\r\n <span class=\"btn-text\">\u062a\u0628\u0631\u0639 \u0627\u0644\u0622\u0646<\/span>\r\n <span class=\"btn-icon\">\u2764\ufe0f<\/span>\r\n <\/button>\r\n\r\n <!-- Hair Donations Button: NEW -->\r\n <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdjSTSZF34lH14eN-PDR8exDsgdt8y8LWI7xgQ6CGryuz3hhA\/viewform?usp=header\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"action-btn hair-btn\">\r\n <span class=\"btn-text\">\u0627\u0644\u062a\u0628\u0631\u0639 \u0628\u0627\u0644\u0634\u0639\u0631<\/span>\r\n <span class=\"btn-icon\">\u2702\ufe0f<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Stats section -->\r\n <div class=\"stats-container\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">500+<\/span>\r\n <span class=\"stat-label\">\u0627\u0644\u0645\u062a\u0637\u0648\u0639\u0648\u0646 \u0627\u0644\u0646\u0634\u0637\u0648\u0646<\/span>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">10K+<\/span>\r\n <span class=\"stat-label\">\u0627\u0644\u0623\u0634\u062e\u0627\u0635 \u0627\u0644\u0645\u0633\u062a\u062f\u0641\u064a\u062f\u0648\u0646<\/span>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">15+<\/span>\r\n <span class=\"stat-label\">\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Donation Modal Structure -->\r\n <div class=\"modal-overlay\" id=\"donationModal\">\r\n <div class=\"donation-modal\">\r\n <button class=\"modal-close\" id=\"closeDonateModal\" aria-label=\"Close modal\">×<\/button>\r\n \r\n <div class=\"modal-header\">\r\n <h3 class=\"modal-title\">\u0627\u0644\u062f\u0639\u0645 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062c\u0645\u0639 \u0627\u0644\u062a\u0628\u0631\u0639\u0627\u062a \u0627\u0644\u0642\u064a\u0651\u0645\u0629<\/h3>\r\n <\/div>\r\n\r\n <div class=\"modal-body\">\r\n <!-- Cliq Section -->\r\n <div class=\"donation-method\">\r\n <div class=\"method-title\">\r\n <span>\ud83d\udcb3<\/span> \u0639\u0646 \u0637\u0631\u064a\u0642 \u0627\u0644\u0643\u0644\u064a\u0643\r\n <\/div>\r\n <div class=\"method-content\">\r\n <span id=\"cliq-id\">HARIR159<\/span>\r\n <button class=\"copy-btn\" onclick=\"copyText('HARIR159')\">COPY<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bank Transfer Section -->\r\n <div class=\"donation-method\" style=\"border-left-color: #2cc0d4;\">\r\n <div class=\"method-title\">\r\n <span>\ud83c\udfe6<\/span> \u062a\u062d\u0648\u064a\u0644 \u0628\u0646\u0643\u064a\r\n <\/div>\r\n \r\n <div class=\"iban-details\">\r\n <div class=\"iban-row\">\r\n <span class=\"iban-label\">Account Name<\/span>\r\n <span class=\"iban-value\">HARIR LLTANMYA AL MOJTMAYA COMPANY<\/span>\r\n <\/div>\r\n <div class=\"iban-row\">\r\n <span class=\"iban-label\">IBAN Number<\/span>\r\n <span class=\"iban-value\">J085JKBA2490006892340013002000<\/span>\r\n <\/div>\r\n <div class=\"iban-row\">\r\n <span class=\"iban-label\">Swift Code<\/span>\r\n <span class=\"iban-value\">JKBAJOAM<\/span>\r\n <\/div>\r\n <div class=\"iban-row\" style=\"border-bottom: none;\">\r\n <span class=\"iban-label\">Bank Name<\/span>\r\n <span class=\"iban-value\">JORDAN KUWAIT BANK<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Scripts for Modal Interaction -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const openBtn = document.getElementById('openDonateModal');\r\n const closeBtn = document.getElementById('closeDonateModal');\r\n const modal = document.getElementById('donationModal');\r\n const overlay = document.getElementById('donationModal');\r\n\r\n \/\/ Open Modal\r\n openBtn.addEventListener('click', () => {\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\r\n });\r\n\r\n \/\/ Close Modal Function\r\n const closeModal = () => {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = ''; \/\/ Restore scrolling\r\n };\r\n\r\n \/\/ Close via X button\r\n closeBtn.addEventListener('click', closeModal);\r\n\r\n \/\/ Close via clicking outside the modal content\r\n overlay.addEventListener('click', (e) => {\r\n if (e.target === overlay) {\r\n closeModal();\r\n }\r\n });\r\n\r\n \/\/ Close via Escape key\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && modal.classList.contains('active')) {\r\n closeModal();\r\n }\r\n });\r\n });\r\n\r\n \/\/ Copy to Clipboard Functionality\r\n function copyText(text) {\r\n navigator.clipboard.writeText(text).then(() => {\r\n \/\/ Create a temporary toast message\r\n const toast = document.createElement('div');\r\n toast.textContent = 'Copied to clipboard!';\r\n toast.style.position = 'fixed';\r\n toast.style.bottom = '20px';\r\n toast.style.left = '50%';\r\n toast.style.transform = 'translateX(-50%)';\r\n toast.style.background = 'rgba(0,0,0,0.8)';\r\n toast.style.color = 'white';\r\n toast.style.padding = '10px 20px';\r\n toast.style.borderRadius = '30px';\r\n toast.style.zIndex = '10000';\r\n toast.style.fontSize = '0.9rem';\r\n \r\n document.body.appendChild(toast);\r\n\r\n \/\/ Remove toast after 2 seconds\r\n setTimeout(() => {\r\n toast.remove();\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Failed to copy: ', err);\r\n });\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Action Section with Donation Modal MAKE A DIFFERENCE Join Us in CreatingPositive Change Your support can transform lives and build a better tomorrow for communities in need. Become a Volunteer […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-1849","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/pages\/1849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/comments?post=1849"}],"version-history":[{"count":28,"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/pages\/1849\/revisions"}],"predecessor-version":[{"id":2137,"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/pages\/1849\/revisions\/2137"}],"wp:attachment":[{"href":"https:\/\/hareerinitiative.com\/ar\/wp-json\/wp\/v2\/media?parent=1849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}