*::after,
*::before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0
}

body{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}


h1,h2,h2,h4,h5,h5{
	margin: 0;
	padding: 0;
}





@media only screen and (max-width:1600px){
 
.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -160px 0 0 0;*/
	    height: 750px;
	}

	.charity-agency {
	    background: var(--green);
	    padding: 120px 0;
	     margin:0;
	}

}

@media only screen and (max-width:1500px){
 
	.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -160px 0 0 0;*/
	    height: 650px;
	}

	

	.banner .banner-text h1 {
	    font-size: 100px;
	    text-align: center;
	    font-weight: 100;
	    line-height: 1.1;
	    text-transform: capitalize;
	    color: var(--white);
	}

	.donation .col-lg-6:nth-child(1) .box {
	    padding: 70px 100px 0 80px;
	}

	.newsletter .col-lg-6:nth-child(1) .box {
	    background-image: url(../images/newsletter-bg-img.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    width: 100%;
	    padding: 130px 70px;
	    position: relative;
	}

}

@media only screen and (max-width:1300px){
	.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -160px 0 0 0;*/
	    height: 600px;
	}

	.banner .banner-text {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -20%);
	}

	.banner .banner-text .icon:nth-child(5) {
	    position: absolute;
	    top: -5%;
	    left: -2%;
	}

	.banner .banner-text .icon:nth-child(4) {
	    position: absolute;
	    bottom: -28%;
	    left: 10%;
	}

	.banner .banner-text .icon:nth-child(3) {
	    position: absolute;
	    right: 10%;
	    bottom: -30%;
	}

	.banner .banner-text .icon:nth-child(2) {
	    position: absolute;
	    right: 0;
	    top: -5%;
	}

	.banner .banner-text .icon:nth-child(1) {
	    position: absolute;
	    right: 50%;
	    top: -24%;
	}

	.donation .col-lg-6:nth-child(1) .box {
	    padding: 70px 40px 0 50px;
	}

	#subscribe-2 {
    width: 170px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #40216C;
    border-radius: 30px;
    border: none;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    position: absolute;
    right: 10px;
}


}




