@charset "utf-8";
.navbar {
    background-color: rgba(138,198,186,1.00);
   /* border-bottom:solid rgba(21,30,57,1.00);*/
    background-image: -webkit-linear-gradient(270deg,rgba(251,249,249,0.49) 0%,rgba(76,110,113,0.57) 100%);
    /*box-shadow: 0px 4px 21px;*/
}
.navbar-nav.m-auto .nav-item.active .nav-link {
    color: rgba(46,33,33,1.00);
    background-color: rgba(203,235,249,1.00);
    -webkit-box-shadow: 0px 0px 0px 0px;
    box-shadow: 0px 0px 0px 0px;
}
body{
	background: rgba(233,230,230,0.82);
}

/* index page grid */

.content-welcome {
	
	box-sizing: border-box;
	display: grid;
	width: 91%;
	gap: 1.5rem;
	grid-template-columns: 3fr  1fr;
	grid-template-areas: 
		"show  side"
		"histo  histo"
		;
}

.photoslide {
	grid-area: show;
	align-items: baseline;

}
.president  {
	grid-area: side;
	margin-top: 50px;
  }
.history    {grid-area: histo;}
	
	


.history-welcome {
	
	font-size: 400;
	font-weight: 600;
	padding: 20px;
	text-align: left;
	
	
	/*border: solid  7px rgba(46,129,114,1.00);*/
	
}

.photoSlide-welcome {
	
	margin-top: 50px;
	align-items: baseline;
/*	border: solid  7px rgba(46,129,114,1.00);*/
	/*padding: 20px;*/
	
	
}
.president-welcome {
	margin-top: 50px;
	font-size: 400;
	font-weight: 600;
	/*padding: 20px;*/
	/*background: rgba(233,230,230,0.82);*/
	/*border: solid  7px rgba(46,129,114,1.00);*/
	
}


.president-title {
	
	text-align:center ;
	color:rgba(46,129,114,1.00);
}


footer {
	/* Footer region */
	width: 100%;
	background: rgba(46,129,114,1.00);
	padding-left: 20%;
	padding-right: 20%;
}

.container .container-fluid .content-welcome {
    width: 100%;
	text-align: center;
	padding: 0;
	
}
.container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    min-height: 100vh;
}

/*  About page */

.banner-header{
	margin-top: 30px;
	padding-top: 50px;
}
.grid-content{
	padding: o;
	margin-left: 0;
	justify-content: center;
}

.grid-container{
	margin: 0 ;
	display: grid;
	gap:20px;
	max-width: 1600px;
	padding: 10px;
	align-items: center;
	grid-template-columns: repeat(2, 1fr) ;
	grid-template-rows: repeat(4, auto);
	grid-template-areas: 
		" image1 image5"
		" text2 image2 "
		" image3 text3 "
		" text4 image4 "
		;
}

.image-1 { 	grid-area: image1; }
.image-5 { 	grid-area: image5;}
.text-2  { 	grid-area: text2; }
.image-2 { 	grid-area: image2;}
.image-3 { 	grid-area: image3;}
.text-3 { 	grid-area: text3; }
.text-4  { 	grid-area: text4;}
.image-4 { 	grid-area: image4;}

/* mobile responsive*/

@media(max-width: 768px){
	.grid-container{
		padding: 0;
		margin: 0;
        max-width:auto;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"image1"
			"image5"
			"image2"
			"text2"
			"text3"
			"image3"
			"image4"
			"text4";
	}
	.President-welcome{
		margin-top: 20px;
		font-size: 150;
		font-weight: 400;
	}
	.text-item{
		width: 100%;
		padding:0;
	}
	.image-item{
		align-content: center;
		max-width: 100%;
		padding: 0;
	}
	.image-item img{
		max-width: 100%;
		padding: 0;
	}
}

