html {
	/*font-family: "Font Awesome 7 Free";*/
	font-family: sans-serif;
	box-sizing: border-box;
	color: rgb(28, 39, 82);
}

/* Then let everything inherit it — including pseudo-elements */
*,
*::before,
*::after {
  box-sizing: inherit;
}

h1, h2, h3, a  {
	margin:0;
}


.header {
	display: flex;
	justify-content: space-between;
	
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 0;
	animation: fade-in 0.4s;
	flex-wrap: wrap;
}

.main {

}

.footer {
	display: flex;
	border-top:1px solid black;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 0;
	animation: fade-in 0.4s;
	justify-content: space-between;
}


.logo {
	color: rgba(255,255,255,0.7);
	font-size: 30px;
}

.nav {
	/*display:flex;*/
}

.nav-links {
list-style:none; /*remove bullets*/
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:1rem;
}

/*child combinator*/
.nav-links > li {
	display:flex;
	align-items:center;
	height: 100%;
	gap: 10px;
}

.icon-circle {
  
  width: 60px;
  height: 60px;
  border-radius: 50%;

  background-color: #2d7df6; /* circle fill color */
  color: #ffffff;            /* icon color */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 40px;           /* icon size */
}

.main-nav-container {
	display:flex;
	max-width: 1200px;
	margin: 0 auto;
	animation: fade-in 0.4s;
	
	/*background-color: #febe06;*/
	background-color: #fd7a01;
	width:100%;
	height:80px;
	align-items:center;
	gap:50px;
	padding: 0 50px;
	font-weight:bold;
	position:relative; /*so mobile menu positions correctly*/
}

.main-nav {
	display:flex;
	max-width: 1200px;
	margin: 0 auto;
	animation: fade-in 0.4s;
	
	/*background-color: #febe06;*/
	background-color: #fd7a01;
	width:100%;
	height:80px;
	align-items:center;
	gap:50px;
	padding: 0 50px;
	font-weight:bold;
}

.main-nav a {
	text-decoration:underline;
	color: rgb(28, 39, 82);
}

.main-nav a:hover {
	cursor: pointer;
	color:white;
}

.active-menu-page {
	color:white;
}

.intro-section {
	background-image: url("./img/stock_photos/bermix-studio-iwz5tmhjl7o-unsplash2000x1333.jpg");
	background-color:grey;
	max-width:1200px;
	margin: 0 auto;
	padding: 50px;
	min-height:400px;
	background-size:cover;
	background-repeat:no-repeat;
}

/* All descendents of intro-section*/
.intro-section * {
	color:white;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.about-header-section {
	color:white;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	font-size:60px;
	text-align:center;
	background-image: url("./img/backgrounds/blue_textured-tile.png");
	background-size:cover;
	background-repeat: repeat; /*no-repeat;*/
	background-color:grey;
	max-width:1200px;
	margin: 0 auto;
	padding: 50px;
	min-height:100px;
	background-size:cover;
	background-repeat:no-repeat;
}

.about-header-section * {
	color:white;
}

.about-section {
	max-width:1200px;
	margin: 0 auto;
	padding: 50px;
}

/*All direct children of about-section*/
.about-section > * {
	
}

.about-section * {
	
}

/*
=============================================
Specific content container rules
=============================================
*/

.service-list-container {
	width:100%;
	margin-top:50px;
}

.service-list-container * {
	font-weight: bold;
}

.footer-location-blurb {
	text-align: center;
	max-width:50%;
}

.header-company-title * {
	margin: 0;
	font-weight:bold;
	font-size:large;
}

.blog-image {
	float: right;
	width: 500px;
	padding: 10px;
}

.blog-header-main {
	color:white;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	font-size:60px;
	text-align:center;
	background-image: url("./img/backgrounds/blue_textured-tile.png");
	background-size:cover;
	background-repeat: repeat; /*no-repeat;*/
	background-color:grey;
	max-width:1200px;
	margin: 0 auto;
	padding: 50px;
	min-height:100px;
	background-size:cover;
	background-repeat:no-repeat;
}

.blog-content {
	max-width:1200px;
	margin: 0 auto;
	padding: 50px;
}

.blog-item-header {
	max-width:1200px;
	margin: 0 auto;
	font-size: 25px;
}

.blog-item-content {
	max-width:1200px;
	margin: 0 auto;
}


/*
=============================================
General Layout things that can be applied anywhere
=============================================
*/
.layout {
	display:flex;
	flex-wrap:wrap;
}

.layout-column {
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
}

.layout-column-center {
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	justify-content:center;
	align-items:center;
}
.layout-padding {
	padding:10px;
}
.layout-spacing {
	gap: 10px;
}

.stacked-item-container {
	display:flex;
	flex-direction:column;
	gap:20px;
}

/*
=============================================
Individual Generic Element Styles
=============================================
*/
.menu-toggle {
  display: none;
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background: #000;
}
.link-button {
	background-color: #fd7a01;
	font-weight:bold;
	padding:10px;
	display:inline-block;
	color:black;
	text-shadow: none;
	align-self:baseline;
}

.link-button:hover {
	background-color: white;
	cursor:pointer;
}

.bold {
	font-weight:bold;
}

.white-text {
	color:white;
}

a.white-text,
a.white-text:visited,
a.white-text:hover,
a.white-text:active,
a.white-text:focus {
  color: #ffffff;
}


.heading1 {
	color: rgb(28, 39, 82);
	font-size: 45px;
}

.center-text {
	text-align:center;
}

.multi-column-list {
  list-style: none;       /* remove bullets */
  padding: 0;
  margin: 0;
  
  column-width: 300px;    /* desired width of each column */
  column-gap: 1rem;       /* space between columns */
  
  height: 100%;           /* optional, ensures it respects parent height */
  overflow: hidden;       /* prevents vertical overflow */
}

@media (max-width: 768px) {
	.blog-image {
		width: 100%;
	}
 	.header-company-title * {
 		font-size:30px;
 	}
 	
 	.menu-toggle {
	    display: block;
	  }
	
	  .main-nav {
	    display: none;
	    flex-direction: column;
	    position: absolute;
	    top: 60px;
	    right: 0;
	    background: white;
	    padding: 1rem;
	  }
	
	  .main-nav.active {
	    display: flex;
	    background-color: #fd7a01;
	    height:auto;
	  }
	.service-link {
		font-size: 25px;
	}
}