@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

:root{
	--primary-color: hsl(330 , 87%, 17%);
	--secondary-color:hsla(203, 100%, 13%, 1);
}
body{
	margin: 0;
	padding:0;
	font-family: 'Source Sans Pro', sans-serif;
}
/*Start Back To Top*/

.btn-backtotop{
	background-color: var(--primary-color);
	color: #fff;
	padding: 10px;
	border-radius: 10px;

	position: absolute;
	bottom:10px;
	right:10px;

	z-index: 100;
}

/*End Back To Top*/
/*Start Header*/
header{
	height: 100vh;
	background-image:linear-gradient(30deg,rgba(0,0,0,0),rgba(0,0,0,0.5)), url("../assets/img/banner/banner2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;

	position: relative;
} 
/*Start navbar*/
.navbar{
	background: linear-gradient(rgba(0,0,0,0.3),var(--secondary-color)); 
	padding: 20px 30px;

	transition:  all 0.7s;
}
.navmenus{
	background: linear-gradient(rgba(0,0,0,0.6),var(--secondary-color)); 
	padding: 5px 30px;
}
.menuitems{
	color: #eeee;
	font-size: 14px;
	letter-spacing: 1px;
}
.menuitems:hover{
	color: #1aaee8;
}
.lines1,.lines2,.lines3{
	width: 25px;
	height: 3px;
	margin: 6px;

	transition: all 0.5s;
}
.crossxs .lines1{
	transform: rotate(-45deg) translate(-6px,6px);
}
.crossxs .lines2{
	opacity: 0;
}
.crossxs .lines3{
	transform: rotate(45deg) translate(-6px,-6px);
}
/*End navbar*/

/*Start banner*/
.banners{
	width: 80%;

	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%,-50%);
}
.bannerheaders{
	animation-name: banani;
	animation-duration: 2s;
}
.bannerparas{
	animation-name: banani;
	animation-duration: 2s;
	animation-delay: 1s;

	animation-fill-mode: backwards;
}
@keyframes banani{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}
/*End banner*/
/*End Header*/

