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: 0.72em 1.6em;
  margin: 1em 0 0 0;
  letter-spacing: .09em;
  margin: auto;
  display: block;
  position: relative;
  color: black;
  font-weight: 700;
  border-radius: 0em;
}

.btn-primary.content-btn{
  max-width: 500px;
  margin-left: 0;
}


body .btn-secondary{  
  font-weight: 900;
}

body .btn-secondary:hover{ 
}

.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;
}  




a[href^="tel"].asc-btn{
  display: inline-flex;
  margin-bottom: 0;
}

/* Colour has to be re-stated per variant — a blanket #fff here would wreck
   .asc-btn-ondark, which is deliberately dark text on white.
   :hover / :focus states already score (0,2,0) and were never affected. */
a[href^="tel"].asc-btn-primary,
a[href^="tel"].asc-btn-primary:visited,
a[href^="tel"].asc-btn-secondary,
a[href^="tel"].asc-btn-secondary:visited{
  color: #fff;
}

a[href^="tel"].asc-btn-ondark,
a[href^="tel"].asc-btn-ondark:visited{
  color: var(--asc-ink-900, #111418);
}

@font-face {
  font-family: 'icomoon';
  src:  url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.eot?cx701b');
  src:  url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.eot?cx701b#iefix') format('embedded-opentype'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.woff2?cx701b') format('woff2'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.ttf?cx701b') format('truetype'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.woff?cx701b') format('woff'),
    url('/wp-content/themes/plumberseo-bootstrap/fonts/icomoon.svg?cx701b#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@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-bb-maintenance:before {
  content: "\e941";
}

.icon-line-experienced-tech-icon:before {
  content: "\e90e";
}

.icon-kc-call-row:before {
  content: "\e95f";
}


.icon-family-owned-icon:before {
  content: "\e9c0";
}

.icon-clock-ni:before {
  content: "\e99e";
}

.icon-cc-money:before {
  content: "\e9a0";
}

.icon-drivers-license-o1:before {
  content: "\f2c4";
}

.icon-tools-hales:before {
  content: "\e92c";
}

.icon-money-document-energy:before {
  content: "\eb86";
}


.icon-henco-finance:before {
  content: "\eade";
}

.icon-location1:before {
  content: "\e9dd";
}

.icon-trsut-tech-n:before {
  content: "\e966";
}

.icon-commercial-con:before {
  content: "\e9de";
}

.icon-switch3:before {
  content: "\eb2f";
}

.icon-droplet1:before {
  content: "\e97a";
}

.icon-air-qaulity:before {
  content: "\e968";
}

.icon-droplet2:before {
  content: "\e97b";
}


.icon-lightning:before {
  content: "\e9f1";
}

.icon-local_fire_department:before {
  content: "\e9ce";
}

.icon-snow:before {
  content: "\eb1b";
}

.icon-facebook:before {
  content: "\e94a";
}

.icon-youtube-square:before {
  content: "\f166";
}

.icon-x2:before {
  content: "\e951";
}

.icon-yelp-square:before {
  content: "\e92a";
}

.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:before {
  content: "\f058";
}
.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-phone:before {
  content: "\f095";
}
.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% 1% 0%;
}  

.logo-block{
  position:relative;
  z-index:99;
  background-color:#fff;
}

.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;
}

.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: #edf5fc;
    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.3em;
  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 #d71e34;
}

.dropdown.shift-item .btn-secondary{
  display: block;
}

.shift-item a.sub-item{
  background: #0000005c;
}

.shift-item a.sub-item:hover{
    background-color: #163776;
}



.mobile-nav{
  position: relative;
}

.quick-nav{
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
}


.quick-nav.adjust{
  top: 100% !important;
  bottom: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
}


@media (max-width: 767.98px){
  body{
    padding-bottom: 0;
  }
}



/* ---------------------- */


/* 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: #d71e34;
  color: black;
}

.pop-label{
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6em;
  letter-spacing: .05em;
}

.modal-content {
    background-color: #1f2c5f;
    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: #1f2c5f;
  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: #d71e34;
}

.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: #ffffff !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: #00b1b9;
}

.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: 40%; */
    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;
}


/* ------------------------------------------------------------------------------------- */

#site-wrap {
    max-width: 1700px;
    margin: auto;
    box-shadow: 0px 0px 2em rgba(181,193,199,.46);
}


======================================================================
   1. SECTION SHELL
   ========================================================================== */

.sliderfull{
  position: relative;
  z-index: 1;

  /* Fallback only. The real offset comes from the measuring script, which
     sets html.asc-header-measured .sliderfull { margin-top: var(--asc-header-h) }
     and currently resolves to 226px. This percentage — and the 12 media-query
     variants of it elsewhere in custom.css — only apply before that script
     runs, or if it fails. Left in place deliberately as the no-JS fallback;
     don't delete them thinking they're dead. */
  margin-top: 9%;
}

.sliderfull .btn{
  max-width: 300px;
  margin: 1em auto;
}


/* ==========================================================================
   2. SHARED SLIDE CHROME

   Applied to every slide via the Class field ("slide-1 static-slide").
   Anything that should be true of ALL slides belongs here.
   ========================================================================== */

.static-slide{
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: 8% 5% 5% 5%;
  color: #fff;
  text-align: left;
  background: #1b1f47;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
  border-bottom: .4em solid #044ba1;
}


/* ==========================================================================
   3. SLIDE 1 — HERO WITH COPY
   ========================================================================== */

.slide-1{
  background-image: url(/wp-content/uploads/2026/09/slider-banner-1.webp);
  background-position: top;
}

/* -- overline ------------------------------------------------------------ */

.slider-overline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 13px;
  line-height: 1.2;
  color: var(--asc-blue-400, #2E86D6);
  margin-bottom: 20px;

  /* Same entrance as the headline, started 0.2s earlier so it leads rather
     than lands on top of it. Reuses the fadeInLeft keyframes in section 4. */
  opacity: 0;
  animation: fadeInLeft 3s;
  animation-delay: .8s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.slider-overline-rule{
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--asc-blue-500, #005FAF);
}

/* -- headline ------------------------------------------------------------ */

.slider-header{
  position: relative;
  font-size: 2.1em;
  font-weight: 900;
  line-height: 0.5;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: -0.1em 0.1em black;
  margin-bottom: 2%;
  opacity: 0;
  transform: translateX(-40%);
  animation: fadeInLeft 3s;
  animation-delay: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
  transition: 1s ease-in-out;
}

/* The <span> in the Title field colours one word red. It must stay inline —
   as a block it would push the rest of the sentence onto a third line. */
.slider-header span{
  display: inline;
}

/* Forces the headline to break before the red word, with no <br> in the
   Title field. "\A" is a newline; white-space:pre stops it collapsing to a
   space. Scoped to .slide-1 so other banners wrap naturally. */
.slide-1 .slider-header span::before{
  content: "\A";
  white-space: pre;
}


/* ==========================================================================
   4. ANIMATION
   ========================================================================== */

@keyframes fadeInLeft{
  20%       { opacity: 0; transform: translateX(-20%); }
  30%, 100% { opacity: 1; transform: translateX(0%); }
}

@keyframes ascMediaIn{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}



.slide-media{
  padding: clamp(24px, 3.5vw, 56px) clamp(16px, 5vw, 80px);
  background:
    repeating-linear-gradient(-12deg, transparent 0 38px, rgba(255,255,255,.03) 38px 40px),
    radial-gradient(120% 140% at 12% 0%,  rgba(46,134,214,.28) 0%, transparent 55%),
    radial-gradient( 90% 120% at 92% 100%, rgba(215,30,52,.20) 0%, transparent 55%),
    linear-gradient(135deg, var(--asc-navy-950, #060E1A) 0%, var(--asc-navy-900, #0A1727) 100%);
}

.slide-media img,
.slide-media-img{
  display: block;
  width: 100%;
  max-width: 1240px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);

  opacity: 0;
  animation: ascMediaIn .7s ease;
  animation-delay: .25s;
  animation-fill-mode: both;
}

/* THIS ONE IS LOAD-BEARING — don't drop it.

   Somewhere else in your custom.css (not in the block you sent me) there's a
   .slider-subline { max-width: 820px }. That's right for hero body copy — it
   stops a paragraph running the full width of the banner — but on an image
   slide it silently squashed the artwork to 820px and pinned it to the left.
   I only caught it by measuring: the image came out 820 wide with a 707px gap
   on its right.

   This releases the cap for image slides only. Hero copy keeps its 820px. */
.slide-media .slider-subline{
  margin: 0;
  max-width: none;
  width: 100%;
}

@media (max-width: 55em){
  .slide-media img,
  .slide-media-img{
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,.4);
  }
}

/* -- variant: light artwork ---------------------------------------------- */
/* If a customer ever supplies a mostly-white banner, the navy makes it shout.
   Add slide-media-light alongside slide-media for a pale backdrop instead. */
.slide-media-light{
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(46,134,214,.10) 0%, transparent 55%),
    linear-gradient(135deg, #FFFFFF 0%, var(--asc-gray-050, #F5F6F8) 100%);
}

.slide-media-light img,
.slide-media-light .slide-media-img{
  border-color: var(--asc-gray-200, #D3D8E0);
  box-shadow: 0 14px 34px rgba(10,23,39,.14);
}


/* ==========================================================================
   6. CAROUSEL CONTROLS

   Irrelevant with one slide — nobody ever saw them. With two they're live,
   and Bootstrap's defaults are bare white chevrons floating on the artwork.
   These give them a target to sit on.
   ========================================================================== */

/* THE FLASH-AND-VANISH BUG

   Bootstrap ships these controls at z-index 1. The slide itself —
   .static-slide, section 2 — is position:relative with z-index 2, and it
   spans the full width of the carousel. So the slide has been painting on
   top of the arrows the whole time.

   That's why they appeared "briefly while the slider scrolls": during a
   transition the outgoing slide translates away and, for a few hundred
   milliseconds, the strip behind it is exposed and the arrows show through.
   Then the incoming slide covers them again.

   Confirmed by hit-testing the arrow's centre — the element on top was
   div.row.slide-1.static-slide, with the button underneath it. So they
   weren't just invisible, they were unclickable.

   z-index 5 puts them above the slide. I'm raising the controls rather than
   lowering .static-slide's z-index 2, which is original theme code with
   unknown other dependencies. */
#carouselExampleIndicators3 .carousel-control-prev,
#carouselExampleIndicators3 .carousel-control-next{
  z-index: 5;
  width: 8%;
  max-width: 76px;
  opacity: .9;
  transition: opacity .25s ease;

  /* Bootstrap's control is a full-height column — here 76 x 633px. Now that
     it sits above the slide it would swallow every click in that strip, and
     it clears the hero copy by only 2px. So the column is made click-through
     and only the 44px circle below takes the click. */
  pointer-events: none;
}

#carouselExampleIndicators3:hover .carousel-control-prev,
#carouselExampleIndicators3:hover .carousel-control-next,
#carouselExampleIndicators3 .carousel-control-prev:focus-visible,
#carouselExampleIndicators3 .carousel-control-next:focus-visible{
  opacity: 1;
}

#carouselExampleIndicators3 .carousel-control-prev-icon,
#carouselExampleIndicators3 .carousel-control-next-icon{
  /* Re-enables clicking on the circle only. The click lands on this span and
     bubbles to the button, which is what Bootstrap listens for — verified by
     clicking it and watching the active slide change. */
  pointer-events: auto;
  cursor: pointer;

  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background-color: rgba(6,14,26,.55);
  background-size: 45% 45%;
  border: 1px solid rgba(255,255,255,.22);
  transition: background-color .2s ease;
}

#carouselExampleIndicators3 .carousel-control-prev:hover .carousel-control-prev-icon,
#carouselExampleIndicators3 .carousel-control-next:hover .carousel-control-next-icon{
  background-color: var(--asc-red-500, #D71E34);
  border-color: transparent;
}

/* -- indicator dots ------------------------------------------------------ */
/* Inert until you add the markup — the template doesn't output a
   .carousel-indicators block yet. See slider-indicators-SNIPPET.php.
   The arrows say "you can move"; the dots say "there are two of these and
   you're on the first", which is the part visitors actually miss. */

/* z-index 6 for the same reason as the arrows — .static-slide's z-index 2
   would otherwise paint over the dots too, and they'd flash during the
   transition exactly like the arrows did. */
#carouselExampleIndicators3 .carousel-indicators{
  margin-bottom: 18px;
  z-index: 6;
}

#carouselExampleIndicators3 .carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border: 0;
  border-radius: 50%;
  opacity: 1;                        /* Bootstrap ships these at .5 */
  background-color: rgba(255,255,255,.45);
  transition: background-color .2s ease, transform .2s ease;
}

#carouselExampleIndicators3 .carousel-indicators .active{
  background-color: var(--asc-red-500, #D71E34);
  transform: scale(1.15);
}


/* ==========================================================================
   7. LEGACY — KEPT, BUT NOTHING ON THIS PAGE USES IT

   Both belong to slider layouts this homepage doesn't currently build. I've
   left them because the template still supports those layouts and other
   sites share this theme. Delete them if this stylesheet is site-specific.
   ========================================================================== */

/* Used by the usp_boxes slider component. No .slider-usp-row exists on the
   page right now. */
.slider-usp-row{
  position: relative;
  width: 85%;
  margin: 7em auto 1em auto;
  z-index: 2;
  padding: 0;
  text-align: center;
}

/* There is no <strong> anywhere inside .sliderfull. Note the theme also
   forces Oswald onto every <strong>, so this would render in a different
   typeface from the rest of the headline if it were ever used. */
.slider-header strong{
  display: block;
  font-size: 2.74em;
  color: #b3dce3;
}
 
.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;
  /* top: 0.3em; */
  margin-bottom: -.1em;
}




.static-slide{
    background-repeat: no-repeat;

    background-size: cover;
    position: relative;
    z-index: 2;
    margin-top: 0%;
    padding: 4.5em 6% 4.5em 6%;

    display: flex;
    align-items: center;
    color: white;
    border-bottom: 0.4em solid #d71e33;
    text-align: left;
    background-color: #1b1f47;
    overflow: hidden;
}



.static-slide{
  overflow: hidden;
  text-align: left;
}

.static-slide::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,23,39,0.92) 0%,
    rgba(10,23,39,0.72) 38%,
    rgba(10,23,39,0.28) 62%,
    rgba(10,23,39,0) 88%);
}

.static-slide::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .4;
  pointer-events: none;
  background-image: repeating-linear-gradient(-12deg, transparent 0 38px, rgba(255,255,255,.03) 38px 40px);
}

/* keep the real content above the two overlay layers above */
.static-slide > [class*="col-"]{
  position: relative;
  z-index: 1;
}

/* ---- Headline ---- */
.slider-header{
  max-width: 900px;
  letter-spacing: 0.02em;
  text-shadow: none; /* the gradient overlay now handles contrast, like the design */
}