@media only screen and (max-width:1200px){

    .banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -160px 0 0 0;*/
	    height: 480px;
	}

	.banner .banner-text h1 {
	    font-size: 80px;
	    text-align: center;
	    font-weight: 100;
	    line-height: 1.1;
	    text-transform: capitalize;
	    color: var(--white);
	}

	.charity-agency .col-lg-6 .box h2 {
	    font-size: 45px;
	    /* line-height: 1.3; */
	    font-weight: 500;
	    color: var(--white);
	    padding-block-start: 15px;
	}

	.charity-agency .col-lg-6 .box p {
	    font-size: 16px;
	    line-height: 26px;
	    font-weight: 400;
	    color: var(--white);
	    padding-block-start: 15px;
	}

	.charity-agency {
	    background: var(--green);
	    padding: 70px 0;
	}

	.donation .col-lg-6 .box h2 {
	    font-size: 45px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: #fff;
	    padding-block-start: 25px;
	}

	.donation .col-lg-6 .box p#paragraph-one {
	    font-size: 22px;
	    line-height: 38px;
	    font-weight: 400;
	    color: #DEA0EB;
	    padding-block-start: 30px;
	}

	.donation form .form-box .input-group .control {
	    width: 100%;
	    height: 60px;
	}

	.shop {
	    background: var(--darkblue);
	    padding: 80px 0;
	}

	.shop .title h2 {
	    font-size: 45px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: var(--white);
	    padding-block-start: 15px;
	    text-align: center;
	}

	.slider {
	    padding-block-start: 55px;
	}

	.counter {
	    background: #567E7B;
	    padding: 80px 0;
	}

	.counter .title h2 {
	    font-size: 45px;
	}

	.counter .box h2 {
	    font-size: 70px;
	    line-height: 1.3;
	    font-weight: 100;
	    color: #fff;
	}

	.volunteer {
	    background: #001C38;
	    padding: 80px 0 80px 0;
	}

	.volunteer .d-flex .title h2 {
	    font-size: 45px;
	    line-height: 1.3;
	    font-weight: 600;
	    color: #fff;
	    margin-block-start: 30px;
	}

	.volunteer .row{
		justify-content: center;
	}

	.volunteer .row .col-lg-4{
        flex: 0 0 auto;
        width: 49.333333%;
	}

	.newsletter .text-block .icon {
	    width: 55px;
	}

	.newsletter .text-block h3 {
	    font-size: 45px;
	    line-height: 1.63;
	    font-weight: 800;
	    color: #fff;
	    margin: 0;
	}

	.newsletter .col-lg-6 .flex-box .logo-icon {
	    width: 60px;
	    margin: 0 auto;
	}

	.newsletter .text-block .d-flex {
	    align-items: center;
	    gap: 25px;
	}

	.newsletter .col-lg-6:nth-child(1) .box {
	    background-image: url(../images/newsletter-bg-img.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    width: 100%;
	    padding: 143px 70px;
	    position: relative;
	}

	.newsletter .col-lg-6 {
	    padding: 0;
	    position: relative;
	    background: #AFD019;
	}

	.newsletter .col-lg-6:nth-child(2) .box {
	    background-image: url(../images/pattan.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    width: 100%;
	    padding: 130px;
	    position: relative;
	    height: 100%!important;
	    position: relative;
	}

	#subscribe-2 {
	    width: 170px;
	    height: 60px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: #40216C;
	    border-radius: 30px;
	    border: none;
	    font-size: 16px;
	    line-height: 1.3;
	    font-weight: 400;
	    text-transform: uppercase;
	    letter-spacing: 4px;
	    color: #fff;
	    position: initial;
	    right: 10px;
}

	.input-group {
	    position: relative;
	    display: flex;
	    flex-wrap: wrap;
	    align-items: stretch;
	    width: 100%;
	    justify-content: center;
	    gap: 30px;
	}

	.newsletter .col-lg-6:nth-child(1) .box {
	    background-image: url(../images/newsletter-bg-img.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    width: 100%;
	    padding: 90px 70px;
	    position: relative;
	}


	.testimonials {
	    background: #08A560;
	    padding: 80px 0 30px 0;
	}

	.testimonials .title h2 {
	    font-size: 45px;
	    line-height: 1.3;
	    font-weight: 600;
	    color: #fff;
	    margin-block-start: 30px;
	    text-align: center;
	}

	.footer {
	    background: #138051;
	    padding: 80px 0 0 0;
	}

	.slider-two .box .d-flex .text h4 {
	    font-size: 18px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: #FFFFFF;
	    padding-block-end: 9px;
	}

	.slider-two .prev-arrow {
	    left: 0%;
	    z-index: 333;
	    width: 40px;
	    height: 40px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border: none;
	    font-size: 30px;
	}

	.slider-two .next-arrow {
	    right: 0%;
	    z-index: 333;
	    width: 40px;
	    height: 40px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border: none;
	    font-size: 30px;
	}

	.donation .col-lg-6 .box p#paragraph-one {
	    font-size: 20px;
	    line-height: 31px;
	    font-weight: 400;
	    color: #DEA0EB;
	    padding-block-start: 12px;
	}

	

	.donation .col-lg-6 .box p#paragraph-two {
	    font-size: 16px;
	    line-height: 28px;
	    font-weight: 400;
	    color: #DEA0EB;
	    padding-block-start: 0;
	}

	.donation form {
	    padding-block-start: 25px;
	}



	.donation .col-lg-6 .box .image-block img {
	    width: 100%;
	    height: 770px;
	    object-fit: cover;
	}

	.header .d-flex {
	    align-items: center;
	    justify-content: space-between;
	    flex-direction: column;
	    margin: 90px 0 0 0;
	}

	.header {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    padding: 30px 0 0 0;
	    transition: all 0.3s ease-in-out;
	    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.header #nav-one {
	    display: flex;
	    gap: 40px;
	    align-items: center;
	    width: 80%;
	    justify-content: center;
	}

	.header #nav-one li:nth-child(5) {
	    margin-left: 0;
	}

	#donate {
	    width: 158px;
	    height: 50px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border: none;
	    border-radius: 25px;
	    background: #00804B;
	    font-size: 16px;
	    line-height: 1.3;
	    font-weight: 500;
	    text-transform: uppercase;
	    color: #fff;
	    margin: 0 0 0 auto;
	    position: relative;
	    top: -124px;
	}

	.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -244px 0 0 0;*/
	    height: 600px;
	}


}






