/* ================================
   overrides.css (ARS Refuse Service)
   Load this AFTER the template CSS.
   ================================ */

/* ===== Brand palette ===== */
:root{
  --ars-blue: #253d79;        /* logo blue (primary) */
  --ars-blue-hover: #1c2f5e;  /* darker hover */
  --ars-blue-soft: #eff3ff;   /* soft tint background */
  --text: #2b2b2b;
  --muted: #59544c;
  --border: #e6e8ee;
}

/* ===== Base typography ===== */
body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

h1,h2,h3,h4,h5,h6{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color:#31373a;
}

.main-nav ul li a,
.main_menu li a{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ===== Global link color (replace template cyan) ===== */
a, a:visited{
  color: var(--ars-blue);
}
a:hover, a:active, a:focus{
  color: var(--ars-blue-hover);
}

/* ===== Buttons (replace template cyan) ===== */
a.main-button.accent-color,
.mainBtn,
input.mainBtn{
  background-color: var(--ars-blue) !important;
  color: #fff !important;
}
a.main-button.accent-color:hover,
.mainBtn:hover,
input.mainBtn:hover{
  background-color: var(--ars-blue-hover) !important;
}

/* Large white buttons (like your hero call button) hover */
a.large-button.white-color:hover{
  opacity: .9;
}

/* ===== Icons / misc template accents that were cyan ===== */
.service-icon-wrap i{
  color: var(--ars-blue) !important;
}
#filters li.active{
  color: var(--ars-blue) !important;
}
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover{
  background: var(--ars-blue) !important;
  border-color: var(--ars-blue) !important;
}
.thumb-post .overlay .overlay-inner{
  background: var(--ars-blue) !important;
}

/* ===== Inputs polish ===== */
input, textarea{
  border-color: var(--border);
}

/* =========================================================
   HOME HERO (YOUR CURRENT WORKING VERSION - KEPT INTACT)
   ========================================================= */

/* Home hero: brightness + height */
#homeIntro .parallax-overlay{
  background-color: rgba(0,0,0,0.45);
  position: relative;
  min-height: 550px;
}

/* Home hero: full-width bottom band + right aligned text */
#homeIntro .container.home-intro-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#homeIntro .home-intro-content .row{
  margin: 0;
}

#homeIntro .home-intro-content .col-md-12{
  margin: 0;
  width: 100%;
  text-align: right;
  box-sizing: border-box;
  padding: 20px 60px;

  background: linear-gradient(
    270deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.38) 20%,
    rgba(0,0,0,0.18) 35%,
    rgba(0,0,0,0.00) 40%
  );
}

/* Hero text styling (supports h1 OR h2) */
#homeIntro .home-intro-content h1,
#homeIntro .home-intro-content h2{
  color:#fff;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
#homeIntro .home-intro-content h1{ font-size: 52px; line-height: 1.1; }
#homeIntro .home-intro-content h2{ font-size: 44px; line-height: 1.15; }

#homeIntro .home-intro-content p{
  color:#fff;
  margin: 10px 0 14px;
  font-size: 24px;
  line-height: 32px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Mobile: center it + reduce padding */
@media (max-width: 767px){
  #homeIntro .home-intro-content .col-md-12{
    padding: 18px 22px;
    text-align: center;
    background: rgba(0,0,0,0.40);
  }

  #homeIntro .home-intro-content h1{ font-size: 38px; }
  #homeIntro .home-intro-content h2{ font-size: 32px; }
  #homeIntro .home-intro-content p{ font-size: 18px; line-height: 26px; }
}

/* =========================================================
   NAV + DROPDOWNS (ARS styling)  — consolidated
   ========================================================= */

/* Top-level menu links */
.main-nav ul li a{
  color: var(--ars-blue) !important;
  font-size: 16px !important;
}

/* Hide FA icons on TOP menu only (keep icons in dropdowns) */
.main-nav .sf-menu > li > a > i{
  display: none !important;
}

/* Hover/active for top-level */
.main-nav ul li a:hover{
  color: var(--ars-blue) !important;
  background-color: rgba(37, 61, 121, 0.10) !important;
}
.main-nav ul li.active a{
  color: var(--ars-blue) !important;
  background-color: rgba(37, 61, 121, 0.14) !important;
}

