.finance-btn {
  margin-left: 0px;
}

/* Mobile nav (hamburger menu): left-aligned labels, chevron pinned to the right edge,
   full-width tappable rows, consistent across all pages. */
@media (max-width: 991.98px) {
  /* Side padding so items (esp. the full-width Need Finance button) don't touch the screen edges */
  #mainMenu:not(.menu-overlay) > .container { padding-left: 20px !important; padding-right: 20px !important; text-align: left !important; }
  /* Force every menu item anchor to be a full-width, left-aligned block so the chevron
     sits at the far right edge (index.php was rendering them as inline-block/centered) */
  #mainMenu:not(.menu-overlay) nav > ul > li > a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  /* Hide the theme's arrow attached to <li> (its icon-font pseudo) */
  #mainMenu:not(.menu-overlay) nav > ul > li.dropdown::before { display: none !important; }
  /* The theme's JS prepends an invisible <span class="dropdown-arrow"> with a preventDefault
     click handler that covers the right 50px of each menu item — that's what was blocking
     navigation when tapping the arrow area. Kill it on mobile. */
  #mainMenu:not(.menu-overlay) nav > ul > li .dropdown-arrow { display: none !important; }
  /* Right-pointing chevron positioned on the <li> (which is reliably full-width),
     with pointer-events: none so clicks pass through to the full-width <a> underneath. */
  #mainMenu:not(.menu-overlay) nav > ul > li.dropdown { position: relative; }
  #mainMenu:not(.menu-overlay) nav > ul > li.dropdown > a { padding-right: 28px !important; }
  #mainMenu:not(.menu-overlay) nav > ul > li.dropdown::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    background: transparent;
    border-right: 2px solid #a0a3ad;
    border-top: 2px solid #a0a3ad;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
  #mainMenu .finance-btn { margin-left: 0 !important; margin-top: 28px !important; }
  #mainMenu .finance-btn::before { display: none !important; content: none !important; }
  #mainMenu .finance-btn i { margin-left: 0 !important; margin-right: 0 !important; }
  /* Social row at the bottom of the mobile menu drawer */
  #mainMenu .mobile-nav-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 28px 0 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  #mainMenu .mobile-nav-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    color: #333;
    font-size: 18px;
  }
}

/* Prevent accidental horizontal page scroll on any screen size */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* iOS Safari auto-zooms any input/select/textarea with font-size < 16px on focus,
   and doesn't zoom back out after blur. The theme sets html { font-size: 88% } which
   makes inherited input text ~14px. Force 16px on mobile to prevent the auto-zoom. */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
  }
}

/* Blue hero with HVAC image texture behind (for non-index page heroes) */
.hero-blue-bg {
  background-image: linear-gradient(rgba(0, 48, 135, 0.88), rgba(0, 48, 135, 0.88)), url('../images/air-ducts.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Universal button hover: subtle lift + shadow on all .btn elements */
.btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Disable hover effects on touch devices (mobile/tablet).
   Hover states get "stuck" after tap on touchscreens which looks broken.
   `(hover: none)` targets devices without a true hover capability.
   `(pointer: coarse)` targets touch-first input like phones/tablets.
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  /* Neutralize all :hover transforms / shadow lifts / border shifts */
  .btn:hover,
  a:hover,
  button:hover,
  .service-card:hover,
  .service-card:hover .service-card-overlay,
  .city-card:hover,
  .svc-detail-card:hover,
  .other-svc-card:hover,
  .other-svc-card:hover .other-svc-link,
  .service-mini:hover,
  .vendor-card:hover,
  .why-card:hover,
  .trust-badge:hover,
  .expect-step:hover,
  .em-card:hover,
  .em-card-btn:hover,
  .mhero-btn:hover,
  .mhero-btn-primary:hover,
  .mhero-btn-outline:hover,
  .faq-item:hover,
  .cs-links a:hover,
  .benefit-card:hover,
  .step-box:hover,
  .vendor-logos-grid img:hover,
  [class*="cta"]:hover,
  [class*="-card"]:hover,
  [class*="-badge"]:hover,
  [class*="-btn"]:hover {
    transform: none !important;
    box-shadow: initial !important;
    filter: none !important;
  }
  /* Kill the state change on service-card overlay color (blue → red on hover) */
  .service-card:hover .service-card-overlay {
    background: linear-gradient(180deg, rgba(0,48,135,0.30) 0%, rgba(0,48,135,0.85) 100%) !important;
  }
  /* Remove hover gap-widening on arrow links */
  .other-svc-card:hover .other-svc-link { gap: 6px !important; }
  /* Remove transition so tap doesn't animate at all on touch */
  .btn, .service-card, .city-card, .svc-detail-card, .other-svc-card,
  .service-mini, .vendor-card, .why-card, .trust-badge, .expect-step,
  .em-card, .mhero-btn, .faq-item, .benefit-card {
    transition: background 0.15s ease, color 0.15s ease !important;
  }
}

/* Mobile/tablet button fix: theme forces height:32px which clips taller buttons.
   Restore proportional sizing so text renders fully at every screen size. */
@media (max-width: 991.98px) {
  button.btn:not(.btn-creative):not(.btn-slide):not(.btn-xs):not(.btn-sm):not(.btn-lg),
  .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide):not(.btn-xs):not(.btn-sm):not(.btn-lg),
  a.btn:not([href]):not([tabindex]):not(.btn-creative):not(.btn-slide):not(.btn-xs):not(.btn-sm):not(.btn-lg) {
    height: auto;
    line-height: 1.4;
    padding: 11px 22px;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
  }
}

