html {
scroll-behavior: smooth;
}
html {
--size: 14px!important;
position: inherit;
}
.site{
max-width: 1700px;
margin: auto;
overflow: hidden;
box-shadow: 0em 0em 2em #e0e5ff;
}
.show-for-small-only{
display: none!important;
}
a {
-webkit-transition: color .4s ease 0s;
-moz-transition: color .4s ease 0s;
-o-transition: color .4s ease 0s;
transition: color .4s ease 0s;
}
.hide{
display: none;
}
.modal-dialog {
max-width: 660px;
margin: 12.75rem auto!important;
z-index: 99999;
}
.modal-backdrop{
z-index: 1!important;
}
.schema a{
text-decoration: none;
}
body .btn-primary, body .btn-secondary{
border: 0;
text-transform: uppercase;
padding: .75em 1.8em;
margin: 1em auto 0 auto;
letter-spacing: .04em;
display: block;
position: relative;
color: #ffffff!important;
font-weight: 800;
font-size: 1em;
border-radius: 3em;
text-decoration: none;
box-shadow: 0 .2em .6em rgba(0,0,0,.2);
transition: all .3s ease-in-out;
}
body .btn-primary:hover, body .btn-secondary:hover{
transform: translateY(-2px);
box-shadow: 0 .4em 1em rgba(0,0,0,.32);
}
body .btn-primary:active, body .btn-secondary:active{
transform: translateY(0);
box-shadow: 0 .2em .6em rgba(0,0,0,.2);
}
.btn-primary.content-btn{
max-width: 500px;
margin-left: 0;
}
body .btn-secondary{
font-weight: 900;
}
.post-thumbnail img{
position: relative;
padding: 0!important;
margin: auto;
display: block;
}
.post-thumbnail{
overflow: hidden;
margin-top: 1em;
}
body .button:focus, body .button:hover {
color: #fefefe;
}
.single-blog img{
padding: 5%;
}
.single-blog .entry-title{
font-size: 2em;
color: black;
}
.single-blog .entry-meta{
position: relative;
padding: 2%;
background: #f4f4f4;
border-left: .5em solid #f43b3b;
}
.single-blog .nav-links a{
display: block;
background: #f43b3b;
color: white;
transition: all .3s ease-in-out;
padding: 2% 5%!important;
margin-bottom: 7%;
}
.single-blog .nav-links a:hover{
background: black!important;
}
a[href^="tel"]{
color:inherit;
text-decoration:none;
margin-bottom: 3%;
display: block;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #ededd!important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #ededd!important;
}
@font-face {
font-family: 'icomoon';
src: url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.eot?kst8ny');
src: url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.eot?kst8ny#iefix') format('embedded-opentype'),
url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.woff2?kst8ny') format('woff2'),
url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.ttf?kst8ny') format('truetype'),
url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.woff?kst8ny') format('woff'),
url('/wp-content/themes/plumberseo-bootstrap/fonts/ac/icomoon.svg?kst8ny#icomoon') format('svg');
font-weight: normal;
font-style: normal;
/* Was "block": hides every icon (nav arrows, phone/check icons, carousel
controls, etc.) for up to 3s if this font file is slow to arrive,
which can read as missing UI. "swap" shows a blank space immediately
and swaps the icon glyph in the instant the font loads instead -
same end result, no render-blocking wait. */
font-display: swap;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-phone:before {
content: "\f095";
}
.icon-tools-hales:before {
content: "\e92c";
}
.icon-time-db:before {
content: "\e99d";
}
.icon-facebook-square:before {
content: "\f082";
}
.icon-calendar1:before {
content: "\e955";
}
.icon-phone:before {
content: "\f095";
}
.icon-mp-shield1:before {
content: "\e9c7";
}
.icon-check-circle:before {
content: "\f058";
}
.icon-home2:before {
content: "\e946";
}
.icon-local-owned-db:before {
content: "\eb06";
}
.icon-connet-quality:before {
content: "\eb62";
}
.icon-cc-money:before {
content: "\e9a0";
}
.icon-bb-thumbsup:before {
content: "\e977";
}
.icon-local_fire_department:before {
content: "\e9ce";
}
.icon-snow:before {
content: "\eb1b";
}
.icon-group1:before {
content: "\f0c1";
}
.icon-cooper-badge:before {
content: "\e9aa";
}
.icon-water-leaks-icon:before {
content: "\e933";
}
.icon-money-icon-secop:before {
content: "\e934";
}
.icon-building-icon:before {
content: "\e935";
}
.icon-calendar-spotcon:before {
content: "\e908";
}
.icon-price-tag-spotcon:before {
content: "\e922";
}
.icon-watercondcon:before {
content: "\e927";
}
.icon-leak-detectcon:before {
content: "\e92e";
}
.icon-background-check-crcon:before {
content: "\e932";
}
.icon-tankless-water-heater-cr-con:before {
content: "\e92d";
}
.icon-water-heater-cr-con:before {
content: "\e930";
}
.icon-wac-er-icon:before {
content: "\e93c";
}
.icon-thumbs-up-sm:before {
content: "\e938";
}
.icon-toolcon-sm:before {
content: "\e939";
}
.icon-service-area-patriot-icon:before {
content: "\e928";
}
.icon-drain-clean-patriot-icon:before {
content: "\e92f";
}
.icon-sewer-patriot-icon:before {
content: "\e931";
}
.icon-calculator-icon:before {
content: "\e929";
}
.icon-coin-hands-icon:before {
content: "\e920";
}
.icon-gear-aplus-icon:before {
content: "\e925";
}
.icon-aplus-bbb-con:before {
content: "\e90c";
}
.icon-aplus-ontime-con:before {
content: "\e90d";
}
.icon-aplus-fam-con:before {
content: "\e91b";
}
.icon-ac-repair-con:before {
content: "\e936";
}
.icon-toilet-con:before {
content: "\e923";
}
.icon-plumbcon:before {
content: "\e91e";
}
.icon-newtech-icon:before {
content: "\e902";
}
.icon-ontime-icon:before {
content: "\e904";
}
.icon-clean-masters:before {
content: "\e900";
}
.icon-trophy-masters:before {
content: "\e903";
}
.icon-pricetag-masters:before {
content: "\e91f";
}
.icon-finance-masters:before {
content: "\e921";
}
.icon-customer-education:before {
content: "\e901";
}
.icon-home-comfort:before {
content: "\e905";
}
.icon-live-answer:before {
content: "\e92a";
}
.icon-mid-finance:before {
content: "\e907";
}
.icon-mid-shield:before {
content: "\e909";
}
.icon-mid-thumbs-up:before {
content: "\e90b";
}
.icon-schedule-icon-spring:before {
content: "\e906";
}
.icon-emergency-icon-spring:before {
content: "\e926";
}
.icon-tools-icon-spring:before {
content: "\e90a";
}
.icon-family-icon-spring:before {
content: "\e91d";
}
.icon-live-answer-icon-spring:before {
content: "\e919";
}
.icon-truck-icon-spring:before {
content: "\e924";
}
.icon-calendar-icon-spring:before {
content: "\e91a";
}
.icon-finance-icon-spring:before {
content: "\e90e";
}
.icon-stars-icon-spring:before {
content: "\e90f";
}
.icon-trustedtechs-icon-spring:before {
content: "\e917";
}
.icon-pricing-icon-spring:before {
content: "\e918";
}
.icon-leftcoast-repaircon:before {
content: "\e91c";
}
.icon-circ-yelp-icon:before {
content: "\e910";
}
.icon-fb-circle:before {
content: "\e911";
}
.icon-instagram-circle:before {
content: "\e912";
}
.icon-linkedin-cricle:before {
content: "\e913";
}
.icon-morrow-bbb:before {
content: "\e914";
}
.icon-new-x-circle:before {
content: "\e915";
}
.icon-yt-circle:before {
content: "\e916";
}
.icon-plus:before {
content: "\f067";
}
.icon-minus:before {
content: "\f068";
}
.icon-search:before {
content: "\f002";
}
.icon-heart:before {
content: "\f004";
}
.icon-star:before {
content: "\f005";
}
.icon-star-o:before {
content: "\f006";
}
.icon-user:before {
content: "\f007";
}
.icon-check:before {
content: "\f00c";
}
.icon-close:before {
content: "\f00d";
}
.icon-remove:before {
content: "\f00d";
}
.icon-times:before {
content: "\f00d";
}
.icon-search-plus:before {
content: "\f00e";
}
.icon-search-minus:before {
content: "\f010";
}
.icon-cog:before {
content: "\f013";
}
.icon-gear:before {
content: "\f013";
}
.icon-home:before {
content: "\f015";
}
.icon-clock-o:before {
content: "\f017";
}
.icon-play-circle-o:before {
content: "\f01d";
}
.icon-print:before {
content: "\f02f";
}
.icon-image:before {
content: "\f03e";
}
.icon-photo:before {
content: "\f03e";
}
.icon-picture-o:before {
content: "\f03e";
}
.icon-map-marker:before {
content: "\f041";
}
.icon-chevron-left:before {
content: "\f053";
}
.icon-chevron-right:before {
content: "\f054";
}
.icon-check-circle-o:before {
content: "\f05d";
}
.icon-calendar:before {
content: "\f073";
}
.icon-cogs:before {
content: "\f085";
}
.icon-gears:before {
content: "\f085";
}
.icon-comments:before {
content: "\f086";
}
.icon-facebook:before {
content: "\f09a";
}
.icon-facebook-f:before {
content: "\f09a";
}
.icon-wrench:before {
content: "\f0ad";
}
.icon-group:before {
content: "\f0c0";
}
.icon-users:before {
content: "\f0c0";
}
.icon-bars:before {
content: "\f0c9";
}
.icon-navicon:before {
content: "\f0c9";
}
.icon-reorder:before {
content: "\f0c9";
}
.icon-google-plus:before {
content: "\f0d5";
}
.icon-money:before {
content: "\f0d6";
}
.icon-caret-down:before {
content: "\f0d7";
}
.icon-caret-up:before {
content: "\f0d8";
}
.icon-caret-left:before {
content: "\f0d9";
}
.icon-caret-right:before {
content: "\f0da";
}
.icon-envelope:before {
content: "\f0e0";
}
.icon-linkedin:before {
content: "\f0e1";
}
.icon-angle-double-left:before {
content: "\f100";
}
.icon-angle-double-right:before {
content: "\f101";
}
.icon-angle-double-up:before {
content: "\f102";
}
.icon-angle-double-down:before {
content: "\f103";
}
.icon-angle-left:before {
content: "\f104";
}
.icon-angle-right:before {
content: "\f105";
}
.icon-angle-up:before {
content: "\f106";
}
.icon-angle-down:before {
content: "\f107";
}
.icon-mobile:before {
content: "\f10b";
}
.icon-mobile-phone:before {
content: "\f10b";
}
.icon-ticket:before {
content: "\f145";
}
.icon-level-down:before {
content: "\f149";
}
.icon-thumbs-up:before {
content: "\f164";
}
.icon-youtube:before {
content: "\f167";
}
.icon-instagram:before {
content: "\f16d";
}
.icon-yelp:before {
content: "\f1e9";
}
.icon-newspaper-o:before {
content: "\f1ea";
}
.icon-calculator:before {
content: "\f1ec";
}
.icon-calendar-check-o:before {
content: "\f274";
}
.icon-user-circle:before {
content: "\f2bd";
}
.icon-user-circle-o:before {
content: "\f2be";
}
/* -------------------------------------------------------------------- */
.wrap1 {
z-index: 2;
position: relative;
padding: 0 2%;
}
.row {
max-width:100%!important;
margin: auto;
}
.clear{
clear:both;
}
ul {
margin-left: 0em!important;
}
/* -------------------------------------------------------Header Section CSS--------------------------------- */
/* Search Bar & Page */
/* Top Bar Section CSS */
/* ---------------------------------------------------------------------------------------- */
.desk-nav {
display: none;
width: 100%;
max-width: none;
padding: 0.5% 0% 0% 0%;
}
.logo-block {
position: relative;
z-index: 99;
background-color: #000000;
}
.desk-nav .row>* , .mobile-nav .row>* {
padding: 0;
}
.mobile-nav{
padding: 0;
width: 100%;
max-width: none;
padding: 0% 0 0% 0;
z-index: 3;
position: relative;
background: white;
}
.mobile-nav .logo-block a[href^="tel"]{
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 3.2em;
height: 3.2em;
margin-left: auto;
margin-right: .8em;
border-radius: 50%;
background: #df0013;
transition: background .3s ease-in-out;
}
.mobile-nav .logo-block a[href^="tel"] span{
font-size: 1.5em;
color: #ffffff !important;
}
.main-bar{
padding: 0% 0%;
}
.logo-image{
position: relative;
}
.logo-image img{
position: relative;
width: 18em;
display: block;
margin: auto;
transition: all .3s ease-in-out;
left: -0.8em;
z-index: -2;
}
.logo-image a{
position: relative;
display: block;
transform: scale(1);
/* z-index: -2; */
}
.smallbar .logo-image img{
width: 11em;
}
.contact-info {
font-size: 1.7em;
font-weight: 900;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
line-height: 1;
letter-spacing: .04em;
text-align: -webkit-center;
margin-top: 0%;
padding-right: 1%;
}
.contact-info strong{
position: relative;
font-size: 0.9em;
font-weight: 400;
color: #0a05e4;
letter-spacing: .04em;
top: .1em;
display: block;
}
.contact-info span{
position: relative;
top: 0.1em;
}
.contact-info a:hover{
color: #137bbe;
}
.contact-info a{
font-size: 1.4em;
display: block;
background-color: #163776;
width: 1.9em;
border-radius: 23em;
height: 1.9em;
line-height: 2;
color: #ffffff;
margin: auto;
transition: all .3s ease-in-out;
text-align: center;
text-decoration: none;
outline: .1em solid #65ee61;
outline-offset: -0.2em;
}
.mobile-nav .btn-primary {
color: #1f1f1f;
border: 0;
border-radius: 0;
padding: 0.8em 1.6em;
background: #df0013;
margin-left: 0;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
font-size: 1.3em;
}
.mobile-nav .btn-primary span{
display: block;
}
.shift-menu{
background: rgb(42,42,42);
background: -moz-radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
background: -webkit-radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
background: radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(42,42,42,1) 62%, rgba(22,22,22,1) 100%);
padding: 10.2em 0 0 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a2a2a",endColorstr="#161616",GradientType=1);
}
.shift-item{
position: relative;
}
.offcanvas-end{
z-index: 9999;
width: 25em;
}
.shift-item a{
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
padding: .85em 0em .85em 1em;
background: #ff000000;
color: white;
margin: 0em 0;
border-bottom: 1px solid #ffffff1a;
border-left: 0em solid #003046;
transition: all .3s ease-in-out;
}
.shift-item .btn-secondary {
display: none;
position: absolute;
right: 0em;
top: -0.7em;
background: #ff000000;
border: 0;
font-size: 1.3em;
padding: 0.2em 0.7em;
}
.shift-item a:hover{
color: #ffffff;
background-color: #163776;
border-left: 0.5em solid #3aa9ff;
}
.dropdown.shift-item .btn-secondary{
display: block;
}
.shift-item a.sub-item{
background: #0000005c;
}
.shift-item a.sub-item:hover{
background-color: #163776;
}
/* ---------------------- */
/* NAV CSS */
.modal {
z-index: 999999999999999999999999999999;
}
.modal-header {
padding: 0;
border: 0;
}
.section-protecte .modal-header h5{
color: white!important;
}
.section-protecte .with_frm_style .frm_primary_label, .section-protecte .with_frm_style .frm_checkbox label{
color: white;
}
.frm_style_formidable-style.with_frm_style .frm_submit button{
width: 100%!important;
display: block;
background-color: #3aa9ff;
color: black;
}
.pop-label{
text-align: center;
text-transform: uppercase;
font-weight: 900;
font-size: 1.6em;
letter-spacing: .05em;
}
.modal-content {
background-color: #3aa9ff;
box-shadow: 0em 0em 1em #0000004f;
}
.modal-content iframe{
height: 46em!important;
}
.modal-header .btn-close{
position: relative;
left: -.9em;
}
.modal-title {
display: block;
text-align: center!important;
width: 100%;
text-transform: uppercase;
letter-spacing: .07em;
font-size: 1.3em;
padding-top: 1em;
margin-bottom: -0.5em;
}
header#masthead {
margin-bottom: 0;
background-color: #ffffff !important;
/* box-shadow: none!important; */
padding: 0rem 0rem!important;
z-index: 9999;
width: 100%;
transition: all .3s ease-in-out;
top: 0em;
display: block;
position: fixed;
max-width: 1700px;
}
header#masthead.smallbar{
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%)!important;
}
.nav-accent{
position: relative;
padding: 1em 0;
}
.nav-accent:before, .nav-accent:after{
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #3aa9ff;
z-index: -1;
clip-path: polygon(2.5% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.nav-accent:after{
background: #044ba1;
z-index: -2;
right: 0;
clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
width: 101.2%;
}
.contact-info-desk a{
color: white;
text-align: center;
font-weight: 900;
font-size: 2em;
line-height: 1.1;
margin-bottom: 0;
}
.contact-info-desk a em{
display: block;
font-style: normal;
font-size: .45em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.contact-info-desk a span{
color: #3aa9ff;
}
.nav-accent .btn{
transform: skew(-10deg);
}
.top-bar{
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
letter-spacing: .1em;
transition: all .3s ease-in-out;
border-bottom: 1px solid #ffffff1f;
color: #0099bb;
margin: auto;
padding-right: 10em;
}
.top-bar #menu-top-menu{
-webkit-align-items: end;
-ms-flex-align: end;
align-items: end;
-webkit-justify-content: end;
-ms-flex-pack: end;
justify-content: end;
}
.smallbar .top-bar{
font-size: 1em;
}
.top-bar input::-webkit-input-placeholder,.top-bar textarea::-webkit-input-placeholder {
color: #fff!important;
}
.top-bar input:-moz-placeholder,.top-bar textarea:-moz-placeholder {
color: #fff!important;
}
.top-bar .btn-primary{
display: block;
letter-spacing: .08em;
font-size: .9em;
color: black;
border: 0;
border-radius: 0;
}
.main-nav{
position: relative;
padding-top: 1%;
}
.search-bar input{
background-color: #ffffff00;
border: 0;
color: white;
border-bottom: 1px solid white;
}
.smallbar .desk-nav .btn-primary{
font-size: 0.9em;
}
.desk-nav .top-bar .btn-primary{
color: white;
font-size: .8em;
width: 100%;
margin-left: auto;
transition: all .3s ease-in-out;
padding-left: 2em;
}
.menu{
position: relative;
list-style: none;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
list-style-type: none;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 0;
}
#menu-top-nav{
-webkit-justify-content: end;
-ms-flex-pack: end;
justify-content: end;
}
.top-bar .menu>li a{
font-size: 0.7em;
padding: 0.2em 0.7em;
color: black!important;
}
.top-bar .menu>li a svg{
width: 2.1em;
}
.top-bar .menu>li a svg path{
fill: #044ba1;
}
.top-bar .menu>li a span{
color: #044ba1;
}
.menu>li a:hover span{
color: white;
}
.menu>li.sched-link a{
color: white!important;
background: #e78b3d;
border-radius: 0em;
font-family: 'Exo 2', sans-serif;
}
.menu>li a{
padding: 0.3em 0.9em 0.6em 0.9em;
text-decoration: none;
color: black!important;
font-size: 1.0em;
display: block;
transition: all .3s ease-in-out;
position: relative;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.08em;
}
.menu>li a span {
color: #ffffff;
}
.smallbar .menu>li a{
font-size: 0.86em;
}
.menu>li.menu-item-has-children> a:before {
content: "\f107";
font-family: 'icomoon' !important;
color: #000000;
display: block;
position: absolute;
font-size: 0.8em;
top: 22%;
right: 0.2%;
}
.menu>li.menu-item-has-children> a:hover:before {
color: #ffffff;
}
.sub-menu li a{
color: #030303!important;
}
.top-bar .menu>li:nth-child(3) a{
border: 0;
}
.menu>li a:hover{
background-color: #044ba1!important;
color: white!important;
}
.mainnav{
text-align: right;
padding: 0.7% 0;
position: relative;
}
.nav-border{
padding-left: 0em!important;
padding-right: 0em!important;
}
.mainnav .menu {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.mainnav .menu .active>a {
color: #ffffff;
background: #f78d1f;
}
.mainnav .menu .active>a:before{
color: black!important;
}
.mainnav .menu .current-menu-item.active>a {
color: #ffffff;
background: #faa61a;
}
.mainnav .menu .sub-menu .current-menu-item.active>a {
color: #fefefe!important;
background: #f78d1f!important;
}
.mainnav .menu>li>a {
display: block;
padding: 0.7rem 0.6rem;
line-height: 1;
font-weight: 400;
font-size: 0.78em;
color: black;
letter-spacing: .02em;
}
.mainnav .menu>li>a:hover{
color: #ffffff;
background: #f78d1f;
}
.mainnav .menu>li>a:hover:before{
color: white;
}
.menu-item-has-children{
position: relative;
transition: all .3s ease-in-out;
}
.menu>li .sub-menu a{
text-transform: none;
letter-spacing: inherit;
padding: 0.6em 1em;
text-align: left;
}
.mainnav .menu>li.menu-item-has-children >a:before {
content: "\f107";
font-family: 'icomoon' !important;
color: #ffffff;
display: block;
position: absolute;
font-size: 0.8em;
top: 37%;
right: 0.5%;
}
.main-nav .menu-item-has-children > .sub-menu{
top: 100%;
right: auto;
left: 0;
}
.main-nav .menu-item-has-children .sub-menu{
opacity: 0;
transition: all .3s ease-in-out;
position: absolute;
background: #ebebec;
list-style: none;
margin-left: 0.0rem;
width: 17em;
height: 0;
display: none;
z-index: 99;
}
.main-nav .menu-item-has-children:hover .sub-menu{
opacity: 1;
height: auto;
top: 100%;
left: 0;
display: block;
animation: fadeIn .2s;
font-size: .88em;
text-align: left;
padding-left: 0;
}
.main-nav .last-column.menu-item-has-children:hover .sub-menu {
opacity: 1;
height: auto;
top: 100%;
right: 0%;
left: auto!important;
display: block;
animation: fadeIn .2s;
font-size: .88em;
text-align: left;
left: auto;
}
.main-nav .slim.menu-item-has-children .sub-menu{
color: #9ad25d;
background: #33204d;;
width: 165%;
text-align: left;
padding-left: 0%;
}
.main-nav .slim.menu-item-has-children:hover .sub-menu {
left: 0%;
}
.main-nav .menu-item-has-children .sub-menu>li{
padding: 0%;
}
.sub-menu a{
padding: 5% 4% 5% 4%;
display: block;
color: #1d1d1d;
font-size: .9em;
transition: all .3s ease-in-out;
border-bottom: 1px solid #00000014;
}
.sub-menu a:hover{
color: #ffffff;
background: #e62318;
padding: 5% 4% 5% 7%;
}
/* Heating Tab 2 columns Sub menu */
.main-nav .double-column.menu-item-has-children .sub-menu{
opacity: 0;
transition: all .3s ease-in-out;
position: absolute;
background: #e1e1e1;
list-style: none;
margin-left: 0.0rem;
width: 36em;
height: 0;
display: none;
text-align: left;
z-index: 99;
}
.main-nav .double-column.menu-item-has-children:hover .sub-menu{
opacity: 1;
height: auto;
top: 100%;
left: 0%;
display: block;
animation: fadeIn .2s;
}
.main-nav .double-column.menu-item-has-children .sub-menu>li{
width: 50%;
float: left;
padding: 0%;
}
.main-nav .double-column.menu-item-has-children .sub-menu>li.full-sub{
width: 100%;
float: left;
padding: 0%;
}
.double-column .sub-menu .full-sub a {
padding: 0.3em 0.6em 0.7em 0.6em;
border-right: 1px solid #00000014;
text-transform: uppercase;
letter-spacing: 0.12em;
text-align: center;
}
.double-column .sub-menu .full-sub a span{
font-size: 1.8em;
position: relative;
top: 0.2em;
}
.last-cool{
float: right!important;
}
.double-column .sub-menu a{
padding: 0.9em 0.6em 0.9em 0.7em;
border-right: 1px solid #00000014;
}
.main-nav .double-column-l.menu-item-has-children .sub-menu{
opacity: 0;
transition: all .3s ease-in-out;
position: absolute;
background: #006ee3;
list-style: none;
margin-left: 0.0rem;
width: 410%;
height: 0;
display: none;
text-align: left;
z-index: 99;
}
.main-nav .double-column-l.menu-item-has-children:hover .sub-menu{
opacity: 1;
height: auto;
top: 100%;
right: 0%;
display: block;
left: auto;
animation: fadeIn .2s;
}
.main-nav .double-column-l.menu-item-has-children .sub-menu>li{
width: 50%;
float: left;
padding: 0%;
}
/* Fly out menu */
.main-nav .double-column .fly-out.menu-item-has-children .sub-menu{
opacity: 0;
transition: all .3s ease-in-out;
position: absolute;
background: #1a6887;
list-style: none;
margin-left: 0.0rem;
width: 18.8em;
height: 0;
display: none;
text-align: left;
z-index: 99;
}
.main-nav .double-column.menu-item-has-children .sub-menu>li.fly-out:hover{
background-color: #f2a525;
}
.main-nav .double-column.menu-item-has-children .sub-menu>li.fly-out:hover .sub-menu{
opacity: 1;
position: absolute;
background: #dcdcdc;
height: auto;
top: 0%;
right: -18.8em;
display: block;
animation: fadeInUp .2s;
left: auto;
}
.main-nav .double-column .fly-out.menu-item-has-children .sub-menu>li {
width: 100%;
float: left;
padding: 0%;
}
.quick-nav{
position: fixed;
top: -3em;
width: 100%;
background-color: #044ba1;
padding: 2% 2% 5.5% 2%;
opacity: 0;
transition: all .3s ease-in-out;
overflow: hidden;
}
.quick-nav.adjust{
padding: 5% 2% 1% 2%;
opacity: 1;
top: 5em;
}
.quick-nav .col-3 {
flex: 0 0 auto;
padding: 0;
}
.quick-nav a{
color: #ffffff;
text-align: center;
display: block;
text-decoration: none;
padding: 9% 1% 9% 1%;
font-size: 0.9em;
transition: all .3s ease-in-out;
border-right: 1px solid #00000030;
}
.quick-nav a:hover{
color: white;
background-color: #209ad6;
}
.smallbar .quick-nav{
}
.quick-nav a span{
font-size: 1.4em;
display: block;
position: relative;
top: -0.2em;
transition: all .3s ease-in-out;
color: #ffffff;
}
.quick-nav a em{
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 900;
display: block;
margin: 1.5em auto -2.6em auto;
color: white;
bottom: 0em;
font-size: 0.7em;
position: relative;
opacity: 0;
transition: all .3s ease-in-out;
}
.quick-nav a em:after{
content: '';
position: absolute;
height: 11.5em;
width: 100%;
background-color: #b00c03;
border-radius: 900em;
z-index: -1;
left: 0%;
bottom: -9.6em;
}
.quick-nav a:hover em{
bottom: 1.2em;
opacity: 1;
}
.quick-nav a:hover span{
/* top: -0.6em; */
font-size: .9em;
}
/* ==========================================================================
NEW DESKTOP HEADER — matches the Claude AI "All Climate" design
3 stacked bars inside .desk-nav: header-utility-bar / header-main-bar / header-nav-bar
========================================================================== */
.desk-nav .header-utility-bar,
.desk-nav .header-main-bar,
.desk-nav .header-nav-bar{
width: 100%;
box-sizing: border-box;
}
/* --- Row 1: utility bar (licensed/insured note + quick links) --- */
.header-utility-bar {
background-color: #000000;
border-bottom: 1px solid rgba(255, 255, 255, .08);
padding: .55em 6%;
font-size: .8em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
.header-utility-bar .utility-left{
color: #b7bcc6;
letter-spacing: .02em;
}
.header-utility-bar .utility-left .icon-check-circle{
color: #e31c3d;
margin-right: .35em;
}
.header-utility-bar .utility-menu{
justify-content: flex-end;
}
.header-utility-bar .utility-menu>li>a {
color: #ffffff !important;
text-transform: none;
letter-spacing: 0;
font-size: 1em;
font-weight: 400;
padding: .2em .9em;
background: none !important;
}
.header-utility-bar .utility-menu>li>a:hover{
color: #ffffff;
background: none!important;
}
.header-utility-bar .utility-menu>li:last-child>a{
padding-right: 0;
}
/* --- Row 2: main bar (logo / phone / Book Now) --- */
.header-main-bar {
background-color: #000000;
padding: .9em 6%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2em;
}
.header-main-bar .header-logo{
flex: 0 0 auto;
}
.header-main-bar .header-logo img {
width: 14em;
left: 0;
z-index: auto;
margin: 0;
}
.header-main-bar .header-phone-block{
flex: 1 1 auto;
text-align: center;
}
.header-phone-block .call-label {
color: #ffffff;
text-transform: uppercase;
letter-spacing: .15em;
font-size: .75em;
margin-bottom: .2em;
}
.header-phone-number {
display: inline-block !important;
color: #ffffff !important;
font-size: 2.7em;
font-weight: 800;
text-decoration: none;
letter-spacing: .01em;
margin-bottom: 0% !important;
}
.header-phone-number .icon-mobile{
color: #e31c3d;
margin-right: .25em;
font-size: .85em;
}
.header-phone-number:hover{
color: #e31c3d;
}
.header-main-bar .header-book-block{
flex: 0 0 auto;
}
.header-book-btn{
display: inline-block;
background-color: #df0013;
color: #ffffff!important;
border: 0;
border-radius: 3em;
padding: .7em 1.7em;
font-size: 1em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
box-shadow: 0 0 1.4em rgba(223,0,19,.45);
transition: all .3s ease-in-out;
margin: 0;
}
.header-book-btn .icon-calendar{
margin-right: .4em;
}
.header-book-btn:hover,
.header-book-btn:focus{
background-color: #b3000f;
color: #ffffff!important;
box-shadow: 0 0 1.8em rgba(223,0,19,.65);
}
/* --- Row 3: primary nav bar (blue) --- */
.header-nav-bar{
background-color: #1f4f9c;
}
.header-nav-bar .main-nav{
position: relative;
padding: 0;
}
.header-nav-bar .menu{
justify-content: center;
}
.header-nav-bar .menu>li>a{
color: #ffffff!important;
background: none!important;
font-size: .95em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
padding: 1em 1.3em;
}
.header-nav-bar .menu>li.menu-item-has-children>a:before{
color: #ffffff;
position: relative;
display: inline-block;
margin-left: .4em;
top: 0;
right: 0;
}
.header-nav-bar .menu>li>a:hover,
.header-nav-bar .menu>li.current-menu-item>a{
background-color: rgba(255,255,255,.15)!important;
color: #ffffff!important;
}
/* Shrink the header slightly once .smallbar is toggled on scroll */
header#masthead.smallbar .header-utility-bar{
padding: .35em 3%;
}
header#masthead.smallbar .header-main-bar{
padding: .55em 3%;
}
header#masthead.smallbar .header-main-bar .header-logo img{
width: 8em;
}
header#masthead.smallbar .header-phone-number{
font-size: 1.4em;
}
header#masthead.smallbar .header-nav-bar .menu>li>a{
padding: .7em 1.1em;
}
/* Responsive: below the desktop breakpoint the theme already hides .desk-nav
and shows .mobile-nav instead (unchanged, see rules above), so no extra
media queries are needed here for phones/tablets. */
/* ------------------------------------------------------------------------------------- */
#site-wrap {
max-width: 1700px;
margin: auto;
box-shadow: 0px 0px 2em rgba(181,193,199,.46);
}
/* Slider Section CSS */
/* Slider Section CSS */
/* Rebuilt to match the Claude AI "All Climate" hero design.
Nothing here changes the ACF schema — .slide-1 / .static-slide are the
same "Class" field value already typed into the Multi Slider > Slide
Builder row, and the badge/button markup below is plain HTML you paste
into the existing "Content" field. See chat notes for the exact strings. */
.sliderfull {
position: relative;
z-index: 1;
margin-top: 12.5em; /* clears the new 3-row fixed header — nudge this
up/down once you see it live against the real
rendered header height */
}
.static-slide{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
z-index: 2;
margin-top: 0%;
padding: 4.5em 6% 4.5em 6%;
min-height: 34em;
display: flex;
align-items: center;
color: white;
border-bottom: 0.4em solid #044ba1;
text-align: left;
background-color: #1b1f47;
overflow: hidden;
}
/* Dark gradient scrim over the background photo so the white/red text
stays legible — sits behind the slide content, above the photo. */
.static-slide::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(6,7,14,.88) 0%, rgba(6,7,14,.72) 32%, rgba(6,7,14,.28) 62%, rgba(6,7,14,.05) 85%);
z-index: 0;
}
/* the ACF "Columns" repeater renders direct child column divs here — keep
them above the scrim */
.static-slide > div{
position: relative;
z-index: 1;
}
/* the unique per-slide class typed into the "Class" field on the Multi
Slider > Slide Builder row — this is what actually points at the photo.
Keep this rule AFTER .static-slide so the background-image isn't wiped
out by .static-slide's background-color shorthand. */
.slide-1 {
background-image: url(https://allclimatenc.bwpsites.com/wp-content/uploads/2026/08/welcome-banner.webp);
background-position: top;
}
.sliderfull {/* margin-top: max(285px, 12%) !important; */}
@media screen and (max-width: 85em) and (min-width: 75.001em) {
.sliderfull {/* margin-top: max(325px, 13%) !important; */}
}
@media screen and (max-width: 75em) and (min-width: 63.939em) {
.sliderfull {/* margin-top: max(325px, 13%) !important; */}
}
@media screen and (min-width: 60em) and (max-width: 63.938em) {
.sliderfull {/* margin-top: max(325px, 13%) !important; */}
}
/* Below 60em the site swaps to the shorter mobile header (logo + phone +
menu button, no separate nav bar) — smaller floor is enough */
@media screen and (max-width: 59.999em) and (min-width: 55.001em) {
.sliderfull {/* margin-top: max(230px, 14%) !important; */}
}
@media screen and (max-width: 55em) and (min-width: 39.939em) {
.sliderfull {/* margin-top: max(230px, 19%) !important; */}
}
@media screen and (max-width: 39.938em) and (min-width: 35.001em) {
.sliderfull {/* margin-top: max(230px, 19%) !important; */}
}
/* Narrow phones — logo/phone-number text is more likely to wrap onto a
second line here, so the floor is a bit taller as a safety margin */
@media screen and (max-width: 35em) and (min-width: 25.001em) {
.sliderfull {/* margin-top: max(270px, 17%) !important; */}
}
@media screen and (min-width: 5.001em) and (max-width: 25em) {
.sliderfull {/* margin-top: max(270px, 15%) !important; */}
}
.slider-header{
line-height: 1.05;
font-size: 2.6em;
position: relative;
letter-spacing: .01em;
color: #ffffff;
margin-bottom: .6em;
animation: fadeInLeft 3s;
font-weight: 900;
animation-timing-function: ease;
animation-fill-mode: both;
animation-delay: 1s;
transition: 1s ease-in-out;
opacity: 0;
transform: translateX(-40%);
text-transform: none;
text-shadow: -0.05em 0.05em rgba(0,0,0,.5);
}
@keyframes fadeInLeft {
20% {
opacity: 0;
transform: translateX(-20%);
}
30%, 100% {
opacity: 1;
transform: translateX(0%);
}
}
.slider-header strong{
display: block;
font-size: 1.03em;
font-weight: 900;
color: #e31c3d;
}
.slider-header span{
display: block;
}
/* --- Trust badge pills (Trusted/Certified, Locally Owned, Quality Workmanship) --- */
.trust-badge-list{
display: flex;
flex-wrap: wrap;
gap: .6em;
margin: 0 0 1.4em 0;
padding: 0;
list-style: none;
max-width: 34em;
}
.trust-badge-list li{
display: inline-flex;
align-items: center;
gap: .5em;
background: rgba(20,21,28,.6);
border: 1px solid rgba(255,255,255,.14);
border-radius: 2em;
padding: .55em 1.1em;
font-size: .85em;
font-weight: 700;
color: #ffffff;
list-style: none;
}
.trust-badge-list li span{
color: #e31c3d;
font-size: 1.15em;
line-height: 1;
}
/* --- CTA button row (Book Appointment + phone) --- */
.slider-btn-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1em;
margin-top: .4em;
}
.slider-btn-row .btn{
display: inline-flex!important;
align-items: center;
gap: .5em;
width: auto;
max-width: none;
margin: 0!important;
border-radius: 3em!important;
padding: .75em 1.7em!important;
font-size: 1em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
}
.btn-phone{
background-color: rgba(20,21,28,.75);
border: 1px solid rgba(255,255,255,.25);
color: #ffffff!important;
}
.btn-phone:hover{
background-color: rgba(20,21,28,1);
color: #ffffff!important;
}
/* ---------------------- */
.slider-usp-row{
position: relative;
width: 85%;
margin: 7em auto 1em auto;
z-index: 2;
padding: 0;
text-align: center;
}
.slider-usp-row:after{
content:'';
position: absolute;
right: 1.2em;
bottom: 1.9em;
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
.usp-box-row .usp-slide .col-3, .usp-box-row .usp-slide .col-9{
width: 100%;
}
.usp-box-row .col{
padding: 0 .9%!important;
width: 33.33%!important;
flex: unset;
}
.usp-slide{
position: relative;
height: 8.4em;
text-align: left;
line-height: 1.1;
outline-offset: -0.7em;
font-size: 0.7em;
transition: all .3s ease-in-out;
text-align: center;
background: #1d4587c4;
color: #ffffff;
text-transform: uppercase;
padding: 0.5em 0.1em 1em 0.1em;
border: 1px solid #00000038;
border-radius: 1em;
}
.usp-slide span{
display: block;
color: #ffffff;
font-size: 4.1em;
line-height: 0.8;
position: relative;
margin-bottom: -.1em;
}
/* ---------------------- */
@media (max-width: 767px){
.static-slide{
text-align: center;
padding: 4.5em 5% 3em 5%;
min-height: auto;
}
.trust-badge-list{
justify-content: center;
max-width: none;
}
.slider-btn-row{
justify-content: center;
}
}
/* ==========================================================================
Hero slider (first carousel slide) - color/size/border fixes to match
the Claude design (All Climate Homepage.dc.html).
Add this AFTER your existing stylesheets load (or into the same
cachebust custom CSS file, appended at the end) so it wins on cascade
order. Every rule below also carries !important as a backstop, so load
order doesn't actually matter - these will win regardless.
========================================================================== */
/* FIX 1: Trust badge icons ("Trusted, Certified Technicians" /
"Locally Owned & Operated" / "Quality Workmanship").
Found the actual rule controlling all three - it's one shared selector,
not per-icon, which is also why all three were already the same size as
each other (just the wrong size/color vs. the design):
.trust-badge-list li span{
color: rgb(227, 28, 61); <- red; design uses blue (#4db4ff)
font-size: 1.15em; <- computes to ~16.6px; design uses 22px
line-height: 1;
}
This override matches the design's spec exactly (checked the design
file directly: all three badges use color:#4db4ff, font-size:22px). */
.trust-badge-list li span{
color: #4db4ff !important;
font-size: 22px !important;
}
/* FIX 2: Hero slide's bottom border - solid blue on the live site:
.row.slide-1.static-slide{ border-bottom: 6px solid rgb(4,75,161); }
The design shows this as a gradient, red on the left fading to blue on
the right, not a flat color. A plain CSS border can't do a gradient by
itself, so this turns the border off and adds a thin gradient bar as a
::after pseudo-element in its place instead - same 6px height and
position, just with the gradient. The slide row already has
position:relative and overflow:hidden (confirmed live), so this sits
flush against the bottom edge with no extra markup needed. */
.row.slide-1.static-slide{
border-bottom: none !important;
}
.row.slide-1.static-slide::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
background: linear-gradient(to right, #E21C3D, #044BA1);
z-index: 3;
}
/* ---------------------- */
/* Top Services */
/* Top Services */
/* Mobile carousel (.top-services.show-for-small-only) keeps the original
gradient-box hover-reveal look below — untouched. The new flat card grid
for desktop lives at the bottom of this file, under "Desktop Top Services
Grid — matches the Claude AI design". */
.top-services{
position: relative;
margin-bottom: 24px;
}
/* Side inset for the carousel, so the card doesn't run edge-to-edge and
the nav buttons below have somewhere to sit - also restated explicitly
for the same reason. */
.top-services .carousel-inner{
padding: 0 4%;
}
.top-services a{
height: auto;
min-height: 0;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 30px 22px 26px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
border-bottom: 1px solid rgba(15,23,42,.08);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(15,23,42,.08);
color: #12131a;
text-align: center;
text-decoration: none;
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
/* The old layout used a 3/9 grid split (icon column + text column) as a
scaffold for the absolute-positioned overlay above - with everything
back in normal flow, that split isn't needed, so let both columns run
full width and stack. */
.top-services .row.align-items-center{
display: block;
height: auto;
width: 100%;
}
.top-services .col-3,
.top-services .col-9{
width: 100%;
height: auto;
display: block;
flex: none;
}
/*
* Icon badge: same alternating blue/red gradient + white icon the
* desktop cards use (odd slides = AC/blue, even slides = Heating/red -
* same order your 4 services already alternate in, same as the desktop
* grid's nth-child split).
*/
.top-services .servi-con{
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
margin: 0 auto;
}
.carousel-item:nth-of-type(odd) .servi-con{
background: linear-gradient(135deg, #3d7bf0 0%, #1f4f9c 100%);
box-shadow: 0 8px 20px rgba(31,79,156,.4);
}
.carousel-item:nth-of-type(even) .servi-con{
background: linear-gradient(135deg, #ff5d7a 0%, #c81636 100%);
box-shadow: 0 8px 20px rgba(200,22,54,.4);
}
.top-services .servi-con span{
position: static;
display: block;
color: #ffffff;
font-size: 30px;
top: auto;
right: auto;
width: auto;
}
/* Title + description: dropped the absolute positioning / opacity:0 so
both sit in normal flow and are always visible - this is the "show
the description permanently, not on hover" part. */
.top-services .servi-label{
position: static;
bottom: auto;
left: auto;
width: 100%;
font-size: 16px;
color: #12131a;
text-shadow: none;
text-transform: none;
letter-spacing: 0;
}
.top-services p{
position: static;
opacity: 1;
bottom: auto;
height: auto;
font-size: 14px;
line-height: 1.5;
color: #5b6472;
margin: 0;
}
/* Neutralizes the old hover-reveal trick (label sliding up to "reveal"
the paragraph underneath) - harmless to leave in place, but with both
elements back in normal static flow it no longer does anything, so
this just keeps things tidy rather than leaving dead motion on tap. */
.top-services a:hover .servi-label,
.top-services a:hover p{
bottom: auto;
text-shadow: none;
}
/*
* "effect wise" - since real :hover doesn't apply on a touchscreen, this
* adds a tap/press effect instead (:active fires on touch), mirroring
* the desktop cards' hover lift + colored glow, same blue/red split as
* the icon badges above.
*/
.top-services a:active{
transform: translateY(-2px);
}
.carousel-item:nth-of-type(odd) a:active{
box-shadow: 0 14px 30px rgba(31,79,156,.25);
border-color: rgba(31,79,156,.35);
}
.carousel-item:nth-of-type(even) a:active{
box-shadow: 0 14px 30px rgba(200,22,54,.25);
border-color: rgba(200,22,54,.35);
}
/*
* "the carousel icons can be better" - checked these live: they're bare
* icon-font carets (icon-caret-left / icon-caret-right), colored dark
* navy, sitting directly on the card with no button/background of their
* own - low contrast and easy to miss, especially against the old navy
* card.
*
* UPDATE: matched these to Section 4's ".usp2-nav-btn" arrows (the ones
* under the "Family Owned & Operated" etc. cards) instead of a one-off
* style, so every carousel's arrow buttons look the same across the
* site - same 38px white circle, same subtle border, same dark icon,
* same blue hover.
*/
.top-services .carousel-control-prev,
.top-services .carousel-control-next{
width: 38px;
height: 38px;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
background: #ffffff;
border: 1.5px solid rgba(20,22,40,.14);
border-radius: 999px;
box-shadow: none;
color: #161824;
font-size: 14px;
opacity: 1;
z-index: 33;
transition: .3s ease-in-out;
}
.top-services .carousel-control-prev:hover,
.top-services .carousel-control-next:hover{
background: #1695F3;
border-color: #1695F3;
color: #ffffff;
}
.top-services .carousel-control-prev{
left: 4px;
}
.top-services .carousel-control-next{
right: 4px;
}
/* ==========================================================================
Desktop Top Services Grid — matches the Claude AI design
========================================================================== */
.top-services-section{
padding: 4% 4% 3% 4%;
background-color: #ffffff;
text-align: center;
}
.top-services-heading{
font-size: 2em;
font-weight: 900;
color: #12131a;
margin: 0 0 1.4em 0;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
}
.top-services-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5em;
text-align: left;
}
.service-card{
position: relative;
}
.service-card a{
display: block;
height: 100%;
background-color: #ffffff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 1em;
padding: 1.8em 1.6em 1.6em 1.6em;
text-decoration: none;
color: inherit;
box-shadow: 0 .3em 1em rgba(15,23,42,.06);
transition: all .3s ease-in-out;
}
.service-card a:hover{
transform: translateY(-.3em);
box-shadow: 0 .8em 1.8em rgba(15,23,42,.14);
border-color: rgba(31,79,156,.35);
}
.service-icon{
display: flex;
align-items: center;
justify-content: center;
width: 3.4em;
height: 3.4em;
border-radius: .8em;
margin-bottom: 1.1em;
transition: all .3s ease-in-out;
}
.service-icon svg{
width: 1.7em;
height: 1.7em;
}
.service-icon svg path,
.service-icon svg circle,
.service-icon svg rect{
fill: #ffffff;
}
/* Alternating AC (blue) / Heating (red) accent — matches your existing
4 services, which already alternate AC/Heating/AC/Heating in that order.
If you ever reorder them, the color just follows card position. */
.service-card:nth-child(odd) .service-icon{
background: linear-gradient(135deg, #3d7bf0 0%, #1f4f9c 100%);
box-shadow: 0 .5em 1.4em rgba(31,79,156,.45);
}
.service-card:nth-child(even) .service-icon{
background: linear-gradient(135deg, #ff5d7a 0%, #c81636 100%);
box-shadow: 0 .5em 1.4em rgba(200,22,54,.45);
}
.service-card:nth-child(odd) .service-more{
color: #2f6fed;
}
.service-card:nth-child(even) .service-more{
color: #e31c3d;
}
.service-card a:hover .service-icon{
transform: translateY(-.15em) scale(1.05);
}
.top-services-grid .servi-label{
position: static;
bottom: auto;
left: auto;
width: auto;
text-transform: none;
letter-spacing: 0;
text-shadow: none;
font-size: 1.15em;
font-weight: 800;
color: #12131a;
margin-bottom: .5em;
}
.top-services-grid p{
position: static;
bottom: auto;
left: auto;
width: auto;
opacity: 1;
padding: 0;
font-size: .92em;
line-height: 1.5;
color: #5b6472;
margin: 0 0 1.1em 0;
}
.service-more{
display: inline-flex;
align-items: center;
gap: .45em;
font-size: .95em;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
.service-more .arrow{
transition: transform .3s ease-in-out;
}
.service-card a:hover .service-more .arrow{
transform: translateX(.3em);
}
@media (max-width: 1100px){
.top-services-grid{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px){
.top-services-grid.hide-for-small-only{
display: none;
}
}
.service-icon > span{
color: #ffffff;
font-size: 1.6em;
}
.service-card:nth-child(odd) a:hover{
transform: translateY(-.5em);
box-shadow: 0 1.8em 3.8em rgba(31,79,156,.2);
border-color: rgba(31,79,156,.35);
}
.service-card:nth-child(even) a:hover{
transform: translateY(-.5em);
box-shadow: 0 1.8em 3.8em rgba(200,22,54,.2);
border-color: rgba(200,22,54,.35);
}
/* Section-1 CSS — rebuilt from the Claude design's actual source
markup (All Climate Homepage.dc.html, "SECTION ONE + FORM"),
values copied exactly: soft gradient background, two-column
intro/form layout, gradient-header Request Service card, and the
three white USP cards below it. */
.section-1 {
position: relative;
z-index: 0;
padding: clamp(56px, 6vw, 92px) clamp(20px, 4vw, 44px) clamp(48px, 5vw, 72px);
background: linear-gradient(160deg, #eaf3fc 0%, #f4f6fb 45%, #fdeef1 100%);
}
.section-1 .wrap1{
max-width: 1280px;
margin: 0 auto clamp(48px, 5vw, 72px);
}
/* ---------- Left column: intro heading + copy ---------- */
.sec1-intro h1{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.02em;
margin: 0 0 20px;
color: #161824;
}
.sec1-intro p{
margin: 0 0 24px;
font-size: 17px;
line-height: 1.7;
color: #4c5464;
font-weight: 400;
}
.sec1-intro p:last-child{
margin-bottom: 0;
}
/* ---------- Right column: "Request Service" form card ---------- */
.request-form-card{
background: #ffffff;
border-radius: 20px;
box-shadow: 0 30px 70px rgba(20,40,80,.16);
border: 1px solid rgba(22,149,243,.14);
overflow: hidden;
}
.request-form-header{
background: linear-gradient(105deg, #E21C3D, #1695F3);
padding: 26px 30px;
color: #ffffff;
}
.request-form-header{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: 26px;
margin: 0 0 4px;
text-align: center;
color: #ffffff;
}
.request-form-header p{
margin: 0;
font-size: 14.5px;
color: rgba(255,255,255,.9);
text-align: center;
}
.request-form-body {
padding: 0px;
background-color: #f4f9ff;
}
.request-form-body iframe{
width: 100%;
border: none;
border-radius: 8px;
background: #ffffff;
display: block;
}
/* ---------- USP cards: shared card look (desktop row + mobile carousel) ----------
NOTE: deliberately named usp1-card / usp1-row / usp1-icon / usp1-title /
usp1-copy instead of reusing the original usp-blk / usp-wrap / usp-label
class names. The theme already has an older, unrelated global CSS block
using those exact class names (height:29em card, mint background, and a
".usp-blk span" rule that forces every span inside to color:#3aa9ff /
font-size:1.3em plus a decorative icon-mask :after). Reusing those names
collided with that legacy styling (huge green icons, squared-off cards).
These fresh, unique class names avoid that collision entirely. */
.usp1-card{
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 12px 34px rgba(20,40,80,.08);
}
.usp1-icon{
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 14px;
font-size: 23px;
line-height: 1;
}
.usp1-card-1 .usp1-icon,
.usp1-card-3 .usp1-icon{
background: rgba(226,28,61,.1);
color: #E21C3D;
}
.usp1-card-2 .usp1-icon{
background: rgba(22,149,243,.12);
color: #1695F3;
}
.usp1-copy{
min-width: 0;
}
.usp1-title{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 700;
font-size: 18px;
margin: 0 0 5px;
color: #1b1d29;
}
.usp1-copy p{
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: #5b6270;
}
/* ---------- USP cards: desktop 3-up row ---------- */
/* Selector scoped with .section-1 (not just .usp1-row) so this grid
display wins over the theme's show/hide-for-small-only utility rule
on the same element regardless of stylesheet load order — both are
single/double class selectors so source order would otherwise decide. */
.section-1 .usp1-row{
max-width: 1480px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
}
.usp1-row .usp1-card{
height: 100%;
}
/* ---------- USP cards: mobile carousel ---------- */
#mobile-usp1{
max-width: 1280px;
margin: 0 auto clamp(48px, 5vw, 72px);
}
#mobile-usp1 .carousel-item{
padding: 0 4px;
}
#mobile-usp1{
padding-bottom: 56px;
}
#mobile-usp1 .carousel-control-prev,
#mobile-usp1 .carousel-control-next{
width: 38px;
height: 38px;
top: auto;
bottom: 0;
transform: none;
display: grid;
place-items: center;
background: #ffffff;
border: 1.5px solid rgba(20,22,40,.14);
border-radius: 999px;
color: #161824;
font-size: 14px;
opacity: 1;
z-index: 33;
transition: .3s ease-in-out;
}
#mobile-usp1 .carousel-control-prev:hover,
#mobile-usp1 .carousel-control-prev:focus,
#mobile-usp1 .carousel-control-next:hover,
#mobile-usp1 .carousel-control-next:focus{
background: #1695F3;
border-color: #1695F3;
color: #ffffff;
opacity: 1;
}
/* Centered as a pair (38px + 16px gap + 38px = 92px total) rather than
pinned to the card's left/right edges, so they read as one control
group under the card instead of two separate corner buttons. */
#mobile-usp1 .carousel-control-prev{
left: calc(50% - 46px);
right: auto;
}
#mobile-usp1 .carousel-control-next{
left: calc(50% + 8px);
right: auto;
}
/* Strip Bootstrap's baked-in-white SVG icon and draw a plain arrow
character instead, exactly like .usp2-nav-btn does - this is what lets
the arrow's color actually follow this button's color/hover state. */
#mobile-usp1 .carousel-control-prev-icon,
#mobile-usp1 .carousel-control-next-icon{
background-image: none;
width: auto;
height: auto;
display: inline-block;
}
#mobile-usp1 .carousel-control-prev-icon::before{
content: "\2190";
}
#mobile-usp1 .carousel-control-next-icon::before{
content: "\2192";
}
/* ---------------------- */
/* Legacy modal-form styles below — still used by the site-wide
"Schedule Service" popup modal (#exampleModal), left untouched. */
.form{
position: relative;
background: #3aa9ff;
width: 90%;
margin: auto;
padding: 1em;
}
.form .with_frm_style .frm_primary_label{
color: white;
}
.form iframe{
margin-top: .5em;
height: 41em!important;
}
.form-label{
position: relative;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 1.5em;
color: white;
}
/* ---------------------- */
/* ---------------------- */
/* ==========================================================================
Coupons Section — rebuilt from the Claude design's actual source
markup (All Climate Homepage.dc.html), values copied exactly:
background #0a0e1c, glow blobs, dashed-border ticket cards with a
separate gradient price block + solid offer block, nav arrows.
========================================================================== */
.section-2{
position: relative;
overflow: hidden;
background: #0a0e1c;
color: #ffffff;
padding: clamp(56px, 6vw, 92px) clamp(20px, 4vw, 44px);
}
.coupon-glow{
position: absolute;
pointer-events: none;
filter: blur(24px);
opacity: .75;
}
.coupon-glow-red{
top: -20%;
left: -6%;
width: 46%;
height: 130%;
background: radial-gradient(circle at 40% 40%, rgba(226,28,61,.34), transparent 62%);
}
.coupon-glow-blue{
bottom: -24%;
right: -6%;
width: 46%;
height: 130%;
background: radial-gradient(circle at 60% 50%, rgba(22,149,243,.32), transparent 62%);
}
.coupon-inner{
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.coup-header-row{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: clamp(32px, 4vw, 48px);
}
.coup-header{
font-weight: 800;
font-size: clamp(30px, 3.8vw, 50px);
line-height: 1.04;
letter-spacing: -.02em;
text-transform: uppercase;
color: #ffffff;
margin: 0;
max-width: 720px;
}
.coup-header p{
margin: 0;
}
.coup-header strong{
color: #df0013;
font-weight: 800;
}
.coup-header em{
color: #3aa9ff;
font-style: normal;
font-weight: 800;
}
.coupon-actions{
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.coupon-view-all{
display: inline-flex;
align-items: center;
white-space: nowrap;
border: 1.5px solid rgba(255,255,255,.3);
background: rgba(255,255,255,.06);
color: #ffffff;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
padding: 15px 24px;
border-radius: 999px;
text-decoration: none;
transition: all .3s ease-in-out;
}
.coupon-view-all:hover{
background: #ffffff;
color: #0a0e1c !important;
}
.coupon-nav{
display: flex;
align-items: center;
gap: 14px;
}
.coupon-dots{
display: flex;
align-items: center;
gap: 8px;
}
.coupon-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,.25);
transition: background .3s ease-in-out, transform .3s ease-in-out;
}
.coupon-dot.is-active{
background: #e21c3d;
transform: scale(1.2);
}
.coupon-nav-btn{
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.3);
background: rgba(255,255,255,.06);
color: #ffffff;
font-size: 18px;
cursor: pointer;
transition: all .3s ease-in-out;
}
.coupon-prev:hover{
background: #e21c3d;
border-color: #e21c3d;
}
.coupon-next:hover{
background: #1695f3;
border-color: #1695f3;
}
.coupon-track{
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 8px 2px 12px;
}
.coupon-card{
flex: 0 0 auto;
width: min(360px, 82vw);
border: 2px dashed rgba(255,255,255,.3);
border-radius: 18px;
padding: 12px;
background: #0f1526;
/* Flex column so every card ends up the same overall height
regardless of how many lines its offer title wraps to. */
display: flex;
flex-direction: column;
}
.coupon-price-block{
border-radius: 14px;
padding: 34px 24px;
text-align: center;
}
.coupon-price{
font-weight: 800;
font-style: italic;
font-size: 48px;
color: #ffffff;
line-height: 1;
}
.coupon-price-suffix{
font-size: 26px;
}
.coupon-offer-block{
border-radius: 14px;
margin-top: 12px;
padding: 24px 22px;
text-align: center;
/* Fills the remaining height of the card (which is itself a flex
column now) so every offer block bottoms out at the same edge. */
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.coupon-offer{
font-weight: 800;
font-size: 22px;
color: #ffffff;
margin: 0 0 6px 0;
/* Reserves space for 2 lines regardless of whether this title wraps
to 1 or 2 lines, so every card is the same height instead of
shrinking/growing based on title length. Shorter titles just sit
vertically centered in that reserved space. */
min-height: 2.3em;
line-height: 1.15;
display: flex;
align-items: center;
justify-content: center;
}
.coupon-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #ffffff;
font-weight: 800;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 13px 26px;
border-radius: 999px;
margin-top: 25px;
text-decoration: none;
transition: all .3s ease-in-out;
}
.coupon-btn:hover{
background: #0a0e1c;
color: #ffffff !important;
}
.coupon-fine-print{
margin: 16px 0 0 0;
font-size: 10.5px;
line-height: 1.5;
color: rgba(255,255,255,.72);
}
/* Odd cards: blue gradient price block / red offer block */
.coupon-card:nth-child(odd){
border-color: #e21c3d;
}
.coupon-card:nth-child(odd) .coupon-price-block{
background: linear-gradient(135deg, #1695f3, #0c6fca);
}
.coupon-card:nth-child(odd) .coupon-offer-block{
background: #e21c3d;
}
.coupon-card:nth-child(odd) .coupon-btn{
color: #e21c3d;
}
/* Even cards: red gradient price block / blue offer block */
.coupon-card:nth-child(even){
border-color: #1695f3;
}
.coupon-card:nth-child(even) .coupon-price-block{
background: linear-gradient(135deg, #e21c3d, #b81531);
}
.coupon-card:nth-child(even) .coupon-offer-block{
background: #1695f3;
}
.coupon-card:nth-child(even) .coupon-btn{
color: #1695f3;
}
/* Matches the theme's own show-for-small-only/hide-for-small-only
crossover (55em / 880px) rather than guessing a breakpoint —
the theme's existing utility classes already handle showing/hiding
.coupon-track vs .coupon-track-mobile correctly on their own. */
@media (max-width: 55em){
.coup-header-row{
align-items: flex-start;
}
}
.coupon-track-mobile{
flex-direction: column;
overflow-x: visible;
}
.coupon-track-mobile .coupon-card{
width: 100%;
}
@media (max-width: 600px){
/* Force the real, populated track visible on mobile instead of the
empty .coupon-track-mobile placeholder. #couponTrack is an ID, so
this wins outright over the theme's own !important class rules
without needing to reverse-engineer their breakpoint stack. */
#couponTrack{
display: flex !important;
}
/* Keep the always-empty mobile track hidden - it has 0 children, so
showing it would just render a blank gap. Compound selector (all
three classes) so this stays specific to that one placeholder div. */
.coupon-track.coupon-track-mobile.show-for-small-only{
display: none !important;
}
/* Of whichever group of 3 the script currently has "visible"
(display:'' rather than 'none'), only keep the first one showing -
this is what turns "3 across" into "one coupon at a time" without
touching the pagination script itself. */
#couponTrack .coupon-card:nth-child(3n+2),
#couponTrack .coupon-card:nth-child(3n+3){
display: none !important;
}
/* Let that one remaining card fill the row width instead of sizing
itself for a 3-up layout, so it reads as a proper single mobile
card rather than a narrow leftover column. */
#couponTrack .coupon-card:nth-child(3n+1){
width: 100%;
}
#couponTrack{
flex-wrap: nowrap;
}
}
@media (max-width: 1250px){
/* Force the real, populated track visible instead of the empty
.coupon-track-mobile placeholder, and keep that placeholder hidden -
across the ENTIRE mobile-through-tablet range in one unbroken block,
so it no longer matters where the theme's own show/hide-for-small-only
breakpoint stack happens to flip. #couponTrack is an ID, so this wins
outright over the theme's own !important class rules either way. */
#couponTrack{
display: flex !important;
flex-wrap: nowrap !important;
}
.coupon-track.coupon-track-mobile.show-for-small-only{
display: none !important;
}
}
/* ---- Tier 1: phones - one coupon at a time ---- */
@media (max-width: 880px){
/* Of whichever group of 3 the script currently has "visible", only
keep the first one showing. */
#couponTrack .coupon-card:nth-child(3n+2),
#couponTrack .coupon-card:nth-child(3n+3){
display: none !important;
}
/* Let that one remaining card fill the row width instead of sizing
itself for a 3-up layout. */
#couponTrack .coupon-card:nth-child(3n+1){
width: 100% !important;
}
}
/* ---- Tier 2: tablet / narrow desktop - two coupons at a time, no wrap --- */
@media (min-width: 881px) and (max-width: 1250px){
/* Of whichever group of 3 the script currently has "visible", hide the
3rd and keep the first two. */
#couponTrack .coupon-card:nth-child(3n+3){
display: none !important;
}
/* Split the row evenly between the two remaining cards (instead of the
fixed 360px desktop width) so they always fit side-by-side across
this whole tier without wrapping, regardless of the exact width. */
#couponTrack .coupon-card:nth-child(3n+1),
#couponTrack .coupon-card:nth-child(3n+2){
width: calc(50% - 12px) !important;
}
}
/* ---------------------- */
/* Section-3 CSS — rebuilt from the Claude design's actual source markup
(All Climate Homepage.dc.html, "EVERY SEASON / SERVICE LIST"): plain
light-gray section, header + copy on the left, a dark gradient
"Complete HVAC Services" checklist card on the right.
Per discussion, this section no longer renders the old contact_list /
van_image / "Schedule Service" form block — the new design doesn't
include that content here and it doesn't appear anywhere else in the
design source either. Those ACF fields are left untouched, just not
output from this section anymore (same approach used for sec1_image
in Section 1). All three service repeaters (Plumbing / HVAC /
Electrical) are combined into one unified checklist to match the
design's single "Complete HVAC Services" card without dropping any
existing content. */
.section-3{
position: relative;
z-index: 3;
background-color: #f6f7fb;
padding: clamp(56px, 6vw, 92px) clamp(20px, 4vw, 44px);
}
.sec3-wrap{
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
/* Plain divs (no Bootstrap row/col classes) on purpose — Bootstrap's
.col-md-6 sets its own max-width:50% as part of its flex column
definition, which would double up against this grid's 1fr columns
if both were on the same element. Keeping this grid self-contained
avoids that. */
@media (max-width: 55em){
.sec3-wrap{
grid-template-columns: 1fr;
}
}
/* ---------- Left column: heading + copy ---------- */
.sec3-heading{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.02em;
margin: 0 0 22px;
color: #161824;
}
.sec3-intro p{
margin: 0 0 16px;
font-size: 16.5px;
line-height: 1.7;
color: #4c5464;
}
.sec3-intro p:last-child{
margin-bottom: 0;
}
/* ---------- Right column: "Complete HVAC Services" checklist card ---------- */
.sec3-services-card{
background: linear-gradient(155deg, #0a1730, #0f2f5c);
border-radius: 20px;
padding: 34px 32px;
box-shadow: 0 30px 70px rgba(10,25,55,.35);
}
.sec3-services-title{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: 18px;
color: #ffffff;
margin: 0 0 22px;
}
.sec3-services-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 22px;
}
.sec3-service-item{
display: flex;
align-items: center;
gap: 11px;
color: #ffffff;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
transition: color .3s ease-in-out;
}
.sec3-service-item:hover{
color: #ffffff;
text-decoration: underline;
}
.sec3-service-icon{
font-size: 17px;
flex: 0 0 auto;
}
/* Alternating check-icon colors (blue/red) — the design's own item-by-item
coloring looks essentially arbitrary rather than a strict pattern, so a
clean alternation gets the same two-tone effect without hardcoding it
to a fixed list length that won't hold up as services are added. */
.sec3-service-item:nth-child(odd) .sec3-service-icon{
color: #3aa9ff;
}
.sec3-service-item:nth-child(even) .sec3-service-icon{
color: #E21C3D;
}
@media (max-width: 55em){
.sec3-services-grid{
grid-template-columns: 1fr;
}
}
/* ---------------------- */
/* Legacy styles below — kept in case any of this markup/CSS is still
referenced elsewhere on the site; no longer used by this section's
template. */
.service-list {
overflow-y: scroll;
height: 15em;
margin-top: 3%;
margin-left: 0rem;
width: 99%;
background: #f9f9f900;
padding: 1% 0% 1% 2%;
overflow-x: hidden;
text-align: left;
}
.service-list li {
font-size: 1em;
list-style-type: none!important;
position: relative;
}
.service-list li a span {
color: #059dcf;
position: relative;
left: 0.2em;
top: 0.14em;
font-size: 1.2em;
}
.service-list li a {
display: block;
padding: 0.4em 0.2em 0.3em 0.5em;
position: relative;
transition: all .3s ease-in-out;
color: white;
border-left: .0em solid #3aa9ff;
text-decoration: none;
}
.service-list li a:after {
content: '';
position: absolute;
bottom: 0.1em;
left: -2.4em;
height: 1.8em;
width: 1.8em;
background-size: 100%;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
transition: all .3s ease-in-out;
background-repeat: no-repeat;
}
.service-list li a:hover {
background-color: #ececec;
color: #000000;
padding: 0.4em 0.2em 0.3em 1.4em;
border-left: 0.7em solid #3aa9ff;
}
.service-list li a:hover:after {
left: 0.4em;
}
/*
* STYLE 1
*/
.service-list::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 49%);
border-radius: 15px;
background-color: #00000029;
}
.service-list::-webkit-scrollbar {
width: 5px;
/* background-color: #F5F5F4; */
}
.service-list::-webkit-scrollbar-thumb {
border-radius: 15px;
-webkit-box-shadow: inset 0 0 3px rgb(0 0 0 / 36%);
background-color: #000000;
}
/* ---------------------- */
/* Section-4 CSS — rebuilt from the Claude design's actual source markup
(All Climate Homepage.dc.html, "WHY CHOOSE US"): image with a
floating stat badge on the left, heading + copy + a 2x2 USP grid on
the right.
Fixed two field-name bugs from the previous version of this section
(it was referencing sec3_header / sec3_image instead of sec4_header /
sec4_image). Also removed the "Schedule Service" / phone buttons —
the design doesn't show any CTA buttons in this section (Section 1
already carries the primary Request Service form), so they were
dropped to match, same as the other sections. Columns are swapped to
match the design's actual order: image left, text right.
You have 6 usp_group2 items but the design only shows 4 at a time —
built as a 2x2 grid that pages through all 6, 2 at a time, via the
prev/next arrows (with dot indicators), rather than a traditional
Bootstrap carousel, since Bootstrap's carousel swaps one full slide
at a time and can't easily do a "shift by 2, keep 4 visible" window. */
.section-4{
position: relative;
z-index: 3;
background: linear-gradient(180deg, #ffffff, #eef3fb);
padding: clamp(56px, 6vw, 92px) clamp(20px, 4vw, 44px);
}
.sec4-wrap{
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(36px, 5vw, 64px);
align-items: center;
}
@media (max-width: 55em){
.sec4-wrap{
grid-template-columns: 1fr;
}
}
/* ---------- Left column: image + floating stat badge ---------- */
.sec4-image-col{
position: relative;
}
.sec4-image-frame{
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(20,22,40,.22);
aspect-ratio: 3 / 4;
}
.sec4-image-frame img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sec4-badge{
position: absolute;
bottom: -24px;
right: -18px;
background: #ffffff;
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 20px 46px rgba(20,22,40,.2);
text-align: center;
}
.sec4-badge-number{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: 36px;
line-height: 1;
color: #E21C3D;
}
.sec4-badge-label{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 12px;
color: #5b6270;
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 4px;
}
/* ---------- Right column: heading + copy ---------- */
.sec4-heading{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.12;
letter-spacing: -.02em;
margin: 0 0 16px;
color: #161824;
}
.sec4-intro > p{
margin: 0 0 30px;
font-size: 16.5px;
line-height: 1.7;
color: #4c5464;
}
/* ---------- USP paginated grid ---------- */
.usp2-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.usp2-card{
background: #ffffff;
border-radius: 20px;
padding: 22px;
box-shadow: 0 10px 30px rgba(20,22,40,.06);
transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}
.usp2-card:hover{
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(20,22,40,.12);
}
.usp2-icon{
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 11px;
font-size: 20px;
margin-bottom: 12px;
}
.usp2-card:nth-child(odd) .usp2-icon{
background: rgba(226,28,61,.1);
color: #E21C3D;
}
.usp2-card:nth-child(even) .usp2-icon{
background: rgba(22,149,243,.12);
color: #1695F3;
}
.usp2-title{
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-weight: 700;
font-size: 16px;
margin: 0 0 6px;
color: #1b1d29;
}
.usp2-card p{
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #5b6270;
}
@media (max-width: 40em){
.usp2-grid{
grid-template-columns: 1fr;
}
}
/* ---------- Pagination controls ---------- */
.usp2-nav{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.usp2-nav-btn{
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1.5px solid rgba(20,22,40,.14);
background: #ffffff;
color: #161824;
font-size: 14px;
cursor: pointer;
transition: all .3s ease-in-out;
}
.usp2-nav-btn:hover{
background: #1695F3;
border-color: #1695F3;
color: #ffffff;
}
.usp2-dots{
display: flex;
align-items: center;
gap: 8px;
}
.usp2-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(20,22,40,.18);
transition: background .3s ease-in-out, transform .3s ease-in-out;
}
.usp2-dot.is-active{
background: #E21C3D;
transform: scale(1.2);
}
/* ---------------------- */
/* Legacy styles below — this section previously rendered its USP boxes
with the older usp-blk / usp-wrap / usp-label classes (same block
also found colliding with Section 1's redesign). Left untouched in
case anything else on the site still uses them; this section's
template no longer does. */
.usp-wrap{
width: 80%;
position: relative;
margin: 3em auto 2em 0;
}
.usp-wrap .col-lg-4{
padding: 0 .59%
}
.usp-blk {
position: relative;
padding: 2em;
text-align: center;
height: 29em;
font-size: .9em;
border: 1px solid #0000002e!important;
transition: all .3s ease-in-out;
background: #edffff;
}
.usp-blk span{
color: #3aa9ff;
font-size: 6em;
position: relative;
z-index: 1;
}
.usp-blk span:after{
content:'';
position: absolute;
top: -0.15em;
left: 0;
width: 100%;
height: 1.3em;
background-repeat: no-repeat;
z-index: -1;
background-position: center;
background-size: 1.1em;
opacity: 0.2;
}
.usp-label{
font-size: 1.4em;
}
.usp-blk.box-3{
border: 1px solid #0000002e!important;
}
/* ---------------------- */
/* ---------------------- */
.section-5{
position: relative;
background: linear-gradient(180deg, #eef3fb, #ffffff);
color: #161824;
padding: clamp(56px, 6vw, 92px) clamp(20px, 4vw, 44px);
}
.sec5-inner{
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.sec5-intro{
text-align: center;
max-width: 760px;
margin: 0 auto clamp(36px, 4vw, 52px);
}
.sec5-stars{
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.sec5-stars .icon-star{
color: #f5a623;
font-size: 20px;
}
.sec5-heading{
font-weight: 800;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -.02em;
margin: 0 0 16px;
color: #161824;
}
.sec5-subheading{
margin: 0;
font-size: 16.5px;
line-height: 1.7;
color: #4c5464;
}
.sec5-reviews{
margin: 0 auto;
}
.sec5-cta{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-top: clamp(32px, 4vw, 48px);
}
.sec5-cta-btn{
display: inline-flex;
align-items: center;
gap: 11px;
background: #ffffff;
color: #1b1d29;
border: 1.5px solid rgba(20,22,40,.14);
font-weight: 700;
font-size: 15px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 16px 34px;
border-radius: 999px;
box-shadow: 0 10px 26px rgba(20,22,40,.08);
text-decoration: none;
transition: all .3s ease-in-out;
}
.sec5-cta-btn:hover{
border-color: #E21C3D;
color: #E21C3D !important;
transform: translateY(-2px);
}
.sec5-cta-btn-alt:hover{
border-color: #1695F3;
color: #1695F3 !important;
}
@media (max-width: 55em){
.sec5-cta{
flex-direction: column;
align-items: center;
}
}
.add-box{
position: relative;
padding: 0 1em;
margin-top: 1%;
}
.add-header{
position: relative;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
color: white;
font-size: 1.2em;
padding-bottom: .5em;
border-bottom: 1px solid #ffffff1c;
}
/* ---------------------- */
.section-6{
position: relative;
overflow: hidden;
background: #0a0e1c;
color: #ffffff;
padding: clamp(56px, 6vw, 100px) clamp(20px, 4vw, 44px);
}
.sec6-bg{
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .2;
pointer-events: none;
}
.sec6-glow{
position: absolute;
pointer-events: none;
filter: blur(24px);
opacity: .75;
}
.sec6-glow-red{
top: -20%;
left: -6%;
width: 50%;
height: 120%;
background: radial-gradient(circle at 40% 40%, rgba(226,28,61,.34), transparent 62%);
}
.sec6-glow-blue{
bottom: -30%;
right: -8%;
width: 50%;
height: 120%;
background: radial-gradient(circle at 60% 50%, rgba(22,149,243,.34), transparent 62%);
}
.sec6-inner{
position: relative;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.sec6-heading{
font-weight: 800;
font-size: clamp(30px, 3.8vw, 48px);
line-height: 1.1;
letter-spacing: -.02em;
margin: 0 0 24px;
color: #ffffff;
}
.sec6-heading span{
color: #3aa9ff;
}
.sec6-copy{
font-size: 17.5px;
line-height: 1.7;
color: rgba(255,255,255,.82);
}
.sec6-copy p{
margin: 0 auto 14px;
max-width: 780px;
}
.sec6-copy p:last-child{
margin-bottom: 36px;
}
.sec6-stats{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px 44px;
}
.sec6-stat{
text-align: center;
}
.sec6-stat-number{
font-weight: 800;
font-size: clamp(32px, 3.6vw, 48px);
color: #3aa9ff;
line-height: 1;
}
.sec6-stat-label{
font-size: 13px;
color: rgba(255,255,255,.7);
margin-top: 6px;
letter-spacing: .06em;
}
.sec6-stat-divider{
width: 1px;
align-self: stretch;
background: rgba(255,255,255,.16);
}
@media (max-width: 55em){
.sec6-stat-divider{
display: none;
}
}
.section-7{
position: relative;
overflow: hidden;
background: linear-gradient(115deg, #E21C3D 0%, #E21C3D 34%, #1695F3 66%, #1695F3 100%);
color: #ffffff;
}
.section-7::before{
content: '';
position: absolute;
inset: 0;
background: radial-gradient(50% 120% at 15% 0%, rgba(255,255,255,.16), transparent 55%);
pointer-events: none;
}
.sec7-inner{
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 44px);
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(36px, 5vw, 64px);
align-items: center;
}
.sec7-heading{
font-weight: 800;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.06;
letter-spacing: -.02em;
margin: 0 0 20px;
color: #ffffff;
}
.sec7-copy{
color: rgba(255,255,255,.92);
font-size: 17.5px;
line-height: 1.7;
}
.sec7-copy p{
margin: 0 0 30px;
max-width: 580px;
}
.sec7-copy p:last-child{
margin-bottom: 30px;
}
.sec7-checklist{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
max-width: 580px;
}
.sec7-check-item{
display: flex;
align-items: center;
gap: 11px;
background: rgba(255,255,255,.14);
border-radius: 14px;
padding: 15px 16px;
font-weight: 600;
font-size: 14.5px;
color: #ffffff;
}
.sec7-check-item .icon-check-circle{
font-size: 18px;
color: #ffffff;
flex: 0 0 auto;
}
.sec7-card{
background: #ffffff;
border-radius: 20px;
padding: clamp(28px, 3vw, 40px);
box-shadow: 0 34px 80px rgba(20,10,40,.4);
color: #161824;
}
.sec7-card-head{
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.sec7-card-badge{
display: inline-grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 16px;
background: linear-gradient(135deg, #E21C3D, #1695F3);
color: #ffffff;
flex: 0 0 auto;
}
.sec7-card-badge .icon-mp-shield1{
font-size: 27px;
}
.sec7-card-title{
font-weight: 800;
font-size: 20px;
color: #161824;
}
.sec7-card-sub{
font-size: 14px;
color: #5b6270;
}
.sec7-card-price{
display: flex;
align-items: baseline;
gap: 8px;
padding: 20px 0;
border-top: 1px solid #eceef3;
border-bottom: 1px solid #eceef3;
}
.sec7-price{
font-weight: 800;
font-size: clamp(42px, 5vw, 60px);
color: #E21C3D;
line-height: 1;
}
.sec7-price-note{
font-weight: 600;
font-size: 16px;
color: #5b6270;
}
.sec7-tiers{
display: flex;
flex-direction: column;
gap: 12px;
margin: 22px 0;
}
.sec7-tier{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #f6f7fb;
border-radius: 14px;
padding: 15px 18px;
}
.sec7-tier-label{
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15px;
color: #1b1d29;
}
.sec7-tier-icon{
font-size: 17px;
}
.sec7-tier-icon-blue{
color: #1695F3;
}
.sec7-tier-icon-red{
color: #E21C3D;
}
.sec7-tier-price{
font-weight: 800;
font-size: 17px;
color: #161824;
}
.sec7-tier-suffix{
font-weight: 600;
font-size: 13px;
color: #8b909e;
}
.sec7-cta-btn{
/* !important on display/text-align: this site has a global
a[href^="tel"]{display:block} rule that outranks a lone class
selector on specificity, which was pushing the label to the left.
Now that this is a