/* Dropdown container */
.main-nav ul li ul{
  width: 360px;              /* <- make it wider (try 300–360 if needed) */
  margin-top: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* Dropdown items */
.main-nav ul li ul li a{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.2px;
  text-transform: none !important;

  white-space: nowrap;       /* <- prevents wrapping */
  overflow: hidden;          /* <- keeps it from spilling out */
  text-overflow: ellipsis;   /* <- if something is STILL too long */

  background: transparent !important;
  color: var(--ars-blue) !important;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* Remove “gridline” look */
.main-nav ul li ul li{
  border-bottom: none !important;
  margin-left: 0;
}


/* Dropdown hover */
.main-nav ul li ul li a:hover{
  background-color: var(--ars-blue) !important;
  color: #fff !important;
  transform: translateX(2px);
}

/* Optional: tighter on small screens */
@media (max-width: 991px){
  .main-nav ul li ul{
    width: 100%;
  }
}

/* =========================================================
   HOME: CTA band
   ========================================================= */
.cta .cta-title{
  display: inline-block;
  margin: 0 50px 0 0;
  font-size: 24px;
  color: #4a5459;
  font-weight: 600;
}

/* =========================================================
   INDEX: spacing above Quick Links + full-width background band
   ========================================================= */

/* Give the section above (Locally Owned / Family-Owned Excellence area)
   a bit more space before we hit the new background band */
.dark-content.portfolio{
  padding-bottom: 40px;
}

.dark-content.portfolio .section-header{
  padding-bottom: 30px; /* you asked for 30 instead of 70 */
}

/* Quick Links section: full-width background */
.light-content.services{
  margin-top: 0;
  /*background: #d3dde0;*/
  padding: 70px 0 90px;
}


/* Keep your card styling the same */
.light-content.services .service-box-wrap{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 32px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.light-content.services .service-box-wrap:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
  border-color: rgba(37,61,121,.25);
}

.light-content.services .service-icon-wrap{
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px; /* desktop icon slot */
}

.light-content.services .service-title{
  margin-top: 18px;
}

/* =========================
   SERVICES: mobile + tablet sizing (tame tall cards)
   ========================= */

@media (max-width: 991px){
  .light-content.services .service-box-wrap{
    padding: 22px 18px;
    margin-bottom: 24px;
  }

  .light-content.services .service-title{
    margin-top: 14px;
  }

  .light-content.services .service-icon-wrap img{
    width: 140px !important;
    height: 140px !important;
  }
}

/* =========================
   SERVICES: 768–991 (tighten the “too big” range)
   ========================= */
@media (min-width: 768px) and (max-width: 991px){
  .light-content.services{
    padding: 52px 0 62px;
  }

  .light-content.services .service-box-wrap{
    padding: 18px 16px;
    margin-bottom: 18px;
  }

  .light-content.services .service-icon-wrap{
    margin-bottom: 0;
    min-height: 96px; /* tablet icon slot */
  }

  .light-content.services .service-icon-wrap img{
    width: 96px !important;
    height: 96px !important;
  }

  .light-content.services .service-title{
    margin-top: 10px;
  }

  .light-content.services .service-cnt-wrap p{
    margin-bottom: 0;
  }
}

@media (max-width: 767px){
  .light-content.services{
    padding: 44px 0 54px;
  }

  .light-content.services .service-box-wrap{
    padding: 16px 14px;
    margin-bottom: 16px;
  }

  .light-content.services .service-icon-wrap{
    margin-bottom: 0;
    min-height: 84px; /* mobile icon slot */
  }

  .light-content.services .service-icon-wrap img{
    width: 84px !important;
    height: 84px !important;
  }

  .light-content.services .service-title{
    margin-top: 10px;
  }

  .light-content.services .service-cnt-wrap p{
    margin-bottom: 0;
  }
}


/* =========================
   SERVICES: align card heights + keep row spacing (768–1200)
   ========================= */
@media (min-width: 768px) and (max-width: 1199.98px){

  .light-content.services .row{
    display: flex;
    flex-wrap: wrap;
  }
  .light-content.services .row:before,
  .light-content.services .row:after{
    display: none;
    content: none;
  }

  /* Restore space between your two stacked .row blocks */
  .light-content.services .ars-portfolio-card > .row{
    margin-bottom: 18px;
  }
  .light-content.services .ars-portfolio-card > .row:last-child{
    margin-bottom: 0;
  }

  .light-content.services .row > [class*="col-"]{
    display: flex;
  }

  .light-content.services .service-box-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}


/* Services: commercial truck is wide — size by HEIGHT so text lines up */
@media (min-width: 768px) and (max-width: 991px){
  .light-content.services .service-icon-wrap img[src*="commercialtruck2"]{
    height: 96px !important;
    width: auto !important;
    max-width: 100%;
  }
}

@media (max-width: 767px){
  .light-content.services .service-icon-wrap img[src*="commercialtruck2"]{
    height: 84px !important;  /* match the mobile icon slot */
    width: auto !important;
    max-width: 100%;
  }
}

/* =========================
   SERVICES: keep the same row gap + equal-height behavior at 1200+
   ========================= */
@media (min-width: 1200px){

  .light-content.services .row{
    display: flex;
    flex-wrap: wrap;
  }
  .light-content.services .row:before,
  .light-content.services .row:after{
    display: none;
    content: none;
  }

  /* Space between your two stacked rows */
  .light-content.services .ars-portfolio-card > .row{
    margin-bottom: 18px;
  }
  .light-content.services .ars-portfolio-card > .row:last-child{
    margin-bottom: 0;
  }

  .light-content.services .row > [class*="col-"]{
    display: flex;
  }

  .light-content.services .service-box-wrap{
    width: 100%;
    height: 100%;
  }
}
/* =========================================================
   HEADER: logo size + centered menu + phone (desktop)
   ========================================================= */
.site-header .logo img{
  max-height: 80px;
  width: auto;
  height: auto;
}

@media (min-width: 992px){

  .site-header .col-md-12{
    display: flex;
    align-items: center;
  }

  /* Disable bootstrap floats so flex controls layout */
  .site-header .logo.pull-left,
  .site-header .main-navigation.pull-right{
    float: none !important;
  }

  /* Default desktop+ gap (1200+ will use this) */
  .site-header{
    --header-gap: 70px;   /* bump this up for wide desktop */
  }

  /* More space between logo and menu */
  .site-header .main-navigation{
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: var(--header-gap);
  }

  /* Center nav between logo and phone */
  .site-header .main-navigation .main-nav{
    flex: 1;
    display: flex;
    justify-content: center;
  }

  /* Phone stays far right */
  .site-header .header-phone{
    white-space: nowrap;
    margin-left: var(--header-gap);
  }

  .site-header .header-phone-link{
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(37,61,121,.22);
    background: rgba(37,61,121,.06);
    color: var(--ars-blue);
    text-decoration: none;
    line-height: 1;
    font-weight: 700;
    font-size: 13px;
  }

  .site-header .header-phone-link i{
    margin-right: 8px;
    color: var(--ars-blue);
  }

  .site-header .header-phone-link:hover{
    background: rgba(37,61,121,.10);
    border-color: rgba(37,61,121,.32);
    text-decoration: none;
  }
}

/* =========================================================
   HEADER GAP OVERRIDE: 992–1199.98px
   Keeps menu from wrapping in that range
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px){
  .site-header{
    --header-gap: 0px;
  }
}
/* ===== Index: Family-Owned Excellence block (portfolio replacement) ===== */
.ars-portfolio-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  box-shadow:0 18px 46px rgba(0,0,0,0.20);
  padding:42px 44px;
}

.ars-portfolio-text{
  margin:0 0 14px 0;
}

.ars-portfolio-text.ars-portfolio-text-last{
  margin:0;
}

.ars-portfolio-highlights{
  margin-top:26px;
}

.ars-highlight{
  text-align:center;
  margin-bottom:10px;
}

.ars-highlight-icon{
  margin-bottom:6px;
  color:var(--ars-blue, #253d79);
  font-size:26px;
}

.ars-highlight-title{
  font-weight:800;
  color:#31373a;
}

.ars-highlight-sub{
  color:#777;
  font-size:13px;
}

/* Index: hide the highlight row on mobile */
@media (max-width: 767px){
  .ars-portfolio-card .ars-portfolio-highlights{
    display:none;
  }
  .ars-portfolio-image {margin-top:30px}
}

.ars-portfolio-image{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  min-height:260px;
  box-shadow:0 14px 30px rgba(0,0,0,0.12);

  background-image: url("../images/family-owned-sunset.webp");
  background-size: cover;
  background-position: center;

  /* hide the placeholder text without changing HTML */
  color: transparent;
}
/* Index: tighten section header spacing for Family-Owned Excellence block only */
.dark-content.portfolio .section-header{
  padding-bottom: 30px;
}
/* Index: tighten the dark section spacing above it */
.portfolio{
  margin-top: 0;
}
/* Index: Family-Owned Excellence section — add more space at the bottom */
.dark-content.portfolio{
  padding-bottom: 110px; /* theme is 80px; bump it up */
}
/* ===== Global mobile fix: shorter hero + no parallax bleed ===== */
@media (max-width: 575px){

  /* Shrink the HERO itself (not just the overlay) */
  .first-widget.parallax{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;

    /* Prevent the background/parallax from peeking out */
    overflow: hidden !important;

    /* Mobile + parallax often causes weird bleed/jump */
    background-attachment: scroll !important;
  }

  /* Keep the overlay compact */
  .first-widget.parallax .parallax-overlay{
    min-height: 50px !important;   /* lower this if you want it even shorter */
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }

  /* Title sizing + stack breadcrumb */
  .pageTitle .page-title{
    font-size: 26px;
    line-height: 1.12;
    margin: 0;
  }

  .pageTitle .page-location{
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
    margin-top: 6px;
  }

  .pageTitle .text-right{
    text-align: left !important;
  }
}

/* ===== HERO: make hero behave like mobile on tablets (768–991) ===== */
@media (min-width: 768px) and (max-width: 991px){

  /* Force the two half-width columns to stack */
  .first-widget.parallax .pageTitle .col-sm-6{
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Breadcrumb block: center + allow wrapping */
  .first-widget.parallax .pageTitle .text-right{
    text-align: center !important;
  }

  .first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    white-space: normal;
    margin-top: 6px;
  }
}

/* =========================================================
   HERO — tablet/landscape fix (768–991px)
   Stacked + centered, removes extra “blank line” spacing.
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px){

  /* tighten the hero so content isn't pushed down */
  .first-widget.parallax .parallax-overlay{
    min-height: 180px;
    padding-top: 32px;
    padding-bottom: 18px;
  }

  /* stack title + breadcrumb like mobile */
  .first-widget.parallax .pageTitle .col-sm-6{
    width: 100%;
    float: none;
  }

  .first-widget.parallax .pageTitle,
  .first-widget.parallax .pageTitle .text-right{
    text-align: center !important;
  }

  /* kill default h2 margin that creates the “gap” */
  .first-widget.parallax .pageTitle .page-title{
    margin: 0;
  }

  .first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    margin-top: 6px;
  }
}

