/*!
 * Copyright (c) 2023 Evolved Exteriors, LLC
 * 
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 * Proprietary and confidential.
 *
 */
/***************************************************************************
 * LOAD DEPENDENCIES
\***************************************************************************/
/*
Evolved Exteriors Color Palette

Dark blue - #083160 | rgba(8,49,96,1)
Red - #da251d | rgba(218,37,29,1)
Gray - #c4c4c4 | rgba(196,196,196,1)
Lt Gray - #f8f9fa | rgba(248,249,250)
*/

/***************************************************************************
 * OVERRIDE THEME STYLES
\***************************************************************************/
/* CSS VARIABELS AND Color definition */
:root {
	/* Enforce light mode only */
	color-scheme:light only;

	/* Color Palette - Brand */
	--ee-blue:rgba(8,49,96,1);
	--ee-lightblue:rgba(15,158,213);


	--ee-red:rgba(218,37,29,1);
	--ee-darkred:rgba(180,33,21,1);

	--ee-gray:rgba(196,196,196,1);
	--ee-ltgray:rgba(248,249,250,1);

	--ee-body-text:rgba(8,49,96,1);
}

html {
	font-size:62.5%; /* 1rem = 10px */
	scroll-behavior:smooth;
}

html,
body {
	width:100%;
	margin:0;
	overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
	font-family: "Roboto", sans-serif;
	font-size:1.6rem; /* Equals 16px when 1rem = 10px */
}

main {
    position:relative;
}


h1 {

}

h2 {
	font-size:3rem;
	text-transform:uppercase;
	color:#111;
	color:var(--ee-blue);
	font-weight:600;
}

h3 {
	color:var(--ee-blue);
    position:relative;
    display:inline-block;
}

h3.underline:after {
    content: '';
    position: absolute;
    bottom: -10px; /* Adjust this value to move the line up or down */
    left: 0;
    width: 50px; /* Fixed width of the underline */
    height: 3px; /* Height of the underline */
    background-color:var(--ee-blue); /* Color of the underline */
}

p {

}

p.lead {
	font-size:2rem;
	font-weight:600;
	margin-top:10px;
}

a {
	color:var(--ee-lightblue);
	text-decoration: none;
	text-transform: none;
    transition: color 0.3s; /* Smooth transition for color change */
}

a:active,
a:hover {
	text-decoration: none;
	color:var(--ee-red);
}

a:visited {}
/****************************** HEADER **************************************/

/* PSEUDO CLASSES */
.red {
	color:var(--ee-red);
}

.white {
	color:#fff;
}

/* WEBPAGE SECTION CLASSES */
.equal-height {
    display: flex;
}

.page-section {
    padding-top:80px;
    padding-bottom:80px;
}

.page-section.white {
    background-color:#fff;
    border-top:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
}

.page-section.blue {
    background-color:var(--hm-darkblue);
    color:#fff;
}


/* CUSTOM NAVBAR */
.navbar-custom {
/*	background-color: rgba(255,255,255,0.9) !important;*/
	height: 110px;
}

header > nav.navbar {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6) !important;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
	color: rgba(255,255,255,1);
}

.navbar-custom .navbar-nav {
	position: relative;
	top: 5px;
}

.navbar-custom .navbar-nav .nav-link {
	font-weight: bold;
	padding: 8px;
	padding-right: 25px;
	/* letter-spacing: 1.5cap; */ /* Quarter the font's capital letter height */
	/* letter-spacing: 1.5px; */ /* Quarter the font's capital letter height */
}

/* end dialog box styles */
.navbar-custom .nav-link-ghost-btn {
	outline: 2px solid rgba(193,137,56,0.8);
	padding: 10px !important;
}

.navbar-custom .nav-link-ghost-btn:hover {
	outline: 2px solid rgba(193,137,56,1);
	background-color:rgba(193,137,56,1);
}

.navbar-custom .dropdown-menu {
	background-color:rgba(13,13,43, 0.9);
}

.navbar-custom .dropdown-menu .dropdown-item {
	border:1px solid rgba(255,255,255,0.075);
	padding-top:15px;
	padding-bottom:15px;
	text-wrap:no-wrap;

}
.navbar-custom .dropdown-menu .dropdown-item:hover {
	background-color:rgba(0,0,0,1);
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {

}

/* OFFCANVAS NAVIGATION BS4 EXPERIMENTAL (?) */
nav.navbar {
	padding-bottom:20px;
/*
	border-bottom:1px solid rgba(0,0,0,0.1);
	box-shadow:0px 0px 10px rgba(0,0,0,0.2);*/
}

img#logo-header {
	height:auto;	
	width:225px;
	max-width:100% !important;
	position:relative;
	top:3px;
}

.nav-scroller {
	position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
}

