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

body {
	display: grid;
	grid-template-columns: 100vw;
	grid-template-areas:
	"headergrid"
	"biogrid"
	"footergrid"
}

/* Media queries for mobile */

@media screen and (max-width: 600px){
	
	body {
	grid-template-areas:
	"headergrid"
	"biogrid"
	"mobilesectiongrid"
	"servicesgrid"
	"footergrid"
}
	
	/* Had to use an ID for BioDiv and MobileSection to have sufficient specificity to set background-image to none */
	#BioDivID{
		background-image: none;
	}

	#MobileSectionID{
		grid-area: mobilesectiongrid;
		display: flex;
		flex: auto;
		justify-content: center;
	}
	
	.OurServicesDiv {
		flex-wrap: wrap;
	}
}

/* Paragraph styles */

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

.PArticle{
	grid-area: biogrid;
	font-family: effra, sans-serif;
	color: #595959;
	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{
	grid-area: biogrid;
	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;
}

/* Styles for the mobile only collage */

.MobileSection{
	display: none;
}