@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@100;700&display=swap');

*,
*:before,
*:after{
	margin:0;padding: 0;
	box-sizing: border-box;
	transition: all 0.5s;
	list-style: none;
}

:root{
	--clr-white:#fff;
	--clr-yellow:#f1c50e;
	--clr-muted-black:#f2f2f2;
	--clr-black:#111111;
}

/*=================== global start ====================*/

html{
	font-size: 62.5%;
}

/* font families */
.font-montserrat{
	font-family: 'Montserrat',sans-serif;
}
.font-open-sans{
	font-family: 'Open Sans',sans-serif;
}
.font-roboto{
	font-family: 'Roboto',sans-serif;
}


/* font sizes */
.font-size-1{
	font-size: 1.4rem;
}
.font-size-2{
	font-size: 1.6rem;
}
.font-size-3{
	font-size: 2.0rem;
}
.font-size-4{
	font-size: 3rem;
}
.font-size-5{
	font-size: 4.8rem;
}
.font-size-6{
	font-size:clamp(3.6rem,8vw,6rem);
}
.font-size-7{
	font-size: 7.2rem;
}
.font-size-8{
	font-size: clamp(9.6rem,11vw,13rem);
}

/* font weights */
.font-300{
	font-weight: 300;
}

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

.font-500{
	font-weight: 500;
}

.font-600{
	font-weight: 600;
}

.font-700{
	font-weight: 700;
}


.container{
	width: 114rem;
	max-width: 114rem;
	min-width: 31.5rem;
	margin:0 2.2rem;
}

/* flex */
.flex{
	display: flex;
}

.flex-col{
	flex-direction: column;
}

.flex-row{
	flex-direction: row;
}

.flex-dead-center{
	justify-content: center;
	align-items: center;
}

.flex-main-axis-center{
	justify-content: center;
}

.flex-cross-axis-center{
	align-items: center;
}

p{
	line-height: 1.6;
}

.read-more-btn{
	padding:1.5rem 6rem;
	border-radius:5rem;
	display: inline-block;
	background-color: var(--clr-yellow);
	text-decoration:none;
	color:var(--clr-black);
	width: fit-content;
}

.read-more-btn:hover{
	background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
	cursor: pointer;
}

/*=================== global end ====================*/

/* body */
body{
	
	background-color: var(--clr-white);
	max-width: 100vw;
	overflow-x: hidden;
}



/* header nav bar */

header{
	position: relative;
}

header > div.menu-button{
	font-size: 2.7rem;
	padding: 1.9rem 0;
	cursor: pointer;
}

header > nav{
	position: absolute;
	top:0;
	left:-100%;
	height: 100vh;
	width: 28rem;
	background-color: var(--clr-black);
	padding:2rem;
}

.show-nav{
	left:0;
	z-index: 2;
}

header > nav ul{
	text-align: center;

}

header > nav ul li:first-child{
	text-align:right;
	font-size: 2.8rem;
	color:var(--clr-white);
}

header > nav ul li a{
	font-size: 1.6rem;
	text-decoration:none;
	color:var(--clr-white);
	padding:0.8rem 0;
	display: inline-block;
}

header > nav ul li a:hover{
	color:#a1a1a1;
}

.nav-bg{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top:0;
	left: 0;
	background-color:rgba(0,0,0,0.6);
	opacity: 0;
	z-index: -1;
}

.nav-bg-show{
	opacity: 1;
	z-index: 1;
}

/* hero section */