.nav-scroller .nav {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
	color: rgba(255, 255, 255, .75);
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
	padding-top: .75rem;
	padding-bottom: .75rem;
	font-size: .875rem;
	color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

/* NAVIGATION */
div.navbar-collapse ul.navbar-nav li {
	text-align: center;
}

#secondary-nav {
    font-weight: bold;
    font-size:11px;
    text-transform: uppercase;
    padding-left:5vw;
    padding-right:5vw;
    top:5px;
}

#secondary-nav-inner {
    position:relative;
    left:3px;
}

nav button.navbar-toggler {
    position: relative;
    top:0px;
}

header {
	border-top:6px solid var(--ee-blue);
	position:relative;
}

header .header-bar {}

.header-bar {
	position: relative; /* Needed for absolute positioning of children */
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1.3rem;
}

header .logo-container {
	width: 100%; /* Ensure the container spans the full width */
	display: flex;
	justify-content: center; /* This centers the logo horizontally */
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom:10px;
}

#header-bar #btnCtaContact {
	display:inline-block;
	margin-top::20px;
	margin-bottom:1rem;
	font-weight:700;
	font-size:1.2rem;
	background-color:var(--ee-red);
	color:#fff !important;
    transition:background-color 0.5s;
    border:1px solid var(--ee-red);
}

#header-bar #btnCtaContact:hover {
	background-color:var(--ee-darkred);
}

#header-phone {
	position:relative;
	top:5px;
	display:inline-block;
	margin-bottom:10px;
	margin-right:10px;
	font-weight:bold;
}

#hero-content {
    z-index:2;
}

#hero-cta-btn {
    margin-top:30px;
}


.text-emphasis {
    font-weight:700;
    border-bottom:5px solid var(--hm-blue); 
    letter-spacing:0.1rem;
    padding-bottom:2px;
}

#logo-header {
	max-width: 200px;
}

#right-header {
	position: absolute; /* Position the icons independently of the logo */
	right: 1rem; /* Align to the right, with a bit of margin */
	top: 40%; /* Align vertically to the center */
	transform: translateY(-50%); /* Offset by half its height to truly center it */
	text-align: right;
	padding-top: 20px;
	padding-right: 40px;
}

.social-icons {
	font-size: 1.5rem; /* Adjust icon size as needed */
}

.social-icons > ul {
	list-style: none;
}

.social-icons > ul li {
	display: inline-block;
	list-style-type: none;
	margin-left: 20px;
}

#social-icons ul li a {
	color: var(--ee-blue);
}

#social-icons ul li a:active,
#social-icons ul li a:hover {
	color: var(--ee-red);
}

#social-icons ul li .fa-brands {
	font-size: 3.2rem;
}

#header-bar nav {
	margin-top: 40px;
}

header .nav-item {
	padding: 0 15px; /* Adjust spacing around the link text */
}

header .nav-item > .nav-link {
	color:var(--ee-blue);
	font-weight: 900;
	text-transform: uppercase;
	border-top:4px solid transparent;
	font-size:19px;
}

header .nav-item > .nav-link:hover {
	color: var(--ee-lightblue);
	border-top:4px solid var(--ee-red) !important;
}

header .nav-item:not(:last-child)  {
	border-right: 1px solid rgba(0,0,10,0.15); /* Light grey border */
}

/* Styling the navbar toggler button */
.navbar-toggler {
    border: none; /* Removes the default border */
    outline: none; /* Removes the outline on focus for accessibility, optional */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optional: Add a hover effect */
.navbar-toggler:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Slight background on hover, adjust as needed */
}

.navbar-toggler .ms-2 {
	position:relative;
	top:2px;
}

#navServicesDropdown .dropdown-item {
	text-align:left;
	font-size:1.5rem;
	font-weight:500;
	padding:10px 15px;
	border-bottom:1px solid #d9d9d9;
	min-width:160px;
}

#navServicesDropdown .dropdown-item:hover {
	background-color:var(--hm-blue-subtle);
}

/* END HEADER NAVIGATION STRUCTURE */
/****************************** END HEADER **************************************/

/* BUTTONS */
.btn-lg {
	font-size:2.2rem !important;
}

.btn-outline-primary {
    color: #000; /* Primary color */
    border-color: #000;
    text-transform:uppercase;
    border-radius:0px;
    font-size:18px;
    font-weight:600;
    padding:10px 20px 10px 20px;
    border-width:2px;
}

.btn-outline-primary:hover {
    color: #fff; /* White text */
    background-color: #000; /* Primary background */
    border-color: #000; /* Primary border */
}

.btn-outline-primary.white {
	border-color:#fff;
	color:#fff;
}

.btn-outline-primary.white:hover {
	border-color:#fff;
	background-color:rgba(255,255,255,0.9);
	color:#000;
}

