/*========================
		// Default Css
	========================*/

	@charset "UTF-8";

	* {
		margin: 0;
		padding: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	} 

	html {
		scroll-behavior: smooth;
	}

	i,
	a,
	p,
	span,
	button,
	input,
	select,
	textarea,
	li,
	img,
	*:hover,
	*::after,
	*::before,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		-webkit-transition: all 0.3s ease-out 0s;
		-o-transition: all 0.3s ease-out 0s;
		transition: all 0.3s ease-out 0s;
	}

	a:focus,
	.button:focus {
		text-decoration: none;
		outline: none;
	}

	a:hover {
		color: inherit;
		text-decoration: none;
	}

	a,
	button {
		color: inherit;
		outline: none;
		border: none;
	}

	button:focus {
		outline: 0;
		border: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0;
		line-height: 1;
	}

	p {
		margin-bottom: 0;
		line-height: 1;
	}

	span {
		line-height: 1;
	}

	ul {
		margin: 0px;
		padding: 0px;
	}

	li {
		list-style: none;
	}

	/*=====================================
	// Donation Section Area Css
	=====================================*/
	.banner-image {
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
    .project-wrapper{
        background: #f5f5f5;
    }
	.donation-area {
		margin-top: -180px;
		margin-bottom:80px;
	}

	.donation-area .donation-row-margin {
		margin-bottom: 25px;
	}

	.donation-area .donation-selection {
		padding: 60px 50px 50px;
		background-color: #048FCD;
	}

	.donation-area .donation-selection h2 {
		font-size: 40px;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-bottom: 50px;
	}

	.donation-area .donation-selection .money .nice-select {
		text-align: center !important;
	}

	.donation-area .donation-selection .money .nice-select .list li {
		text-align: center;
	}

	.donation-area .selection-input input {
		outline: none;
		padding: 0 15px;
	}

	.donation-area .selection-button .select-btn {
		width: 100%;
		background-color: #F15B43;
		color: #ffffff;
		height: 54px;
		padding: 0 50px;
		display: inline-block;
		line-height: 50px;
		text-transform: capitalize;
		text-decoration: none;
		font-family: "Open Sans", sans-serif;
		font-size: 18px;
		font-weight: 700;
		border: 2px solid transparent;
		position: relative;
	}
	
	.donation-area .selection-button .select-btn:hover {
		background-color: transparent;
		border: 2px solid #F15B43;
	}

	.donation-area .selection-button .select-btn:hover::after {
		background-color: #F15B43;
		color: #ffffff;
	}

	.donation-area .nice-select,
	.donation-area input {
		width: 100%;
		height: auto;
		border-radius: 0;
		border: none;
		font-size: 16px;
		color: #002359;
		font-weight: 600;
	}

	.donation-area .nice-select span,
	.donation-area input span {
		line-height: 55px;
	}

	.donation-area .nice-select .list,
	.donation-area input .list {
		width: 100%;
		border-radius: 0;
	}

	.donation-area .nice-select .list li,
	.donation-area input .list li {
		height: 55px;
		line-height: 55px;
	}

	.donation-area .nice-select::after,
	.donation-area input::after {
		right: 20px;
	}

	.donation-area .donation-info {
		height: 100%;
		padding: 70px 100px 60px;
	}

	.donation-area .donation-info h3 {
		font-family: "Merriweather", serif;
		font-size: 40px;
		font-weight: 700;
		line-height: 60px;
		text-align: center;
		color: #ffffff;
		text-transform: capitalize;
		margin-bottom: 30px;
	}

	.donation-area .donation-info h3 span {
		color: #F15B43;
	}

	.donation-area .donation-info .donation-info-button {
		text-align: center;
	}

	.donation-area .donation-info .donation-info-button .donation-info-btn {
		text-transform: capitalize;
		font-family: "Open Sans", sans-serif;
		font-size: 18px;
		font-weight: 700;
		text-decoration: none;
		height: 55px;
		border: 1px solid #ffffff;
		display: inline-block;
		padding: 0 50px;
		line-height: 55px;
	}

	.donation-area .donation-info .donation-info-button .donation-info-btn:hover {
		background-color: #F15B43;
		border-color: transparent;
		color: #ffffff;
	}
    .cb-donate-form-row.donate-project {
        display: flex;
        flex-wrap: wrap;
    }
    .general-donation {
        width: 50%;
    }
    .donation-project {
        width: 50%;
    }

    @media screen and (max-width: 480px) {
        .cb-donate-form-row.donate-project {
            display: flex;
        }
        .general-donation {
            width: 100%;
        }
        .donation-project {
            width: 100%;
        }
    }

	/*===================================
	// Summery Section Area Css
	===================================*/

	section.project-summery {
        background: #f5f5f5;
        text-align: center;
    }
    /* section.project-summery p {
        background: #f5f5f5;
        padding: 45px 20px;
        color: #666;
        border-radius: 10px;
    } */

    .thought {
		font-family: "Open Sans", sans-serif;
        display:flex;
        background-color:#fff;
        padding:50px;
		font-size: 18px;
        /* border-radius:30px; */
        color: #666;
        min-width:40px;
        max-width:100%;
        min-height:40px;
        margin:20px;
        position:relative;
        align-items:center;
        justify-content:center;
        text-align:justify;
        margin: 0 auto;
        box-shadow: 0 0 5px 5px #f0f0f0;
    }

    /* .thought:before,
    .thought:after {
        content:"";
        background-color:#048fcd;
        border-radius:50%;
        display:block;
        position:absolute;
    } */

    /* .thought:before {
        width:44px;
        height:44px;
        top:-12px;
        left:28px;
        box-shadow:-50px 30px 0 -12px #F15B43;
    } */
    /* .thought:after {
        bottom:-10px;
        right:26px;
        width:30px;
        height:30px;
        box-shadow:40px -34px 0 0 #000,
                    -28px -6px 0 -2px #F15B43,
                    -24px 17px 0 -6px #000,
                    -5px 25px 0 -10px #048fcd;
    
    } */
    .project-summery.mobile{
        display: none;
    }


	/*===================================
	// Slogan Section Area Css
	===================================*/

	.slogan-area {
		/* margin-bottom: 150px; */
	}

	.slogan-area .slogan-bg {
		padding: 60px 150px;
		text-align: center;
		border-radius: 30px;
	}

	.slogan-area .slogan-bg .slogan-content h3 {
		font-size: 30px;
		color: #ffffff;
		font-weight: 700;
		line-height: 45px;
	}

	/*=================================
	// donate Section Area Css
	=================================*/

	.donate-area {
		/* padding-bottom: 125px; */
	}

	.single-donate-box {
		margin-bottom: 25px;
	}
    .donate-img img {
        width: 100%;
    }
	.donate-area .donate-box .single-donate-box {
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
						box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-transition: all 0.3s ease-out 0s;
		-o-transition: all 0.3s ease-out 0s;
		transition: all 0.3s ease-out 0s;
	}

	.donate-area .donate-box .single-donate-box .donate-img {
		overflow: hidden;
	}

	.donate-area .donate-box .single-donate-box .donate-content {
		padding: 20px;
		text-align: center;
        background: #fff;
	}

	.donate-area .donate-box .single-donate-box .donate-content h4 {
		/* font-family: "Merriweather", serif; */
		font-size: 20px;
		font-weight: 700;
		color: #002359;
	}

	.donate-content h4 { min-height:60px; }
    .donate-content ::placeholder{
        color: #8a8a8a;
    }
	.donate-area .donate-box .single-donate-box .donate-content p {
		color: #002359;
		font-size: 40px;
		font-weight: 700;
		margin: 20px 0;
	}

	.donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
		padding: 15px 40px;
		background-color: #F15B43;
		text-transform: capitalize;
		font-weight: 700;
		font-family: "Open Sans", sans-serif;
		font-size: 18px;
		color: #ffffff;
		display: inline-block;
		text-decoration: none;
		border: 1px solid transparent;
	}

	.donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn:hover {
		background-color: transparent;
		border: 1px solid #F15B43;
		color: #F15B43;
	}

	.donate-area .donate-box .single-donate-box .donate-content .donate-input {
		border: 1px solid #F15B43;
		height: 40px;
		width: 95%;
		outline: none;
		margin: 18px 0;
		padding: 0 15px;
		text-align: center;
	}

	.donate-area .donate-box .single-donate-box:hover {
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
						box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
	}

	.donate-area .donate-box .single-donate-box:hover img {
		-webkit-transform: scale(1.1);
				-ms-transform: scale(1.1);
						transform: scale(1.1);
	}


	/*==========================================
	// donate Section Area Css // donate-four
	==========================================*/
	.donate-four .donate-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}
	.donate-four .single-donate-box {
		width: 23%;
	}

	.donate-content select {
		background: #eee;
		padding: 8px;
		border: none;
		width: 95%;
		margin: 20px 0;
		font-size: 16px;
		color: #002359;
		margin-top: 0px;
		margin-bottom: 0px;
		border-radius: 4px;
	}
	@media (max-width: 780px) {
		.donate-four .single-donate-box {
			width: 48%;
		}
        .donate-four .donate-box {
            justify-content: space-between;
        }
		.donate-four .single-donate-box {
            margin-right: 0px;
        }
	}
	@media (max-width: 480px) {
		.donate-area .donate-box .single-donate-box .donate-content h4 {
            font-size: 16px;
            min-height: 40px;
        }
        .donate-area .donate-box .single-donate-box .donate-content p {
            font-size: 30px;
        }
        .donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
            padding: 5px 15px;
            height: auto;
            line-height: 35px;
            font-size: 16px;
        }
        .donate-area .donate-box .single-donate-box .donate-content {
            padding: 20px 5px;
        }


	}



	/*==========================================
	// Key Figure Section Area Css
	==========================================*/

	.key-figure-area {
        padding-top: 150px;
		padding-bottom: 100px;
        margin-bottom: 80px;
        position: relative;
        z-index: 2;
    }
    section.key-figure-area:before {
        background: rgb(4 143 205 / 80%);
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 1;
    }
    .key-figure-svg-wave-before {
        position: absolute;
        top: -6px;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 1;
    }
    .key-figure-svg-wave-after {
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 1;
    }
    .key-figure-svg-wave-before svg, .key-figure-svg-wave-after svg {
        width: 100%;
        height: auto;
    }
	.key-figure-area .section-title h2 {
		/* font-family: "Merriweather", serif; */
		font-size: 40px;
		font-weight: 800;
		color: #ffffff;
		text-align: center;
		position: relative;
        z-index: 2;
	}

	.key-figure-area .section-title h2::after {
		position: absolute;
		content: "";
		bottom: -25px;
		left: 50%;
		width: 60px;
		height: 3px;
		background: #ffffff;
		-webkit-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
						transform: translateX(-50%);
		-webkit-animation: runner 3s infinite;
		animation: runner 3s infinite;
		-webkit-transition: all 0.3s ease-out 0s;
		-o-transition: all 0.3s ease-out 0s;
		transition: all 0.3s ease-out 0s;
	}

	@-webkit-keyframes runner {

		0% {
			width: 0;
		}

		50% {
			width: 60px;
		}

		100% {
			width: 0;
		}
	}

	@keyframes runner {

		0% {
			width: 0;
		}

		50% {
			width: 60px;
		}

		100% {
			width: 0;
		}
	}


    .keyfigure-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        z-index: 2;
        position: relative;
    }
    
    .key-figure-area .keyfigure-box .single-keyfigure-box {
        text-align: center;
        width: 22%;
    }

	.single-keyfigure-box {
		margin-bottom: 50px;
	}
    .single-keyfigure-box i {
        font-size: 105px;
        color: #fff;
    }

	.key-figure-area .keyfigure-box .single-keyfigure-box {
		text-align: center;
	}

	.key-figure-area .keyfigure-box .single-keyfigure-box p {
		color: #ffffff;
		font-weight: 500;
		font-size: 24px;
		line-height: 34px;
		margin-top: 30px;
	}

    @media screen and (max-width: 768px) {
        .key-figure-area .keyfigure-box .single-keyfigure-box {
            text-align: center;
            width: 48%;
        }
        .fey-figure-svg-wave-before svg, .fey-figure-svg-wave-after svg {
            width: auto;
            height: auto;
        }
    }
    @media screen and (max-width: 480px) {
        .key-figure-svg-wave-before {
            top: -8px;
        }
        .single-keyfigure-box img {
            width: 70px;
        }
        .key-figure-area .keyfigure-box .single-keyfigure-box p {
            font-size: 16px;
            line-height: 25px;
            margin-top: 20px;
        }
        .keyfigure-box {
            align-items: flex-start;
        }
        .key-figure-area {
            padding-top: 60px;
            padding-bottom: 40px;
            margin-bottom: 80px;
        }
        .section-title {
            margin-bottom: 70px;
        }
        .key-figure-area .section-title h2 {
            font-size: 30px;
        }
    }



	/*====================================
	// Project Section Area Css
	====================================*/

	.project-area {
		/* margin-bottom: 70px; */
	}
    .project-area .project-grid .project-grid-content {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .project-area .project-grid .project-grid-2 .project-grid-content p.title {
        padding-bottom: 0;
    }
	.project-area .project-info .project-img {
		margin-bottom: 50px;
	}

	.project-area .project-info .project-content h2 {
		font-weight: 700;
		font-size: 40px;
		text-transform: capitalize;
		color: #002359;
	}

	.project-area .project-info .project-content p {
		font-family: "Open Sans", sans-serif;
		font-size: 18px;
		line-height: 32px;
		color: #666666;
		margin-top: 40px;
        text-align: justify;
	}
	.project-area .project-grid .project-grid-row-margin {
		margin-bottom: 80px;
	}

	.project-area .project-grid .bg-color {
		background-color: #F5F5F5;
	}

	.project-area .project-grid .project-grid-content p {
		font-family: "Open Sans", sans-serif;
		font-size: 16px;
		line-height: 32px;
		color: #666666;
		padding: 25px 120px 45px 50px;
        text-align: justify;
	}
    .project-area  .project-grid-content p.title {
        padding: 25px 120px 15px 50px;
        font-size: 26px;
        font-weight: bold;
        padding-bottom: 0;
    }
    .project-area .project-grid .project-grid-2 .project-grid-content p {
        padding: 45px 50px 45px 120px;
        padding-bottom: 0;
    }
	.project-area .project-grid .project-grid-img {
		padding: 30px 0;
		margin-left: -62px;
	}

	.project-area .project-grid .project-grid-img img {
		width: 100%;
	}

	.project-area .project-grid .project-grid-2 .priority {
		z-index: 0;
	}

	.project-area .project-grid .project-grid-2 .project-grid-img {
		margin-left: 0;
		margin-right: -62px;
	}

	.project-area .project-grid .project-grid-2 .project-grid-content p {
		padding: 25px 50px 45px 120px;
	}

	/*==================================
	// Notice Section Area Css
	==================================*/
    /* .notice {
		background: #f1c1b9;
		color: #c31b00;
        padding: 20px;
		border-left: 4px solid #f15b43;
    } */
    .notice {
        color: #666;
        padding: 40px 20px;
        border-left: 14px solid #fc6d58;
        border-right: 3px solid #e95546;
        -moz-box-shadow: 2px 2px 15px #ccc;
        -webkit-box-shadow: 2px 2px 15px #ccc;
        box-shadow: 2px 2px 15px #d9d9d9;
        font-size: 16px;
        font-family: 'Roboto Slab';
    }
    .notice strong {
        color: #e95546;
        font-size: 18px;
    }

    .notice p{
        line-height: 18px;
    }
    .notice-area {
        /* margin-bottom: 70px; */
    }


	/*==================================
	// Video Section Area Css
	==================================*/

	.video-area {
		/* margin-bottom: 150px; */
	}
    
	.video-area .video-cover {
		position: relative;
	}

    .video-cover:after {
        background: #00000061;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        position: absolute;
    }
	.video-area .video-cover .play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
		background-color: #ffffff;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
        z-index: 2;
	}


    .button {
        display: inline-block;
        position: relative;
    }
    .button.is-play {
        background-color: #fff;
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }
    .button.is-play .button-outer-circle {
        background: rgba(255,255,255,0.5);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
    }
    .button.is-play .button-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
    }
    .button.is-play .button-icon .triangle {
        -webkit-animation: fadeIn 7s ease;
                animation: fadeIn 7s ease;
    }
    .button.is-play .button-icon .path {
        stroke-dasharray: 90;
        stroke-dashoffset: 0;
        -webkit-animation: triangleStroke 3s;
                animation: triangleStroke 3s;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
    }
    .has-scale-animation {
        -webkit-animation: smallScale 3s infinite;
                animation: smallScale 3s infinite;
    }
    .has-delay-short {
        -webkit-animation-delay: 0.5s;
                animation-delay: 0.5s;
    }
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-webkit-keyframes triangleStroke {
        from {
            stroke-dashoffset: 90;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes triangleStroke {
        from {
            stroke-dashoffset: 90;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    @-webkit-keyframes smallScale {
        from {
            transform: scale(1);
            opacity: 1;
        }
        to {
            transform: scale(3.5);
            opacity: 0;
        }
    }
    @keyframes smallScale {
        from {
            transform: scale(1);
            opacity: 1;
        }
        to {
            transform: scale(3.5);
            opacity: 0;
        }
    }
    @media screen and (max-width: 768px) {
        @-webkit-keyframes smallScale {
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        @keyframes smallScale {
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(1.5);
                opacity: 0;
            }
        }
    }



	/* .video-area .video-cover .play-btn span {
		position: absolute;
		top: 50%;
		left: 50%;
		color: #F15B43;
		-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
		font-size: 40px;
		z-index: 1;
	} */

	/* .video-area .video-cover .play-btn::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 130px;
		height: 130px;
		background: #ffffff;
		border-radius: 50%;
		-webkit-animation: play 1.5s infinite;
		animation: play 1.5s infinite;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}

	@-webkit-keyframes play {

		0% {
			-webkit-transform: scale(0);
							transform: scale(0);
			opacity: 0;
		}

		20% {
			-webkit-transform: scale(1.1);
							transform: scale(1.1);
			opacity: 0.9;
		}

		40% {
			-webkit-transform: scale(1.2);
							transform: scale(1.2);
			opacity: 0.7;
		}

		60% {
			-webkit-transform: scale(1.3);
							transform: scale(1.3);
			opacity: 0.5;
		}

		80% {
			-webkit-transform: scale(1);
							transform: scale(1);
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(0);
							transform: scale(0);
			opacity: 0;
		}
	}

	@keyframes play {

		0% {
			-webkit-transform: scale(0);
							transform: scale(0);
			opacity: 0;
		}

		20% {
			-webkit-transform: scale(1.1);
							transform: scale(1.1);
			opacity: 0.9;
		}

		40% {
			-webkit-transform: scale(1.2);
							transform: scale(1.2);
			opacity: 0.7;
		}

		60% {
			-webkit-transform: scale(1.3);
							transform: scale(1.3);
			opacity: 0.5;
		}

		80% {
			-webkit-transform: scale(1);
							transform: scale(1);
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(0);
							transform: scale(0);
			opacity: 0;
		}
	} */

	/* .video-area .video-cover:hover .play-btn {
		background-color: #F15B43;
	}

	.video-area .video-cover:hover .play-btn span {
		color: #ffffff;
	} */


	
/*=====================================
// Gallery Section Area Css
=====================================*/
#water-project .container-fluid {
    padding-left: 0px;
     padding-right: 0px;
}
.grid-gallery, .gallery-showcase{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-areas:
    'd1 d2 d3 d4'
    'd5 d6 d7 d8'; */
    grid-gap: 10px;
    padding-bottom:0px;
}
.gallery-item > img.thumb, .grid-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-showcase .bef-ter {
    position: relative;
}
.gallery-showcase .bef-ter:nth-child(odd):before {
    content: "Before";
    position: absolute;
    top: 5px;
    right: -5px;
    font-size: 20px;
    color: #fff;
    background: rgba(4, 143, 205, 1);
    padding: 5px 30px;
    border-radius: 50px 0px 0px 50px;
	z-index: 2;
}
.gallery-showcase .bef-ter:nth-child(even):after {
    content: "After";
    position: absolute;
    top: 5px;
    left: -5px;
    font-size: 20px;
    color: #fff;
    background: rgba(4, 143, 205, 1);
    padding: 5px 30px;
    border-radius: 0px 50px 50px 0px;
}

.gallery-showcase .bef-ter-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.gallery-showcase .bef-ter-text .overlay__text {
    position: initial;
}
.gallery-showcase .bef-ter-text .overlay__text{
    background: rgba(241, 91, 67, 0.9);
    padding: 8px 15px;
}
.gallery-showcase .bef-ter-text .overlay__text p.paragraph {
    display: flex;
    margin-top: 5px;
    justify-content: center;
    align-items: center;
}
.gallery-showcase .bef-ter-text .overlay__text p.paragraph span svg{
    width: 12px;
}
.gallery-showcase .bef-ter-text h4{
    font-size: 22px;
    color: #fff;
    background: rgba(4, 143, 205, 1);
    padding: 6px 20px;
}
@media screen and (max-width: 600px) {
	.gallery-showcase .bef-ter-text h4{
		font-size: 17px;
		width: 240px;
	}
}
@media screen and (max-width: 375px) {
	.gallery-showcase .bef-ter-text h4{
		font-size: 17px;
		width: 115px;
	}
}

/* .default1{
    grid-area: d1;
}
.default2{
    grid-area: d2;
}
.default3{
    grid-area: d3;
}
.default4{
    grid-area: d4;
}
.default5{
    grid-area: d5;
}
.default6{
    grid-area: d6;
}
.default7{
    grid-area: d7;
}
.default8{
    grid-area: d8;
} */
.gallery-item{
    position:relative;
}
.gallery-item:hover .overlay{
    transform: scale(1);
}
a.overlay-icon {
    top: 50%;
}

@media (max-width: 768px) {
    #water-project .container-fluid{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .grid-gallery, .gallery-showcase{
        /* grid-template-areas:
        'd1 d2'
        'h1 h1'
        'h2 h2'
        'v1 v2'; */
        grid-template-columns: repeat(2, 1fr);
        padding-bottom:20px;
    }
    .gallery-showcase .bef-ter:nth-child(odd):before {
        font-size: 14px;
        padding: 5px 10px;
    }
    .gallery-showcase .bef-ter:nth-child(even):after {
        font-size: 14px;
        padding: 5px 10px;
    }
}




	/*###############################
	// Responsive Css
	###############################*/

	@media (max-width: 1399px) {

		/* .gallery-area .gallery-showcase .img-3 {
			margin-top: 10px;
		} */
	}

	@media (max-width: 1199px) {
		.donation-area {
            margin-bottom: 100px;
			margin-top: -100px;
        }
        .page-title-area {
            padding: 150px 0;
        }

		.donation-area .donation-info {
			padding: 70px 80px 53px;
		}
		
		.donation-area .selection-button .select-btn {
			padding: 0 30px;
		}
		
		.donation-area .selection-button .select-btn::after {
			right: 30px;
		}
		.donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
			padding: 10px 25px;
		}
		
		.donate-area .donate-box .donate-box-3 {
			height: 100%;
		}
		
		.donate-area .donate-box .donate-box-3 .donate-button-3 {
			margin-top: 40px;
		}
		
		.slogan-area .slogan-bg {
			padding: 60px 40px;
		}

	}
    @media screen and (max-width: 1024px){
		.donation-area {
            margin-bottom: 100px;
			margin-top: -100px;
        }
        .donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
            padding: 10px 25px;
        }
		.project-area .project-grid .project-grid-img {
			margin-left: 0px;
			/* margin-top: 50px; */
		}
		.project-area .project-grid .project-grid-2 .project-grid-img {
			margin-right: 0px;
			/* margin-top: 50px; */
		}
        
		.project-area .project-grid .project-grid-content p {
			padding: 25px 45px 45px 50px;
		}
		.project-area .project-grid .project-grid-2 .project-grid-content p {
			padding: 25px 50px 45px 45px;
		}
        .project-area .project-grid .project-grid-content p.title {
			padding-bottom: 0px;
		}

    }
	@media (max-width: 991px) {
		/* .project-area .project-grid .project-grid-2 .project-grid-img {
			margin-top: 0px;
		}
		.project-area .project-grid .project-grid-img {
			margin-top: 0px;
		} */
		.donate-area .donate-box .single-donate-box {
			width: 48%;
		}
		.donate-area .donate-box .single-donate-box .donate-img img {
			width: 100%;
		}
		.donate-area .donate-box .donate-box-3 {
			height: auto;
		}
		
		.donate-area .donate-box .donate-box-3 .donate-button-3 {
			margin-top: 0;
		}
		
		.donate-area .donate-box .single-donate-box .donate-content .donate-input {
			width: 58%;
		}
		
		.key-figure-area .keyfigure-box .child > :nth-child(3) {
			text-align: center;
		}
		
		.project-area .project-grid .project-grid-img {
			margin-left: 0;
		}
		
		.project-area .project-grid .project-grid-2 .project-grid-img {
			margin-right: 0;
		}
		
		.project-area .project-grid .project-grid-img img {
			margin-bottom: -35px;
		}
		
		
		.project-area .project-grid .project-grid-2 .project-grid-content p {
			padding: 25px 45px 45px 45px;
		}
		
		.gallery-area .gallery-showcase .img-3 {
			margin: 0;
			margin: 20px 0;
		}
        
	}

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


        .section-padding {
            padding-bottom: 70px;
        }
        .donation-area {
            margin-bottom: 100px;
			margin-top: -100px;
        }
		.donation-area .nice-select,
		input {
			margin-bottom: 15px;
		}
		
		.donation-area .select-2 {
			margin-bottom: -10px;
		}
		
		.donate-area .donate-box .single-donate-box .donate-content .donate-input {
			width: 100%;
		}
		
		.video-area .video-cover .play-btn {
			width: 100px;
			height: 100px;
		}
		
		/* .video-area .video-cover .play-btn::after {
			width: 100px;
			height: 100px;
		} */
        .project-area .project-info .project-img {
            display: none;
        }
		.project-area .project-grid .project-grid-img.pt-s-0 {
			padding-top: 0px;
		}
		.project-area .project-grid .project-grid-content p {
			padding: 25px 45px 45px 45px;
		}
		.project-area .project-grid .project-grid-2 .project-grid-content p {
			padding: 25px 45px 45px 45px;
		}
		.project-area .project-grid .project-grid-2 .project-grid-content p.title {
			padding-top: 25px
		}
		.project-area .project-grid .project-grid-row-margin {
			margin-bottom: 0px;
		}
        .project-summery.mobile{
            display: block;
        }
        .project-summery.desktop{
            display: none;
        }
		.project-text-box p{
			width: 100%;
		}
	}



	@media (max-width: 575px) {
        .page-title-area {
            padding: 70px 0;
        }
        .page-title-area .page-title h2{
            margin-bottom: 10px;
        }
        .page-title{
            margin-top: 60px;
            padding-bottom: 70px;
            
        }
		
		.donation-area .donation-selection h2 {
			font-size: 35px;
			line-height: 1.1;
		}
		
		.donation-area .nice-select span, .donation-area input span {
			font-size: 15px;
		}
		
		.donation-area .nice-select .list, .donation-area input .list li {
			font-size: 16px;
		}
		
		.donation-area .selection-button .select-btn {
			padding: 0 20px;
		}
		
		.donation-area .selection-button .select-btn::after {
			right: 20px;
		}
		
		.donation-area .donation-info {
			padding: 50px 45px;
		}
		
		.donation-area .donation-info .donation-info-button .donation-info-btn {
			line-height: 52px;
		}
		
		.slogan-area .slogan-bg .slogan-content h3 {
			font-size: 18px;
			line-height: 36px;
		}
		
		.slogan-area .slogan-bg {
			padding: 40px 25px;
		}
		.project-area .project-info .project-content h2 {
			font-size: 30px;
			line-height: 40px;
		}
		
		.project-area .project-grid .project-grid-content p {
			padding: 20px;
		}
		
		.project-area .project-grid .project-grid-2 .project-grid-content p {
			padding: 20px;
		}
		.project-area .project-info .project-content p {
			margin-bottom: 0px;
			margin-top: 15px;
		}
        
		.video-area .video-cover .play-btn {
			width: 70px;
			height: 70px;
		}
		
		.video-area .video-cover .play-btn span {
			font-size: 30px;
		}
		
		/* .video-area .video-cover .play-btn::after {
			width: 70px;
			height: 70px;
		} */
        /* .gallery-area {
            padding: 0 20px;
            margin-bottom: 150px;
        } */

		/*
		
		
		*/
		/* .donation-area,
		.slogan-area,
		.key-figure-area,
		.project-area,
		.video-area,
		.gallery-area {
			margin-bottom: 45px;
		} */
        .section-padding{
			padding-bottom: 30px;
		}
        .key-figure-area {
            margin-bottom: 30px;
        }
        .donate-area{
            padding-bottom: 20px !important;
        }
        .donation-area {
			margin-bottom: 30px;
			margin-top: -100px;
		}
        section.project-summery p {
            text-align: justify;
            line-height: 24px;
        }
		.notice {
			padding: 20px 20px;
		}
	}
    @media (max-width: 480px) {
		.donate-area .donate-box .single-donate-box .donate-content h4 {
            font-size: 16px;
        }
        .donate-area .donate-box .single-donate-box .donate-content p {
            font-size: 30px;
        }
        .donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
            padding: 5px 15px;
            height: auto;
            line-height: 35px;
            font-size: 16px;
        }
        .donate-area .donate-box .single-donate-box .donate-content {
            padding: 20px 5px;
        }
		
		.donate-area .donate-box .single-donate-box .donate-content .donate-input {
			margin: 20px 0px;
            width: 90%;
		}
        .thought {
            padding: 20px;
            text-align: left;
        }
        .project-area .project-info .project-content p {
            text-align: left;
        }
        .project-area .project-grid .project-grid-content p {
            text-align: left;
        }
	}

    @media (max-width: 375px) {
        .page-title-area {
            padding: 80px 0;
        }
        h2.cb-donate-title {
            font-size: 1.7rem;
            padding-top: 10px;
        }
        .page-title-area .page-title span {
            font-size: 16px;
        }

    }
    
    @media screen and (max-width: 320px) {
        .donate-area .donate-box .single-donate-box .donate-content .donate-button .donate-btn {
            padding: 5px 8px;
            font-size: 15px;
        }
    }


/* Video popup */
a.popup-video {
    display: block;
    height: 100%;
    width: 100%;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0, 0.95);
    z-index: 999;
    visibility:hidden;
    opacity: 0;
	transition: all ease-in-out .5s;
	transform: matrix(0, 0, 0, 0, -50%, -50%);;
}
.popup .pauseVideo{
    position: relative;
    outline: none;
}
.popup.active{
    visibility:visible;
    opacity: 1;
	transform: matrix(1, 0, 0, 1, -50%, -50%);
}

iframe, object, embed {
    max-width: 90%;
    max-height: 60%;
}
.close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 40px;
    cursor: pointer;
}

.only__text p {
    line-height: 30px;
}

/*  ##### Section NOtice  #####  */
.notice {

}