.text-item{
	text-align: justify;
	width: 100%;
	font-size: 1.05rem;
	padding: 30px;
	background: rgba(207,221,231,1.00);
	color: rgba(0,0,0,1.00);
	border-radius: 12px;
	/*box-shadow: 0 5px rgba(0,0,0, 0.3);*/
}
.image-item{
	place-content:center;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

.image-item:hover{
	transform: translateY(-5px);
	
}

.image-item img{
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.image-item img:hover{
	transform: scale(1.05);
}


.about-banner {
	
	display: flex;
	flex-direction: column ;
	gap: 30px;
	justify-content: center;
	
		}
	




.banner-item{
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease;
	width: 100%;
	object-fit:cover;
	align-content: center;
	
	
}
.banner-item img{
	width: auto;
	height: 300px;
	display: block;
	border-radius:12px;
	transitiion: transform 0.2s  ease-in;
	
}
.banner-text {
	box-sizing: border-box;
	color: black;
	font-size: 1.5rem;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	text-align: left;
	padding: 10px;
	background: rgba(255,255,255,1.00);
	
	}

.banner-text{
	margin-top: 20px;
	margin-left: 10px;
	line-height: 1.2em;
	
}
.banner-media-img{
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease;
	width: 100%;
	height: auto;
	
}

.banner-media-img img{
	
	width: 100%;
	height: auto;
	object-fit:cover;
	display: block;
	border-radius:12px;
	transitiion: transform 0.2s  ease-in;
	
}
.overcomers-history{
		font-size: 1.2rem;
		text-align: justify;
}


	


@media (max-width: 1692px){
	
	
	.brief-history-about{
		font-size: 15px;
		font-weight: bold;
	}
	
	.banner-media-text{
		display: block;
		color: black;
		line-height: 1.2em;
		background: none;
		z-index: 5;
	}
	.image-item{
		width: 100%;
		object-fit: cover;
	}
	.image-item img{
		width: 100%;
		
}
	.text-item{
		font-size: 12px;
		width:	100%;
	}
	
	}
	.overcomers-history{
		font-size: 1.05rem;
		text-align: justify;
		
	}
	
	
}

@media (max-width: 1250px){
	body{
		margin: 10px;
		padding: 10px;
	}
	.grid-container{
		padding: 0;
		max-width: auto;
		text-align: center;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"image1"
			"image5"
			"image2"
			"text2"
			"text3"
			"image3"
			"image4"
			"text4";
	}
	footer {
		padding-left: 10%;
		padding-right: 10%;
	}
	.overcomers-history{
		column-count: 2;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.5;
	}
	
	.image-item{
		width: 100%;
		object-fit: cover;
	}
	.image-item img{
		width: 100%;
		
}
	.text-item{
		font-size: 12px;
		width:	100%;
	}
}

@media (max-width: 578px){
	.grid-container{
		padding: 0;
		margin: 0;
		padding: 0;
		max-width: auto;
		text-align: center;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"image5"
			"image1"
			"image2"
			"text2"
			"text3"
			"image3"
			"image4"
			"text4";
	}
	
	.image-item{
		width: 100%x;
		object-fit: cover;
		
	}
	.image-item img{
		width: 100%;
		object-fit: cover;
   }
	.text-item{
		font-size: 15px;
		width:	100%;
	}
	.campus-description{
		font-size: 10px;
	}
	
}

/* events pages */


.grid-advert{
	
	margin-top: 50px;
	margin-bottom: 20px;
	display: grid;
	gap: 10px;
	max-width: auto;
	align-items:center;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: repeat(4, auto);
	grid-template-areas: 
		
		" img1 img1 img3  img2"
		" img1 img1 img4  img5"
		" img8 img8 img4  img5"
		" img8 img8 img6 img7 "
		/*" img1 img1 img1 img1"
		" text1 img2 img2 text2"
		" img3 img3 img4 img4 "
		" img5 img5 img6 img6 "*/
		;
	}
    .pict8 {grid-area: img8;}
	.pict1 {grid-area: img1; }
	.pict2 {grid-area: img2; }
	.pict3 {grid-area: img3; }
    .pict4 {grid-area: img4; }
	.pict5 {grid-area: img5; }
	.pict6 {grid-area: img6; }
    .pict7 {grid-area: img7; }

.img-advert-top{
	width:  700px;
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	height: auto;
	display: block;
	transition: transform 0.3s ease;
	overflow: hidden;
}
.img-advert-top img{
	max-width: 720px;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.img-advert-top img:hover{
	transform: scale(1.05);
}
.img-advert img:hover{
	transform: scale(1.05);
}

 .img-advert{
	width: 400px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}
.img-advert img{
	max-width: 405px;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
	
}

@media only screen and (max-width : 1768px ){
	
	.grid-advert{
	
	margin-top: 50px;
	display: grid;
	gap: 10px;
	max-width: auto;
	align-items:center;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: repeat(4, auto);
	grid-template-areas: 
		
		" img1 img1  img3 "
		" img1 img1  img5"
		" img8 img8  img6"
		" img8 img8  img2"
		
		/*" img1 img1 img1 img1"
		" text1 img2 img2 text2"
		" img3 img3 img4 img4 "
		" img5 img5 img6 img6 "*/
		;
	}
	
}
@media (max-width: 1150px){
	
	.grid-advert{
		grid-template-columns: 1fr ;
		
		grid-template-areas:
			"img1"
			"img8"
			"img2"
			"img3"
			"img4"
			"img5"
			"img6"
			"img7"
	}
	

	
	.img-advert-top {
		max-width: 700px;
	}
	
	.img-advert-top img{
	max-width: 720px;
}
	.banner-media-screen{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		grid-gap: 4px;
		}
	
}	


@media(max-width: 900px){
	
	footer{
		padding-left: 10%;
		padding-right: 10%;
	}
	
	.img-advert-top {
		max-width: 470px;
	}
	
	.img-advert-top img{
	max-width: 500px;
		
	}
	.grid-advert{
		grid-template-columns: 1fr;
		grid-template-areas: 
			"img8"
			"img1"
			"img2"
			"img3"
			"img4"
			"img5"
			"img6"
			"img7";
	}
	
}

/* completed projects */

.completed {
	
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
	display: grid;
	gap: 1.5rem;
	max-width: 100%;
	grid-template-columns: 1fr auto ;
	grid-template-rows: repeat(2, auto);
	grid-template-areas: 
		"text  image"
		"video  image";
	
}

.completed-text {grid-area: text;
	
	font-weight: 600;
  
  }
.completed-video{grid-area: video;}
.completed-health{grid-area: image;}

@media  (max-width: 768){
	
	.completed{
		margin: 0;
		grid-template-columns: 1fr;
		grid-template-areas: 
		"text "
		"video "
		"image"
		;
	}
	.completed-text {grid-area: text;
	
	font-weight: 300;
  
  }
}

.upcoming-projects {
	padding-top: 5rem;
	/*padding-right: 7rem;
	padding-left: 7rem;*/
}

.scholarship img{
	
	float: left;
	
}
.upcoming {
	display: flex;
	justify-content: space-between;
	margin-top: 10rem;
}
 
@media (max-width: 768){
	
	.upcoming{
		flex-direction: column;
	}
}


.awardees-grid {
	
	position: relative;
	margin-top: 50px;
	margin-bottom: 20px;
	display: grid;
	gap: 1.5rem;
	max-width: auto;
	grid-template-columns: repeat(3, 1fr);
	
}



.awardees-card {
	
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	
}

.awardees-card:hover{
	
	transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.awardees-info {
	
	 padding: 20px;
     text-align: center;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
	
}

.awardee-name{
	
	 font-size: 20px;
     font-weight: 900;
     margin-bottom: 8px;
     color: #2c3e50;
}
.awardee-title{
	 color: #111516;
     font-size: 14px;
	font-weight: 500;
     margin-bottom: 15px;
     line-height: 1.4;
}
.awardees-main-title{
	
	background: rgba(188,138,5,1.00);
	 font-size: 2.5rem;
	 color: #2c3e50;
     margin-bottom: 20px;
	font-weight: 500;
}
.awardees-main-title h1{
	font-weight: 700;
}


@media (max-width: 949px) {
	
	.awardees-grid {
		margin-top: 20px;
		margin-bottom: 10px; 
		grid-template-columns: 1fr 1fr;
		}
	.awardee-name {
	
	 font-size: 20px;
     font-weight: 600;
     margin-bottom: 8px;
     color: #041322;
	}
	.upcoming-footer {
	display: inline-flex;
	flex-direction: column;
	padding: 10px 10% 10px 10%  ;
}
}

@media (max-width: 600px){
	
	.awardees-grid {
		margin-top: 20px;
		margin-bottom: 10px; 
		grid-template-columns: 1fr;
	}
	.content-welcome {
	
	display: grid;
	max-width: 91%;
	gap: 1.5rem;
	grid-template-columns: 1fr;  
	grid-template-areas: 
		"show" 
		"histo"
		 "side"
		;
}

.photoslide {grid-area: show;}
.president  {grid-area: side;}
.history    {grid-area: histo;
			font-size:0.7rem;
	}
	
	.list-names {
		font-family:  "Arial", "sans-serif";
		font-size: 0.75em;
		font-weight: normal;
		
	}
	
	.upcoming-footer {
	display: inline-flex;
	flex-direction: column;
	padding: 10px  0 10px 0  ;
	
}
}

.completed-main-title {
	background: rgba(46,129,114,1.00);
	 font-size: 2.5rem;
	 color: #2c3e50;
     margin-bottom: 20px;
	font-weight: 500;
	
}

.Completed-main-title h1{
	
	font-weight: 700;
}

#carouselExampleIndicators1 {
	align-self: baseline;
}

.footer-btn {
	padding-top: 10px;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.btn-footer {
	margin-top: 15px;
	margin-left: 35px;
	margin-bottom: 20px;
	display: inline-block;
    padding: 10px 20px;
    background: rgba(172,113,8,1.00);
    border-radius: 15px;
    box-shadow:  0 0 10px rgba(220,199,29,1.00);
    font-size: 20px;
    color: #040505;
    font-weight: 600;
    transition: .5s;
	cursor: pointer;
}
.btn-footer:hover {
    background:rgba(14,110,154,0.91);
    color: wheat;
    box-shadow: none;
}

.footer-logo{
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

.img-footer img {
	margin-top: 10px;
	width: 25%;
	height: auto;
	font-size: 20px;
    color: #EDF0F4;
    font-weight: 600;
    transition: .5s;
	cursor: pointer;
    
}



.footer-index-info {
	display: flex;
	justify-content: center;
	padding-top: 30px;
	
}
.footer-index-info img{
	width: 25%;
	height: auto;
}

.index-info {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

.about-footer {
	background: rgba(118,167,202,1.00);
	height: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: justify;
}

.list-names {
	
	color: rgba(13,12,11,1.00);
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', 'Helvetica', 'Arial', 'sans-serif';
  	font-weight: normal;
  	
	
}

.list-main-title {
	margin: 0.55rem;
	text-align: center;
	font-family:"Arial", "sans-serif";
	font-size: 1.2rem;
	
}

.events-footer {
	display: flex;
	justify-content: space-between;
}

.upcoming-footer {
	display: inline-flex;
	justify-content: space-between;
	padding: 20px 20% 20px 20%;
	
}

.bannerText {
	margin-bottom: 20px;
}