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

body{
    font-family: 'Roboto', sans-serif;
}
.logo{
  border-radius: 50%;
  width: 80px;
  height: 80px;
  padding: 10px;


}
.nav-bg{
    background: #5dbdaf; /* linear-gradient(to right,#efa92a ,#e78121);  */
    height: 80px;
}
.navbar-brand{
  font-family: 'Abril Fatface', cursive;
  font-size: 25px;
}
.navbar-nav .nav-link{
    color:#000!important;
    font-family: 'Abril Fatface';
    font-size: 18px;
}
.navbar-toggler{
    outline:none!important;
}
/*---Hero---*/
#hero{
    width:100%;
    height: 100vh;
    overflow:hidden;
    position: relative;
    font-family: 'Abril Fatface', cursive;
}
#hero:after{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    width:130%;
    height:95%;
    background: url("assets/wlp9.png")center no-repeat;/*image-size 1920H 1080W*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:0;
    border-radius: 0 0 50% 50%;
    transform:translateX(-50%) rotate(0deg);
    font-family: 'Abril Fatface', cursive;
}
#hero:before{
    content:'';
    position: absolute;
    left:50%;
    top:0;
    width:130%;
    height:96%;
    background:#5ce1e6;
    opacity:0.3;
    z-index:0;
    border-radius:0 0 50% 50%;
    transform: translateX(-50%)translateY(18px)rotate(2deg);
    font-family: 'Abril Fatface', cursive;

}
#hero .carousel-container{
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    bottom:0;
    top:0;
    left:0;
    right:0;
}
#hero h2{
    color: #FF0707;
    margin-bottom:30px;
    font-size: 50px;
    font-family: 'Abril Fatface', cursive;
}
#hero h5{
  width:80%;
  animation-delay:0.4s;
  margin:0 auto 30px auto;
  color: #FF0707;
  font-family: 'Abril Fatface', cursive;
  font-size: 40px;
}

#hero h6{
  width:80%;
  animation-delay:0.4s;
  margin:0 auto 30px auto;
  color: #FF0707;
  font-family: 'Abril Fatface', cursive;
  font-size: 30px;
}
#blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
#hero p{
    width:80%;
    animation-delay:0.4s;
    margin:0 auto 30px auto;
    color: #FF0707;
    font-family: 'Abril Fatface', cursive;
    font-size: 110px;
    font-weight: bold;
}
#hero .carousel-control-prev,
#hero .carousel-control-next{
    width:10%;
}
#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon{
    background:none;
    font-size:48px;
    line-height:1;
    width:auto;
    height: auto;
}
#hero .hero-btn{
    font-weight:bold;
    font-size:16px;
    letter-spacing:1px;
    display:inline-block;
    padding:12px 32px;
    border-radius:50px;
    transition:0.5s;
    line-height:1;
    margin:10px;
    color:#000;
    animation-delay:0.5s;
    border:2px solid #000;
}

#hero .hero-btn:hover{
    background:#fae5ac;
    color:#000;
    text-decoration:none;
}
@media(min-width:1024px){
    #hero p{
        width:60%;
    }
    #hero .carousel-control-prev,
    #hero .carousel-control-next{
        width:5%;
    }
}
@media(max-width:768px){
    #hero h2{
        font-size:28px;
    }
    #hero:after{
        width:180%;
        height:95%;
        border-radius:0 0 50% 50%;
        transform:translateX(-50%)rotate(0deg);
    }
    #hero:before{
        top:0;
        width:180%;
        height:94%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%)translateY(20px)rotate(4deg);
    }
}
@media(max-width:575px){
    #hero:after{
        left:40%;
        top:0;
        width:200%;
        height:95%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%)rotate(0deg);
    }
    #hero:before{
        left:50%;
        top:0;
        width:200%;
        height:94%;
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%)translateY(20px)rotate(4deg);

    }
}
/*--End of Hero---*/
/*======About Us=========*/
.tabs .nav-pills .nav-item{
    margin-bottom: 10px;
}
.tabs .nav-pills .nav-item .nav-link{
    background:#fff;
    border-radius:4px;
    color:#000;
    font-weight:bold;
    border:1px solid #03989e;
    font-size:20px;
    line-height: 30px;
}
.tabs .nav-pills .nav-item .nav-link span{
    color: #5ce1e6;
    font-size:30px;
}
.tabs .nav-pills .nav-item .nav-link.active{
    color:#fff;
    background: #03989e;
    border:1px solid #5ce1e6;
}
.tabs .nav-pills .nav-item .nav-link.active span{
    color:#fff;
}
.tabs .tab-content{
    background:#fff;
    padding:0;
}
.tabs .tab-content .img{/*images-size for this section 1000 x 667 */
    width:100%;
    height:400px;
    margin-bottom:20px;
}
.tabs .tab-content h3{
    font-weight:bold;
    font-size: 30px;

}
.tabs .tab-content h3 a{
    color:#000;
}
.tabs .tab-content p{
  color: #000;
  font-size: 20px;
}

