 




.hero-section {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
  
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/home/hero.png);
 
	width: 100%;
	height: 85vh;
}


.hero-section-smaller {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
	width: 100%;
	height: 55vh;
}

 
.nav-logo {
	width: 100%;
	max-width: 115px;
	padding-top: 1rem;
}

  

	  .hero-flex {
			display: flex;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
		  }
		  
		  .hero-text {
			  max-width: 47vw;
			  
		  }
		  
		  .nav-classes {
			  position: absolute;
			  z-index: 5;
		  }

 

@media print, screen and (max-width: 64em) {
		.hero-section {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/home/hero.png);
	width: 100%;
	height: 67vh;
}
	
	
	.hero-section-smaller {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
	width: 100%;
	height: 45vh;
}

 
.nav-logo {
	width: 100%;
	max-width: 70px;
	padding-top: 1rem;
}

  

	  .hero-flex {
			display: flex;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
		  }
		  
		  .hero-text {
			  max-width: 47vw;
			  
		  }
		  
		  .nav-classes {
			  position: absolute;
			  z-index: 5;
		  }
	     
			  
			  
}



@media print, screen and (max-width: 640px) {
		.hero-section {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/home/hero.png);
	width: 100%;
	height: 50vh;
}
	
		.hero-section-smaller {
    position: relative;
    background-size: cover;
    background-position: center bottom;
     background-repeat: no-repeat;
    color: white;
     overflow: hidden;
	width: 100%;
	height: 45vh;
}


	
	   .hero-section h1 {
        font-size: 1.6rem;
    }
 
.nav-logo {
	width: 100%;
	max-width: 70px;
	padding-top: 0rem;
}

  

	  .hero-flex {
			display: flex;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
		  }
		  
		  .hero-text {
			  max-width: 80vw;
			  
		  }
		  
		  .nav-classes {
			  position: absolute;
			  z-index: 5;
		  }
	     
			  
			  
}



		  
		  .blue-text {
			 color: #166A85;
		  }
		  
		  .blue-bg {
			 background-color: #166A85;
		  }
		  
		  	  .light-blue-text {
			 color: #52C1DB;
		  }
		  
		  .light-blue-bg {
			 background-color: #52C1DB;
		  }
		  
		  	  .yellow-text {
			 color: #FFD500;
		  }
		  
		  .yellow-bg {
			 background-color: #FFD500;
		  }
		  
		  .gray-bg-image {
			  background-image: url("../img/home/gray-bg.png");
			  background-size: cover;
			  background-repeat: no-repeat;
			      background-position: center center;
		  }
		  
		   .blue-bg-image {
			  background-image: url("../img/home/blue-bg.png");
			  background-size: cover;
			  background-repeat: no-repeat;
			      background-position: center center;
		  }
		  
		  .provisions-columns img {
			  width: 100%;
			  max-width: 140px;
		  }
		  
		  
		  .provisions-columns .provisions-headings {
			  font-weight: bold;
		  }



/* Header */
header {
    background-color: #f8f9fa;
    padding: 10px 0;
}

header img {
    max-height: 50px;
}

header .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

header .menu li {
    display: inline;
    margin-left: 20px;
}



.pt-75 {
	padding-top: 75px;
}

.pt-50 {
	padding-top: 50px;
}

.pt-25 {
	padding-top: 25px;
}

.pb-75 {
	padding-bottom: 75px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-25 {
	padding-bottom: 25px;
}


@media print, screen and (max-width: 640px) {
	
	.pt-75 {
	padding-top: 25px;
}

.pt-50 {
	padding-top: 25px;
}

.pt-25 {
	padding-top: 25px;
}

.pb-75 {
	padding-bottom: 25px;
}

.pb-50 {
	padding-bottom: 25px;
}

.pb-25 {
	padding-bottom: 25px;
}
	
}

/* Hero Section */



/* Footer */
footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
}

footer p {
    margin: 10px 0;
}

footer .button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

footer .button:hover {
    background-color: #0056b3;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    header .menu li {
        display: block;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }
}



		  .shape-box-flex {
			      display: flex;
    align-items: flex-end;
		  }
 
		  .yellow-shape {
 		  background: linear-gradient(353deg, #FFD500 78%, #ffffff 50%) ;
			  	 margin-bottom: 85px;
  
		  }


		  .yellow-shape2 {
 		  background: linear-gradient(353deg, #FFD500 78%, #ffffff 50%) ;
	 
		  }

		.giving-yellow-lift {
			margin-top: -6vh;
		}



		  .tilt-box-text {
			     padding: 6rem;
    padding-top: 13rem;
		  }
		  
		  .leader-image img {
			  width: 100%;
			  max-width: 350px;
			  margin-top: 150px;
		  }
		  
		     .blue-shape {
 		  background: linear-gradient(353deg, #52C1DB 78%, #ffffff 50%) ;
				 margin-bottom: 85px;
 
		 
		  }
		  
     .blue-shape2 {
 		  background: linear-gradient(353deg, #52C1DB 78%, #ffffff 50%) ;
		 
		  }

	.giving-blue-lift {
			margin-top: -6vh;
		}
		  
		  @media print, screen and (max-width: 40em) {
			  
			  	  .shape-box-flex {
			      display: flex;
    align-items: flex-end;
					  flex-direction: column;
		  }
			  
			  
			  	  .yellow-shape {
 	 
			  	 margin-bottom: 0px;
  
		  }
		  
 
		     .blue-shape {
  
				 margin-bottom: 0px;
 
		 
		  }
		   
			 
			  
		  .tilt-box-text {
			     padding: 2rem;
    padding-top: 11rem;
		  }
		  
		  .leader-image img {
			  width: 100%;
			  max-width: 350px;
			  margin-top: -50px;
			  text-align: center;
		  }
		  
		  }
		  
		  .white-text {
			  color:#ffffff;
		  }
		  
		  .white-bg {
			  background-color:#ffffff;
		  }
		  
		  .footer-bg {
			  background-color:#393A3B;
		  }
		  
		  
  .giving-levels-bg {
			  background-image: url('../img/donate/giving-levels-bg.png');
			  background-position: center center;
			  background-repeat: no-repeat;
			  background-size: cover;
			  height: auto;
			  
		  }


		  .gray-stripe-bg-thing {
			  background-image: url('../img/why-give/gray-stripe.png'); 
			  background-position: 50% 78%; 
			  background-repeat: no-repeat;  
			  background-size: contain;
			  
		  }
		  
		    	  @media print, screen and (max-width: 64em) {
					  	  	  .gray-stripe-bg-thing {
			  background-image: none; 
			  background-position: 50% 78%; 
			  background-repeat: no-repeat;
						    background-size: contain;
		  }
					  
		  }
		  
		  
		  	  @media print, screen and (max-width: 40em) {
				  
				  
				  	  .gray-stripe-bg-thing {
			  background-image: none; 
			  background-position: 50% 78%; 
			  background-repeat: no-repeat;
						    background-size: contain;
		  }
				  
				  .giving-yellow-lift {
    margin-top: 0vh;
}
				  
				  
		  }



