/* ===========================================================
   Shree Ram Automotive — brand override for the Autozox theme
   Re-colours the theme's default red/navy to the client's exact
   logo colours, and adds the floating call/WhatsApp buttons +
   mobile sticky bar (not part of the original theme).
   Brand: Navy #0A0F4D | Red #E2050C | Orange/Gold #F6A11C
=========================================================== */

:root{
  --sra-navy: #0a0f4d;
  --sra-navy-dark: #060a33;
  --sra-red: #e2050c;
  --sra-red-dark: #b90408;
  --sra-orange: #f6a11c;
}

/* ---- Recolour the theme's core red (#e81c2e) and navy (#00173c/#0c2957) ---- */
.header-top.second-header,
.slider-active,
.dp-dark-bg,
.footer-bg{ background-color: var(--sra-navy) !important; }

.top-btn,
.btn.ss-btn,
.services-icon-05,
a.ss-btn,
.faq-btn:not(.collapsed),
.services-box07:hover .icon,
.owl-theme .owl-dots .owl-dot.active span,
.section-title h5,
.services-content-05 span,
.copyright-wrap{ }

/* Buttons */
.btn.ss-btn{ background-color: var(--sra-red) !important; border-color: var(--sra-red) !important; }
.btn.ss-btn:hover{ background-color: var(--sra-red-dark) !important; border-color: var(--sra-red-dark) !important; }
.top-btn{ background-color: var(--sra-red) !important; }
.header-cta .icon,
.section-title h5,
.services-content-05 span{ color: var(--sra-red) !important; }

/* Links / accents that used the theme red */
a:hover, .faq-btn:hover{ color: var(--sra-red); }
.services-categories li.active a,
.services-categories li a:hover{ color: var(--sra-red) !important; }

/* Orange highlight utility (new, used sparingly for CTA emphasis) */
.sra-orange{ color: var(--sra-orange) !important; }
.sra-bg-orange{ background-color: var(--sra-orange) !important; color: var(--sra-navy-dark) !important; }
.btn.sra-btn-orange{ background-color: var(--sra-orange) !important; border-color: var(--sra-orange) !important; color: var(--sra-navy-dark) !important; }
.btn.sra-btn-orange:hover{ filter: brightness(.94); }

/* Hero slides now use real workshop photos (not the theme's pre-darkened
   demo backgrounds), so add a dark gradient overlay for text legibility. */
.slider-active .single-slider{ position: relative; }
.slider-active .single-slider::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(6,10,51,.85) 0%, rgba(6,10,51,.6) 45%, rgba(6,10,51,.3) 100%);
}
.slider-active .single-slider > .container{ position: relative; z-index: 2; }

/* Hero has 3 slides (Car Service / Car Wash / Denting & Painting); only the
   first slide's heading is a real <h1> (one per page, for SEO) — slides 2
   and 3 use the theme's original <h2>. These rules copy the theme's own
   .slider-content h2 cascade (style.css + responsive.css) onto h1 so all
   three slides render at an identical size at every screen width. */
