* { box-sizing: border-box; }
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	width: 100%;
	overflow-x: hidden;
}
header { background-color: #003366; color: white; text-align: center; width: 100%; }
header .logo-container { background-color: white; width: 100%; }
header .logo-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }
header .top-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
header .top-nav ul li a { color: #003366; text-decoration: none; font-weight: 600; }
header img#steel-quotes-logo { max-width: 100%; height: auto; width: 400px; }

/* Responsive service regions image */
#service-regions img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

@media (max-width: 700px) {
	header .logo-inner {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding-bottom: 20px;
	}
	header .top-nav {
		width: 100%;
	}
	header .top-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		gap: 10px;
	}
	header .top-nav ul li {
		flex: 1;
		text-align: center;
		min-width: 80px;
	}
}

header .industry-logos img { margin-right: 5px; }

header h2 { margin-bottom: 10px; }
header h2 a { color: white; text-decoration: none; }
header p { margin-top: 0; padding-bottom: 20px; margin-bottom: 0; }
nav { padding: 10px; }
nav ul { list-style: none; padding: 0; display: flex; justify-content: center; }
nav ul li { margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; }

@media (max-width: 700px) {
	nav ul {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	nav ul li {
		margin: 0;
		width: 100%;
		text-align: center;
	}
	nav ul li a {
		display: block;
		padding: 12px;
		background: rgba(255, 255, 255, 0.1);
	}
}
.container {
	max-width: 1200px;
	margin: 20px auto;
	padding: 20px;
	background: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	width: calc(100% - 40px); /* Account for padding */
	box-sizing: border-box;
}
.hero { text-align: center; padding: 50px 20px; background-color: #e6f2ff; }
.quote-form {
	margin: 20px auto;
	max-width: 600px;
	width: 100%;
	box-sizing: border-box;
}
.quote-form label { display: block; margin: 10px 0 5px; }

.required-asterisk {
	color: #d00;
	margin-left: 4px;
	font-weight: bold;
}

form fieldset { margin-bottom: 20px; }
form label { padding-bottom: 5px; }

#quote h2, #quote p
/* #how-it-works h2, #how-it-works p, */
/* #services h2, #services p */
	{ text-align: center; }

.quote-form input[type="text"],
.quote-form input[type="number"],
.quote-form input[type="email"],
.quote-form input[type="phone"],
.quote-form textarea,
.quote-form select { width: 100%; padding: 10px; margin-bottom: 10px; }

.quote-form textarea { height: 110px; font-family: Arial; }

.quote-form button {
	background-color: #219900;
	color: white;
	padding: 10px;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	width: 100%;
	display: block;
	margin-top: 10px;
}

section ol li { margin-bottom: 15px; }
/* NOTE: inner-container ported from .quote-form */
.inner-container {
	margin: 20px auto;
	max-width: 700px;
	width: 100%;
	box-sizing: border-box;
}
.inner-container h4 { margin-bottom: 0; }

footer { background-color: #003366; color: white; text-align: center; padding: 10px; }