.elementor-1943 .elementor-element.elementor-element-1c9ca75 .elementor-icon-wrapper{text-align:center;}.elementor-1943 .elementor-element.elementor-element-1c9ca75.elementor-view-stacked .elementor-icon{background-color:#00D4AA;}.elementor-1943 .elementor-element.elementor-element-1c9ca75.elementor-view-framed .elementor-icon, .elementor-1943 .elementor-element.elementor-element-1c9ca75.elementor-view-default .elementor-icon{color:#00D4AA;border-color:#00D4AA;}.elementor-1943 .elementor-element.elementor-element-1c9ca75.elementor-view-framed .elementor-icon, .elementor-1943 .elementor-element.elementor-element-1c9ca75.elementor-view-default .elementor-icon svg{fill:#00D4AA;}.elementor-1943 .elementor-element.elementor-element-1c9ca75 .elementor-icon{font-size:40px;}.elementor-1943 .elementor-element.elementor-element-1c9ca75 .elementor-icon svg{height:40px;}.elementor-1943 .elementor-element.elementor-element-34fafa5{text-align:center;}.elementor-1943 .elementor-element.elementor-element-34fafa5 .elementor-heading-title{color:#333333;font-family:"Roboto", Sans-serif;font-size:24px;font-weight:700;}.elementor-1943 .elementor-element.elementor-element-c12fd67 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:700;background-color:#6EC1E4;border-style:solid;border-radius:8px 8px 8px 8px;}.elementor-1943 .elementor-element.elementor-element-c12fd67 .elementor-button:hover, .elementor-1943 .elementor-element.elementor-element-c12fd67 .elementor-button:focus{background-color:#0052CC;}.elementor-1943 .elementor-element.elementor-element-c12fd67 > .elementor-widget-container{padding:0px 0px 0px 0px;}/* Start custom CSS for button, class: .elementor-element-c12fd67 */<div class="paypal-button-section">
  <!-- <form action="https://www.sandbox.paypal.com/cgi-bin/webscr"> -->
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="donationForm">
    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="info@dvoiceofhope.org">
    <input type="hidden" name="item_name" id="paypalItemName" value="Support food bank program">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="amount" id="paypalAmount" value="75">
    <input type="hidden" name="return" value="https://redesign.dvoiceofhope.org/thank-you">
    <input type="hidden" name="cancel_return" value="https://redesign.dvoiceofhope.org/donate">
    
    <button type="submit" class="donate-button">
      <span class="button-text">Donate Now</span>
    </button>
  </form>
  
  <p class="secure-note">
    <span class="lock-icon">🔒</span>
    Secure payment powered by PayPal
  </p>
</div>


<style>
.paypal-button-section {
  max-width: 650px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.donate-button {
  width: 100%;
  padding: 22px 50px;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #6EC1E4 0%, #5ab0d6 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(110, 193, 228, 0.4);
}

.donate-button:hover {
  background: linear-gradient(135deg, #5ab0d6 0%, #4a9fc7 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(110, 193, 228, 0.5);
}

.button-text {
  letter-spacing: 0.5px;
}

.secure-note {
  margin-top: 18px;
  color: #888;
  font-size: 14px;
}

.lock-icon {
  font-size: 16px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('donationForm');
  
  form.addEventListener('submit', function(e) {
    let amount = document.getElementById('selectedAmount') ? 
                 document.getElementById('selectedAmount').value : 25;
    
    if (!amount || amount == 0) {
      amount = document.getElementById('customAmount') ? 
               document.getElementById('customAmount').value : 25;
    }
    
    document.getElementById('paypalAmount').value = amount;
  });
});
</script>
```

---

IMPORTANT - TO MAKE IT WORK:
============================

1. REPLACE PAYPAL EMAIL:
   Change: sb-donate@business.example.com
   To: YOUR_ACTUAL_PAYPAL_EMAIL@gmail.com

2. REPLACE RETURN URLs:
   Change: https://yoursite.com/thank-you
   To: Your actual thank you page URL
   
   Change: https://yoursite.com/donate
   To: Your actual donate page URL

3. FOR TESTING (SANDBOX):
   - Keep: sandbox.paypal.com
   - You need a PayPal Sandbox account from developer.paypal.com

4. FOR LIVE DONATIONS:
   Change: https://www.sandbox.paypal.com/cgi-bin/webscr
   To: https://www.paypal.com/cgi-bin/webscr

---

QUICK TEST VERSION - USE THIS TO TEST NOW:
==========================================

```html
<div class="paypal-button-section">
  <form action="https://www.paypal.com/donate" method="post" target="_top">
    <input type="hidden" name="hosted_button_id" value="XXXXXXXXXX">
    <button type="submit" class="donate-button">
      <span class="button-text">Donate with PayPal</span>
    </button>
  </form>
  
  <p class="secure-note">
    🔒 Secure payment powered by PayPal
  </p>
</div>

<style>
.paypal-button-section {
  max-width: 650px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.donate-button {
  width: 100%;
  padding: 22px 50px;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #6EC1E4 0%, #5ab0d6 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(110, 193, 228, 0.4);
}

.donate-button:hover {
  background: linear-gradient(135deg, #5ab0d6 0%, #4a9fc7 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(110, 193, 228, 0.5);
}

.button-text {
  letter-spacing: 0.5px;
}

.secure-note {
  margin-top: 18px;
  color: #888;
  font-size: 14px;
}
</style>
```

For the test version above, you need to:
1. Go to PayPal.com
2. Log in to your account
3. Go to: Profile → My selling tools → PayPal buttons
4. Create a "Donate" button
5. Copy the "hosted_button_id" value
6. Replace XXXXXXXXXX with your actual button ID

---

EASIEST SOLUTION - JUST USE PAYPAL'S GENERATED CODE:
====================================================

1. Go to: https://www.paypal.com/donate/buttons
2. Sign in to your PayPal account
3. Click "Create donation button"
4. Customize it (add your charity name, etc.)
5. Click "Create Button"
6. Copy the HTML code they give you
7. Paste it into your HTML widget in Elementor

Then add this CSS in the same HTML widget to style it:

<style>
/* Override PayPal button styling */
form {
  max-width: 650px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

input[type="submit"],
button[type="submit"] {
  width: 100% !important;
  padding: 22px 50px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #6EC1E4 0%, #5ab0d6 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
}
</style>/* End custom CSS */