:root 			{
	--mainBlue:#233242;
	--logoGreen:#7A9D86;
	--contentBlue:#3c5b97;
	--headerBlue:#3C5B97;
	--rounded:1.2rem; 
	--linkColor:#619673;
	--footerLinkColor:#EEDFAC;
	--logoYellowLight:#ECDDA3;
	--logoYellowDark:#D6BE78;
	--orange:rgba(255, 165, 0, 1);
	--resultWidth:200px;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body	{font-family: "EB Garamond", serif; font-size:1.3rem}
.eb-garamond-hero {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#mobileNav		{display:flex; flex-direction:row; align-items:center}
#menuButton		{display:none;}
#menuButtonMob	{display:none;}
#sideNav		{height:100%; width:0; position: fixed; z-index:1; top:0; right:0;
					  background-color: var(--mainBlue); overflow-x: hidden; padding-top: 60px;  transition: 0.5s;}
#sideNav a 		{padding: 8px 8px 8px 32px; text-decoration: none; font-size:1.5rem; display: block; transition: 0.3s;}
#sideNav a:hover {color: #f1f1f1;}

#closebtn 		{position: absolute; top: -45px; left: 100px; font-size: 46px; margin-left: 50px;}
.hamMenu		{font-size:4rem;}
.hamMenu a 		{text-decoration:none;}

@media (max-width:1150px){
	#mainNav > div:nth-child(1)	{display:none;}
	#mainNav > div:nth-child(5)	{display:none;}
}
@media (max-width:915px){
	#mainNav	{display:none;}
	#menuButton	{display:block;}
	#header		{justify-content: space-between}
}
@media (max-width:550px){
	#mainNav			{display:none;}
	#topCTA				{display:none;}
	#mobileNav			{display:flex; justify-content:space-between; width:100%}
	#menuButtonMob		{display:block;}
	#mainLogo			{width:150px;}
}

/* Reviews */
#reviews		{background-color:var(--contentBlue); width:100%; font-family: "Barlow", sans-serif; padding-top:1rem;
					font-size:1rem; line-height:150%; overflow:hidden}
.googleReview	{color:#FFFFFF; text-decoration: none; font-size:2rem;}
#listData		{display:flex; flex-direction:row; gap:1.75rem; justify-content:flex-start; flex-shrink:0;
					padding:1rem 2rem 2rem 1rem; width:100%; flex-wrap:nowrap; overflow:scroll;
}
.review			{display:flex; gap:.5rem; flex-direction:column; flex-shrink:0; background-color:#1F2937; 
				border:1px solid #ffffff; border-radius:var(--rounded); padding:1rem; width:335px;
}
.name			{color:#ffffff; display:flex; flex-direction:row; justify-content: space-between}
.date			{color:#9DA3AF}
.stars			{color:yellow;}
.info			{color:#ffffff;}
#listNavigation	{display:none; flex-direction:row; gap:1rem; justify-content: center}
.listNav	 {padding:7px 10px; background-color:#ffffff; border-radius:50%; border:1px solid #ffffff}

/*  Services */
#services			{margin-top:3rem; background-color:rgba(214, 190, 120, .4); width:100%; display:inline-block; 
					padding-bottom:3rem}
#listServices		{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-evenly; gap:2rem;
						margin-top:2rem;
}
.services			{width:350px; background-color:#F8F5E5; border-radius:var(--rounded);}
.serviceImage img	{border:1px solid var(--contentBlue); max-width:350px; width:100%; height:225px; 
						border-top-left-radius:var(--rounded); border-top-right-radius:var(--rounded);}
.serviceTitle		{text-align:center; padding:0rem; font-size:1.7rem;}
.serviceLink		{font-size:1.4rem; text-align:center; padding:2rem 0rem;}

.serviceLinks		{text-decoration:none; border:1px solid var(--logoGreen); padding:.5rem 1rem .8rem 1rem; border-radius:var(--rounded);
						transition:background-color 300ms ease-in, color 300ms ease-in}
.serviceLinks:hover {background-color:var(--logoGreen); color:#ffffff}



/* Footer */
#footerShell	{margin-top:0rem; background-color:var(--mainBlue); font-size:1.2rem; padding:1rem;}
#footer			{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-evenly; gap:2rem}
#footer > div	{display:flex; flex-direction:column; gap:1.5rem;}
#footer a		{color:var(--footerLinkColor); text-decoration:none; transition:color 300ms ease-in;}
#footer a:hover	{color:#ffffff}
#footer h3 {color:var(--logoGreen); margin-bottom:0rem; font-size:1.5rem}

.socialList	{display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem; justify-content: center;
					margin-top:1.5rem;}

.socialList img	{filter: grayscale(0%); -webkit-filter:grayscald(0%); transition:filter 300ms ease-in;
						height:1.5rem;}
/*.socialList img:hover {filter:grayscale(0%); -webkit-filter:grayscald(0%);} */
@media (max-width:500px){
	#footer	{flex-direction:column; justify-content: flex-start;}
}