/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
	
	font-size:22px;
	line-height: 32px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	line-height: 34px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	line-height: 70px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0 2rem;
	background-color: #151f77;
	position: relative;
	z-index: 1;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	/*font-size:20px;
	line-height: 60px;*/
	margin-top: 0.5rem;
	width: 15rem;
}
.logo-image{
	width:100%;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #254441;
	background-color: rgb(41, 166, 224);
	
	}


/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color:rgb(255, 255, 255);
	font-size:17px;
	text-decoration:none;
	text-align: center;
}

nav a:hover {
		
	color:rgb(255, 255, 255);
	
}

nav ul li ul li:hover { background: #e4640e; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #e4640e; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
/*li > a:after { content:  ' +'; }-->*/
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

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

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
	
		background-color: rgb(77, 10, 77);
		background-color: rgb(20, 140, 187);

		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
		text-align: center;
	}

	.toggle:hover {
		
		background-color: rgb(197, 13, 230);
		background-color: rgb(230, 179, 13);
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
		background-color: #e4640e;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

.menu{
	margin-top: 0.5rem;
}

.home-a{
	background-color: rgb(20, 140, 187);
}

.about-a{
	background-color: rgb(230, 179, 13);
}





/*SLIDER*/


.d-block{
    height:37rem;
    object-fit: cover;
}

.project-1-slide {
    height: 70vh;
}

.vision-slide {
    height: 50vh;
}

.slide-link {
   /* background-color:rgb(108, 235, 35) ;*/
    background-color:rgb(255, 255, 255) ;
    color: rgb(21, 50, 179);
    border: 0.2rem solid rgb(21, 50, 179);
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 2rem;
    box-shadow: 0.1rem 0.2rem 0.3rem black;
    text-decoration: none;
}

.slide-link:hover {
    background-color:rgb(21, 50, 179);
    color:white;
}

.slide-h1 {
    /*background-color: rgba(235, 135, 21, 0.746);*/
    background-color: rgba(255, 255, 255, 0.842);
    padding: 1rem 0;
    color: rgb(16, 46, 143);
    font-family: 'Rubik', sans-serif;
	font-weight: 600;
    font-size: 2.5rem;
   
    letter-spacing: 0.1rem;
}

.slide-h1-1{
    width:35rem;
    margin:0 auto;
    margin-bottom: 2rem;
}

.slide-h1-2, .slide-h1-3, .slide-h1-4{
    width:40rem;
    margin:0 auto;
    margin-bottom: 2rem; 
}

.slide-p {
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0.1rem 0 0.1rem black;
    background-color: rgb(0, 140, 255);
	padding: 0.9rem 0;
    width:35rem;
    margin:0 auto;
    margin-bottom: 2rem;
	line-height: 2.5rem;
	letter-spacing: 0.1rem;
}

.slide-p1{
	width:30rem;
	background-color: rgb(236, 164, 30);
}

.slide-p2{
	background-color: rgb(230, 99, 13);
}

.slide-p3{
	background-color: rgb(173, 28, 199);
}
.carousel-indicators{
    color: rgb(133, 202, 30) !important;
}

@media screen and (max-width:1023px){
.slide-h1 {
    font-size: 2.5rem;
    line-height: 2.9rem;
	
   
}

.slide-p{
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin:0 auto;
    width:20rem;
    margin-bottom: 2rem;
}

}




@media screen and (max-width:480px){
    .slide-h1-2, .slide-h1-3, .slide-h1-4, .slide-h1-1 {
        font-size: 1.5rem;
        line-height: 2rem;
        width: 12rem;
        margin:0 auto;
        margin-top: -3rem;
        letter-spacing: 0rem;
    }

    .slide-h1-1{
        margin-bottom: 2rem;
    }

    .slide-p{
        margin:0 auto;
        width: 13rem;
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
}

.carousel-indicators, .slide-link{
	display: none;
}
     
.fisrtword{
	color:rgb(0, 140, 255);
}
 
.secondword{
	color:rgb(0, 0, 0);
}

.thirdword{
	color:rgb(231, 98, 9);
}

.fourthword{
	color:rgb(31, 129, 124);
}

@media screen and (min-width:481px) and (max-width:800px){
	.slide-h1{
		width:20rem;
		margin:0 auto;
		
	}
}
    
     
/**********************/
/*--CATEGORIES-**/
/*********************/

.catergories{
    padding: 3rem 0;
	background-color: rgb(229, 245, 255); 
	background-color: rgb(234, 197, 255); 
	text-align: center;
}

.catergories-container{
    width: 90%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}

.category{
    flex:1 30rem;
	max-width: 36rem;
    margin:1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	background-color: rgb(208, 226, 240);
	background-color: rgb(212, 138, 255); 
	padding: 1rem 0;
	transition: 0.5s;

}

.category:hover {
	box-shadow: 0 0 0.5rem rgb(34, 67, 87);
}

.category-image, .category-content{
    flex:1 16rem;
    max-width: 16rem;
    margin:0.5rem;
    
}

.category-content{
text-align: center;
}



.category-photo{
    width:100%;
  
}

.category-h3{
	color:rgb(214, 17, 214);
    font-size: 1.5rem;
}



.category-p{
    color:rgb(67, 11, 77);
    font-size: 1.2rem;
}

.category-link{
    display: inline-block;
    color:rgb(67, 11, 77);
    border: 0.2rem solid rgb(214, 17, 214);
    padding: 0.2rem 1rem;
    text-decoration:none;
	font-size: 1rem;
    font-weight: 500;
    transition: 0.5s;
	color:white;
	background-color: rgb(214, 17, 214);
}

.category-link:hover{
    
    color:#ffffff;
    border: 0.2rem solid rgb(56, 4, 56);
    color: rgb(56, 5, 56);
	background: transparent;
    
}

.pfw{
	color:#151f77;
}

.psw{
	color: rgb(28, 121, 197);
}

.home-programs-h2{
	font-size: 2.5rem;
}

.new-h2{
	text-align: center;
}

 
  /*********************/
/*----FOOTER----**/
/********************/
.link-name{
    font-weight: 400;
	margin-top: -0.2rem;
	margin-left: 0.5rem;
	
}

 
.facebook-icon,.twitter-icon, .linkedin-icon {
    width: 2.5rem;
}

.social-icons{
    text-align: center;
}

.social-icons span {
    padding: 0.5rem;
}

.footer {
	background: linear-gradient(#151f77c2,#151f77be),url('img/four.jpeg');
    padding: 3rem 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    text-align: center;
	
    /*border-top: 0.5rem solid rgb(248, 103, 217);*/
    
  
}



.footer-text{
    text-align: center;
    margin-top: 1.5rem;
    color: rgb(248, 214, 20);
	font-size: 1rem;
}

.footer-text .span-1 {
    color:cornsilk
}

.footer-text a {
    color:rgb(237, 245, 126);
    text-decoration: none;
}


.contact-footer {
   background-color:#0e6277;
}


/*FOOTER QUICK LINKS*/


.footer-links {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;

}

.quick-links, .footer-addrress, .footer-contact {
    flex: 1 20rem;
margin: 1rem;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.quick-links h3, .footer-addrress h3, .footer-contact h3{
	font-size: 1.5rem;
}

.link {
    display: flex;
    justify-content: flex-start;
	align-items: flex-start;
}

.all-links{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.footer-links p, .footer-links span {
    text-align: center;
    color:palegoldenrod;
    font-size: 1.1rem;


}

.footer-links h3 {
    color:white;
    letter-spacing: 0.1rem;
    margin-bottom: 1.5rem;
}



.footer-links span
{
    line-height: 1.5;
}

.all-links .link{
    margin: -0.1rem;
}

.footer-links a {
    text-decoration: none;
    color:palegoldenrod;
}

.footer-links a:hover {
   
    color:rgb(171, 233, 251);
}

.footer-addrress p, .footer-contact p {
    font-weight: 400;
}

.footer-text {
    font-weight: 400;
}

.footer-text a:hover {
color:#ecc7a8;
}

/*footer quicklinks end*/




/*********************/
/*----HOME INTRO----**/
/********************/
.home-intro{
	text-align: center;
	padding: 3rem 0;
}

.home-intro-content{
	width:85%;
	margin:0 auto;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;
}

@media screen and (max-width:480px){
	.home-intro-content{
		width:95%;
		
	}

}

.home-intro-col{
	margin:1rem;
	flex: 1 30rem;
	max-width:35rem ;
	
}

.intro-p {
	color: #151f77;
	text-align: justify;
	font-size: 1.3rem;

}

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

	.home-intro-col2{
		margin-top: -1rem;
	}
}

.home-intro-link{
	display: inline-block;
	color:#1653c5;
	border: 0.2rem solid rgb(235, 109, 25);
	padding: 0.4rem 1rem;
	text-decoration: none;
	font-size: 1.2rem;
	transition: 0.5s;
}

.home-intro-link:hover{
	
	color:#ffffff;
	border: 0.2rem solid rgb(235, 109, 25);
	background-color: rgb(235, 109, 25);
}

/*ABOUT US*/

.about-intro{
	padding: 3rem 0;	
}

.about-intro-content{
	margin: 0 auto;
	width:85%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.about-intro-info, .about-intro-image{
	flex: 1 30rem;
	max-width: 30rem;

}

.about-intro-info{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.underline{
	width: 100%;
	height: 0.4rem;
	background-color: rgb(28, 121, 197);
}

.about-p{
	color:#1653c5;
	color: #151f77;
	font-size: 1.2rem;
	text-align: justify;
	line-height: 1.5;
	margin-top: 1rem;
}

.about-photo{
	width:100%;
}


.vision-section{
background: linear-gradient(rgba(5, 5, 248, 0), rgba(0, 0, 255, 0)), url('img/one.jpeg');
width:100%;
padding:3rem 0;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

}

.health-vision{
	background: linear-gradient(rgba(5, 5, 248, 0), rgba(0, 0, 255, 0)), url('img/2.jpg');
	width:100%;
	padding:3rem 0;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
	}

.vision-content{
	background-color: #151f77c2;
	padding:3rem 2rem;
	margin: 2rem 0;
	
	/*borde1r: 0.5rem solid white;*/
}

.mission-content{
	background-color: #151f77c2;
	/*background-co1lor: rgba(0, 0, 0, 0.829);*/
}

.vision-h3{
	font-size: 2.5rem;
}

.vision-p{
	font-style: italic;
}

/*CORE VALUES*/

.core-values{
	padding: 3rem;
	text-align: center;
}

.accordion-body{
	color:#1653c5;
	font-size: 1.2rem;
}

.accordion-button{
    color:rgba(25, 176, 235, 0.739);
	font-size: 1.3rem;
	
	font-weight: 500;
}
.accordion{
	
	max-width: 40rem;
	margin:0 auto;
	margin-top: 2rem;
}



  /**********************/
   /*--CONTACT FORM--**/
   /*********************/
   .contact-form {
    background:linear-gradient(#14679eb4,#041729d7), url('img/three.jpeg');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    
 }
 
 
 
 
 
 
 
 form {
 display: flex;
 flex-direction: column;
 padding:3rem 0;
 
 
 }
 
 .form-control {
     width: 25rem;
    
     font-size: 1.5rem;
     outline: none;
     border: none;
     box-shadow: 0 0 0.4rem rgb(63, 62, 61);
     border-radius: 0.2rem;
     
     padding: 0.5rem 0;
     padding-left: 0.5rem;
     color:rgb(146, 81, 7);
 }
 
 .submit{
     border:none;
     background-color: rgb(146, 81, 7);
     color:rgb(255, 255, 255);
     padding: 0.8rem 0;
     border:0.2rem solid rgb(146, 81, 7);
     font-size: 1.3rem;
     transition: 0.5s all;
     
 }
 
 .submit:hover {
     border:0.2rem solid rgb(146, 81, 7);
     color: rgb(146, 81, 7);
     background-color: transparent; 
 }
 
 @media screen and (max-width:507px){
     .form-control {
         width: 100%;
        
     }
 
     form {
         padding-left:0.5rem;
         padding-right:0.5rem;
     }
 
 }

 @media screen and (max-width:480px){
     .contact-email {
         font-size: 1.1rem;
     }

     .contact-section{
      
        width:95%;
        
    }


     .contact-details {
      
        
       
        padding:2rem 1rem;
   
    }

 }
 

 /*OUR TEAM*/

 .team-cover{
	padding: 3rem 0;
	background-color: #edf0f5;
	
 }

.team-content{
	width: 85%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-content: center;
	flex-wrap: wrap;
}

.team-member{
	flex: 1 20rem;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #cfd9e6;
	padding: 1rem;
	border-radius: 0.3rem;
	transition: 0.5s;
	margin:1rem;
}

.team-member:hover{
	box-shadow: 0 0 0.6rem #50565d;;
}

.team-h3{
	color:#1b5e8b;
	margin-top: 2rem;
	font-size: 1.5rem;
}

.team-p{
	color:#2a8ed1;
}


.team-image{
	width: 15rem;
}

.team-photo{
	border-radius: 50%;
	width:100%;
}

/*HEALTH*/

.other-headers{
background: linear-gradient(rgba(25, 93, 139, 0.719),rgba(8, 95, 129, 0.733)), url('img/Environment2.jpeg');
background-attachment: fixed;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3rem  0;
padding-bottom: 7rem;

}


.education-header{
	background: linear-gradient(rgba(25, 93, 139, 0.719),rgba(8, 95, 129, 0.733)), url('img/0.jpg');
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3rem  0;
	padding-bottom: 7rem;
	
	}

	.sports-header{
		background: linear-gradient(rgba(25, 93, 139, 0.719),rgba(8, 95, 129, 0.733)), url('img/sports.jpg');
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3rem  0;
		padding-bottom: 7rem;
		
		}

	.empowerment-header{
	background: linear-gradient(rgba(25, 93, 139, 0.719),rgba(8, 95, 129, 0.733)), url('img/TRIPS.jpg');
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3rem  0;
	padding-bottom: 7rem;
	
	}

	.skilling-header{
		background: linear-gradient(rgba(25, 93, 139, 0.719),rgba(8, 95, 129, 0.733)), url('img/skilling.jpg');
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3rem  0;
		padding-bottom: 7rem;
		
		}

.other-h1{
	font-size: 2.5rem;
	line-height: 2.5rem;
	padding: 0 0.5rem;
}

.health-cover{
	padding: 3rem 0;
	background-color: #fbfdff;
}

.health-content{
width:85%;
margin:0 auto;
}

.health-services{
	background-color: #d2e5f1;
	padding:3rem 0;
	text-align: center;
}


.health-services-content{
	margin:0 auto;
	width:85%;	
}

.health-service{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	background-color: white;
}

.health-service-odd{
	margin-top: 2rem;
	flex-direction: row-reverse;
}

.health-service-even{
	margin-top: 2rem;
	
}

.health-service-name{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

.health-h3{
	color:rgb(27, 105, 141);
	font-size: 2rem;
	margin: 2rem 0;
	padding: 0 1rem;
	line-height: 2.5rem;
}

.health-ul{
	color:rgb(27, 105, 141);
	text-align: left;
	margin:1rem;
	margin-top: -1rem;
}

.health-service-name, .health-service-image{
	flex:1 30rem;
	max-width: 36rem;
}

.health-service-photo{
	width:100%;
}

.health-h2{
	margin-bottom: 2rem;
}

/*Empowerment*/

.health-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.empowerment-items{
	color:#1653c5;
	font-size: 1.2rem;
}

.empowerment-h3{
	color:#1653c5;
}

.email-link{
	display: inline-block;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color:#640960;
	background-color: #e4a40e;
	margin-bottom: 2rem;
	transition: 0.5s;
}

.email-link:hover{
	
	background-color: #6b4f0e;
	color:white;
	
}

.service-p{
	color:rgb(20, 64, 105);
	padding: 0 2rem;
	text-align: justify;
	font-size: 1.3rem;
}


.news{
	padding:3rem 0;
	background-color: #e3f2f5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.news-content{
	flex: 1 30rem;
	max-width: 30rem;
	margin: 0rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.news-photo{
	margin:1rem 0;
}


.news-image{
	width:100%;
}

.news p {
	padding: 0 1rem;
	text-align: center;
}