body {

  background: #fff !important;
  font-family: 'Poppins', sans-serif;
}
a {
  text-decoration: none;
  color: #1a1e21;
}

.section-title h2 {
  text-shadow: 1px 1px 2px #4444;
}
/*****************************
    NavBar
******************************/
header nav {
  background-color: #5C5C5C;
  
  box-shadow: 0px 0px 5px #4444;
  opacity: 80%;
  position: fixed;
}
.navbar h2{
  font-size: 1rem;
  color: #fff;
}
.navbar button{
  border: none;
  background-color: #ffcf88;
  color: #fff;
  width: 100%;
  border-radius: 30px;
  height: 5vh;
  font-weight: bold;
}
.navbar a{
  color: white;
  font-weight: bold;

}
.collapse .navbar-nav{
  width: 50%;
  text-align: center;
  justify-content: space-between;
}
.navbar .nav-item{
  font-weight: bold;
  margin: 2%;
}
.navbar a:hover{
  color: red;
 
}

.carousel-item {
  width: 100%;
  height: 130vh!important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-item::before {
  content: '';
  background-color: rgba(12, 11, 10, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.carousel-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 40%;
  left: 0;
  right: 0;
}

.carousel-caption h5 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 42px;
  font-weight: 700;
  width: 80%;
  margin: 0px auto 30px auto;
}

.carousel-caption p {
  
  font-size: 20px;
  width: 80%;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin: 0px auto 30px auto;
}

@media(max-width:768px){
  .carousel-caption h5 {
    font-size: 38px;
  }
}
@media(max-width:577px){
  .carousel-caption h5 {
    font-size: 25px;
    
  }
  .carousel-caption p {
    font-size: 13px;
  }
  
}


/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/

.about{
  
  background-image: url("../img/bg-white-06.jpg");
  height:110vh!important;
  background-position: center;
  background-size: cover;
  color: #5C5C5C;
}
.about .container-fluid{
  width: 85%;
  margin: 0 auto;
}
.about .text-content{
  font-size: medium;
  text-align: center;
}
.about .text-content h6{
  font-weight: normal;
  letter-spacing: 0.15rem;
  font-size: small;

}
.about .text-content strong {
  font-size: 4rem;
}
.about .text-content button{
  border: none;
  background-color: #EFC94C;
  color: #fff;
  width: 20%;
  border-radius: 30px;
  height: 5vh;
  font-weight: bolder;
}
.about .text-content hr{
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 1400px) {
  .about{
    height: 500vh;
  }
}
@media (max-width: 1024px) {
  .about{
    height: 100vh;
  }
}

@media (max-width: 992px) {
  
}
@media(max-width:577px){
  .about{
    height: 100vh;
  }
  .about .text-content button{
    width: 50%;
  }
}
/*--------------------------------------------------------------
# About-Page
--------------------------------------------------------------*/

.about-page{
  
  background-image: url("../img/bg-white-03.jpg");
  height: 100vh!important;
  background-position: center;
  background-size: cover;
  color: #5C5C5C;
}
.about-page .container-fluid{
  width: 85%;
  margin: 0% auto;
}
.about-page-content{
  font-size: medium;
  text-align: center;
}
.about-page-content h5{
  font-weight: normal;
  font-size: small;

}
.about-content-text{
  margin-top: -10%;
}
/*--

/*--------------------------------------------------------------
# our-story
--------------------------------------------------------------*/

.our-story{
  height: 120vh!important;
  background-position: center;
  background-size: cover;
}
.our-story-header{
  background-image: url("../img/bg-color-01.jpg");
  background-size: cover;
  background-position: center;
  height: 20vh;
}
.our-story-header-content{
  width: 60%;
  margin: 0 auto;
  color: white;
}
.our-story-header-content h3{
  font-size: 2rem;
  font-weight: bolder;
}
.our-story-header-content button{
  border: none;
  background-color: #2780BA;
  color: #fff;
  width: 60%;
  border-radius: 30px;
  height: 5vh;
  font-weight: bolder;

}
.our-story-header-content h6{
  font-weight: normal;
  font-size: small;
  text-align: center;

}

.our-story-content{
  width: 80%;
  margin: 0 auto;

}
.our-story-content h6{
  font-weight: normal;
  font-size: small;
  margin: auto 0;
  text-align: center;
  margin-top: 50%;
  color: #5C5C5C;
}
.our-story-icons{
  margin: 0 auto;
  text-align: center;
}
 .icon1{
  filter: grayscale(100%);
}
 .icon2{
  filter: grayscale(100%);
}
 .icon3{
  filter: grayscale(100%);
}
.icon4{
  filter: grayscale(100%);
}
 .icon5{
  filter: grayscale(100%);
}
.icon6{
  filter: grayscale(100%);
}
.icon1:hover{
  filter: grayscale(0%);
}
.icon2:hover{
  filter: grayscale(0%);
}
.icon3:hover{
  filter: grayscale(0%);
}
.icon4:hover{
  filter: grayscale(0%);
}
.icon5:hover{
  filter: grayscale(0%);
}
.icon6:hover{
  filter: grayscale(0%);
}
.our-story-icons img{
  margin: 2%;
}

@media(max-width:991px){
  .contact .content{
    display: inline;
  }
}   
@media(max-width:768px){
  .contact .content{
    display: inline;
  }
}   
@media(max-width:577px){
  .our-story{
    height: 160vh!important;
   
  }
  .our-story-header{
    height: 40vh;
  }
  .our-story-header-content h6{
    font-weight: normal;
    font-size: medium;
    text-align: center;
  
  }
  .our-story-header-content h3{
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    margin: 8%;
  }
  .our-story-header-content button{
    border: none;
    background-color: #2780BA;
    color: #fff;
    width: 80%;
    border-radius: 30px;
    height: 5vh;
    font-weight: bolder;
    text-align: center;
    margin: 8%;
  
  }
  .our-story .container-fluid{
    margin-top: -20%;
 
  }
  .our-story-content h6{
    font-weight: normal;
    font-size: medium;
    margin: auto 0;
    text-align: center;
    margin-top: 10%;
    color: #5C5C5C;
  }
}


/*--------------------------------------------------------------
# our-Story-Page
--------------------------------------------------------------*/

.our-story-page{
  width: 80%;
  margin: 0 auto;
  background-image: url("../img/bg-white-04.jpg");
  background-size: cover;
  background-position: center;
}
.our-story-page .starter-container .header{
  text-align: center;
}  

.our-story-page .header{
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.accordion-header{
  background-color: #5C5C5C;
  border: #5C5C5C;
}


.accordion button:not(.collapsed){
  color: white;
  border: 1px solid red;
  background-color: #5C5C5C;
  border: #5C5C5C;
  box-shadow: none;
  border: none;
}
.accordion-body {
  background-color: white;
  border: none;
  box-shadow: none;
}


/*--------------------------------------------------------------
# Impact
--------------------------------------------------------------*/

.impact{
  height: 150vh!important;
  background-position: center;
  background-size: cover;
}
.impact .container{
 
  margin: 0 auto;
  color: #5C5C5C;
}
.impact  .starter{
  background-image: url(../img/bg-color-02.jpg);
  background-position: center;
  background-size: cover;
  height: 50vh;
  width: 100%;
  color: white;
  text-align: center;
  padding: 2%;
}
.impact  .starter p{
  color: #bab8b8;
  text-align: center;
  margin: 0 auto;
}
.impact  .starter .header h2{
  text-align: center;
  margin: 0 auto;
}
.impact  .starter .header{
  display: flex;
  width: 60%;
  text-align: center;

 margin: 0 auto;
 

}
.impact  .starter .header .sponsors{
width: 20%;
margin: 0 auto;
}
.towns{
  display: flex;
  color: #bab8b8;
  text-align: center;
  margin:0 auto;
  width: 30%;
}
.towns ul {
  text-align: center;
  margin: 0 auto;
  width: 80%;
}
.towns li{
  text-decoration: none;
  list-style: none;
}


.impact .container{
  margin-top: 5%;
}
.card-body{
  background-image: url(../img/bg-white-05.jpg);
  background-position: center;
  background-size: cover;
  color: #5C5C5C;
  font-size: small;
  font-weight: normal;
}
.card1{
  background-image: url(../img/bg-color-05.jpg);
  background-position: center;
  background-size: cover;
  height: 30vh;
  color: white;
 
}

.card2{
  background-image: url(../img/bg-color-04.jpg);
  background-position: center;
  background-size: cover;
  height: 30vh;
  margin-top: 10vh;
  color: white;
 
}
.card3{
  background-image: url(../img/bg-white-05.jpg);
  background-position: center;
  background-size: cover;
  height: 70vh;
  color: #414141;
 
}
.card4{
  background-image: url(../img/bg-color-03.jpg);
  background-position: center;
  background-size: cover;
  height: 30vh;
  color: white;
 
}
.card5{
  background-image: url(../img/focus-3.jpg);
  background-position: center;
  background-size: cover;
  height: 30vh;
  margin-top: 10vh;
  color: white;
}
.impact .container a{
  text-decoration: none;
  
}
.impact .container a:hover{
  filter: invert();
}

.impact .container a h1{
  font-size: 5rem;
  opacity: 90%;
  padding: 7%;
  height: 10vh;
}
.impact .container a p{
  padding: 7%;
  font-size: 2rem;

}


@media(max-width:991px){

}   
@media(max-width:768px){

}   
@media(max-width:577px){
.impact{
  height: 270vh!important;
}

.impact  .starter{

  height: 50vh;
  text-align: center;
  padding: 5%;
}
.impact  .starter p{
  color: #bab8b8;
}
.impact  .starter .header{
  width: 100%;
  margin-left: 20%;
}
.towns{
  width: 100%;
}
.towns ul {

  width: 100%;
}

}

/*--------------------------------------------------------------
# Impact Page
--------------------------------------------------------------*/


.imapct-page .text-content{
  font-size: medium;
  text-align: center;
  margin: 0 auto;
}
.impact-page .text-content h6{
  font-weight: normal;
  letter-spacing: 0.15rem;
  font-size: small;

}
.impact-page .text-content img{
  text-align: center;
  margin: 0 auto;
  margin-left: 30%;
}
.impact-page .text-content strong {
  font-size: 4rem;
  text-align: center;
  margin-left: 30%;
}

.impact-page .text-content hr{
  width: 80%;
  margin: 0 auto;
}

.impact-page{
  background-image: url("../img/bg-white-03.jpg");
  height: 100vh!important;
  background-position: center;
  background-size: cover;
  color: #5C5C5C;
}
.impact-page .container-fluid{
  width: 85%;
  margin: 0% auto;
}
.impact-page-content{
  font-size: medium;
  text-align: center;
}
.impact-page-content h5{
  font-weight: normal;
  font-size: small;

}
.impact-page .container-fluid .content2{
  background-image: url("../img/bg-color-06.jpg");
  background-size: cover;
  background-position: center;
  height: 70vh;
  color: white;
 
}
.impact-page .container-fluid .content2 h3{
  font-size: small;
  font-weight: normal;
  margin: 10%;
}
.content3{
  margin-top: 5%;;
 
}
.content3 .health{
  border-right: 5px solid orange;
  text-align: center;
}
.content3 .health3{
  text-align: center;
}

.content3 h3{
  font-size: small;
  font-weight: normal;
  text-align:justify;
  
}
.content3 img{
  margin-bottom: 20px;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/


.gallery{
  height: 160vh;
  background-position: center;
  background-size: cover;
  background-color: whitesmoke;
  padding: 2%;
}

.gallery .container h2{
  font-size: 2rem;
  font-weight: bolder;
  
}

@media(max-width:991px){

}   
@media(max-width:768px){
  .gallery{
    height: 500vh;
  }  
} 
@media(max-width:577px){
  .gallery{
    height: 320vh;
  }  

} 

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

.contact{
width: 100%;
color: black;
}
.contact .content{
  display: flex;
}
.contact-content{
  width: 60%;
  margin: 0 auto;
  color: white;
}
.contact #contact{
  padding: 5%;
}
.contact #contact img{
  margin: 3%;
  font-size: small;
  font-weight: normal;
}
.contact #donate{
  background-color:#00BAA3 ;
  padding: 5%;
  color: white;
}
.contact #donate h5{
  font-size: small;
  font-weight: normal;

  color: white;
  margin-bottom: 5%;
}
.contact #donate input{
  border: none; 
  margin: 3%; 
  width: 100%;
  border-radius: 15px;
  background-color:#b3f3eb;
  height: 4vh;
  
}
.contact #donate input::placeholder{
  font-size: 0.7rem;
  padding-left: 5%;
  color: #00BAA3;
}
.contact #donate button{
  width: 30%;
  border-radius: 10px;
  background-color:#046c60;
  color: white;
  border: none;
  float: right;

}
@media(max-width:991px){
  .contact .content{
    display: inline;
  }
  .contact .content{
    height: 30vh;
  }
}   
@media(max-width:768px){
  .contact .content{
    display: inline;
  }
}   
@media(max-width:577px){
  .contact .content{
    display: inline;
  }
  .contact .content iframe{
    width: 30%;
  }
  .contact #donate{
    height: 30vh;
  }
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footer{
  background-color: #414141;
  padding: 3%;
}

/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}