/* =========================================================
   HERO — tablet/landscape fix (576–767px)
   Stacked + centered, removes extra “blank line” spacing.
   ========================================================= */
@media (min-width: 576px) and (max-width: 767px){

  /* tighten the hero so content isn't pushed down */
  .first-widget.parallax .parallax-overlay{
    min-height: 180px;
    padding-top: 32px;
    padding-bottom: 18px;
  }

  /* stack title + breadcrumb like mobile */
  .first-widget.parallax .pageTitle .col-sm-6{
    width: 100%;
    float: none;
  }

  .first-widget.parallax .pageTitle,
  .first-widget.parallax .pageTitle .text-right{
    text-align: center !important;
  }

  /* kill default h2 margin that creates the “gap” */
  .first-widget.parallax .pageTitle .page-title{
    margin: 0;
  }

  .first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    margin-top: 6px;
  }
}

/* =========================================================
   HERO — phones fix (320–575px)
   Stacked + centered, removes extra “blank line” spacing.
   ========================================================= */
@media (min-width: 320px) and (max-width: 575px){

  /* tighten the hero so content isn't pushed down */
  .first-widget.parallax .parallax-overlay{
    min-height: 180px;
    padding-top: 32px;
    padding-bottom: 18px;
  }

  /* stack title + breadcrumb like mobile */
  .first-widget.parallax .pageTitle .col-sm-6{
    width: 100%;
    float: none;
  }

  .first-widget.parallax .pageTitle,
  .first-widget.parallax .pageTitle .text-right{
    text-align: center !important;
  }

  /* kill default h2 margin that creates the “gap” */
  .first-widget.parallax .pageTitle .page-title{
    margin: 0;
  }

  .first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    margin-top: 6px;
  }
}

