@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: "Inter", serif;
}

/* start banner section */
.banner{
    max-width:1536px;
    width: 100%;
    height: 90vh;
    margin: 0px auto;
    background: linear-gradient(0.00deg, rgb(18, 18, 18),rgba(18, 18, 18, 0) 200%), url(../images/donation0.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
  
}
.banner-container {
    /* display: flex; */
    /* text-align: center; */
    padding: 176px 301px 337px 301px;
}
.banner-title{
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 4rem;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: 0px;
    text-align: center;
}
.banner-description{
    color: rgb(255, 255, 255);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    margin: 20px;
}
.banner-btn{
     padding: 16px 12px 16px 12px;
    border-radius: 5px;
    border: none;
    background: rgb(255, 89, 89);
    margin-top: 30px;
    color: #fff;
    font-family: Inter;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}


/* donate-today section start */
.donate-today{
    max-width: 1536px;
    width: 80%;
    margin: 130px auto auto auto;
     
}

.donate-today-title{
    color: rgb(18, 18, 18);
    font-family: Inter;
    font-size: 45px;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: 0px;
    text-align: center;
}
.donate-today-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    margin-top: 20px;
}
.donate-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    padding: 50px;
    
}


.donate-tody-card-1{
    border-radius: 5px;
    background: rgb(250, 250, 250);
    padding: 43px 24px 43px 24px;
}

.donate-tody-card-1 h5{
    color: rgb(112, 112, 112);
    font-family: Inter;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0px;
    text-align: center;
}
.donate-tody-card-2{
    border-radius: 5px;
    border: 2px solid rgb(255, 89, 89);
    background: rgb(255, 238, 238);
    padding: 43px 24px 43px 24px;
    box-sizing: border-box;
}


.card-2-tk{
    color: rgb(255, 89, 89);
    font-family: Inter;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0px;
    text-align: center;
}

.other{
    text-align: center;
}

.line{
width: 50%;
margin: 10px auto;
border: 1px solid rgb(218, 218, 218);
}

.other-amount{
color: rgb(179, 179, 179);
font-family: Poppins;
font-size: 0.90rem;
font-weight: 400;
line-height: 28px;
letter-spacing: 0px;
text-align: center;

}

.other-button{
    padding: 16px 12px 16px 12px;
    border-radius: 5px;
    border: none;
    background: rgb(255, 89, 89);
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 25px;
}

/* start our plan section */

.our-plan{
    max-width: 1536px;
    width: 90%;
    margin: 130px auto auto auto;
}

.our-plan-title{
    color: rgb(18, 18, 18);
    font-family: Inter;
    font-size: 45px;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: 0px;
    text-align: center;
}
.our-plan-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size:1rem ;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    margin-top: 20px;
}
.our-plan-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.our-plan-crd{
    padding: 40px;
    border-radius: 5px;
    background: rgba(79, 157, 166, 0.1);
}
.active-1{

    background: rgba(255, 89, 89, 0.1);
}
.active-2{
    background: rgb(255, 253, 234);
}
.plan-crd-title{
    color: rgb(18, 18, 18);
    font-family: Poppins;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 30px;
}

.plan-crd-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 16px;
}
/* start need section */
.need{
    max-width: 1536px;
    width: 90%;
    margin: 130px auto auto auto;
    
}

.need-img img{
    width: 100%;
    border-radius: 5px;
    /* margin-top: 50px; */
   
}
.need-img{
 width: 50%;
 
}

.need-container{
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 30px 0px;

}
/* .need-content{
    padding: 20px;
} */
.need-content-title{
    color: rgb(18, 18, 18);
    font-family: Inter;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 40px;
}


.need-container-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 20px;
}

.need-btn{
         padding: 16px 12px 16px 12px;
         border-radius: 5px;
         color: #fff;
         margin-top: 30px;   
         font-family: Inter;
         font-size:1rem ;
         font-weight: 600;
         line-height: 24px;
         letter-spacing: 0px;
         text-align: left;
         background: rgb(255, 89, 89);
         border: none;
}
/* start suvive section */
.suvive{
    max-width: 1536px;
    width: 90%;
    margin: 130px auto auto auto;
    
}

