/* B&B Industries — custom styles
   ========================================================================== */
html:not(.sticky-header-active)
  #header.bb-header-dark-translucent.header-transparent
  .header-body,
html.sticky-header-active #header.bb-header-dark-translucent .header-body {
  background-color: rgba(33, 37, 41, 0.8) !important;
}

#header.bb-header-dark-translucent .header-top {
  background-color: transparent !important;
}

.header-social-icons.social-icons-clean li a {
  color: #c8c8c8 !important;
}

.header-social-icons.social-icons-clean li:hover a {
  color: #fff !important;
}

/* Active nav item inside a dropdown: the link gets the "active" class but its
   background is cleared to transparent, so color the text in the brand color
   (and bold it) to make the current page clearly visible in the menu. */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a.active {
  color: var(--primary);
  font-weight: 600;
}

.home-intro {
  margin-bottom: 0;
}

.home-intro p {
  font-size: 1.7em;
}

.home-intro p span:not(.highlighted-word) {
  display: inline;
  font-size: inherit;
  opacity: 1;
}

section.section.section-height-3.home-services-section {
  padding-bottom: 125px;
}

/* Footer business hours: fixed day column + aligned time column */
#footer .footer-hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .footer-hours li {
  display: flex;
  align-items: baseline;
  column-gap: 0;
  margin-bottom: 0;
}
#footer .footer-hours .footer-day {
  flex: 0 0 6rem;
}

/* Google brand-color hover for the .social-icons-google icon */
.social-icons li:hover.social-icons-google a {
  background: #dd4b39 !important;
}

.home-section {
  padding: 60px 0;
}

.services-divider {
  margin: 60px 0;
}

/* Responsive breakpoints (mobile-first, matching Bootstrap 5 grid)
   ========================================================================== */

/* Small devices and up (≥576px) — phones in landscape */
@media (min-width: 576px) {
}

/* Medium devices and up (≥768px) — tablets */
@media (min-width: 768px) {
  .home-section {
    padding: 80px 0;
  }

  .featured-boxes-modern-style-1 .featured-box {
    min-height: 253px !important;
  }
}

/* Large devices and up (≥992px) — desktops */
@media (min-width: 992px) {
  .featured-boxes-modern-style-1 .featured-box {
    min-height: 221px !important;
  }
}

/* Extra large devices and up (≥1200px) — large desktops */
@media (min-width: 1200px) {
  .home-section {
    padding: 110px 0;
  }

  .services-divider {
    margin: 110px 0;
  }
}

/* Extra extra large devices and up (≥1400px) */
@media (min-width: 1400px) {
}

/* Custom Rotator page
   ========================================================================== */
/* Shared page-header band (internal pages only) */
.bb-page-header-bar {
  background-color: var(--primary);
  padding: 2.5rem 0;
}
.bb-page-header-bar h4 {
  color: #fff;
  line-height: 1.2;
}

/* Black gradient button (mirrors btn-gradient-primary) */
.btn-gradient-dark:not(.btn-outline) {
  background: linear-gradient(135deg, #2b2b2b 0%, #000 80%) !important;
  color: #fff;
}
.btn-gradient-dark:not(.btn-outline):hover,
.btn-gradient-dark:not(.btn-outline).hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #111 80%) !important;
  color: #fff;
}

/* Principle cards (Legacy Series) */
.bb-principle-card {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
.bb-principle-card h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Spec cards */
.bb-spec-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 1.6rem 1.5rem;
  height: 100%;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.bb-spec-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09);
  transform: translateY(-5px);
}
.bb-spec-card-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
}
.bb-spec-card-header h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Spec list — double-arrow marker icons */
.bb-spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-spec-list li {
  margin-bottom: 0.45rem;
  line-height: 1.4;
}
.bb-spec-list li:last-child {
  margin-bottom: 0;
}
.bb-spec-list li i {
  color: var(--primary);
  margin-right: 0.4rem;
}

/* Request-parts form (shared, internal pages)
   ========================================================================== */
.bb-form .form-control {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  padding: 0.7rem 0.9rem;
  height: auto;
  font-size: 0.95rem;
  color: #4a4a4a;
}
.bb-form .form-control::placeholder {
  color: #9a9a9a;
}
.bb-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(203, 32, 38, 0.12);
  color: #212529;
}
.bb-form textarea.form-control {
  min-height: 96px;
  resize: vertical;
}
/* Radio options inside the form (brand-colored when selected, like the inputs). */
.bb-form .form-check-label {
  color: #4a4a4a;
}
.bb-form .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.bb-form .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(203, 32, 38, 0.12);
}
/* Group label inside the form (e.g. TYPE OF VEHICLE, PARTS NEEDED) */
.bb-form-section-label {
  position: relative;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2d2d2d;
  margin: 0.75rem 0 1.2rem;
  padding-bottom: 0.55rem;
}
.bb-form-section-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--primary);
}
/* Form-result message color by outcome (set via bb-form-result-<status> on the
   .heading wrapper of the result page). */
.bb-form-result-success h1 {
  color: #198754;
}
.bb-form-result-failed h1 {
  color: #dc3545;
}
.bb-form-result-warning h1 {
  color: #e8590c;
}

/* Image gallery (shared, internal pages)
   ========================================================================== */
/* Full-width wrapper: the gallery spans the viewport with balanced side
   gutters (the rest of the page sits in a centered .container). */
.bb-gallery-wrap {
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}

/* Masonry via CSS columns: column count scales with available width (2 up on
   phones, more as the viewport grows) and each image keeps its natural aspect
   ratio — no forced cropping. Pure CSS, no JS. */
.bb-gallery-grid {
  columns: 140px;
  column-gap: 1rem;
}
@media (min-width: 576px) {
  .bb-gallery-grid {
    columns: 180px;
  }
}
@media (min-width: 992px) {
  .bb-gallery-grid {
    columns: 200px;
  }
}

/* Thumbnail tiles: natural aspect ratio, generous gutters, subtle hover
   zoom + darken. break-inside: avoid keeps each tile in one column. The
   .lightbox wrapper (theme auto-init) handles click-to-enlarge. */
.bb-gallery .bb-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #e9e9e9;
  margin-bottom: 1rem;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bb-gallery .bb-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.bb-gallery .bb-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}
.bb-gallery .bb-gallery-item:hover img {
  transform: scale(1.06);
}
.bb-gallery .bb-gallery-item:hover::after {
  background: rgba(0, 0, 0, 0.18);
}

/* Contact info cards (shared, internal pages)
   ========================================================================== */
.bb-contact-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 2.2rem 1.5rem;
  height: 100%;
  text-align: center;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.bb-contact-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09);
  transform: translateY(-5px);
}
.bb-contact-card .bb-contact-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.5rem;
}
.bb-contact-card h4 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}
.bb-contact-card p {
  margin: 0;
  color: #555;
  line-height: 1.6;
}
.bb-contact-card a {
  color: #555;
  transition: color 0.2s ease;
}
.bb-contact-card a:hover {
  color: var(--primary);
}

/* Feature image: entrance animation + hover zoom + click-to-enlarge */
.bb-feature-img {
  position: relative;
  display: block;
  border-radius: 8px;
  text-align: center;
}
.bb-feature-img img {
  transition: transform 0.6s ease;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.bb-feature-img:hover img {
  transform: scale(1.06);
}