/* Body style to to create a grid area layout for the entire page */

body {
	grid-template-areas:
	"headergrid"
	"section section"
	"footer footer"
}

section {
	grid-area: section;
}

footer {
	grid-area: footer;
}

/* Header styles */

header {
	grid-area: headergrid;
	margin-bottom: 1rem;
}

.NavBar{
	display: grid;
	grid-template-areas:
	"navlogo"
	"navsubtitle"
	"navlinks";
}

.NavBar a:link{
	color: #999999;
	font-family: effra, sans-serif;
	text-decoration: none;
	text-align: center;
	font-size: 1rem;
	padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
}

.NavBar a:hover{
	color: #6a2bc7;
}

.NavBar a:visited{
	color: #999999;
}

.NavBar .Icon {
	display: none;
}

.NavLogo{
	max-width: 20%;
	grid-area: navlogo;
}

.NavSubtitle{
	color: #999999;	
	font-family: effra, sans-serif;
	font-size: 1.5rem;
	text-align: center;
	grid-area: navsubtitle;
}

.NavLinkDiv{
	grid-area: navlinks;
	text-align: center;
}

/* Footer styles */

.FooterDiv{
    text-align: center;
    font-family: effra, sans-serif;
    font-weight: 400;
    text-decoration: none;
	color: #999999;
	font-size: 14px;
}

/* Media queries for mobile */

@media screen and (max-width:600px){
	
	.NavBar a:not(:first-child){
		display: none;}
	.NavBar img.Icon{
		float: right;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding-top: 4%;
		padding-right: 1%;
	}
	
	.NavLinkDiv{
		display: none;}
	
	.NavBar.Repsonsive {
		position: relative;
	}
	
	
	.NavBar.Responsive a{
		float: none;
		display: block;
	}	
	
	.NavBar.Responsive a img{
		text-align: center;
	}
	
	.NavLink{
/*Keeps navigation links to the right on mobile */
	text-indent: 60%;
	}
	
	.NavBar.Responsive .NavLinkDiv{
		display: grid;
	}
	
	.NavSubtitle{
	font-size: .6rem;
	}
}

@media screen and (max-width: 600px){
/* Had to use an ID for BioDiv and MobileSection to have sufficient specificity to set background-image to none */
	#BioDivID{
		background-image: none;
	}

	#MobileSectionID{
		display: flex;
		align-items: center;
	}
}

/* Paragraph styles */

.PTitle{
	font-family: effra, sans-serif;
	color: #999999;
	font-size: 14px;
	text-align: left;
/* padding is to keep the text from overlaying the collage on the sides */
	padding-right: 6%;
}

.PArticle{
	font-family: effra, sans-serif;
	color: #999999;
	font-size: 12px;
	margin-bottom: 17px;
	text-align: justify;
/* padding is to keep the text from overlaying the collage on the sides */
	padding-right: 6%;
}

/* Styling for divs to contain bio content */

.BioDiv{
	background-image: url("../images/About_Us_Background_Desktop_08-21-23.jpg");
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.BioPDiv{
	max-width: 510px;
	min-width: 328px;
}

/* Styling for layout of services */

.OurServicesDiv{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 17px;
}

.SeviceItemDiv{
	max-width: 255px;
	margin-left: auto;
	margin-right: auto;
}

.ItemIMG{
	border: 2px solid #999999;
}

.PItemTitle{
	font-family: effra, sans-serif;
	color: #999999;
	font-size: 14px;
	text-align: center;
}

.PItemArticle{
	font-family: effra, sans-serif;
	color: #999999;
	font-size: 12px;
	text-align: center;
}

/* Because the title in this section breaks on to another line, the corresponding image needs to be pushed down for all sections to be level */

#RealEstateIMG{
	margin-top: 17px;
}

/* Styles for the mobile only collage */

.MobileSection{
	display: none;
}