@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Tangerine&display=swap');/* Fredericka for H1 */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');

/*Global Information*/
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Variebles*/
:root{
	--container-bg: rgba(255, 255, 255, .7);
	--background-cover-color: rgba(0,0,0,0.5);
	--box-shadow: 0px 0px 10px rgb(0, 0, 0);
	--container-separator: 10px;
	--heading-h2-separator: 3px;
	--heading-h3-separator: 2px;
}

h1,h2,h3,h4,h5{
	font-family: 'Teko', sans-serif;
}

h2{
	font-size: 1.75rem;
	color: rgb(22, 99, 1);
	margin-bottom: var(--headingh2--separator);
}

h3{
	margin-bottom: var(--heading-h3-separator);
}

img{
	object-fit: -webkit-cover;
	object-fit: -moz-cover;
	object-fit: -ms-cover;
	object-fit: cover;
	width: 100%;
	max-width: 100%;
}

section{
	width: 90%;
}

.main-size-container{ /*For the main container*/
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	max-width: 1440px;
}

ul{
	list-style-type: none;
}

a{
	text-decoration: none;
	cursor: pointer;
}

/* End of Global Information*/

/*Header*/
header{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1440px;
	background-color: rgb(4, 27, 4);
	transition: background-color 2s;
}

.header-container{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 15px 0;
}

.header-container{
	position: relative;
}

.header-container .logo {
	height: 60px;
}

#logoImage{
	height: 100%;
	width: 80%;
}

.hamburge-menu{
	position: absolute;
	top: 0;
	right: 0;
}

.hamburge-menu img{
	height: 60px;
    width: 60px;
}

.hidden{
	display: none;
}

.no_scroll{
	overflow: hidden;/* To stop scrolling during when the navigation is open*/
}
.navigation{
	height: 0;
	opacity: 0;
	overflow: hidden;
}

.navigation.on{
	height: 100%;
	opacity: 100%;
	transition: height 1s;
}

nav ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgb(10, 68, 12);
	margin-top: 15px;
}

ul li a{
	font-size: 1.1875rem;
	color: rgb(145, 161, 67);
}

nav li a::after{
	content:"";
	display: block;
	height: 4px;
	width: 0;
	background-color: rgba(122, 174, 55, .4);
	transition:all .5s;
}

nav li a:hover::after{
	width:100%;
}

.active::after{
	content:"";
	display: block;
	height: 4px;
	width: 0;
	background-color: rgb(122, 174, 55);
	width:100%;
}	
	
.sticky{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000; /*Must be on Top*/
	/*background-color: rgb(10, 51, 11);*/
}
/* End of the header */

/*Section 1*/
.SECTION-HERO{
	/*background-color: rgba(100, 200, 50, .5);*/
}

.hero-sub-section{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
	width: 100%;
	position: relative;
	background-color: var(--background-cover-color)
}

.hero-sub-section h1{
	font-size: 2.5rem;
	text-align: center;
	color: rgb(122, 184, 15); 
	text-shadow: 3px 1px 3px rgb(14, 3, 3);
}

.hero-sub-section h2{
	font-size: 1.4rem;
	text-align: center;
	color: rgb(188, 253, 73);
}

.hero-sub-sub-section-cover-image{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	right:0;
	z-index: -99;/*Must be at the bottom*/
}

.hero-sub-sub-section-cover-image img{
	height: 40vh;
	width: 100%;
}

.hero-sub-sub-section-cover-image-civil,.hero-sub-sub-section-cover-image-electric{
	width: 100%;
}
/*End of Section 1*/

/*Section 2*/
.SECTION-ABOUT{
	background-color: rgb(226, 224, 224);
	margin-bottom: var(--container-separator);
}

.about-sub-section{
	margin: var(--container-separator);
}

.about-sub-section-sub-container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.about-sub-section-sub-container-content h2{	
	text-align: center;
}