/* =========================================================
   HERO — phones fix (320–575px)
   Stacked + centered, removes extra “blank line” spacing.
   ========================================================= */
@media (min-width: 320px) and (max-width: 356px){
  /* tighten the hero so content isn't pushed down */
  .pageTitle .page-title{
font-size:22px;
  } 
}

/* =========================================================
   GLOBAL HERO FIX (all internal pages that use #blog)
   Keeps hero height reasonable + removes the “extra line” gap
   Does NOT touch homepage (#homeIntro)
   ========================================================= */

/* Desktop+ (992px+) — reduce the default huge padding */
@media (min-width: 992px){
  #blog.first-widget.parallax .pageTitle{
    padding: 44px 0;          /* was 70px 0 in theme */
  }

  #blog.first-widget.parallax .pageTitle .page-title{
    margin: 0;                /* kills the “mystery gap” */
  }

  #blog.first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    margin-top: 6px;
  }
}

/* Tablet + phones (<= 991.98px) — stack + center like your smaller breakpoint */
@media (max-width: 991.98px){

  /* stop weird mobile/parallax behavior */
  #blog.first-widget.parallax{
    background-attachment: scroll;
    background-position: center 15%;
  }

  #blog.first-widget.parallax .pageTitle{
    padding: 32px 0;          /* tighter so content isn't miles down */
  }

  /* stack the two half columns */
  #blog.first-widget.parallax .pageTitle .col-sm-6{
    width: 100%;
    float: none;
  }

  /* center title + breadcrumb */
  #blog.first-widget.parallax .pageTitle,
  #blog.first-widget.parallax .pageTitle .text-right{
    text-align: center !important;
  }

  /* remove the extra blank line gap */
  #blog.first-widget.parallax .pageTitle .page-title{
    margin: 0;
  }

  #blog.first-widget.parallax .pageTitle .page-location{
    display: inline-block;
    margin-top: 6px;
    white-space: normal;
  }
}

