@charset "utf-8";

:root {
/* --------------colors--------------*/
	--bgwhite: #FAFAFA;
	--fontBlack: #081C15;
	--fontGray: #696674;
	
	--greenbtn: #84C776;
	--greenbtnHover: #B7E4C7;
	
	--bluebtn: #1A759F;
	--bluebtnHover: #64DFDF;
	
/*---------------typography-----------------*/
	--pmedium: 500;
	--pbold: 700;
	--psemibold: 600;
	
	
	
}

p, li, a, button {
	color: var(--fontGray);
	font-family: "Montserrat", sans-serif;
	font-weight: var(--pmedium);
	font-size: 18px;
	line-height: 26px;
}

h1, h2, .footerLogo p {
	color: var(--fontBlack);
	font-family: "Libre Baskerville", serif;
	font-weight: 700;
}

h1 {
	font-size: 64px;
	line-height: 64px;
}

h2 {
	font-size: 40px;
	margin: 0 40px;
}

body, header {
	background-color: var(--bgwhite);
}

body {width: 100%;}

.button {
	font-weight: 800;
	border: none;
	border-radius: 50px;
	padding: 16px 30px;
	color: var(--bgwhite);
	text-decoration: none;
}

.button:hover {
	transition: all 0.3s ease-out;
}

/*---------------NAV BAR-----------------*/

nav button#hamburger {
	
	float: right;
	margin: 6px 0px;
	
	width: 36px;
	height: 20px;
	border: solid 10px transparent;
	
	background: none;
	background-image: url(../images/hamburgerMenu.png);
	background-repeat: no-repeat;
	cursor: pointer;
	text-transform: uppercase;
	padding-top: 16px;
	padding-left: 0px;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	
	position: relative;
	z-index: 500;
	display: none;
	
	text-indent: -9999px;
}

header .logo {
	height: 40px;
	margin-left: 8%;
}

header a img { height: 40px;}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	display: flex;
	align-items: center;
}

header nav  {
	margin-left: auto;
	display: flex;
	align-items: center;
	margin-right: 8%;
}

header * {
	display: inline;
}

header li {
	justify-content: center;
	margin: 20px;
	font-weight: var(--psemibold);
}

header li a { text-decoration: none; }

header li a:hover { color: var(--greenbtn); }

header li a:active { color: var(--bluebtnHover); }

/*---------------HERO-----------------*/

.hero, .aboutHero {
	display: flex;
	margin: 100px 8% 164px 8%;
}
.landingHeroMobile {
	display: none;
}
.hero img {
	max-width: 434px;
	height: auto;
}

.hero p {
	margin: 28px 0 44px;
	max-width: 462px;
}

.tagline .button, .landingContact .button {
	background-color: var(--greenbtn);
}

.tagline .button:hover, .landingContact .button:hover {
	background-color: var(--greenbtnHover);
	color: var(--fontBlack);
}

.tagline img {
	margin-top: 63px;
}

.tagline { margin-top: 40px;}

/*---------------Landing Services & Clients & Team Section-----------------*/

.landingPubS, .landingPrivS {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 451px;
	max-height: 528px;
	box-shadow:  0px 4px 30px rgba(0, 0, 0, .15);
	padding: 30px 22px;
	border-radius: 10px;
}

.landingPubS {
	margin-right: 63px;
}

.landingPubS p, .landingPrivS p{
	margin: 25px 0;
	text-align: center;
}

.landingPubS img, .landingPrivS img {
	max-width: 290px;
}

.landingPubS p:first-of-type, .landingPrivS p:first-of-type{
	margin-bottom: 0;
}

.landingPubS .button, .landingPrivS .button, .landingTeam .button{
	background-color: var(--bluebtn);
}

.landingPubS .button:hover, .landingPrivS .button:hover, .landingTeam .button:hover {
	background-color: var(--bluebtnHover);
	color: var(--fontBlack);
}

.landingServContainer, .landingClientsContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 73px 0 136px;
}

.landingServicesH2, .landingClientsH2, .landingTeamH2, .aboutTeamH2 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.landingClientsContainer, .landingTeamHCont, .landingTeam {
	margin-left: 8%;
	margin-right: 8%;
}

.landingClientsContainer img {
	margin-right: 113px;
}

.landingClientsContainer p { max-width: 648px;}

.landingTeamHCont p{
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 28px;
}

.landingTeamContainer img {
	max-width: 221px;
	max-height: 247px;
}

.landingBob p:last-of-type {
	max-width: 239px;
}

.landingTeamContainer{
	display: flex;
	justify-content: space-evenly;
	align-items: baseline;
	text-align: center;
	margin: 73px 0;
	max-height: 376px;
}

.landingMary p:last-of-type {
	max-width: 258px;
}

.landingJames p:last-of-type {
	max-width: 240px;
}

.landingTyler p:last-of-type {
	max-width: 223px;
}