/* Remove horizontal padding from the image container */
.no-gutters {
	padding-right: 0;
	padding-left: 0;
}

/* Ensure the image fills the column */
.img-full-width {
	width: 100%;
	height: auto; /* Adjust height as necessary */
	object-fit: cover; /* Cover the area of the column */
}

footer {
	font-size:1.3rem;
	padding:5rem;
	color:#fff;
	background-color:var(--ee-blue);
	text-align:center;
}


/* FONT DECLARATIONS 
	Font: Roboto
*/
.roboto-thin {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.roboto-thin-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.roboto-light {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.roboto-light-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-regular-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-medium-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-bold-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.roboto-black {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.roboto-black-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: italic;
}

.btn {
	border-radius:4px;
	font-size:1.2rem;
	margin-top:20px;
	margin-bottom:20px;
}

.btn-primary {
	font-size:1em;
	background-color: var(-ee-blue); /* Blue  background on hover/active/focus */
	border-color: var(ee-blue); /* Blue border on hover/active/focus */
	color: #fff; /* White text */
	transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transition for background, border, and text color */
	font-weight:600;
	padding-left:2rem;
	padding-right:2rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
	background-color: rgba(218, 37, 29, 1) !important; /* Red background on hover/active/focus */
	border-color: rgba(218, 37, 29, 1) !important; /* Red border on hover/active/focus */
	color: #fff; /* Text color remains white for better readability */
}
/* For the focus state, to change the box-shadow color */
.btn-primary:focus {
	box-shadow: 0 0 0 0.25rem rgba(218, 37, 29, 0.5); /* Red glow for focus */
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(175, 30, 24, 1); /* Darker red */
  --bs-btn-border-color: rgba(175, 30, 24, 1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(218, 37, 29, 1); /* Bright red */
  --bs-btn-hover-border-color: rgba(218, 37, 29, 1);
  --bs-btn-focus-shadow-rgb: 218, 37, 29; /* Adjusted to match the hover color */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(140, 20, 17, 1); /* Even darker red for active state */
  --bs-btn-active-border-color: rgba(140, 20, 17, 1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(175, 30, 24, 1);
  --bs-btn-disabled-border-color: rgba(175, 30, 24, 1);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transition */
}

/* If you also want to change the box shadow color when the button is focused */
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(218, 37, 29, 0.5); /* Adjusted to match the hover color */
}

.btn-default {
	font-size:1em;
	background-color: rgba(8, 49, 96, 1); /* Dark blue background */
	border-color: rgba(8, 49, 96, 1); /* Dark blue border */
	color: #fff; /* White text */
	transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transition for background, border, and text color */
	font-weight:600;
	padding-left:2rem;
	padding-right:2rem;	
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.show > .btn-default.dropdown-toggle {
  background-color: rgba(218, 37, 29, 1); /* Red background on hover/active/focus */
  border-color: rgba(218, 37, 29, 1); /* Red border on hover/active/focus */
  color: #fff; /* Text color remains white for better readability */
}

/* For the focus state, to change the box-shadow color */
.btn-default:focus {
  box-shadow: 0 0 0 0.25rem rgba(218, 37, 29, 0.5); /* Red glow for focus */
}

/* IMPORTED FONTS */
/*
@font-face {
    font-family: giorgioBold;
    src: url(/assets/fonts/giorgio_sans/giorgio_sansbold.ttf);
}*/

/*AVENIR NEXT https://www.cdnfonts.com/avenir-next-lt-pro.font*/
/* We now import directly in dochead
@font-face {
    font-family: avenirNextBold;
    src: url(/assets/fonts/avenir_next/avenirnextltprobold_0.ttf);
}*/

.form-control {
	--bs-border-radius:1rem
}

.bold {
	font-weight:bold !important;
}

/***************************** EXTERNAL DEPENDENCIES ***********************************\
 * 
 * END */
/*********** NPROGRESS **********/
/* Make clicks pass-through */
#nprogress {
	pointer-events: none;
}

#nprogress .bar {
	background: var(--ee-darkred);
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	width: 100%;
	height:6px;
}

/* Fancy blur effect */
#nprogress .peg {
	display: block;
	position: absolute;
	z-index: 999999;
	right: 0px;
	width: 100px;
	height: 100%;
	opacity: 1;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	  -ms-transform: rotate(3deg) translate(0px, -4px);
	      transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
	display: block;
	position: fixed;
	z-index: 999999;
	top: 15px;
	right: 15px;
}

#nprogress .spinner-icon {
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	z-index: 999999;
	border: solid 2px transparent;
	border-top-color: var(--ee-darkred);
	border-left-color:var(--ee-darkred);
	border-radius: 50%;
	-webkit-animation: nprogress-spinner 400ms linear infinite;
	animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
	overflow: hidden;
	position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
	position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*********** END NPROGRESS CUSTOMIZATION **********/
.top-border-red { /* centered version */
	position: relative; /* Needed for absolute positioning of pseudo-element */
	text-align: center; /* Center the text */
	margin-top: 20px; /* Add space above h2 for the top border */
}

.top-border-red::before {
	content: ''; /* Pseudo-element content */
	position: absolute; /* Absolute positioning */
	top: -12px; /* Position at the top of the h2 element */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%); /* Shift to the left by half of its width to truly center it */
	width: 100px; /* Width of the border */
	height: 6px; /* Thickness of the border */
	background-color:var(--ee-red); /* Color of the border */
}

