/* =========================================================
GLOBAL
========================================================= */
.apg-page *{
box-sizing:border-box;
}
.apg-page{
--orange:#f47b20;
--orange-dark:#d85c0b;
--green:#087443;
--green-dark:#04542f;
--cream:#fff8f0;
--light:#f5fbf7;
--dark:#18392b;
--text:#596b61;
font-family:"Linotype Devanagari","Noto Sans Devanagari",sans-serif;
color:var(--dark);
overflow:hidden;
}
.apg-page h1,
.apg-page h2,
.apg-page h3,
.apg-page h4{
font-family:"Bakbak One","Noto Sans Devanagari",sans-serif;
}
.apg-container{
width:min(1180px,92%);
margin:auto;
}
/* =========================================================
HERO
========================================================= */
.apg-hero{
position:relative;
padding:105px 0 90px;
background:
radial-gradient(circle at 90% 10%,rgba(244,123,32,.16),transparent 25%),
radial-gradient(circle at 5% 85%,rgba(8,116,67,.13),transparent 30%),
linear-gradient(135deg,#fffaf5,#ffffff 55%,#f4fbf7);
}
.apg-hero-grid{
display:grid;
grid-template-columns:1fr .8fr;
gap:70px;
align-items:center;
}
.apg-label{
display:inline-flex;
align-items:center;
gap:9px;
padding:9px 17px;
border-radius:50px;
background:#fff0e3;
color:var(--orange-dark);
font-size:13px;
font-weight:800;
letter-spacing:.7px;
}
.apg-label i{
font-size:12px;
}
.apg-hero h1{
font-size:clamp(45px,5.5vw,72px);
line-height:1.05;
margin:23px 0;
letter-spacing:-1px;
}
.apg-hero h1 span{
color:var(--orange);
}
.apg-hero h1 .green{
color:var(--green);
}
.apg-hero-text{
font-size:19px;
line-height:1.9;
color:var(--text);
max-width:650px;
}
.apg-hero-text strong{
color:var(--green);
}
.apg-hero-quote{
margin-top:25px;
padding:20px 23px;
border-left:4px solid var(--orange);
background:rgba(255,255,255,.7);
border-radius:0 18px 18px 0;
}
.apg-hero-quote p{
margin:0;
font-size:17px;
line-height:1.8;
}
/* =========================================================
HERO VISUAL
========================================================= */
.apg-heart-visual{
min-height:430px;
position:relative;
display:grid;
place-items:center;
}
.apg-heart-circle{
width:340px;
height:340px;
border-radius:50%;
background:
radial-gradient(circle,#fff 40%,#fff1e5 41%,#fff1e5 60%,transparent 61%),
linear-gradient(135deg,#fff8f0,#eaf7f0);
display:grid;
place-items:center;
box-shadow:
0 25px 70px rgba(8,116,67,.12);
animation:apgFloat 5s ease-in-out infinite;
}
.apg-heart-circle i{
font-size:100px;
color:var(--orange);
filter:drop-shadow(0 12px 20px rgba(244,123,32,.2));
animation:apgHeartbeat 1.8s infinite;
}
.apg-floating{
position:absolute;
background:#fff;
border-radius:18px;
padding:14px 17px;
box-shadow:0 15px 40px rgba(0,0,0,.1);
display:flex;
align-items:center;
gap:11px;
}
.apg-floating i{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:50%;
background:#fff0e3;
color:var(--orange);
}
.apg-floating strong{
display:block;
font-size:13px;
}
.apg-floating span{
display:block;
color:#718078;
font-size:11px;
}
.apg-floating.one{
top:45px;
left:0;
}
.apg-floating.two{
right:0;
bottom:55px;
}
/* =========================================================
WHY DONATE
========================================================= */
.apg-why{
padding:95px 0;
background:#fff;
}
.apg-heading{
text-align:center;
max-width:750px;
margin:0 auto 55px;
}
.apg-heading h2{
font-size:45px;
line-height:1.15;
margin:18px 0;
}
.apg-heading h2 span{
color:var(--orange);
}
.apg-heading p{
color:var(--text);
line-height:1.8;
}
.apg-reasons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.apg-reason{
padding:30px 23px;
border:1px solid #e9efeb;
border-radius:24px;
transition:.35s;
background:#fff;
}
.apg-reason:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(8,116,67,.1);
}
.apg-reason i{
font-size:28px;
color:var(--green);
margin-bottom:18px;
}
.apg-reason h3{
font-size:18px;
margin:0 0 9px;
}
.apg-reason p{
color:var(--text);
font-size:13px;
line-height:1.75;
margin:0;
}
/* =========================================================
DONATION AREA
========================================================= */
.apg-donate{
padding:105px 0;
background:
linear-gradient(135deg,#f4fbf7,#fff8f0);
}
.apg-donate-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:40px;
align-items:start;
}
/* QR CARD */
.apg-qr-card{
background:var(--green);
color:#fff;
border-radius:32px;
padding:38px 30px;
text-align:center;
position:sticky;
top:110px;
overflow:hidden;
}
.apg-qr-card:before{
content:"";
width:220px;
height:220px;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
position:absolute;
top:-120px;
left:-80px;
}
.apg-qr-card h2{
font-size:32px;
margin:0 0 8px;
position:relative;
}
.apg-qr-card>p{
color:rgba(255,255,255,.78);
font-size:13px;
line-height:1.7;
position:relative;
}
.apg-qr-box{
background:#fff;
padding:17px;
border-radius:22px;
width:245px;
height:245px;
margin:28px auto 20px;
position:relative;
box-shadow:0 15px 35px rgba(0,0,0,.18);
}
.apg-qr-box img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.apg-scan{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.13);
padding:9px 15px;
border-radius:50px;
}
.apg-secure{
margin-top:18px;
color:rgba(255,255,255,.6);
font-size:11px;
}
/* FORM */
.apg-form-card{
background:#fff;
padding:42px;
border-radius:32px;
box-shadow:0 20px 55px rgba(10,60,40,.08);
}
.apg-form-card h2{
font-size:37px;
margin:0 0 10px;
}
.apg-form-card>p{
color:var(--text);
margin-bottom:30px;
line-height:1.7;
}
.apg-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.apg-field{
margin-bottom:5px;
}
.apg-field.full{
grid-column:1/-1;
}
.apg-field label{
display:block;
font-size:13px;
font-weight:800;
margin-bottom:8px;
color:#344a3e;
}
.apg-field label span{
color:var(--orange);
}
.apg-input-wrap{
position:relative;
}
.apg-input-wrap i{
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
color:#9aac9f;
font-size:14px;
}
.apg-field input,
.apg-field textarea,
.apg-field select{
width:100%;
border:1px solid #e0e8e3;
background:#fbfdfc;
border-radius:14px;
padding:14px 15px 14px 43px;
outline:none;
font-family:"Linotype Devanagari","Noto Sans Devanagari",sans-serif;
font-size:14px;
color:var(--dark);
transition:.25s;
}
.apg-field textarea{
min-height:110px;
resize:vertical;
padding-left:15px;
}
.apg-field input:focus,
.apg-field textarea:focus,
.apg-field select:focus{
border-color:var(--orange);
box-shadow:0 0 0 4px rgba(244,123,32,.08);
}
.apg-amounts{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:4px;
}
.apg-amount{
border:1px solid #dfe8e2;
background:#fff;
padding:10px 17px;
border-radius:50px;
cursor:pointer;
font-weight:800;
color:var(--green);
transition:.25s;
}
.apg-amount:hover,
.apg-amount.active{
background:var(--green);
color:#fff;
border-color:var(--green);
}
.apg-payment-note{
margin-top:25px;
padding:15px 17px;
border-radius:15px;
background:#fff8f0;
color:#6b716d;
font-size:12px;
line-height:1.7;
}
.apg-payment-note i{
color:var(--orange);
margin-right:5px;
}
.apg-pay-btn{
width:100%;
border:0;
margin-top:22px;
padding:16px 25px;
border-radius:50px;
background:linear-gradient(135deg,var(--orange),#ff9845);
color:#fff;
font-size:15px;
font-weight:800;
cursor:pointer;
font-family:"Linotype Devanagari","Noto Sans Devanagari",sans-serif;
box-shadow:0 13px 30px rgba(244,123,32,.2);
transition:.3s;
}
.apg-pay-btn:hover{
transform:translateY(-3px);
}
/* =========================================================
PAYMENT SUCCESS
========================================================= */
.apg-success{
display:none;
text-align:center;
padding:55px 30px;
}
.apg-success.show{
display:block;
}
.apg-success-icon{
width:85px;
height:85px;
border-radius:50%;
background:#eaf8f0;
color:var(--green);
display:grid;
place-items:center;
font-size:38px;
margin:0 auto 22px;
animation:apgPop .5s ease;
}
.apg-success h2{
font-size:38px;
color:var(--green);
margin:0 0 12px;
}
.apg-success p{
color:var(--text);
line-height:1.8;
}
.apg-receipt{
margin:30px auto;
padding:25px;
max-width:500px;
background:#fffaf5;
border:1px dashed #f2c29c;
border-radius:20px;
text-align:left;
}
.apg-receipt-title{
text-align:center;
font-family:"Bakbak One";
font-size:24px;
color:var(--green);
margin-bottom:18px;
}
.apg-receipt-row{
display:flex;
justify-content:space-between;
gap:20px;
border-bottom:1px solid #eee5dd;
padding:9px 0;
font-size:13px;
}
.apg-receipt-row:last-child{
border-bottom:0;
}
.apg-receipt-row strong{
color:var(--dark);
}
.apg-receipt-row span{
text-align:right;
color:var(--text);
}
.apg-download{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:13px 22px;
border-radius:50px;
background:var(--green);
color:#fff!important;
text-decoration:none!important;
font-weight:800;
border:0;
cursor:pointer;
}
/* =========================================================
IMPACT MESSAGE
========================================================= */
.apg-message{
padding:100px 0;
background:#fff;
}
.apg-message-box{
text-align:center;
max-width:850px;
margin:auto;
}
.apg-message-box i{
font-size:45px;
color:var(--orange);
margin-bottom:20px;
}
.apg-message-box h2{
font-size:46px;
line-height:1.15;
margin:0 0 20px;
}
.apg-message-box h2 span{
color:var(--orange);
}
.apg-message-box p{
color:var(--text);
line-height:1.9;
font-size:16px;
}
/* =========================================================
CTA
========================================================= */
.apg-final{
padding:80px 0;
background:var(--green);
color:#fff;
text-align:center;
}
.apg-final h2{
font-size:45px;
margin:0 0 15px;
}
.apg-final h2 span{
color:#ff9c4b;
}
.apg-final p{
color:rgba(255,255,255,.78);
line-height:1.8;
max-width:700px;
margin:0 auto 25px;
}
.apg-final-heart{
font-size:28px;
color:#ff9c4b;
margin-bottom:12px;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes apgFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes apgHeartbeat{
0%,100%{transform:scale(1)}
15%{transform:scale(1.1)}
30%{transform:scale(1)}
45%{transform:scale(1.08)}
}
@keyframes apgPop{
from{transform:scale(.4);opacity:0}
to{transform:scale(1);opacity:1}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:900px){
.apg-hero-grid,
.apg-donate-grid{
grid-template-columns:1fr;
}
.apg-heart-visual{
min-height:360px;
}
.apg-qr-card{
position:relative;
top:auto;
}
.apg-reasons{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:600px){
.apg-hero,
.apg-why,
.apg-donate,
.apg-message{
padding:70px 0;
}
.apg-hero h1{
font-size:43px;
}
.apg-hero-text{
font-size:16px;
}
.apg-heart-circle{
width:270px;
height:270px;
}
.apg-heart-circle i{
font-size:75px;
}
.apg-floating{
padding:10px;
}
.apg-floating.one{
left:-5px;
}
.apg-floating.two{
right:-5px;
}
.apg-reasons{
grid-template-columns:1fr;
}
.apg-form-card{
padding:27px 19px;
border-radius:24px;
}
.apg-form-grid{
grid-template-columns:1fr;
}
.apg-field.full{
grid-column:auto;
}
.apg-heading h2,
.apg-message-box h2,
.apg-final h2{
font-size:34px;
}
.apg-qr-box{
width:220px;
height:220px;
}
}
Give Hope • Spread Humanity
तुमची मदत,
कुणाचं तरी आयुष्य
बदलू शकते.
कुणासाठी तुमची छोटीशी मदत म्हणजे
आजचं जेवण असू शकतं...
कुणासाठी गरजेचे कपडे,
तर कुणासाठी पुन्हा जगण्याची एक नवी आशा.
Your contribution helps us reach people who need
food, clothes, essential supplies, children's materials
and basic support — with dignity and care.
“दानाची किंमत त्याच्या रकमेवर नाही,
तर त्यातून मिळणाऱ्या आशेवर ठरते.”
Food • कपडे • वस्तू
Help with dignity
Hope for Children
गरजू मुलांसाठी मदत
Why Your Support Matters
तुमचं योगदान कुठे पोहोचतं?
तुमच्या मदतीतून गरजू व्यक्तींच्या मूलभूत गरजा
पूर्ण करण्यासाठी विविध उपक्रम आणि मदत शिबिरे आयोजित केली जातात.
अन्नधान्य
गरजू आणि निराधार व्यक्तींना अन्न व धान्याची मदत.
कपडे व वस्तू
गरजेनुसार कपडे आणि जीवनावश्यक साहित्य उपलब्ध करून देणे.
Children's Support
गरजू मुलांसाठी खेळणी, शैक्षणिक साहित्य आणि आवश्यक वस्तू.
Community Camps
समाजातील लोकांना सोबत घेऊन मदत शिबिरांचे आयोजन.
Scan. Donate. Make a Difference.
खालील QR Code Scan करून तुम्ही Adarsh Pratishthan ला
तुमचे योगदान देऊ शकता.
Scan QR to Donate
Please complete your payment through your UPI app.
“एक हात मदतीचा...
एक आयुष्य आशेचं.”
आज तुमच्याकडे जे आहे त्यातील थोडासा भाग
जर एखाद्या गरजू व्यक्तीच्या आयुष्यात गेला,
तर त्याची किंमत फक्त पैशांमध्ये मोजता येत नाही.
Your donation is more than money.
It is food for someone hungry,
support for someone helpless,
and hope for someone who feels forgotten.
Together, We Can Give Hope.
चला, कुणाच्या चेहऱ्यावर हसू आणूया.
कुणाला आधार देऊया.
आणि माणुसकीचा हा प्रवास पुढे नेऊया.
/* =========================================================
DONATION AMOUNT BUTTONS
========================================================= */
document.querySelectorAll(".apg-amount").forEach(function(button){
button.addEventListener("click",function(){
document.querySelectorAll(".apg-amount")
.forEach(function(btn){
btn.classList.remove("active");
});
this.classList.add("active");
document.getElementById("donationAmount").value =
this.getAttribute("data-value");
});
});
/* =========================================================
FORM SUBMIT / SUCCESS SCREEN
========================================================= */
document.getElementById("apgDonationForm")
.addEventListener("submit",function(e){
e.preventDefault();
const name =
document.getElementById("donorName").value;
const phone =
document.getElementById("donorPhone").value;
const email =
document.getElementById("donorEmail").value;
const address =
document.getElementById("donorAddress").value || "—";
const amount =
document.getElementById("donationAmount").value;
document.getElementById("receiptName").textContent = name;
document.getElementById("receiptPhone").textContent = phone;
document.getElementById("receiptEmail").textContent = email;
document.getElementById("receiptAddress").textContent = address;
document.getElementById("receiptAmount").textContent =
"₹" + amount;
document.getElementById("receiptDate").textContent =
new Date().toLocaleDateString("en-IN");
document.getElementById("apg-form-content")
.style.display="none";
document.getElementById("apgSuccess")
.classList.add("show");
window.scrollTo({
top:document.getElementById("donation-form")
.offsetTop - 100,
behavior:"smooth"
});
});
/* =========================================================
RECEIPT DOWNLOAD / PRINT
========================================================= */
function apgPrintReceipt(){
const receipt =
document.getElementById("apgReceipt").innerHTML;
const printWindow =
window.open("","","width=700,height=800");
printWindow.document.write(`
Adarsh Pratishthan Donation Receipt
body{
font-family:Arial,sans-serif;
padding:40px;
color:#18392b;
}
.receipt{
max-width:600px;
margin:auto;
border:1px solid #ddd;
padding:30px;
border-radius:15px;
}
.title{
text-align:center;
color:#087443;
}
.row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #eee;
}
ADARSH PRATISHTHAN
Donation Receipt • दान पावती
${receipt}
window.onload=function(){
window.print();
}
`);
printWindow.document.close();
}