@media only screen and (max-width:991px){
	.header #nav-one {
	    display: flex;
	    gap: 50px;
	    align-items: center;
	    width: 100%;
	    justify-content: center;
	}

	.charity-agency .col-lg-6:nth-child(1){
		margin-block-end: 30px;
	}

	.charity-agency .col-lg-6:nth-child(2) .box {
	    padding: 0;
	}

	.charity-agency .col-lg-6 .box h2 span {
	    display: inline;
	}

	#subscribe {
	    margin-block-start: 50px;
	}

	.donation .col-lg-6:nth-child(2){
		margin: 50px 0 0 0;
	}

	.counter .title h2 span {
	    display: inline;
	}

	.volunteer .col-lg-4 .box .bottom-block h4 {
	    font-size: 22px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: #fff;
	    text-transform: capitalize;
	    padding-block-start: 15px;
	}

	.volunteer .col-lg-4 .box .bottom-block h5 {
	    font-size: 14px;
	    line-height: 1.3;
	    font-weight: 400;
	    color: #7E9AB6;
	    text-transform: uppercase;
	    letter-spacing: 4px;
	}

	.newsletter .col-lg-6:nth-child(1) .box {
	    background-image: url(../images/newsletter-bg-img.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    width: 100%;
	    padding: 40px 20px;
	    position: relative;
	}

	.newsletter .text-block .d-flex {
	    align-items: center;
	    gap: 22px;
	}

	.newsletter .social {
	    display: flex;
	    align-items: center;
	    gap: 30px;
	    padding-block-start: 45px;
	}

	.footer-bottom {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 40px 0;
	    border-top: 2px solid #5AA686;
	    margin: 100px 0 0 0;
	    flex-direction: column-reverse;
	    gap: 60px;
	}

	.donation .col-lg-6 .box .image-block img {
	    width: 100%;
	    height: 630px;
	    object-fit: cover;
	}
}





@media only screen and (max-width:767px){
	.header #nav-one {
	    display: block;
	    gap: 50px;
	    align-items: center;
	    width: 100%;
	    justify-content: center;
	    position: fixed;
	    top: 100%;
	    left: 0;
	    background: #19965b;
	    height: 800px;
	    text-align: center;
	    display: none;
	}

	.header #nav-one li {
	    padding: 15px 0;
	    border-bottom: 1px solid #ffffff38;
	}

	.header #nav-one li:hover{
		background: ;
	}



	.header .d-flex {
	    align-items: center;
	    justify-content: space-between;
	    flex-direction: inherit;
	    margin: 110px 0 0 0;
	}

	#donate {
	    top: 0;
	}

	.menu {
	    color: #fff;
	    font-size: 30px;
	    display: block;
	}

	.header .d-flex {
	    align-items: center;
	    justify-content: space-between;
	    flex-direction: inherit;
	    margin: 81px 0 0 0;
	}

	.header {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    padding: 30px 0 30px 0;
	    transition: all 0.3s ease-in-out;
	    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -220px 0 0 0;*/
	    height: 600px;
	}

	.banner .banner-text {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, 8%);
	}

	.banner .banner-text h1 {
	    font-size: 60px;
	    text-align: center;
	    font-weight: 100;
	    line-height: 1.1;
	    text-transform: capitalize;
	    color: var(--white);
	}

	.charity-agency .col-lg-6 .box h2 {
	    font-size: 40px;
	    /* line-height: 1.3; */
	    font-weight: 500;
	    color: var(--white);
	    padding-block-start: 15px;
	}

	.donation .col-lg-6 .box h2 {
	    font-size: 40px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: #fff;
	    padding-block-start: 25px;
	}

	.shop .title h2 {
	    font-size: 40px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: var(--white);
	    padding-block-start: 15px;
	    text-align: center;
	}

	.counter .title h2 {
	    font-size: 40px;
	}

	.counter .col-lg-6 {
	    padding: 0;
	    width: 50%;
	}

	.counter .box h2 {
	    font-size: 55px;
	    line-height: 1.3;
	    font-weight: 100;
	    color: #fff;
	}

		.volunteer .d-flex .title h2 {
	    font-size: 40px;
	    line-height: 1.3;
	    font-weight: 600;
	    color: #fff;
	    margin-block-start: 30px;
	}

	.volunteer .d-flex {
	    justify-content: space-between;
	    align-items: inherit;
	}

	#join-with-us {
	    font-size: 14px;
	    line-height: 1.3;
	    font-weight: 400;
	    color: #fff;
	    text-transform: uppercase;
	    letter-spacing: 4px;
	    background: none;
	    border: 2px solid #3C5A78;
	    border-radius: 30px;
	    width: 180px;
	    height: 50px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    transition: all 0.5s ease;
	}

	.volunteer .row .col-lg-4 {
	    flex: 0 0 auto;
	    width: 100%;
	}

	.volunteer {
	    background: #001C38;
	    padding: 60px 0 20px 0;
	}

	.gallary .col-lg-3{
		width: 25%;
	}

	.newsletter .text-block h3 {
	    font-size: 40px;
	    line-height: 1.63;
	    font-weight: 700;
	    color: #fff;
	    margin: 0;
	}

	.newsletter .col-lg-6 .flex-box .boxes {
	    width: 30%;
	    height: 100px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.newsletter .col-lg-6 .flex-box {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 100%;
	    z-index: 222;
	}

	.newsletter .col-lg-6 .flex-box .boxes {
	    width: 25%;
	    height: 99px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.testimonials {
	    background: #08A560;
	    padding: 50px 0 30px 0;
	}

	span#small-btn-5 {
	    font-size: 14px;
	    line-height: 1.3;
	    font-weight: 400;
	    color: #fff;
	    text-transform: uppercase;
	    width: 200px;
	    height: 40px;
	    border-radius: 20px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: #018249;
	    cursor: pointer;
	    letter-spacing: 4px;
	    margin: 0 auto;
	}

	.testimonials .title h2 {
	    font-size: 40px;
	    line-height: 1.3;
	    font-weight: 600;
	    color: #fff;
	    margin-block-start: 30px;
	    text-align: center;
	}

}



