/*------------------------------navigation bar-------------------------------------------*/
header{
	position: relative;
	z-index: 10;
	width: 100%;
}

.navbar{
	padding: 20px 0; 
}

.navbar-brand{
	text-transform: uppercase;
	font-size: 2em;
	color: #262626;
}

.nav-item{
	text-transform: uppercase; 
}

.navbar-light .navbar-nav .nav-item .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active .nav-link{
	background: #3b5998;
	color: #fff;
	border-radius: 10px;
}

.navbar-light .navbar-nav .nav-item .nav-link{
	color: #262626;
	padding: 5px 15px;
	margin: 0 5px;
}

/* -------------------------------------------  Main Section  ------------------------------------------- */
.popup{
	transition: transform .2s; 
}

.popup:hover {
  transform: scale(1.1); 
		box-shadow: 10px 5px 5px -3px rgba(92,92,92,0.4), 0px 7px 10px rgba(92,92,92,0.6), -10px 5px 5px -3px rgba(92,92,92,0.4);   
}
/* -------------------------------------------  What we do Section  ------------------------------------------- */
#para{
	text-align: left;
}

.cause img{
	height: 250px;
	width: 100%;
}

.causes{
	margin-top: -150px;
}
/* -------------------------------------------  footer section  ------------------------------------------- */
.social a{
	font-size: 4em;
	padding: 2rem;
}

.fa-facebook-square{
	color: #3b5998;
}

.fa-envelope{
	color: #D44638; 
}

.fa-linkedin{
	color: #0e76a8;
}

.fa-instagram{
	color: #405DE6;
}

.fa-youtube{
	color: #bb0000;
}

.fa-facebook-square:hover, .fa-instagram:hover , .fa-youtube:hover, .fa-envelope:hover, .fa-linkedin:hover{
	color: #d5d5d5;
}

/*----------------------------------------------media queries------------------------------------------------*/
@media(max-width: 576px){
  #logoImg{
  	width: 75%;
  	height: 100%;
  }  
  .social a{
		font-size: 2em;
		padding: 1rem;
	}

	.popup p{
		font-size: 8px;
	}
}