.about-sub-section-sub-container-image{
	width: 100%;
}

.about-sub-section-sub-container-image img{
	height: 350px;
	border-radius: 5%;
}

.about-sub-section-sub-container-content{
	width: 100%;
}

.about-sub-section-sub-sub-container-buttons{
	display: flex;
	flex-direction: row;
}

.not-active-about-para{
	display: none;
}

.about-sub-section-sub-sub-container-buttons button{
	flex: 1 1 auto;
	padding: 15px 30px;
	background-color:grey;
	color: white;
	outline: none;
	border: none;
	border-radius: 10px;
	margin: 0 5px;
}

.btn-vision{
	margin-left: 0;
}

.btn-values{
	margin-right: 0;
}

.about-sub-section-sub-sub-container-buttons button:hover{
	background-color: antiquewhite;
	color: black;
}
/*End of Section 2*/

/*Section 3*/
.SECTION-SERVICES{
	margin-bottom: var(--container-separator);
}

.services-sub-section h2{
	
}

.services-sub-section-sub-container{
	display: flex;
	flex-direction: column;
	
}

.services-sub-section-sub-container ul{ /* To center the content for both Electrical and Civil Containers*/
	list-style-type: disc;
	max-width: 80%;
}

.services-sub-section-sub-container h3{
	color: rgb(188, 253, 73);
}

.services-sub-section-sub-container-electric-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 350px;
	width: 99.9%;
	color: white;
	position: relative;
	background-color: var(--background-cover-color);
}

.services-sub-section-sub-container-electric-image{
	height: 350px;
	width: 99.9%;
	position: absolute;
	z-index: -99;
}

.services-sub-section-sub-container-electric-image img{
	height: inherit;
}

.services-sub-section-sub-container-civil-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 350px;
	width: 99.9%;
	color: white;
	position: relative;
	background-color: var(--background-cover-color);
}

.services-sub-section-sub-container-civil-content-ul{
	padding: 5px;
}

.services-sub-section-sub-container-civil-image{
	height: 350px;
	width: 99.9%;
	position: absolute;
	z-index: -99;
}
.services-sub-section-sub-container-civil-image img{
	height: inherit;
}
/*End of Section 3*/

/*Section 4*/
.SECTION-STRATEGIC{
	margin-bottom: var(--container-separator);
}
/*End of Section 4*/

/*Section 5*/
.SECTION-COMPLETED-PROJECTS{
	margin-bottom: var(--container-separator);
}

.completed-projects-container{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.completed-projects-container img{
	height: 200px;
	object-fit: cover;
	object-position: 0 20%;
	margin-bottom: var(--container-separator);
}

/*End of Section 5*/

/*Section 6*/
.SECTION-STAFF{
	margin-bottom: var(--container-separator);
}

.staff-sub-section{
	
}

.staff-sub-section-sub-container-Staff{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.staff-sub-section-sub-container-Staff-image{
	height: 250px;
	width: 100%;
}

.staff-sub-section-sub-container-Staff-para{
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
}

.staff-sub-section-sub-container-Staff-image img{
	height: inherit;
	border: 3px solid red;
}
/*End of Home Page for Mobile*/

/*Services Page for Mobile*/

/*Section 1*/
.SECTION-HERO-2{
	/*background-color: rgba(100, 200, 50, .5);*/
}

.hero-2-sub-section{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
	width: 100%;
	position: relative;
	background-color: var(--background-cover-color)
}

.hero-2-sub-section h1{
	font-size: 2.5rem;
	text-align: center;
	color: rgb(122, 184, 15); 
	text-shadow: 3px 1px 3px rgb(14, 3, 3);
}

.hero-2-sub-section h2{
	font-size: 1.4rem;
	text-align: center;
	color: rgb(188, 253, 73);
}

.hero-2-sub-section-cover-image{
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	right:0;
	z-index: -99;/*Must be at the bottom*/
}

.hero-2-sub-section-cover-image img{
	height: 80vh;
	width: 100%;
}

.hero-2-sub-section-cover-image{
	width: 100%;
}
/*End of Section 1*/
/*End of Services Page for Mobile*
/*End of Gallery Page for Mobile*/
/* About Us Page Mobile */
.contact-details{
	padding: 8px 0;
}
.contact-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90%;
}

.contact-sub-container{
	display: flex;
	flex-direction: column;
	width: 90%;
}

.contact-sub-container h3{
	color: rgb(12, 49, 3);
}
/*End of About Us Page for Mobile*/
/*End of Contact Us Page for Mobile*/

footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	color: white;
	padding: 10px 0;
	background-color: black;
}