.hero{
	background:url("./images/hero.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: clamp(62.1rem,80vw,74.9rem);
}

.hero .container{
	padding-top:4rem;
	padding-bottom: 10rem;
}

.hero .container .row-1{
	justify-content: flex-end;
	flex:1;
}

.hero .container .row-1 p{
	max-width: 30.7rem;
	min-width: 30.7rem;
}

.hero .container .row-2{
	flex:1;
	align-items: flex-end;
}

.hero .container .row-2 h1{
	padding:2rem;
	background-color: var(--clr-yellow);
	max-width: 69.9rem;
	min-width:31.8;
}

/* about section */

.about .container{
	flex-wrap: wrap;
	margin-top: -6rem;
	min-height: 47rem;
	margin-bottom: 5rem;
}

.about .container > div{
	flex:1;
	min-width: 22.13rem;
	max-width: 100%;
	padding: 3rem;
	gap:2rem;
	justify-content: flex-end;
}

.about .container > div:last-child{
	background-color:var(--clr-yellow);
}

.about .container > div:last-child > .abt-img > img{
	width:15rem;
	height: 15rem;
	border-radius: 50%;
	object-fit: cover;
}

.about .container .col-1 .img,
.about .container .col-2 .img{
	background-color:var(--clr-black);
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
}

.about .container .col-1 .img > img,
.about .container .col-2 .img > img{
	width: 75%;
	height: 75%;
	filter: invert(100%);
}

/* ledership */
.leadership{
	min-height:52rem;
	background-color: var(--clr-yellow);
}

.leadership .container{
	padding:8rem 0;
	text-align: center;
	gap:2.5rem;
}

.leadership .container > p{
	width:95%;
	max-width: 71.2rem;
	margin-bottom: 13rem;
}

/* leadership points */
.leadership-points .container{
	gap:2rem;
	flex-wrap: wrap;
	margin-top: -18rem;
	margin-bottom: 6rem;
}

.leadership-points .container > .points{
	background-color: var(--clr-muted-black);
	padding: 3rem;
	flex:1;
	min-width: 30.2rem;
	max-width: 35rem;
}


/* About Us */
.abt-us{
}

.abt-us > .container{
	gap:1.5rem;
	margin:1rem 0 6rem 0;
	flex-wrap: wrap;
}

.abt-us > .container > .col{
	flex:1;
	gap:2rem;
	padding:2.6rem;
	min-width: 37.66rem;
}

.abt-us > .container > .col-1 > h1{
	color:var(--clr-yellow);
}

.abt-us > .container > .col-2 .img{
	background-image: url("./images/seo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
}


/* our team */

.our-team .container .row-1{
	max-width: 80rem;
	min-height: 25rem;
	padding: 3rem;
	background-color: var(--clr-yellow);
}


.our-team .container .row-2{
	margin-top: -14rem;
	flex-direction: row-reverse;
	width: 84.2rem;
	min-height: 58.5rem;
	align-self: flex-end;
	gap:2rem;
	flex-wrap: wrap;
	justify-content:flex-start;
}

.our-team .container .row-2 .img{
	width: 31.7%;
	max-width: 42.1rem;
	height:27.7rem;
}

.our-team .container .row-2 .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* our services -1 */
.our-services-1 .container{
	text-align: center;
	gap:1.8rem;
	padding:4rem 0;
	flex-wrap: wrap;
}

.our-services-1 .container > div{
	flex:1;
	gap:2rem;
	padding:2rem 3rem;
	min-width: 30.4rem;
	max-width:50%;
}

.our-services-1 .container > div .total-work{
	background-color: var(--clr-black);
	width: fit-content;
	padding:5.5rem;
	border-radius: 50%;
	color:var(--clr-white);
}

.our-services-1 .container > div .total-work-2{
	background-color: var(--clr-yellow);
}


/* our service 2 */

.our-services-2 .container{
	margin:3rem 1rem;
	flex-wrap: wrap;
}

.our-services-2 .container .col-1 {
	padding: 3rem 0;
	flex:2;
}


.our-services-2 .container .col-1 ul{
	gap:2rem;
	margin-bottom: 2rem;
}

.our-services-2 .container .col-1 ul li{
	gap:1.5rem;
}


.our-services-2 .container .col-1 ul li span{
	color:var(--clr-yellow);
}

.our-services-2 .container .col-2{
	background-image: url("./images/service-provider.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	flex:1;
	min-height: 34rem;
}


/* manager*/
.manager > .row-1{
	background-color: var(--clr-yellow);
}

.manager > .row-1 .container{
	padding:6rem 2rem;
	text-align: center;	
	min-height: 60rem;
}

.manager > .row-1 .container > .quote{
	font-size: 8rem !important;
}

.manager > .row-1 .container p{
	margin-bottom: 18rem;
}

.manager > .row-2 .container{
	padding:4rem 0;
	gap:4rem;
	margin-top: -27rem;
	text-align: center;
}

.manager > .row-2 .container .manager-img{
	background-image: url("./images/manager.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width:clamp(31rem,50vw,32.6rem);
	height:clamp(31rem,50vw,32.6rem);
	border-radius: 50%;
}

/* follow us */
.follow-us{
	background-color: var(--clr-black);
	color:var(--clr-white);
	padding:7rem 0;
}

.follow-us .container,
.follow-us .container > .socials{
	gap:2rem;
}

.follow-us .container > .socials{
	font-size: 3.6rem;
}


/* get in touch */
.contact-us{
	padding:4rem 0;
}

.contact-us .container{
	flex-wrap: wrap;
	gap:1rem;
}

.contact-us .container .col{
	flex:1;
	padding:3rem;
	gap:2rem;

}

.contact-us .container .col-1 form{
	gap:1.6rem;
}

.contact-us .container .col-1 form .fields{
	padding:1.3rem;
	background-color: var(--clr-muted-black);
	border:none;
	outline-color: var(--clr-black);
}

.contact-us .container .col-1 form .fields::placeholder{
	font-weight: 600;
	font-family: "Open Sans",sans-serif;
}

.contact-us .container .col-1 form textarea{
	resize: none;
}

.contact-us .container .col-1 form input[type="submit"] {
	width: fit-content;
	background-color: var(--clr-yellow);
	border:none;
	outline:none;
	padding:1.3rem 3.4rem;
}

.contact-us .container .col-1 form input[type="submit"]:hover{
	background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
	cursor: pointer;	
}


/* accordian */
.contact-us .container .col-2{
	background-color: var(--clr-muted-black);
}

.contact-us .container .col-2 > #accordian{
	list-style: none;
}

.contact-us .container .col-2 > #accordian li{
	margin-bottom: 1.8rem;
}


.contact-us .container .col-2 > #accordian li label{
	background-color: var(--clr-white);
	padding:1.2rem 1.8rem;
	justify-content: space-between;
	cursor: pointer;
}

.contact-us .container .col-2 > #accordian li label + input[type="radio"]{
	display:none;
}