.top-border-red-left {
	position: relative; /* Needed for absolute positioning of pseudo-element */
	text-align: left; /* Center the text */
	margin-top: 20px; /* Add space above h2 for the top border */
	display:inline;
}

.top-border-red-left::before {
	content: ''; /* Pseudo-element content */
	position: absolute; /* Absolute positioning */
	top: -12px; /* Position at the top of the h2 element */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%); /* Shift to the left by half of its width to truly center it */
	width: 100px; /* Width of the border */
	height: 6px; /* Thickness of the border */
	background-color:var(--ee-red); /* Color of the border */	
}

/*
https://brizzo.net/tips/hide-recaptcha-v3-badge/
*/
/* hide grecaptcha-badge by default, enable on page-by-page basis */
.grecaptcha-badge { opacity:0; }

/* BBB clean up external code display to present better */
#bbb-badge {
	bottom:20px !important;
}

#bbb-badge #bbb-badge-img img  {
	width:100px;
	height:auto;
}

#social-icons-footer {
	font-size: 1.5rem; /* Adjust icon size as needed */
}

#social-icons-footer > ul {
	list-style:none;
	padding-left:0px;
}

#social-icons-footer > ul li {
	display:inline-block;
	list-style-type:none;
}

#social-icons-footer ul li a { 
	color:#fff !important;
	margin-left:10px;
	margin-right:10px;
}

#social-icons-footer ul li a:active,
#social-icons-footer ul li a:hover {
	color:var(--ee-red) !important;
}

#social-icons-footer ul li .fa-brands {
	font-size:3.2rem;
}

#logo-footer {
	display:block;
	margin:auto;
	margin-bottom:30px;
	max-width:200px;	
}

.legal-text {
	font-size:12px;
	font-style:italic;
	opacity:0.8;
	text-align:left !important;
	font-weight:normal;
	display:block;
	margin-top:10px;
}

/* Quick Contact Form */
#frmQuickContact label {
	display:block;
	text-align:left;
}

.quick-contact-header {
	display:none;
}

/* Basic reset for list styles */
.image-box {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    margin-bottom:20px;
}

.image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* End Quick Contact Form */

/* SUBPAGES */

/* HOMEPAGE */
html#home .quick-contact-header {
	display:block;
	border:1px solid transparent; 
	border-radius:4px;
	background-color:var(--ee-lightblue); 
	color:#fff; padding:10px;
	margin-bottom:15px;	
}

/* Hero container */
html#home #hero {
    position: relative;
    width: 100%;
    min-height: 60vh; /* Full viewport height or more based on content */
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    padding: 2rem 0;
}

/* Hero video styling */
html#home #hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the background area */
    z-index: 1;
}

/* Video overlay */
html#home #video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 10, 0.3); /* Dark overlay */
    z-index: 2;
}

/* Content styling */
html#home #hero-content {
    position: relative;
    z-index: 3; /* Content on top of video and overlay */
    color: #fff;
    max-width: 1200px;
    width: 100%;
    padding: 1rem;
}

/* Row centered */
html#home #hero-content .row {
    display: flex;
    justify-content: center; /* Center the two columns */
    align-items: center; /* Vertically center the columns */
}

/* Headline text */
html#home #hero-content h1 {
	font-size:3.6rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	text-transform:none;
}

html#home #hero-content p {
	font-size:2rem;
}

/* Ensure the form adapts */
html#home #frmQuickContactContainer {
    padding: 15px;
    background-color: rgba(8, 49, 96, 0.8);
    border-radius: 8px;
}


/* ORIG STYLES BELOW */
/*
#video-overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50vh;
	background-color:rgba(8,49,96,0.5);
	background-color:rgba(0,0,10,0.3);
	z-index:1;
}*/

html#home h1 {
	font-size:3.3rem;
	text-transform:uppercase;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* x-offset, y-offset, blur-radius, color */
}

html#home .btn {
	font-size:1.8rem;
}