.slider-content h1{ font-size:90px; letter-spacing:1.0px; line-height:1.2; margin-bottom:40px; color:#fff; font-family:'Rajdhani',sans-serif; }
@media (min-width: 1200px) and (max-width: 1500px){ .slider-content h1{ font-size:80px; } }
@media (min-width: 992px) and (max-width: 1200px){ .slider-content h1{ font-size:70px; } }
@media (min-width: 768px) and (max-width: 991px){ .slider-content h1{ font-size:48px; } }
@media (max-width: 767px){ .slider-content h1{ font-size:36px; } }
@media (min-width: 480px) and (max-width: 767px){ .slider-content h1{ font-size:32px; } }
.s-slider-content h1{ margin-bottom:25px; }

/* Breadcrumb heading now uses semantic <h1> (theme originally used <h2> here
   with no true <h1> anywhere on inner pages) — reapply the same visual style. */
.breadcrumb-title h1{ font-size:70px; margin-bottom:25px; line-height:1; color:#fff; letter-spacing:1px; }
@media (max-width: 767px){ .breadcrumb-title h1{ font-size:38px; } }
@media (min-width: 768px) and (max-width: 991px){ .breadcrumb-title h1{ font-size:50px; } }

/* Logo sizing (our logo's own aspect ratio differs slightly from the demo mark) */
.header-three .logo{ width: 190px; }
.header-three .logo img{ width: 100%; height: auto; }
@media (max-width: 767px){ .header-three .logo{ width: 150px; } }

/* Footer widget headings / links tidy-up */
.footer-widget .f-widget-title h2{ font-size: 18px; }
.footer-link ul li i{ color: var(--sra-orange); margin-right: 6px; width: 16px; text-align: center; }

/* Gallery grid: fixed 4/3/2-column layout with uniform square tiles.
   NOTE: isotope positions items with position:absolute, which breaks
   Bootstrap 5's flexbox row/col sizing — so plain percentage widths are
   used here instead (same approach the original theme used for its
   own portfolio grid). */
.sra-photo-grid{ position: relative; margin: 0 -15px; }
.sra-photo-grid .grid-item{ width: 25%; padding: 15px; box-sizing: border-box; }
@media (min-width: 576px) and (max-width: 991px){ .sra-photo-grid .grid-item{ width: 33.333%; } }
@media (max-width: 575px){ .sra-photo-grid .grid-item{ width: 50%; } }

/* Gallery filter buttons (isotope) use the same accent */
.filter-button-group button.active,
.filter-button-group button:hover{ background-color: var(--sra-red); color:#fff; border-color: var(--sra-red); }

/* Service sidebar CTA box tweak */
.service-detail-contact{ background-color: var(--sra-red) !important; }
.service-detail-contact a{ color:#fff !important; }

/* ===================== Floating Call + WhatsApp buttons ===================== */
.sra-float-btns{
  position: fixed; right: 20px; bottom: 90px; z-index: 999;
  display: flex; flex-direction: column; gap: 12px;
}
.sra-float-btn{
  width: 56px; height: 56px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: 24px; box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .2s ease;
}
.sra-float-btn:hover{ transform: scale(1.08); color:#fff; }
.sra-float-btn.sra-whatsapp{ background-color: #25D366; }
.sra-float-btn.sra-call{ background-color: var(--sra-red); }
/* On mobile the sticky bar below already provides Call/WhatsApp/Location,
   so hide the floating circular buttons there to avoid showing both. */
@media (max-width: 767px){
  .sra-float-btns{ display: none; }
}

/* ===================== Mobile sticky bar ===================== */
.sra-sticky-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: none;
  background: var(--sra-navy); box-shadow: 0 -6px 18px rgba(0,0,0,.2);
}
.sra-sticky-bar a{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 13px; font-weight: 700; padding: 12px 4px; text-transform: uppercase;
}
.sra-sticky-bar .sra-sticky-call{ background: var(--sra-red); }
.sra-sticky-bar .sra-sticky-whatsapp{ background: #1fa855; }
.sra-sticky-bar .sra-sticky-location{ background: var(--sra-orange); color: var(--sra-navy-dark); }
@media (max-width: 767px){
  .sra-sticky-bar{ display: flex; }
  body{ padding-bottom: 52px; }
}

/* ===================== Small additions used on rebuilt pages ===================== */
.sra-check-list{ list-style:none; padding:0; margin:0 0 20px; }
.sra-check-list li{ position:relative; padding-left:28px; margin-bottom:10px; font-weight:500; }
.sra-check-list li:before{ content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900; color:#1ea855; position:absolute; left:0; top:1px; font-size:13px; }
.sra-notice{ background:#fff8e8; border:1px solid #f1d9a0; color:#7a5a05; padding:14px 18px; border-radius:8px; font-size:.9rem; margin-bottom:26px; }
.sra-avatar-circle{
  width:52px; height:52px; border-radius:50%; background: var(--sra-navy); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.sra-stars{ color: var(--sra-orange); letter-spacing:2px; }

/* Theme's own "back to top" (#scrollUp) sits bottom-right by default and
   collides with our floating Call/WhatsApp buttons / mobile sticky bar —
   move it to the opposite side so nothing overlaps. */
#scrollUp{ right: auto !important; left: 20px !important; bottom: 20px !important; }
@media (max-width: 767px){
  #scrollUp{ left: 14px !important; bottom: 62px !important; }
}