.contact-us .container .col-2 > #accordian li .content{
	padding:4rem 1.4rem;
	display: none;
}

.contact-us .container .col-2 > #accordian li label + input[type="radio"]:checked + .content{
	display: block !important;
}

/*======= Media query =======*/
@media(max-width: 991px){
	.our-team .container .row-2{
		width: 100%;
	}

	.our-team .container .row-2 .img{
		width: 31.5rem;
		height:35.5rem;
	}
}

@media(max-width: 767px){
	.about .container{
		flex-direction: column;
		min-height: fit-content !important;
	}

	.leadership-points .container > .points{
		min-width:50%;
		max-width: 35.2rem;
	}

	.abt-us > .container > .col{
		min-width:100%;
	}

	.our-team .container .row-2 .img{
		width:80%;
		height:50.5rem;
	}

	.our-services-1 .container > div{
		min-width: 100%;
	}

	.our-services-2 .container .col{
		flex-basis: 100%;
	}

	.contact-us .container .col{
		width: 100%;
	}

	.contact-us .container .col{
		flex-basis: 100%;
		padding:1rem !important;
	}

}

@media(max-width: 575px){
	.leadership-points .container > .points > h4{
		font-size: 2.4rem;
	}

	.our-team .container .row-2 .img{
		height:30rem;
	}
	.our-services-2 .container .col-1 ul li{
		font-size: 2rem;
	}
}