/* =================================================
           ---------Imported Font --------
==================================================== */

/* ---------Primary Font -------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
/* ---------Logo Font -------- */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');


/* =================================================
           ---------Common Styles --------
==================================================== */

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
   font-family: 'Inter', sans-serif;
   width: 100%;
   margin: 0 auto;
}
h2{
    color: black;
    font-size:35px;
    font-weight: bolder;
}
p{
    color: #444444;
}

.btn{
    background-color: #FF5959;
    border: none;
    color:#fff;
    font-weight: 600;
    padding: 16px 25px;
    border-radius: 5px;
}
/* =================================================
       ---------Header Banner Styles --------
==================================================== */
.hero-area{
      background-image: url("../images/banner.png"), linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
      background-blend-mode: overlay;
      background-repeat:no-repeat;
      background-size: cover;
      height: 85vh;
}

.hero-content{
    width: 60%;
    text-align: center;
    margin: 0 auto;
    padding-top: 8rem;
}
.site-title{
    font-size: 60px;
    font-weight: bolder;
    color: #fff;
}
.hero-content > p{
    color: #ebebeb;
    padding:1rem 6rem;
    margin-bottom: 1.5rem;
}
/* =================================================
       ---------Donation section  Styles --------
==================================================== */
.donation-section{
    width: 60vw;
    margin: 7rem auto;

    text-align: center;
}

.donation-section > p{
    padding: 1rem 6rem;
}
.donation-amount-list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.donation-amount-list > li{
    font-size: 25px;
    font-weight: bolder;
    margin: 10px auto 20px;
    color:gray;
    padding: 35px 25px;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: .3s ease;
}

.donation-amount-list > li:hover{
 
    background-color: #ff77774f;
    color: #FF5959;
    border: 1px solid #FF5959;
    
}

.donation-section > input{
    width: 90%;
    margin-bottom: 30px;
    text-align: center;
    font-size: 17px;
    border: none;
    border-bottom: 1px solid gray;
}

/* =================================================
  --------Donation Plan section  Styles --------
==================================================== */
.donation-plan-section{
    width: 80%;
    margin: 0 auto 10rem;
    text-align: center;
}
.donation-plan-section > p{
    padding: 1rem 15rem;
}
.donation-plans{
    text-align: left;
    margin: 3rem 0 5rem;
    display: flex;
    gap: 2rem;
}

.plan-item{
    background-color: #ddfbff;
    padding: 4rem 1.5rem 3.5rem;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 0 rgba(58, 58, 58, 0.452);

}
.plan-item > h3{
    font-weight: bold;
    margin: 20px 0 10px;

}
.plan-item > p{
   color: gray;

}
.plan-bg2{
   background-color: #ffdddd;
}
.plan-bg3{
    background-color: #fff2ce;
}

/* =================================================
  --------Sufferer Details  Styles --------
==================================================== */
.sufferer-gallery{
    width: 80%;
    margin: 0 auto;

}

.gallery-content{
    display: flex;
    gap: 3rem;
    margin-bottom: 7rem;
}
.gallery-text{
    width: 50%;
}
.gallery-text > p{
    margin: 20px 0;
    padding: 0 2rem 0 0;
}
.sufferer-image{
    width: 50%;
}
.sufferer-image > img{
    width: 100%;
    border-radius: 5px;
}

/* =================================================
      --------Contact section  Styles --------
==================================================== */
.contact{
    width: 50%;
    margin: 0 auto 5rem;
    text-align: center;
}
.contact > p{
    padding: 0 2rem;
    margin: 2rem 0;
}

.email-div{
    width: 100%;
    padding:5rem 0;
    background-color: #ffe9ab;
}

.email-div > input{
    border: none;
    padding: 10px 8px;
    background-color: gainsboro;
    border-radius: 2px;
}

.email-div > input:last-child{
    padding: 10px 20px;
    background-color: #FF5959;
    color:#fff;
}


/* =================================================
      --------Footer  Styles --------
==================================================== */
footer{
    background-color: #0B0D17;
    text-align: center;
    padding: 3rem 0 2rem;
}
footer > h2{
    color: #ff3f3f;
    font-family: 'Lobster', cursive;
    font-size: 33px;
    font-weight: normal;
    margin-bottom: .5rem;
}
footer > p{
    color: #fff;

}