.slider-header span{
  display: inline;             /* was display:block — this is what forced "Delivered" onto its own line */
  color: var(--asc-red-500, #D71E34);
}

/* ---- Trust points row (turns the plain bulleted list into circle-badge rows) ---- */
.slider-subline{
  max-width: 820px;
}

.trust-badge-list{
  list-style: none;
  margin: 20px 0 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-badge-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 1em;
  color: #fff;
}

.trust-badge-list li span[class^="icon-"],
.trust-badge-list li span[class*=" icon-"]{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--asc-blue-500, #005FAF);
  color: #fff;
  font-size: 16px;
}

/* middle trust point gets the red badge, matching the design's alternating accent */
.trust-badge-list li:nth-child(2) span[class^="icon-"],
.trust-badge-list li:nth-child(2) span[class*=" icon-"]{
  background: var(--asc-red-500, #D71E34);
}

/* ---- CTA buttons ---- */
.slider-btn-row{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.slider-btn-row .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 17px 36px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  color: #fff !important;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: background .2s ease-in-out;
}

.slider-btn-row .btn:hover,
.slider-btn-row .btn:focus{
  color: #fff;
  text-decoration: none;
}

.slider-btn-row .btn-primary{
  background: var(--asc-red-500, #D71E34);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); /* the "wedge" cut from the design's Button component */
}
.slider-btn-row .btn-primary:hover{
  background: var(--asc-red-600, #B01426);
}

.slider-btn-row .btn-phone{
  background: var(--asc-blue-500, #005FAF);
}
.slider-btn-row .btn-phone:hover{
  background: var(--asc-blue-600, #004A87);
}


.slide-media img,
.slide-media-img{
  width: auto;
  max-width: min(100%, 1240px);
  height: auto;
  max-height: 430px;

}


.badge-strip-section{
  background: var(--asc-gray-050, #F5F6F8);
  border-top: 3px solid var(--asc-red-500, #D71E34);
  border-bottom: 3px solid var(--asc-blue-500, #005FAF);
}

.badge-strip{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.badge-strip-label{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 13px;
  line-height: 1.2;
  color: var(--asc-blue-600, #004A87);
}

/* Per-logo height comes from the ACF "Height (px)" field as an inline style.
   The 58px here is the fallback for any row left blank. */
.badge-strip-logo{
  height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 2px;
}

@media screen and (max-width: 991px){
  .badge-strip{
    gap: 22px;
    padding: 18px 20px;
  }
  .badge-strip-label{
    flex: 0 0 100%;
    text-align: center;
  }
  /* !important is needed here specifically to beat the per-row inline height
     from ACF, so every badge drops to one shared size on small screens. */
  .badge-strip-logo{
    height: 48px !important;
  }
}





.service-card > a{
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  height: auto;
  transform: none;
}

.service-card > a:hover{
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* the old per-position icon gradients and link colours */
.service-card:nth-child(2n+1) .service-icon,
.service-card:nth-child(2n) .service-icon{
  background: var(--asc-blue-500, #005FAF);
  box-shadow: 0 4px 14px rgba(6,14,26,0.12);
}

.service-card:nth-child(2n+1) .service-more,
.service-card:nth-child(2n) .service-more{
  color: var(--asc-red-500, #D71E34);
}

.service-card > a:hover .service-icon{
  transform: none;
}

/* --------------------------------------------------------------------------

   -------------------------------------------------------------------------- */
.service-card .service-icon > span[class^="icon-"],
.service-card .service-icon > span[class*=" icon-"]{
  display: block;
  font-size: 26px;
  line-height: 1;
  color: inherit;
}

/* --------------------------------------------------------------------------
   OPTIONAL fallback glyphs (SVG).

   Only relevant if you want a snowflake / flame / bolt / droplet, which the
   icon font doesn't currently contain — I checked all 131 icon classes across
   every stylesheet on the site. If you add your own IcoMoon icons instead,
   ignore this block entirely; it costs nothing when unused.

     <span class="svc-ico svc-ico-cool"></span>   snowflake
     <span class="svc-ico svc-ico-heat"></span>   flame
     <span class="svc-ico svc-ico-elec"></span>   bolt
     <span class="svc-ico svc-ico-water"></span>  droplet
   -------------------------------------------------------------------------- */
.svc-ico{
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.svc-ico-cool{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.34 7l17.32 10M20.66 7L3.34 17M9.5 4.5L12 2l2.5 2.5M9.5 19.5L12 22l2.5-2.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.34 7l17.32 10M20.66 7L3.34 17M9.5 4.5L12 2l2.5 2.5M9.5 19.5L12 22l2.5-2.5'/%3E%3C/svg%3E");
}

.svc-ico-heat{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
}

.svc-ico-elec{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.svc-ico-water{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Section shell + header
   -------------------------------------------------------------------------- */
.top-services-section{
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 72px 24px;
  text-align: left;
}

/* OPTIONAL faint logo watermark, like the design. To switch it on, drop your
   logo URL in below and delete the two comment markers around the block.
.top-services-section::before{
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
  max-width: 55%;
  aspect-ratio: 2 / 1;
  opacity: .05;
  filter: grayscale(1);
  pointer-events: none;
  background: url('https://albrittonservice1.bwpsites.com/wp-content/uploads/YOUR-LOGO.png') no-repeat center / contain;
}
*/

.top-services-inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.top-services-header{
  position: relative;
  padding-left: 22px;
  margin-bottom: 40px;
}

/* the signature skewed red accent bar */
.top-services-header::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 2px;
    bottom: 2px;
    width: 6px;
    background: var(--asc-red-500, #D71E34);
    transform: skew(-9deg);
}

.top-services-overline{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12px;
  line-height: 1.2;
  color: var(--asc-red-500, #D71E34);
  margin-bottom: 8px;
}

.top-services-heading{
  margin: 0;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--asc-ink-900, #111418);
}

.top-services-lead{
  margin: 12px 0 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--asc-gray-700, #374151);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.top-services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(6,14,26,0.12);
}

.service-card > a{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

/* ---- photo box ---- */
.service-card-media{
  position: relative;
  height: 172px;
  flex: 0 0 auto;
  background: var(--asc-blue-700, #0A2E5C);
}

.service-card-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* blue-to-navy wash over the photo, straight from the design */
.service-card-media::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(0,95,175,0.28) 0%, rgba(10,23,39,0.42) 100%);
}

/* ---- icon badge, overlapping the bottom-left of the photo ---- */
.service-card .service-icon{
  position: absolute;
  left: 14px;
  bottom: -22px;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--asc-blue-500, #005FAF);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(6,14,26,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- card body ---- */
.service-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 20px 22px;
}

/* the legacy .servi-label rules are absolutely positioned for the old
   card design — reset that here, scoped to these cards only */
.service-card .servi-label{
  position: static;
  bottom: auto;
  left: auto;
  width: auto;
  text-shadow: none;
  margin: 0 0 10px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
  line-height: 1.05;
  color: var(--asc-ink-900, #111418);
}

.service-card-body p{
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--asc-gray-700, #374151);
}

.service-card .service-more{
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 13px;
  color: var(--asc-red-500, #D71E34);
}

.service-card .service-more .arrow{
  display: inline-block;
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-more .arrow{
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Carousel controls
   -------------------------------------------------------------------------- */
.top-services-ctrls{
  display: none;
}

.ts-carousel-btn{
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: var(--asc-red-500, #D71E34);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-carousel-btn:hover,
.ts-carousel-btn:active{
  background: var(--asc-red-600, #B01426);
  color: #fff;
}

.ts-carousel-btn > span{
  display: block;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Responsive

   Note on the 55em (880px) boundary: that's where this theme flips its
   .hide-for-small-only / .show-for-small-only switch, so it's the natural
   place to change layout. Using any other number would leave a dead zone.
   -------------------------------------------------------------------------- */

/* tablet / small laptop — 2 up */
@media screen and (max-width: 1080px) and (min-width: 55.001em){
  .top-services-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   MOBILE (under 880px) — the same cards become a swipeable carousel, one at
   a time with a peek of the next, matching how the design handles this
   breakpoint. No JS: it's CSS scroll-snap, so it swipes natively.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 55em){

  /* The theme hides anything tagged .hide-for-small-only with !important, and
     shows .show-for-small-only. The updated template no longer puts either
     class here, but these two rules mean the CSS still does the right thing
     if you paste it before the PHP — and they keep the retired mobile
     carousel down if any copy of it lingers. */
  .top-services-grid,
  .top-services-grid.hide-for-small-only{
    display: flex !important;
  }
  .top-services.show-for-small-only{
    display: none !important;
  }

  .top-services-section{
    padding: 48px 0;
  }

  /* header keeps its gutter even though the track goes edge to edge */
  .top-services-header{
    margin: 0 20px 28px;
  }

  .top-services-heading{
    font-size: 27px;
  }

  .top-services-lead{
    font-size: 16px;
  }

  .top-services-grid{
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the trailing 20px keeps the last card off the screen edge */
    padding: 0 20px 4px;
  }

  .top-services-grid::-webkit-scrollbar{
    display: none;
  }

  /* one card at a time */
  .top-services-grid > .service-card{
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* no lift on touch — there's no hover, and it fights the scroll */
  .service-card:hover{
    transform: none;
    box-shadow: none;
  }

  .service-card-media{
    height: 200px;
  }

  /* prev / next controls — hidden on desktop, shown here */
  .top-services-ctrls{
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
  }
}


/* ==========================================================================
   INTRO + FORM  /  WHY ALBRITTON  /  REVIEWS
   Matches the Claude AI design's IntroForm(), Usp4() and Reviews().

   PASTE THIS AT THE VERY BOTTOM of custom.css, after the Top Services block.

   HEADS UP — there is already live CSS for some of these classes (the pastel
   gradient .section-1, the 20px-radius .request-form-card, the light
   .section-5). The RESET section below unwinds exactly those rules, so you
   don't need to go and delete anything by hand.

   The old .usp1-* and .sec5-* rules in custom.css are now dead — the new
   markup doesn't use those classes. Harmless to leave, safe to delete.

   ONE THING THIS CSS CANNOT DO — see the note above .request-form-body.
   ========================================================================== */


/* ==========================================================================
   SHARED UTILITIES — section headers and buttons.

   Deliberately generic (.asc-head / .asc-btn) rather than per-section, so the
   remaining sections can reuse them instead of growing more CSS.
   ========================================================================== */

/* ---- section header: overline + title + lead, with the skewed accent bar -- */
.asc-head{
  position: relative;
  padding-left: 22px;
  margin-bottom: 32px;
}


.intro-form-text a[href^="tel"]{
  display: inline;
  margin-bottom: 0;
}


.asc-head::before{
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 6px;
  background: var(--asc-red-500, #D71E34);
  transform: skew(-9deg);
}

.asc-head-blue::before{
  background: var(--asc-blue-500, #005FAF);
}

.asc-head-overline{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12px;
  line-height: 1.2;
  color: var(--asc-red-500, #D71E34);
  margin-bottom: 8px;
}

.asc-head-blue .asc-head-overline{
  color: var(--asc-blue-500, #005FAF);
}

.asc-head-title{
  margin: 0;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--asc-ink-900, #111418);
}

.asc-head-lead{
  margin: 12px 0 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--asc-gray-700, #374151);
}

/* on a dark band */
.asc-head-dark .asc-head-title{
  color: #fff;
}

.asc-head-dark .asc-head-lead{
  color: var(--asc-text-inverse-muted, #A9B4C4);
}

/* centred: the design drops the accent bar when the header is centred */
.asc-head-center{
  padding-left: 0;
  text-align: center;
}

.asc-head-center::before{
  display: none;
}

.asc-head-center .asc-head-lead{
  margin-left: auto;
  margin-right: auto;
}

/* ---- buttons ---- */
.asc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1), color .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.asc-btn > span[class^="icon-"],
.asc-btn > span[class*=" icon-"]{
  font-size: 16px;
  line-height: 1;
}

/* the angled cut from the design's Button component */
.asc-btn-wedge{
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
  padding-right: 32px;
}

.asc-btn-primary,
.asc-btn-primary:visited{
  background: var(--asc-red-500, #D71E34);
  color: #fff;
}

.asc-btn-primary:hover,
.asc-btn-primary:focus{
  background: var(--asc-red-600, #B01426);
  color: #fff;
}

.asc-btn-ondark,
.asc-btn-ondark:visited{
  background: #fff;
  color: var(--asc-ink-900, #111418);
}

.asc-btn-ondark:hover,
.asc-btn-ondark:focus{
  background: var(--asc-red-500, #D71E34);
  color: #fff;
}


/* ==========================================================================
   1. INTRO + REQUEST FORM
   ========================================================================== */

/* RESET — the live .section-1 has a pastel gradient and clamp() padding */
.section-1.intro-form-section{
  position: relative;
  z-index: 0;
  background: var(--asc-gray-050, #F5F6F8);
  padding: 72px 24px;
}

.intro-form-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
}

.intro-form-copy .asc-head{
  margin-bottom: 22px;
}

.intro-form-text p{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--asc-gray-700, #374151);
}

/* the design sets the opening paragraph slightly larger */
.intro-form-text > p:first-child{
  font-size: 17px;
}

.intro-form-text a{
  color: var(--asc-red-500, #D71E34);
  font-weight: 700;
  text-decoration: none;
}

.intro-form-text a:hover{
  text-decoration: underline;
}

.intro-form-text > p:last-child{
  margin-bottom: 0;
}

/* award strip under the copy */
.intro-form-awards{
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--asc-gray-200, #D3D8E0);
}

.intro-form-awards-label{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--asc-blue-500, #005FAF);
  margin-bottom: 16px;
}

.intro-form-awards img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- the form card ----
   RESET: the live rule gives this a 20px radius, a heavy blue-tinted shadow
   and a blue border. The design is square with a light hairline. */
.request-form-card{
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(6,14,26,0.12);
  overflow: hidden;
}

.request-form-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--asc-blue-500, #005FAF);
  border-bottom: 3px solid var(--asc-red-500, #D71E34);
  color: #fff;
  text-align: left;
}

.request-form-icon{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--asc-red-500, #D71E34);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.request-form-icon > span[class^="icon-"],
.request-form-icon > span[class*=" icon-"]{
  display: block;
  font-size: 22px;
  line-height: 1;
}

.request-form-title{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}



.request-form-header p{
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--asc-text-inverse-muted, #A9B4C4);
}



.request-form-body{
  padding: 0;
  background: var(--asc-navy-900, #0A1727);
}

.request-form-body iframe{
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  /* the one that matters — see note 2 above */
  background: transparent;
}

/* ==========================================================================
   2. WHY ALBRITTON (dark USP band)
   ========================================================================== */
.usp4-section{
  background: var(--asc-navy-900, #0A1727);
  padding: 72px 24px;
}

.usp4-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.usp4-inner .asc-head{
  margin-bottom: 36px;
}

.usp4-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.usp4-card{
  padding: 28px 24px;
  background: var(--asc-navy-950, #060E1A);
  border: 1px solid rgba(255,255,255,0.10);
}

.usp4-icon{
  display: block;
  margin-bottom: 14px;
  color: var(--asc-blue-500, #005FAF);
}

/* the icon markup comes from the ACF "Icon" field, same as Top Services */
.usp4-icon > span[class^="icon-"],
.usp4-icon > span[class*=" icon-"]{
  display: block;
  font-size: 46px;
  line-height: 1;
  color: inherit;
}



.usp4-title{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 20px;
  line-height: 1.1;
  color: #fff;
}

.usp4-card p{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--asc-text-inverse-muted, #A9B4C4);
}


.usp4-card{
  transition: background-color .25s ease,
              border-color .25s ease,
              transform .25s ease,
              box-shadow .25s ease;
}

.usp4-card:hover{
  background-color: #150B12;                      /* navy-950 warmed toward red */
  border-color: var(--asc-red-500, #D71E34);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.usp4-card:hover .usp4-icon{
  color: var(--asc-red-500, #D71E34);             /* from blue-500 */
}

.usp4-card:hover .usp4-title{
  color: var(--asc-red-400, #E1173D);
}

/* ==========================================================================
   3. REVIEWS
   ========================================================================== */

/* RESET — the live .section-5 is a light gradient with dark text */
.section-5.reviews-section{
  position: relative;
  background: var(--asc-navy-900, #0A1727);
  color: #fff;
  padding: 72px 24px;
}

.reviews-inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* frame around the Elfsight embed. min-height stops the section collapsing
   while the widget is still loading. */
.reviews-embed{
  min-height: 320px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

.reviews-embed > p:empty{
  display: none;
}

.reviews-cta{
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   RESPONSIVE
   Same 55em (880px) boundary the theme itself switches on.
   ========================================================================== */
@media screen and (max-width: 1080px){
  .usp4-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 55em){
  .intro-form-inner{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .section-1.intro-form-section,
  .usp4-section,
  .section-5.reviews-section{
    padding: 48px 20px;
  }

  .asc-head-title{
    font-size: 27px;
  }

  .asc-head-lead{
    font-size: 16px;
  }

  .request-form-title{
    font-size: 19px;
  }

  .usp4-grid{
    grid-template-columns: 1fr;
  }

  .reviews-cta .asc-btn{
    flex: 1 1 100%;
  }
}





/* ==========================================================================
   ADDITIONAL SERVICES — matches the Claude AI design's AdditionalServices():
   blue-accented header, intro copy, then the team photo beside a tabbed
   service directory, and a centred closing line.

   PASTE THIS AT THE VERY BOTTOM of custom.css, after the previous blocks.

   Depends on the shared .asc-head utilities from intro-usp-reviews-styling.css
   — paste that file first if you haven't.

   The old .sec3-wrap / .sec3-services-* rules in custom.css are now dead; the
   new markup doesn't use those classes. Harmless to leave, safe to delete.
   ========================================================================== */

/* RESET — the live .section-3 sets a grey-blue background and clamp() padding.
   The compound selector out-ranks it, so order doesn't matter here. */
.section-3.addsvc-section{
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: #fff;
  padding: 72px 24px;
}

/* the design's faint diagonal blue hatching across the whole section */
.addsvc-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(-12deg, transparent 0 46px, rgba(0,95,175,0.05) 46px 48px);
}

.addsvc-inner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.addsvc-inner .asc-head{
  margin-bottom: 22px;
}

.addsvc-intro{
  max-width: 900px;
  margin: 0 0 36px;
}

.addsvc-intro p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--asc-gray-700, #374151);
}

.addsvc-intro p:last-child{
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Photo + panel layout
   -------------------------------------------------------------------------- */
.addsvc-layout{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: stretch;
}

.addsvc-photo{
  position: relative;
  min-height: 420px;
  border: 3px solid #fff;
  /* the design's offset ink shadow */
  box-shadow: -0.35em 0.35em 0 var(--asc-ink-900, #111418);
}

.addsvc-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
/* Deliberate deviation from the design: the panel is made to fill the column
   so it lines up with the photo's height. The design's shortest category had
   plenty of items; here Generators has two, which would otherwise leave an
   obvious gap beside the photo when that tab is open. */
.addsvc-panelcol{
  display: flex;
  flex-direction: column;
}

.addsvc-panel.is-active{
  flex: 1 1 auto;
}

.addsvc-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.addsvc-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  background: var(--asc-gray-100, #E9ECF1);
  color: var(--asc-gray-700, #374151);
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1), color .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.addsvc-tab > span[class^="icon-"],
.addsvc-tab > span[class*=" icon-"]{
  font-size: 16px;
  line-height: 1;
  color: var(--asc-blue-500, #005FAF);
}

.addsvc-tab:hover{
  background: var(--asc-gray-200, #D3D8E0);
}

.addsvc-tab.is-active{
  background: var(--asc-blue-500, #005FAF);
  color: #fff;
}

.addsvc-tab.is-active > span[class^="icon-"],
.addsvc-tab.is-active > span[class*=" icon-"]{
  color: #fff;
}

.addsvc-tab:focus-visible{
  outline: 2px solid var(--asc-red-500, #D71E34);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Tab panels
   -------------------------------------------------------------------------- */
.addsvc-panel{
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-top: 3px solid var(--asc-blue-500, #005FAF);
  background: var(--asc-gray-050, #F5F6F8);
  padding: 22px 24px;
}

/* belt and braces: the [hidden] attribute is what the script toggles, but a
   stray display rule elsewhere could override it, so pin it here too */
.addsvc-panel[hidden]{
  display: none;
}

.addsvc-panel-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.addsvc-panel-icon{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--asc-ink-900, #111418);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addsvc-panel-icon > span[class^="icon-"],
.addsvc-panel-icon > span[class*=" icon-"]{
  display: block;
  font-size: 22px;
  line-height: 1;
}

.addsvc-panel-label{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 22px;
  line-height: 1.1;
  color: var(--asc-ink-900, #111418);
}

.addsvc-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
}

.addsvc-item{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--asc-gray-700, #374151);
  text-decoration: none;
  border-bottom: 1px solid var(--asc-gray-200, #D3D8E0);
}

.addsvc-item:hover{
  color: var(--asc-red-500, #D71E34);
}

.addsvc-item-icon{
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--asc-red-500, #D71E34);
}

.addsvc-closing{
  margin: 32px 0 0;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
  text-align: center;
  color: var(--asc-ink-900, #111418);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .addsvc-layout{
    grid-template-columns: 1fr;
  }
  .addsvc-photo{
    min-height: 280px;
  }
}

@media screen and (max-width: 55em){
  .section-3.addsvc-section{
    padding: 48px 20px;
  }
  .addsvc-list{
    grid-template-columns: 1fr;
  }
  .addsvc-tab{
    padding: 10px 13px;
    font-size: 12.5px;
  }
  .addsvc-panel{
    padding: 18px 16px;
  }
  .addsvc-panel-label{
    font-size: 19px;
  }
  .addsvc-closing{
    font-size: 16px;
    text-align: left;
  }
}




.coupons-section{
  position: relative;
  overflow: hidden;
  background: var(--asc-ink-900, #111418);
  padding: 72px 24px;
}

/* dark wash, so the band reads as near-black even if a photo is added below */
.coupons-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,23,39,0.92) 0%, rgba(10,23,39,0.88) 100%);
}

/* the design's diagonal stripe texture */
.coupons-section::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .6;
  pointer-events: none;
  background-image: repeating-linear-gradient(-12deg, transparent 0 38px, rgba(255,255,255,.035) 38px 40px);
}

/* OPTIONAL — the design also puts a team photo behind the wash above. It ends
   up ~90% covered, so it only adds texture. To switch it on, drop your image
   URL in here and delete the two comment markers around the block.
.coupons-section{
  background-image: url('https://albrittonservice1.bwpsites.com/wp-content/uploads/2026/08/team-trucks.webp');
  background-size: cover;
  background-position: center;
}
*/

.coupons-inner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.coupons-inner .asc-head{
  margin-bottom: 36px;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
/* The track is a horizontal scroll-snap carousel at EVERY width, not just on
   mobile — four cards visible on desktop, and the arrows page through in
   fours if there are more than four coupons. The card widths below are what
   set "how many at a time"; the script measures them and steps by a whole
   page, so it needs no breakpoints of its own. */
.cpn-grid{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* room for the dashed outline's box-shadow-free edge, and so a mid-scroll
     card isn't clipped hard against the container */
  padding-bottom: 4px;
}

.cpn-grid::-webkit-scrollbar{
  display: none;
}

.cpn-card{
  position: relative;
  display: flex;
  /* four across: 3 gaps of 20px shared over 4 cards */
  flex: 0 0 calc(25% - 15px);
  scroll-snap-align: start;
}

/* The dashed outline is drawn on the inner element with an inset outline,
   exactly as the design does it, so the dashes sit inside the card edge
   rather than on it. */
.cpn-card-inner{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 32px;
  color: #fff;
  background: var(--asc-ink-900, #111418);
  outline: 3px dashed rgba(255,255,255,0.8);
  outline-offset: -12px;
}

.cpn-price{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  color: var(--asc-red-500, #D71E34);
}

.cpn-offer{
  margin: 10px 0 6px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
}

.cpn-terms{
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--asc-text-inverse-muted, #A9B4C4);
}

/* push the button to the bottom so cards with different amounts of text
   still line their CTAs up */
.cpn-btn{
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Carousel controls + View All footer

   The controls are shown at all widths now. The script sets an inline
   display:none on them when the track doesn't overflow, so with exactly four
   coupons you get no dead arrows, and they come back on their own when a
   fifth is added.
   -------------------------------------------------------------------------- */
/* Scoped to this section: Our Standard gates its own arrows purely in CSS
   (grid on desktop, no arrows), and an unscoped rule here would switch them
   back on. */
.coupons-section .asc-carousel-ctrls{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

.cpn-footer{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* two at a time */
@media screen and (max-width: 1080px){
  .cpn-grid > .cpn-card{
    flex: 0 0 calc(50% - 10px);
  }
}

/* one at a time */
@media screen and (max-width: 55em){
  .coupons-section{
    padding: 48px 0;
  }

  .coupons-inner .asc-head,
  .cpn-footer{
    margin-left: 20px;
    margin-right: 20px;
  }

  .cpn-grid{
    gap: 14px;
    scroll-padding-left: 20px;
    padding: 0 20px 4px;
  }

  .cpn-grid > .cpn-card{
    flex: 0 0 100%;
  }

  .cpn-price{
    font-size: 44px;
  }
}










.usp6-section{
  background: var(--asc-gray-050, #F5F6F8);
  padding: 72px 24px;
}

.usp6-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.usp6-inner .asc-head{
  margin-bottom: 22px;
}

/* wider than the standard .asc-head-lead (620px) — the design gives this
   paragraph 920px because it runs long */
.usp6-intro{
  max-width: 920px;
  margin: 0 0 40px;
}

.usp6-intro p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--asc-gray-700, #374151);
}

.usp6-intro p:last-child{
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tiles
   -------------------------------------------------------------------------- */
.usp6-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.usp6-card{
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
}



.usp6-icon{
  display: block;
  margin-bottom: 14px;
  color: var(--asc-blue-500, #005FAF);
}

.usp6-icon > span[class^="icon-"],
.usp6-icon > span[class*=" icon-"]{
  display: block;
  font-size: 46px;
  line-height: 1;
  color: inherit;
}

/* Deviation from the design: it leaves the icon blue-500 even on the red
   tile, which clashes and reads badly. White on red instead. */
.usp6-card.is-highlight .usp6-icon{
  color: #005faf;
}

.usp6-title{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 20px;
  line-height: 1.1;
  color: var(--asc-ink-900, #111418);
}

.usp6-card p{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--asc-gray-700, #374151);
}

.usp6-card.is-highlight .usp6-title,
.usp6-card.is-highlight p{
  color: #000000;
}

/* --------------------------------------------------------------------------
   Hover — the whole tile goes red.

   Transitioning background/border/colour rather than opacity so the text
   stays crisp. The already-red first tile deepens instead, so it still
   responds rather than looking inert.
   -------------------------------------------------------------------------- */
.usp6-card{
  transition: background .18s cubic-bezier(0.4, 0, 0.2, 1),
              border-color .18s cubic-bezier(0.4, 0, 0.2, 1);
}

.usp6-icon,
.usp6-title,
.usp6-card p{
  transition: color .18s cubic-bezier(0.4, 0, 0.2, 1);
}

.usp6-card:hover{
  background: var(--asc-red-400, #E1173D);
  border-color: var(--asc-red-400, #E1173D);
}

.usp6-card:hover .usp6-icon,
.usp6-card:hover .usp6-title,
.usp6-card:hover p{
  color: #fff;
}

/* the highlighted tile deepens on hover */
.usp6-card.is-highlight:hover{
  background: var(--asc-red-600, #B01426);
  border-color: var(--asc-red-600, #B01426);
}

/* no hover repaint on touch devices — it sticks after a tap and looks stuck */
@media (hover: none){
  .usp6-card:hover{
    background: #fff;
    border-color: var(--asc-gray-200, #D3D8E0);
  }
  .usp6-card:hover .usp6-icon{ color: var(--asc-blue-500, #005FAF); }
  .usp6-card:hover .usp6-title{ color: var(--asc-ink-900, #111418); }
  .usp6-card:hover p{ color: var(--asc-gray-700, #374151); }
  .usp6-card.is-highlight:hover{
    background: var(--asc-red-400, #E1173D);
    border-color: var(--asc-red-400, #E1173D);
  }
  .usp6-card.is-highlight:hover .usp6-icon,
  .usp6-card.is-highlight:hover .usp6-title,
  .usp6-card.is-highlight:hover p{ color: #fff; }
}

/* --------------------------------------------------------------------------
   Carousel chrome — SCOPED to this section.

   Deliberately hidden by default and only turned on inside the small-screen
   media query below, so desktop is a plain grid with no arrows as a matter of
   CSS, not something JavaScript has to switch off. An earlier version showed
   the arrows by default and relied on the shared script to hide them, which
   meant they appeared on desktop whenever that script didn't reach this
   section. The script still hides/shows them too; the two agree.

   Scoped with .usp6-section so it can't affect the Coupons carousel, which
   genuinely does want arrows on desktop.
   -------------------------------------------------------------------------- */
.usp6-section .asc-carousel-ctrls{
  display: none;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

.ts-carousel-btn{
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: var(--asc-red-500, #D71E34);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-carousel-btn:hover,
.ts-carousel-btn:active{
  background: var(--asc-red-600, #B01426);
  color: #fff;
}

.ts-carousel-btn > span{
  display: block;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .usp6-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* one at a time, swipeable, with the arrows switched on here */
@media screen and (max-width: 55em){
  .usp6-section{
    padding: 48px 0;
  }

  .usp6-inner .asc-head,
  .usp6-intro{
    margin-left: 20px;
    margin-right: 20px;
  }

  .usp6-grid{
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px 4px;
  }

  .usp6-grid::-webkit-scrollbar{
    display: none;
  }

  .usp6-grid > .usp6-card{
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .usp6-section .asc-carousel-ctrls{
    display: flex;
  }
}



















.community-section{
  position: relative;
  overflow: hidden;
  background: var(--asc-navy-950, #060E1A);
  color: #fff;
  padding: 72px 24px;
}

/* the design's diagonal stripe texture */
.community-section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  background-image: repeating-linear-gradient(-12deg, transparent 0 38px, rgba(255,255,255,.03) 38px 40px);
}

.community-inner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Photo — white border with the offset red shadow behind it
   -------------------------------------------------------------------------- */
.community-photo {
    position: relative;
    aspect-ratio: 3 / 3;
    border: 3px solid #fff;
    box-shadow: -0.35em 0.35em 0 var(--asc-red-500, #D71E34);
}

.community-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.community-overline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--asc-blue-400, #2E86D6);
}

/* the flame sits in red while the label stays blue */
.community-overline > span[class^="icon-"],
.community-overline > span[class*=" icon-"]{
  font-size: 16px;
  line-height: 1;
  color: var(--asc-red-400, #E1173D);
}

.community-title{
  margin: 0 0 18px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 32px;
  line-height: 1.05;
}

/* two-tone: white up to and including the colon, red after it. The PHP does
   the splitting; if the heading has no colon it all lands in the white half. */
.community-title-a{
  color: #fff;
}

.community-title-b{
  color: var(--asc-red-500, #D71E34);
}

.community-text p{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--asc-text-inverse-muted, #A9B4C4);
}

.community-text p:last-child{
  margin-bottom: 0;
}

.community-cta{
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .community-inner{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* the offset shadow reads as a mistake once the photo is full width, so
     tighten it rather than dropping it entirely */
  .community-photo{
    box-shadow: -0.22em 0.22em 0 var(--asc-red-500, #D71E34);
  }
}

@media screen and (max-width: 55em){
  .community-section{
    padding: 48px 20px;
  }

  .community-title{
    font-size: 26px;
  }

  .community-cta .asc-btn{
    width: 100%;
  }
}

















/* ---------------------- */


/* ---------------------- */


















.closing-cta-section{
  background: #fff;
  padding: 64px 24px;
}

.closing-cta-inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Award badge row
   -------------------------------------------------------------------------- */
.closing-cta-badges{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--asc-gray-200, #D3D8E0);
}

.closing-cta-badges-label{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 13px;
  line-height: 1.3;
  color: var(--asc-blue-500, #005FAF);
}

/* Height-capped rather than width-capped: these are mixed-shape award logos,
   and matching their heights is what makes a row of them look deliberate. */
.closing-cta-badge{
  height: 110px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------------------
   The CTA bar
   -------------------------------------------------------------------------- */
.closing-cta-bar{
  position: relative;
  overflow: hidden;
  padding: 28px 40px;
}

/* the navy ground with the design's angled right edge. Drawn as a layer
   behind the content so the clip can't take a bite out of the text. */
.closing-cta-bar::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--asc-navy-900, #0A1727);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}

.closing-cta-bar > *{
  position: relative;
  z-index: 1;
}

.closing-cta-bar{
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.closing-cta-subtitle{
  margin-bottom: 4px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12px;
  line-height: 1.3;
  color: var(--asc-red-400, #E1173D);
}

.closing-cta-title{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 30px;
  line-height: 1.05;
  color: #fff;
}

.closing-cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Button variants this section needs.

   .asc-btn-lg and .asc-btn-secondary aren't in intro-usp-reviews-styling.css,
   so they're defined here. Kept as generic .asc-btn modifiers rather than
   section-scoped, so later sections can reuse them.
   -------------------------------------------------------------------------- */
/* Buttons need border-box or a full-width one overflows. <button> gets
   border-box from the UA stylesheet but <a class="asc-btn"> does not, so at
   mobile width the anchor came out 72px (its own padding) wider than its
   container while the button next to it fitted. Set on .asc-btn generally
   rather than scoped here, so it fixes every full-width use of these
   buttons, not just this section's. */
.asc-btn{
  box-sizing: border-box;
}

.asc-btn-lg{
  padding: 17px 36px;
  font-size: 18px;
}

/* the wedge cut eats into the right padding, so give it back */
.asc-btn-lg.asc-btn-wedge{
  padding-right: 44px;
}

.asc-btn-secondary,
.asc-btn-secondary:visited{
  background: var(--asc-blue-500, #005FAF);
  color: #fff;
}

.asc-btn-secondary:hover,
.asc-btn-secondary:focus{
  background: var(--asc-blue-600, #004A87);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .closing-cta-bar{
    justify-content: center;
    text-align: center;
  }

  .closing-cta-actions{
    justify-content: center;
  }

  .closing-cta-badge{
    height: 88px;
  }
}

@media screen and (max-width: 55em){
  .closing-cta-section{
    padding: 48px 20px;
  }

  .closing-cta-badges{
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .closing-cta-badges-label{
    flex: 0 0 100%;
    text-align: center;
  }

  .closing-cta-badge{
    height: 70px;
  }

  .closing-cta-bar{
    padding: 24px 22px;
  }

  /* the angled edge is a nice detail at width but just looks like a
     rendering fault on a narrow bar */
  .closing-cta-bar::before{
    clip-path: none;
  }

  .closing-cta-title{
    font-size: 23px;
  }

  .closing-cta-actions{
    width: 100%;
    flex-direction: column;
  }

  .closing-cta-actions .asc-btn{
    width: 100%;
  }

  /* a full-width wedge button reads as a mistake, so square it off */
  .closing-cta-actions .asc-btn-wedge{
    clip-path: none;
    padding-right: 36px;
  }
}










.areas-section{
  background: #fff;
  padding: 72px 24px;
}

.areas-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: stretch;
}

.areas-col .asc-head{
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   ZIP checker
   -------------------------------------------------------------------------- */
.areas-zip{
  background: var(--asc-gray-050, #F5F6F8);
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-top: 3px solid var(--asc-blue-500, #005FAF);
  padding: 16px 18px;
  margin-bottom: 22px;
}

.areas-zip-label{
  margin-bottom: 10px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12px;
  line-height: 1.3;
  color: var(--asc-ink-900, #111418);
}

.areas-zip-row{
  display: flex;
  gap: 8px;
}

/* min-width:0 matters — without it a flex item refuses to shrink below its
   intrinsic width and the button gets pushed out of the box on narrow screens */
.areas-zip-input{
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--asc-font-body, 'Open Sans', system-ui, sans-serif);
  color: var(--asc-ink-900, #111418);
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-radius: 2px;
  outline: none;
}

.areas-zip-input:focus{
  border-color: var(--asc-blue-500, #005FAF);
  box-shadow: 0 0 0 2px rgba(0,95,175,0.15);
}

.areas-zip-btn{
  flex: 0 0 auto;
}

.areas-zip-result{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--asc-gray-700, #374151);
}

.areas-zip-result:empty{
  display: none;
}

.areas-zip-result.is-yes{
  color: var(--asc-blue-600, #004A87);
}

.areas-zip-result.is-no{
  color: var(--asc-red-600, #B01426);
}

/* visually hidden but still read out — the input's only label */
.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   City chips — two columns, capped height with its own scroll so a long list
   can't stretch the section past the map beside it
   -------------------------------------------------------------------------- */
.areas-chips{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 6px;
}

.areas-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 13px;
  line-height: 1.2;
  color: var(--asc-ink-900, #111418);
  text-decoration: none;
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1), color .15s cubic-bezier(0.4, 0, 0.2, 1), border-color .15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the design fills the first chip — the home town */
.areas-chip.is-primary{
  background: var(--asc-blue-500, #005FAF);
  border-color: var(--asc-blue-500, #005FAF);
  color: #fff;
}

.areas-chip-pin{
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--asc-red-500, #D71E34);
}

.areas-chip.is-primary .areas-chip-pin{
  color: #fff;
}

/* only the linked chips are interactive, so only they get a hover */
a.areas-chip:hover{
  background: var(--asc-blue-500, #005FAF);
  border-color: var(--asc-blue-500, #005FAF);
  color: #fff;
}

a.areas-chip:hover .areas-chip-pin{
  color: #fff;
}

@media (hover: none){
  a.areas-chip:hover{
    background: #fff;
    border-color: var(--asc-gray-200, #D3D8E0);
    color: var(--asc-ink-900, #111418);
  }
  a.areas-chip:hover .areas-chip-pin{
    color: var(--asc-red-500, #D71E34);
  }
  a.areas-chip.is-primary:hover{
    background: var(--asc-blue-500, #005FAF);
    border-color: var(--asc-blue-500, #005FAF);
    color: #fff;
  }
  a.areas-chip.is-primary:hover .areas-chip-pin{
    color: #fff;
  }
}

/* --------------------------------------------------------------------------
   Map

   The embed is a Google My Maps iframe carrying width/height ATTRIBUTES.
   Those are presentational attributes, which lose to any stylesheet rule, so
   no !important is needed to resize it.

   The negative top pulls the embed's own title bar up out of view, which is
   how the design crops it — hence overflow:hidden on the frame.
   -------------------------------------------------------------------------- */
.areas-map{
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border: 3px solid #fff;
  box-shadow: -0.35em 0.35em 0 var(--asc-ink-900, #111418);
  background: var(--asc-gray-100, #E9ECF1);
}

.areas-map iframe{
  position: absolute;
  top: -62px;
  left: 0;
  width: 100%;
  height: calc(100% + 62px);
  border: 0;
  display: block;
}



















/* ==========================================================================
   SERVICE AREAS — v2 (replaces two earlier blocks)

   PASTE THIS AT THE VERY BOTTOM of custom.css, and DELETE the two blocks it
   replaces:

       service-areas-styling.css   (opens "SERVICE AREAS — matches the Claude
                                    AI design's ServiceAreas()")
       areas-closing-band.css      (opens "SERVICE AREAS — CLOSING BAND")

   Both are folded in here. Leaving them in place would work — everything
   below either supersedes or restates them — but you'd be maintaining three
   copies of the same section.

   KEEP: intro-usp-reviews-styling.css (the shared .asc-head / .asc-btn
   utilities) and tel-link-fix.css. Both are needed and neither is duplicated
   here.

   WHAT'S NEW: the place list. Every parish and town now carries the service
   pages that exist for it as small links underneath. It stays in the left
   column beside the map, inside its own capped scroller — 31 places at five
   links each is far more than the column can show at once, so the scrollbar
   does the work.
   ========================================================================== */

.areas-section{
  background: #fff;
  padding: 72px 24px;
}

/* --------------------------------------------------------------------------
   Top row: header + ZIP checker on the left, map on the right
   -------------------------------------------------------------------------- */
.areas-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: stretch;
}

/* A grid track sized `1fr` is really `minmax(auto, 1fr)`, and that `auto`
   minimum is the item's min-content width — which a grid item will happily
   overflow its container to satisfy. The ZIP row is the offender: the Check
   button is `flex: 0 0 auto` at 146px and Chrome still counts the input's
   full intrinsic 224px toward the row's min-content even though the input is
   `flex: 1; min-width: 0`. That made the left column demand 416px inside a
   374px phone and pushed 22px of horizontal scroll onto the whole page.
   min-width:0 here releases the track's automatic minimum. */
.areas-inner > *{
  min-width: 0;
}

.areas-col .asc-head{
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   ZIP checker
   -------------------------------------------------------------------------- */
.areas-zip{
  background: var(--asc-gray-050, #F5F6F8);
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-top: 3px solid var(--asc-blue-500, #005FAF);
  padding: 16px 18px;
}

.areas-zip-label{
  margin-bottom: 10px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-overline, 0.14em);
  font-size: 12px;
  line-height: 1.3;
  color: var(--asc-ink-900, #111418);
}

.areas-zip-row{
  display: flex;
  gap: 8px;
}

/* min-width:0 matters — without it a flex item refuses to shrink below its
   intrinsic width and the button gets pushed out of the box on narrow screens */
.areas-zip-input{
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--asc-font-body, 'Open Sans', system-ui, sans-serif);
  color: var(--asc-ink-900, #111418);
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  border-radius: 2px;
  outline: none;
}

.areas-zip-input:focus{
  border-color: var(--asc-blue-500, #005FAF);
  box-shadow: 0 0 0 2px rgba(0,95,175,0.15);
}

.areas-zip-btn{
  flex: 0 0 auto;
}

.areas-zip-result{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--asc-gray-700, #374151);
}

.areas-zip-result:empty{
  display: none;
}

.areas-zip-result.is-yes{
  color: var(--asc-blue-600, #004A87);
}

.areas-zip-result.is-no{
  color: var(--asc-red-600, #B01426);
}

/* visually hidden but still read out — the input's only label */
.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Map

   The embed is a Google My Maps iframe carrying width/height ATTRIBUTES.
   Those are presentational attributes, which lose to any stylesheet rule, so
   no !important is needed to resize it.

   The negative top pulls the embed's own title bar up out of view, which is
   how the design crops it — hence overflow:hidden on the frame.
   -------------------------------------------------------------------------- */
.areas-map{
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border: 3px solid #fff;
  box-shadow: -0.35em 0.35em 0 var(--asc-ink-900, #111418);
  background: var(--asc-gray-100, #E9ECF1);
}

.areas-map iframe{
  position: absolute;
  top: -62px;
  left: 0;
  width: 100%;
  height: calc(100% + 62px);
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   The place index — inside the left column, in its own scroller

   Why a scroller and not a taller column: 31 places at five links each is
   roughly 1,500px of cards in a ~500px column. Capping it and letting the
   scrollbar do the work is the whole point.

   The cap is a fixed max-height rather than "fill the remaining space".
   Flexing to fill sounds tidier but doesn't work here: .areas-inner uses
   align-items:stretch, so the row's height comes from its tallest item — a
   scroller whose flex-basis is its content would make the left column ~1,800px
   tall and drag the map up to match, and a flex-basis of 0 collapses to
   nothing at the stacked breakpoints where there's no map to stretch against.
   A fixed cap is predictable at every width, and stretch still keeps the map
   and the column the same height.
   -------------------------------------------------------------------------- */
.areas-places-scroll{
  margin-top: 22px;
  padding-top: 18px;
  padding-right: 4px;
  border-top: 1px solid var(--asc-gray-200, #D3D8E0);
  max-height: 360px;
  overflow-y: auto;

  /* reserves the bar's own width whether or not it's showing, so the columns
     don't reflow when the list happens to fit. The padding above is only the
     gap between the cards and the bar — reserving another 10px there would
     leave 20px of dead space. */
  scrollbar-gutter: stable;

  /* Styling the bar has a second effect worth having: it opts Chrome out of
     macOS overlay scrollbars, so the bar is visible at rest and the panel
     reads as scrollable before anyone touches it. */
  scrollbar-width: thin;
  scrollbar-color: var(--asc-gray-200, #D3D8E0) var(--asc-gray-050, #F5F6F8);
}

.areas-places-scroll::-webkit-scrollbar{
  width: 10px;
}

.areas-places-scroll::-webkit-scrollbar-track{
  background: var(--asc-gray-050, #F5F6F8);
}

.areas-places-scroll::-webkit-scrollbar-thumb{
  background: var(--asc-gray-200, #D3D8E0);
  border: 2px solid var(--asc-gray-050, #F5F6F8);
}

.areas-places-scroll::-webkit-scrollbar-thumb:hover{
  background: var(--asc-blue-500, #005FAF);
}

/* auto-fill with a 205px floor rather than a fixed column count: two columns
   in the left-hand column at desktop, more once the layout stacks and the
   scroller has the full width. */
.areas-places{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
  align-content: start;
  /* a grid row is as tall as its tallest cell, so without this an odd
     number of one-line cards leaves the last of them stretched into a tall
     empty box beside a town card */
  align-items: start;
}

.areas-place{
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
}

/* parishes are the broader landing pages, so they get a blue left edge to set
   them apart from the towns without a second visual language */
.areas-place.is-area{
  border-left: 3px solid var(--asc-blue-500, #005FAF);
}

/* the design fills the home town's chip */
.areas-place.is-primary{
  background: #ffffff;
  border-color: #ffffff;
  border-left: 3px solid var(--asc-blue-500, #005FAF);
}

/* ---- the place name ---- */
.areas-place-name{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--asc-ink-900, #111418);
  text-decoration: none;
}

.areas-place-pin{
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--asc-red-500, #D71E34);
}

.areas-place.is-primary ,
.areas-place.is-primary .areas-place-pin{
  color: #d71e34;
}

/* only a linked name is interactive, so only it gets a hover */
a.areas-place-name:hover,
a.areas-place-name:hover .areas-place-pin{
  color: var(--asc-blue-600, #004A87);
}

.areas-place.is-primary a.areas-place-name:hover,
.areas-place.is-primary a.areas-place-name:hover .areas-place-pin{
  color: #fff;
  text-decoration: underline;
}

/* ---- the service links ---- */
.areas-place-svcs{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* Neutral by default rather than a colour per service: five brand-coloured
   pills times twenty-five towns is a lot of noise in a section that already
   has a blue chip, red pins and a bordered map. Red on hover carries the
   affordance. (Per-service colours are easy to add — see the commented block
   at the foot of this file.) */
.areas-svc{
  display: inline-block;
  padding: 3px 6px;
  background: var(--asc-gray-050, #F5F6F8);
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  line-height: 1.3;
  color: var(--asc-gray-700, #374151);
  text-decoration: none;
  transition: background .15s cubic-bezier(0.4, 0, 0.2, 1), color .15s cubic-bezier(0.4, 0, 0.2, 1), border-color .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.areas-svc:hover,
.areas-svc:focus{
  background: var(--asc-red-500, #D71E34);
  border-color: var(--asc-red-500, #D71E34);
  color: #fff;
}

/* touch devices keep :hover applied after a tap, which leaves a stray red
   pill behind on the way to the next page */
@media (hover: none){
  .areas-svc:hover{
    background: var(--asc-gray-050, #F5F6F8);
    border-color: var(--asc-gray-200, #D3D8E0);
    color: var(--asc-gray-700, #374151);
  }
}

/* --------------------------------------------------------------------------
   Closing band

   In the design this line is the top band of the FOOTER: full width, navy
   ground, a red rule above it, text centred and capped at 820px, phone in
   red-400. The markup keeps it inside .areas-section, so negative margins
   break it out of the section's own padding and land it flush on the footer.
   Both numbers track .areas-section's padding — see the media query.
   -------------------------------------------------------------------------- */
.areas-closing{
  max-width: none;
  margin: 56px -24px -72px;
  padding: 22px 24px;
  border-top: 3px solid var(--asc-red-500, #D71E34);
  background: var(--asc-navy-900, #0A1727);
}

.areas-closing p{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  color: #fff;
}

.areas-phone-link{
  font-weight: 700;
  text-decoration: none;
}

/* red-400 rather than red-500 — the lighter red is the one that holds up
   against navy. (0,3,1) so it also clears the a[href^="tel"] override in
   tel-link-fix.css, which is (0,2,1). */
.areas-closing a[href^="tel"].areas-phone-link{
  color: var(--asc-red-400, #E1173D);
}

.areas-closing a[href^="tel"].areas-phone-link:hover{
  color: #fff;
  text-decoration: underline;
}

/* The live footer carries border-top: 3px solid red (from
   .site-footer.foot-main). With the band directly above it that red line
   lands BETWEEN the band and the footer columns — two red rules 70px apart.
   The design has one red rule above the text and a hairline below, so the
   footer's rule becomes that hairline.

   Scoped from <body> rather than as a sibling selector because the footer
   isn't a sibling of .areas-section — the section is inside div.site and the
   footer is a direct child of <body>. :has() keeps this to pages that have
   the band; in a browser without :has() the rule is dropped and the red line
   simply stays. */
body:has(.areas-closing) > footer.site-footer.foot-main{
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .areas-inner{
    grid-template-columns: 1fr;
  }

  .areas-map{
    min-height: 380px;
    box-shadow: -0.22em 0.22em 0 var(--asc-ink-900, #111418);
  }
}

@media screen and (max-width: 55em){
  .areas-section{
    padding: 48px 20px;
  }

  .areas-places{
    /* 190px so two columns still fit a 414px phone; the pills wrap rather
       than overflow */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* a nested scroller that fills the screen is a trap on touch — 55vh keeps
     page above and below it to scroll the document with */
  .areas-places-scroll{
    max-height: 55vh;
  }

  .areas-map{
    min-height: 320px;
  }

  /* has to match the section's padding at this width */
  .areas-closing{
    margin: 40px -20px -48px;
    padding: 20px;
  }

  .areas-closing p{
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   OPTIONAL: per-service pill colours, the All Climate treatment

   Uncomment to tint each service the way the reference site does. Heating
   red and Cooling blue are the obvious two; the other three have to borrow,
   which is why this isn't on by default.
   -------------------------------------------------------------------------- */
/*
.areas-svc-heating{
  background: rgba(215, 30, 52, 0.08);
  border-color: rgba(215, 30, 52, 0.35);
  color: var(--asc-red-600, #B01426);
}

.areas-svc-cooling{
  background: rgba(0, 95, 175, 0.08);
  border-color: rgba(0, 95, 175, 0.35);
  color: var(--asc-blue-600, #004A87);
}

.areas-svc-plumbing{
  background: rgba(46, 134, 214, 0.10);
  border-color: rgba(46, 134, 214, 0.40);
  color: var(--asc-blue-600, #004A87);
}

.areas-svc-electrical{
  background: rgba(225, 23, 61, 0.07);
  border-color: rgba(225, 23, 61, 0.30);
  color: var(--asc-red-600, #B01426);
}
*/















/* --------------------------------------------------------------------------
   Closing line
   -------------------------------------------------------------------------- */
.areas-closing{
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--asc-gray-200, #D3D8E0);
}

.areas-closing p{
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--asc-gray-700, #374151);
}

.areas-phone-link{
  color: var(--asc-red-500, #D71E34);
  font-weight: 700;
  text-decoration: none;
}

.areas-phone-link:hover{
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  .areas-inner{
    grid-template-columns: 1fr;
  }

  /* the chips no longer need to stay shorter than the map beside them */
  .areas-chips{
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .areas-map{
    min-height: 380px;
    box-shadow: -0.22em 0.22em 0 var(--asc-ink-900, #111418);
  }
}

@media screen and (max-width: 55em){
  .areas-section{
    padding: 48px 20px;
  }

  .areas-chips{
    grid-template-columns: 1fr;
  }

  .areas-map{
    min-height: 320px;
  }

  .areas-closing p{
    font-size: 16px;
  }
}

a[href^="tel"].areas-phone-link{
  display: inline;
  margin-bottom: 0;
  color: var(--asc-red-500, #D71E34);
}

/* --------------------------------------------------------------------------
   Anything else in the new sections that turns into a phone link later.
   Cheap insurance so this doesn't have to be diagnosed a second time:
   a phone link written inline in body copy stays inline.
   -------------------------------------------------------------------------- */
.areas-closing a[href^="tel"],
.community-text a[href^="tel"],
.addsvc-closing a[href^="tel"],
.asc-head-lead a[href^="tel"],
.coupon-terms a[href^="tel"]{
  display: inline;
  margin-bottom: 0;
}




.areas-closing{
  max-width: none;
  margin: 56px -24px -72px;
  padding: 22px 24px;
  border-top: 3px solid var(--asc-red-500, #D71E34);
  background: var(--asc-navy-900, #0A1727);
}

.areas-closing p{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  color: #fff;
}

/* red-400 rather than red-500 — the lighter red is the one that holds up
   against navy. (0,3,1) so it also clears the a[href^="tel"] override in
   tel-link-fix.css, which is (0,2,1).) */
.areas-closing a[href^="tel"].areas-phone-link{
  color: var(--asc-red-400, #E1173D);
}

.areas-closing a[href^="tel"].areas-phone-link:hover{
  color: #fff;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------

   -------------------------------------------------------------------------- */
body:has(.areas-closing) > footer.site-footer.foot-main{
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   Responsive — the negative margins must match the section's padding, which
   drops to 48px 20px at the theme's 55em breakpoint.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 55em){
  .areas-closing{
    margin: 40px -20px -48px;
    padding: 20px;
  }

  .areas-closing p{
    font-size: 17px;
  }
}







/* --------------------------- */

.sched-row {
    position: relative;
    padding: 0;
    max-width: 1700px!important;
    margin: auto;
    box-shadow: 0em 0em 2em #00000000;
}

.sched-row.row>*{
  padding: 0;
}


.sched-row a, .sched-row button {
    color: white;
    text-transform: uppercase;
    display: block;
    line-height: 1;
    padding: 2% 2% 3% 2%;
    transition: all .3s ease-in-out;
    border-radius: .7em;
    letter-spacing: .06em;
    text-decoration: none;
    font-size: 0.9em;
    margin: 0;
    border-radius: 0em;
    position: relative;
    z-index: 1;
    background: #044ba1;
    width: 100%;
    border:0;
 }

.sched-row button.pop-button:before{
  transform: scale(1);
  
}

.sched-row button.pop-button{
  position: relative;
  color: #000000;
  background-color: #d71e34;
 }

.sched-row button.pop-button:after {
    content: " ";
    position: absolute;
    bottom: 0em;
    height: 100%;
    z-index: -1;
    width: 100%;
    transition: all .3s ease-in-out;
    right: 0%;
} 

.sched-row button.pop-button strong{
  text-shadow: none;
}

.sched-row button.pop-button span{
  color: black;
}

.sched-row a .column,.sched-row a .columns , .sched-row button .column,.sched-row button .columns {
    padding-left: 0rem;
    padding-right: 0rem;
}

.sched-row a strong, .sched-row button strong {
    letter-spacing: 0.03em;
    font-size: 2.2em;
    font-weight: 900;
    display: block;
    text-shadow: -0.1em 0.1em 0em #000000;
    margin-bottom: 0.3em;
 }

.sched-row a span, .sched-row button span {
    display: block;
    text-align: center;
    font-size: 9em;
    position: relative;
    /* top: -.1em; */
    opacity: 1;
    line-height: 0.6;
    left: -0.1em;
}

.sched-row a:hover span, .sched-row button:hover span{
      -webkit-animation: tada 1s;
    animation: tada 1s;
}

.sched-row a:hover, .sched-row button:hover{
  background-color: #464646;
  color: #ffffff;
  cursor: pointer;
}

/* Footer Section CSS  */ 

/* Footer CTA */



.foot-accred{
  margin-top: 20px;
}

.foot-accred-badge {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
    background: #ffffff17;
    border-radius: 4px;
    padding: 4px 6px;
}

.foot-contact-google{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;      /* don't stretch the full column — keeps the
                                  hover target on the words, not the whole row */
  gap: 6px;
  margin-top: -4px;            /* the list gap is 10px; this tightens it to 6px
                                  so it reads as part of the address block */
  margin-left: 16px;           /* 8px pin + 8px gap = aligns with address text */
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
}

/* Scoped to #colophon so it beats `footer#colophon a { color: inherit }` */
#colophon .foot-contact-google{ color: var(--asc-red-400, #E1173D); }
#colophon .foot-contact-google:hover,
#colophon .foot-contact-google:focus-visible{ color: #fff; }

/* Trailing chevron. \f105 in the theme's icomoon set — the same glyph the
   footer's Services / Helpful Links lists already use for their red arrows,
   so it's known to be present. */
.foot-contact-google:after{
  content: "\f105";
  font-family: 'icomoon';
  font-size: .95em;
  line-height: 1;
  transition: transform .15s ease;
}
.foot-contact-google:hover:after{ transform: translateX(2px); }

/* Keyboard focus — the theme doesn't give footer links a visible ring. */
#colophon .foot-contact-google:focus-visible{
  outline: 2px solid var(--asc-red-400, #E1173D);
  outline-offset: 3px;
  border-radius: 2px;
}


.site-footer{
  background-color: #ffffff!important;
  color: black!important;
  max-width: 1700px!important;
  margin: auto;
  box-shadow: 0em 0em 2em #000000;
  padding-bottom: 0em;
  padding-top: 1.2em;
}

.site-footer .bullet-list li:after{
  display: none;
}

.site-footer .bullet-list li{
  padding: 0.2em 0;
}

.site-footer .bullet-list li{
  width: 50%;
}


.logo-foot{
  text-align: center;
  /* padding: 2%; */
}

.logo-foot img{
  display: block;
  width: 14em;
  margin: 1em auto;
}

.logo-foot a{
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: black!important;
}

.schema{
  text-align: center;
}

.schema a{
  display: block;
  font-weight: 900;
}

.schema a:hover{
  color: #03a8e2!important;
}
 

.footer-txt{
  text-align: center;
  color: #1f2c5f;
  letter-spacing: .03em;
  font-size: 1.2em;
  margin-top: 1em;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1em;
  }

.foot-links{
  text-align: center;
  font-size: .9em;
}


.help-link {
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #0000001c;
    padding: 0.5em;
    text-align: center;
}

.help-links a{
  display: block;
  text-decoration: none;
  border-bottom: 1px solid #0000001c;
  padding: .5em;
}

.help-links a:hover{
  color: #03a8e2!important;
}

.copyright{
  color: white;
  text-transform: uppercase;
  font-size: 0.7em!important;
  letter-spacing: .08em;
  padding: 1.1em 0em 0.8em 0em!important;
  max-width: none;
  width: 100%;
  background: #111111;
  margin-top: 2%;
  border-top: 1px solid #00000029;
}

.lic-numbner{
  text-transform: uppercase;
  font-size: .9em;
  letter-spacing: .08em;
}

.socialmedia{
  position: relative;
}

.socialmedia .navbar{
  position: relative;
  padding-left: 0rem;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.socialmedia .navbar a{
  color: #3f63c9!important;
  font-size: 2em;
  text-decoration: none;
  padding: 0em 0.2em 0em 0.2em;
  margin: 0em 0em;
  display: block;
  text-align: center;
}

.socialmedia .navbar a span{
  line-height: 1.7;
}

.socialmedia .navbar a:hover{
  background-color: #b5201d00;
}

.socialmedia .navbar a:hover{
  color: #03a8e2!important;
}

.schema-title{
  margin: 0.7em 0 0em 0!important;
}

footer a{
  text-decoration: none;
}

/* ---------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------Inner Pages Css ------------------------------------------------------------------ */ 

/* Global Inner CSS  */ 





/* ==========================================================================
   Veterans & First Responders Giveaway page — visual polish
   Scoped to the ".giveaway-page" wrapper output by
   veteran-first-responder-giveaway-template.php, so it works regardless
   of post ID and doesn't depend on Elementor markup.
   ========================================================================== */

/* Center the content in a comfortable reading width instead of letting it
   sit flush against the left edge of a full-width canvas. */
.giveaway-page #main,
.giveaway-page .giveaway-main {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  float: none;
  text-align: left;
}

/* Hero image — now embedded directly in the WYSIWYG "content" field, so we
   target the first image inside .giveaway-details rather than a fixed
   attachment class/ID. */
.giveaway-page .giveaway-details img:first-of-type {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  margin: 10px 0 30px;
}

/* Section headings ("Giveaway Details", "Who Can Enter?") */
.giveaway-page h3 {
  margin-top: 34px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  display: inline-block;
}

/* Bulleted lists */
.giveaway-page ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.giveaway-page ul li {
  position: relative;
  padding: 6px 0 6px 30px;
  line-height: 1.5;
}

.giveaway-page ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #072983;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* The entry form. The embed's iframe uses height:100%, which only works if
   this wrapper has an explicit height — matching the embed's own
   data-height="2001" attribute. Without this the iframe renders at 0px
   tall and the form silently disappears. */
.giveaway-page .giveaway-form-wrap {
  background: #f6f7fb;
  border: 1px solid #e1e4ee;
  border-radius: 10px;
  padding: 20px;
  margin: 30px 0;
  min-height: 2001px;
}

.giveaway-page .giveaway-form-wrap iframe {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  display: block;
}

/* Questions / Official Rules / disclaimer block (these live inside the
   "form" field content, right after the shortcode) */
.giveaway-page .giveaway-form-wrap .button,
.giveaway-page .giveaway-form-wrap a.button {
  display: inline-block;
  margin: 12px 0 20px;
}

.giveaway-page .giveaway-form-wrap em {
  display: block;
  font-size: 0.85em;
  color: #7a7f8c;
  margin-top: 18px;
}

/* Small screens */
@media (max-width: 640px) {
  .giveaway-page #main,
  .giveaway-page .giveaway-main {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .giveaway-page .giveaway-form-wrap {
    padding: 12px;
  }
}












:root{
  --asc-map-crop-top: 60px;
}

.asc-map-embed{
  position: relative;
  overflow: hidden;                    
  height: clamp(320px, 42vw, 520px);
  margin: 24px 0;
  border-radius: 10px;
  border: 1px solid var(--asc-gray-200, #D3D8E0);
  background: #2E312F;                 

}

.asc-map-embed iframe{
  position: absolute;
  left: 0;
  top: calc(var(--asc-map-crop-top) * -1);     
  width: 100%;
  height: calc(100% + var(--asc-map-crop-top)); 

  display: block;
  border: 0;
}


.side-label {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 2em;
    margin-bottom: 0em;
    font-family: "Saira Condensed", system-ui, sans-serif;
    font-weight: 800;
    margin-top: 1em;
    /* font-style: italic; */
    color: white;
}

.side-form {
    text-align: center;
    padding: 1rem;
    background: #0c2e5c !important;
    /* border-radius: 40px; */
    color: white;
    position: relative;
    height: auto;
}









.inside-content{
  padding-bottom: 8%;
}

.insideimage {
  position: relative;
  padding: max(1.5rem, 7%) 4% 2% 4%;
  margin-top: max(3rem, 14.5%);
  border-bottom: 0.5em solid #df0013;
  background-image: url(/wp-content/uploads/2026/09/inner-banner.jpg);
  background-repeat: no-repeat;
  background-position: 100% 70%;
  background-size: 41%;
  z-index: 12;
}

/* Laptop range: box height starts outgrowing the scaled image
   faster than at full desktop width — pull the anchor up. */
@media (max-width: 1400px) {
  .insideimage {
    /* background-position: 100% 0%; */
    background-size: 50%;
  }
}

/* Small laptop / large tablet: give it more room and anchor
   fully to the top so the head can't get pushed past the edge. */
@media (max-width: 1200px) {
  .insideimage {
    /* background-position: 100% top; */
    background-size: 41%;
    margin-top: max(4rem, 18%);
  }
}

/* Just above wherever your existing mobile rule swaps to plain blue —
   replace 881px with your actual "no image" breakpoint so this hands
   off cleanly instead of jumping. */
@media (max-width: 992px) and (min-width: 881px) {
  .insideimage {
    /* background-position: center top; */
    /* background-size: 68%; */
  }
}


.insideimage:after{
  content:'';
  position: absolute;
  left: -20%;
  bottom: 0%;
  height: 110%;
  width: 80%;
  background: #024f7e;
  transform: skew(-20deg, 0deg);
  box-shadow: 0.8em 0em #d71e33;
}


.insideimage .slider-usp {
    bottom: -4em;
    position: relative;
    z-index: 3;
    width: 65%;
    margin: 0em auto -1em 0;
    bottom: -2em;
}

.insideimage .truck-image:after{
  bottom: 0em;
  right: 2em;
}

.insideimage .slider-usp.row>*{
  padding: 0 .4em;
}



.insideimage .slider-usp .usp-box {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #e6e6e6;
  border-radius: 1rem;
  transition: all 0.35s cubic-bezier(.22,1.2,.36,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.insideimage .slider-usp .usp-box {
    font-size: 0.7em;
    width: 100%;
    /* color: black; */
    transition: all .3s 
ease-in-out;
    height: 8.8em;
    text-align: center;
    border: 1px solid #e6e6e6;
    background: white;
    padding: 0.1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* HOVER: color fill + pop */
.insideimage .slider-usp .usp-box:hover {
  background: #d71e34; /* hero blue */
  border-color: #df0013;
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 10px 22px -6px rgba(0,0,0,.35),
    0 0 16px 4px rgba(110,192,229,.45);
}

/* ICON */
.insideimage .slider-usp .usp-box span {
    display: block;
    font-size: 3.5em;
    color: #024f7e;
    transition: all 0.35s cubic-bezier(.22, 1.2, .36, 1);
}

/* ICON hover motion */
.insideimage .slider-usp .usp-box:hover span {
  color: #ffffff;
  transform: scale(1.15) rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

/* TEXT */
.insideimage .slider-usp .usp-box p {
  margin: 0;
  color: #192b39;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

/* Text turns white on hover */
.insideimage .slider-usp .usp-box:hover p {
  color: #fff;
}






















.banner-head {
    position: relative;
    color: #ffffff;
    letter-spacing: .12em;
    font-size: 1.9em;
    text-transform: uppercase;
    z-index: 2;
    padding-left: 0.5em;
    border-radius: 0em;
    width: 55%;
       font-family: "Saira Condensed", system-ui, sans-serif;
    font-weight: 800;
}

.banner-head:after{
  content:'';
  position: absolute;
  left: -0.3em;
  top: 0em;
  background: #df0013;
  border-radius: 90em;
  width: .25em;
  height: 100%;
}

.extra-pad{
  padding: 0 5%;
}

.wp-video{
  margin: auto;
}


#breadcrumbs {
    border-bottom: solid 1px rgba(0, 0, 0, 0.18);
    color: black;
    z-index: 999;
    position: relative;
    margin-bottom: 0px;
    margin-right: auto;
    margin-top: 30px;
    padding: 0% 2% 1.8% 1%;
}

#breadcrumbs a {
    color: #d71e34;
    font-weight: 900;
    text-decoration: none;
}

#breadcrumbs .icon-home {
    font-size: 1.2em;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: rgba(0, 0, 0, 0.2);
    padding: 1em;
    margin-right: 12px;
    color: #df0013;
}

 
.inside-section-3 h2, .inside-section-4 h2{
  font-size: 2em;
  font-weight: 900;
}

.inside-section-4 h2{
  color: #192b39;
}

.inside-section-3.careers-padding{
  margin-top: 15%;
}

.inside-section-3{
  position: relative;
  background-color: #ebebeb;
  padding: 6% 7% 4% 7%;
  color: #192b39000;
  z-index: 9;
}



.inside-section-3 blockquote:before{
}

.inside-section-3 h2{
  color: #024f7e;
}

.inside-section-3 .accordion-button,.inside-section-4  .accordion-button{
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #024f7e;
    letter-spacing: .08em;
}

.inside-section-3 .accordion-item, .inside-section-4 .accordion-item{
  background-color: #e9e9e9;
  color: #070707;
}

.inside-section-3 .accordion-button:not(.collapsed),.inside-section-4 .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #df0013;
}

.inside-section-3 .accordion,.inside-section-4 .accordion{
  margin-bottom: 2em;
}

.inside-section-4{
  position: relative;
  background-color: #ffffff;
  padding: 3% 7% 6% 7%;
  color: black;
}

.inside-section-3 .accordion-button::after, .inside-section-4 .accordion-button::after{
  -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.inside-section-3 .accordion-button:hover, .inside-section-4 .accordion-button:hover{
  background-color: #18134f;
  color: white!important;
}

.inside-section-3 .accordion-button:hover h2, .inside-section-4 .accordion-button:hover h2{
  color: white;
}

.inside-section-3 .accordion-button:not(.collapsed) h2,.inside-section-4 .accordion-button:not(.collapsed) h2{
  color: white;
}

.inside-section-3 .bullet-list{
  position: relative;
  /* color: white; */
}

.inside-section-3 .bullet-list li{
  padding: 0.1em 0.1em 0.1em 1.8em;
}

.inside-section-3 .bullet-list li:after {
    top: 0.05em;
    left: 0.2em;
}


.emp-form{
    position: relative;
    padding: 6% 5% 3% 5%;
    background-color: #ebebeb;
    border-radius: 1em;
  margin: 1em auto 3em auto;
  width: 85%;
}

.emp-form .with_frm_style .vertical_radio .frm_checkbox label, .emp-form .with_frm_style .vertical_radio .frm_radio label{
  color: #fff;
}

.emp-form .frm_style_formidable-style-2.with_frm_style input[type=submit]{
  display: block;
  width: 100%;
  padding: 1em 0em;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.1em;
  background-color: #03a8e2;
  color: white;
  border: 0;
  box-shadow: none;
}

.emp-label{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #383838;
  font-size: 1.2em;
  margin-bottom: .8em;
  text-align: left;
}

.insideimage .not-active{
  display: none;
}

.insideimage .activate{
  position: relative;
  display: block!important;
  z-index: 9;
}

.insideimage .activate a{
  color: white;
  position: relative;
  z-index: 3;
  transition: all .3s ease-in-out;
  display: block;
  padding-left: 0em;
  border-radius: 900em;
  letter-spacing: .09em;
  font-size: 1.2em;
  margin-bottom: -1em;
  width: 16.5em;
  text-align: center;
  margin-left: 3.8em;
}

.insideimage .activate a:hover{
  background-color: #5b6363;
}

/* Opening CTA Inner CSS  */ 

blockquote {
    font-size: 1.22em!important;
    margin-top: 35px!important;
    width: 95%;
    border-left: aliceblue;
    position: relative;
    padding: 1em 4em 1em 2.5em!important;
    margin: 4% 1% 6% 1%!important;
    z-index: 9;
    color: #192b39000!important;
}

blockquote, blockquote p {
    line-height: 1.6;
    margin-bottom: 0em;
    color: #ffffff !important;
}

blockquote::after {
    content: '';
    position: absolute;
    bottom: -0.5em;
    right: -2em;

    width: 5.7em;
    height: 8.9em;

    background-image: url('/wp-content/uploads/2025/12/mascot-scaled.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 1;
    transition: all .3s ease-in-out;
}


blockquote:before {
    content: '';
    position: absolute;
    bottom: 0em;
    left: 0em;
    height: 100%;
    width: 100%;
    transition: all .3s ease-in-out;
    z-index: -01;
    background-color: #0e2e5c;
    border-top-right-radius: 0em;
    border-radius: 0em;
    border-top-left-radius: 0em;
    border-bottom-left-radius: 0em;
    border-left: 0.8em solid #d71e33;
    border-top: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    transform: skew(-6deg, 0deg);
}
 
blockquote a{color: #d71e34;text-decoration: none;}

blockquote a:hover{color: #ffffff;}



blockquote.nnp-ci-body::before {
    transform: none;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
}


#breadcrumbs {
    border-bottom: solid 1px rgba(0, 0, 0, 0.18);
    color: #1a2a39;
    z-index: 0;
    position: relative;
    margin-bottom: 0px;
    margin-right: auto;
    margin-top: 1.5em;
}

.inside-content h1 {
    margin-bottom: -1px;
    color: #163776;
    font-weight: 900;
    font-size: 2.5em;
}

.inside-content h1 strong{
    color: #3f6fa6;
}

.inside-content h1 span{
  display: block;
  font-size: .6em;
      font-family: "Saira Condensed", system-ui, sans-serif;
  font-weight: normal;
  color: white;
}

.inside-content h2 em{
  font-size: .8em;
      font-family: "Saira Condensed", system-ui, sans-serif;
  font-weight: normal;
  font-style: normal
}

.inside-content h2 {
    color: #024f7e !important;
    font-weight: 900;
    font-size: 1.8em;
        font-family: "Saira Condensed", system-ui, sans-serif;
}

.inside-content h3 {
    color: #184ba1;
    font-weight: 900;
    font-size: 1.4em;
        font-family: "Saira Condensed", system-ui, sans-serif;
}

.inside-section-4 h3{
     font-size: 1.4em;
}

.inside-section-3 h3 {
    font-size: 1.4em;
    font-weight: 700 !important;
}
.inside-section-2 h3{
     font-size: 1.4em;
}

.inside-section-1 h3{
     font-size: 1.4em;
}

.inside-content h5{
  font-size:  1.3em;
}

.coup-page{
  position: relative;
  padding-bottom: 7%;
}

.coup-page .text-highlight{
  margin-bottom: 3em;
}

.coup-page .col-lg-6{
  margin: 0em  0 2.5em 0!important;
}

.rev-sec-in {
  position: relative;      /* anchors the ::after overlay */
  overflow: hidden;        /* clips the bg image to the section */
  padding: 4em 4em !important;
  background-color: #0a0e1c; /* fallback color while image loads */
  background-image: url(/wp-content/uploads/2026/09/slider-banner-1.webp);
  background-position: top;
}



.rev-sec-in::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .6;
  pointer-events: none;
  background-image: repeating-linear-gradient(-12deg, transparent 0 38px, rgba(255,255,255,.035) 38px 40px);
}






.rev-sec-in::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,23,39,0.92) 0%, rgba(10,23,39,0.88) 100%);
}

/* Force real content (headings, text, buttons) above the overlay */
.rev-sec-in > * {
  position: relative;
  z-index: 1;
}

.rev-box .btn-secondary {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.rev-box .sec2-header {
    color: #ffffff;
      text-align: center;
     font-family: "Saira Condensed", system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.8em;
    color: #ffffff;
    margin-bottom: 0em;
}



.rev-header{
      font-family: "Saira Condensed", system-ui, sans-serif;
  text-align: center;
  font-size: 2.6em;
  line-height: 1.2;
  color: #192b39;
  font-weight: 400;
}

.rev-header strong{
      font-family: "Saira Condensed", system-ui, sans-serif;
  text-align: center;
  font-size: 1.3em;
  line-height: 1;
  color: #192b39;
  font-weight: 400;
}
.rev-btns{margin-top: 2em;width: 60%;}



.deal-price{
  position: relative;
  font-weight: bold;
  font-size: 4em;
  line-height: 1.2;
  text-shadow: -0.08em 0.09em 0.2em #00000005;
  color: #192b39;
      font-family: "Saira Condensed", system-ui, sans-serif;
  margin-top: 0.4em;
}

.deal-price span{
  display: block;
  font-size: 0.5em;
  padding: 1% 7%;
}

.deal-offer{
  position: relative;
  font-size: 1.4em;
  line-height: 1.4;
  display: block;
  margin: 2% 0 2% 0;
  color: #192b39;
    font-family: "Saira Condensed", system-ui, sans-serif;
}

.deal-offer span{
  display: block;
  font-size: .7em;
}

.coup-page{
  position: relative;
  padding-bottom: 7%;
}

.coup-page .text-highlight{
  margin-bottom: 3em;
}


.coup-page .home-coup img{
  width: 11em;
  left: 0;
  margin-bottom: 0.8em;
}

.coup-page .col-lg-6{
  margin: 0em  0 2.5em 0!important;
}

.coup-page .home-coup{
  text-align: center;
  width: 90%;
  padding: 9% 10% 5% 10%;
}

.coup-page .home-coup .btn{
  margin: 0.4em auto 1em auto;
  background-color: #66bee3;
  border: 0;
  color: white;
  margin: 1em auto;
  display: block;
  width: 90%;
}

.coup-page .home-coup p{
  font-size: .8em;
}


/* Coupons tabs (Plumbing / HVAC) */
#couponsTabs.nav-tabs {
  border-bottom: 2px solid #df0013;
  gap: 10px;               /* modern browsers */
}

/* Base tab button/link */
#couponsTabs .nav-link {
  color: #d71e34;
  background: #ffffff;
  border: 2px solid #df0013;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 18px;
  font-weight: 700;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

/* Hover / focus */
#couponsTabs .nav-link:hover,
#couponsTabs .nav-link:focus {
  background: #df0013;
  color: #d71e34;
  transform: translateY(-1px);
  outline: none;
  box-shadow: none;
}

/* Active tab */
#couponsTabs .nav-link.active,
#couponsTabs .nav-link[aria-selected="true"] {
  background: #d71e34;
  color: #ffffff;
  border-color: #d71e34;
  position: relative;
  top: 2px; /* visually connects active tab to panel */
}

/* Tab panel container (optional - makes it look "connected") */


/* Mobile: allow horizontal scroll if tabs wrap tight */
@media (max-width: 575px) {
  #couponsTabs.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #couponsTabs .nav-link {
    white-space: nowrap;
  }
}




.side-coup{
  position: relative;
  width: 100%;
  margin: 2em auto 2em auto;
  background-color: #df0013;
  background-size: 55%;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 5% 10% 7% 10%;
  outline: .3em dashed #192b39;
  outline-offset: -1em;
  text-align: center;
  border-radius: 2em;
}
.side-coup p{
  font-size: 0.8em;
  color: #192b39;
}

.side-price{
  position: relative;
  margin-top: 2%;
  font-weight: 900;
  font-size: 4.2em;
  color: #3f63c9;
}

.side-offer{
    font-size: 1.3em;
    position: relative;
    margin-bottom: 3%;
    letter-spacing: .02em;
}

.side-offer span{
  display: block;
  font-size: .7em;
}

.side-coup .btn-primary{
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff !important;
  padding: 0.6em 1em;
  font-size: 1em;
  width: 90%;
  margin: 1em auto;
  background-color: #d71e34;
  border: 2px solid transparent;        /* prevents layout shift */
  transition: all .25s ease;
}

.side-coup .btn-primary:hover,
.side-coup .btn-primary:focus{
  background-color: #d71e34;             /* keep background */
  color: #ffffff !important;
  border-color: #ffffff;
}





/* Coupon wrapper in sidebar */
.sidebar .coupon{
  position: relative;
  padding: 1.5em 2em 2em 2em;
  background: #d71e33;               /* dark blue */
  width: 100%;
  color: #ffffff !important;
  outline: .2em dashed #ffffff;
  outline-offset: -0.9em;
  border-radius: 0px;
  box-shadow: 0 10px 20px -12px rgba(0,0,0,.45);
  text-align: center;
  margin-bottom: 2em;
  margin-top: 2em;
}

/* PRICE */
#sidebar1 .price{
  margin: 0 0 .15em;
         font-family: "Saira Condensed", system-ui, sans-serif;
  font-size: 3em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
}

/* OFFER text */
#sidebar1 .offer{
  margin: 0 0 1.1em;
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Button */
#sidebar1 .coupon .btn{
  display: block;
  width: 80%;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #ffffff;
  background: #145faf;
  border: 2px solid #ffffff;
  margin-top: .2em;
}

/* Button hover */
#sidebar1 .coupon .btn:hover{
  background: #0d2e5c;
  color: #ffffff;
}

/* Optional: tiny lift on hover of whole coupon */
.sidebar .coupon:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.6);
}







.coup-page [data-equalizer="coup1"]{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 1.8em;
  margin: 0 !important;
}

.coup-page [data-equalizer="coup1"] > div{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- The card itself --- */

.coup-page .coupon.max-coupon{
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background-color: #0f1526;
  color: #ffffff;
  text-align: center;
  border-radius: 1em;
  padding: 2.2em 1.8em 2.4em;
  outline: .25em dashed rgba(255,255,255,.35);
  outline-offset: -.9em;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.5);
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, outline-color .3s ease-in-out;
}

.coup-page .coupon.max-coupon:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -16px rgba(0,0,0,.6);
}

/* Alternating red / blue accent, same pairing as the homepage carousel's
   .coupon-card:nth-child(odd)/(even) */
.coup-page [data-equalizer="coup1"] > div:nth-child(odd) .coupon.max-coupon{
  outline-color: rgba(226,28,61,.55);
}

.coup-page [data-equalizer="coup1"] > div:nth-child(even) .coupon.max-coupon{
  outline-color: rgba(58,169,255,.55);
}

/* --- Price ("$50 OFF") --- */

.coup-page .coupon .price{
      font-family: "Saira Condensed", system-ui, sans-serif;
  font-size: 2.5em;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 .35em;
}

/* Optional: if you want the "$" and "OFF" picked out in red like
   savingplumbing.com/coupons, wrap them in the price_main field content,
   e.g.  <span class="price-accent">$</span>50 <span class="price-accent">OFF</span>
   ACF text fields print their raw value here, so this markup is safe to
   type directly into the field — no template change needed. */
.coup-page .coupon .price .price-accent{
  color: #e21c3d;
}

/* --- Offer title ("AC System Repair") --- */

.coup-page .coupon .offer{
  font-size: 1.05em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #ffffff;
  margin: 0 0 1.2em;
}

/* --- Button --- */

.coup-page .coupon .print-block{
  margin-bottom: 1em;
}

.coup-page .coupon .print-block > a.btn-primary{
  display: inline-flex;
  width: auto;
  margin: 0 auto;
}

/* --- Fine print --- */

.coup-page .coupon p{
  font-size: .78em;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0 2%;
}

/* --- Mobile: stack to one column --- */

@media (max-width: 767px){
  .coup-page [data-equalizer="coup1"]{
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   COUPONS PAGE — Coupon Cards  (Template Name: Coupons Page Template)
   Styles the ACF "coupon_info" repeater output from couponspage.php:

     <div class="row" data-equalizer="coup1">
       <div class="col-sm-12 col-md-6 col-lg-6">
         <div class="coupon max-coupon">
           <div class="price">...</div>
           <div class="offer">...</div>
           <div class="print-block"><a class="btn btn-primary">Get This Deal</a>...</div>
           <p>fine print</p>
         </div>
       </div>
       ...
     </div>

   IMPORTANT: the same "coupon max-coupon" markup is duplicated a second
   time, hidden (style="display:none"), inside each
   <div id="prinReady0N">...</div> block — that's what binnycoupon.js's
   printSpecial() copies into the pop-up print window. That pop-up only
   copies the .coupon.max-coupon markup itself, not the page around it, so
   the card/price/offer/paragraph rules below are written WITHOUT a
   ".coup-page" ancestor requirement — on purpose — so the printed coupon
   matches the on-page card instead of falling back to unstyled text.
   Only the grid/layout rules (which only matter on the real page) stay
   scoped to .coup-page.

   Nothing here changes the template or the ACF fields — it only styles the
   classes that template already outputs. Matches the dark dashed-card
   language already used elsewhere on this site (.coupon-card on the
   homepage carousel, .sidebar .coupon in the sidebar widget) instead of
   inventing a new look, and alternates red/blue accents card-to-card the
   same way the homepage carousel does.
   ========================================================================== */

/* --- Grid: two coupons per row, equal height, no dependency on the
   data-equalizer JS plugin (page layout only, not needed in the print
   pop-up) --- */

.coup-page [data-equalizer="coup1"]{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 1.8em;
  margin: 0 !important;
}

.coup-page [data-equalizer="coup1"] > div{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Alternating red / blue accent on the page grid, same pairing as the
   homepage carousel's .coupon-card:nth-child(odd)/(even) */
.coup-page [data-equalizer="coup1"] > div:nth-child(odd) .coupon.max-coupon{
  outline-color: rgba(226,28,61,.55);
}

.coup-page [data-equalizer="coup1"] > div:nth-child(even) .coupon.max-coupon{
  outline-color: rgba(58,169,255,.55);
}

/* --- The card itself — no .coup-page requirement, so this also styles
   the hidden duplicate that gets printed --- */

.coupon.max-coupon{
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background-color: #0f1526;
  color: #ffffff;
  text-align: center;
  border-radius: 1em;
  padding: 2.2em 1.8em 2.4em;
  outline: .25em dashed rgba(255,255,255,.35);
  outline-offset: -.9em;
  box-shadow: 0 14px 26px -14px rgba(0,0,0,.5);
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, outline-color .3s ease-in-out;
}

.coup-page .coupon.max-coupon:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -16px rgba(0,0,0,.6);
}

/* --- Price ("$50 OFF") --- */

.coupon.max-coupon .price{
     font-family: "Saira Condensed", system-ui, sans-serif;
  font-size: 2.5em;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 .35em;
}

/* Optional: if you want the "$" and "OFF" picked out in red like
   savingplumbing.com/coupons, wrap them in the price_main field content,
   e.g.  <span class="price-accent">$</span>50 <span class="price-accent">OFF</span>
   ACF text fields print their raw value here, so this markup is safe to
   type directly into the field — no template change needed. */
.coupon.max-coupon .price .price-accent{
  color: #e21c3d;
}

/* --- Offer title ("AC System Repair") --- */

.coupon.max-coupon .offer{
  font-size: 1.05em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #ffffff;
  margin: 0 0 1.2em;
}

/* --- Button (never appears in the print-ready duplicate, only on-page) --- */

.coupon.max-coupon .print-block{
  margin-bottom: 1em;
}

.coupon.max-coupon .print-block > a.btn-primary{
  display: inline-flex;
  width: auto;
  margin: 0 auto;
}

/* --- Fine print --- */

.coupon.max-coupon p{
  font-size: .78em;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0 2%;
}

/* --- Mobile: stack the on-page grid to one column --- */

@media (max-width: 767px){
  .coup-page [data-equalizer="coup1"]{
    grid-template-columns: 1fr;
  }
}

/* --- Print --- */
/* binnycoupon.js's printSpecial() writes the coupon's markup into a fresh
   popup document and calls window.print() on it, which genuinely triggers
   @media print — but most browsers don't print background colors/images
   unless the user has "Background graphics" checked in the print dialog.
   A dark navy card with white text would risk printing as an all-white
   page (invisible text) for anyone who leaves that box unchecked, so print
   gets its own light, ink-friendly version: white background, dark text,
   solid dashed border (borders/text always print regardless of that
   setting). This block applies equally to the on-page card if the visitor
   prints the whole page. */
@media print{
  .coupon.max-coupon{
    background-color: #ffffff !important;
    color: #14151c !important;
    outline: .18em dashed #14151c !important;
    outline-offset: -.7em;
    box-shadow: none !important;
  }
  .coupon.max-coupon .price,
  .coupon.max-coupon .offer{
    color: #14151c !important;
  }
  .coupon.max-coupon .price .price-accent{
    color: #c21631 !important;
  }
  .coupon.max-coupon p{
    color: #333333 !important;
  }
}




/* List Style 1 Inner CSS  */ 

.bullet-list{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 10px;
}

.bullet-list li {
    position: relative;
    padding: 0.2em .1em 0.2em .1em;
    padding-left: 2em;
    font-size: 1.2em;
    font-weight: 500;
    width: 48%;
}

.bullet-list li:after {
    content: "\f058";
    font-family: 'icomoon' !important;
    position: absolute;
    top: 0;
    left: 0;
    color: #df0013;
    font-size: 1.333em;
    border-radius: 50%;
    line-height: 1;
}

.bullet-list li a{
  color: #d71e34;
  text-decoration: none;
}

.bullet-list li a:hover{
  color: #d71e34;
}

/* ---------------------- */

/* List Style 2 Inner CSS  */ 

.check-list li{
    display: block!important;
    padding: .8em 1em .8em 4em!important;
    border-bottom: solid 1px rgba(0, 0, 0, 0.14)!important;
    position: relative!important;
    line-height: 1.5em!important;
    text-align: left!important;
    width:100%!important;
}

.check-list  {
    display: block!important;
    margin: 1em 0!important;
    padding: 0!important;
    border: solid 1px rgba(0, 0, 0, 0.08)!important;
}

.check-list li:before {
    content: "\f00c";
    font-family: 'icomoon' !important;
    color: #df0013;
    display: block;
    position: absolute;
    font-size: 1.2em;
    top: 0.8em;
    left: 1.06em;
    z-index: 2;
}

.check-list li:after{
  content: '';
  position: absolute;
  background-size: 100%;
  width: 2.5em;
  height: 2.5em;
  top: 0.4em;
  left: 0.3em;
  background-repeat: no-repeat;
}

.check-list li strong {
    text-transform: uppercase;
    font-size: 1.025em;
    color: #df0013;
}

.check-list li a{
  color: #df0013!important;
}

.check-list li a:hover {
    color: #004a87 !important;
}


/* ---------------------- */





.inner-bottom{
  margin-top: 0%;
  color: #000!important;
  z-index: 99;
  padding: 8em 7% 2em 7%;
  position: relative;
  background-color: #0c2e5c;
  z-index: 13;
  position: relative;
}

.inner-bottom .usp-blk{
  height: 24em;
}

.inner-bottom .usp-label{
  font-weight: 900;
  line-height: 1.1;
  margin: .4em 0;
  color: #1f4f9c;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inner-bottom.section-2:before{
  height: 100%;
}


.inner-bottom .carousel-control-prev {
    left: -6em;
}

.inner-bottom .carousel-control-next {
    right: -6em;
}


.inner-bottom .carousel{
}

.inner-bottom .row>*{
  /* padding: 0 .8%; */
}

.inner-bottom .usp-wrap{
  position: relative;
  margin-top: 0em;
}

.inner-bottom .usp-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    margin: 0 0 2em 0;
}

.inner-bottom .usp-wrap.row>* {
    /* padding: 0% 0.7%; */
}




.inner-bottom{
  padding: 3.5rem 7%;
  background-image: url(/wp-content/uploads/2026/01/inner-bottem-bg1.jpg);
  background-size: contain;
  background-position: center;
  position: relative;
}

/* IMPORTANT: allow rotated cards to show without getting clipped */
.inner-bottom .carousel-inner{
  overflow: visible;
}

.inner-bottom .row{
  justify-content: center;
  align-items: stretch;
}

.inner-bottom .usp-blk{
  background: #ffffffe8;                 /* <-- card background */
  border-radius: 2.5rem;            /* pill-ish rounded corners like example */
  padding: 2rem 1.75rem;
  text-align: center;
  width: 100%;                      /* <-- let the column control width */
  max-width: 520px;                 /* keeps it from getting too wide */
  margin: 0 auto;                   /* center inside the column */
  min-height: 240px;                /* instead of fixed height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* min-height: 415px; */
  /* box-shadow: 0 18px 40px rgba(0,0,0,.15); */
}



.inner-bottom .usp-blk span{
  font-size: 78px;
  line-height: 1;
  color: #d62232;
}

/* Make columns equal height */
.inner-bottom .carousel-item .row{
  align-items: stretch;            /* key */
}

/* Ensure each col behaves nicely */
.inner-bottom .carousel-item .row > [class*="col-"]{
  display: flex;                   /* key */
}

/* The card fills its column and stacks content cleanly */
.inner-bottom .usp-blk{
  width: 100%;
  height: 100%;                    /* key */
  margin: 0;                       /* let the column spacing handle this */
  padding: 2rem 1.75rem;

  display: flex;                   /* key */
  flex-direction: column;
  justify-content: flex-start;

  background: #fff;
  border-radius: 2.25rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
}

/* Optional: keep icon/label tidy */
.inner-bottom .usp-blk .usp-label{
  margin: .75rem 0 .5rem;
}

.inner-bottom .usp-blk p{
  margin: 0;
}



/* Mobile: stack with space between (and no rotations) */
@media (max-width: 767px){
  .inner-bottom .carousel-item .row{
    row-gap: 1rem;                 /* adds the missing spacing */
  }

  .inner-bottom .box-1,
  .inner-bottom .box-3{
    transform: none !important;
  }

  .inner-bottom .usp-blk{
    border-radius: 1.75rem;
    padding: 1.5rem 1.25rem;
  }
}



/* If you added this earlier, remove it (it breaks the grid at mid widths) */
/* .inner-bottom .carousel-item .row{ column-gap: 2rem; } */

/* Tablet / ~880px tuning */
@media (min-width: 768px) and (max-width: 991px){

  /* Let Bootstrap gutters handle spacing */
  .inner-bottom .carousel-item .row{
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Reduce card bulk so 3-up fits nicely */
  .inner-bottom .usp-blk{
    padding: 1.25rem 1rem;
    border-radius: 1.75rem;
    font-size: .9rem;
    min-height: 210px;          /* keeps them visually even */
  }

  /* Prevent cards from trying to be too wide */
  .inner-bottom .usp-blk{
    max-width: none !important;
  }

  /* If icons are big, scale them down slightly */
  .inner-bottom .usp-blk svg,
  .inner-bottom .usp-blk img{
    max-height: 48px;
    height: auto;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .inner-bottom .carousel-item .row{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }
}


/* Opening CTA Inner CSS  */ 

.text-highlight {
    font-size: 1.36em;
    font-style: italic;
    color: #000000;
    position: relative;
    font-weight: 500!important;
    margin-top: 8px;
    padding-bottom: 3%;
    margin-bottom: 39px;
    line-height: 1.4!important;
}

.text-highlight:not(.no-line):after {
    content: ' ';
    display: block;
    width: 159%;
    height: 4px;
    background-color: #184ba2;
    position: absolute;
    top: 99%;
    right: 20px;
}

.text-highlight p{
  margin-bottom: 0;
}

 .text-highlight2 {
    font-size: 1.25em;
    padding: 1.5em 3% 1.1em;
    position: relative;
    border-bottom: solid 1px #00000054;
    text-align: center;
    margin: 4.5rem 0 0.5rem 0em;
    color: #000000;
    font-weight: 900;
    text-wrap: balance;   
}

.text-highlight2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right,#00000040 41.99%,#FFFFFB 42%,#FFFFFF 58.99%,#00000040 55%);
}


.text-highlight2:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3.4em;
    background-size: 5.6em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    left: 0.2em;
    top: -2.15em;
    background-image: url(/wp-content/uploads/2026/07/Albritton-Final-Logo-Spread_Rev_2026-01.jpg) !important;
}


 .text-highlight2 a{
   display: unset;
   color: #b00c03;
   transition: all .3s ease-in-out;
   transform: scale(1);
   position: relative;
   bottom: 0em;
 }

  .text-highlight2 a:hover{
    font-size: 1.04em;
    bottom: 0.12em;

 }


/* Closing CTA Inner CSS  */ 


/* ------------------------------------------------------------------------------------- */


.faq-page .accordion-button {
    background-color: #0c2e5c;
    color: white;
}

.faq-page .accordion-button[aria-expanded=true], .faq-page .accordion-button:hover {
    background-color: #d71e33;
    color: white;
}

.faq-page .accordion-button::after{
   -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);  
}

/* 404 Page */


.error-page {
    padding: 11% 4% 6% 4%;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: black;
    margin-top: 9%;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);    
}

.error-page .inside-content {
    position: relative;
    padding-top: 0px;
    background-color: #00000059;
    padding: 7% 1% 4% 1%;
}

.error-page .error{
  font-size: 14em;
  font-weight: 900;
  color: #d71e34;
  position: relative;
  display: block;
  line-height: 0.8;
  letter-spacing: .03em;
  z-index: 2;
  margin-top: -2%;
  text-shadow: -4px 4px #373535;
  margin-bottom: 1%;
}


.error-page .inside-content h1{
  font-size: 4.2em;
  color: #ffffff;
  position: relative;
  z-index: 1;
  margin-top: -0.2em;
}

.error-page .entry-content{
  font-size: 1.4em;
  padding: 0% 13%;
  position: relative;
  color: white;
}


.reroute-btns{
  padding: 0%;
  position: relative;
}

.reroute-btns .column,.reroute-btns .columns {
    padding-left: .3375rem;
    padding-right: .3375rem;
}

.reroute-btns .btn{
  width: 100%;
  font-size: 1.1em;
  box-shadow: 1px 1px 16px 8px #0000000f;
  text-transform: uppercase;
  /* font-weight: 900; */
  letter-spacing: .03em;
  border: 0;
  display: block;
  border-radius: 0;
  margin: .7em 0;
  border-radius: 900em;
  color: black;
}

.reroute-btns .btn:hover{
  background-color: #209ad6!important;
  color: white!important;
  text-shadow: none;
}


.reroute-btns span{
  position: relative;
  top: 0.15em;
  font-size: 1.3em;
}


.single-blog ul{
  margin-left: 2em!important;
}

/* Default Template CSS  */ 


.column-section {
    position: relative;
    padding: 5% 5%;
}

.full-inner-max{
  padding-top: 2%;
  background: white;
  z-index: 11;
  position: relative;
}

.main-blog{
  position: relative;
}


  .wa-intcode-card strong:first-child{
    display: none;
  }


.main-blog a{
  text-decoration: none;
  color: #3f63c9!important;
}

.main-blog .page-nav{
  position: relative;
  background-color: #efefef;
  padding: 1.5em;
  margin-bottom: 1em;
}

.main-blog .post-thumbnail img{
  width: 100%;
  display: block;
}

.single-blog{
  position: relative;
  padding: 5% 15% 4% 15%;
}

/* ------------------------------------------------------------------------------------- */

.inside-content a{
  display: unset;
  color: #d71e33;
  text-decoration: none;
}

.inside-content .btn-primary{
  color: #000000;
}

/* Thank You Template CSS  */ 

.thank-you {
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
    padding: 9% 1% 5% 1%;
    margin-top: 6%;
    z-index: 99;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);    
    position: relative;
}

.thank-you .bg-inner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.39);
    border: solid 1px #0000005e;
    position: relative;
    padding: 4.063rem 0 3.363rem 0;
    color: white;
}

.thank-you .bg-inner {
    width: 100%;
    max-width: 1100px!important;
    margin: 0 auto;
    position: relative;
}

.thank-you .bg-inner p {
    font-size: 1.5rem;
    line-height: 1.5em;
}

.thank-you .bg-inner  h1{
    margin: 0;
    color: #d71e34;
    font-weight: 900;
    font-size: 5.3rem;
    line-height: 1;
    margin-bottom: 0.2em;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: -6px -1px .8em #2b2b2b;
}

.thank-you .bg-inner h1 strong {
    display: block;
    font-size: 1.847em;
    color: #fa4f41;
}

.thank-you .button {
    display: block;
    background-color: #d71e34;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: .08em;
    color: #ffffff;
    text-decoration: none;
    padding: 0.65em 0em;
    margin: 0.7em 0;
    border-radius: 900em;
    font-family: 'Fredoka', sans-serif !important;
}

/* ------------------------------------------------------------------------------------- */

/* Client Response Template CSS  */ 

.client-resp-wrap{
  padding: 0% 5%;
}


.client-response .entry-content{
  padding: 0% 7%;
}

.client-response .frm_style_formidable-style.with_frm_style input[type=submit]{
  display: block;
  width: 100%;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .08em;
  background-color: #e62318;
}

.client-response .frm_style_formidable-style.with_frm_style input[type=submit]:hover{
  background-color: black;
  color: white;
}

.client-response .frm_style_formidable-style-2.with_frm_style .frm_primary_label{
  color: white;
}

.client-response .frm_style_formidable-style-2.with_frm_style input[type=submit]{
  display: block;
  background-color: #199ad6;
  color: white;
  width: 100%;
  padding: .85em 0em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1em;
  text-shadow: -0.03em 0.08em black;
}

.client-response .frm_forms.frm_style_formidable-style-2.with_frm_style{
  margin: auto;
}

.client-response .bg-inner {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.31);
    border: solid 1px #000000a6;
    position: relative;
    padding: 3.063rem 0 1.363rem 0;
    color: white;
}

.client-response .bg-inner {
    width: 100%;
    max-width: 1100px!important;
    margin: 0 auto;
    position: relative;
}

.client-response .bg-inner p {
    font-size: 1.6rem;
    line-height: 1.5em;
    padding: 0% 5%;
}

.client-response .bg-inner  h1{
    margin: 0;
    color: #ffffff;
    font-size: 4.3rem;
    line-height: 0.9;
    margin-bottom: 3%;
    text-shadow: 4px 4px 0.7em #00000075;
    text-transform: uppercase;
}


.client-response .bg-inner h1 strong {
    display: block;
    font-size: 1.647em;
    color: #d71e34;
    position: relative;
}

.client-response .bg-inner  h1 span strong{
  font-size: 1.2em;
}

.client-response .bg-inner  h1 span{
  font-size: 0.7em;
  display: block;
  font-weight: normal;
}

.client-response .with_frm_style .frm_primary_label{
  color: white;
}

.client-response .frm_button_submit {
  position: relative;
  display: block;
  width: 100%;
  background-color: #e7090c;
  padding: .85em 0em;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

/* ------------------------------------------------------------------------------------- */


/* Client Feedback Review Template CSS  */ 


.client-response {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 13% 1% 7% 1%;
    background-color: #4e4e4e;
    margin-top: 6%;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/ty-bgdss.jpg);
}

.client-review {
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;
    padding: 11% 4% 5% 4%;
    position: relative;
    z-index: 9;
    margin-top: 8%;
    background-image: url(/wp-content/themes/plumberseo-bootstrap/inc/assets/images/feedback-bg.jpg);
    text-align: center;
}
 

.client-review  p {
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0% 0%;
    color: black;
}

.client-review  h1{
    margin: 0;
    color: #000000;
    font-weight: normal;
    font-size: 4.2rem;
    line-height: 1;
    margin-bottom: -0.1em;
    /* text-shadow: 4px 4px 0.4em #00000057; */
    text-transform: uppercase;
    position: relative;
}


.client-review h1 strong {
    display: block;
    font-size: 1.47em;
    color: #044ba1;
}


.resp-box{
  border-top: 1px solid #00304624;
  FONT-WEIGHT: 100;
  position: relative;
  margin-top: 2%;
  border-bottom: 1px solid #00304624;
}

.resp-txt{
  font-weight: 900;
  font-size: 1.7em;
  letter-spacing: 0.03em;
  margin-bottom: 2%;
  line-height: 1.7;
  padding: 1% 5% 0% 5%;
}

.resp-box .btn{
  display: block;
  width: 80%;
  max-width: 440px;
  border-radius: 900em;
  border: 0;
  margin: auto;
}

.client-review img{
  display: block;
  width: 90%;
  margin: auto;
}

.client-review .col-12 img{
  max-width: 450px;
}

.client-review .row-cols-5{
  padding: 0% 15%;
  margin-top: 2%;
}


/* ------------------------------------------------------Media Queries CSS ---------------------------------------- */ 


 @media screen and (min-width: 5.001em) and (max-width: 25em) {


/* NEW QUERIES */

.sliderfull{
  margin-top: 15%;
}
   
   .slider-header{
     font-size: 1.7em;
   }

/* END NEW QUERIES */

      #breadcrumbs{
     font-size: .6em;
     margin-top: 6em;
   }

   blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }   

   .error-page .inside-content h1{
     font-size: 1.5em;
     margin-bottom: 0em;
   }


   .error-page .error{
     font-size: 8.1em;
   }   

.error-page .entry-content {
    font-size: 1em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   
   

.client-review{
  text-align: center;
  margin-top: 15%;
  padding: 22% 4% 5% 4%;
}


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}


.client-review img, .client-review .btn{
  margin: auto;
  width: 100%;
}

.client-review h1{
  font-size: 1.7em;
}   

 
.client-response .bg-inner p {
    font-size: 1.1rem;
    padding: 0% 0%;
}

.client-response .bg-inner h1 {
    font-size: 1.9rem;
}

.thank-you .bg-inner h1 {
    font-size: 2.2rem;
}

.thank-you .button{
  margin: .5em 0;
}

.thank-you .bg-inner p {
    font-size: 1rem;
}


   .bullet-list li{
     width: 100%;
   }

.inner-bottom {
    background-position: 100% 100%;
}   

   .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }
  
.insideimage .slider-usp .usp-box {
    font-size: 0.6em;
    padding: 5% 15%;
}


   .single-blog {
    position: relative;
    padding: 12% 4% 4% 4%;
}

   .insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 10.5%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
}

    .insideimage:after{
     width: 155%;
     border-radius: 0;
   }

   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: 0.5em;
   }
   
   
.thank-you {
    padding: 15% 1% 5% 1%;
    margin-top: 13%;
}


.banner-head{
   font-size: 1.1em;
}


.insideimage .col-lg-6{
  padding-right: 35%;
}

.banner-head{
  font-size: 0.83em;
  width: 100%;
}

.logo-image img{
  width: 8.4em;
  top: .1em;
}

.smallbar .logo-image img{
  width: 6em;
}


.logo-foot img{
  width: 19em;
}

.quick-nav.adjust {
    font-size: .9em;
    top: 4.7em;
}


.close-cta{
  font-size: 0.8em;
  padding: 6% 2% 3% 2%;
}
 
.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
    font-size: 0.6em;
}

.resp-txt{
  font-size: 1em;
}

.client-response {
    padding: 17% 1% 7% 1%;
    margin-top: 14%;
}


.hide-for-small-only{
  display: none!important;
}

.error-page {
    padding: 13% 4% 6% 4%;
    margin-top: 18%;
}

.help-links a{
  text-align: center;
}

.side-form iframe {
    height: 64em!important;
}


.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  font-size: 0.7em;
  position: relative;
  margin-top: 1em;
  bottom: -2em;
}

.insideimage:before{
  display: none;
}   

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

.show-for-small-only{
  display: block!important;
}


.emp-info em{
  width: 90em;
}

   .compressed-sec {
    padding: 5% 3%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

}



 @media screen and (max-width: 35em) and (min-width: 25.001em) {


/* NEW QUERIES */

.sliderfull{
  margin-top: 17%;
}
   
   .slider-header{
     font-size: 2.2em;
   }

/* END NEW QUERIES */

.logo-foot img{
  width: 19em;
}

.widget .home-form .camp-form iframe {
    height: 36.3em!important;
}

.modal-dialog .camp-form iframe {
    height: 32em!important;
}

.sched-row a ,.sched-row button{
  font-size: .8em;
}
  

.close-cta{
  font-size: 0.8em;
}
  
.insideimage .slider-usp .usp-box{
  font-size: .5em;
}

   #breadcrumbs{
     font-size: .7em;
     margin-top: 9em;
   }


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}

      blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }

      .bullet-list li{
     width: 100%;
   }

   .inner-bottom {
    background-position: 100% 100%;
}

      .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }

   .error-page .error{
     font-size: 8.9em;
   }

   .error-page .inside-content h1{
     font-size: 1.8em;
     margin-bottom: 0em;
   }

.error-page .entry-content {
    font-size: 1em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   

.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 15%;
}

.client-review img, .client-review .btn{
  margin: auto;
}

.client-review h1{
  font-size: 2.3em;
}    

.resp-txt{
  font-size: 1.3em;
}   

.client-response .bg-inner p {
    font-size: 1.4rem;
}

.client-response .bg-inner h1 {
    font-size: 2.4rem;
}

.thank-you .bg-inner h1 {
    font-size: 2.9rem;
}

.thank-you .button{
  margin: .5em 0;
}

.thank-you .bg-inner p {
    font-size: 1rem;
}

.thank-you {
    padding: 15% 1% 5% 1%;
    margin-top: 14%;
}
 

.client-response {
    padding: 16% 1% 7% 1%;
    margin-top: 16%;
}


.hide-for-small-only{
  display: none!important;
}

.error-page {
    padding: 16% 4% 14% 4%;
    margin-top: 18%;
}
.logo-image a {
    margin-top: .2em;
    transform: scale(1);
    top: 0em;
}

  .logo-image img {
    width: 9.8em;
    left: -0.2em;
    top: 0.1em;
}

   
   .single-blog {
    position: relative;
    padding: 10% 4% 4% 4%;
}

   .insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 10.5%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
}

   .insideimage:after{
     width: 155%;
     border-radius: 0;
   }

   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: 0.5em;
   }
   

.quick-nav.adjust {
    font-size: .9em;
    top: 4em;
}

.smallbar .logo-image img {
    width: 6em;
}

   
.help-links a{
  text-align: center;
}


.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  position: relative;
  margin-top: 1em;
  bottom: -1em;
}

   .insideimage:before{
     display: none;
   }

.insideimage .slider-usp.row>*{
  padding: 0 1%;
} 

.insideimage .col-lg-6{
  padding-right: 35%;
}

.banner-head{
  font-size: 1.1em;
  width: 100%;
}

.insideimage .activate a{
  font-size: .88em;
}
 
.show-for-small-only{
  display: block!important;
} 

   .compressed-sec {
    padding: 5% 5%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

}




 @media screen and (max-width: 39.938em) and (min-width: 35.001em) {



/* NEW QUERIES */


.sliderfull{
  margin-top: 19%;
}
   
   .slider-header{
     font-size: 2.7em;
   }
   
/* END NEW QUERIES */

.logo-foot img{
  width: 22em;
}

   .side-form iframe {
    height: 51em!important;
}
.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   
   
  .logo-image img {
    width: 14.3em;
    left: -0.3em;
    top: .1em;
}

.quick-nav.adjust {
    top: 4.4em;
}   

  .smallbar .logo-image img {
    width: 10.6em;
} 

.error-page {
    padding: 13% 4% 11% 4%;
    margin-top: 17%;
}


.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 12%;
}

.client-review img, .client-review .btn{
  margin: auto;
}


.client-review .row-cols-5 {
    padding: 0% 1%;
    margin-top: 2%;
}


.client-review .row-cols-5 .col{
  padding: 0.5%;
}

.client-review h1{
  font-size: 3.2em;
}   

.resp-txt {
    font-size: 1.5em;
}    

   
   .single-blog {
    position: relative;
    padding: 5% 4% 4% 4%;
}
   
.insideimage {
    padding: 28% 4% 0% 4%;
    margin-top: 10.5%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
}

   .insideimage:after{
     width: 100%;
     left: 0;
     border-radius: 0;
     transform: none;
   }


   .insideimage .truck-image:after{
     display: none;
   }
   
   .insideimage:before{
     display: none;
   }

   .insideimage .slider-usp .usp-box{
     font-size: .7em;
   }

.insideimage .slider-usp{
  width: 95%;
  margin-right: auto;
  right: 0;
  position: relative;
  margin-top: 1.5em;
  bottom: -1em;
}

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

 
.banner-head{
   font-size: 1.2em;
}

   #breadcrumbs{
     font-size: .79em;
     margin-top: 5em;
   }


   .bullet-list li{
     width: 100%;
   }

   .inner-bottom {
    background-position: 100% 100%;
}

      .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }

   blockquote {
    padding: 3% 4% 3% 8%!important;
}

   blockquote:after{
     display: none;
   }

      .error-page .inside-content h1{
     font-size: 2.7em;
     margin-bottom: 0em;
   }

   .error-page .error{
     font-size: 10em;
   }

.error-page .entry-content {
    font-size: 1.2em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   

.close-cta{
  font-size: 1em;
}


.client-response .bg-inner p {
    font-size: 1.5rem;
    padding: 0% 0%;
}

.client-response .bg-inner h1 {
    font-size: 3.1rem;
}

.thank-you .bg-inner h1 {
    font-size: 4.2rem;
}

.thank-you .button{
  margin: .5em 0;
}
 
.thank-you {
    padding: 13% 1% 5% 1%;
    margin-top: 15%;
} 

.client-response {
    padding: 15% 1% 7% 1%;
    margin-top: 16%;
}
 

.hide-for-small-only{
  display: none!important;
}

.help-links a{
  text-align: center;
} 
 
.show-for-small-only{
  display: block!important;
}
  

   .compressed-sec {
    padding: 5% 8%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}

 }



 @media screen and (max-width: 55em) and (min-width: 39.939em) {



/* NEW QUERIES */

.sliderfull{
  margin-top: 19%;
}
   
   .slider-header{
     font-size: 3.1em;
   }
   
/* END NEW QUERIES */

.logo-foot img{
  width: 24em;
}
 
.banner-head{
  font-size: 1.3em;
}

.compressed-sec {
    padding: 5% 8%;
    background: #ededed;
}

.compressed-sec .col-md-8{
  width: 66.6666666667%;
}

   .compressed-sec .col-md-4{
  width: 33.3333333333%;
}
   
.col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
}

   .side-form iframe {
    height: 51em!important;
}

   .quick-nav.adjust{
     top: 4.5em;
   }

.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   

    .logo-image img {
    width: 15em;
    left: -0.3em;
    top: 0.1em;
}


   .single-blog {
    position: relative;
    padding: 5% 4% 4% 4%;
}

   
.insideimage {
    padding: 20% 4% 0% 4%;
    margin-top: 10.5%;
    border-bottom: 0.2em solid #1d1761;
    background-image: none;
}

   .insideimage:after{
     width: 155%;
     border-radius: 0;
   }
   
.client-response {
    padding: 16% 2% 7% 2%;
    margin-top: 7%;
}
   
   .smallbar .logo-image img {
    width: 11em;
}

.error-page {
    padding: 15% 4% 12% 4%;
    margin-top: 10%;
}

.sliderfull .col-sm-12, .section-1 .col-sm-12, .section-2 .col-sm-12, .section-3 .col-sm-12, .section-4 .col-sm-12, .section-6 .col-sm-12{
    width: 100%!important;
}

.section-1 .col-md-3{
  width: 50%!important;
}
   
.sliderfull .col-md-7{
  width: 100%;
}
   
.show-for-small-only{
  display: block!important;
} 

.insideimage .slider-usp .usp-box{
  font-size: .73em;
}

.insideimage:before{
  display: none;
}

.inner-bottom{background-position: 100% 100%;}   

   .inner-bottom .usp-wrap:after{
     display: none;
   }

   .inner-bottom .usp-wrap{
     width: 100%;
   }
   
.side-label{
  font-size: 2em;  
} 

.insideimage .slider-usp{
  width: 90%;
  margin-right: auto;
  position: relative;
  margin-top: 1.5em;
  bottom: -1em;
}


.insideimage .col-lg-6{
  padding-right: 39%;
}

.insideimage .slider-usp.row>*{
  padding: 0 1%;
}

.error-page .error{
  font-size: 11em;
}

.close-cta{
  font-size: 1.1em;
}

.hide-for-small-only{
  display: none!important;
}
 
.help-links a{
  text-align: center;
}

   .error-page .inside-content h1{
     font-size: 2.9em;
     margin-bottom: 0em;
   }

.error-page .entry-content {
    font-size: 1.3em;
    padding: 0% 3%;
    margin-top: 0.1em;
}   
 
.insideimage .col-md-4{
  width: 33.33%!important;
}


   .modal-dialog iframe {
    height: 43em!important;
}

.client-review{
  text-align: center;
  padding: 24% 4% 5% 4%;
  margin-top: 12%;
}

.client-review img, .client-review .btn{
  margin: auto;
}

.client-review .row-cols-5 {
    padding: 0% 8%;
    margin-top: 2%;
}

.client-review .row-cols-5 .col{
  padding: 0.5%;
}

.client-review h1{
  font-size: 3.5em;
}   

.resp-txt {
    font-size: 1.5em;
}

.copyright{
  font-size: .9em!important;
}

.client-response .bg-inner p {
    font-size: 1.5rem;
}

.thank-you .bg-inner h1 {
    font-size: 5rem;
}

.thank-you {
    padding: 9% 1% 5% 1%;
    margin-top: 13%;
}

.thank-you .button{
  margin: .5em 0;
}


.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
} 

 }


 @media screen and (max-width: 59.999em) and (min-width: 55.001em) {


/* NEW QUERIES */

 
   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull{
     margin-top: 14%;
   }


/* END NEW QUERIES */

.sched-row a strong{
  font-size: 2em;
}   

.side-form iframe {
    height: 44em!important;
}

.smallbar .logo-image img {
    width: 11em;
}
  
 .quick-nav.adjust {
    top: 4em;
} 
 

.client-review {
    margin-top: 12%;
    padding: 14% 4% 5% 4%;
}   

   
.logo-image a {
    margin-top: .1em;
    transform: scale(1);
    top: 0em;
}   

 
.logo-image img{
  width: 15em;
  top: 0;
}
 
   
.thank-you {
    margin-top: 10%;
}   

.sliderfull .col-md-7{
  width: 100%;
}
  
.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
}

.insideimage .slider-usp .usp-box{
  font-size: .8em;
}

.insideimage {
    margin-top: 19.5%;
    padding: 11% 2% 1% 2%;
    background-size: 44%;
}

.rev-sec-in .sec4-header {
    font-size: 2.3em;
}

   .rev-sec-in .btn{
     font-size: .748em;
   }   

.side-coup .btn-primary{
  font-size: .9em;
}   
   
 
.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}

 

.insideimage .slider-usp{
  width: 53%;
  font-size: .84em;
}

.close-cta{
  font-size: 1.1em;
} 

.site-footer .bullet-list li{
  font-size: .9em;
}

.sched-row a{
  font-size: 0.9em;
}   

.error-page {
    padding: 11% 4% 6% 4%;
    margin-top: 10%;
}


.resp-txt {
    font-size: 1.5em;
}

.client-review h1{
  font-size: 4.5em;
}

.sched-row:after {
    content: " ";
    position: absolute;
    bottom: 35%;
    height: 2.4em;
    width: .4em;
    left: 50.8%;
}

.sliderfull .btn{
  font-size: 1em;
}

.copyright{
  font-size: .9em!important;
}   

.hide-for-small-only{
  /* display: none; */
}
 
.show-for-small-only{
  display: none;
}
    .sidebar.show-for-small-only{
  display: block!important;
     width: 100%;
}

 }


 @media screen and (min-width: 60em) and (max-width: 63.938em) {
 
/* NEW QUERIES */

   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull{
     margin-top: 13%;
   }

/* END NEW QUERIES */

 
.inside-content .col-md-8, .inside-content .col-md-4 {
    flex: 0 0 auto;
    width: 100%;
}
 
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.65em;
    padding: 0.7em 1.4em;
}

   .top-bar .menu>li a {
    font-size: 0.67em;
}

.menu-top-menu-container .menu>li a{
  font-size: 0.7em;
  padding: .4em .7em;
}

.top-menu .btn{
  font-size: .8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: .68em;
}

.smallbar    .menu>li a {
    font-size: 0.6em;
}

.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}

.insideimage {
    padding: 12% 3% 1% 3%;
    margin-top: 7.5%;
    background-size: 44%;
}

  .logo-image img {
    width: 11em;
}

   .section-protecta h1{
     font-size: 2em;
   }
  

.client-review {
    padding: 13% 4% 5% 4%;
}   
   
.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}


.smallbar .logo-image img {
    width: 10em;
}

.smallbar .desk-nav .btn-primary{
  font-size: 0.7em;
}


.copyright{
  font-size: .9em!important;
}   

.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
    font-size: .9em;
}


.close-cta{
  font-size: 1.1em;
}

.home-form .row {
    font-size: 1.3em;
}



html {
    font-size: 15px!important;
}
 

.show-for-small-only{
  display: none;
}

   .sidebar.show-for-small-only{
  display: block!important;
     width: 100%;
}


 }


 @media screen and (max-width: 75em) and (min-width: 63.939em) {
 

/* NEW QUERIES */
 
 
   .slider-header{
     font-size: 2.2em;
   }

   .sliderfull {
    margin-top: 13%;
}

/* END NEW QUERIES */


   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.69em;
}

.menu-top-menu-container .menu>li a {
    font-size: 0.68em;
    padding: 0.4em .9em;
}

.top-menu .btn{
  font-size: .8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: 0.7em;
}

.smallbar    .menu>li a {
    font-size: 0.61em;
}

.smallbar .desk-nav .btn-primary{
  font-size: 0.8em;
}


.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}
 

.contact-desk a{
  font-size: 1.8em;
}

.logo-image img {
    width: 11em;
}

   .section-protecta h1{
     font-size:2.2em;
   }

   .section-protectc .usp-box {
    height: 17em;
    color: black;
     font-size: .7em;
}


.client-review {
    padding: 13% 4% 5% 4%;
}   

.banner-head{
  font-size: 1.3em;
}

.insideimage .activate a{
  font-size: 1em;
}


.smallbar .logo-image img {
    width: 8em;
}
 
html {
    font-size: 16px!important;
}

 
.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.2em;
}

.sched-row a ,.sched-row button{
  font-size: .9em;
}

.show-for-small-only{
  display: none;
}



 }


 @media screen and (max-width: 85em) and (min-width: 75.001em) {

/* NEW QUERIES */
   
   .slider-header{
     font-size: 2.5em;
   }

   .sliderfull {
    margin-top: 13%;
}
 
/* END NEW QUERIES */


   html {
    font-size: 17px!important;
}

.home-form iframe{
  height: 43em!important;
}
  
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

  

.menu>li a {
    padding: 0.7em 1.3em;
    font-size: 0.7em;
}

.menu-top-menu-container .menu>li a{
  font-size: 0.7em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: .79em;
}

.top-menu .btn{
  font-size: .9em;
}

.smallbar .menu>li a {
    font-size: 0.67em;
}

.logo-image img {
    width: 14em;
}

.side-rev .btn{
  font-size: 1em;
}

 

.smallbar .logo-image img {
    width: 8em;
}

.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.3em;
}

.sched-row a ,.sched-row button {
    padding: 1% 2% 2% 2%;
}

.show-for-small-only{
  display: none;
}


 } 



 @media screen and (max-width: 95.001em) and (min-width: 85.001em) {


/* NEW QUERIES */

   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 2.94em;
   }

/* END NEW QUERIES */

   html {
    font-size: 17px!important;
}
 
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 0.9em;
}

.menu-top-menu-container .menu>li a{
  font-size: .8em;
}

.smallbar    .menu>li a {
    font-size: 0.8em;
}

.smallbar .menu-top-menu-container .menu>li a{
  font-size: 0.9em;
}
 

.smallbar .desk-nav .top-bar .btn-primary{
  font-size: 0.7em;
}

  .logo-image img {
    width: 14em;
}


.smallbar .logo-image img {
    width: 11em;
}

   .section-8:after{
     width: 52%;
   }
 

.sched-row:after {
    content: " ";
    position: absolute;
    bottom: 35%;
    height: 2.4em;
    width: .4em;
    left: 50.8%;
}

.sliderfull .btn{
  font-size: 1em;
}

.copyright{
  font-size: .9em!important;
}   


.close-cta{
}

.show-for-small-only{
  display: none;
}

 }


 @media screen and (max-width: 125em) and (min-width: 95.001em) {


/* NEW QUERIES */


   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 3.24em;
   }

 
   
/* END NEW QUERIES */

   html {
    font-size: 17px!important;
}
  
   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }
  

.copyright{
  font-size: .9em!important;
}   

.close-cta{
  font-size: 1.6em;
}

.sched-row a ,.sched-row button {
    padding: 3% 0% 3% 0%;
}


.show-for-small-only{
  display: none;
}
 


 } 
  
  
 @media screen and (min-width: 125.001em) and (max-width: 999.9em) {
 

/* NEW QUERIES */
 
   
   .sliderfull {
    margin-top: 12%;
}
   
   .slider-header{
     font-size: 3.64em;
   }

 

/* END NEW QUERIES */


.sliderfull {
} 
 
 
html {
    font-size: 17px!important;
}
 

   .desk-nav{
     display: block;
   }

   .mobile-nav, .quick-nav{
     display: none;
   }

   .menu>li a {
    font-size: 1.1em;
}
.smallbar .desk-nav .btn-primary{
  font-size: .9em;
}


.copyright{
  font-size: .9em!important;
}   

.sched-row a ,.sched-row button{
    padding: 3% 0% 3% 0%;
    font-size: 1.1em;
}

.show-for-small-only{
  display: none;
}

 }



[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}

/* ==========================================================================
   ALBRITTON SERVICE COMPANY — Claude AI design refresh
   Header + Footer only (per current scope). Added at the end of custom.css
   on purpose: rules below intentionally override earlier selectors in this
   same file (.desk-nav, .mobile-nav, .quick-nav, .mainnav .menu, .shift-item,
   .site-footer, etc.) by relying on normal CSS source order, plus a few
   !important flags where the earlier rules already used !important.

   Breakpoint note: this theme's existing responsive rules use a confusing,
   overlapping set of em-based @media queries (see ~line 3907 onward) in the
   Foundation "show/hide-for" style the working-instructions doc warns about.
   Rather than reverse-engineer that system, the rules in this section define
   their own clean px breakpoints (768px / 1080px, matching the ones the
   Claude design was built and tested at) and take control of header/footer
   layout outright across the FULL width range with no gap, regardless of
   what the legacy system would otherwise do at those same widths.

   Fonts: this design specifies Saira Condensed (headings/labels/buttons,
   uppercase, tracked out) and Open Sans (body copy). Both are loaded the
   same way this theme already loads all web fonts — via the existing
   'google_font_code' option field (Theme Options > Site Scripts) echoed in
   header.php's <head>. No ACF/template change needed for that; if that
   field doesn't currently include Saira Condensed + Open Sans, add the
   Google Fonts <link>/<style> snippet for them there and --font-display /
   --font-body below will pick them up automatically. Until then, the
   fallback stack (Arial Narrow / system-ui) still reads condensed/uppercase
   and nothing breaks.
   ========================================================================== */

:root {
  /* Brand red (logo red) */
  --asc-red-400: #E1173D;
  --asc-red-500: #D71E34;   /* primary brand red — CTAs, accents */
  --asc-red-600: #B01426;   /* hover / pressed */
  --asc-red-700: #8A0F1D;

  /* Brand blue (logo blue) */
  --asc-blue-400: #2E86D6;
  --asc-blue-500: #005FAF;  /* secondary brand blue */
  --asc-blue-600: #004A87;
  --asc-blue-700: #0A2E5C;

  /* Navy / ink (dark grounds) */
  --asc-navy-900: #0A1727;
  --asc-navy-950: #060E1A;
  --asc-ink-900:  #111418;

  /* Neutrals */
  --asc-gray-050: #F5F6F8;
  --asc-gray-100: #E9ECF1;
  --asc-gray-200: #D3D8E0;
  --asc-gray-400: #8B95A3;
  --asc-gray-700: #374151;
  --asc-text-inverse-muted: #A9B4C4;

  /* Type */
  --asc-font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --asc-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --asc-ls-uppercase: 0.08em;
  --asc-ls-overline: 0.14em;
}

/* --------------------------------------------------------------------------
   HEADER — desktop rows
   -------------------------------------------------------------------------- */

header#masthead.smallbar { box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 8%), inset 0 -1px 0 rgb(0 0 0 / 10%) !important; }

.desk-nav {
  background: #fff;
  padding: 0 !important;
}

/* Utility bar — location/credential note + top-right quick links */
.header-utility-bar {
  background: var(--asc-blue-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 24px;
  font-family: var(--asc-font-display);
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 12.5px;
}

.header-utility-bar .utility-left {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.header-utility-bar .utility-left .icon-mid-shield {
  color: var(--asc-red-400);
  font-size: 1.1em;
}

.header-utility-bar .utility-left .utility-sep {
  opacity: .6;
  margin: 0 2px;
}

.header-utility-bar .utility-right { display: flex; }

.header-utility-bar .utility-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-utility-bar .utility-menu li { margin: 0; }

.header-utility-bar .utility-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 12.5px;
  transition: color .2s ease-in-out;
}

.header-utility-bar .utility-menu a span[class^="icon-"] {
  color: var(--asc-red-400);
}

.header-utility-bar .utility-menu a:hover { color: var(--asc-red-400) !important; }

/* Main bar — logo / phone / schedule button */
.header-main-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 72px;
  border-bottom: 3px solid var(--asc-blue-500);
}

.header-main-bar .header-logo img {
  height: 112px;
  width: auto;
  display: block;
}

.header-main-bar .header-phone-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.header-main-bar .call-label {
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 13px;
  color: var(--asc-ink-900);
  margin-bottom: 6px;
}

.header-main-bar .call-label .call-label-accent { color: var(--asc-red-500); }

.header-main-bar .header-phone-number {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--asc-font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--asc-blue-600);
  letter-spacing: -0.01em;
}

.header-main-bar .header-phone-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--asc-red-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-main-bar .header-phone-icon .icon-mobile {
  color: #fff;
  font-size: 30px;
}

.header-main-bar .header-book-btn {
  background: var(--asc-red-500) !important;
  color: #fff !important;
  border: 0;
  border-radius: 0;
  padding: 13px 26px;
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 15px;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
  transition: background .15s ease-in-out;
}

.header-main-bar .header-book-btn:hover,
.header-main-bar .header-book-btn:focus {
  background: var(--asc-red-600) !important;
}

/* Nav bar — primary menu, red current-item */
.header-nav-bar { background: var(--asc-ink-900); }

.header-nav-bar .main-nav { padding: 0; }

.mainnav .menu > li > a {
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 14px;
  color: #cfd6e2;
  padding: 15px 20px;
}

.mainnav .menu .active > a,
.mainnav .menu .current-menu-item.active > a,
.mainnav .menu > li > a:hover {
  color: #fff !important;
  background: var(--asc-red-500) !important;
}

.mainnav .menu .sub-menu .current-menu-item.active > a { background: var(--asc-red-600) !important; }

.mainnav .menu > li.menu-item-has-children > a:before,
.mainnav .menu > li.menu-item-has-children > a:hover:before {
  color: inherit;
}

/* --------------------------------------------------------------------------
   MOBILE HEADER — bottom-fixed quick nav (matches the design's mobile nav)
   -------------------------------------------------------------------------- */

.mobile-nav .logo-image img { height: 56px !important; }

.mobile-nav .btn-primary {
  background: var(--asc-ink-900) !important;
  color: #fff !important;
}

.mobile-nav .col a[aria-label="Click to call functionality"] {
    background: var(--asc-red-500);
    color: #fff;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.quick-nav {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 !important;
  opacity: 1 !important;
  background: var(--asc-ink-900);
  border-top: 2px solid var(--asc-red-500);
  z-index: 9998;
}

.quick-nav.adjust { padding: 0 !important; top: auto !important; }

.quick-nav .col-3 { flex: 1 0 0; max-width: none; padding: 0; }

.quick-nav a {
  padding: 10px 4px 8px;
  color: #fff;
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 0;
  transition: background .15s ease-in-out;
}

.quick-nav a span[class^="icon-"] {
  font-size: 1.5em;
  color: var(--asc-red-400);
  top: 0;
}

.quick-nav a em {
  font-style: normal;
  opacity: 1;
  position: static;
  margin: 0;
  bottom: auto;
}

.quick-nav a em:after { display: none; }

.quick-nav a:hover,
.quick-nav a:active {
  background: var(--asc-red-500);
  color: #fff;
}

.quick-nav a:hover span[class^="icon-"] { color: #fff; }

/* Offcanvas mobile menu — recolor to navy/red */
.shift-menu {
  background: var(--asc-navy-950);
}

.shift-item a:hover { background-color: var(--asc-blue-600); border-left-color: var(--asc-red-500); }
.shift-item a.sub-item:hover { background-color: var(--asc-blue-600); }

/* --------------------------------------------------------------------------
   Breakpoint control — takes full ownership of desk-nav / mobile-nav /
   quick-nav visibility so it doesn't fall through a gap in the legacy
   Foundation-style em breakpoints elsewhere in this file.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .desk-nav { display: none !important; }
  .mobile-nav { display: block !important; }
  .quick-nav { display: flex !important; }
  /* Leave room at the bottom of the viewport for the fixed quick nav so
     footer content isn't hidden behind it on mobile. */
  body { padding-bottom: 58px; }
}

@media (min-width: 768px) {
  .desk-nav { display: block !important; }
  .mobile-nav { display: none !important; }
  .quick-nav { display: none !important; }
  body { padding-bottom: 0; }
}

@media (max-width: 767.98px) {
  .header-main-bar { flex-wrap: wrap; justify-content: center; text-align: center; }
  .header-main-bar .header-phone-number { font-size: 24px; }
}

/* ==========================================================================
   FOOTER — Claude AI design refresh
   ========================================================================== */

/* foot-cta-row (Call / Schedule Online banner) removed per feedback — it
   isn't part of the Claude design's footer. No CSS needed for it. */

.site-footer.foot-main {
  background: var(--asc-navy-950) !important;
  color: var(--asc-text-inverse-muted) !important;
  border-top: 3px solid var(--asc-red-500);
}
/* The rule above needs !important: an earlier rule in this same file,
   plain `.site-footer { background:#fff !important; color:black !important; }`
   (pre-dates this redesign), otherwise wins over a same-specificity rule
   appended later purely by !important, regardless of source order. */

.foot-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding: 48px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.foot-col-heading {
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 15px;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--asc-blue-500);
  width: fit-content;
}

.foot-logo {
  height: 64px;
  width: auto;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.foot-about-text { font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0 0 16px; }

.foot-socials { display: flex; gap: 10px; }

.foot-social-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--asc-blue-600);
  border-radius: 2px;
  color: #fff;
  text-decoration: none;
  transition: background .15s ease-in-out;
}

.foot-social-btn:hover { background: var(--asc-red-500); }
.foot-social-btn span[class^="icon-"] { color: #fff; font-size: 16px; }

.foot-link-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.foot-link-list li { margin: 0; }

.foot-link-list a,
.foot-link-list-item {
  color: var(--asc-text-inverse-muted);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.foot-link-list a:before,
.foot-link-list-item:before {
  content: "\f105";
  font-family: 'icomoon';
  color: var(--asc-red-400);
  font-size: .85em;
}

.foot-link-list a:hover,
.foot-link-list-item:hover { color: #fff; }

.foot-col-contact .foot-contact-phone {
  display: block;
  text-decoration: none;
  font-family: var(--asc-font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  margin-bottom: 10px;
}

.foot-contact-list { display: flex; flex-direction: column; gap: 10px; }

.foot-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}

.foot-contact-icon { color: var(--asc-red-400); position: relative; top: .15em; }

.foot-col-contact .foot-payments {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.foot-payments-label {
  display: block;
  font-family: var(--asc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  font-size: 12px;
  color: #fff;
  margin-bottom: 8px;
}

.foot-payments-list { display: flex; gap: 8px; flex-wrap: wrap; }

.foot-payments-list img { height: 28px; width: auto; background: #fff; border-radius: 3px; padding: 2px 4px; }

.foot-copyright {
  background: var(--asc-navy-900);
  border-top: 1px solid rgba(255,255,255,.1);
}

.foot-copyright-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase);
  color: var(--asc-text-inverse-muted);
}

@media (max-width: 991.98px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
  .foot-cta-row { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
  .foot-copyright-inner { flex-direction: column; text-align: center; justify-content: center; }
}




html.asc-header-measured .sliderfull,
html.asc-header-measured .insideimage{
  margin-top: var(--asc-header-h) !important;
}


.main-nav .menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav .menu > li > a{
  display: block;
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--asc-ls-uppercase, 0.08em);
  /* Scales with the viewport between the two ends rather than stepping at a
     breakpoint, so there's no width where it's just too big to fit.

     The numbers are set against the FALLBACK font, not Saira Condensed: if
     Google Fonts is slow or blocked the nav renders in whatever the system
     offers, which is materially wider. Sized for that, it fits either way —
     with the webfont loaded there's room to spare. */
  font-size: clamp(9.5px, 1.1vw, 14px);
  padding: 15px clamp(4px, 0.85vw, 20px);
  line-height: 1;
  /* !important because the legacy `.menu > li a` rule sets colour with
     !important too, and it wins on cascade order otherwise. (Worth knowing:
     that rule is `color: black !important` in one copy of this file and
     `#ffffff !important` in another — either way it's black-on-navy or a
     coin toss, so this pins it.) */
  color: #cfd6e2 !important;
  /* the fix for the actual "squashed" symptom: an item may move to a second
     row if it truly has to, but a label never breaks mid-phrase */
  white-space: nowrap;
}

.main-nav .menu .active > a,
.main-nav .menu .current-menu-item.active > a,
.main-nav .menu > li > a:hover,
.main-nav .menu > li > a:focus{
  color: #fff !important;
  background: var(--asc-red-500, #D71E34) !important;
}

/* the current page's item, so you can see where you are */
.main-nav .menu > li.current-menu-item > a,
.main-nav .menu > li.current-menu-ancestor > a{
  color: #fff !important;
}

.main-nav .menu .sub-menu .current-menu-item.active > a{
  background: var(--asc-red-600, #B01426) !important;
}

/* the dropdown caret rides the link's colour instead of staying white on a
   red hover */
.main-nav .menu > li.menu-item-has-children > a:before,
.main-nav .menu > li.menu-item-has-children > a:hover:before{
  color: inherit;
}

/* Sub-menus keep sentence case and left alignment — the uppercase treatment
   above is for the top level only. */
.main-nav .menu .sub-menu a{
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

/* Below ~1000px the tracking is what tips it over the edge, so it comes in
   rather than the type going smaller still. */
@media screen and (max-width: 1000px){
  .main-nav .menu > li > a{
    letter-spacing: 0.03em;
  }
}

/* The theme shrinks the header on scroll via .smallbar, including the nav
   font. Left alone it fights the clamp above, so it's given the same fluid
   treatment one step smaller rather than a fixed size. */
.smallbar .main-nav .menu > li > a{
  /* floor must sit BELOW the base rule's 9.5px floor, not above it —
     otherwise scrolling makes the nav bigger at 768px and wraps it */
  font-size: clamp(9px, 1vw, 13px);
  padding-top: 11px;
  padding-bottom: 11px;
}


.asc-head-title,
.asc-head-overline,
.top-services-heading,
.top-services-overline,
.servi-label,
.service-more,
.usp4-title,
.usp6-title,
.community-title,
.community-overline,
.closing-cta-title,
.closing-cta-subtitle,
.closing-cta-badges-label,
.cpn-price,
.cpn-offer,
.areas-place-name,
.areas-svc,
.areas-zip-label,
.areas-chip,
.badge-strip-label,
.request-form-title,
.intro-form-awards-label,
.addsvc-panel-label,
.addsvc-tab,
.foot-col-heading,
.foot-payments-label,
.foot-contact-phone,
.call-label,
.header-phone-number,
.header-book-btn,
.slider-header,
.asc-btn{
  font-family: var(--asc-font-display, 'Saira Condensed', 'Arial Narrow', sans-serif) !important;
}


.usp4-title,
.usp6-title{
  margin: 0;
}


.foot-col-heading{
  margin: 0 0 14px;
}

.inside-content .asc-btn {
    display: inline-flex;
    color: white;
}

.inside-content .asc-btn-primary,
.inside-content .asc-btn-primary:visited,
.inside-content .asc-btn-secondary,
.inside-content .asc-btn-secondary:visited{
  color: #fff;
}

.inside-content .asc-btn-ondark,
.inside-content .asc-btn-ondark:visited{
  color: var(--asc-ink-900, #111418);
}