html#home #hero-content h1 > span {
	font-style:italic; 
	color:#fff; 
	background-color:rgba(8,49,96,0.75); 
	padding-left:10px; 
	padding-right:10px;
	letter-spacing:0.1em;
}

html#home #hero-content a.btn-primary {
	margin-top:30px;
}

html#home .angled-lines-background {
	background-image: repeating-linear-gradient(
	-45deg, /* Angle of the lines */
	#ccc, /* Color of the lines */
	#ccc 2px, /* Width of the lines */
	#fff 2px, /* Width of the first gap */
	#fff 10px /* Width of the second gap */
	);
	width: 100%; /* Adjust width as needed */
	height: 200px; /* Adjust height as needed */
}

html#home .page-section {
	padding-top:80px;
	padding-bottom:80px;
}

html#home h2.red-bg {
	background-color:var(--ee-red); 
	color:#fff; 
	display:inline; 
	padding-left:5px; 
	padding-right:5px;	
}

html#home h2.blue-bg {
	background-color:var(--ee-blue); 
	color:#fff; 
	display:inline; 
	padding-left:5px; 
	padding-right:5px;
}


html#home h2.red-bg + p,
html#home h2.blue-bg + p {
	font-weight:600;
	font-size:1.3em;
	margin-top:15px; 
	margin-bottom:20px;
}

html#home .row-img {
	padding: 0; /* Remove padding if needed */
}

}

/* Extra styles for text alignment and spacing */
html#home .text-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 15px;
	padding-right: 15px;
}

html#home .twopart-rightcol-col1 {
	box-sizing:border-box !important; 
	font-stretch:100%; 
	letter-spacing:normal; 
	line-height:24px; 
	max-width:100% !important; 
	position:relative; 
	left:-15px;
}

html#home .twopart-rightcol-col1 h2 {
	margin-top:5px;
}

/* PAGE: HOME */
html#home #QualityCraftsmanship {
	margin-top:20px;
	margin-bottom:20px;
}

html#home .twopartlayout {
	overflow-x:hidden;
}

html#home #TrustedPartnerHomeImprovement .container-fluid > .row:first-child > div:first-child {
	background: linear-gradient(
		rgba(255, 37, 29, 0.3), /* Red overlay color */
		rgba(255, 37, 29, 0.3) /* Red overlay color */
	),
	url('/assets/img/stock/istockphoto-1782060523-1024x1024.jpg');

	/* this overrides */
	background-image:url('/assets/img/stock/iStock-131064366.opt.jpg'); 
	background-repeat:no-repeat; 
	background-size:cover; 
	background-position:center;		
}

html#home #TrustedPartnerHomeImprovement .row > div:first-child > div {
/*	height:575px;*/
}

html#home div#col-trusted-partner {
	left:0px;
	background-color:var(--ee-red);
	background-color:var(--ee-ltgray);
	color:#fff;
	color:var(--ee-body-text);
}

html#home div#col-trusted-partner h2 {
	margin-bottom:30px;
}

html#home div#col-trusted-partner > div {
	min-height:575px; 
	display:flex; 
	align-items:center; 
	justify-content: center;	
}

html#home .twopartlayout h2 {
	margin-bottom:30px;
}

html#home .h-red-bg {
	background-color:var(--ee-red);
	color:#fff !important;
	display:inline-block
	margin-bottom:330;
}

html#home .page-section-ltgray {
	background-color:var(--ee-ltgray);
}

/** Services section */
html#home .list-group-item:hover {
	background-color:#fcfcfc;
	cursor:pointer;
	cursor:hand;
}

html#home #Services h2 {
    font-size: 2.6rem;
}

html#home #Services h2 + p {
    margin-bottom: 40px;
}

html#home #right-col-img {
	position:relative; left:15px; background-image:url('/assets/img/roof-outline.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center;
}

html#home #left-col-quality {
	min-height:350px; 
	display:flex; 
	align-items:center; 
	justify-content: center;	
}

html#home #enhancify-wrapper {
	margin-top:50px;
	margin-bottom:50px;
}

/* SERVICE CARDS */
html#home .service-cards .service-card {
    margin-bottom: 30px;
    text-align: center;
    overflow: hidden;
}

html#home .service-cards .card-img-container {
    overflow: hidden; /* Contain the zoom effect */
    height: 300px; /* Set height to match the image */
}

html#home .service-cards .card-img-top {
    height: 100%; /* Fill the container */
    width: 100%; /* Fill the container */
    object-fit: cover; /* Maintain aspect ratio */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the zoom */
}

html#home .service-cards .card-img-container:hover .card-img-top {
    transform: scale(1.1); /* Zoom the image on hover */
}

html#home .service-cards h5 {
	margin-top:10px;
	font-size:24px;
	color:var(--ee-lightblue);
}

html#home .service-cards p.card-text {
	padding-bottom:25px;
}

