@charset "UTF-8";

/* Default style */
.top-margin {
	margin-top: 6rem;
}
/* If the viewport is less than 600px, adjust the top margin */
@media (max-width: 599px) {
	.top-margin {
		margin-top: 3rem;
	}
}
/* If the viewport is between 600px and 900px, adjust the top margin */
@media (min-width: 600px) and (max-width: 899px) {
	.top-margin {
		margin-top: 4rem;
	}
}
/* If the viewport is 900px or more, keep the top margin as 6rem */
@media (min-width: 900px) {
	.top-margin {
		margin-top: 6rem;
	}
}

.estimate-background {
	background: #ffffff url(../img/estimate-background.jpg) 20px 270px no-repeat;
}

/************************** CONTACT INFO *****************************/

#contact {
	background: #fff;
	color: #000;
	padding-top: 60px;
}

#contact a {
	color: #3a95e8;
}

#contact h1 {
	color: #0058a8;
}

.bottom-margin {
	margin-bottom: 80px;
}

.mail-underline {
	text-decoration: underline;
	color: #fffcdd !important;
}
.mail-underline:hover {
	color: #ffffff !important;
}
p a.mail-underline {
	color: #0000cc !important;
	text-decoration: underline;
}
p a.mail-underline:link {
	color: #0000cc;
	text-decoration: underline;
}
p a.mail-underline:visited {
	color: #800080;
	text-decoration: underline;
}
p a.mail-underline:hover {
	color: #0000ff !important;
	text-decoration: underline;
}
p a.mail-underline:active {
	color: #0000cc;
	text-decoration: underline;
}
a.phone:link {
	color: #0000cc;
	text-decoration: none;
}
a.phone:visited {
	color: #800080;
	text-decoration: underline;
}
a.phone:hover {
	color: #0000ff;
	text-decoration: underline;
}
a.phone:active {
	color: #cc0000;
	text-decoration: underline;
}

/************************** FORMS DESIGN *****************************/

.form-bg {
	background: linear-gradient(
		to right,
		hsla(0, 0%, 79%, 1),
		hsla(0, 0%, 96%, 1) 50%,
		hsla(0, 0%, 79%, 1)
	);
	border-radius: 5px;
	padding-top: 1px;
	/* margin: 6px 0 160px; /* was 6px 0 40px; */ /* top 6px, right and left margins 0, and bottom 60px */

}
.form-border {
	border: 1px solid #aaaabb;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 0 rgba(119, 119, 119, 0.75);
}
.header-bg {
	background: linear-gradient(
		to right,
		rgba(187, 0, 0, 1) 0%,
		rgba(215, 57, 37, 1) 50%,
		rgba(187, 0, 0, 1) 100%
	);
	border-radius: 5px;
	margin: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 8px 0;
}
.title-box {
	margin: 0;
	padding: 0;
}
.title-box .title {
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-shadow: 0px 0px #b32f21, 1px -1px 0 #b32f21, -1px 1px 0 #b32f21,
		1px 1px 0 #b32f21;
}

.cform-title {
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
	text-shadow: 0px 0px #b32f21, 1px -1px 0 #b32f21, -1px 1px 0 #b32f21,
		1px 1px 0 #b32f21;
}

.white-text {
	color: #fff;
}

.lock-bg {
	color: #fff;
	background: #4b4b4b;
	font-size: 0.9em;
	font-weight: normal;
	border-radius: 5px;
	padding: 10px 0;
}
.lock-icon:before {
	content: url("../img/lock.png");
}

.required {
	color: #cc0000;
}

.separator-hr {
	border: 0; /* Removes default hr styling */
	height: 1px; /* Set height of hr */
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(128, 128, 128, 0.75),
		rgba(0, 0, 0, 0)
	);
}

.input-sm {
	border: 1px outset #bbbbcc;
	border-radius: 5px 5px 5px 5px;
	font-size: 1.4rem;
	height: 30px;
	line-height: 1.5;
	min-height: inherit !important;
	padding: 5px;
	margin-top: 5px;
}

label {
	margin-top: 5px;
	font-size: 14px;
	font-size: 1.4rem;
}