@media only screen and (max-width:480px){
	.banner .banner-text h1 {
	    font-size: 45px;
	    text-align: center;
	    font-weight: 100;
	    line-height: 1.1;
	    text-transform: capitalize;
	    color: var(--white);
	}

	.banner .banner-text {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, 25%);
	}

	.banner {
	    position: relative;
	    overflow: hidden;
/*	    margin: -220px 0 0 0;*/
	    height: 500px;
	}

	.charity-agency {
	    background: var(--green);
	    padding: 45px 0;
	}

	.charity-agency .image-block img{
		width: 100%;
	}

	.charity-agency .col-lg-6 .video {
    width: 100%!important;
    margin: 25px 0 0 0;
    position: relative;
    border: none;
}

.charity-agency .col-lg-6 .video img{
	width: 100%;
}

	.charity-agency .col-lg-6 .video {
	    width: max-content;
	    margin: 25px 0 0 0;
	    position: relative;
	    border: none;
	}

	.charity-agency .col-lg-6 .video .play-button a {
	    width: 50px;
	    height: 50px;
	}

	.charity-agency .col-lg-6 .box h2 {
	    font-size: 30px;
	    /* line-height: 1.3; */
	    font-weight: 500;
	    color: var(--white);
	    padding-block-start: 15px;
	}

	.charity-agency .col-lg-6 .box .founder .name h4 {
	    font-size: 20px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: var(--white);
	    padding-block-end: 5px;
	}

	.charity-agency .col-lg-6 .box .founder .name span {
	    font-size: 14px;
	    line-height: 1.3;
	}

	.donation .col-lg-6 .box h2 {
	    font-size: 30px;
	    line-height: 1.3;
	}

	.donation form .form-box .input-group {
	    width: 100%;
	    align-items: center;
	    margin-block-end: 25px;
	}

	#subscribe {
	    width: 180px;
	    height: 50px;
	    border-radius: 30px;
	    background: var(--pink);
	    color: var(--white);
	    margin-block-start: 26px;
    }

    .donation .col-lg-6 .box .image-block img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	}

	.donation .col-lg-6:nth-child(1) .box {
	    padding: 45px 30px 0 30px;
	}

	.donation .col-lg-6:nth-child(1) .box {
	    padding: 39px 30px 0 30px;
	}

	.shop {
	    background: var(--darkblue);
	    padding: 45px 0;
	}

	.shop .title h2 {
	    font-size: 30px;
	    padding-block-start: 25px;
	}

	.slider {
	    padding-block-start: 45px;
	}

	.counter {
	    background: #567E7B;
	    padding: 45px 0;
	}

	.counter .title h2 {
	    font-size: 30px;
	}

	.statistics {
	    padding: 65px 0 0 0!important;
	}

	.counter .box h2 {
	    font-size: 40px;
	    line-height: 1.3;
	    font-weight: 100;
	    color: #fff;
	}

	.counter .col-lg-6 {
	    padding: 0;
	    width: 100%;
	}

	.counter .row:after {
	    position: absolute;
	    content: "";
	    width: 1px;
	    height: 100%;
	    background: #89A5A3;
	    left: 50%;
	    display: none;
	}

	.counter .row:before {
	    position: absolute;
	    content: "";
	    width: 50%;
	    height: 1px;
	    background: #89A5A3;
	    left: 25%;
	    top: 50%;
	    display: none;
	}

	.volunteer .d-flex .title h2 {
	    font-size: 30px;
	    line-height: 1.3;
	    font-weight: 600;
	    color: #fff;
	    margin-block-start: 30px;
	}

	span#small-btn-4 {
	    font-size: 14px;
	    width: 120px;
	    height: 40px;
	}

	.volunteer .d-flex {
	    justify-content: space-between;
	    align-items: inherit;
	    flex-direction: column-reverse;
	}

	#join-with-us {
	    margin: 0 auto;
	}

	.volunteer .title {
	    padding: 35px 0 0 0;
	}

	.volunteer .row {
	    margin-block-start: 50px;
	}

	.volunteer .col-lg-4 .box .bottom-block h4 {
	    font-size: 20px;
	    line-height: 1.3;
	    font-weight: 500;
	    color: #fff;
	    text-transform: capitalize;
	    padding-block-start: 15px;
	}

	.gallary .col-lg-3 {
	    width: 50%;
	}

	.newsletter .text-block h3 {
	    font-size: 30px;
	    line-height: 1.63;

	}

	.newsletter .text-block .icon {
	    width: 40px;
	}

	.newsletter .email-control {
	    width: 100%;
	    height: 60px;
	    border: none;

	}

	.newsletter .social {
	    display: flex;
	    align-items: center;
	    gap: 30px;
	    padding-block-start: 45px;
	    flex-direction: column;
	}

	.newsletter .social-app {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;

	}

	.newsletter .col-lg-6 .flex-box .boxes {
	    width: 33%;
	    height: 99px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.newsletter .col-lg-6 .flex-box .logo-icon {
	    width: 40px;
	    margin: 0 auto;
	}

	.testimonials .title h2 {
	    font-size: 30px;
	    line-height: 1.3;

	}

	.slider-two {
	    padding: 40px 0 0 0;
	}

	.footer {
	    background: #138051;
	    padding: 45px 0 0 0;
	}

	.footer .logo-block {
	    width: 70px;
	    margin: 0 auto;
	    position: relative;
	    z-index: 333;
	}

	.footer p {
	    font-size: 18px;
	    line-height: 28px;
	    font-weight: 400;
	    color: #fff;
	    text-align: center;
	    padding-block-start: 35px;
	}

	.footer-social .d-flex .social-app {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    display: flex;
	    justify-content: center;

	}

	.footer-nav ul {
	    display: flex;
	    align-items: center;
	    gap: 35px;
	    flex-wrap: wrap;
	    justify-content: center;
	}

	.footer-bottom {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 40px 0;
	    border-top: 2px solid #5AA686;
	    margin: 50px 0 0 0;
	    flex-direction: column-reverse;
	    gap: 60px;
	}

	.header .logo-block {
	    width: 70px;
	    position: absolute;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    top: 10px;
	}

	.footer-social .d-flex {
	    justify-content: center;
	    gap: 20px;
	}




}





@media only screen and (max-width:380px){
	.newsletter .email-control {
	    padding-inline-start: 25px;
	}

	.newsletter .email-control::placeholder{
		letter-spacing: 2px;
	}

	#subscribe-2 {
	    width: 160px;
	    height: 50px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: #40216C;
	    border-radius: 30px;
	    border: none;
	    font-size: 16px;
	    line-height: 1.3;
	    font-weight: 400;
	    text-transform: uppercase;
	    letter-spacing: 4px;
	    color: #fff;
	    position: initial;
	    right: 10px;
	}
}