html#home .service-cards .service-card {
    margin-bottom: 30px;
    text-align: center;
    overflow: hidden;
    position: relative; /* Ensure that the overlay is positioned correctly */
}

html#home .service-cards .card-img-container {
    overflow: hidden; /* Contain the zoom effect */
    height: 300px; /* Set height to match the image */
    position: relative;
}

html#home .service-cards .card-img-top {
    height: 100%; /* Fill the container */
    width: 100%; /* Fill the container */
    object-fit: cover; /* Maintain aspect ratio */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the zoom */
}

html#home .service-cards .card-img-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8,49,96,0.4); /* Blue overlay with 50% opacity */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth transition for the overlay */
    z-index: 1; /* Ensure the overlay is on top of the image */
}

html#home .service-cards .card-img-container:hover::before {
    opacity: 1; /* Show the overlay on hover */
}

html#home .service-cards .card-img-container:hover .card-img-top {
    transform: scale(1.1); /* Zoom the image on hover */
}

html#home .service-cards .card-body {
	background-color:var(--ee-blue);
	color:#fff;
}

html#home #contact-consent {
	margin:auto;
	display:block;
	max-width:90%;
}

html#home .image-container-test {
	  position: relative;
	  display: inline-block; /* Make sure the container wraps tightly around the image */
}

html#home .image-container-test img {
	display: block;
	max-width: 100%; /* Responsive image */
	box-shadow:0px 0px 15px rgba(0,0,0,0.5);
}

html#home .image-container-test::after {
	content: "";
	position: absolute;
	top: -10px; /* Offset from the top */
	right: -10px; /* Offset from the right */
	width: 150px;  /* Width of the red box */
	height: 20px; /* Height of the red box */
	background-color: var(--ee-red); /* The color of the box */
	border-radius:2px;
	opacity:0.95;
}
/* END HOMEPAGE */

/* CONTACT PAGE */
html#contact #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));

    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 15vh;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#contact #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/stock/iStock-1475121450.opt.jpg');
    background-size: cover;
    background-position:top !important;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

#frmContactContainer,
.form-box-container {
	background-color:rgba(160,160,160,0.1);
	border:1px solid #d9d9d9;
	border-radius:5px;
	padding:20px;
	font-weight:bold;
	box-shadow:0px 0px 15px rgba(0,0,0,0.5);

	background-color:var(--ee-blue);
	color:#fff;
}

#frmContactContainer .form-control,
#frmContactContainer .form-select
{
	margin-bottom:20px;
}

.form-control,
select.form-select {
	font-size:1.6rem;
}

span.req {}

span.req::after {
	content:'*';
	color:red;
}

#subhero {
	min-height:50vh;
}

#subhero #hero-content h1 {
	text-transform:uppercase;
	font-size:6rem;
}

#subhero #hero-content h2 {
	font-size:24px;
}

/* SIDING PAGE */
html#siding #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#siding #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/RoofingPageBg.jpg');
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

/* ROOFING PAGE */
html#roofing #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#roofing #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/Roofing-Page-Bg-Evolved.jpg'); /* @TODO: is used?? */
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

html#roofing .row.roofing-system {
    margin-bottom:100px;
    margin-top:20px;
    padding-top:40px;
    border-top:1px solid #d9d9d9;
}

html#roofing .row.roofing-system h3 {
    font-size:33px;
}




/* FINANCING PAGE */
html#financing #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#financing #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/stock/Financing-iStock-1163500892.jpg');
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

html#siding #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#siding #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/gallery/siding/evolved-siding-1.jpg');
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

/* Optional: Add a dark overlay to ensure text readability */
/*
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}*/

/* Ensure the text and content are above the overlay */
html#siding #hero-content {
    z-index:2;
}


/* Adjust padding on smaller screens */
@media (max-width: 768px) {
    .container-split-img-txt > .row > .col-6 {
        padding: 2rem; /* Smaller padding for mobile */
    }
    /* Stack columns vertically on mobile */
    .equal-height {
        flex-direction: column;
    }
}

html#siding .row.siding-system {
    margin-bottom:100px;
    margin-top:20px;
    padding-top:40px;
    border-top:1px solid #d9d9d9;
}

html#siding .row.siding-system h3 {
    font-size:33px;
}


/* GUTTERS PAGE */
html#gutters #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#gutters #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/gutters-evolved-ext.jpg');
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

.row.gutter-system {
    margin-bottom:100px;
    margin-top:20px;
    padding-top:40px;
    border-top:1px solid #d9d9d9;
}

.row.gutter-system h3 {
    font-size:33px;
}
/* END GUTTERS PAGE */

/* STORM DAMAGE PAGE */
html#stormdamage #subhero {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

