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


:root{
	--mainColor: #0f0f0f; /* Main Grey */
	--bodyColor: #1f1f1f; /* Darkest Grey */
	--bodyColorLight: #3f3f3f; /* Lighter Grey */

	--midColor: #c2c2c2;
	--midColorMax: #fff;
	--midColorAcc: #e3e3e3;
	--accColor1: #cc561b;
	--accColor1Active: #f7651b;
	--accContrast: #fff;
	
	

	/*Fonts*/
	--fontHead: Work Sans, sans-serif;
	--fontBody: Open Sans, sans-serif;

	/*Breakpoints*/
	--midBreakpoint: 800px;
}	

*{
	font-family: var(--fontBody);
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--fontHead);
	color: var(--midColorMax);
	margin: 0;
}
h1 small, h1 span{
	font-family: var(--fontHead);
}
body{
	background-color: var(--bodyColor);
	padding: 0;
	margin: 0;
}
h1 small{
	width: auto;
	border-top: 2px solid var(--accColor1Active);
	display: block;
	font-size: 1rem;
	padding-top: 0.25rem;
}
h1 span{
	color: var(--accColor1Active);
}
.headerLogo h1{
	display: inline-block;
}
header{
	display: flex;
	width: calc(100vw - 2rem);
	position: absolute;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
}
.bodyImg{
	min-height: 90vh;
	width: calc(100% - 2rem);
	padding: 1rem;
	background-image: url(../images/backImg.jpeg);
	background-size: cover;
	padding-top: 0rem;
	background-position: center 25%;
	display: flex;
	align-items: center;
}
.headerNav{
	color: white;
	text-transform: uppercase;
}
.headerNav a{
	color: white;
	text-decoration: none;
	margin-left: 1rem;
}
.bodyPost{
	background-color: var(--bodyColor);
	border-bottom: 3px solid var(--accColor1Active);
	border-right: 3px solid var(--accColor1Active);
	padding: 1rem;
	max-width: calc(100% - 2rem);
	flex-basis: 40%;
	color: white;
	padding-bottom: 2rem;
}
.bodyPost h2{
	font-size: 2rem;
	border-bottom: 1px solid var(--bodyColorLight);
	display: inline-block;
	padding-bottom: 0.7rem;
}
@media(max-width: 800px){
	.bodyPost{
		flex-basis: 80%;
	}
}
.mainBtn{
	color: white;
	text-decoration: none;
	background-color: var(--accColor1);
	padding: 0.7rem;
	transition: all 0.2s;
}
.mainBtn:hover{
	background-color: var(--accColor1Active);
}
.aboutPage{
	padding: 1rem;
	background-color: var(--mainColor);
	color: white;
}
.aboutPage{
	text-align:center;
	
}
.aboutPage h2{
	font-size:2.5rem;
	margin-top:1rem;
}
.aboutPage h3{
	font-size:1.3rem;
	margin-top:1rem;
}
.teamPage{
	display:flex;
	justify-content:space-around;
	margin-top:1rem;
}.teamMember{
	padding:1.5rem;
	background-color:var(--bodyColor);
	border-radius:10px;
	margin:1rem;
	flex-basis:33%;
}
.teamMember h4{
	text-transform:uppercase;
	font-size:1.5rem;
	margin-top:0.8rem;
}
.teamMember small{
	display:block;
	font-size:1rem;
	color:var(--accColor1Active)
}
.servicesBox{
	background-color:var(--bodyColor);
	padding:1rem;
}
.servicesBox h2{
	text-align:left;
	color:white;
	font-size:2.5rem;
	margin-bottom:1rem;
	padding-top:1rem;
	text-transform:uppercase;
	flex-basis:40%;
}
.servicesBox h2 small{
	display:inline-block;
	padding:0.6rem;
	position:relative;
	font-family:var(--fontHead);
	font-weight:bold;
	font-size:1.2rem;
	width:auto;
	z-index:4;

}
.servicesBox h2 small::after{
	display:block;
	position:absolute;
	content:" ";
	height:100%;
	width:100%;
	background-color:var(--accColor1);
	top:0;
	left:0;
	z-index:-1;
	transform:skew(-10deg, 0)
}
.servicesBox h3{
	font-size:1.3rem;
	color:white;
	text-transform:uppercase;
	padding:0.5rem;
	margin-bottom:1rem;
	text-align:center;
}
.servicesPanels{
	flex-basis:60%;
}
.servicesSection{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width:1300px;
	width:100%;
	margin:0 auto;
}
.servicesPanels .panel{
	color:white;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem;
	border-radius:0.5rem;
	margin:0.8rem;
	position:relative;
	z-index:4;
}
.servicesPanels .panel:after{
	width:100%;
	height:100%;
	display:block;
	position:absolute;;
	content:" ";
	top:0;
	left:0;
	background-color:var(--bodyColorLight);
	z-index:-1;
	border-radius:0.5rem;
	transition:all 0.2s;
}
.servicesPanels .panel:hover:after{
	width:calc(100% + 0.8rem);
	height:calc(100% + 0.8rem);
	left:-0.4rem;
	top:-0.4rem;
	
}
.panel p{
	color:white;
	border-left:2px solid var(--accColor1);
	padding-left:0.7rem;
}
.panelLeft{
	flex-basis:80%;

}
.panel h4{
	text-transform:uppercase;
	font-size:1.2rem;
}
.panelRight{
	flex-basis:20%;
	text-align:left;
}
.panelRight svg{
	width:5rem;
	left:50%;
	transform:translate(-60%, 0%);
	display:inline-block;
	position:relative;
}
.servicesDark{
	background-color:var(--mainColor);
}
.contactForm{
	padding:1rem;
	background-color:var(--mainColor);
}
.contactForm h2{
	color:white;
	text-align:center;
	font-size:2.5rem;
	padding-top:1rem;
}
.contactForm p{
	text-align:center;
	color:white;
}
.contactForm a{
	color:var(--accColor1Active);
	text-decoration:none;
}
.contactForm a:hover{
	color:var(--accColor1)
}
@media(max-width:800px){
	.teamPage{
		display:block;
	}
	.servicesSection{
		display:block;
	}
	.servicesSection h2{
		text-align:center;
	}
}
@media(max-width:650px){
	.servicesPanels .panel{
		display:block;
	
	}
	.servicesPanels .panelRight svg{
		width:5rem;
		left:auto;
		transform:translate(0%, 0%);
		display:inline-block;
		position:relative;
	}
	.servicesPanels .panelRight{
		text-align:center;
		margin-bottom:1rem;
	}
	.servicesPanels h4{
		text-align:center;
	
	}
}