.footer-details{
	display: grid;
	grid-template-columns: 100%;
	width: 90%;
	justify-items: center;
	
}

.footer-details li{
	max-width: 80%;
	text-align: center;
	margin-bottom: 8px;
}

.footer-details h3{
	color: rgb(22, 99, 1);
	margin-bottom: 5px;
}

.footer-bottom-para{
	text-align: center;
}

@media(min-width: 768px){
}
/*Media Queeir PCs*/
@media(min-width: 1024px){	
	/*Header*/
	header{
		justify-content: center;
		width: 100%;
		max-width: 1440px;
		/*background-color: rgb(226, 224, 224);*/
	}

	.header-container{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin: 15px 0;
	}

	.header-container .logo img{
		height: 100%;
		width: 80%;
		object-fit: fill;
	}
	.hamburge-menu{
		display: none;
	}
	.navigation{
		height: auto;
		opacity: 100%;
	}

	nav ul{
		display: flex;/* To be deleted if repeat*/
		flex-direction: row;
		background-color: rgb(4, 27, 4);
		margin: 0;
	}
	nav ul li{
			padding: 0 4px;
			margin: 0 15px;
		}

		nav ul li:first-child{
			margin-left: 0;
		} 

		nav ul li:last-child{
			margin-right: 0;
		}

		ul li a{
			color: rgb(145, 161, 67);
			font-size: 1.1875rem;
		}
		nav li a::after{
			content:"";
			display: block;
			height: 4px;
			width: 0;
			background-color: rgba(122, 174, 55, .4);
			transition:all .5s;
		}
		nav li a:hover::after{
			width:100%;
		}
		
		.active::after{
			content:"";
			display: block;
			height: 4px;
			width: 0;
			background-color: rgb(122, 174, 55);
			width:100%;
		}	
	/* End of the header */
	/*Home Page for PCs*/
	/*Section 1*/
	.SECTION-HERO{
		/*background-color: rgba(100, 200, 50, .5);*/
	}

	.hero-sub-section{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 60vh;
		width: 100%;
		position: relative;
		background-color: var(--background-cover-color)
	}

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

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

	.hero-sub-sub-section-cover-image{
		flex-direction: row;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		right:0;
		z-index: -99;/*Must be at the bottom*/
	}

	.hero-sub-sub-section-cover-image img{
		height: 60vh;
		width: 100%;
	}

	.hero-sub-sub-section-cover-image-civil,.hero-sub-sub-section-cover-image-electric{
		width: 100%;
	}
	/*End of Section 1*/

	/*Section 2*/
	.SECTION-ABOUT{
		margin-bottom: var(--container-separator);
	}

	.about-sub-section{
		margin: 15px;	
	}

	.about-sub-section-sub-container{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.about-sub-section-sub-container-content h2{	
		text-align: center;
	}

	.about-sub-section-sub-container-image{
		width: 40%;
	}

	.about-sub-section-sub-container-image img{
		height: 350px;
	}

	.about-sub-section-sub-container-content{
		width: 55%;
	}

	.about-sub-section-sub-sub-container-buttons{
		flex-direction: row;
	}

	.not-active-about-para{
		display: none;
	}

	.about-sub-section-sub-sub-container-buttons button{

	}

	.btn-vision{
		margin-left: 0;
	}

	.btn-values{
		margin-right: 0;
	}

	.about-sub-section-sub-sub-container-buttons button:hover{
		background-color: antiquewhite;
		color: black;
	}
	/*End of Section 2*/

	/*Section 3*/
	.SECTION-SERVICES{
		margin-bottom: var(--container-separator);
	}

	.services-sub-section-sub-container{
		flex-direction: row;
		justify-content: space-between;
	}
	.services-sub-section h2{
		
	}

	.services-sub-section-sub-container ul{ /* To center the content for both Electrical and Civil Containers*/
		max-width: 80%;
	}

	.services-sub-section-sub-container h3{
	}

	.services-sub-section-sub-container-electric-content{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 350px;
		width: 99.9%;
	}

	.services-sub-section-sub-container-electric-image{
		height: 350px;
		width: 99.9%;
	}

	.services-sub-section-sub-container-electric-image img{
		height: inherit;
	}

	.services-sub-section-sub-container-civil-content{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 350px;
		width: 99.9%;
	}

	.services-sub-section-sub-container-civil-content-ul{
		padding: 5px;
	}

	.services-sub-section-sub-container-civil-image{
		height: 350px;
		width: 99.9%;
	}
	.services-sub-section-sub-container-civil-image img{
		height: inherit;
	}
	/*End of Section 3*/

	/*Section 4*/
	.SECTION-STRATEGIC{
		margin-bottom: var(--container-separator);
	}
	/*End of Section 4*/

	/*Section 5*/
	.SECTION-COMPLETED-PROJECTS{
		
	}

	.completed-projects-container{
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
	}

	.completed-projects-container img{
		flex-basis: 30%;
		flex-grow: 1;
		margin: 3px;
	}
	/*End of Section 5*/

	/*Section 6*/
	.SECTION-STAFF{
		margin-bottom: var(--container-separator);
	}

	.staff-sub-section-sub-container-Staff{
		flex-direction: row;
		justify-content: space-between;
		height: 250px;
		width: 100%;
	}

	.staff-sub-section-sub-container-Staff-image{
		height: inherit;
		width: 30%;
	}

	.staff-sub-section-sub-container-Staff-para{
		align-items: center;
		text-align: center;
		width: 70%;
		max-width: 65%;
	}

	.staff-sub-section-sub-container-Staff-image img{
		height: inherit;
		border: 3px solid red;
	}
	/*End of Home Page for PCs*/

	/*Services Page for PCs*/
	.hero-2-sub-section{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 60vh;
		width: 100%;
		position: relative;
		background-color: var(--background-cover-color)
	}

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

	.hero-2-sub-section h2{
		font-size: 2.5rem;
	}

	.hero-2-sub-section-cover-image{
		flex-direction: column;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		right:0;
		z-index: -99;/*Must be at the bottom*/
	}

	.hero-2-sub-section-cover-image img{
		height: 60vh;
		width: 100%;
	}

	.hero-2-sub-section-cover-image{
		width: 100%;
	}
	/*End of Section 1*/

	
	/*End of Services Page for PCs*
	/*End of Gallery Page for Mobile*/
	/*About Us Page for PCs*/
	.about-us-page-hero{
		object-position: 0% 10%;
	}
	.contact-content{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
	}

	.contact-sub-container{
		flex-direction: row;
		justify-content: space-around;
		width: 90%;
	}

	.contact-sub-container h3{
		color: rgb(8, 32, 2);
	}
	/*End of About Us Page for PC*/
	/*End of Contact Us Page for Mobile*/

	footer{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.footer-details{
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		width: 90%;
		justify-items: center;
		
	}

	.footer-details li{
		max-width: 80%;
		text-align: center;
	}

	.footer-details h3{

	}

	.footer-bottom-para{
		text-align: center;
	}
}