{"id":1754,"date":"2026-08-22T05:09:29","date_gmt":"2026-08-22T05:09:29","guid":{"rendered":"https:\/\/demo.freshosoft.in\/bargach\/?page_id=1754"},"modified":"2026-08-22T07:49:51","modified_gmt":"2026-08-22T07:49:51","slug":"donate","status":"publish","type":"page","link":"https:\/\/demo.freshosoft.in\/bargach\/donate\/","title":{"rendered":"Donate"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1754\" class=\"elementor elementor-1754\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49929c9 e-con e-atomic-element e-flexbox-base e-e5d6a85 \" data-id=\"49929c9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"49929c9\">\n    \t\t<div class=\"elementor-element elementor-element-c2171e8 elementor-widget elementor-widget-html\" data-id=\"c2171e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     DONATE NOW \u2013 IMAGE LEFT \/ FORM RIGHT (SHORT)\r\n     Compact layout with image on left, form on right.\r\n     Fully mobile responsive. Light, modern design.\r\n     ============================================================ -->\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,380;0,9..144,560;1,9..144,380&family=Inter:wght@300;400;500;600;700&display=swap');\r\n\r\n  .bargach-donate-side {\r\n    --d-bg: #f8f5ee;\r\n    --d-card: #ffffff;\r\n    --d-ink: #1f2a26;\r\n    --d-teal: #146354;\r\n    --d-teal-light: #1f8a75;\r\n    --d-gold: #c47a3a;\r\n    --d-gold-soft: #deb070;\r\n    --d-coral: #d96c52;\r\n    --d-text: #3d534a;\r\n    --d-muted: #6a8a7a;\r\n    --d-border: rgba(20, 99, 84, 0.06);\r\n    --d-shadow: 0 4px 16px rgba(31,42,38,0.04);\r\n\r\n    width: 100%;\r\n    max-width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    background: var(--d-bg);\r\n    overflow: hidden;\r\n  }\r\n  .bargach-donate-side *,\r\n  .bargach-donate-side *::before,\r\n  .bargach-donate-side *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .bargach-donate-side .d-wrap {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: clamp(30px, 4vw, 50px) clamp(16px, 3vw, 40px);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 28px;\r\n  }\r\n\r\n  \/* ===== HERO ===== *\/\r\n  .bargach-donate-side .d-hero {\r\n    text-align: center;\r\n  }\r\n  .bargach-donate-side .d-hero .tag {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n    color: var(--d-coral);\r\n  }\r\n  .bargach-donate-side .d-hero h1 {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 380;\r\n    font-size: clamp(26px, 3.6vw, 40px);\r\n    line-height: 1.08;\r\n    margin: 4px 0 8px;\r\n    color: var(--d-ink);\r\n  }\r\n  .bargach-donate-side .d-hero h1 em {\r\n    font-style: italic;\r\n    color: var(--d-gold);\r\n  }\r\n  .bargach-donate-side .d-hero p {\r\n    font-size: clamp(14px, 1vw, 16px);\r\n    color: var(--d-text);\r\n    line-height: 1.6;\r\n    max-width: 560px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* ===== MAIN CONTENT: IMAGE + FORM ===== *\/\r\n  .bargach-donate-side .d-main {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.2fr;\r\n    gap: 28px;\r\n    align-items: stretch;\r\n  }\r\n\r\n  \/* ===== IMAGE SIDE ===== *\/\r\n  .bargach-donate-side .d-image {\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    box-shadow: var(--d-shadow);\r\n    border: 1px solid var(--d-border);\r\n    height: 100%;\r\n    min-height: 320px;\r\n  }\r\n  .bargach-donate-side .d-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: 0.5s ease;\r\n  }\r\n  .bargach-donate-side .d-image:hover img {\r\n    transform: scale(1.02);\r\n  }\r\n\r\n  \/* ===== FORM SIDE ===== *\/\r\n  .bargach-donate-side .d-form-wrap {\r\n    background: var(--d-card);\r\n    border-radius: 18px;\r\n    padding: 28px 30px 30px;\r\n    border: 1px solid var(--d-border);\r\n    box-shadow: var(--d-shadow);\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n  .bargach-donate-side .d-form-wrap .f-head {\r\n    margin-bottom: 16px;\r\n  }\r\n  .bargach-donate-side .d-form-wrap .f-head .f-tag {\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n    color: var(--d-gold);\r\n  }\r\n  .bargach-donate-side .d-form-wrap .f-head h3 {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 380;\r\n    font-size: clamp(20px, 2.2vw, 28px);\r\n    color: var(--d-ink);\r\n    line-height: 1.1;\r\n  }\r\n  .bargach-donate-side .d-form-wrap .f-head h3 em {\r\n    font-style: italic;\r\n    color: var(--d-gold);\r\n  }\r\n\r\n  .bargach-donate-side .d-form .amount-row {\r\n    display: flex;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 12px;\r\n  }\r\n  .bargach-donate-side .d-form .amount-row .amt-btn {\r\n    padding: 8px 16px;\r\n    border-radius: 10px;\r\n    border: 1px solid var(--d-border);\r\n    background: var(--d-bg);\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    color: var(--d-ink);\r\n    cursor: pointer;\r\n    transition: 0.3s ease;\r\n    flex: 1;\r\n    min-width: 55px;\r\n  }\r\n  .bargach-donate-side .d-form .amount-row .amt-btn:hover {\r\n    border-color: var(--d-gold);\r\n    background: rgba(196, 122, 58, 0.04);\r\n  }\r\n  .bargach-donate-side .d-form .amount-row .amt-btn.active {\r\n    border-color: var(--d-gold);\r\n    background: rgba(196, 122, 58, 0.08);\r\n    box-shadow: 0 0 0 3px rgba(196, 122, 58, 0.06);\r\n  }\r\n  .bargach-donate-side .d-form .amount-row .amt-btn .currency {\r\n    font-size: 11px;\r\n    color: var(--d-muted);\r\n    font-weight: 400;\r\n  }\r\n\r\n  .bargach-donate-side .d-form .fg {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 3px;\r\n    margin-bottom: 10px;\r\n  }\r\n  .bargach-donate-side .d-form .fg label {\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    color: var(--d-text);\r\n  }\r\n  .bargach-donate-side .d-form .fg label .req {\r\n    color: var(--d-coral);\r\n    margin-left: 2px;\r\n  }\r\n  .bargach-donate-side .d-form .fg input,\r\n  .bargach-donate-side .d-form .fg select {\r\n    padding: 9px 14px;\r\n    border-radius: 10px;\r\n    border: 1px solid var(--d-border);\r\n    background: var(--d-bg);\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    color: var(--d-ink);\r\n    outline: none;\r\n    width: 100%;\r\n    transition: 0.3s ease;\r\n  }\r\n  .bargach-donate-side .d-form .fg input:focus,\r\n  .bargach-donate-side .d-form .fg select:focus {\r\n    border-color: var(--d-gold);\r\n    box-shadow: 0 0 0 3px rgba(196, 122, 58, 0.06);\r\n  }\r\n\r\n  .bargach-donate-side .d-form .row2 {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px 14px;\r\n  }\r\n\r\n  .bargach-donate-side .d-form .submit-btn {\r\n    padding: 11px 24px;\r\n    background: var(--d-gold);\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 999px;\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    font-family: inherit;\r\n    cursor: pointer;\r\n    transition: 0.3s ease;\r\n    box-shadow: 0 4px 16px rgba(196, 122, 58, 0.15);\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    width: 100%;\r\n    margin-top: 4px;\r\n  }\r\n  .bargach-donate-side .d-form .submit-btn:hover {\r\n    background: var(--d-gold-soft);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 24px rgba(196, 122, 58, 0.25);\r\n  }\r\n  .bargach-donate-side .d-form .submit-btn .arr {\r\n    display: inline-block;\r\n    transition: 0.3s ease;\r\n  }\r\n  .bargach-donate-side .d-form .submit-btn:hover .arr {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .bargach-donate-side .d-form .secure-note {\r\n    text-align: center;\r\n    font-size: 11px;\r\n    color: var(--d-muted);\r\n    margin-top: 8px;\r\n  }\r\n\r\n  \/* ===== QUICK STATS (below main) ===== *\/\r\n  .bargach-donate-side .d-stats {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 12px;\r\n    background: var(--d-card);\r\n    border-radius: 16px;\r\n    padding: 16px 18px;\r\n    border: 1px solid var(--d-border);\r\n    box-shadow: var(--d-shadow);\r\n  }\r\n  .bargach-donate-side .d-stats .stat {\r\n    text-align: center;\r\n  }\r\n  .bargach-donate-side .d-stats .stat .num {\r\n    font-family: 'Fraunces', Georgia, serif;\r\n    font-weight: 560;\r\n    font-size: clamp(20px, 2.2vw, 30px);\r\n    color: var(--d-teal);\r\n  }\r\n  .bargach-donate-side .d-stats .stat .num .plus {\r\n    font-size: 0.6em;\r\n    color: var(--d-gold);\r\n  }\r\n  .bargach-donate-side .d-stats .stat .label {\r\n    font-size: 10px;\r\n    color: var(--d-muted);\r\n    font-weight: 350;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  \/* ===== RESPONSIVE ===== *\/\r\n  @media (max-width: 1024px) {\r\n    .bargach-donate-side .d-main {\r\n      grid-template-columns: 1fr 1.1fr;\r\n      gap: 22px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .bargach-donate-side .d-wrap { padding: 24px 14px; gap: 22px; }\r\n    .bargach-donate-side .d-main {\r\n      grid-template-columns: 1fr;\r\n      gap: 18px;\r\n    }\r\n    .bargach-donate-side .d-image {\r\n      min-height: 200px;\r\n      max-height: 240px;\r\n    }\r\n    .bargach-donate-side .d-form-wrap { padding: 20px 18px 22px; }\r\n    .bargach-donate-side .d-stats {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 10px;\r\n      padding: 14px 12px;\r\n    }\r\n    .bargach-donate-side .d-form .row2 { grid-template-columns: 1fr; }\r\n    .bargach-donate-side .d-form .amount-row .amt-btn { font-size: 13px; padding: 6px 12px; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .bargach-donate-side .d-wrap { padding: 18px 10px; gap: 18px; }\r\n    .bargach-donate-side .d-hero h1 { font-size: clamp(22px, 5vw, 28px); }\r\n    .bargach-donate-side .d-hero p { font-size: 13px; }\r\n    .bargach-donate-side .d-image { min-height: 150px; max-height: 180px; border-radius: 14px; }\r\n    .bargach-donate-side .d-form-wrap { padding: 16px 14px 18px; border-radius: 14px; }\r\n    .bargach-donate-side .d-form .amount-row { gap: 6px; }\r\n    .bargach-donate-side .d-form .amount-row .amt-btn { font-size: 12px; padding: 6px 10px; min-width: 45px; }\r\n    .bargach-donate-side .d-form .fg input,\r\n    .bargach-donate-side .d-form .fg select { font-size: 13px; padding: 8px 12px; }\r\n    .bargach-donate-side .d-form .submit-btn { font-size: 14px; padding: 10px 18px; }\r\n    .bargach-donate-side .d-stats {\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 8px;\r\n      padding: 12px 8px;\r\n      border-radius: 12px;\r\n    }\r\n    .bargach-donate-side .d-stats .stat .num { font-size: clamp(18px, 4vw, 24px); }\r\n    .bargach-donate-side .d-stats .stat .label { font-size: 9px; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bargach-donate-side * { transition-duration: 0.01ms !important; }\r\n    .bargach-donate-side .d-image:hover img { transform: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ===== HTML ===== -->\r\n<section class=\"bargach-donate-side\" aria-label=\"Donate Now\">\r\n\r\n  <div class=\"d-wrap\">\r\n\r\n    <!-- HERO -->\r\n    <div class=\"d-hero\">\r\n      <div class=\"tag\">Support Our Mission<\/div>\r\n      <h1>Your support <em>changes lives<\/em><\/h1>\r\n      <p>Every contribution helps us provide education, safe water, digital literacy, and skill development to communities across India.<\/p>\r\n    <\/div>\r\n\r\n    <!-- MAIN: IMAGE + FORM -->\r\n    <div class=\"d-main\">\r\n\r\n      <!-- IMAGE -->\r\n      <div class=\"d-image\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/up.freshosoft.work\/bargach\/wp-content\/uploads\/2026\/08\/Real.jpeg\"\r\n          alt=\"Bargach Foundation - Community impact\"\r\n          loading=\"lazy\"\r\n        \/>\r\n      <\/div>\r\n\r\n      <!-- FORM -->\r\n      <div class=\"d-form-wrap\">\r\n        <div class=\"f-head\">\r\n          <div class=\"f-tag\">Make a Donation<\/div>\r\n          <h3>Support <em>our work today<\/em><\/h3>\r\n        <\/div>\r\n\r\n        <form class=\"d-form\" id=\"donateSideForm\">\r\n\r\n          <div class=\"amount-row\">\r\n            <button type=\"button\" class=\"amt-btn\" data-amount=\"500\">\u20b9<span class=\"currency\">500<\/span><\/button>\r\n            <button type=\"button\" class=\"amt-btn\" data-amount=\"1000\">\u20b9<span class=\"currency\">1K<\/span><\/button>\r\n            <button type=\"button\" class=\"amt-btn\" data-amount=\"2500\">\u20b9<span class=\"currency\">2.5K<\/span><\/button>\r\n            <button type=\"button\" class=\"amt-btn\" data-amount=\"5000\">\u20b9<span class=\"currency\">5K<\/span><\/button>\r\n          <\/div>\r\n\r\n          <div class=\"fg\">\r\n            <label for=\"donateAmtSide\">Custom Amount <span class=\"req\">*<\/span><\/label>\r\n            <input type=\"number\" id=\"donateAmtSide\" placeholder=\"Enter amount in \u20b9\" min=\"100\" step=\"100\" required \/>\r\n          <\/div>\r\n\r\n          <div class=\"row2\">\r\n            <div class=\"fg\">\r\n              <label for=\"donateNameSide\">Full Name <span class=\"req\">*<\/span><\/label>\r\n              <input type=\"text\" id=\"donateNameSide\" placeholder=\"Your name\" required \/>\r\n            <\/div>\r\n            <div class=\"fg\">\r\n              <label for=\"donateEmailSide\">Email <span class=\"req\">*<\/span><\/label>\r\n              <input type=\"email\" id=\"donateEmailSide\" placeholder=\"you@example.com\" required \/>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"fg\">\r\n            <label for=\"donateFreqSide\">Frequency<\/label>\r\n            <select id=\"donateFreqSide\">\r\n              <option value=\"one-time\">One-Time<\/option>\r\n              <option value=\"monthly\">Monthly<\/option>\r\n              <option value=\"quarterly\">Quarterly<\/option>\r\n            <\/select>\r\n          <\/div>\r\n\r\n          <button type=\"submit\" class=\"submit-btn\">\r\n            Donate Now <span class=\"arr\">\u2192<\/span>\r\n          <\/button>\r\n\r\n          <div class=\"secure-note\">\ud83d\udd12 Secure donation. 100% goes to our programmes.<\/div>\r\n        <\/form>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- QUICK STATS -->\r\n    <div class=\"d-stats\">\r\n      <div class=\"stat\">\r\n        <div class=\"num\">89K<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"label\">Lives Impacted<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"num\">30<\/div>\r\n        <div class=\"label\">IT Centres<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"num\">1.2K<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"label\">Safe Water<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"num\">3<\/div>\r\n        <div class=\"label\">States Served<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n  (function() {\r\n    var form = document.getElementById('donateSideForm');\r\n    var amountBtns = form.querySelectorAll('.amt-btn');\r\n    var amountInput = document.getElementById('donateAmtSide');\r\n\r\n    amountBtns.forEach(function(btn) {\r\n      btn.addEventListener('click', function() {\r\n        amountBtns.forEach(function(b) { b.classList.remove('active'); });\r\n        this.classList.add('active');\r\n        amountInput.value = this.getAttribute('data-amount');\r\n      });\r\n    });\r\n\r\n    amountInput.addEventListener('input', function() {\r\n      amountBtns.forEach(function(b) { b.classList.remove('active'); });\r\n    });\r\n\r\n    form.addEventListener('submit', function(e) {\r\n      e.preventDefault();\r\n\r\n      var name = document.getElementById('donateNameSide').value.trim();\r\n      var email = document.getElementById('donateEmailSide').value.trim();\r\n      var amount = amountInput.value.trim();\r\n\r\n      if (!name || !email || !amount) {\r\n        alert('Please fill in all required fields.');\r\n        return;\r\n      }\r\n      if (parseInt(amount) < 100) {\r\n        alert('Minimum donation amount is \u20b9100.');\r\n        return;\r\n      }\r\n      if (!email.includes('@') || !email.includes('.')) {\r\n        alert('Please enter a valid email address.');\r\n        return;\r\n      }\r\n\r\n      var freq = document.getElementById('donateFreqSide').value;\r\n      var mailtoLink = 'mailto:info@bargachfoundation.org?subject=' +\r\n        encodeURIComponent('Donation: \u20b9' + amount + ' (' + freq + ')') +\r\n        '&body=' +\r\n        encodeURIComponent('Name: ' + name + '\\n') +\r\n        encodeURIComponent('Email: ' + email + '\\n') +\r\n        encodeURIComponent('Amount: \u20b9' + amount + '\\n') +\r\n        encodeURIComponent('Frequency: ' + freq);\r\n\r\n      window.location.href = mailtoLink;\r\n\r\n      var btn = form.querySelector('.submit-btn');\r\n      var original = btn.innerHTML;\r\n      btn.innerHTML = '\u2713 Thank You!';\r\n      btn.style.background = '#2a9d8f';\r\n      setTimeout(function() {\r\n        btn.innerHTML = original;\r\n        btn.style.background = '';\r\n        form.reset();\r\n        amountBtns.forEach(function(b) { b.classList.remove('active'); });\r\n      }, 3000);\r\n    });\r\n\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Support Our Mission Your support changes lives Every contribution helps us provide education, safe water, digital literacy, and skill development to communities across India. Make a Donation Support our work today \u20b9500 \u20b91K \u20b92.5K \u20b95K Custom Amount * Full Name * Email * Frequency One-TimeMonthlyQuarterly Donate Now \u2192 \ud83d\udd12 Secure donation. 100% goes to our [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":4,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1754\/revisions"}],"predecessor-version":[{"id":1832,"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/pages\/1754\/revisions\/1832"}],"wp:attachment":[{"href":"https:\/\/demo.freshosoft.in\/bargach\/wp-json\/wp\/v2\/media?parent=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}