html#stormdamage #subhero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/storm-damage-evolvedext.jpg');
    background-size: cover;
    background-position: middle;
    background-repeat: no-repeat;
    backdrop-filter: blur(1000px); /* Apply a blur filter */
    z-index: -1;
}

ol {
	margin-left:0px;
	padding-left:0px;
}

/* Custom styles for accordion buttons */
.accordion-button {
	font-size:2rem;
}
.accordion-button:not(.collapsed) {
    background-color:var(--ee-red); /* Custom background color */
    color: white; /* Text color */
    border: none; /* Optional: remove border */
}

/* Style for collapsed accordion buttons */
.accordion-button.collapsed {
    background-color:var(--ee-blue); /* Slightly darker background color for collapsed state */
    color: white; /* Text color for collapsed state */
}

/* Optional: Remove the default box-shadow */
.accordion-button:focus {
    box-shadow: none;
}

/* Styles for accordion content */
.accordion-body {
    font-size: 1.6rem; /* Adjust body text size as needed */
}

#faqAccordion1 .accordion-button::after,
#faqAccordion2 .accordion-button::after
{
    /* Override the default arrow icon */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 16 16"><path d="M1.5 2.5a.5.5 0 0 1 .8-.4L8 7.059l5.7-5.059a.5.5 0 1 1 .6.8l-6 5.25a.5.5 0 0 1-.6 0l-6-5.25a.5.5 0 0 1-.2-.4z"/></svg>'); /* SVG path for the arrow icon */
    filter: none; /* Remove any existing color filters */
}

header .navbar-nav .nav-item.active .nav-link {
	color:var(--ee-lightblue) !important;
}

footer nav ul {
	list-style:none;
	padding-left:0px;
	margin-left:0px;
}

footer nav ul li {
	list-style:none;
	display:inline-block;
	border-right:1px solid rgba(255,255,255,0.2);
	padding-right:10px;
	padding-left:10px;
	font-size:2rem;
}

footer nav ul li:last-child {
	border-right:none;
}

footer nav ul li a.nav-link:hover,
footer nav ul li a.nav-link:active {
	color:var(--ee-red);
}

#expert-answers-to-customer-questions {
	margin:auto;
	width:80%;
	color:#fff;
	background-color:var(--ee-red);
	padding-top:40px;
	padding-bottom:40px;
	color:#fff;
	margin-bottom:40px;
}

#expert-answers-to-customer-questions a:not(.btn) {
	color:#fff;
	font-weight:bold;
	border-bottom:1px dotted #fff;
}

#expert-answers-to-customer-questions p > span {
	font-size:2rem;
}

.page-section-ltgray {
	background-color:rgba(0,0,0,0.03);
}

/* RESPONSIVE STYLES */

/* Small devices (landscape phones, 576px and below) */
@media (max-width: 767.98px) { /* Targets screens smaller than 768px, typically smartphones */
	header .logo-container {
		justify-content: left !important;
	}

	#header-bar #btnCtaContact {
		margin-top:40px;
	}

	img#logo-header {
		max-width: 150px !important;
	}

	#right-header {
		 /* Align to the right, with a bit of margin */
		padding-right:5px;
	}

	html#home .header-bar {
		position: relative; /* Needed for absolute positioning of children */
		padding: 1rem 0.5rem;
	}

	html#home .service-cards h3 {
		font-weight:bold;
		font-size:22px;
	}

	html#home #hero-content a.btn-primary {
		font-size:18px;
		margin-top:20px;
	}

    /* Styles for small devices (landscape phones) */
    html#home img#gaf-certified {
    	max-width:70% !important;
    	margin:auto;
    }

    html#home p#p-select-us {
    	font-size:18px;
    }

	html#home #logo-footer {
		max-width:160px;
	}

	html#home .page-section {
		padding-top:40px;
		padding-bottom:40px;
	}

	html#home #right-col-img {
		left:0px;
	}

	html#home #left-col-quality {
		height:auto;
		margin-top:40px;
	}

	html#home .accordion-button {
		font-size:1.5rem;
	}

	html#home .accordion-body > p {
		font-size:1.3rem;
	}
}

html#home #hero-content p.lead {
	font-size:1.5rem;
	padding-left:2rem;
	padding-right:2rem;
}



/* DESKTOP FIRST MEDIA QUERIES:

When using these media queries in a desktop-first approach, you would define your default styles 
for larger screens first and then use the media queries to adjust the styles for smaller screens.

*/