.landingTeamContainer aside p:first-of-type {
	font-weight: 700;
	color: var(--fontBlack);
	margin: 19px 0;
}

.landingTeam {
	margin-bottom: 136px;
	text-align: center;
}

.landingTeamContainer aside {
	max-height: 376px;
}

/*---------------Landing Contact Section-----------------*/
.landingContact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	height: 283px;
	background-image: url(../images/desktop/landingContactbg.png);
	background-size: cover;
	background-repeat: no-repeat;
}

.landingContact h2 {
	margin-bottom: 53px;
	color: var(--bgwhite);
}

/*---------------footer Section-----------------*/

footer {
	background-color: var(--fontBlack);
	max-height: 270px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 41px 8% 41px 8%;
}

footer p, button, .footerCompServ a { 
	font-size: 13px;
	color: var(--bgwhite);
	line-height: 16px;
	font-weight: 300;
	text-decoration: none;
	display: block;
}

.enterEmail {
	background-color: var(--fontBlack);
	border: 1px solid var(--bgwhite);
	border-radius: 10px 0 0 10px;
	max-height: 38px;
	padding: 10px 20px 10px 10px;
	line-height: 38px;
}

button {
	height: 40px;
	border-radius: 0 10px 10px 0;
	color: var(--fontBlack);
	font-weight: 500;
}

button:hover { 
	background-color: var(--greenbtn);
	color: var(--bgwhite);
	cursor: pointer;
}

input:focus { background-color: lightblue;}

.subscribeField {
	display: flex;
	align-items: center;
}

.footerLogo p {
	color: var(--bgwhite);
	max-width: 194px;
	line-height: 20px;
	font-size: 13px;
}

.footerLogo img {
	max-width: 178px;
	margin-bottom: 50px;
}

.footerLogo { margin-right: 24%;}

.footerSub p {
	max-width: 207px;
}

.footerCompServ, .footerContact {
	margin-right: 6%;
}

.subscribeField {
	margin-top: 33px;
}

.footerCompServ p, .footerContact p:first-of-type {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 9px;
}

.footerCompServ a{margin-bottom: 6px;}

.footerContact p {
	margin-bottom: 26px;
}

.footerContact p:last-of-type {
	margin-bottom: 0;
}

.footerCompServ a:hover { color: var(--greenbtn);}

.footerComp {margin-bottom: 21px;}

/*---------------SERVICES PAGE-----------------*/

.serviceDesc {
	margin: 150px 8%;
}

.serviceDesc h2 { margin: 0 0 17px;}
.serviceDesc p:first-of-type {margin-bottom: 26px;}

.privSecDesc, .pubSecDesc {
	text-align: center;
	max-width: 683px;
	margin: 0 auto 73px;
}

.privSecDesc h2, .pubSecDesc h2 { margin-bottom: 28px;}
.privRow1, .privRow2, .pubRow {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 0 8% 70px 8%;
	text-align: center;
}

.privRow1 img, .privRow2 img, .pubRow img {
	max-width: 90px;
	margin-bottom: 25px;
}

.privRow1 aside, .privRow2 aside, .pubRow aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right: 41px;
}

.privateSectors aside p:last-of-type, .publicSectors aside p:last-of-type{
	max-width: 355px;
	margin-top: 25px;
}

.privateSectors aside:last-of-type, .publicSectors aside:last-of-type{
	margin-right: 0;
}

.pubSecDesc h2 {
	margin-top: 136px;
}

.pubRow {
	margin-bottom: 136px;
}

.privateSectors aside p:first-of-type, .publicSectors aside p:first-of-type {
	font-weight: 700;
	color: var(--fontBlack);
	max-width: 220px;
}

.govProc p:first-of-type { min-width: 249px;}

/*---------------ABOUT PAGE-----------------*/

