*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
line-height:1.6;
}


/* HERO */

.donate-hero{
background:url("../img/gallery-7.jpg") center/cover no-repeat;
height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-content{
background:rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.hero-content h1{
    color: #fff;
    font-size:42px;
}

.hero-content p{  
    color: #fff;
}

.donate-btn{
background:#1f3c88;
color:white;
padding:12px 30px;
text-decoration:none;
border-radius:30px;
display:inline-block;
border:none;
cursor:pointer;
}

.donate-btn:hover {
    color: #fff;
}


/* WHY DONATE */

.why-donate{
padding:70px 10%;
text-align:center;
}

.donate-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.card{
background:#f5f5f5;
padding:25px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}


/* AMOUNT */

.donation-amount{
padding:30px 10%;
text-align:center;
background:#fafafa;
}

.amount-options{
margin:25px 0;
}

.amount-options .pay-amount{
padding:12px 20px;
margin:10px;
border:1px solid #ddd;
cursor:pointer;
background:white;
}

.amount-options button:hover{
background:#1f3c88;
color:white;
}

.donation-amount input{
padding:12px;
width:250px;
border:1px solid #ddd;
border-radius:5px;
}

/* .select-amout {
    background: #0ae615;
    color: #fff;
} */

.donate-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background:#fff;
    gap: 30px;
}

.donate-box .Pay-amout {
    width: 350px;
    height: 350px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 12px;

}

.donate-box .Pay-amout .qr-img{
    width:200px;
    height: auto;
}


/* FORM */

.donation-form{
padding:30px 10%;
text-align:center;
}

form{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

form input,
form textarea{
padding:12px;
border:1px solid #ccc;
border-radius:5px;
}

textarea{
height:120px;
resize:none;
}


/* IMPACT */

.impact{
padding:70px 10%;
background:#1f3c88;
color:white;
text-align:center;
}

.impact h2 {
    color: #fff;
}

.impact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:30px;
margin-top:30px;
}

.impact-grid h3{
font-size:32px;
color: #fff;
}

.impact-grid p {
    color: #030d25;
}


/* CTA */

.final-cta{
padding:60px 10%;
text-align:center;
background:#f5f5f5;
}


/* RESPONSIVE */

@media (max-width:768px){

.hero-content h1{
font-size:30px;
}

.donate-hero{
height:60vh;
}

}