input,
button,
select,
textarea {
	/* Box Model */
	border: 1px outset #bbbbcc;
	border-radius: 5px;
	padding: 35px; /* was 5px; */
	/* Typography */
	font-size: 1.4rem;
	/* Visual */
	/* if there are properties like color, background-color, they can go here */
}
select {
	appearance: menulist;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	background: #fff;
}

.button-red {
	/* Box Model */
	display: inline-block;
	width: 100%;
	padding: 10px;
	margin: 30px; /* was 30px; tested */
	border: 1px solid #bb0000;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.19);
	outline: none;
	/* Typography */
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 1.6rem;
	text-shadow: 2px 2px 3px #bb0000;
	/* Background and Transition */
	background-color: #d73925;
	transition: all 0.2s ease-in-out;
	/* Cursor */
	cursor: pointer;
}
.button-red:hover,
.button-red:focus,
.button-red:active,
.button-red:visited {
	background-color: #dd4b39;
	border-color: #bb0000;
}

/* FORM V2 - Labeled field style (estimate + contact forms) */
.form-v2 {
	padding: 8px 10px 10px;
}
.form-v2 .form-section-label {
	font-size: 14px;
	font-weight: 700;
	color: #d73925;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 8px 0 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid #ddd;
}
.form-v2 .form-row {
	display: flex;
	gap: 8px;
	margin-bottom: 0;
}
.form-v2 .form-group {
	flex: 1;
	margin-bottom: 8px;
	position: relative;
}
.form-v2 .form-group.w-auto {
	flex: 0 0 auto;
}
.form-v2 .form-group label.field-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #666;
	margin: 0 0 4px;
	line-height: 1.2;
}
.form-v2 .form-group label.field-label .req {
	color: #cc0000;
	margin-left: 1px;
}
.form-v2 .form-group input,
.form-v2 .form-group select,
.form-v2 .form-group textarea {
	width: 100%;
	height: 36px;
	font-size: 14px;
	padding: 8px;
	border: 1px solid #bbb;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.form-v2 .form-group input:focus,
.form-v2 .form-group select:focus,
.form-v2 .form-group textarea:focus {
	border-color: #d73925;
	outline: none;
	box-shadow: 0 0 0 2px rgba(215, 57, 37, 0.15);
}
.form-v2 .form-group textarea {
	height: 70px;
	resize: vertical;
}
.form-v2 .form-group select {
	appearance: menulist;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	cursor: pointer;
}
.form-v2 .req-legend {
	font-size: 11px;
	color: #888;
	margin: 12px 0 4px;
}
.form-v2 .req-legend .req {
	color: #cc0000;
}
.form-v2 .button-red {
	margin: 16px 0 10px;
	font-size: 15px;
	padding: 12px;
}
/* State field - narrower */
.form-v2 .form-group.state-field {
	flex: 0 0 60px;
}
/* Zip field */
.form-v2 .form-group.zip-field {
	flex: 0 0 80px;
}
/* Form V2 responsive */
@media (max-width: 520px) {
	.form-v2 .form-row {
		flex-direction: column;
		gap: 0;
	}
	.form-v2 .form-group {
		margin-bottom: 10px;
	}
	.form-v2 .form-group.state-field,
	.form-v2 .form-group.zip-field {
		flex: 1;
	}
	.form-v2 .form-group input,
	.form-v2 .form-group select {
		height: 42px;
		font-size: 16px;
	}
	.form-v2 .form-group textarea {
		height: 100px;
		font-size: 16px;
	}
	.form-v2 .form-group label.field-label {
		font-size: 14px;
		margin-bottom: 5px;
	}
	.form-v2 .button-red {
		font-size: 17px;
		padding: 14px;
	}
}
/* City/State/Zip row: keep inline on tablets */
@media (min-width: 521px) and (max-width: 767px) {
	.form-v2 .form-group.state-field {
		flex: 0 0 70px;
	}
	.form-v2 .form-group.zip-field {
		flex: 0 0 90px;
	}
}

/************************** PAGE-LEVEL TITLES *****************************/

.top-title {
	font-size: 16px;
	font-weight: bold;
	color: #d73925;
	font-style: normal;
	text-align: center;
	margin-bottom: 20px;
}
.section-title {
	font-size: 20px;
	font-weight: bold;
	color: #d73925;
	font-style: normal;
	text-align: center;
	margin-bottom: 20px;
}

/************************** CONTACT FORM *****************************/

.contact-form .form-group {
	margin-bottom: 12px;
}
.contact-form .form-group label {
	display: block;
	margin-bottom: 4px;
	margin-top: 0;
	font-size: 14px;
	font-weight: 700;
}
.contact-form .form-group .form-control {
	padding: 8px;
	font-size: 14px;
	border: 1px solid #bbbbcc;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
}
.contact-form .form-group textarea.form-control {
	height: 80px;
	resize: vertical;
}
.contact-form .lock-bg {
	margin-bottom: 16px;
}
.contact-form .button-red {
	margin: 0 auto 12px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
/* Contact form mobile */
@media (max-width: 520px) {
	.contact-form .form-group .form-control {
		font-size: 16px;
		height: 42px;
		padding: 8px 10px;
	}
	.contact-form .form-group textarea.form-control {
		height: 90px;
	}
	.contact-form .button-red {
		font-size: 17px;
		padding: 14px;
	}
}

/************************** INLINE STYLE REPLACEMENTS *****************************/

.form-top-margin {
	margin-top: 27px;
}
.form-offset {
	margin-top: -51px;
}
@media (max-width: 767px) {
	.form-offset {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}
.contact-form-top-margin {
	margin-top: 28px;
}
.lock-wrapper {
	margin-bottom: 12px;
}
.form-anchor {
	height: 0;
}
.title-small {
	color: #fff;
}
.honeypot {
	position: absolute;
	left: -9999px;
}
.form-messages {
	display: none;
}

/************************** /FORMS DESIGN *****************************/

.services-list ul {
	color: #333333;
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0;
	padding: 0 0 0 2em;
}
.services-list a:link {
	color: #0000cc;
	text-decoration: underline;
}
.services-list a:visited {
	color: #800080;
	text-decoration: underline;
}
.services-list a:hover {
	color: #0000ff;
	text-decoration: underline;
}
.services-list a:active {
	color: #cc0000;
	text-decoration: underline;
}

.CTA {
	font-family: "roboto_condensedregular", sans-serif;
	font-size: 2.5em;
	font-weight: 600;
	color: #bb0000;
}
.CTA-phone {
	font-family: "roboto", sans-serif;
	font-size: 3em;
	font-weight: 600;
	color: #bb0000;
	line-height: 1;
}
.CTA-phone a:link {
	color: #3377bb;
	text-decoration: none;
}
.CTA-phone a:visited {
	color: #800080;
	text-decoration: none;
}
.CTA-phone a:hover {
	color: #0000ff;
	text-decoration: none;
}
.CTA-phone a:active {
	color: #cc0000;
	text-decoration: none;
}

.satisfaction-guaranteed {
	display: block;
	margin: auto;
	width: 60%;
	max-width: 270px;
}
/* When the viewport is less than 576px, make the image smaller */
@media only screen and (max-width: 575px) {
	.satisfaction-guaranteed {
		width: 40%;
	}
}
/* When the viewport is less than 768px, make the image smaller */
@media only screen and (max-width: 767px) {
	.satisfaction-guaranteed {
		width: 45%;
	}
}
/* When the viewport is less than 992px, make the image smaller */
@media only screen and (max-width: 991px) {
	.satisfaction-guaranteed {
		width: 50%;
	}
}
/* When the viewport is less than 1200px, make the image smaller */
@media only screen and (max-width: 1199px) {
	.satisfaction-guaranteed {
		width: 55%;
	}
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* VIDEO OPTION to Replace Photo */
.vertical-video-wrapper {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden; /* Prevent scrolling */
	display: flex;
	align-items: center;
	justify-content: center;
}
.vertical-video-wrapper video {
	width: 40%; /* Set the width */
	height: auto; /* Maintain the aspect ratio */
	max-height: 90%; /* Set the maximum height */
	max-width: 100%;
	padding: 10px; /* Padding around the video */
	border: 1px solid #aaaabb;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 0 rgba(119, 119, 119, 0.75);
}
/* Media query for smartphones */
@media only screen and (max-width: 576px) {
	.vertical-video-wrapper video {
		width: 90%; /* Adjust width for small screens */
	}
}
/* Media query for tablets */
@media only screen and (min-width: 577px) and (max-width: 992px) {
	.vertical-video-wrapper video {
		width: 50%; /* Adjust width for tablets */
	}
}