/*Start Aboutus*/
.aboutuss{
	background-image:linear-gradient(30deg,rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url("../assets/img/banner/banner2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;

	position: relative;


}
.aboutuss .lines{
	width: 30%;
	height: 1.2px;
	background-color: #fff;
	margin-bottom: 3px;
}
.aboutuss .lines:nth-of-type(2){
	width: 20%;
	height: 1px;
}
.aboutuss .lines:nth-of-type(3){
	width: 10%;
	height: 0.5px;
	margin-bottom: 30px;
}
.aboutuss h5{
	background: #fff;
	color: #000;
	padding: 10px;

	border-left:5px solid red;

}
.aboutuss h5 ~ p{
	text-align: left;
	margin: 30px 0;
}
.aboutuss img{
	width: 350px;

	position: absolute;
	bottom: 0;

}
/*End Aboutus*/

/*Start property*/
.titles{
	display: inline-block;
	text-transform: uppercase;
	color: var(--secondary-color);
	padding: 5px 20px;

	position: relative;
}
.titles::before,.titles::after{
	content: "";
	width: 20px;
	height: 20px;

	position: absolute; 
}
.titles::before{
	border-left: 3px solid var(--primary-color);
	border-bottom: 3px solid var(--primary-color);

	left: 0;
	bottom: 0;
}
.titles::after{
	border-right: 3px solid var(--primary-color);
	border-top: 3px solid var(--primary-color);

	right: 0;
	top:0;

}
.propertylist{
	color: #777;
	cursor: pointer;
}
.activeitems{
	color: var(--primary-color);
}
/*End property*/

/*Start Adv Section*/
.missions{
	background-color: var(--secondary-color);
}
.fromlefts{
	animation-name: fromleft;
	animation-duration: 3s;
}
.fromrights{
	animation-name: fromright;
	animation-duration: 3s;
}
@keyframes fromleft{
	0%{
		transform: translate(-150px);
		opacity: 0;
	}
	100%{
		transform: translate(0px);
		opacity: 1;
	}
}

@keyframes fromright{
	from{
		transform: translateX(50px);
		opacity: 0;
	}
	to{
		transform: translateX(0px);
		opacity: 1;
	}
}
/*End Adv Section*/

/*Start Our Services*/
.services{
	background:linear-gradient(200deg,var(--primary-color),var(--secondary-color));
}
.service-cards{
	overflow: hidden;

	white-space: pre-wrap;

	position: relative;
}
.service-cards::before{
	content: "You may need our services ? \A Try and upgrade your living environment. \A \f004 \f004 \f004";
	font-family: "Font Awesome 5 Free";
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	text-align: center;
	line-height: 2;

	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 1;
}
.service-cards:hover::before{
	content: "";
	background-color: rgba(0,0,0,0.1);
}
.service-cards img{
	transition: all 0.5s;
}
.service-cards:hover img{
	transform: scale(1.1);
}
.servicetxt{
	width: 40%;
	background-color: rgba(0,0,0,0.7);
	font-size: 14px;
	text-align: center;
	letter-spacing: 1px;
	opacity: 0.7;

	position: absolute;
	top: 80%;
	right: 0;

}
/*End Our Services*/

/*Start Client Section*/
ul.client-list{
	list-style-type: none;
	margin: 0;
	padding: 0;

	display: flex;
	justify-content: center;
}
ul.client-list li{
	margin:auto;
	padding: 10px 20px;
	background-color: #f4f4f4;
	border:5px solid #e9e9e9;
}
ul.client-list img{
	width: 100px;
}
ul.client-list li:hover{
	border-color: var(--secondary-color);
	box-shadow: 3px -5px 0 rgba(0,0,0,0.3);
}
@media(max-width:768px){
	ul.client-list li{
		margin:0 2px;
		padding: 5px 10px;
		border:2px solid #e9e9e9;
	}
	ul.client-list img{
		width:70px;
	}
	ul.client-list li:hover{
		box-shadow: 1px -2px 0 rgba(0,0,0,0.3);
	}
}
/*End Client Section*/

/*Start Customer Section*/
.customers{
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)),
	url("../assets/img/banner/banner3.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
/*End Customer Section*/

/*Start Request Quotation*/
.qutoes{
	background-color: var(--secondary-color);
	margin: -30px;
	padding: 30px 50px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
.qutoes .infos{
	display: flex;
	/*justify-content: space-between;	*/
}
.qutoes .btn-calls{
	width: 170px;
	height: 50px;
	background-color: var(--primary-color);
	color: #fff;
	padding: 0;
	font-size: 15px;
	line-height: 50px;
	border:0;
	border-radius: 100px;

	transform: translateY(-1px);

	transition: all 0.3s;
}
.qutoes .btn-calls:hover{
	box-shadow: -3px 3px 3px #444;
	transform: translateY(0);
}

/*End Request Quotation*/

/*Start Contact Section*/
.contacts{
	background-image:linear-gradient(
		100deg,
		rgba(0,0,0,1)50%,
		rgba(0,0,0,0.5)30%,
		transparent 70%),
	 	url("../assets/img/banner/banner3.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;

}
.contacts .inputs{
	background:transparent;
	border: none;
	border-bottom: 2px solid #ccc; 
	border-radius: 0;
	color: #fff;

	transition: all 0.8s;

}
.contacts .inputs:focus{
	box-shadow: none;
	border-bottom: 2px solid var(--primary-color);
}
.submit-btns{
	background-color: var(--primary-color);
	color: #fff;
	border: none;

	transition: all 0.3s;
}
.submit-btns:hover{
	background-color: var(--secondary-color);
	color: #fff;

}
.labels{
	color: #e2e2e2;
	display: block;
	margin-top: -80px;
	margin-left: 10px;

	transition: all 0.5s;

}
.inputs:placeholder-shown + .labels{
	opacity: 0;
	transform: translateY(20px);
}
/*End Contact Section*/

/*Start Footer*/
.footerlinks{
	text-decoration: none;
	color: #e2e2e2;
	font-size: 13px;

	transition: all .3s;
}
.footerlinks:hover{
	color: orange;
	border-bottom: 1px solid orange;
	letter-spacing: 1px;
}

/*End Footer*/