.suvive-img img{
    width: 100%;
    border-radius: 5px;
    /* margin-top: 50px; */
   
}
.suvive-img{
 width: 50%;
 
}

.suvive-container{
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 30px 0px;

}
/* .need-content{
    padding: 20px;
} */
.suvive-content-title{
    color: rgb(18, 18, 18);
    font-family: Inter;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 40px;
}


.suvive-container-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 20px;
}

.suvive-btn{
         padding: 16px 12px 16px 12px;
         border-radius: 5px;
         color: #fff;
         margin-top: 30px;   
         font-family: Inter;
         font-size:1rem ;
         font-weight: 600;
         line-height: 24px;
         letter-spacing: 0px;
         text-align: left;
         background: rgb(255, 89, 89);
         border: none;
}


/* start update section */

.update{
    max-width: 1536px;
    width: 80%;
    margin: 130px auto auto auto;
    
    
}

.update-title{
    color: rgb(18, 18, 18);
    font-family: Inter;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: 0px;
    text-align: center;
}
.update-description{
    color: rgb(112, 112, 112);
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: center;
    margin-top: 20px;
}
.update-container{
    padding: 76px 189px 76px 189px;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 50px;
    background: rgb(255, 244, 214);
}
form{
    display: flex;
    text-align: center;
    justify-content: center;
}
input{
padding: 14px;
width: 50%;
border-radius: 5px 0px 0px 5px;
background: rgb(217, 217, 217);
color: rgb(170, 159, 159);
font-family: Roboto;
font-size: 1rem;
font-weight: 500;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
border: none;
}

.update-btn{
 border-radius: 0px 5px 5px 0px;
 padding: 14px;
background: rgb(255, 89, 89);
color: rgb(255, 255, 255);
font-family: Roboto;
font-size: 1rem;
font-weight: 500;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
border: none;
}

footer{
    max-width: 1536px;
    width: 100%;
    margin: 130px auto auto auto;
    /* Default / Black */
background: rgb(11, 13, 23);
    
}
.footer-container{
    display: flex;
    flex-direction: column;
    text-align: center;
   padding: 43px 629px 50px 653px;
   
}


.footer-title{
    color: rgb(255, 89, 89);
    font-family: Lobster;
    font-size: 2rem;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0.5px;
 

}
.footer-description{
color: rgb(217, 219, 225);
font-family: Manrope;
font-size: .90rem;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
margin-top: 24px;

}





@media screen and (max-width:576px){
    .banner{
        height: auto;
    }
    .banner-container{
        padding: 0px;
    }
    .donate-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 22px;
        padding: 0px;
        margin-top: 40px;
        
    }
    .other-amount{
        margin-top: 20px;
    }
   
    /* start our plane section */
    .our-plan-container{
        grid-template-columns: repeat(1, 1fr);
        margin-top: 40px;
    }
/* start need section */
    .need-container{
        flex-direction: column-reverse;
        padding: 0px;
            }
            .need-img{
                width: 100%;
                
               }
               /* start suvive section */
               .suvive-container{
                flex-direction: column;
                padding: 0px;
                    }
                    .suvive-img{
                        width: 100%;
                        
                       }

     /* start update section                   */
     .update-container{
            flex-direction: column;
            padding: 0px;
            background: none;
     }

     /* start footer section */
     /* footer{
        width: 100%;
     } */
     .footer-container{
        padding: 0px;
        flex-direction: column;
        
     }
     /* .footer-title{
        text-align: center;
     }
     .footer-description{
        text-align: center;
        margin-left: 5px;
        
     } */
    }

@media screen and (min-width:567px)and (max-width:992px) {
    .banner{
        height: auto;
    }
    .banner-container{
        padding: 0px;
    }
    .our-plan-container{
        grid-template-columns: repeat(2, 1fr);
        margin-top: 40px;
    }

    /* start .need section */
 
}