* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	/* border: .5px solid #000000; */
}

/* Shows div box border to help with development */
/* div {
	border: 1px solid #000000;
} */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #333333;
}

img {
	max-width: 100%; 	/* Ensures the image doesn not exceed the width of its parent container */
	width: 100%;		/* Helps with max-width in Safari to fill container*/
	height: auto;		/* Maintains the image aspect ratio when scaling */
	display: block;		/* Optional: Removes extra space below the image */
}

.image-nitrogen {
	float: right;
}

.website-adcreate {
	text-align: right;
}




/* ------ text ------ */

h1 {
	font-size: 1.75rem;
	color: #0075c9;
	margin: 0 0 30px 0;
	font-weight: normal;
}

h2 {
	font-size: 1.5rem;
	margin: 0 0 30px 0;
	font-weight: normal;
}

ul {
	font-size: 1.5rem;
	line-height: 2rem;
	margin: 0 0 40px 0;
	font-weight: normal;
}

p {
	font-size: 1.25rem;
}




/* ------ contact ------ */

.call-mitch {
	font-size: 1.5rem;
	margin: 0 0 0 0;
}

a.email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
	text-decoration: none;
	margin: 0 0 20px 0;
	color: #1c2226;
}

a.email:hover {
	text-decoration: none;
	color: #0075c9;
}

.address {
	font-size: 1.5rem;
	line-height: 2.2rem;
}

a.adcreate {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25rem;
	text-decoration: none;
	color: #FFFFFF;
}

a.adcreate:hover {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #7fbae4;
}




/* ------ layout ------ */

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.container {
	margin: 40px auto 80px auto;
	max-width: 1600px;
	width: 90%;
}

.container-header-full-width {
	margin: 0 auto;
	padding: 40px 0 0 0;
	background: #f0f0f0;
}

.container-footer-full-width {
	margin: 0 auto;
	padding: 20px 0 40px 0;
	background: #0075c9;
}

.container-footer {
	margin: 40px auto 40px auto;
	max-width: 1600px;
	width: 90%;
	height: 35vh;
}

.email {
	margin: 0 0 10px 0;
	display: inline-block;
}

hr {
	background-color: #CCCCCC;
	border: none;
	/* Remove default border */
	height: 1px;
	margin-top: 40px;
}

/* .contact-box {
	border-radius: 10px;
	background: lightblue;
	padding: 20px;
} */



/* ------ grids ------ */

/* grid-template-columns: repeat(3, 1fr) - Use repeat() for same width columns */
/* grid-template-columns: 37% 25% 33%; - Use percentage for different width columns */

.grid-3-columns {
	display: grid;
	grid-gap: 60px;

	@media (min-width: 768px) {
		grid-template-columns: repeat(1, 1fr);
	}

	@media (min-width: 992px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 1200px) {
		grid-template-columns: 45% 20% 25%;
		/* grid-template-columns: repeat(3, 1fr); */
	}

	.col {
		margin-bottom: 16px;
	}
}

.grid-2-columns {
	display: grid;
	grid-gap: 40px;

	@media (min-width: 768px) {
		grid-template-columns: repeat(1, 1fr);
	}

	@media (min-width: 992px) {
		grid-template-columns: repeat(1, 1fr);
	}

	@media (min-width: 1200px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media screen and (max-width: 768px) {
		.copyright,
		.website-adcreate {
			text-align: left;
		}
	}

	@media screen and (max-width: 992px) {
		.copyright,
		.website-adcreate {
			text-align: left;
		}
	}
}