.aboutHero {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ourMission h2 {
	margin: 0 0 52px;
}

.ourMission p {
	max-width: 560px;
	line-height: 28px;
}

.aboutTeamH2 {
	margin-bottom: 73px;
}

.aboutTeamContainer {
	margin: 0 8% 136px;
}

.bob, .mary, .james, .tyler {
	display: flex;
	justify-content: center;
	align-items: center;
}

.teamBioContainer img {
	max-width: 200px;
	margin-right: 76px;
}

.teamBioContainer p:first-of-type {
	font-weight: 700;
	color: var(--fontBlack);
	margin-bottom: 14px;
}

.teamBioContainer section {
	margin-bottom: 78px;
}

.teamBioContainer p:last-of-type { max-width: 901px;}

/*---------------ABOUT PAGE CLIENT SECTION-----------------*/

.teamClients {
	margin: 0 8% 179px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.teamClients img {
	margin-right: 178px;
}

.teamClients h2 {
	margin: 0 0 37px;
}

/*---------------CONTACT PAGE-----------------*/

.contactBg {
	position: absolute;
	top: 0;
	left: 1.3%;
	z-index: -1;
}

.contactIntro h2 {
	margin: 0 0 4px;
}

.contactIntro p {
	max-width: 679px;
}

.contactContainer {
	max-width: 836px;
	max-height: 528px;
	margin: 106px auto;
	background-color: var(--bgwhite);
	padding: 54px 72px;
	border-radius: 10px;
	box-shadow: 0px 4px 30px rgba(0, 0, 0, .15);
}

form {
	display: flex;
	flex-direction: column;
}

form input, textarea {
	max-width: 341px;
	border-radius: 10px;
	margin-bottom: 18px;
	background-color: #C7EAD4;
	border: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 13px;
	padding: 0 15em 0 20px;
}

textarea {
	padding-top: 15px;
}

form input {
	min-height: 40px;
}

form .button {
	background-color: var(--greenbtn);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 18px;
	max-width: 110px;
	max-height: 52px;
	padding: 0;
}

form .button:hover {
	background-color: var(--greenbtnHover);
	color: var(--fontBlack);
}

.contactSubmit {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 30px;
}

.contactInfo p{
	margin-bottom: 31px;
}

/*---------------MEDIA QUERY-----------------*/

@media screen and (max-width: 700px) {
	body {
		text-align: center;
		margin: 0 auto;
	}
	
	nav button#hamburger {
		display: block;
		position: absolute;
		right: 8%;
	}
	
	header .logo {
		position: absolute;
		
	}
	#main_nav.open {
		height: 176px;
		width: 100%;
		margin: 0;
	}
	
	#main_menu {
		width: 100%;
		height: 176px;
		top: 120px;
		position: relative;
		background-color: var(--bgwhite);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		opacity: 0;
		height: 0;
	}
	
	#main_nav.open #main_menu {
		height: 176px;
		opacity: 1;
	}
	
	#main_menu a {
		width: 100%;
	}
	.landingHeroDesktop {display: none;}
	.landingHeroMobile {
		display: block;
		max-width: 100%;
	}
	
	.hero {
		flex-direction: column;
		margin: 80px 0;
	}
	
	h1 {
		font-size: 28px;
		line-height: 35px;
		text-align: center;
		max-width: 427px;
			margin: 0 auto;
	}
	
	h2 {
		font-size: 22px;;
	}
	
	p {
		font-size: 16px;
		text-align: center;
		line-height: 26px;
	}
	
	.tagline {margin-top: 23px;}
	.tagline p {
		max-width: 386px; 
		margin: 27px auto; 
	}
	
	img { margin: 0 auto;}
	
	.landingServContainer {
		flex-direction: column;
	}
	
	.landingServContainer img {
		max-width: 203px;
		height: auto;
	}
	
	.landingPubS, .landingPrivS{
		max-width: 367px;
		max-height: 495px;
		margin: 0 auto;
	}
	.landingPubS {
		margin-bottom: 38px;
	}
	
	.landingClientsContainer {
		flex-direction: column;
	}
	.landingClientsContainer img {
		max-width: 386px;
		height: auto;
		margin: 0 auto 23px;
	}
	
	.landingTeamContainer {
		flex-direction: column;
	}
	
	.landingTeamContainer img {
		max-width: 149px;
		height: auto;
	}
	.landingTeamContainer aside {
		margin: 0 auto 57px;	
	}
	
/*
	.landingContact {
		background-image: url(../images/mobile/contactBg.jpg);
		background-repeat: no-repeat;
		width: 100%;
	}
*/
	
	.landingTeamContainer {
		flex-direction: column;
		max-height: none;
		margin-bottom: 10px;
	}
	
	footer {
		flex-direction: column;
		max-height: none;
		text-align: center;
	}
	
	.footerLogo, .footerCompServ, .footerContact, .footerSub p {
		margin: 0 auto 30px;
	}
	
	.privRow1, .privRow2, .pubRow{
		flex-direction: column;
	}
	
	.privRow1 aside, .privRow2 aside, .pubRow aside{
		margin: 0 auto 30px;
		width: 100%;
	}
	
	.aboutHero {
		flex-direction: column;
	}
	
	.aboutHero img {
		order: -1;
		margin-bottom: 30px;
	}
	
	.aboutHero h2 {
		margin-bottom: 30px;
	}
	
	.teamBioContainer section {
		flex-direction: column;
	}
	
	.teamBioContainer img { margin: 0 auto 20px;}
	
	.teamClients {
		margin: 0 auto 80px;
		flex-direction: column;
	}
	
	.teamClients img {
		margin: 0 auto 30px;
		max-width: 400px;
	}
	
	.contactContainer, .contactSubmit {
		flex-direction: column;
		max-height: none;
		max-width: 386px;
	}
	
	form input, textarea {
		max-width: 238px;
		padding-right: 5em;
	}
	
	form .button {
		margin: 0 auto 20px;
		max-width: 108px;
		max-height: 52px;
		padding: 16px 30px;
		line-height: 5px;
	}
	.contactInfo p:last-of-type{
		margin-bottom: 0;
	}
}