#about-6 .hero-btn{
    font-weight:bold;
    font-size:16px;
    letter-spacing:1px;
    display:inline-block;
    padding:12px 32px;
    border-radius:50px;
    transition:0.5s;
    line-height:1;
    margin:10px;
    color:#000;
    animation-delay:0.5s;
    border:2px solid #000;
}
#about-6 .hero-btn:hover{
    background:#fae5ac;
    color:#000;
    text-decoration:none;
}

.magz{
  width: 90%;
  height: 90%;
}





/*======End of About Us=========*/
/*========Stories========*/
.story-box{
    padding:15px;
    background:#c6f8bc;
    margin-bottom:30px;
    position:relative;
}
.story-icon{
    width:90px;
    height:90px;
    text-align:center;
    line-height: 90px;
}
.story-icon i{
    font-size:50px;
    color:#fff;
    mix-blend-mode: difference;
}

.story-box h2{
    font-size:24px;
    font-weight:bold;
    color:#fff;
    mix-blend-mode: difference;
}
.story-box p{
    font-size: 16px;
    font-weight:light;
    color:#fff;
    mix-blend-mode: difference;
}

.overlay{
    margin:20px auto;
    border:none;
    padding:10px 44px;
    font-size:20px;
    position:relative;
    display:inline-block;
}
.overlay:before{
    transition:all 0.85s cubic-bezier(0.68,-0.55,0.265,1.55);
    content:'';
    width:50%;
    height: 100%;
    background: #053001;
    position: absolute;
    top:0;
    left:0;
    border-radius:10px 0px 0px 10px;

}
.overlay:hover:before{
    background:#053001;
    width:100%;
    border-radius:10px;
}
/*========End of the Stories========*/
/*============Projects Section=======*/
.project-container{
    background: #03989e;;
    position: relative;
    overflow: hidden;
}
/* .donation{
    background:#5ce1e6;
    color:black;
    padding:1px 3.5px;
    position: absolute;
    right:0;
    top:70%;
    transform: translateX(110%);
    transition: all 1s ease-in-out;
}
.donation:hover{
    color:#000;
}
.project-container:hover .donation{
    transform: translateX(0%);
} */
.outline{
    display: inline-block;
    vertical-align:middle;
    transform:perspective(1px)translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    position: relative;
}
.outline:before{
    content:'';
    position:absolute;
    border: #5ce1e6 solid 2px;
    top:2px;
    left: 2px;
    right:2px;
    bottom:2px;
    opacity:0;
    transition-duration: 0.3s;
    transition-property: opacity;

}
.outline:hover:before,
.outline:focus:before,
.outline:active:before{
    opacity:1;
}
.grow{
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow:0 0 5px #5ce1e6;
    transition-duration:0.3s;
    transition-property: box-shadow, transform;
}
.grow:hover,
.grow:focus,
.grow:active{
    box-shadow: 0 5px 5px 5px #5ce1e6;
    transform: scale(1.1);
}
/*====end of Projects Section======*/
/*====Team Section======*/
.team{
    background: #fff;
    padding:60px 0 30px 0;
}
.team .team-1{
    text-align:center;
    margin-bottom:80px;
    position:relative;
}
.team .team-1 .pic{
    border-radius:4px;
    overflow:hidden;
}
.team .team-1 img{
    transition:all ease-in-out 0.4s;
}
.team .team-1:hover img{
    transform:scale(1.1);
}
.team .team-1 .team-info{
    position: absolute;
    bottom:-48px;
    left:20px;
    right:20px;
    background: linear-gradient(360deg,#5dbdaf 100%,#5dbdaf 100%, #5dbdaf 100%);
    padding: 15px 0;
    border-radius: 4px;
}
.team .team-1 h4{
    font-weight: bold;
    margin-bottom:10px;
    font-size:23px;
    color:#fff;
    position: relative;
    padding-bottom: 10px;
}
.team .team-1 h5{
    font-weight: bold;
    position: relative;
}
.team .team-1 h4:after{
    content:"";
    position: absolute;
    display:block;
    width:50px;
    height:1px;
    background: #1d3501;
    bottom:0;
    left: calc(50% - 25px);
}
.team .team-1 span{
    font-style:italic;
    display:block;
    font-size: 13px;
    color:#fff;
}
.team .team-1 .social{
    margin-top: 15px;
}
.team .team-1 .social a{
    transition: color 0.3s;
    color:#01290d;
}
.team .team-1 .social a:hover{
    color:#fff;
}
.team .team-1 .social i{
    font-size:16px;
    margin: 0 2px;
}
@media (max-width: 992px){
    .team .team-1{
        margin-bottom: 100px;
    }
}
/*====end of Team Section======*/
/*==========Finished projects======*/
.project-item{
    display: block;
    position: relative;
    overflow:hidden;
    max-width:530px;
    margin:auto auto 16px;
}
.project-item .text{
    display:flex;
    height: 100%;
    width:100%;
    background-color:rgba(38, 41, 39, 0.2);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
}
.project-item .text .des{
    color:#fff;
    margin: auto 32px 32px;
}
.project-item .text .des h2{
    font-size:14px;
    text-transform: uppercase;
}
.project-item .text .des p{
    font-weight: light;
    font-size:20px;
}
@media(min-width:992px){
    .project-item{
        max-width: none;
        margin:0;
    }
    .project-item .text{
        transition: clip-path 0.25s ease-out, background-color 0.7s;
        clip-path:inset(0px);
    }
    .project-item .text .des{
        transition:opacity 0.25s;
        margin-left:80px;
        margin-right: 80px;
        margin-bottom: 80px;
    }
    .project-item img{
        transition: clip-path 0.25s ease-out;
        clip-path: inset(-1px);
    }
    .project-item:hover img{
        clip-path:inset(32px);
    }
    .project-item:hover .text{
        background-color: rgba(46, 155, 138, 0.6);
        /* background-color: #5dbdaf; */
    }
}
/*==========End of the Finished projects======*/
/*========== Donation Section======*/
.donation-form .input-field .input-group{
    width: 100%;
    border:1px solid #053001;
    border-radius: 7px;
    padding: 5px 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.donation-form .input-field .input-group .input-group-text{
    font-size: 16px;
    background: transparent;
    border:0;
    font-weight: bold;
}
.donation-form .input-field .input-group .form-control{
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-bottom: 0;
    border-top:0;
    border-radius: 0;
    border-right: 0;
    padding: 0 0 0 25px;
    height: 50px;
    font-size: 16px;
    color:#000;
}
.donation-form .input-field .input-group .form-control:placeholder{
    font-size: 16px;
    color: #7a7b7c;
    font-weight: 400;
}
.donation-form .input-field .input-group .form-control:focus{
    outline: none;
    box-shadow:none;
}
.donation-form .amount .need{
    box-shadow: 0  3px 6px rgba(0,0,0,0.16);
    padding: 18px 27px;
    border-radius: 7px;
    border: 1px solid #3cc78f;
    display: block;
    overflow: hidden;
}
@media (max-width: 767px){
    .donation-form .amount .need{
        display: block !important;
        margin-top: 15px;
    }
}
.donation-form .amount .need .select h5{
    font-size: 16px;
    color: #7a7b7c;
    margin-bottom: 0;
}
.donation-form .amount .need .fund label{
    font-size: 16px;
    font-weight: 400;
    color:#7a7b7c;
    margin-bottom: 0;
}

@media(max-width: 767px){
    .donation-form .amount .need .fund{
        width: 33.33%;
        float:left;
        margin-top: 15px;
    }
}
.donation-btn{
    margin-top: 50px;
}
.btn-don{
    background: #053001;
    color: #fff;
    border-radius: 50px;
}
.btn-don:hover{
    color: #9ef596;
}
/*==========End of the Donation Section======*/
.footer{
    /* background:linear-gradient(rgba(162,247,106,0.6),rgba(0,59,37,0.4));    */
    /* background: linear-gradient(360deg,#09354e 60%,#09354e 40%, #39b5b9 80%); */
    background: linear-gradient(360deg, #5dbdaf 100%, #5dbdaf 100%);
    padding: 0 0 30px 0;
    color: #000;
    font-size: 15px;
}
.footer .footer-top{
    padding: 60px 0 30px 0;
}
.footer .footer-top .footer-des{
    margin-top: -90px;
    margin-bottom: 15px;
    background:#011430;
    color:#fff;
    border-top: 4px solid #b3f19b;
    text-align: center;
    padding:30px 20px;
}
.footer .footer-top .footer-des h3{
    font-size:24px;
    margin: 0 0 2px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: bold;
}
.footer .footer-top .footer-des p{
    font-size:14px;
    line-height: 24px;
    margin-bottom: 0;
}
.footer .footer-top .social-links a{
    font-size: 18px;
    display: inline-block;
    background: #3dc9c9;
    color:#000000;
    line-height:1;
    padding:8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align:center;
    width: 36px;
    height:36px;
    transition: 0.3s;
}
.footer .footer-top .social-links a:hover{
    background: #011430;
    color: #fff;
    text-decoration: none;
}
.footer .footer-top h4{
    font-size:16px;
    font-weight:bold;
    color: #000;
    position:relative;
    padding-bottom: 12px;
}
.footer .footer-top .footer-links{
    margin-bottom: 30px;
}
.footer .footer-top .footer-links ul{
    list-style: none;
    padding: 0;
    margin:0;
}
.footer .footer-top .footer-links ul i{
    padding-right: 2px;
    color:#000;
    font-size: 18px;
    line-height: 1;
}
.footer .footer-top .footer-links ul li{
    padding: 10px 0;
    display: flex;
    align-items:center;
}
.footer .footer-top .footer-links ul li:first-child{
    padding-top:0;
}
.footer .footer-top .footer-links ul a{
    color:#000;
    transition:0.3s;
    display: inline-block;
    line-height: 1;
}
.footer .footer-top .footer-links ul a:hover{
    color: #053001;
}
.footer .footer-top .footer-newsletter form{
    margin-top:30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 4;
}
.footer .footer-top .footer-newsletter form input[type="email"]{
    border:0;
    padding: 4px;
    width: calc(100% - 110px);
}
.footer .footer-top .footer-newsletter form input[type="submit"]{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    border:0;
    background: none;
    font-size:16px;
    padding: 0 20px;
    background: #053001;
    color:#fff;
    transition: 0.3s;
    border-radius:4;
}
.footer .footer-top .footer-newsletter form input[type="submit"]:hover{
    background: #b3f19b;
    color:#053001;
}