/* Small phones — slightly smaller text so it stays compact */
@media (max-width: 575.98px){
  #blog.first-widget.parallax .pageTitle .page-title{
    font-size: 28px;
    line-height: 1.12;
  }

  #blog.first-widget.parallax .pageTitle .page-location{
    font-size: 13px;
    line-height: 1.2;
  }
}

/* =========================================================
   HEADER GAP OVERRIDE: 992–1199.98px
   Keeps menu from wrapping in that range
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px){

  .site-header{
    --header-gap: 0px;
  }

  /* Slightly smaller logo in this tight range */
  .site-header .logo img{
    max-height: 72px;
  }

  /* Tighten nav links so they fit without wrapping */
  .site-header .sf-menu > li > a{
    padding: 10px 10px;   /* was wider */
    font-size: 13px;      /* was larger */
  }

  /* Tighten icon spacing */
  .site-header .sf-menu > li > a i{
    margin-right: 6px;
  }

  /* Tighten phone button a bit */
  .site-header .header-phone-link{
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* =========================
   HOME HERO (Home page intro)
   Keep desktop framing, but prevent the “tiny strip” on phones.
   ========================= */
#homeIntro{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 32px;       /* desktop framing */
  background-attachment: scroll;        /* avoid fixed on most devices */
  color: #fff;
  overflow: hidden;
}

#homeIntro .parallax-overlay{
  min-height: 520px;
  padding-top: 95px;
  padding-bottom: 55px;
  display: flex;
  align-items: center;
}

/* 992–1199: slightly shorter + less “crop/zoom” feeling */
@media (min-width: 992px) and (max-width: 1199.98px){
  #homeIntro{
    background-position: 50% 20px !important;
    background-attachment: scroll !important;
  }
  #homeIntro .parallax-overlay{
    min-height: 460px !important;
    padding-top: 80px !important;
    padding-bottom: 45px !important;
  }
}

/* 576–991: keep it stable and not absurdly tall */
@media (min-width: 576px) and (max-width: 991.98px){
  #homeIntro{
    background-position: 50% 15% !important;
    background-attachment: scroll !important;
  }
  #homeIntro .parallax-overlay{
    min-height: 360px !important;
    padding-top: 70px !important;
    padding-bottom: 40px !important;
  }
}

/* <=575: HARD OVERRIDE so it never collapses into a strip */
@media (max-width: 575.98px){
  #homeIntro{
    background-position: 50% 18% !important;
    background-attachment: scroll !important;
  }

  #homeIntro .parallax-overlay{
    min-height: 280px !important;
    padding-top: 64px !important;
    padding-bottom: 32px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* keep text readable without pushing content down forever */
  #homeIntro h1{
    font-size: 28px;
    line-height: 1.12;
    margin: 0 0 8px;
  }

  #homeIntro p{
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
  }
}

/* 1200+ wide desktop breathing room */
@media (min-width: 1200px){
  #homeIntro .parallax-overlay{
    min-height: 610px;
  }
}

/* 1600+ very wide screens */
@media (min-width: 1600px){
  #homeIntro{
    background-position: 50% 24px;
  }
  #homeIntro .parallax-overlay{
    min-height: 680px;
  }
}

/* =========================================================
   HOME INTRO: keep <=575 as-is, nudge image on 576–767
   ========================================================= */



/* 576–767px — shift RIGHT only (no vertical nudge) */
@media (min-width: 576px) and (max-width: 767.98px){
  #homeIntro{
    background-position: 20% 0px !important;   /* <-- changed 32px to 0px */
    background-attachment: scroll !important;
  }
}

/* 576–767px — shift RIGHT only (no vertical nudge) */
@media (min-width: 320px) and (max-width: 570px){
  #homeIntro{
    background-position: 20% 0px !important;   /* <-- changed 32px to 0px */
    background-attachment: scroll !important;
  }
}




/* =========================================================
   HOME INTRO + CTA: same behavior, no micro-breakpoints
   ========================================================= */