/* Mobile only: make .btn full-width + jumbo-sized so CTAs match the mobile hero buttons.
   Keeps size variants (btn-xs/sm/lg), themed (creative/slide), and modal close inline. */
@media (max-width: 767.98px) {
  .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide):not(.btn-xs):not(.btn-sm):not(.btn-lg) {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 22px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    letter-spacing: 0.3px !important;
    min-height: 52px !important;
  }
  /* Undo full-width for grouped buttons that are meant to sit inline */
  .btn-group > .btn,
  .btn-toolbar > .btn,
  .input-group > .btn {
    display: inline-flex !important;
    width: auto !important;
  }
  /* CTA rows using inline-flex should stack vertically so children can span full width */
  .d-inline-flex.flex-wrap,
  .d-flex.flex-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
}

.red {
  color: #df1f26 !important;
}

.heading-icons:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 127px;
    background-color: #dd1f26;
    top: -9px;
    left: 85px;
    right: 0;
}
.heading-text.heading-section.text-center h2:before,
.text-center .heading-text.heading-section h2:before,
.heading-text.heading-section h2.text-center:before { margin: 0 auto; }

.shape-divider svg:not(:first-of-type) { display: none !important; }


/* ==========================================================================
   Mobile/tablet swipe carousel utility
   Add class="row mobile-swipe" (or any container with direct card children)
   to make card grids scroll horizontally with snap on <992px screens.
   ========================================================================== */
@media (max-width: 991.98px) {
  .mobile-swipe {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px;
    padding: 4px 12px 18px;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  .mobile-swipe::-webkit-scrollbar { display: none; }
  .mobile-swipe > [class*="col-"],
  .mobile-swipe > .swipe-item {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
  }
  /* Subtle edge hint: fade on right so user knows more content exists */
  .mobile-swipe-wrap {
    position: relative;
  }
  .mobile-swipe-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 18px;
    width: 40px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7));
    pointer-events: none;
  }
  .mobile-swipe-wrap.dark-bg::after {
    background: linear-gradient(to right, rgba(20,20,28,0), rgba(20,20,28,0.6));
  }
}
@media (max-width: 575.98px) {
  .mobile-swipe > [class*="col-"],
  .mobile-swipe > .swipe-item {
    flex: 0 0 86%;
    max-width: 86%;
  }
}

/* Swipe indicator dots (generated by js/mobile-swipe-dots.js) */
.mobile-swipe-dots { display: none; }
@media (max-width: 991.98px) {
  .mobile-swipe-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 6px 0 22px;
    padding: 0;
  }
  .mobile-swipe-dot {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }
  .mobile-swipe-dot.is-active {
    background: #cc0000;
    width: 24px;
  }
  /* Dark-section variants (emergency band, offer-band, any dark gradient parent) */
  .emergency-band .mobile-swipe-dot,
  .offer-band .mobile-swipe-dot,
  .any-brand-band .mobile-swipe-dot,
  .signs-band .mobile-swipe-dot {
    background: rgba(255, 255, 255, 0.32);
  }
  .emergency-band .mobile-swipe-dot.is-active,
  .offer-band .mobile-swipe-dot.is-active,
  .any-brand-band .mobile-swipe-dot.is-active,
  .signs-band .mobile-swipe-dot.is-active {
    background: #fff;
  }
}

/* 0px up to SM (<576px) */
@media (max-width: 575.98px) {
  /* XS (Mobile) styles here */

}

/* SM up to MD (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* SM styles here */

}

/* MD up to LG (≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* MD styles here */


}

/* LG up to XL (≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* LG styles here */
  
}

/* XL and up (≥1200px) */
@media (min-width: 1200px) {
  /* XL+ styles here */
  
}