/* Typography */


/* End typography */

:root{
--white: #ffffff;
--black: #000000;
--black_two: #222222;
/* --primary: #0BAE5F; */
--primary: #C1554E;
/* --secondary: #20445a; */
--secondary: #233344;

--Barlow: "Barlow", sans-serif;

}

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

html { overflow-x: hidden; }

body { background-color: var(--white); color: var(--black); overflow: hidden; font-family: var(--Barlow); font-size: 16px; line-height: 1.25; font-weight: 400; line-height: normal;}

ul{list-style: none;}

a{text-decoration: none; display: inline;}

img{max-width: 100%; font-style: italic;}

.main-wrap{min-height: 100%; overflow: hidden; position: relative; overflow-x: hidden;}

header, section, main, footer {width: 100%; display: flex; align-items: center; justify-content: center;  flex-flow: column; position: relative;}

.wrapper{width: 100%; max-width: 1180px; padding-inline: 20px;}
/* Global style */
h1, h2, h3, h4, h5, h6{}


span, em, dfn{display: inline-block;}

p{color: #555555; line-height: 1.5;}
.lead-text{font-size: 20px; line-height: 38px; color: var(--black);}
.small-text{font-size: 16px; line-height: 28px;}

dfn, address, em{font-style: normal;}
label, input[type="submit"]{cursor: pointer;}
button:focus{outline: none;}
.btn{text-align: center; display: inline-flex; align-items: center; justify-content: center; color: var(--white); font-size: 18px; position: relative; line-height: 26px; font-family: var(--Barlow); font-weight: 700; padding: 17px 37px; text-transform: uppercase; z-index: 1; transition: all 500ms ease; background-color: var(--primary); cursor: pointer; outline: none; border: none;}
.btn:before { position: absolute; content: ''; width: 100%; height: 0%; background: var(--secondary); left: 0px; top: 0px; z-index: -1; transition: all 500ms ease; }
.btn:after { position: absolute; content: ''; width: 100%; height: 0%; background: var(--secondary); left: 0px; bottom: 0px; z-index: -1; transition: all 500ms ease; }
.btn .btn-shape { position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; }
.btn .btn-shape:before { position: absolute; content: ''; background: rgba(255, 255, 255, 0.4); width: 8px; height: 8px; left: 0px; bottom: 0px; transition: all 500ms ease; }
.btn .btn-shape:after { position: absolute; content: ''; background: rgba(255, 255, 255, 0.4); width: 8px; height: 8px; top: 0px; right: 0px; transition: all 500ms ease; }

.btn:hover { background: var(--secondary); }
.btn:hover:before { height: 50%; }
.btn:hover:after { height: 50%; }
.btn:hover .btn-shape:before { bottom: calc(100% - 8px); }
.btn:hover .btn-shape:after { top: calc(100% - 8px); }

.mobi{display: none;}
.desk{display: block;}

/* Flex style */

.flex{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: row wrap;}
/* End Flex style */

nput::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Start Header Style */
.main-header-section{padding-block: 10px; background-color: var(--white); position: relative; z-index: 99;}
.main-header-section .pattern-layer{ position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/pattern-white.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; opacity: .75;}
.main-header-section .wrapper{max-width: 1360px;}
.header-inner{width: 100%; display: flex; flex-flow: row wrap; align-items: center; position: relative; z-index: 1;}
.logo-wrap{width: 137px; display: flex; align-items: center; justify-content: space-between;}
.logo-wrap a{width: 80px; display: flex;}
.logo-wrap a img{width: 100%;}

.nav-wrap{width: calc(100% - 137px); padding-left: 20px; display: flex; align-items: center;}
.main-nav{width: calc(100% - 210px); display: flex; justify-content: flex-end; padding-right: 25px;}
.main-nav ul{display: flex; gap: 20px;}
.main-nav ul li{display: flex;}
.main-nav ul li a{position: relative; display: block; text-align: center; font-size: 16px; line-height: 30px; font-weight: 500; opacity: 1; color: var(--black_two); z-index: 1; text-transform: uppercase; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
.main-nav ul > li > a:before { position: absolute; content: ''; width: 100%; height: 2px; left: 0px; top: -5px; transform: scale(0, 0); transition: all 500ms ease; background-color: var(--primary);}
.main-nav ul > li > a:hover:before {transform: scale(1, 1);}

.header-btn-wrap{width: 210px; display: flex; gap: 5px; position: relative;}

.search-wrap{width: 60px; position: relative;}
.search-icon{position: relative; font-size: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; border: 2px solid #eeeeee; color: #444444; cursor: pointer; display: inline-block; background: transparent; transition: all 500ms ease;}
.search-icon:hover { color: var(--primary); border-color: var(--primary);}

.header-btn{width: auto; display: flex;}
.header-btn a.btn{padding-inline: 28px; background: linear-gradient(79deg, #F1E576 15.06%, #C18D30 109.15%); color: #233343; font-family: var(--Barlow); gap: 12px;}
.header-btn a.btn:before, .header-btn a.btn:after{display: none;}
.header-btn a.btn img{width: 24px; animation: tilt-shaking 1s infinite;}

.hamburger{display: none; align-items: center; justify-content: center; width: 30px; height: 20px; cursor: pointer;}
.hamburger div{width: 100%; height: 2px; border-radius: 2px; background-color: var(--black); position: relative; transition: .35s ease-in-out;}
.hamburger div:before, .hamburger div:after{position: absolute; content: ''; width: 100%; height: 2px; border-radius: 2px; background-color: var(--black_two); top: -8px; left: auto; transition: .35s ease-in-out;}
.hamburger div:after{top: auto; bottom: -8px;}

.navShown .hamburger div{background-color: transparent;}
.navShown .hamburger div:before{top: auto; transform: rotate(45deg);}
.navShown .hamburger div:after{bottom: auto; transform: rotate(-45deg);}


.search-box{padding: 30px; top: 71px !important;  width: 330px; border-radius: 0px; background: #ffffff; right: 0; left: auto !important; transform: translate3d(0px, 0px, 0px) scale3d(0.8, 0.8, 0.8) !important; border-color: transparent; border-radius: 3px; box-shadow: 7px 5px 30px 0 rgba(72, 73, 121, 0.15); transition: .5s ease; display: block; opacity: 0; visibility: hidden; position: absolute; z-index: 2;}

.search-box.active { display: block; transform: scale3d(1, 1, 1) !important; opacity: 1; visibility: visible; }

.search-box form{width: 100%;}
.form-group{width: 100%; position: relative;}
.search-box input{display: block; width: 100%; line-height: 24px; padding: 9px 50px 9px 15px; height: 50px; border: 1px solid #f3f5fe; border-radius: 3px; background: #f3f5fe; outline: none;}
.search-btn { position: absolute; right: 1px; top: 1px; width: 50px; height: 48px; text-align: center; color: #111111; background: #f3f5fe; font-size: 14px; border-radius: 0px 3px 3px 0px; cursor: pointer; border: none; outline: none; }

.logo-wrap .btn-box{display: none;}
.header-btn span.dynamic-phone {
    white-space: nowrap;
}
/* End Header Style */

/* Start Hero Style */
.hero-wrap{ z-index: 2; height: calc(100svh - 101px); min-height: 650px; justify-content: flex-start; font-size: 1.11vw;}
.hero-wrap .wrapper{max-width: 90em; padding-inline: 4.625em 13.125em;}
.hero-inner { width: 100%; display: flex ; flex-flow: row wrap; justify-content: space-between; align-items: center; position: relative; z-index: 2; font-size: 1em;}
.hero-content-wrap{position: relative; display: block; width: 57.5%; z-index: 5;}
.hero-content-wrap h5{position: relative; display: inline-block; font-size: 18px; font-weight: 400; line-height: 26px; padding-left: 40px; color: var(--primary);}
.hero-content-wrap h5 img { position: absolute; left: 0px; top: -3px; font-size: 24px; color: var(--white); width: 30px; transform: scale(1.25);}
.hero-content-wrap h1 {color: var(--white); font-family: var(--Barlow); font-size: 3.563em; font-weight: 900; line-height: 101%; text-transform: uppercase; position: relative; z-index: 1;}
.hero-content-wrap h1 span{color: #D9B953; display: inline;}

.btn-box {width: 100%; position: relative; display: flex; align-items: center; margin-top: 2em;}
/* 2026-09-30: the hero headline and form are VISIBLE AT FIRST PAINT. They used to start at
 * opacity:0 and wait for main-script.min.js to add .active-slide 500 ms after DOM ready, so on a
 * throttled phone an ad visitor saw no form for 6-10 s, and never if the JS failed. Do not put
 * an opacity:0 back on anything a visitor needs to read or tap here. */
.hero-content-wrap{}
.active-slide .hero-content-wrap{ opacity: 1; transform: translateY(0);}

.active-slide .hero-content-wrap h5 {opacity: 1; transform: translateY(0); transition: all 500ms ease-in;}
.active-slide .hero-content-wrap h1 {opacity: 1; transform: translateY(0); transition: all 500ms ease-in; transition-delay: 50ms;}
.active-slide .hero-content-wrap p {opacity: 1; transform: translateY(0); transition: all 500ms ease-in; transition-delay: 100ms;}
.active-slide .btn-box{opacity: 1; transform: translateY(0); transition: all 500ms ease-in;  transition-delay: 150ms;}

.call-now { border: 1px dashed #6de5f2; position: relative; display: inline-block; padding: 4px; width: 100%; max-width: 360px; }
.call-now .inner { background-color: var(--secondary); position: relative; display: inline-block; padding: 21px 30px 23px 75px; width: 100%;}
.call-now .inner:before { position: absolute; content: ''; background: rgba(34, 34, 34, 0.5); width: 8px; height: 8px; left: 0px; top: 0px; }
.call-now .inner:after { position: absolute; content: ''; background: rgba(34, 34, 34, 0.5); width: 8px; height: 8px; right: 0px; bottom: 0px; }
.call-now .inner span { position: relative; display: block; font-size: 16px; line-height: 20px; color: var(--white); font-weight: 400; }
.call-now .inner h3 { display: block; font-size: 30px; line-height: 36px; font-weight: 600; color: var(--white);}
.call-now .inner i { position: absolute; left: 18px; top: 50%; color: var(--white); font-size: 60px; transform: translateY(-50%); }
.call-now .inner img { position: absolute; left: 8px; top: 50%; color: var(--white); width: 60px; transform: translateY(-50%); }
.call-now .inner h3 a{color: var(--white);}
.call-now:hover h3{text-decoration: underline;}


.hero-text{width: 100%; display: flex; flex-direction: column; margin-top: 2.75em;}
.hero-text h4{color: #D9B953; font-family: var(--Barlow); font-size: 2em; font-style: normal; font-weight: 700; line-height: 111.498%; text-transform: capitalize; margin-bottom: 0.313em;}
.hero-text h4 span{display: block; color: var(--white);}
.hero-content-wrap p { color: var(--white); font-size: 1em; font-style: normal; font-weight: 400; line-height: 111.63%; }

.btn-box a.hero_btn{background: linear-gradient(79deg, #F1E576 15.06%, #C18D30 109.15%); color: #233343; font-family: var(--Barlow); font-size: 2em; font-style: normal; font-weight: 600; line-height: 111.498%; text-transform: capitalize; display: flex; align-items: center; gap: 0.25em; padding: 0.563em 1em; }
.btn-box a.hero_btn img{width: 1.15em; animation: tilt-shaking 1s infinite;}
@keyframes tilt-shaking {
    0% {
        transform: rotate(0);
    }
    5% {
        transform: rotate(10deg);
    }
    15% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(10deg);
    }
    35% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(10deg);
    }
    55% {
        transform: rotate(-10deg);
    }
    65% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    80% {
        transform: rotate(0);
    }
}

span.hero_book{color: var(--white); font-size: 1em; font-style: normal; font-weight: 400; line-height: 111.498%; padding-left: 1.875em; position: relative; margin-top: 1em;} 
span.hero_book:before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; background: linear-gradient(57deg, #E5C655 -4.2%, #C5994E 119.27%); width: 1.375em; height: 1.375em; border-radius: 100%;}

.hero-badge-wrap { display: inline-flex ; position: absolute; gap: .75em; right: 0; top: 27%; }
.hero-badge-wrap img{height: 7em;}

.hero-form-wrap{width: 41%; padding: 1.5em 1em; background-color: var(--white); border-radius: 1em; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(2.5px);}

.form-title{width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 20px;}
.hero-form-wrap h2{position: relative; display: flex; text-align: center; font-size: 1.5em;  color: #222; font-weight: 500; margin-bottom: 2px; ; flex-flow: column wrap; align-items: center; font-weight: 500; line-height: 111.498%; text-transform: capitalize; max-width: 86%;}
.hero-form-wrap h2 img{width: 2em; margin-bottom: .25em;}


.location-btn{position: relative; display: inline-block; font-size: 16px; color: var(--secondary); font-weight: 600; text-transform: uppercase; padding: 5px 17.5px; text-align: center; border: 1px dashed var(--primary); line-height: 1.5;}

.location-btn i { color: var(--primary); font-size: 18px; margin-right: 10px; }


.form-wrap{width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px;}
.input-row-wrap{width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em 0.625em;}
.input-col{width: 100%; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; position: relative;}
.input-col.full-width { grid-column: span 2; justify-content: center; display: flex; align-items: center; gap: 10px;}
.input-col label{font-size: 14px; color: var(--secondary);}
.input-col input, .input-col textarea, .input-col select{width: 100%; position: relative; display: block; width: 100%; height: 48px; border: 1px solid #dddddd; font-size: 16px; color: #777777; padding: 10px 20px; transition: all 500ms ease; outline: none; font-family: var(--Barlow); border-radius: 0; position: relative; z-index: 2}
.input-col textarea{min-height: 120px; resize: vertical;}
.input-col input:focus, .input-col textarea:focus{border-color: var(--primary);}
/* .input-col.full-width .btn{margin-top: 12px;} */
.input-col .input-call{font-size: 18px; color: var(--secondary); font-weight: 600; transition: .35s ease-in-out;}
.input-col .input-call:hover span{text-decoration: underline;}
.input-col .input-call:hover{color: var(--primary);}

.input-col .selectric-wrapper{width: 100%;}
.input-col .selectric{position: relative; display: block; width: 100%; height: 48px; border: 1px solid #dddddd; font-size: 16px; color: #777777; padding: 10px 20px; transition: all 500ms ease; outline: none; display: flex; align-items: center; background-color: var(--white);}
.input-col .selectric .label{padding: 0; height: auto; line-height: normal;}
.input-col .selectric .button { width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../img/icons8-down-arrow-50.png); top: 50%; transform: translateY(-50%); right: 20px; }
.input-col .selectric-items { background-color: var(--white); border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; overflow: hidden; padding: 0; position: absolute; top: 100%;}
.input-col .selectric-items li { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding: 0; padding-left: 18px; padding-right: 29px; text-align: left; font-size: 16px; line-height: 1.25; display: flex ; align-items: center; padding: 10px 12px; }
.input-col .selectric-items li:hover { background-color: #f6f6f6; }
.input-col .selectric-items li.selected{ background-color: #f6f6f6; font-weight: 600;}
.input-col .selectric-items li:first-child{display: none;}
.input-col .btn{min-width: 200px;}
.input-col.mobi{display: none;}

.input-col-checkbox{width: 100%; display: flex;} 
.input-col-checkbox input{width: 16px !important; height: 16px !important; appearance: none; padding: 0 !important; background-color: var(--white); position: relative; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; border-color: var(--secondary) !important;} 
.input-col-checkbox input:checked{background-image: url(../img/icons8-tick-50.png); border-color: var(--primary) !important; background-color: var(--white) !important;}
.input-col-checkbox label{width: calc(100% - 16px); padding-left: 8px; font-size: 13px !important; font-weight: 500; line-height: 1.5; margin-top: -1px;}
.input-col p{width: 100%; font-size: 13px !important; color: var(--secondary);}
.input-col p a{text-decoration: underline; color: var(--secondary);}

.input-error {
    border: 1px solid var(--primary) !important;
}
.error-msg { position: absolute; font-size: 0.65rem !important; color: #ffffff !important; background: var(--primary); line-height: 1.6; top: calc(100% - 4px); z-index: 1; width: 100%; padding-inline: 4px; font-family: var(--Barlow); }
.input-valid {
    border: 2px solid green !important;
}
.modal-coupon .offers-card h2 span{margin-left: 3px;}



/* Custom Date and Time Picker Styles */
.custom-date, .custom-time { width: 100%; height: 60px; border: 1px solid #dddddd; font-size: 16px; color: #777777; padding: 10px 20px; outline: none; font-family: var(--Barlow); transition: all 500ms ease; background-color: var(--white); border-radius: 5px; }
.custom-date:focus, .custom-time:focus { border-color: var(--primary); }
.flatpickr-calendar { background-color: var(--white); border-radius: 10px; border: 1px solid #ddd; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background-color: var(--primary) !important; color: #ffffff !important; }
.flatpickr-time input { width: 70px; font-size: 16px; padding: 5px 10px; }
.flatpickr-calendar.open{z-index: 999999;}



.section-bg{width: 100%; height: 100%; position: absolute; display: flex; overflow: hidden; top: 0}
.section-bg figure{width: 100%; height: 100%; position: relative; overflow: hidden;}
.section-bg figure:after{ position: absolute; content: ''; width: 100%; height: 100%; background: var(--black); top: 0px; right: 0px; z-index: 1; opacity: .5;}
.section-bg img{width: 100%; height: 100%; object-fit: cover;}
/* The hero is the only .section-bg whose image is wrapped in a <picture> (plate 4 added it
   so phones and desktop could be served different files). .section-bg is display:flex, so
   that wrapper — not the <img> — became the flex item, and the rule above then resolved
   100%/100% against the WRAPPER, whose own width is shrink-to-fit. The image fell back to
   its intrinsic ratio: 1920x1072 at 678px tall = 1214px wide inside a 1908px hero, leaving
   a third of the hero as bare page background, and object-fit:cover never got to act. Give
   the wrapper the same full-size box the bare <img> had, and every .section-bg img rule
   below — including the per-breakpoint object-position tuning — resolves correctly again.
   Any future <picture> in a .section-bg needs this too, which is why it is not hero-scoped. */
.section-bg picture{display: block; width: 100%; height: 100%;}

.section-bg:before { position: absolute; content: ''; width: 100%; height: 100%; background: var(--black); top: 0px; right: 0px; z-index: 1; opacity: 0; }
.hero-wrap .section-bg:before{opacity: 0.3;}
.hero-wrap .section-bg img { object-position: 70% 40%; }
.hero-wrapper-inner{width: 100%; position: relative; height: 100%; padding-block: 60px; display: flex ; flex-direction: column; justify-content: center; align-items: center;}
/* .hero-wrap .section-bg img{transition: all 2000ms linear;  transform: scale(1.15);}
.hero-wrap.active-slide .section-bg img{transform: scale(1);} */

.swiper-pagination { width: auto !important; height: 100%; display: flex ; flex-direction: column; left: 50px !important; top: 0; bottom: auto; justify-content: center; gap: 16px; z-index: 3;}
.swiper-pagination-bullet{width: 16px; height: 16px; border-radius: 100%; background-color: var(--white); opacity: 1; transition: .35s ease-in-out;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: var(--primary);}


.hero-doctor { position: absolute; bottom: 0px; right: 0; z-index: 1; width: 100%; max-width: 20.313em;}
.hero-doctor img{width: 100%; object-fit: cover;}

/* Review marks — O27, rebuilt 2026-09-11. A plain white band under the hero.
   🛑 NO frame, border, card, shadow or background on the marks. That was asked for
   explicitly. The band is white and the marks sit straight on it.
   The marks are pre-aligned in the PNGs by tools/build-review-badges.py — the star
   rows share a width and a baseline, the wordmarks share a cap height and a baseline —
   so this only has to space them. 🔴 Do NOT add object-fit or a fixed height here: that
   rescales each PNG's padding independently and undoes the alignment the script exists
   to create. Width alone, aspect ratio intact.
   justify-content:center with an even gap keeps the group centred AS A BLOCK at every
   width, which space-between does not — space-between pins the outer two to the edges
   and the group stops reading as a unit. */
/* 🔴 The flex-basis is a PERCENTAGE, not a pixel width, and that is load-bearing.
   A flex line is broken up using each item's BASIS, and only then are the items on a
   line shrunk — so with flex-wrap on, a pixel basis makes the row WRAP rather than
   shrink the moment four no longer fit. Measured: at a 230px basis it silently went
   2x2 at 1024 and at 769, on a desktop layout that is supposed to be one row.
   `calc(25% - 36px)` is four items plus three 48px gaps = exactly 100%, so four always
   fit on one line and simply get smaller as the viewport narrows.
   max-width on the LI (not the img) caps them on wide screens while leaving the item
   free to shrink, and justify-content:center then centres the group as a block.
   🛑 NO frame, border, card, shadow or background on the marks. Asked for explicitly. */
.review-marks{background: #fff;}
/* 🔑 This band gets a WIDER container than the rest of the page (1180). The marks are
   capped at 300px and four of them plus three 48px gaps need 1344px; inside the standard
   wrapper only 1140px is available, so the percentage basis would clamp every mark back
   to ~249 and the cap would never be reached. Raising the cap without raising this does
   nothing at all — that is the trap. */
.review-marks .wrapper{max-width: 1440px;}
.review-marks-row{display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 24px 48px; margin: 0; padding: 0; list-style: none;}
.review-marks-row li{display: flex; flex: 0 1 calc(25% - 36px); min-width: 0;
  max-width: 300px; margin: 0; padding: 0;}
.review-marks-row img{display: block; width: 100%; height: auto;
  border: 0; background: none; box-shadow: none;}
/* 🔴 Tablets go 2x2, and the cut-off is ARITHMETIC, not a round number.
   Four-up gives each mark 25% of (viewport - 40) - 36. That drops below 230px — the
   size these were before they were asked to be 30% bigger — at 1104px:
       0.25W - 46 >= 230  ->  W >= 1104
   Below that, four across gets steadily worse; measured at 769px it was 146px a mark,
   which is close to the ~85px that made four-across unreadable on a phone. Two-up hits
   the 300px cap all the way down to 769, so a tablet gets FULL-SIZE marks instead of
   four cramped ones. 🛑 Do not "simplify" this to the site's 768 breakpoint — that is
   what left the 769-1103 band with 146px marks. */
@media only screen and (min-width: 769px) and (max-width: 1103px) {
  .review-marks-row li{flex: 0 1 calc(50% - 24px);}
}

.hero-form-wrap .form-title{gap: 1em; margin-bottom: 1em;}
.hero-form-wrap .form-title p{color: #080808; text-align: center; font-family: var(--Barlow); font-size: 0.813em; font-weight: 400; line-height: 111.498%; text-transform: capitalize;}

.hero-form-wrap .form-wrap{gap: 0.625em;}
.hero-form-wrap .input-row-wrap { gap: 0.7em 0.625em; }
.hero-form-wrap .input-col input, .hero-form-wrap .input-col select{height: 2.25em; padding: .5em 1em; font-size: 1em !important;} 

.hero-form-wrap .input-col .btn{background: linear-gradient(79deg, #F1E576 15.06%, #C18D30 109.15%); color: #233343; font-size: 1.25em; padding: 0.9em 1.6em; line-height: 111.498%; margin-top: .25em;}
.hero-form-wrap .input-col .btn:after, .hero-form-wrap .input-col .btn:before{display: none;}
.input-col-checkbox-text { padding-left: 2.5em; width: 100%; }


.input-col-checkbox-text p{color: #080808; font-size: 0.625em !important; font-style: normal; font-weight: 400; line-height: 111.498%;}
.hero-form-wrap .input-col-checkbox input{width: 1.25em !important; height: 1.25em !important; border-radius: 0.25em !important; background-color: #1D3557;} 
.hero-form-wrap .input-col-checkbox label{width: calc(100% - 1.538em); padding-left: 1.538em; color: #080808; font-size: 0.813em !important; font-weight: 400; line-height: 111.498%; max-width: 95%;}
  

.hero-content-wrap h1 { max-width: 90%;}

.hero-absolute-badge { position: absolute; display: flex ; width: 10.25em; bottom: -4%; right: 0; }
.hero-absolute-badge img{width: 100%;}

.hero-wrap .section-bg:before { opacity: .5; background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(50, 50, 50, 1) 100%); }
.hero-wrap .section-bg img { object-position: 0% 25%; }
/* End Hero Style */

/* Start About Section Style */
.about-section{padding-block: 100px;}
.about-section-inner{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between;}

.about-thumb-wrap{width: 42.54385964912281%; display: flex; position: relative; padding-bottom: 48px;}
.about-thumb{width: 100%; display: flex; position: relative; overflow: hidden;}
.about-thumb img{width: 100%; object-fit: cover;}
.about-thumb::before{position: absolute; top: 0; left: -75%; display: block; content: ''; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); -webkit-animation: shine 1s; animation: shine 1s;}
@keyframes shine {
    100% {
        left: 125%;
    }
}
.about-small-thumb{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; background: var(--white); padding: 10px; max-width: 242px; width: 80%;}
.about-small-thumb img{width: 100%;}
.image-content { position: absolute; display: flex ; align-items: center; left: -80px; top: 100px; background: var(--white); width: 320px; padding: 17px 20px 23px 30px; box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.1); border-left: 4px solid var(--primary); }
.image-content h2 { font-size: 60px; line-height: 60px; font-weight: 700; margin-right: 15px; color: #6de5f2; }
.image-content h3 { font-size: 22px; line-height: 27px; font-weight: 300; }


.about-content-wrap{width: 48.68421052631579%;}

.sec-title { position: relative; display: block; margin-bottom: 25px; }
.sec-title span { position: relative; display: inline-block; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--secondary); padding-left: 35px; margin-bottom: 6px; text-transform: uppercase; }
.sec-title span:before { position: absolute; content: ''; background: url(../svgs/logo.svg?v=2026-10-29a); width: 30px; height: 30px; left: 0px; top: -6px; background-repeat: no-repeat; background-size: 100% 100%; }
.sec-title.light span::before{background-image: url(../svgs/white-logo.svg); transform: scale(1.25);}
.sec-title h2 { position: relative; display: block; font-size: 48px; line-height: 58px; font-weight: 700; margin: 0px; color: var(--secondary);}
.sec-title p{font-size: 20px; max-width: 505px; margin: 16px auto 0;}
.about-content{width: 100%; position: relative;}
.about-content i{font-size: 24px; color: var(--secondary); position: absolute; top: 0; left: 0;}
.about-content h3 { font-size: 24px; line-height: 32px; color: var(--secondary); font-weight: 500; margin-bottom: 25px; padding-left: 46px; }

.about-content-author-wrap{position: relative; display: flex; padding-bottom: 50px; border-bottom: 1px solid #dddddd; margin-top: 46px;}

.about-content-author-sign{width: 46%; padding-right: 35px; border-right: 1px solid #dddddd;}
.about-content-author-sign img{width: 100%;}

.about-content-author{width: 54%; padding-left: 40px;}
.about-content-author h3{display: block; font-size: 24px; line-height: 30px; font-weight: 300; text-transform: uppercase; color: var(--primary);}
.about-content-author span{position: relative; display: block; font-size: 14px; line-height: 24px; font-weight: 600; text-transform: uppercase;}
/* End About Section Style */

/* Start Loation Section Style */
.location-map{width: 100%;}
.location-map iframe{ width: 100%; height: 780px; border: none;}
.location-section-inner{width: 100%; position: relative; z-index: 1; overflow: hidden; background: #f1f7fb; /*margin-top: -388px;*/ display: flex; justify-content: space-between;} 

.location-content-box { width: 59%; position: relative; padding: 60px 40px 40px 47px; }

.location-content-box .icon-layer { position: absolute; right: -60px; bottom: 15px; z-index: -1;}
.location-list{width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; text-transform: capitalize;}

.locations-wrap{width: 100%; display: flex; flex-direction: column; margin-bottom: 32px;}
.locations-wrap h4{ font-size: 24px; line-height: 1.2; color: #222; font-weight: 600; margin-top: 32px;}
.location-list li { position: relative; display: inline-block; font-size: 18px; line-height: 1.5; color: #222; padding-left: 27px;}
.location-list li:before { position: absolute; content: "\f058"; /* Unicode for check-circle */ font-family: 'Font Awesome 5 Free'; font-weight: 900; /* Solid icons require 900 weight in free version */ font-size: 16px; left: 0; top: 0; color: var(--primary); }

.location-thumb-wrap{width: 40.08771929824561%; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 320px 50px 35px 50px; background-image: url(../img/contact-1.webp); display: flex; align-items: flex-end;}
.location-thumb-wrap:before { position: absolute; content: ''; background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.0) 100%); width: 100%; height: 100%; left: 0px; right: 0px; bottom: 0px; }
.location-text{width: 100%;}

.location-text p { position: relative; display: block; text-align: center; font-size: 18px; color: var(--white); font-weight: 500; margin-bottom: 21px; }
.support-box { position: relative; display: block; padding: 16px 30px 16px 80px; border: 1px dashed #6de5f2; }
.support-box:before{position: absolute; content: ''; width: 8px; height: 8px; left: -1px; top: -1px; background-color: #6de5f2;}
.support-box:after{position: absolute; content: ''; width: 8px; height: 8px; right: -1px; bottom: -1px; background-color: #6de5f2;}
.support-box .icon-box { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 60px; color: var(--white); }
.support-box span { position: relative; display: block; font-size: 16px; line-height: 18px; color: #fff; }
.support-box h3 { display: block; font-size: 30px; line-height: 38px; font-weight: 600; }
.support-box h3 { color: var(--primary); }
.support-box:hover h3{text-decoration: underline;}
/* End Loation Section Style */

/* Start service Style */

.service-section-inner{width: 100%; display: flex; flex-flow: row wrap; gap: 50px;}

/* Centred, 2026-09-13. 🔑 `text-align` ALONE DOES NOTHING HERE, and that is the
   whole reason these rules are three lines instead of one. `.sec-title` is a FLEX
   ITEM of .service-section-inner (row wrap) with no width, so it shrinks to its
   own max-content -- about 754px, the h2's cap -- and sits at flex-start. Centring
   the text inside a box that is still hard left moves nothing a visitor can see.
   `width: 100%` is what actually centres it; `.secondary-service-title .sec-title`
   has carried that same width for the same reason since before this change.
   ⚠️ And the two capped children each need `auto` side margins of their own: the
   h2 is capped at 754px and the p at 600px, and `margin: 16px 0 0` below pinned
   the p's 600px box to the left edge. Same missing `auto` as the reviews badge on
   2026-09-13 -- a centred block whose one constrained child is not centred reads
   as a misalignment, not a design. */
.service-section .sec-title{ margin-bottom: 0; width: 100%; text-align: center;}
.service-section .sec-title h2{max-width: 754px; margin-left: auto; margin-right: auto;}
.service-section .sec-title p { max-width: 600px; margin: 16px auto 0;}

.service-section-title{width: 100%; text-align: center; margin-bottom: -24px;}
.service-section-title h2{position: relative; font-size: 20px; line-height: 1.25; font-weight: 700;color: var(--secondary); text-align: center;}

.service-card-wrap{width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 24px;}


.service-card{width: 100%; transition: all 500ms ease; border-bottom: 2px solid var(--primary); background: #f1f7fb; position: relative;}
.service-card:hover{background-color: var(--white); box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.08);}
.service-card-thumb{width: 100%; display: flex; overflow: hidden; background-color: var(--primary);}
.service-card-thumb figure{width: 100%; display: flex;}
.service-card-thumb figure img{width: 100%; transition: all .5s ease; aspect-ratio: 1/.7; object-fit: cover;}

.service-card-content-wrap{width: 100%; background: #f1f7fb; transition: all 500ms ease; position: relative; z-index: 3;}
.service-card-icon{position: absolute; left: 30px; top: -61px; width: 116px; height: 116px; line-height: 116px; padding: 8px; border-radius: 50%; text-align: center; z-index: 2; transition: all 500ms ease;}

.service-card-icon .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; line-height: 100px; text-align: center; background: #fff; font-size: 32px; color: #2c3345; border-radius: 50%; z-index: 1; transition: all 500ms ease; border: 1px dashed rgba(0, 0, 0, .2);}
.service-card-icon .icon svg{width: 36px; height: 36px;}
.service-card-icon .icon svg path{transition: .35s ease-in-out;}
.service-card:hover .service-card-icon .icon svg path{fill: var(--white);}
.service-card-content{width: 100%; padding: 80px 40px 35px 40px;}
.service-card-content h3{display: block; font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 15px;}
.service-card-content h3 a{color: var(--black_two); transition: .35s ease-in-out;}
.service-card-content h3 a:hover{color: var(--primary);}
.service-card-content p{}
.service-card-icon .icon:before { position: absolute; content: ''; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; border-radius: 50%; transform: scale(0, 0); z-index: -1; transition: all 500ms ease; background-color: var(--primary); }
.service-card-link{background-color: var(--white); border-top: 1px solid #dee4e7; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.08); border-bottom: 2px solid var(--primary); position: absolute; display: block; left: 0px; right: 0px; opacity: 0; bottom: 0px; width: 100%; padding: 17px 40px 19px 40px; transition: all 500ms ease; z-index: 1; }
.service-card:hover .service-card-link{opacity: 1; bottom: -66px; }
.service-card-link a { position: relative; display: inline-block; font-size: 18px; line-height: 28px; color: var(--secondary); font-weight: 600; padding-left: 18px; transition: .35s ease-in-out;}
.service-card-link a:hover { color: var(--primary);}
.service-card-link a:before { position: absolute; content: ''; width: 8px; height: 8px; left: 0px; top: 11px; background: #6de5f2; }

.service-card:hover .service-card-content-wrap{background: var(--white);}

.service-card:hover .service-card-icon { background: #f1f7fb; }
.service-card:hover .service-card-icon .icon { border-color: var(--primary); background-color: var(--primary); color: var(--white); }
.service-card:hover .service-card-icon .icon:before{transform: scale(1, 1);}
.service-card:hover .service-card-thumb figure img { transform: scale(1.05); opacity: 0.2; }

.service-card-wrap .service-card{margin-bottom: 30px;}

.service-card-wrap .service-card-thumb figure img{aspect-ratio: 1/.5; object-fit: cover;}
.service-card-wrap .service-card-content { padding: 38px 20px 24px 20px;}
.service-card-wrap .service-card-icon {left: 20px; top: -38px; width: 72px; height: 72px; line-height: 72px; display: flex; align-items: center; justify-content: center; padding: 5px;}
.service-card-wrap .service-card-icon .icon { width: 62px; height: 62px; line-height: 62px; font-size: 20px;}
.service-card-wrap .service-card-link { padding: 13px 20px;}
.service-card-wrap .service-card:hover .service-card-link { bottom: -56px; }
.service-card-wrap .service-card-link a{font-size: 16px;}
.service-card-wrap .service-card-content h3{font-size: 18px; line-height: 1.25; margin-bottom: 10px;}
.service-card-btn{width: 100%; display: flex; justify-content: center;}

.service-card-wrap .service-card-icon .icon svg{width: 28px; height: 28px;}
.service-marquee-wrap{width: 100%; display: none; flex-direction: column; gap: 32px;}
/* End service Style */

/* Start chooseus-section Style */
.chooseus-section .icon-layer{position: absolute; top: 10px; right: 25px;}
.chooseus-section .icon-layer img{width: 100%;}

.chooseus-section-inner{width: 100%; display: flex; flex-flow: row wrap; position: relative; z-index: 1;}

/* Centred, 2026-09-13, to match the services section above it. `width: 100%` for
   the same flex-item reason -- this .sec-title has no capped children, so the two
   auto margins the services block needs are not needed here. */
.chooseus-section .sec-title{width: 100%; text-align: center;}

.chooseus-wrap{width: 100%; margin-top: 40px; display: flex; flex-flow: row wrap; justify-content: space-between;}
.chooseus-thumb-wrap{width: 26.31578947368421%; display: flex; position: relative; padding: 225px 35px 45px 35px; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(../img/chooseus-1.webp); justify-content: center; align-items: flex-end;}
.chooseus-thumb-text { width: 85%; position: relative; display: block; background: rgba(255, 255, 255, 0.85); padding: 28px 20px 24px 20px; text-align: center; box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 0.35); }
.chooseus-thumb-text h2 { position: relative; display: inline-block; font-size: 42px; font-weight: 700; width: 110px; height: 110px; line-height: 110px; text-align: center; border-radius: 50%; border: 2px dashed var(--secondary); margin-bottom: 10px; color: var(--primary); }
.chooseus-thumb-text  h5 {font-size: 16px; line-height: 1.25; font-weight: 600; text-transform: uppercase; }

.chooseus-card-wrap{width: 68.42105263157895%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px 30px;}
.chooseus-card{width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.chooseus-card-icon{position: relative; display: flex; justify-content: center;align-items: center; width: 150px; height: 155px;  text-align: center; background: var(--white); box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.05); margin-bottom: 29px !important; z-index: 1;}
.chooseus-card-icon img{width: 50px;}
.chooseus-card-icon:after{position: absolute; content: ''; background: var(--secondary); width: 100%; height: 0%; left: 0px; top: 0px; right: 0px; z-index: -1; transition: all 500ms ease;}
.chooseus-card:hover .chooseus-card-icon:after { height: 100%; }
.icon-shape { position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; }
.icon-shape:before { position: absolute; content: ''; width: 8px; height: 8px; left: 0px; top: 0px; background-color: #6de5f2;}
.icon-shape:after { position: absolute; content: ''; width: 8px; height: 8px; right: 0px; bottom: 0px; background-color: #6de5f2;}
.chooseus-card h3{display: block; font-size: 24px; line-height: 1.25; font-weight: 600; margin-bottom: 10px; font-size: 20px;}
.chooseus-card h3 a{color: #007bff; transition: all 500ms ease;}
.chooseus-card h3 a:hover{color: #0056b3;}
.chooseus-card p{display: none;}
/* End chooseus-section Style */

/* Start secondary-service-section */
.secondary-service-section{ background-color: var(--secondary);}
.secondary-service-section .pattern-layer { position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/GDD-BG-pattern.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; }
@keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: 1920px 0;
}
}
.secondary-service-inner{width: 100%; display: flex; flex-flow: row wrap; position: relative; z-index: 1;}
.secondary-service-title{width: 100%; display: grid; grid-template-columns: 1fr 1fr; flex-flow: row wrap; align-items: center; gap: 50px;}
.secondary-service-title .sec-title{text-align: right; width: 100%; margin-bottom: 0;}
.sec-title.light span{color: var(--white);}
.sec-title.light h2{color: var(--white);}

.secondary-service-title-text{width: 100%;}
.secondary-service-title-text p{font-size: 20px; line-height: 30px; color: var(--white); max-width: 505px;}

.secondary-service-slider-wrap{width: 100%;  margin-top: 55px; position: relative;}
.slider-arrow{position: absolute; display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; background: transparent; transition: all 500ms ease; top: 42%; transform: translateY(-50%);}
.slider-arrow:hover{border-color: var(--primary); background: var(--primary); }
.slider-arrow:before, .slider-arrow:after{position: absolute; content: ''; background: rgba(255, 255, 255, 0.5); width: 8px; height: 8px; opacity: 0; transition: all 500ms ease;}
.slider-arrow:before{top: -1px; left: -1px;}
.slider-arrow:after{bottom: -1px; right: -1px;}
.slider-arrow:hover:before, .slider-arrow:hover:after{opacity: 1;}

.service-slider{width: 100%; overflow: hidden; padding-bottom: 68px; }
.service-slider .js-marquee-wrapper{ display: flex; gap: 30px;}
.service-slider .js-marquee{display: flex; gap: 30px;}

.service-slider .service-card{width: 360px;}

.service-slider .service-card-content-wrap{background-color: #183445 !important; color: var(--white);}
.service-slider .service-card-link{background-color: #183445; border-top: 1px solid rgba(255,255,255,0.1);}
.service-slider .service-card-content h3 a { color: var(--white);}
/* Every card title reserves two lines, so the icon, title and link below it sit
   at the same height on every slide. "Emergency Door Replacement" is the only
   title long enough to wrap and it cannot be shortened, so instead of letting it
   be the odd one out, the short titles take the second line too. Without this the
   six-line-1 cards sit 32px taller in their content block than the one that wraps,
   and the row reads as uneven.
   2lh IS "two lines" and tracks the line-height above if it ever changes; the 64px
   before it is the same number worked out by hand (line-height 32px x 2) and is what
   browsers without the lh unit fall back to. Both are needed - do not drop either. */
.service-slider .service-card-content h3{min-height: 64px; min-height: 2lh;}
.service-slider .service-card-content h3 a:hover { color: var(--primary);}
.service-slider .service-card-content p{color: var(--white);}
.service-slider .service-card-link a{color: var(--white);}
.service-slider .service-card-link a:hover{color: var(--primary);}
.service-slider .service-card:hover .service-card-icon { background: #183445; }

.slider-arrow.arrow-left{left: -100px;}
.slider-arrow.arrow-right{right: -100px;}

.secondary-service-cta{width: 100%; text-align: center;}
.secondary-service-cta p{display: block; font-size: 30px; line-height: 38px; color: var(--white); margin-bottom: 6px;}
.secondary-service-cta h3 { display: block; font-size: 30px; line-height: 38px; color: var(--white); font-weight: 600; }
.secondary-service-cta h3 a { color: #6de5f2; border-bottom: 1px dashed #6de5f2; transition: .35s ease-in-out; }
.secondary-service-cta h3 a span{ color: var(--primary);transition: .35s ease-in-out; }
.secondary-service-cta h3 a span:hover{ color: var(--white);}
.secondary-service-cta h3 a:hover { color: var(--white); border-bottom: 1px dashed var(--white); }
.secondary-service-cta h3 i{margin-inline: 10px;}


.slider-wrapper{width: 100%; height: 100%; aspect-ratio: 1/.7; position: relative;}
.slider-wrapper img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }

.after-img { animation: reveal 6s infinite ease-in-out alternate; clip-path: inset(0 100% 0 0); z-index: 2; }

.before-img { z-index: 1; }

.divider { position: absolute; top: 0; bottom: 0; width: 3px; background: #ffffff; z-index: 3; animation: moveDivider 6s infinite ease-in-out alternate; }

.slider-wrapper:hover .after-img,
.slider-wrapper:hover .divider { animation-play-state: paused; }


@keyframes reveal {
0% {
clip-path: inset(0 100% 0 0);
}

50% {
clip-path: inset(0 0% 0 0);
}

100% {
clip-path: inset(0 100% 0 0);
}
}

@keyframes moveDivider {
0% {
left: 0%;
}

50% {
left: 100%;
}

100% {
left: 0%;
}
}
/* End secondary-service-section */

/* Start funfact-section */
.funfact-section{ overflow: hidden;}
.funfact-section .wrapper{max-width: 1490px;}
.funfact-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}

.funfact-section-inner{width: 100%; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.funfact-col{width: 100%; display: flex; justify-content: center;}
.funfact-col-inner { text-align: center; }
.funfact-col-icon{ position: relative; font-size: 90px; line-height: 60px; margin-bottom: 23px; color: var(--primary); }
.funfact-col-icon img{height: 72px;}
.funfact-col span.count-text{position: relative; display: block; font-size: 70px; line-height: 70px; color: var(--secondary); font-weight: 600; margin-bottom: 12px; transition: .35s ease-in-out; display: flex; align-items: center; justify-content: center;}
.funfact-col.count-active span{color: var(--primary);}
.funfact-col p{font-size: 16px; font-weight: 500; color: #222; border-bottom: 1px dashed #51d0de;}


.counter {
display: flex;
overflow: hidden;
height: 1em;
line-height: 1em;
user-select: none;
}

.digit-container {
overflow: hidden;
height: 1em;
position: relative;
width: 0.55em;
}

.digit-strip {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
}

.digit-strip div {
height: 1em;
text-align: center;
}

/* Styling for comma separators */
.counter>div:not(.digit-container) {
width: 0.25em;
line-height: 1em;
height: 1em;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}



.funfact-section-title{width: 100%; text-align: center; position: relative; z-index: 1; margin-bottom: 56px;}
.funfact-section-title h2{position: relative; font-size: 36px; line-height: 1.25; font-weight: 700; color: var(--secondary); transition: .35s ease-in-out;}
.count-finished .funfact-section-title h2{color: var(--primary);}

.funfact-col{transform: translateY(230%); transition: all 1.5s ease; opacity: 0;}
.funfact-col:nth-child(1){transition-delay: 0s;}
.funfact-col:nth-child(2){transition-delay: .2s;}
.funfact-col:nth-child(3){transition-delay: .4s;}
.funfact-col:nth-child(4){transition-delay: .6s;}
.funfact-section-inner.in-view .funfact-col{transform: translateY(0%); opacity: 1;}

/* End funfact-section */

/* Start testimonial-section */
.testimonial-section .wrapper{max-width: 1490px;}
.testimonial-section-inner{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; gap: 40px;}
/* The intro is its own full-width row, centred, ABOVE the videos -- it used to be a
   31% column beside them, which left the slider on ~62% of the wrapper. Stacking it
   gives the videos the whole 1490px row. The max-width on .testimonial-content is
   load-bearing: without it the paragraph runs the full wrapper and sets a ~180ch
   line, which is the one thing centring a block of text makes worse, not better. */
.testimonial-content-wrap{width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.testimonial-content{width: 100%; max-width: 820px;}
.testimonial-content p{margin-bottom: 30px;}
.btn-dashed{position: relative; display: inline-block; font-size: 16px; color: var(--secondary); font-weight: 600; text-transform: uppercase; padding: 5px 17.5px; text-align: center; border: 1px dashed var(--primary); line-height: 1.75; transition: .35s ease-in-out;}
.btn-dashed:hover{color: var(--primary);}
.testimonial-content .widget-container{display: none;}
.testimonial-slider{width: 100%; overflow: hidden;}
.testimonial-card{width: 100%;}
.testimonial-card-text{width: 100%; position: relative; display: block; padding: 55px 45px 61px 41px; border-radius: 0px 90px 0px 90px; margin-bottom: 40px; position: relative;} 
.testimonial-card-text{padding: 0 !important; border-radius: 0;}
/* Was ".custom-video-dimensions", which matched NOTHING. video.js derives this class
   from the element id, so the seven players get custom-video-1-dimensions ...
   custom-video-7-dimensions -- never the bare name. The rule therefore never
   applied, and Orel reported all three of its symptoms at once on 2026-09-10:
   "On mobile version display is very small and no frame or any video logo to
   understand its a video and the water mark ... had shifted to the left."
   Measured with video.js forced to init at 400px: the player collapsed to
   100x177, drew no border, and left .testimonial-logo 285px outside its right
   edge. Targeting .video-js fixes all three, and it also styles the box before
   video.js loads -- which is why the markup ships class="video-js" from the
   server (see the lazy-load note in main-script.min.js). */
.testimonial-card-text .video-js{width: 100%; border-radius: 0px 90px 0px 90px;  border: 4px solid var(--secondary); overflow: hidden; aspect-ratio: 1/.65; height: 320px;} 
.testimonial-slider .vjs-poster img{object-fit: cover; width: 100%; height: 100%;  object-position: 0% 25%;}
.testimonial-card-text img.testimonial-logo{position: absolute; top: 25px; right: 25px; width: 50px;}
.testimonial-card-text video{width: 100%; height: 100%; object-fit: cover; object-position: 0% 25%;}
.testimonial-card-text::before, .testimonial-card-text:after{position: absolute; content: ''; display: inline-block; width: 51px; height: 45px; line-height: 45px; text-align: center; background-color: var(--white); background-repeat: no-repeat; background-position: center center; background-size: 25px 20px; background-image: url(../img/icon-7.png); left: -10px; top: -15px; z-index: 1;}
.testimonial-card-text:after{background-image: url(../img/icon-8.png); top: auto; left: auto; right: -15px; bottom: -15px; z-index: 1;}
.testimonial-card-text p{font-size: 18px;}
/* Four slides across from 1200px up -- matches the Swiper breakpoint of the same
   number, so the card geometry and the slide count always change together.
   The base rule pins height:320px, which was right when two slides shared the row
   and each card was ~700px wide. At four across a card is ~354px, and 320px tall
   makes it very nearly square -- the video inside is object-fit:cover, so a square
   box crops hard into the sides of landscape footage. Releasing the height lets the
   aspect-ratio already on that rule (1/.65) do the work instead: ~354px -> ~230px.
   The 90px corner is scaled with it for the same reason -- it reads as a modest
   curve on a 700px card and swallows a 354px one. */
@media only screen and (min-width: 1200px) {
    .testimonial-card-text .video-js{height: auto; border-radius: 0px 45px 0px 45px;}
}

.testimonial-author-box{width: 100%; display: flex; padding-left: 45px; align-items: flex-start;}
.testimonial-author-box figure{display: flex; width: 53px;}
.testimonial-author-box figure img{width: 100%; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover;}
.testimonial-author{width: calc(100% - 53px); padding-left: 20px;}
.testimonial-author h4{font-size: 20px; line-height: 22px; font-weight: 600; margin-bottom: 0px;}
.testimonial-author span{position: relative; display: block; font-size: 15px; line-height: 24px; font-weight: 500; margin-bottom: 10px; color: #555555;}
.testimonial-author ul{display: flex; gap: 3px;}
.testimonial-author ul li{position: relative; display: flex; font-size: 10px; line-height: 12px; float: left;}
.rating li { color: #6de5f2; }
.rating li.null { color: #c1c1c1; }

.testimonial-slider{padding-bottom: 30px;}
.testimonial-arrow{width: 100%; position: relative; display: flex; justify-content: center; gap: 32px; margin-top: -32px; position: relative; z-index: 1;}
.testimonial-arrow .slider-arrow{position: relative; top: auto !important; left: auto !important; right: auto !important; transform: unset; color: var(--secondary); border: 1px solid rgba(0, 0, 0, 0.5);}
.testimonial-arrow .slider-arrow:hover{border-color: var(--primary); color: var(--white);}
/* End testimonial-section */

/* Start faq-section Style */
.faq-section{ background-color: #f1f7fb;}
.faq-section .wrapper{max-width: 930px;}
.faq-inner{width: 100%;}
.faq-section .sec-title{text-align: center;}

.faq-item-wrap{width: 100%; display: flex; flex-direction: column; margin-top: 32px;}
.faq-item{width: 100%; border-bottom: 1px solid #dee4e7; position: relative;}
.faq-item:last-child{border: none;}
.faq-question{width: 100%; cursor: pointer; padding: 16px 48px 16px 0; position: relative;}
.faq-question:after { position: absolute; top: 16px; right: 0; width: 32px; height: 24px; content: '+'; font-size: 24px; font-weight: 600; text-align: center; display: flex ; align-items: center; justify-content: center; transition: .35s ease-in-out; color: var(--secondary);}
.faq-question h4{display: block; font-size: 24px; font-weight: 600; transition: .35s ease-in-out; color: var(--secondary);}
.faq-answer{width: 100%; padding: 8px 0 24px; display: none;}
.faq-answer p{font-size: 18px;}
.faq-item:nth-child(1) .faq-answer{display: block;}

.faq-item.active .faq-question h4{color: var(--primary);}
.faq-item.active .faq-question:after{content: '-'; color: var(--primary);}
/* End faq-section Style */

/* Start cta-section Style */
.cta-section{ background-color: var(--secondary);}
/* .cta-section .wrapper{max-width: 1490px;} */
.cta-section .pattern-layer { position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/GDD-BG-pattern.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; }
.cta-inner{width: 100%; position: relative; z-index: 1; display: flex; flex-flow: row wrap; justify-content: space-between;} 
.cta-text{width: 48%;}
.cta-text h2{display: block; font-size: 32px; color: var(--white); font-weight: 600; margin-bottom: 16px;}
.cta-text p{color: var(--white); font-size: 18px;}
.cta-btn-wrap{width: 48%; display: flex; align-items: center; justify-content: flex-end; gap: 15px;}
a.call { position: relative; display: inline-block; padding: 11px 20px; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--primary); border: 1px dashed var(--primary); display: flex; gap: 10px; align-items: center; transition: .35s ease-in-out;}
a.call i{color: var(--white); font-size: 36px;}
a.call img{width: 32px;}
a.call:hover{color: var(--white); border-color: var(--white);}

.cta-section .btn:before{background-color: var(--white);}
.cta-section .btn:after{background-color: var(--white);}
.cta-section .btn:hover{color: var(--primary);}
.cta-section .btn:hover .btn-shape:before { background: var(--primary); opacity: 0.2; }
.cta-section .btn:hover .btn-shape:after { background: var(--primary); opacity: 0.2; }
/* End cta-section Style */

/* Start ontact Style */
.contact-section{ background-color: #f1f7fb;}
.contact-section .section-bg:before{opacity: .15;}
.contact-section-inner{width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1;}
.contact-section .sec-title{text-align: center;}
.contact-form { width: 100%; max-width: 720px; padding: 40px 20px; background-color: #ffffff90; backdrop-filter: blur(2px); margin-top: 20px; box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.05); }
.contact-section .section-bg img{object-position: top;}
/* End ontact Style */

/* Style offers-section Style */
.offers-section .section-bg:before{background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(../svgs/VectorSmartObject.svg); opacity: 10%; background-color: #f5f5f5;}
.offers-section .wrapper{ max-width: 1360px; }
.offers-section-inner{width: 100%; display: flex; flex-direction: column; gap: 80px; position: relative; z-index: 1;}
.offers-section .sec-title{text-align: center; margin-bottom: 0;}
.offers-card-wrap{width: 100%; display: flex; flex-flow: row wrap; gap: 20px; justify-content: center;}
.offers-section .sec-title p strong{color: var(--primary);}
.offers-marquee-wrap{display: none;}
/* 🔑 THE PANEL IS NOT DECORATION -- IT IS THE ONLY THING THAT MAKES THE REVIEWS.io
   LOGO VISIBLE. The widget is a cross-origin iframe, so its contents cannot be
   styled from here, and the logo it renders is reviewsio-logo--inverted.svg --
   WHITE, 11 of its 13 fills are #fff. On the white section it disappeared
   completely and all that survived were its two coloured arcs (#ffe51c, #00e5d6),
   which read as a loading spinner that never finishes. It was never a spinner.
   ✅ Measured: the iframe body is TRANSPARENT, so a dark panel behind it shows
   through and the wordmark reads. Keep this background dark. On anything light the
   logo silently vanishes again and the section looks broken for a reason nobody
   can see in the markup.
   The margin was `0 0 20px 0`: a 320px max-width box with no auto margin sat hard
   LEFT inside a centred column while the heading, paragraph and button above and
   below it were all centred. That is the "it's not centered" -- the badge was the
   only thing out of line. */
.reviewsio-badge{max-width: 320px; margin: 0 auto 24px; background: var(--secondary);
  border-radius: 14px; padding: 18px 18px 10px;}

/* Written reviews with technician replies -- BACKLOG O6. Orel asked for "the same review section we
   have on the big website. With the text for customer the tech reply." Ported from
   doctorzgaragedoor.com's .review-card stack, restyled onto THIS page's tokens (Barlow, --primary
   #C1554E, --secondary #233344) rather than copying the organic site's inline styles.
   🔑 grid-template-columns lives HERE and not inline on the element: an inline copy cannot carry
   the 768px breakpoint that stacks the three cards on a phone.
   ⚠️ This was repeat(auto-fit, minmax(290px, 1fr)) first. It RENDERS correctly -- auto-fit
   collapses the empty track -- but at a 1490px wrapper it computes to FOUR tracks, the last one
   0px wide, so "are there three columns?" cannot be asserted from the computed style. Explicit
   repeat(3, 1fr) says what is meant and is checkable. See tools/check-reviews-section.py. */
.reviews-section .wrapper{max-width: 1490px;}
.reviews-section .sec-title{text-align: center;}
.reviews-section .sec-title span{padding-left: 0;}
.reviews-section .sec-title span:before{position: static; display: inline-block; vertical-align: -8px; margin-right: 6px;}
.reviews-section-inner{width: 100%;}
.reviews-grid{width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px;}
.review-card{display: flex; flex-direction: column; justify-content: space-between; text-align: left; background: var(--white); border: 1px solid rgba(35, 51, 68, .10); border-radius: 0px 40px 0px 40px; padding: 34px 32px; box-shadow: 0 10px 30px -10px rgba(35, 51, 68, .15);}
.review-stars{color: #FFB400; font-size: 20px; line-height: 1; letter-spacing: 2px; margin-bottom: 14px;}
.review-text{font-size: 17px; line-height: 28px; color: var(--black_two); font-style: italic; margin-bottom: 26px;}
.review-author{display: flex; align-items: center; gap: 14px; margin-bottom: 24px;}
/* letter circles, not photographs -- these imitate a Google profile picture and the three colours
   are the organic site's. The TECHNICIAN below is a real photo. Do not swap one for the other. */
.review-avatar{width: 48px; height: 48px; border-radius: 50%; color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--Barlow); font-weight: 700; font-size: 20px; line-height: 1; flex-shrink: 0;}
.avatar-d{background: #e11d48;}
.avatar-c{background: #2563eb;}
.avatar-j{background: #059669;}
.review-author .author-info h4{font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--secondary); margin: 0;}
/* The rule sits above the REPLY, not below the author. The cards are equal
   height and the reply is pushed to the bottom, so a rule tied to the author
   floats in mid-air on whichever card has the shortest quote -- which is
   card 1. Anchored here it is always the line the reply hangs from. */
.tech-response-container{display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid rgba(35, 51, 68, .10); padding-top: 20px;}
.tech-response-container img{width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); flex-shrink: 0;}
.tech-response-name{font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); margin-bottom: 4px;}
.tech-response-text{font-size: 15px; line-height: 24px; color: var(--black_two); margin: 0;}

.offers-card { width: 100%; padding: 32px; background: var(--primary); color: var(--white); text-align: center; font-family: sans-serif;  position: relative;    max-width: 308px; min-height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 calc(33.33% - 40px);}

.offers-card:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url(../svgs/Frame.svg);}

.offers-card h4 { color: #FFE500; text-align: center; leading-trim: both; text-edge: cap; font-family: var(--Barlow); font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: 3.2px; text-transform: uppercase; }
.offers-card h2 { color: var(--white); text-align: center; leading-trim: both; text-edge: cap; font-family: var(--Barlow); font-size: 96px; font-style: italic; font-weight: 700; line-height: 83%; letter-spacing: -4.8px; text-transform: capitalize; margin-block: 16px;}

.offers-card h2 span { leading-trim: both; text-edge: cap; font-size: 16px; line-height: 83%; letter-spacing: -0.8px; text-transform: capitalize; }

.offers-card p { color: var(--white); text-align: center; leading-trim: both; text-edge: cap; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: -0.32px; text-transform: capitalize; }
.offers-btn{width: 100%; display: flex; flex-flow: row wrap; justify-content: center;}
.offers-btn a{padding: 18px 32px; color: var(--black_two); text-align: center; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; }

.offers-card-slider .offers-card{width: 100%; flex: none;}

.modal-coupon { width: 100%; display: flex ; justify-content: center; margin-bottom: 16px; flex-direction: column; align-items: center; gap: 6px; }
.modal-coupon .offers-card { max-width: 120px; min-height: 70px; padding: 12px; border: 2px dashed var(--white) !important; }
.modal-coupon .offers-card h4{font-size: 12px;}
.modal-coupon .offers-card p{font-size: 12px;}
.modal-coupon .offers-card h2 { font-size: 36px; margin-block: 0px; text-shadow: 2px 1px black; filter: drop-shadow(1px 1px 1px black); letter-spacing: -2px;}
.modal-coupon .offers-card:after{display: none;}
.modal-coupon h4{font-size: 14px; font-weight: 600; text-align: center;}
/* End offers-section Style */
.popup-btn{cursor: pointer;}

/* Start brands-section */
.brands-section-inner{width: 100%; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px;}
.brands-section .sec-title{text-align: center; margin-bottom: 0;}
.brands-logo-wrap{width: 100%; position: relative; z-index: 1; margin-top: 40px;}
.brands-logo{width: auto; display: flex;} 
.brands-logo img{min-height: 48px;}

.brands-logo-wrap .js-marquee-wrapper{display: flex; gap: 60px; align-items: center;}
.brands-logo-wrap .js-marquee{display: flex; gap: 60px; align-items: center;}

.brands-section .pattern-layer { position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/pattern-white.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; }
/* End brands-section */

/* Start team-banner */
.team-banner-inner{width: 100%; display: flex; flex-direction: column; gap: 60px;}

.team-banner .sec-title{text-align: center; margin-bottom: 0;}
.team-banner .sec-title p{max-width: 750px;}

.team-left-right{width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center;}
.team-thumb{width: 100%; display: flex;}
.team-thumb figure{width: 100%; display: flex;}
.team-thumb img{width: 100%; object-fit: cover; aspect-ratio: 1 / .8;}

.team-content{width: 100%;}
.team-content h4{font-size: 24px; color: var(--secondary);}
.team-content ul { display: flex ; flex-direction: column; gap: 22px; margin-top: 30px; }
.team-content ul li{font-size: 18px; position: relative; padding-left: 28px;}
.team-content ul li strong{color: var(--primary); font-weight: 600;}
.team-content ul li:before{position: absolute; top: 0; left: 0; content: ''; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../img/icons8-tick-50.png);}
.team-content-btn{width: 100%; margin-top: 32px; display: flex;}
.team-content-btn a i{margin-right: 12px;}
/* End team-banner */

.garage-roi-banner{background-color: #f1f7fb;}
.garage-roi-inner{width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;}
.garage-roi-thumb{width: 100%; display: flex;}
.garage-roi-thumb figure{width: 100%; display: flex;}
.garage-roi-thumb img{width: 100%; object-fit: cover;}

.garage-roi-content{width: 100%; padding: 40px 32px 40px 13px ; display: flex; align-items: center;}
.garage-roi-content-inner{width: 100%; max-width: 770px;}
.garage-roi-content h2{position: relative; font-size: 48px; font-weight: 700; color: var(--secondary);}

.garage-roi-content ul{width: 100%; display: flex; flex-direction: column; gap: 24px; margin-top: 36px; margin-bottom: 32px; color: var(--secondary);}
.garage-roi-content ul li{width: 100%; font-size: 20px;}
.garage-roi-content ul li span{display: block; margin-top: 0;}
.garage-roi-content p{font-size: 20px; margin-bottom: 10px; color: var(--secondary);}
.garage-roi-content a.btn{margin-top: 35px;}
@media only screen and (min-width: 1920px){.garage-roi-thumb img{max-height: 660px;}}
/* Start Footer Style */
.main-footer-section{padding-block: 36px; background-color: #0a1820;}
.footer-inner{width: 100%;}
.footer-wrap{width: 100%; display: flex; justify-content: space-between; gap: 16px;}

.footer-widget{display: flex; flex-direction: column; gap: 20px;}
.footer-address{display: flex; flex-direction: column; gap: 20px;}
.footer-widget h6{font-size: 20px; color: var(--white); font-weight: 600;}
.footer-widget address{color: #f1f7fb; text-align: left;}
.footer-widget dfn{color: #f1f7fb; text-align: left;}
.footer-logo{display: flex; width: 120px;}
.footer-logo img{width: 100%;}
.footer-widget ul{display: flex; flex-direction: column; gap: 6px;}
.footer-widget ul li{display: flex;}
.footer-widget ul li a{color: var(--white); border-bottom: 1px solid transparent; transition: .35s ease-in-out; padding-bottom: 3px;}
.footer-widget ul li a:hover{border-color: var(--primary);}
.social-link{justify-content: space-between;}
.social-link ul{display: flex; flex-flow: row; gap: 16px;}
.social-link ul li{display: flex;}
.social-link ul li a{display: flex; border: none;}
.social-link ul li a svg{width: 24px;}
.social-link ul li a svg path{transition: .35s ease-in-out;}
.social-link ul li a:hover svg path{fill: var(--white);}

.footer-bottom{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--primary);}
.footer-inner p{font-size: 16px; color: rgba(255, 255, 255, 0.8); font-weight: 500;}
.footer-inner p a{position: relative; display: inline-block; color: rgba(255, 255, 255, 0.8); line-height: 16px; padding-left: 17px; margin-left: 10px; transition: .35s ease-in-out;} 
.footer-inner p a span{border-bottom: 1px solid rgba(255, 255, 255, 0.8); }
.footer-inner p a:before { position: absolute; content: ''; background: #858c90; width: 8px; height: 8px; left: 0px; top: 5px; }
.footer-inner p a:hover{color: var(--primary);}
.footer-inner p:nth-child(1) a{padding-left: 0; margin-left: 0; text-decoration: underline;}
.footer-inner p:nth-child(1) a:before{display: none;}

.open-time{}
.open-time ul{display: flex; flex-direction: column;}
.open-time ul li{color: #f1f7fb;}
.align-item-between{justify-content: space-between;}
/* End Footer Style */

/* Start PopUp Style */
.modal-section { width: 100%; height: 100%; position: fixed; display: flex ; justify-content: center; align-items: center; padding: 50px 20px; overflow-y: scroll; z-index: 999999; opacity: 0; visibility: hidden; transition: .35s ease-in-out; top: 0; left: 0; box-sizing: border-box; height: 100svh; min-height: 100svh; flex-flow: row wrap; overflow-y: scroll; overflow-x: hidden;}
.modal-section::-webkit-scrollbar{display: none;}
.modal-section.modal_shown { opacity: 1; visibility: visible; }
.modal-section:after { position: fixed; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.modal-conteiner { max-width: 720px; width: 100%; position: relative; }
.modal-main { width: 100%; display: flex ; background-color: var(--white); position: relative; padding: 60px 20px 40px; z-index: 1; box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.07);}
.modal-close-icon { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background-color: var(--secondary); top: 15px; right: 15px; position: absolute; cursor: pointer; color: var(--white); display: flex ; justify-content: center; align-items: center; transition: .35s ease-in-out; z-index: 1; }
.modal-close-icon:hover{background-color: var(--primary);}
.modal-close-icon svg { width: 12px; height: 12px; }
.modal-form-wrap{width: 100%;}
.modal-form-wrap h2{font-size: 32px; font-weight: 600; text-align: center; margin-bottom: 10px;}
.modal-form-wrap p{text-align: center;}

.modal-form-wrap .form-wrap{margin-top: 32px;}
/* End PopUp Style */


/* Start Secondary Moadal */
.secondary-modal-section { width: 100%; height: 100%; position: fixed; display: flex ; justify-content: center; align-items: center; padding: 50px 20px; overflow-y: scroll; z-index: 999999; opacity: 0; visibility: hidden; transition: .35s ease-in-out; top: 0; left: 0; box-sizing: border-box; height: 100svh; min-height: 100svh; flex-flow: row wrap; overflow-y: scroll; overflow-x: hidden;}
.secondary-modal-section::-webkit-scrollbar{display: none;}
.secondary-modal-section.modal_shown { opacity: 1; visibility: visible; }
.secondary-modal-section:after { position: fixed; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.secondary-modal-conteiner { max-width: 560px; width: 100%; position: relative; /*-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webki-ttransition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; z-index: 2; animation-duration: 1.2s;*/}
/* .secondary-modal-section.modal_shown .secondary-modal-conteiner{transform: translateX(0);*} */
/* End Secondary Moadal */


/* privacy policy page */
.privacy-banner-inner{width: 100%; position: relative;}
.privacy-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.privacy-bg::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0.5;}
.privacy-bg figure{width: 100%; height: 100%;}
.privacy-bg figure img{width: 100%; height: 100%; object-fit: cover; object-position: bottom center;}
.privacy-inner { width: 100%; position: relative; z-index: 1; }
.privacy-banner-inner { width: 100%; position: relative; padding: 150px 0;  z-index: 1;}
.privacy-content { max-width: 590px; width: 100%; }
.privacy-content h1 { color: var(--white); margin-bottom: 15px; font-size: 52px;}
.privacy-content p { color: var(--white); max-width: 500px; line-height: 1.3;}
.privacy-policy-section{width: 100%; padding-block: 60px;}
.privacy-policy-inner{width: 100%; display: flex; flex-flow: row wrap; gap: 24px; }
.privacy-policy-content{width: 100%;}
.privacy-policy-content h2 { margin-bottom: 20px; font-size: 35px; line-height: normal; }
.privacy-policy-content h6{font-size: 18px; margin-bottom: 8px;}
.privacy-policy-content p { font-size: 16px; line-height: 1.5; margin-bottom: 16px; color: var(--secondary); }
.privacy-policy-content ul{margin-bottom: 16px;}
.privacy-policy-content ul li{font-size: 16px; line-height: 1.5; color: var(--secondary);}
.privacy-policy-content p a { text-decoration: underline; color: var(--black); }
.privacy-policy-content li a { text-decoration: underline; color: var(--black); }
/* privacy policy page */


/* thank-you page */
.thank-you-section{width: 100%; padding-block: 100px;}
.thank-you-section .wrapper { max-width: 800px; }
.thank-you-inner{width: 100%; text-align: center;}
.thank-you-inner h1 {font-size: 52px; margin-bottom: 40px; color: var(--secondary); }
.thank-you-inner p { color: var(--secondary); margin-bottom: 10px; }
.thank-you-page .text-block-wrap { padding: 80px 0; }
.thank-you-page .text-blocks-container{margin-top: 0;}
/* thank-you page */

/* Start Area PopUp Style */
.area-popup-section{width: 100%; height: 100%; position: fixed; display: flex ; justify-content: center; align-items: center; padding: 50px 20px; overflow-y: scroll; z-index: 999999; opacity: 0; visibility: hidden; transition: .35s ease-in-out; top: 0; left: 0; box-sizing: border-box; height: 100svh; min-height: 100svh; flex-flow: row wrap; overflow-y: scroll; overflow-x: hidden; }
.area-popup-section:after { position: fixed; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.area-popup-section.modal_shown { opacity: 1; visibility: visible; }
.area-popup-conteiner{max-width: 1366px; width: 100%; position: relative;}
.area-popup-main{width: 100%; display: flex ; background-color: var(--white); position: relative; padding: 60px 40px 40px 40px; z-index: 1; box-shadow: 5px 16px 30.2px 0px rgba(0, 0, 0, 0.25); display: grid; grid-template-columns: 1fr 1fr; gap: 20px;} 
.area-modal-close{width: 32px; height: 32px; padding: 8px; border-radius: 50%; background-color: var(--secondary); top: 15px; right: 15px; position: absolute; cursor: pointer; color: var(--white); display: flex ; justify-content: center; align-items: center; transition: .35s ease-in-out; z-index: 1;}
.area-modal-close:hover{background-color: var(--primary);}
.area-modal-close svg { width: 12px; height: 12px; }
.popup-area-wrap{width: 100%;}
.popup-area-wrap .sec-title{margin-bottom: 0;}
.popup-area-wrap .sec-title h2{font-weight: 600;}
.sec-title.mobi{display: none;}
.popup-areas{width: 100%; position: relative;}
.popup-areas:before{position: absolute; top: 0; left: 0; width: 100%; height: 22px; content: ''; background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); z-index: 1;}
.popup-areas:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; content: ''; background: linear-gradient(0deg, #FFF 21.15%, rgba(255, 255, 255, 0.00) 100%); z-index: 1;}
.popup-area{width: 100%; height: 548px; overflow-y: scroll; position: relative; padding-top: 20px;}
.popup-area::-webkit-scrollbar{}
.popup-area .location-list{row-gap: 12px;}
.popup-area .locations-wrap h4:first-child{margin-top: 0;}
.popup-area .locations-wrap h4{margin-top: 20px;}

.popup-area-form{width: 100%; background-color: var(--secondary); padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(../svgs/shape.svg); background-size: 150% 150%; background-position: top; background-repeat: no-repeat; border-radius: 4px;}
.popup-area-form h2{text-align: center; margin-bottom: 12px; font-size: 32px; font-weight: 600; color: var(--white);}
.popup-area-form > p{text-align: center; margin-bottom: 24px; color: var(--white);}
.popup-area-form .input-col > label{color: var(--white);}
.popup-area-form .input-col .input-call{color: var(--white);}
.popup-area-form .input-col .input-call:hover{color: var(--primary);}
.input-col a.btn i{margin-left: 12px;}

.popup-area-form .btn:before, .popup-area-form .btn:after{background-color: var(--white);}
.popup-area-form .btn:hover{color: var(--primary);}
/* End Area PopUp Style */



.scroll-top-btn{width: 55px; height: 55px; line-height: 55px; position: fixed; bottom: 105%; right: 20px; font-size: 24px; z-index: 99; color: #ffffff; text-align: center; cursor: pointer; transition: .5s ease; background-color: var(--primary); border: none; outline: none;}
.scroll-top-btn.open { bottom: 30px; }


/* Start chaty-channels */
.chaty-channels { position: fixed; width: 50px; bottom: 80px; right: 20px; z-index: 99; display: flex ; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; }
.chaty-channels.open{opacity: 1; visibility: visible; transform: translateY(0);}
.chaty-i-trigger{width: 100%; width: 50px; height: 50px; position: relative; cursor: pointer; }
.chaty-i-trigger div{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .25s ease-in-out;}
.chaty-i-trigger div:hover .tooltip{display: block;}
.chaty-cta-main{opacity: 1; visibility: visible; transform: rotate(0deg); background-color: #f7f7f7; padding: 5px; border-radius: 100%; overflow: hidden; box-shadow: 0px 0px 14px 10px rgba(0, 0, 0, 0.1);}
.chaty-cta-main > div{position: relative;}
.chaty-cta-close{opacity: 0; visibility: hidden; transform: rotate(0deg);}
.chaty-cta-close img{box-shadow: 0 16px 24px 0 rgb(73 104 126 / 16%); border-radius: 50%;}
.chaty-channels img{width: 100%; height: 100%;}
.chaty-channels-list{width: 100%;}
.chaty-channels-list ul{width: 100%; display: flex; flex-direction: column; gap: 8px;}
.chaty-channels-list ul li{width: 100%; display: flex; position: relative; opacity: 1; visibility: visible; transition: .5s; -webkit-transition: .5s;}
.chaty-channels-list ul li:hover .tooltip{display: block;}
.chaty-channels-list ul li a{width: 100%; display: flex; box-shadow: 0px 0px 14px 10px rgba(0, 0, 0, 0.1); border-radius: 50%; overflow: hidden; background-color: #f7f7f7; padding: 5px;}
.chaty-channels-list ul li a div{display: flex;}
/* .chaty-channels-list ul li:nth-child(1) { transform: translateY(176px); }
.chaty-channels-list ul li:nth-child(2) { transform: translateY(118px); }
.chaty-channels-list ul li:nth-child(3) { transform: translateY(60px); } */
.chaty-channels svg{width: 40px; height: 40px;}
.lottie-hover{width: 40px; height: 40px;}

.chaty-i-trigger div img{ transform: rotate(0); transition: .35s ease-in-out;}
.chatyShown .chaty-i-trigger div img{ transform: rotate(180deg);}
.chatyShown .chaty-cta-main{opacity: 0; visibility: hidden;}
.chatyShown .chaty-cta-close{opacity: 1; visibility: visible;}
.chatyShown .chaty-channels-list ul li{opacity: 1; visibility: visible;}
.chatyShown .chaty-channels-list ul li:nth-child(1){transform: translateY(0);}
.chatyShown .chaty-channels-list ul li:nth-child(2){transform: translateY(0);}
.chatyShown .chaty-channels-list ul li:nth-child(3){transform: translateY(0);}

.tooltip { position: absolute; top: 50%; transform: translateY(-50%); right: 60px; background-color: var(--white); padding: 2px 7px; font-size: 14px; line-height: 1.5; border-radius: 5px; box-shadow: 0 1.93465px 7.73859px rgb(0 0 0 / 15%); display: none;}
.tooltip:after { position: absolute; content: ''; top: 50%; right: -3px; transform: translateY(-50%) rotate(-45deg); width: 8px; height: 8px; background-color: var(--white); border-radius: 2px; }
/* End chaty-channels */

.floating-btn{width: 100%; position: fixed; bottom: 0; left: 0; padding: 12px 20px; display: none; grid-template-columns: 1fr; gap: 20px; z-index: 9; background-color: var(--secondary); transform: translateY(150%); opacity: 0; transition: .45s ease-in-out;}
.floating-btn.open{transform: translateY(0); opacity: 1;}
.floating-btn .btn {padding: 12px 28px;}
.floating-btn .btn:hover { color: var(--primary); }
.floating-btn .btn:before, .floating-btn .btn:after{ background-color: var(--white); }

button.ButtonBase__ButtonContainer-sc-c65ab2ce-3.dLhUFN.bubble__StyledFloatingButton-sc-e8a26d94-0.beqXvl.es-bubble-floating-button{width: 50px !important; height: 50px !important;}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -999999 !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
}
/* ==== Responsive Style ==== */


.address-suggestions {
    position: absolute;
    z-index: 99999;
    width: 100%;
}
.suggestion-box {
	position: absolute;
	background: #fff;
	border: 1px solid #ccc;
	width: 100%;
	z-index: 9999;
	max-height: 200px;
	overflow-y: auto;
}
.suggestion-item {
	padding: 8px;
	cursor: pointer;
}
.suggestion-item:hover {
	background-color: #f0f0f0;
}


.pac-logo:after{display: none !important;}
.pac-item {    text-overflow: unset !important; overflow: hidden !important; width: 100%; position: relative; display: block; width: 100%; /* height: 36px; */ border: none; border-bottom: 1px solid #dddddd; font-size: 12px !important; line-height: 1.2; color: var(--secondary) !important; padding: 8px 4px 8px; transition: all 500ms ease; outline: none; border-radius: 0 !important;}
.pac-item-query {color: currentColor !important; }
.pac-icon{display: none !important}
.pac-container { z-index: 999999999 !important; max-width: 290px !important; width: 100% !important; transform: translateX(-25%) !important; }



/* celebration style */
.celebration-wrap { padding-block: 132px; } 
.celebration-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.celebration-bg figure{width: 100%; height: 100%;}
.celebration-bg figure img{width: 100%; height: 100%; object-fit: cover;}
.celebration-inner { position: relative; z-index: 1; width: 100%; justify-content: center;}
.celebration-inner >span { text-align: center; display: flex ; width: 100%; justify-content: center; font-size: 72px; line-height: normal; font-weight: normal; text-transform: uppercase; color: var(--white); gap: 21px; }
.celebration-inner h2 { font-size: 72px; line-height: normal; text-transform: uppercase; font-weight: bold; color: var(--white); width: 100%; text-align: center; }
.celebration-btn-wrap { width: 100%; justify-content: center; margin-top: 17px; }
.celebration-btn-wrap a { padding: 18px 44px; font-size: 20px; line-height: normal; text-transform: uppercase; font-weight: bold; position: relative; }
.celebration-btn-wrap a::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/btn-bg.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.celebration-btn-wrap a span { position: relative; z-index: 1; color: var(--white); }
/* celebration style */











@media only screen and (min-width: 320px) and (max-width: 768px) {

.mobi{display: block;}
.desk{display: none;}

.wrapper{padding-inline: 16px;}

/* Start Header Style */
.main-header-section{padding: 0;}
.main-header-section .wrapper{padding: 0;}

.logo-wrap { width: 100%; background-color: var(--white); padding: 10px 20px; position: relative;z-index: 999999;}
.logo-wrap:after{ position: absolute; left: 0px; top: 0px; content: ''; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/pattern-white.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; opacity: .75; z-index: -1; }

.hamburger{display: flex;}

.nav-wrap { width: 100%; height: 100vh; padding: 0; position: fixed; top: 0; right: 0; background-color: var(--secondary); display: block; z-index: 99999; padding: 140px 20px 120px; transform: translateX(200%); transition: .75s ease-in-out; overflow-y: scroll;}
.nav-wrap::-webkit-scrollbar{display: none;}
.navShown .nav-wrap{transform: translateX(0);}
.main-nav{width: 100%;}
.main-nav ul{width: 100%; flex-direction: column;}
.header-btn-wrap { width: 100%; gap: 10px; margin-top: 24px; justify-content: center;}
.main-nav ul li a{color: var(--white);}
.search-icon{color: var(--white);}

.search-box{left: 0 !important; right: auto !important; width: 300px;}
/* End Header Style */

/* Start Home Style */
.hero-wrap {
max-height: 200em;
height: 100%;
/* min-height:650px is a base (desktop) rule and this block never reset it, so on narrow
   phones the hero box was floored at 650px while .section-bg — which is a child of
   .hero-wrapper-inner, height:max-content here — followed the content instead. Measured
   gap of bare page background below the photo: 100px at 320w, 32px at 360w, 6px at 375w,
   0 from 390w up. This block's whole intent is that content decides the height, so the
   floor goes. */
min-height: 0;
padding: 0;
overflow: hidden;
transition: max-height 0.6s ease, font-size 0.6s ease; font-size: 4.27vw;}
.call-now .inner img { left: 2px; top: 52%; width: 35px;}
    
.floating-btn .call-now .inner img{
    width: 50px;
}
    
    
    
.hero-wrap .section-bg img{object-position: 50% 50%;} /* 91% 80% was tuned for a LANDSCAPE plate and took a narrow strip from the far right of it — measured, a 390x560 hero box uses only 535px of the 1376px master, and at that anchor those 535px were truck bonnet: no door, no technician. Below 769px the <picture> in index.html now serves Hero_Doctorz_4-mobile.webp, a 900x1200 3:4 crop, so the source is already the right shape and the anchor should simply centre it. Keep this breakpoint, the <source media> and the preload media in step — if they drift, the phone downloads one image and paints another. */
.hero-wrap .wrapper{padding-inline: 1em;}
.hero-wrapper-inner { height: max-content; position: relative; padding-block: 3em 1em; justify-content: flex-start}
.hero-wrap .section-bg:before { opacity: 0.5; }
.hero-content-wrap { max-width: 100%; width: 100%;}
.hero-content-wrap h1 { font-size: 2em;}
.hero-badge-wrap img { height: 3.75em; }
.hero-text h4 {font-size: 1.25em;}
span.hero_book{font-size: 0.875em;}
.hero-text{margin-top: 1.25em;}
.btn-box { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.call-now .inner h3 {font-size: 24px;}
.hero-inner{gap: 1.25em;}
.hero-form-wrap { width: 100%; padding: 1.25em 1em;}
.hero-badge-wrap { top: 39%; gap: .25em; }
.form-wrap { grid-template-columns: 1fr;}
.input-row-wrap{grid-template-columns: 1fr;}
.input-col.full-width { grid-column: span 1;}
.hero-form-wrap h2 { text-align: left; font-size: 1.25em !important;}
.hero-doctor{max-width: 7em; z-index: 2;}
/* Phone: the review marks go 2x2. Four across ~400px renders each wordmark about 85px
   wide and unreadable — that is measured, and it is why this wraps rather than shrinks.
   🔴 Override the BASIS, not `width`. A `width` here loses to the desktop rule's
   flex-basis and the row stayed four-up, then wrapped to FOUR rows. Same arithmetic as
   desktop: two items plus one 28px gap = 100%, so `calc(50% - 14px)`. */
/* 🔑 The phone gap is TIGHTENED to 16px, not for looks but because it is the only slack
   there is: on a 390px phone the row has 358px, so two marks and one gap is all of it.
   Every pixel taken off the gap goes into the marks. 28px gap gave 165px marks; 16px
   gives 171px. The 260px cap is only reached on a large phone or a small tablet.
   🛑 Do not raise the cap here expecting bigger marks on a phone — the width is the
   constraint, not the cap. */
.review-marks-row{gap: 22px 16px;}
.review-marks-row li{flex: 0 1 calc(50% - 8px); max-width: 260px;}
.hero-form-wrap .form-title{gap: .5em;}
.swiper-pagination{display: none;}
.form-title { gap: 10px;}
.second-step{display: none;}
.input-col.mobi{display: flex; flex-direction: column; align-items: center; gap: .5em;}
.more-details-btn{font-size: .875em; color: #233343; text-decoration: underline; cursor: pointer;}
.hero-form-wrap .input-col input, .hero-form-wrap .input-col select{font-size: 1em !important;}
.hero-form-wrap .input-col .btn{font-size: 1em !important; min-width: 10em;}

.input-col input, .input-col select, .input-col .selectric{height: 42px;}
.input-col-checkbox label{ padding-left: 6px; font-size: 12px !important; margin-top: -2px; }
.input-col p{ font-size: 12px !important;}
.hero-absolute-badge { width: 4.813em; bottom: -24%; right: 0; }
.hero-content-wrap h1 { max-width: 100%;}
    
    /* celebration style */
    .celebration-wrap { padding-block: 90px; }
    .celebration-inner >span { font-size: 36px; gap: 15px; }
    .celebration-inner >span img{width: 15px;}
    .celebration-inner h2{font-size: 36px;}
    
    
    .hero-form-wrap .form-title p{
        color: var(--black);
    }
    .hero-form-wrap .form-title h2{
        color: var(--black);
    }
    .hero-form-wrap{
        background-color: rgba(255, 255, 255, 0.50);
}
    
    
    .FloatingButton__FloatingButtonContainer-sc-51a1f737-0.fOhhWd {
        bottom: 80px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* celebration style */
    
    
    
    
    
    
    
    
    
    
    
    
    

.about-thumb-wrap { width: 100%;}
.about-content-wrap { width: 100%; }
.sec-title h2, .funfact-section-title h2 { font-size: 30px; line-height: 1.2;}
/* .service-section-title h2 { font-size: 30px; line-height: 1.2;} */
.about-content-author-sign { width: 100%; padding-right: 0; border-right: none; }
.about-content-author { width: 100%; padding-left: 0; }
.about-content-author-wrap{flex-direction: column;}
.about-content-author-sign img { width: 220px; }
.location-section-inner{flex-direction: column;}
.location-content-box { width: 100%; padding: 78px 30px 56px 30px; }
.location-list { grid-template-columns: 1fr;}
.about-small-thumb { width: 50%; }
.location-thumb-wrap { width: 100%; padding: 160px 30px 35px 30px;}
.support-box h3 { font-size: 22px;}
.image-content { left: 0; width: 100%;}
.about-section-inner{gap: 30px;}

.service-card-wrap{grid-template-columns: 1fr;}
.chooseus-thumb-wrap {width: 100%; padding: 120px 35px 45px 35px;}
.chooseus-wrap{gap: 30px; margin-top: 0;}
.chooseus-card-wrap { width: 100%; grid-template-columns: 1fr 1fr; gap: 32px 20px;}
.chooseus-card h3{font-size: 14px;}
.chooseus-card p{max-width: 220px;}
.chooseus-card-icon{width: 100px; height: 100px;}

.secondary-service-title { grid-template-columns: 1fr; gap: 15px; }
.secondary-service-title .sec-title { text-align: left;}
.secondary-service-cta h3 a{display: inline-block;}

.funfact-section-inner { grid-template-columns: 1fr 1fr; gap: 32px 10px;}
.funfact-col{text-align: center;}
.funfact-col-icon { font-size: 52px; margin-bottom: 12px; }
.funfact-col span.count-text { font-size: 52px; line-height: 58px;}
.funfact-col p { font-size: 14px;}
.funfact-col-icon img { height: 60px; }
.funfact-bg img{height: 300px; object-fit: cover;}
.testimonial-section-inner{gap: 40px;}
.testimonial-card-text{margin-bottom: 0;}
.testimonial-content a{margin: auto;}
.testimonial-content-wrap { width: 100%;}
.testimonial-slider { width: 100%;}
.reviews-grid{grid-template-columns: 1fr; gap: 20px; margin-top: 40px;}
.review-card{padding: 28px 24px;}
.review-text{font-size: 16px; line-height: 26px;}
.faq-section .sec-title { text-align: left; }
.faq-question h4 {font-size: 22px;}
.faq-question:after { top: 22px;}
.cta-text { width: 100%; }
.cta-btn-wrap { width: 100%; display: flex ; flex-direction: column; align-items: flex-start;}
.cta-text h2 { font-size: 26px;}
.cta-btn-wrap{margin-top: 20px;}
.cta-btn-wrap a{width: 100%; text-align: center; justify-content: center;}
.offers-section-inner { gap: 40px; }
.offers-card { max-width: 280px; padding: 20px; min-height: 195px; flex: unset;}
.offers-card { padding: 11px; max-width: 216px; min-height: 150px; }
.offers-card h4{font-size: 14px;}
.offers-card h2{font-size: 72px; margin-block: 10px;}
.offers-card p {font-size: 12px;}
.brands-logo img { height: 32px; min-height: auto; }
.brands-logo-wrap .js-marquee{gap: 32px;}
.brands-logo-wrap .js-marquee-wrapper{gap: 32px;}

.main-footer-section{padding-bottom: 100px;}
.footer-wrap{flex-flow: row wrap; gap: 36px 4%;}
.footer-logo{margin: auto; width: 80px;}
.footer-bottom{text-align: center; justify-content: center; gap: 16px; flex-direction: column;}
.footer-widget{width: 100%;}
.footer-widget:nth-child(2), .footer-widget:nth-child(3){width: 48%;}
.footer-widget:last-child{align-items: center;}
.footer-widget:nth-child(2){padding-left: 20px;}
.social-link ul {gap: 10px;}
.team-left-right{grid-template-columns: 1fr;}
.team-thumb img{aspect-ratio: unset;}
.garage-roi-inner{grid-template-columns: 1fr; gap: 0;}
.team-content-btn{justify-content: center;}
.garage-roi-content{padding: 40px 20px;}
.garage-roi-title{padding: 32px 20px 20px; text-align: center; display: flex; justify-content: center;}
.garage-roi-title h2{max-width: 75%;}
.garage-roi-title h2 span{font-size: 18px;}
.garage-roi-content h2{font-size: 30px;}
.garage-roi-content ul li{font-size: 18px;}
.garage-roi-content p{font-size: 18px; text-align: center;}
.garage-roi-content ul{margin-top: 0;}
.secondary-service-title-text p { font-size: 16px; line-height: 22px;}
.service-slider { padding-bottom: 80px;}
.service-slider .service-slider .service-card{width: 300px;}

.service-slider .service-card-link{opacity: 1; bottom: -66px;}
.secondary-service-cta p {font-size: 20px; line-height: 28px;}
.slider-arrow-wrap{display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;}
.slider-arrow{position: relative; left: auto !important; right: auto !important; top: auto !important; transform: unset !important;}
.garage-roi-btn{width: 100%; display: flex; justify-content: center;}
.garage-roi-content a.btn { margin-top: 15px; }
/* End Home Style */

.privacy-banner-inner { padding: 80px 0; }
.privacy-content h1 { font-size: 36px; }
.floating-btn{display: grid;}
.chaty-channels{display: none;}
/* Start Area PopUp Style */
.area-popup-main{grid-template-columns: 1fr; padding: 32px 16px 20px;}
.popup-area-form .input-col .input-call{display: none;}
.popup-area { height: 240px;}
.popup-area-form{padding: 32px 16px;}
.popup-area-form h2 { font-size: 22px;}
/* End Area PopUp Style */
.logo-wrap a{ width: 60px;}
.logo-wrap .btn-box {width: auto; opacity: 1; transform: translateY(0); transition: all 500ms ease-in; transition-delay: 150ms; display: flex; margin-top: 0; padding-right: 30px;}
.hero-content-wrap .btn-box {display: none;}
.btn-box .call-now{width: auto;}
.call-now .inner { padding: 10px 12px 10px 40px; }
    
    .floating-btn .call-now .inner { padding: 10px 12px 10px 65px; }
    
.call-now .inner i { left: 8px; font-size: 32px; }
.call-now .inner span { font-size: 12px; }
.floating-btn .call-now .inner span { font-size: 17px; }
.call-now .inner h3 { font-size: 18px; line-height: 1.25; }
.floating-btn .call-now .inner h3 { font-size: 22px; line-height: 1.25; }

.hero-content-wrap p{display: none;}
.hero-form-wrap h2{text-align: center;}
.hero-form-wrap h2 img{display: none;}

.service-card-wrap{display: none;}
.service-marquee-wrap.service-card-wrap{display: flex;}
.service-marquee{display: flex; gap: 16px;}
.service-marquee .js-marquee-wrapper{display: flex; gap: 16px;}
.service-marquee .js-marquee{display: flex; gap: 16px;}
.service-marquee .service-card{width: 250px; margin-bottom: 0;}


.offers-card-wrap{display: none;}
.offers-marquee-wrap{width: 100%; display: flex; flex-direction: column; gap: 16px;}
.offers-marquee{display: flex; gap: 16px;}
.offers-marquee .js-marquee-wrapper{display: flex; gap: 16px;}
.offers-marquee .js-marquee{display: flex; gap: 16px;}
.offers-marquee .offers-card{width: 216px;}
.garage-roi-thumb img{aspect-ratio: 1/.65;}
.funfact-section-title h2{font-size: 26px;}

.popup-area-wrap{order: 2;}
.testimonial-content .widget-container{display: block;}
.widget-container {width: 100%; display: flex; justify-content: center;}
.popup-area .location-list{grid-template-columns: 1fr 1fr;}
.sec-title.mobi{display: block;}
.popup-area-wrap .sec-title span{display: none;}
.area-popup-main .sec-title.mobi{margin-bottom: 0;}

.testimonial-content-btn{width: 100%; display: flex; justify-content: center;}

.modal-coupon{margin-bottom: 12px;}
.modal-coupon .offers-card { max-width: 110px; min-height: 60px;}
.modal-coupon .offers-card h2 { font-size: 32px;}

    
.error-msg { font-size: 11px !important; line-height: 15px; top: calc(100% - 3px); }
    
    .FloatingButton__FloatingButtonContainer-sc-ab6ca5f9-0.bezIRZ { bottom: 60px; }
    
    
    .floating-btn .call-now .inner:before{
        background: #C1554E;
    }
    
    .floating-btn .call-now .inner:after{
        background: #C1554E;
    }
    
    .floating-btn{
        background-color: #f2f2f2;
    }
    
    
    
}






@media only screen and (min-width: 320px) and (max-width: 400px) {

/* Start Home Style */
.hero-content-wrap h5{font-size: 16px;}
.call-now .inner {  padding: 16px 20px 16px 60px;}
.call-now .inner i { left: 11px; font-size: 48px;}
.call-now .inner span{font-size: 14px;}
    
    .floating-btn .call-now .inner { padding: 10px 12px 10px 65px; }

    
    
.call-now .inner h3 { font-size: 20px; }
.hero-form-wrap p{font-size: 14px;}
.input-col input, .input-col textarea, .input-col select { height: 42px; font-size: 16px; padding: 8px 16px;}
.input-col .selectric { height: 42px; font-size: 14px; padding: 8px 16px;}
.selectric .label { font-size: 14px;}
.btn { font-size: 14px; line-height: 1.25; padding: 16px 20px; }
.sec-title h2, .funfact-section-title h2 { font-size: 26px;}
/* .service-section-title h2 { font-size: 26px;} */
.sec-title p{font-size: 14px;}
.team-banner-inner{gap: 40px;}
.team-content ul li { font-size: 16px;}
.garage-roi-content h2 { font-size: 26px; }
.garage-roi-content ul li { font-size: 16px; }
a.call { padding: 9px 16px; font-size: 16px;}
.sec-title span {font-size: 12px; line-height: 16px;}
.sec-title span:before { width: 26px; height: 26px; left: 0px; top: 50%; transform: translateY(-50%);}
.sec-title.light span::before{ transform: scale(1.25) translateY(-50%); }
.chooseus-card-icon{margin-bottom: 18px !important;}
.chooseus-card h3 {font-size: 12px; max-width: 200px;}
.chooseus-card-wrap{gap: 22px 20px;}
.funfact-col span.count-text { font-size: 38px; line-height: 42px; }
.funfact-col p { font-size: 12px; }
.service-card-content { padding: 68px 24px 32px 24px; }

.secondary-service-cta p {font-size: 20px; line-height: 28px;}
.secondary-service-cta h3{font-size: 18px; line-height: 26px;}
.faq-question h4 { font-size: 18px; }
.faq-question { padding: 10px 32px 10px 0;}
.faq-answer p { font-size: 16px; }
.location-content-box { padding: 40px 20px 40px 20px; }
.support-box { padding: 10px 20px 10px 52px;}
.support-box .icon-box {left: 9px; font-size: 42px;}
.support-box span { font-size: 14px;}
.location-thumb-wrap { padding: 160px 20px 35px 20px; }
.location-btn { font-size: 14px;}
.input-col .input-call { font-size: 16px;}
.footer-logo { width: 96px; }
.form-title h2{font-size: 18px; text-align: center;}
.hero-form-wrap h2 img{display: none;}
.form-title { gap: 10px; margin-bottom: 15px;}

.locations-wrap h4 { font-size: 18px;}
.popup-area .location-list { row-gap: 8px; }
.location-list li{font-size: 16px;}
.modal-form-wrap h2{ font-size: 22px;}
.modal-form-wrap p{font-size: 14px;}
/* End Home Style */

.logo-wrap a{width: 50px;}
.call-now .inner { padding: 7px 12px 7px 40px; }
.call-now .inner i { left: 8px; font-size: 32px; }
.call-now .inner span { font-size: 10px; }
.call-now .inner h3 { font-size: 15px; line-height: 1.25; }
.funfact-section-title h2 { font-size: 20px; }
.logo-wrap .btn-box {padding-right: 10px; margin-top: 0;}

}


@media only screen and (min-width: 481px) and (max-width: 768px) {

.logo-wrap{padding-inline: 45px;}
.nav-wrap{padding-inline: 45px;}
.wrapper{padding-inline: 45px;}

.chooseus-card-wrap { grid-template-columns: 1fr 1fr; gap: 60px 15px; }
.location-list { grid-template-columns: 1fr 1fr;}

    .floating-btn .inner h3 { font-size: 22px; line-height: 1.25; }
    

}


@media only screen and (min-width: 769px) and (max-width: 991px) {


.btn{font-size: 16px; line-height: 1.25; padding: 16px 35px;}
a.call{font-size: 18px;}
/* Start Header Style */
.main-header-section{padding: 0;}
.main-header-section .wrapper{padding: 0;}

.logo-wrap { width: 100%; background-color: var(--white); padding: 10px 20px; position: relative;z-index: 999999;}
.logo-wrap:after{ position: absolute; left: 0px; top: 0px; content: ''; right: 0px; width: 100%; height: 100%; background-image: url(../svgs/pattern-white.svg?v=2026-10-29a); background-size: cover; background-repeat: repeat-x; animation: slide 100s linear infinite; -webkit-animation: slide 100s linear infinite; opacity: .75; z-index: -1; }
.hamburger{display: flex;}

.hero-wrap .section-bg img{object-position: 70% 40%;} /* was 70% 80%, which decapitated the subject. That anchor was tuned for the old 2880x1506 LANDSCAPE hero, where 80% down was still mid-frame. The hero is now Hero_Doctorz_1.webp, 1200x1789 PORTRAIT: with object-fit cover in this 769-991px box the image scales to 834x1243, so 80% down starts 511px into a 1789px image and the visible band began below his chin. 40% keeps him head-to-thigh with the truck livery and License # readable. Mobile (91% 80%, line ~1134) and desktop (0% 25%, line ~328) were composed for this plate and verified; tablet was the one breakpoint nobody re-checked after the swap. */
.hero-wrap{height: max-content; font-size: 16px;}
.hero-wrap .wrapper{padding-inline: 40px;}
.hero-badge-wrap{top: 33%;}
.swiper-pagination{left: 20px !important;}
.nav-wrap { width: 100%; height: 100vh; padding: 0; position: fixed; top: 0; right: 0; background-color: var(--secondary); display: block; z-index: 99999; padding: 120px 20px; transform: translateX(200%); transition: .75s ease-in-out; overflow-y: scroll;}
.nav-wrap::-webkit-scrollbar{display: none;}
.navShown .nav-wrap{transform: translateX(0);}
.main-nav{width: 100%;}
.main-nav ul{width: 100%; flex-direction: column;}
.header-btn-wrap { width: 100%; gap: 10px; margin-top: 20px;}
.main-nav ul li a{color: var(--white);}
.search-icon{color: var(--white);}
.search-box{left: 0 !important; right: auto !important;}
/* End Header Style */
/* Start Home Style */
.hero-inner{gap: 44px; justify-content: center;}
.hero-content-wrap { width: 100%;}
.hero-form-wrap { width: 100%; max-width: 650px;}
.image-content { left: 0; width: 300px; padding: 13px 15px 16px 20px;}
.sec-title h2, .funfact-section-title h2 { font-size: 36px; line-height: 1.2;}
/* .service-section-title h2 { font-size: 36px; line-height: 1.2;} */
.about-thumb-wrap { width: 45%;}
.about-content-wrap { width: 50%; }

.location-content-box { width: 56%; position: relative; padding: 40px 30px; }
.location-thumb-wrap{padding-inline: 20px;}

.support-box {padding: 16px 16px 16px 60px;}
.support-box .icon-box {font-size: 42px;}
.support-box h3 { font-size: 24px;}

.service-card-wrap { grid-template-columns: 1fr 1fr; }
.chooseus-section .icon-layer { width: 40%;}

.chooseus-card-wrap { width: 50%; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.chooseus-thumb-wrap { width: 45%; align-items: flex-end; }
.chooseus-card h3 {font-size: 20px; line-height: 26px;}
.secondary-service-title { gap: 30px; }

.funfact-col-icon {font-size: 48px; line-height: 1.2; margin-bottom: 12px;}
.funfact-col span.count-text { font-size: 40px; line-height: 1.2;}
.funfact-col p { font-size: 16px;}
.testimonial-content-wrap { width: 100%;}
.testimonial-slider { width: 100%;}
.cta-inner{flex-direction: column; gap: 24px;}
.cta-btn-wrap { width: 75%; justify-content: flex-start; }
.cta-text { width: 73%; }
.location-list{grid-template-columns: 1fr 1fr;}
.funfact-section-inner{gap: 10px;}
.offers-section-inner { gap: 40px; }
.offers-card { padding: 11px; max-width: 216px; min-height: 150px; }
.offers-card h4{font-size: 14px;}
.offers-card h2{font-size: 72px; margin-block: 10px;}
.offers-card p {font-size: 12px;}

.funfact-col-icon img { height: 52px; }
.secondary-service-title-text p { font-size: 18px;}

.garage-roi-thumb img{max-height: inherit;}
.team-left-right{gap: 24px;}
.garage-roi-inner{gap: 0;}
.garage-roi-content{padding: 40px 20px;}
.garage-roi-content h2{font-size: 36px;}
.garage-roi-content ul li{font-size: 18px;}
.garage-roi-content p{font-size: 18px;}
/* End Home Style */   
/* Start Area PopUp Style */
.area-popup-main{padding: 54px 16px 20px;}
.popup-area-form{padding: 32px 16px;}
.popup-area-form h2 { font-size: 22px;}
/* End Area PopUp Style */     
.secondary-service-cta p {font-size: 24px;}
.secondary-service-cta h3 { font-size: 24px;}
.input-col .input-call { font-size: 16px;}


}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

.main-nav ul { gap: 12px; }
.main-nav ul li a { font-size: 14px;}
.nav-wrap{padding-left: 0;}
.logo-wrap{width: 100px;}
.nav-wrap{ width: calc(100% - 100px);}
.hero-content-wrap h1 {font-size: 44px;}
.call-now .inner h3 {font-size: 26px;}
.image-content { left: 0;}
.location-thumb-wrap{padding-inline: 20px;}
.service-card-wrap { column-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
.service-card-content { padding: 72px 32px 32px 32px; }
.service-card-content h3 {font-size: 22px;}
.chooseus-section .icon-layer{width: 40%;}
.chooseus-thumb-wrap { width: 30%; padding-inline: 20px;}
.sec-title h2, .funfact-section-title h2 {font-size: 42px; line-height: 1.2;}
/* .service-section-title h2 {font-size: 42px; line-height: 1.2;} */
.swiper-pagination{left: 20px !important;}
.hero-wrap{height: calc(55.7em - 101px); min-height: 590px;}
/* .offers-card { flex: 1 1 calc(33.33% - 40px); min-height: 213px;} */
.offers-card { padding: 11px; max-width: 216px; min-height: 150px; }
.offers-card h4{font-size: 14px;}
.offers-card h2{font-size: 72px; margin-block: 10px;}
.offers-card p {font-size: 12px;}
.offers-card h2{font-size: 80px;}
.offers-card p{font-size: 13px;}

.funfact-col-icon img { height: 64px; }
.funfact-col span.count-text { font-size: 62px;}
.funfact-section-inner{gap: 20px;}
.cta-btn-wrap { width: 50%; }
a.call { padding: 11px 18px; font-size: 18px; line-height: 30px;}

.area-popup-main { padding: 60px 24px 32px 24px;}
.popup-area-form{padding: 32px 20px;}
.popup-area-form h2{ font-size: 28px; }
.garage-roi-content{padding: 40px 20px;}
.garage-roi-content h2{font-size: 42px;}
.garage-roi-content ul li{font-size: 18px;}
.garage-roi-content p{font-size: 18px;}

.widget-container { transform: scale(.8); }
.hero-absolute-badge { width: 8.25em; bottom: 4%; right: -2%; }

}
@media only screen and (min-width: 1201px) and (max-width: 1366px) {
.main-nav ul { gap: 18px; }
.main-nav ul li a {font-size: 12px;}
.image-content{left: 0;}
.offers-card { padding: 20px; max-width: 275px; min-height: 191px; }
.garage-roi-thumb img{max-height: inherit;}

.hero-absolute-badge { width: 9.25em; bottom: 0%; right: 0; }
}
@media only screen and (min-width: 1201px) and (max-width: 1439px) {

/* .offers-card { padding: 11px; max-width: 216px; min-height: 150px; }
.offers-card h4{font-size: 14px;}
.offers-card h2{font-size: 72px; margin-block: 10px;}
.offers-card p {font-size: 12px;} */


}
@media only screen and (min-width: 1440px) and (max-width: 1660px) {



.offers-card { padding: 22px; max-width: 264px; min-height: 184px;}
.offers-card h2{font-size: 86px;}
.offers-card p {font-size: 14px;}




}

@media only screen and (min-width: 1921px) {


.hero-wrap .wrapper { max-width: 1440px; }
.hero-content-wrap { max-width: 732px;}
.hero-content-wrap h1 {font-size: 62px;}
.hero-content-wrap h5 { font-size: 22px;}
.hero-content-wrap p { font-size: 24px;}
.btn-box .btn{font-size: 20px; padding: 22px 40px;}

.hero-form-wrap h2 { font-size: 32px;}
.form-title p{font-size: 18px;}
.input-col input, .input-col textarea, .input-col select, .input-col .selectric .label{font-size: 20px;}
.input-col input, .input-col select, .input-col .selectric{height: 60px;}


}

@media only screen and (min-width: 1440px) {

.hero-wrap{font-size: 16px;}

}


/*	Retina media query.
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {


}
/* ============================================================================
   SECTION RHYTHM — 40px top and bottom on every content section
   ----------------------------------------------------------------------------
   Sean, 2026-09-11: "I also need each section to have consistent top/bottom
   padding of 40px." Taken as a site-wide spec, so it is declared ONCE, here,
   rather than section by section as each is noticed.

   🔴 THIS BLOCK IS LAST IN THE FILE ON PURPOSE. Section padding used to be
   declared at base AND again inside (max-width: 768px) AND again inside
   (max-width: 400px) — 31 declarations across the three, ranging 34px to 120px.
   All 31 are deleted. Sitting last and outside any media query means this rule
   beats a later same-specificity override too, so the spec cannot be quietly
   undone from inside a breakpoint the way it was before.
   🛑 If a section must differ, change it HERE with a reason. Do not add an
   override in a media block — that is precisely the shape this replaced.

   🔑 padding-block, never the `padding` shorthand. Several of these sections
   take their horizontal gutter from elsewhere in the cascade and a shorthand
   would silently zero it. This file has 87 shorthand padding rules; do not make
   this the 88th.

   ⚠️ Two consequences of a uniform spec, so nobody "fixes" them back:
     • .reviews-section used to end `padding-block: 100px 0` — a deliberate
       zero, because the review cards sit directly above #testimonials and the
       two were built to read as one block. It is 40px now, so there is a seam
       there. That is the spec working, not a bug.
     • .garage-roi-banner had NO vertical padding at all and now has 40px. It
       was the only section with none.

   🛑 THE HERO IS NOT IN THIS LIST. .hero-wrap is height: calc(100svh - 101px)
   and its inner padding centres the lead form inside that fixed height — it is
   not page rhythm, and 40px there would move the form without changing any gap
   between sections. Flagged for Sean 2026-09-11, unanswered; see BACKLOG
   `tgdd-section-padding`.

   Verified by tools/check-section-padding.py, which measures the RENDERED
   geometry at twelve widths rather than grepping for this rule.
   ========================================================================== */
.review-marks,
.brands-section,
.team-banner,
.cta-section,
.service-section,
.chooseus-section,
.offers-section,
.garage-roi-banner,
.funfact-section,
.secondary-service-section,
.reviews-section,
.testimonial-section,
.faq-section,
.location-section,
.contact-section { padding-block: 40px; }

/* ==========================================================================
   CALLS-FIRST ON PHONES — `tgdd-calls-first`, 2026-10-06
   Most ad clicks land on a phone, and on a phone the call is the conversion
   that matters, so below 769px the hero leads with ONE full-width
   "Tap to call" button and the form follows it as the fallback,
   retitled "Or get a call back". The button is the hero's own .hero_btn
   (it was display:none on phones), so it keeps .tel-format and every tap
   still reaches the call-click tracking in ads-phone-conversion.js.
   The two hero lines that only repeated the button (the "We respond" h4 and
   "Book an Appointment Today!") give their height back to the form.

   The sticky call bar: the WHOLE bar is the tel: link. The 12px of bar
   padding used to sit outside the anchor, so a tap on the bar's edge did
   nothing. Measured by tools/measure-tap-targets.py.
   ========================================================================== */
.calls-first-label { display: none; }
.secondary-service-cta h3 a.call-us-today { color: var(--white); border-bottom: 0; }
.secondary-service-cta h3 a.call-us-today .dynamic-phone { border-bottom: 1px dashed #6de5f2; }

@media only screen and (max-width: 768px) {
    .calls-first-label { display: inline; }
    .calls-first-hide { display: none !important; }

    .hero-text h4, .hero-text span.hero_book { display: none; }
    .hero-content-wrap .btn-box { display: block; width: 100%; margin-top: 0; opacity: 1; transform: none; }
    .btn-box a.hero_btn { width: 100%; justify-content: center; flex-wrap: wrap; gap: .1em .35em; font-size: 22px; line-height: 1.2; padding: 16px 12px; text-align: center; }
    .btn-box a.hero_btn img { width: 26px; }
    .btn-box a.hero_btn .calls-first-label { font-weight: 700; }
    /* the trust badges are absolutely placed by % of a box whose height just changed; on
       phones they landed on the call button's corner and ate taps. In flow, between the
       headline and the button, they cannot cover it. */
    .hero-content-wrap { display: flex; flex-direction: column; }
    .hero-content-wrap h1 { order: 0; }
    .hero-badge-wrap { order: 1; position: static; align-self: flex-end; margin-top: .5em; }
    .hero-badge-wrap img { height: 52px; }
    .hero-text { order: 2; margin-top: .75em; }

    .floating-btn { padding: 0; }
    .floating-btn .call-now { display: block; width: 100%; max-width: none; border: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
}

/* ---- FORM FIELDS: one look in every form, every browser (2026-10-07) ----------------
   The <select>s were left to the browser's own drawing: Safari gives them a rounded,
   shaded box that ignores height and padding, and Chrome sits the text lower and further
   right than in the inputs beside it, with the caret jammed against the edge. Drawing
   them ourselves makes a select the same box as an input, with its own caret.
   Padding, height and font size still come from the shared .input-col rules, so a
   select and an input in the same row are sized by one rule, at every breakpoint. */
.input-col select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23233343' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
    padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 40px !important;
    line-height: normal; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.input-col select::-ms-expand { display: none; }
.input-col select:focus { border-color: var(--primary); }
/* "To Time" waits for "From Time": same box, quieter text, no different-coloured slab */
.input-col select:disabled { background-color: #f6f6f6; color: #aaaaaa; opacity: 1; cursor: not-allowed; }
/* inputs centre their own text; vertical padding only clipped it on the short hero fields */
.input-col input:not([type="checkbox"]) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* the number field's spinner arrows are noise on a phone number */
.input-col input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input-col input[type="number"]::-webkit-inner-spin-button,
.input-col input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* consent row: a normal gap after the box, and the fine print starts where the label does */
.input-col-checkbox { align-items: flex-start; gap: 10px; }
.input-col-checkbox label,
.hero-form-wrap .input-col-checkbox label { width: auto; flex: 1; padding-left: 0; max-width: none; }
.input-col-checkbox-text { padding-left: 26px; }
.hero-form-wrap .input-col-checkbox-text { padding-left: calc(1.25em + 10px); }

/* Service popup (2026-10-13): a tap on a service card shows the service, with
   Tap to call and "Get a quote", instead of dropping the visitor into the form.
   Own classes, not .area-popup-*: that popup's .area-popup-main stops click
   propagation, which would hide the call tap from the document-level listeners
   that count it (ads-phone-conversion.js, visit-log.js). */
/* iOS Safari only delivers a tap on a plain <div> to a delegated click handler
   when the element is styled clickable. The card's handler is delegated from
   .service-section, so without this a tap on the card's icon or padding can do
   nothing on an iPhone. */
.service-section .service-card { cursor: pointer; }
/* Phones: "Book A Free Inspection" had no room of its own. It is absolutely
   positioned and hidden until :hover, and a tap leaves :hover set, so it
   appeared BELOW the card and sat on top of the next marquee row. In the flow
   and always visible here: touch has no hover to reveal it with. */
@media only screen and (max-width: 768px) {
    .service-section .service-card-link,
    .service-section .service-card:hover .service-card-link { position: static; opacity: 1; bottom: auto; padding: 13px 20px; }
    /* ...and pinned to the card's bottom, so a one-line title does not lift its
       button above its neighbours' in the same marquee row. */
    .service-section .service-card { display: flex; flex-direction: column; }
    .service-section .service-card-content-wrap { flex: 1; display: flex; flex-direction: column; }
    .service-section .service-card-content { flex: 1; }
}
.service-popup-section { position: fixed; inset: 0; z-index: 999999; display: flex; justify-content: center; align-items: center; padding: 20px 16px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: .35s ease-in-out; }
.service-popup-section.modal_shown { opacity: 1; visibility: visible; }
.service-popup-main { position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 40px); overflow-y: auto; box-sizing: border-box; background-color: var(--white); padding: 48px 32px 32px; box-shadow: 5px 16px 30.2px 0px rgba(0, 0, 0, 0.25); text-align: center; }
.service-popup-close { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 50%; background-color: var(--secondary); color: var(--white); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: .35s ease-in-out; }
.service-popup-close:hover { background-color: var(--primary); }
.service-popup-close svg { width: 12px; height: 12px; }
.service-popup-kicker { display: block; margin-bottom: 8px; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.service-popup-main h2 { margin-bottom: 12px; font-size: 30px; font-weight: 600; line-height: 1.2; }
.service-popup-text { margin-bottom: 24px; }
.service-popup-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.service-popup-actions a.hero_btn { font-size: 22px; justify-content: center; }
@media only screen and (max-width: 768px) {
    .service-popup-main { padding: 48px 16px 24px; }
    .service-popup-main h2 { font-size: 24px; }
    .service-popup-actions a.hero_btn { width: 100%; flex-wrap: wrap; gap: .1em .35em; line-height: 1.2; padding: 16px 12px; }
}