/* H1: 320–828 ramps 20 → 38, then holds */
@media (max-width: 828px){
  #homeIntro .home-intro-content h1{
    font-size: clamp(20px, calc(7.45vw - 4px), 38px);
  }
}

/* H1: 829–991 stays at 40 */
@media (min-width: 829px) and (max-width: 991px){
  #homeIntro .home-intro-content h1{
    font-size: 40px;
  }
}

/* CTA title: reduce “ugly wrap” risk + fix invalid !important syntax */
@media (max-width: 767px){
  .cta .cta-title{
    margin: 0 !important;
    font-size: clamp(20px, calc(3vw + 7px), 24px);
    text-wrap: balance;
  }
}

/* =========================
   Service Area preview button: match Service Area page call button colors
   ========================= */
#serviceAreaPreview .btn.btn-primary{
  background: rgba(37, 61, 121, .85);
  border-color: rgba(37, 61, 121, .85);
  color: #fff !important;
  font-weight: 700;
  padding: 10px 16px;
}

#serviceAreaPreview .btn.btn-primary:hover,
#serviceAreaPreview .btn.btn-primary:focus{
  background: #274075;
  border-color: #274075;
  color: #fff !important;
}

#serviceAreaPreview .btn.btn-primary:active,
#serviceAreaPreview .btn.btn-primary.active{
  background: #20365f;
  border-color: #20365f;
  color: #fff !important;
}
/* Match the secondary button size/typography to the primary button */
#serviceAreaPreview .btn.btn-default{
  padding: 10px 16px;
  font-weight: 700;
}

/* Service Area preview: call button matches header-phone style (icon + number) */
#serviceAreaPreview .servicearea-call-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#serviceAreaPreview .servicearea-call-btn i{
  font-size: 14px;
  line-height: 1;
}

/* =========================
   HOLIDAY page: table + notes tweaks
   =========================
   QUICK TUNING:
   - Desktop left/right inset: change DESKTOP_PAD below (default 60px)
   - Desktop column split: change COL1 / COL2 below (default 42% / 58%)
   - Stack breakpoint: change STACK_BP below (default 520px)
   ========================= */

/* -------------------------
   Base table cleanup (all sizes unless overridden)
   ------------------------- */

/* Keep "Schedule Change" left-aligned */
.holiday-page .schedule-table.schedule-table-blue thead th:nth-child(2),
.holiday-page .schedule-table.schedule-table-blue th:last-child{
  text-align: left;
}

/* Ensure 2nd column body text is left */
.holiday-page .schedule-table.schedule-table-blue tbody td:nth-child(2){
  text-align: left !important;
}

/* Remove horizontal row divider lines */
.holiday-page .schedule-table.schedule-table-blue tbody td{
  border-bottom: 0;
}

/* -------------------------
   Desktop (992+) — full-width header, inset CONTENT via padding
   ------------------------- */