/* XXL devices (very large desktops, 1400px and up) */
@media (max-width: 1400px) { 
	#subhero {
	    min-height: 40vh !important;
	}

	#subhero #hero-content h1 {
		font-size:5rem;
		margin-bottom:20px;
	}

	#subhero #hero-content h2 {
		font-size:2.4rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) { 
	#header-bar #btnCtaContact {
		display:block;
		margin-top::20px;
		font-weight:700;
		font-size:1.2rem;
	}

	#header-phone {
		position:relative;
		display:inline-block;
		margin-bottom:10px;
		margin-right:10px;
	}

	#right-header {
		margin-top:15px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) { 
	#subhero #hero-content h1 {
		font-size:3.6rem;
	}

	#subhero #hero-content h2 {
		font-size:2rem;
	}

	#expert-answers-to-customer-questions p > span {
		font-size:1.6rem;
	}

    /* Styles for medium devices (tablets) */
	html#home .text-section {
		padding-left: 15px;
		padding-right: 15px;
	}
}


/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.99px) { 
	.logo-container {
		justify-content: flex-start; /* Aligns the logo to the left */
	}

	#logo-header {
		max-width:120px;
	}

	html#home #hero {
	    min-height: 40vh; /* Full viewport height or more based on content */
	}

    .container-split-img-txt > .row > .col-6 {
        padding: 2rem; /* Smaller padding for mobile */
    }

    /* Stack columns vertically on mobile */
    .equal-height {
        flex-direction: column;
    }

	#subhero {
	    min-height: 30vh !important;
	}

	html#home #left-col-quality {
		min-height:300px !important; 
		padding-bottom:50px;
	}
}

/* Media query for high-DPR devices such as iPad Mini
	(ipad mini actual des is 1536x2048 but with DPR of 2, the effective CSS resolution is 768x1024
	 and could dip belowdue to rounding errors or scaling 
 */
@media screen and (max-width: 767.99px), 
       screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) 
{

	#header-phone {
		position:relative;
		display:inline-block;
		margin-bottom:10px;
		margin-right:10px;
	}

	#expert-answers-to-customer-questions {
		width:90;
	}
}

/* iPad Air styles */
@media screen and (min-width: 820px) and (max-width: 1180px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	#header-phone {
		position:relative;
		display:block;
		margin-bottom:10px;
		margin-right:10px;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
	#header-bar #btnCtaContact {
		display:block;
		margin-top:20px;
		font-weight:700;
		font-size:1.2rem;
	}

	#header-phone {
		position:relative;
		top:30px;
		display:inline-block;
		margin-bottom:10px;
		margin-right:10px;
	}

	#expert-answers-to-customer-questions {
		width:95%;
	}

	#subhero #hero-content h1 {
		font-size:2.4rem;
		margin-bottom:20px;
		margin-left:10px;
		margin-right:10px;
	}

	#subhero #hero-content h2 {
		font-size:1.4rem;
	}
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query necessary for this as it's the default */


/* MOBILE FIRST MEDIA QUERIES:

When using these media queries in a desktop-first approach, you would define your default styles 
for larger screens first and then use the media queries to adjust the styles for smaller screens.

*/

/* Extra small devices (portrait phones, less than 576px) */
/* No media query necessary for this as it's the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	#hero-content h1 {
		font-size:4rem;
	}

	#hero-content p.lead {
		font-size:1.7rem !important;
		padding-left:2rem;
		padding-right:2rem;
	}

	.btn {
		font-size:2rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#hero-content p.lead {
		font-size:1.7rem !important;
		padding-left:2rem;
		padding-right:2rem;
	}

	h1 {
		font-size: 3.4rem; /* Larger font size for medium screens */
	}

	h2 { 
		font-size:3rem;
	}

	#frmContact button[type=submit] {
		font-size:2.2rem;
	}	
}

/* Adjustments for devices with a DPR of 2 and width of 720 CSS pixels */

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi), 
       only screen and (min-resolution: 2dppx),
       (min-width: 720px) and (max-width: 719px) {
    /* Styles for high-DPI (Retina) display with 720x480 CSS pixels */

	#hero-content h1 {
		font-size:2.8rem;
	}

	#hero-content p.lead {
		font-size:1.8rem;
	}

	#hero-content a.btn-primary {
		font-size:24px;
		margin-top:30px;
	}
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	h1 {
		font-size: 4rem; /* Even larger font size for large screens */
	}

	#hero-content p.lead {
		font-size:2.4rem;
	}

	#btnCtaContact {
		font-size:1.6rem !important;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#hero-content p.lead {
		font-size:2rem !important;
	}

	h1 {
		font-size: 6rem; /* Extra large font size for extra large screens */
	}

    .svc-img {
        max-height:600px;
    }
}

/* XXL devices (very large desktops, 1400px and up) */
@media (min-width: 1400px) { 
	#hero-content h1 {
		font-size:3rem;
	}

	#hero-content p.lead {
		font-size:2.2rem !important;
	}

	#btnCtaContact {
		font-size:1.7rem !important;
	}

	#subhero .btn {
		font-size:2.7rem !important;
	}
}