@media (min-width: 992px){
  /* lock columns on desktop so header/body align */
  .holiday-page .schedule-table.schedule-table-blue{
    table-layout: fixed;
    width: 100%;
  }

  /* COL1 / COL2 */
  .holiday-page .schedule-table.schedule-table-blue th:first-child,
  .holiday-page .schedule-table.schedule-table-blue td:first-child{
    width: 42%;
  }

  .holiday-page .schedule-table.schedule-table-blue th:nth-child(2),
  .holiday-page .schedule-table.schedule-table-blue td:nth-child(2){
    width: 58%;
  }

  /* DESKTOP_PAD: inset the text without breaking the header background */
  .holiday-page .schedule-table.schedule-table-blue thead th,
  .holiday-page .schedule-table.schedule-table-blue tbody td{
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* -------------------------
   768–991 — normal table behavior (no fixed widths)
   ------------------------- */
@media (min-width: 768px) and (max-width: 991px){
  .holiday-page .schedule-table.schedule-table-blue{
    table-layout: auto !important;
    width: 100% !important;
  }

  .holiday-page .schedule-table.schedule-table-blue th:first-child,
  .holiday-page .schedule-table.schedule-table-blue td:first-child,
  .holiday-page .schedule-table.schedule-table-blue th:nth-child(2),
  .holiday-page .schedule-table.schedule-table-blue td:nth-child(2){
    width: auto !important;
  }

  .holiday-page .schedule-table.schedule-table-blue thead th,
  .holiday-page .schedule-table.schedule-table-blue tbody td{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* -------------------------
   521–767 — normal table behavior (no fixed widths)
   ------------------------- */
@media (min-width: 521px) and (max-width: 767px){
  .holiday-page .schedule-table.schedule-table-blue{
    table-layout: auto !important;
    width: 100% !important;
  }

  .holiday-page .schedule-table.schedule-table-blue th:first-child,
  .holiday-page .schedule-table.schedule-table-blue td:first-child,
  .holiday-page .schedule-table.schedule-table-blue th:nth-child(2),
  .holiday-page .schedule-table.schedule-table-blue td:nth-child(2){
    width: auto !important;
  }

  .holiday-page .schedule-table.schedule-table-blue thead th,
  .holiday-page .schedule-table.schedule-table-blue tbody td{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* -------------------------
   <= STACK_BP — stack rows for readability
   ------------------------- */

/* STACK_BP */
/* HOLIDAY: <=520px — stacked rows, tighter spacing, cleaner mobile look */
/* HOLIDAY: <=520px — stacked rows, single clean list (no mini-cards) */
@media (max-width: 520px){

  /* stacked layout */
  .holiday-page .schedule-table.schedule-table-blue,
  .holiday-page .schedule-table.schedule-table-blue thead,
  .holiday-page .schedule-table.schedule-table-blue tbody,
  .holiday-page .schedule-table.schedule-table-blue th,
  .holiday-page .schedule-table.schedule-table-blue td,
  .holiday-page .schedule-table.schedule-table-blue tr{
    display: block;
    width: 100%;
  }

  .holiday-page .schedule-table.schedule-table-blue thead{
    display: none;
  }

  /* make the whole list breathe evenly inside the main white card */
  .holiday-page .schedule-table.schedule-table-blue{
    margin: 0 !important;
  }

  /* each holiday entry = one “row” with a centered, shorter divider */
  .holiday-page .schedule-table.schedule-table-blue tr{
    margin: 0;
    padding: 12px 0;
    position: relative;
  }

  .holiday-page .schedule-table.schedule-table-blue tr::after{
    content: "";
    display: block;
    width: 55%;                 /* divider length (adjust if you want) */
    margin: 12px auto 0;        /* centered */
    border-bottom: 1px solid rgba(0,0,0,.10);
  }

  .holiday-page .schedule-table.schedule-table-blue tr:last-child::after{
    display: none;
  }

  /* equal left/right padding so it lines up nicely */
  .holiday-page .schedule-table.schedule-table-blue td{
    width: 100% !important;
    padding: 0 18px !important;   /* <- equal edges */
    border: 0;
  }

  /* Holiday title */
  .holiday-page .schedule-table.schedule-table-blue td:first-child{
    font-weight: 800;
    margin: 0;
    padding-bottom: 4px !important;
  }

  /* Schedule change line (tight to title) */
  .holiday-page .schedule-table.schedule-table-blue td:nth-child(2){
    padding-top: 0 !important;
    color: rgba(0,0,0,.72);
  }
}

/* -------------------------
   Bottom notes box spacing
   ------------------------- */
.holiday-page .schedule-box-body .schedule-text{
  margin-top: 0 !important;
}

.holiday-page .schedule-box-body .schedule-text > p:first-child{
  margin-top: 0;
}
.holiday-page a[href^="tel:"]{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* =========================
   ARS: Global call button (use everywhere)
   ========================= */
a.ars-call-btn,
.btn.ars-call-btn{
  background: rgba(37, 61, 121, .85);
  border-color: rgba(37, 61, 121, .85);
  color: #fff !important;

  padding: 10px 16px;
  font-weight: 700;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;   /* keep phone number together */
  text-decoration: none; /* kill underline if any */
}

a.ars-call-btn:hover,
a.ars-call-btn:focus,
.btn.ars-call-btn:hover,
.btn.ars-call-btn:focus{
  background: #274075;
  border-color: #274075;
  color: #fff !important;
}

a.ars-call-btn:active,
a.ars-call-btn.active,
.btn.ars-call-btn:active,
.btn.ars-call-btn.active{
  background: #20365f;
  border-color: #20365f;
  color: #fff !important;
}
/* =========================
   INDEX: Testimonials slider — stop height jumping + tighten dot gap
   ========================= */

/* Make the slider wrapper act like a positioned card */
.testimonials-widget .bx-wrapper{
  position: relative;
  margin: 0;
}

/* Lock viewport height (no jumping) */
.testimonials-widget .bx-wrapper .bx-viewport{
  height: 300px !important;   /* desktop height */
  transition: none !important;
}

/* Each slide: reserve space for the dots at the bottom */
.testimonials-widget .testimonial{
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 0 44px; /* bottom = dot gutter */
}

/* Tight internal spacing */
.testimonials-widget .testimonial-author{
  margin: 0 0 10px 0;
}
.testimonials-widget .testimonial-description{
  margin: 0;
}

/* Pull the dots up closer to the content */
.testimonials-widget .bx-wrapper .bx-pager{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Phones need more room */
@media (max-width: 575px){
  .testimonials-widget .bx-wrapper .bx-viewport{ height: 360px !important; }
  .testimonials-widget .testimonial{ height: 360px; }
}

/* Testimonials: make author name larger + add space before comment */
.testimonials-widget .testimonial-author{
  font-size: 18px;     /* bigger name */
  line-height: 1.2;
  font-weight: 800;    /* keep it punchy */
  margin: 0 0 16px 0;  /* more space under the name */
}

.testimonials-widget .testimonial-description{
  margin: 30px;           /* keep comment tight to its own block */
}

/* Service Area preview: <=446px — center BOTH buttons + same max width so edges line up */
@media (max-width: 446px){

  /* Center everything in the RIGHT column (where the buttons live) */
  #serviceAreaPreview .ars-portfolio-card .row > div:last-child{
    text-align: center;
  }

  /* Make both buttons share the same max width, but shrink on small screens */
  #serviceAreaPreview .ars-portfolio-card .row > div:last-child a.btn{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;           /* shrink with the card */
    max-width: 260px;      /* still keeps them lined up */
    box-sizing: border-box;

    margin: 0 auto 10px;   /* centered + spacing */
  }

  /* Kill the inline margin-right on the primary button */
  #serviceAreaPreview .ars-portfolio-card .row > div:last-child a.btn.btn-primary{
    margin-right: auto !important;
  }

  /* No extra gap after the last button */
  #serviceAreaPreview .ars-portfolio-card .row > div:last-child a.btn:last-of-type{
    margin-bottom: 0;
  }
}
/* =========================
   HOME: Testimonials — small phones (<460px)
   Goal: keep 460px exactly as-is, but give MORE height below 460
   so long comments don’t clip into/behind the dots.
   ========================= */
@media (max-width: 459px){

  /* TUNING KNOB (gap control):
     Lowering this pulls the dots closer to the text.
     If a long comment clips again, bump this up a bit. */
  .testimonials-widget .bx-wrapper .bx-viewport{
    height: 460px !important;     /* was 520px */
  }

  /* Keep slide height in sync with the viewport */
  .testimonials-widget .testimonial{
    height: 460px;                /* was 520px */
    padding: 16px 0 18px;         /* slightly tighter bottom padding */
  }

  /* Restore spacing under customer name (it's a <span>, so make it inline-block) */
  .testimonials-widget .testimonial-author{
    display: inline-block;
    margin-bottom: 16px;
  }

  /* Tighten side margins only here */
  .testimonials-widget .testimonial-description{
    margin: 0 18px;
  }

  /* Dots below content (no overlap) */
  .testimonials-widget .bx-wrapper .bx-pager{
    position: static !important;
    margin-top: 6px !important;   /* was 10px */
    padding-top: 0 !important;
  }

  .testimonials-widget .bx-wrapper{
    padding-bottom: 0 !important;
  }

}
.founders-portfolio-card{

}
/* =========================
   INDEX: Founders section (#blogPosts)
   (moved from inline styles)
   ========================= */

/* from: <section id="blogPosts" ... style="background-position: 80% 118px;"> */
#blogPosts.parallax{
  background-position: 80% 118px;
}

/* from: .section-header style="padding-bottom: 30px;" */
#blogPosts .section-header{
  padding-bottom: 30px;
}

/* from: .founders-portfolio-card style="padding-bottom: 60px; margin-left:auto; margin-right:auto;" */
#blogPosts .founders-portfolio-card{
  padding-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}

/* from: inner .row style="display:flex; flex-wrap:wrap; align-items:center;" */
#blogPosts .founders-portfolio-card > .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* from: photo column style="margin-bottom: 16px;" */
#blogPosts .founders-portfolio-card .col-md-5.col-sm-5{
  margin-bottom: 16px;
}

/* from: IMG inline style */
#blogPosts .founders-portfolio-card img.img-responsive{
  width: 100%;
  height: auto;
  border-radius: 14px;

  /* CHANGED per your request: white border like the old icon circles */
  border: 5px solid rgba(255,255,255,.92);

  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* from: H2 inline style */
#blogPosts .founders-portfolio-card h2{
  margin-top: 0;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 900;
}

/* from: P inline styles */
#blogPosts .founders-portfolio-card p{
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}

#blogPosts .founders-portfolio-card p:first-of-type{
  margin-bottom: 12px;
}

#blogPosts .founders-portfolio-card p:last-of-type{
  margin-bottom: 0;
}