/* ==========================================================
   GLOBAL VARIABLES & RESET
   ========================================================== */
:root {
  --yellow: #f5c518;
  --dark: #000;
  --light: #fff;
  --light-bg: #f4f5f7;
  --light-card: #fcfcfc;
  --text-main: #222;
  --border-light: #e0e0e0;
}

/* ==========================================================
   Light Mode Styles
   ========================================================== */
body.light-mode {
  background-color: #f4f5f7;
  color: #222;
  --yellow: #e0a800; /* Darker yellow for better visibility on light backgrounds */

}

/* Main containers */
body.light-mode .top-bar,
body.light-mode .main-navbar,
body.light-mode .services-listing-section,
body.light-mode .contact-section,
body.light-mode .reviews-section,
body.light-mode footer {
  background-color: #fdfdfd;
  color: #222;
  border-color: #e0e0e0;
}

/* Hero section */
body.light-mode .hero-section {
  background-color: #f1f2f4 !important;
}

body.light-mode .hero-content {
  background-color: rgba(253, 253, 253, 0.55);
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

/* Navbar links */
body.light-mode a,
body.light-mode .nav-link {
  color: #222 !important;
}

/* Light Mode: Navbar Styling */
body.light-mode .main-navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* LIGHT MODE: Mobile Bottom Navigation Styles  */

body.light-mode .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.95); /* Light frosted glass look */
  backdrop-filter: blur(10px); /* Smooth blur for elevation */
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); /* Gentle elevation */
}

body.light-mode .mobile-bottom-nav .nav-btn {
  color: #333;
  transition: color 0.3s ease;
}

body.light-mode .mobile-bottom-nav .nav-btn i {
  font-size: 1.2rem;
  margin-bottom: 2px;
  color: var(--yellow); /* Icon stays branded yellow */
}

body.light-mode .mobile-bottom-nav .nav-btn span {
  color: #333;
}

body.light-mode .mobile-bottom-nav .nav-btn.active i,
body.light-mode .mobile-bottom-nav .nav-btn.active span {
  color: var(--yellow); /* Highlighted tab stays consistent */
}


/* Icons inside mobile nav */
body.light-mode .mobile-bottom-nav .nav-btn i {
  color: var(--yellow);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Light shadow for depth */
}

/* Label text under icons */
body.light-mode .mobile-bottom-nav .nav-btn span {
  color: #111;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.1); /* Subtle shadow to help readability */
}

/* Active state highlight stays consistent */
body.light-mode .mobile-bottom-nav .nav-btn.active i,
body.light-mode .mobile-bottom-nav .nav-btn.active span {
  color: var(--yellow);
}


/* Brand color can stay yellow or go black */
body.light-mode .navbar-brand {
  color: #000;
}

/* Mobile Toggler Button */
body.light-mode .navbar-toggler {
  background-color: #00000015;
}

body.light-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.85%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Nav Links */
body.light-mode .navbar-nav .nav-link {
  color: #111;
  text-shadow: none;
}

body.light-mode .navbar-nav .nav-link:hover {
  background-color: #eee;
  color: #000;
  border-radius: 5px;
}

/* Mobile Menu */
@media (max-width: 991.98px) {
  /* Mobile menu background in light mode */
  body.light-mode .navbar-collapse {
    background-color: #ffffff !important;
    color: #111 !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }

  /* Nav links inside mobile menu */
  body.light-mode .navbar-collapse .nav-link {
    color: #111 !important;
    font-weight: 600;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    text-shadow: none !important;
  }

  /* On hover */
  body.light-mode .navbar-collapse .nav-link:hover {
    background-color: #f2f2f2 !important;
    color: #000 !important;
  }

  /* Optional: fix close icon (X) if needed */
  body.light-mode .navbar-toggler:focus,
  body.light-mode .navbar-toggler:active {
    outline: none;
    box-shadow: none;
  }
}

/* Buttons */
body.light-mode .btn {
  background-color: var(--yellow);
  color: #000;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  border-radius: 40px;
  /* Make sure this matches your dark mode */
  padding: 0.75rem 2rem;
  /* Same padding for consistency */
  font-weight: 600;
}

/* cta-buttons */
body.light-mode .cta-buttons .btn.cta-fix {
  background-color: var(--yellow) !important;
  color: #000 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}

body.light-mode .cta-buttons .btn.cta-fix:hover {
  background-color: #e0a800 !important;
  color: #000 !important;
}

/* About section */
body.light-mode .about-section {
  background: linear-gradient(135deg, #ffffff 55%, #f6f7f8 45%);
  color: #222;
}

body.light-mode .step {
  background: #ffffff;
  color: #111;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .why-list li {
  background-color: #ffffff;
  color: #111;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
}

body.light-mode .btn:hover {
  background-color: #e3b600;
  color: #fff;
}

/* Services section */
body.light-mode .services-listing-section {
  background-color: #f5f5f5;
}

body.light-mode .service-card {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
}

body.light-mode .service-card h3 {
  color: #111;
}

body.light-mode .service-card p {
  color: #333;
}

body.light-mode .service-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* FAQ section */

body.light-mode .faq-section {
  background-color: #f9f9f9;
  color: #111;
}

body.light-mode .faq-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

body.light-mode .faq-item:hover {
  border-color: var(--yellow);
}

body.light-mode .faq-question {
  color: #111;
  background-color: transparent;
}

body.light-mode .faq-question::after {
  color: var(--yellow);
}

body.light-mode .faq-answer {
  background-color: #fdfdfd;
}

body.light-mode .faq-answer p {
  color: #333;
}

/* SVG Divider */
body.light-mode .svg-divider {
  background: #f0f2f5;
  /* Match light section backgrounds */
}

body.light-mode .svg-divider svg path {
  fill: #f0f2f5;
  /* Match or soften the SVG wave color */
}

/* Reviews section */
body.light-mode .reviews-section {
  background: linear-gradient(to bottom, #f0f2f5 60%, #e5e7ea);
  color: #111;
}

body.light-mode .reviews-section .section-heading {
  color: #ffc107;
}

body.light-mode .review-card {
  background: #ffffff;
  color: #222;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid #ddd;
  backdrop-filter: blur(2px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body.light-mode .review-card.center {
  background: #fafafa;
  border-color: #ccc;
}

body.light-mode .review-text {
  color: #444;
  font-style: normal;
}

body.light-mode .review-stars {
  color: var(--yellow);
  font-size: 1.3rem;
}

body.light-mode .review-author {
  color: #ffc107;
  font-weight: 600;
}

/* Dim logos slightly for better contrast 
body.light-mode .review-platform-logo {
  filter: brightness(0.3);
}*/

/* Optional: Add subtle lift on hover 
body.light-mode .review-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}*/

/* Inputs and forms */
body.light-mode input,
body.light-mode textarea {
  background-color: #ffffff;
  color: #000;
  border: 1px solid #ddd;
  border-radius: 6px;
}

body.light-mode input:focus,
body.light-mode textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
}

/* Accordion */
body.light-mode .accordion-button {
  background-color: #f8f9fa;
  color: #222;
  border: 1px solid #e0e0e0;
  border-radius: 8px !important;
  margin-bottom: 12px;
}

body.light-mode .accordion-button:not(.collapsed) {
  background-color: var(--yellow);
  color: #111;
}

/* Contact section */
body.light-mode .contact-section {
  background-color: #f9f9fb;
  color: #000;
}

body.light-mode .info-card {
  background-color: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode .contact-details {
  color: #333;
}

body.light-mode .contact-details a {
  color: #222;
  text-decoration: underline;
}

body.light-mode .hours {
  background-color: #f1f1f3;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.light-mode .hours ul {
  color: #333;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
}

body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus {
  border-color: var(--yellow);
}

body.light-mode .contact-form button {
  background-color: var(--yellow);
  color: #000;
}

/* Footer */
body.light-mode footer {
  background-color: #f6f7f8;
  color: #333;
  border-top: 1px solid #e0e0e0;
}

/* ==========================================================
   Toggle Button Styles
   ========================================================== */
.theme-toggle-icon {
  background-color: var(--yellow);
  border: none;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.theme-toggle-icon:hover {
  background-color: #e3b600;
  transform: rotate(15deg);
}

.theme-toggle-icon i {
  font-size: 1.1rem;
  transition: transform 0.4s ease;
  color: #000;
}

/* Reset and base styles */
body {
  margin: 0;
  background-color: var(--dark);
  color: var(--light);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================
   TOP ACTION BAR (Estimate, Appointment, Call)
   ========================================================== */
.top-bar {
  background-color: #fff;
  color: var(--dark);
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1030;
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease;
}

.top-bar-right {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex: 1;
  max-width: 1000px;
}

/* Fix mobile navigation click issues */
@media (max-width: 991px) {
  .top-bar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background-color: #fff;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .top-bar-right a {
    color: #333 !important;
  }

  .main-navbar {
    top: 44px !important;
  }
}

.top-bar-right a {
  text-decoration: none;
  font-weight: 500;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}

.top-bar-right a:hover {
  color: var(--yellow);
}

.top-bar-right .icon-text {
  display: none;
}

.top-bar-right .icon-text-full {
  display: inline;
}

@media (max-width: 768px) {
  .top-bar-right {
    gap: 1.5rem;
    padding: 0.3rem;
    flex-wrap: wrap;
  }

  .top-bar-right .icon-text {
    display: inline;
  }

  .top-bar-right .icon-text-full {
    display: none;
  }
}

@media (max-width: 360px) {
  .top-bar-right a {
    gap: 0.5rem;
    font-size: 12px;
  }
}
/* ==========================================================
   MAIN NAVIGATION BAR
   ========================================================== */
.main-navbar {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 35px;
  width: 100%;
  z-index: 1040;
  padding: 0.3rem 0;
  transition: top 0.3s ease;
}

/* Ensure mobile navigation toggle is always clickable */
.navbar-toggler {
  z-index: 1050 !important;
  position: relative;
  pointer-events: auto !important;
}

/* Fix mobile navigation button accessibility */
@media (max-width: 991px) {
  .navbar-toggler {
    z-index: 1050 !important;
    position: relative;
    pointer-events: auto !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.5) !important;
  }
}

.navbar-brand {
  font-weight: bold;
  color: var(--yellow);
  font-size: 1.2rem;
  white-space: nowrap;
}

.navbar-toggler {
  background-color: #ffffff33;
  border-radius: 4px;
  padding: 6px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-collapse {
  padding: 1rem;
  justify-content: flex-end;
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.navbar-nav .nav-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--yellow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: background-color 0.2s, color 0.2s;
}

.navbar-nav .nav-link:hover {
  background-color: #222;
  color: #fff;
  border-radius: 5px;
}

/* ==========================================================
   HERO SECTION
   ========================================================== */
.hero-section {
  position: relative;
  background: url("../img/hero.jpg") no-repeat center center / cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 2rem 10rem;
}

.hero-content {
  background-color: rgba(0, 0, 0, 0.55);
  padding: 2rem;
  max-width: 700px;
  margin-top: 1rem;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.1rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.hero-content span {
  color: var(--yellow);
  font-weight: 600;
}
@media (max-width: 768px) {
  .hero-section {
    padding: 5rem 1rem 4rem;
  }
}

/* ==========================================================
   CALL TO ACTION BUTTONS - DESKTOP ONLY
   ========================================================== */
.cta-buttons {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  z-index: 9;
  max-width: 900px;
  margin: 0 auto;
}

.cta-buttons .btn {
  background-color: var(--yellow);
  color: #000;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 40px;
  min-width: 180px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, color 0.3s;
}

.cta-buttons .btn:hover {
  background-color: #d4a307;
  color: #fff;
}

/* Button responsiveness */
@media (max-width: 768px) {
  .cta-buttons .btn {
    width: 90%;
    max-width: 300px;
    margin-bottom: 0.6rem;
  }
}

/* ==========================================================
   MOBILE NAV OVERLAY (Fullscreen menu) - SMOOTH ANIMATIONS
   ========================================================== */
@media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.97);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    z-index: 1060;
    visibility: hidden;
    will-change: transform;
  }

  .navbar-collapse.collapsing {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s,
      height 0s;
    /* Disable Bootstrap's height animation */
    height: 100vh !important;
  }

  .navbar-collapse.show {
    transform: translateX(0);
    visibility: visible;
  }

  .navbar-nav {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
    padding-top: 20px;
  }

  .main-navbar {
    top: 47px;
  }
  .navbar-collapse.show .navbar-nav {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-link {
    font-size: 1.5rem !important;
    font-weight: bold;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .navbar-collapse .btn-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background-color: #fff;
    border-radius: 50%;
    padding: 0.5rem;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
  }

  .navbar-collapse.show .btn-close {
    opacity: 1;
    transform: scale(1);
  }

  /* Smooth toggler icon animation */
  .navbar-toggler {
    transition: transform 0.2s ease;
  }

  .navbar-toggler:active {
    transform: scale(0.95);
  }

  .navbar-toggler-icon {
    transition: opacity 0.2s ease;
  }
}
@media (max-width: 360px) {
  .main-navbar {
    top: 41px;
  }
}

/* ==========================================================
   PREVENT BODY GAP ON MOBILE NAV OPEN
   ========================================================== */
@media (max-width: 991px) {
  body.offcanvas-open {
    overflow: hidden;
    padding-top: 0 !important;
  }
}

/* ==========================================================
   VISIBILITY UTILITIES (Desktop / Mobile)
   ========================================================== */

/* Desktop only */
@media (min-width: 992px) {
  .desktop-only {
    display: flex !important;
  }

  .mobile-only {
    display: none !important;
  }
}

/* Mobile only */
@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }
}

/* ==========================================================
   MOBILE BOTTOM NAVIGATION (App-style CTA)
   ========================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(15, 15, 15, 0.95); /* Slightly transparent dark background */
  backdrop-filter: blur(8px); /* Subtle blur for modern effect */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4); /* Shadow to separate from content */
}

.mobile-bottom-nav .nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ccc;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-bottom-nav .nav-btn i {
  font-size: 1.2rem;
  margin-bottom: 2px;
  color: var(--yellow);
}

.mobile-bottom-nav .nav-btn span {
  color: #ccc;
}

.mobile-bottom-nav .nav-btn.active i,
.mobile-bottom-nav .nav-btn.active span {
  color: var(--yellow);
}

/* ==============================================
   ABOUT SECTION STYLING (Updated for Mobile + Enhancements)
============================================== */
.about-section {
  background: linear-gradient(135deg, #0a0a0a 55%, #111 45%);
  color: #fff;
  padding: 5rem 2rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.about-text h2 {
  color: var(--yellow);
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .about-section {
    padding: 5rem 1rem;
  }
}

/* Limit text width on large screens for readability */
.about-text p.lead {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.about-text h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

/* WHY CHOOSE US: Cards */
.why-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.why-list li {
  background-color: #111;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.why-list li:hover {
  background-color: #1c1c1c;
}

/* Icon hover animation */
.why-list li i {
  color: var(--yellow);
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.why-list li:hover i {
  transform: scale(1.2);
}

/* REPAIR PROCESS: Timeline */
.about-process h3 {
  margin-bottom: 1.5rem;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step {
  background: #1a1a1a;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

/* Soft glow around yellow step circles */
.step strong {
  background-color: var(--yellow);
  color: #000;
  border-radius: 50%;
  display: inline-block;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 0.9rem;
  margin-right: 1rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.5);
  /* subtle yellow glow */
}

/* Responsive layout for tablets and mobile */
@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-text,
  .about-process {
    text-align: center;
  }

  .why-list {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
}

@media (max-width: 576px) {
  .why-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .why-list li {
    font-size: 1rem;
    padding: 0.9rem 1rem;
    width: 100%;
    justify-content: center;
    text-align: left;
  }
}

/* ========================================
   Scroll Animation Base Styles
======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional delay classes */
.delay-1 {
  transition-delay: 0.2s;
}

.delay-2 {
  transition-delay: 0.4s;
}

.delay-3 {
  transition-delay: 0.6s;
}

/* ===============================
   SERVICES INTRO HERO STYLE (Updated with Scroll Effect)
================================= */
.services-intro-section {
  min-height: 300px;
  padding: 4rem 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0;
  /* spacing before next section */
}

.services-intro-section .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background: url("../img/service-bg.jpg") center center / cover no-repeat;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
  will-change: transform;
  z-index: 0;
}

.services-intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.services-intro-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 0 1rem;
}

.services-intro-content h2 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
  color: var(--yellow);
}

.services-intro-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #eee;
}

.services-intro-content h2.desktop-only,
.services-intro-content h2.mobile-only {
  justify-content: center;
  text-align: center;
  width: 100%;
}

@media (max-width: 768px) {
  .services-intro-section {
    padding: 3rem 1rem;
    min-height: 220px;
  }
}

/* ===============================
   SERVICE CARD STYLES – UPGRADED
================================= */
.services-listing-section {
  padding: 4rem 2rem;
  background-color: #0f0f0f;
}

.service-card {
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

.service-card .service-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.service-card h3 {
  font-size: 1.25rem;
  margin: 1rem 1rem 0.5rem;
  color: var(--yellow);
  text-align: center;
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ccc;
  padding: 0 1rem 1.2rem;
  flex-grow: 1;
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .services-listing-section {
    padding: 4rem 1rem;
  }
  .services-intro-content h2 {
    font-size: 2rem;
  }

  .services-intro-section {
    height: auto;
    padding: 3rem 1rem;
  }
}

/* ===============================
   FAQ Intro Parallax Section (Now Matched with Services)
================================= */
.faq-intro-section {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4rem 1rem;
  margin-bottom: 0;
  /* spacing before FAQ list */
}

.faq-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background-size: cover;
  background: url("../img/faq-bg.jpg") center center / cover no-repeat;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
  z-index: 0;
  will-change: transform;
}

.faq-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.faq-intro-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 1rem;
}

.faq-intro-content i {
  font-size: 2.5rem;
  color: var(--yellow);
  margin-bottom: 0.5rem;
  display: block;
}

.faq-intro-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--yellow);
}

.faq-intro-content p {
  font-size: 1.05rem;
  color: #eee;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .faq-intro-section {
    padding: 3rem 1rem;
    min-height: 220px;
  }

  .faq-intro-content h2 {
    font-size: 1.6rem;
  }

  .faq-intro-content i {
    font-size: 2rem;
  }
}

/* ===============================
   FAQ Accordion – UI Upgrade
================================= */
.faq-section {
  padding: 4rem 2rem;
  background-color: #0f0f0f;
  color: #fff;
}

.faq-item {
  background: #141414;
  border-radius: 8px;
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: border 0.3s ease;
  border: 1px solid transparent;
}

.faq-item:hover {
  border: 1px solid var(--yellow);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.2rem 1rem;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;

  /* NEW for layout */
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-icon {
  font-size: 1.25rem;
  color: var(--yellow);
  flex-shrink: 0;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--yellow);
  transition: transform 0.3s ease;
}

.faq-item.open .faq-question::after {
  transform: translateY(-50%) rotate(45deg);
  /* turns + into x */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: #1a1a1a;
}

.faq-item.open .faq-answer {
  max-height: 500px;
}

.faq-answer p {
  padding: 1rem 1.2rem;
  color: #ccc;
  line-height: 1.6;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .faq-section {
    padding: 4rem 1rem;
  }
}
/* ===============================
   SVG DIVIDER – Wave Style Between Sections
================================= */
.svg-divider {
  line-height: 0;
  /* Remove spacing around SVG */
  background: #0a0a0a;
  overflow: hidden;
}

.svg-divider svg {
  display: block;
  width: 100%;
  height: 80px;
  /* Adjust wave height as needed */
}

/* === Reviews Section === */
.reviews-section {
  background: #0d0d0d;
  padding: 5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* === Heading === */
.reviews-section .section-heading {
  font-size: 2rem;
  color: #ffc107;
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* ===============================
   Reviews Section Container
================================= */
.reviews-section {
  padding: 1rem 1rem 1rem;
  background: linear-gradient(to bottom, #0f0f0f 60%, #0a0a0a);
  color: #fff;
  text-align: center;
}

.reviews-section .section-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ===============================
   Carousel Container
================================= */
.reviews-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 320px;
  perspective: 1500px;
  gap: 1.5rem;
  max-width: 100%;
  overflow: hidden;
}

/* ===============================
   Base Review Card
================================= */
.review-card {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  width: 400px;
  max-width: 90vw;
  color: #ccc;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.6s ease-in-out;
  opacity: 0.3;
  transform: scale(0.85);
  z-index: 1;
  position: absolute;
}

/* ===============================
   Positioning States
================================= */
.review-card.left {
  transform: translateX(-110%) scale(0.85);
  opacity: 0.5;
  z-index: 1;
}

.review-card.center {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 3;
  background: #1e1e1e;
}

.review-card.right {
  transform: translateX(110%) scale(0.85);
  opacity: 0.5;
  z-index: 1;
}

/* ===============================
   Review Card Content
================================= */
.review-stars {
  font-size: 1.25rem;
  color: #ffc107;
  margin-bottom: 0.75rem;
}

.review-text {
  font-style: italic;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffc107;
  font-weight: 600;
  font-size: 0.95rem;
}

.review-platform-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-left: 0.5rem;
}

/* ===============================
   Responsive Styles
================================= */
@media (max-width: 768px) {
  .reviews-carousel {
    flex-direction: column;
    height: auto;
    gap: 1.5rem;
    perspective: none;
  }

  .review-card {
    position: static;
    transform: scale(1) !important;
    opacity: 1 !important;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  }

  .review-card.left,
  .review-card.right,
  .review-card.center {
    transform: none !important;
    opacity: 1 !important;
    position: static;
    z-index: auto;
  }
}

/* Default: Desktop heading shown */
.heading-desktop {
  display: inline;
}

.heading-mobile {
  display: none;
}

/* On mobile: show short version */
@media (max-width: 768px) {
  .heading-desktop {
    display: none;
  }

  .heading-mobile {
    display: inline;
  }
}

/* ===============================
   Contact Form
================================= */
.contact-section {
  background-color: #0f0f0f;
  color: #fff;
  padding: 4rem 2rem;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info,
.contact-form {
  flex: 1 1 400px;
}

@media (max-width: 768px) {
  .contact-section {
    background-color: #0f0f0f;
    color: #fff;
    padding: 4rem 1rem;
  }
}

/* Info Card Styling */
.info-card {
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 1.8rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.info-card h2 {
  color: var(--yellow);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  color: #ccc;
  font-size: 0.95rem;
}

.contact-details li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.contact-details a {
  color: var(--yellow);
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

.contact-map {
  margin-bottom: 1.5rem;
}

.contact-map iframe {
  border-radius: 8px;
  width: 100%;
  height: 220px;
  border: 0;
}

/* Business Hours */
.hours {
  background-color: #111;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hours h3 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: var(--yellow);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #ccc;
}

.hours li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

/* Contact Form Styling */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form h2 {
  color: var(--yellow);
  margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--yellow);
  outline: none;
}

.contact-form button {
  background-color: var(--yellow);
  color: #000;
  font-weight: bold;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #e0a800;
}

/* Responsive Stack */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }
}

/* ===============================
   Footer
================================= */
footer {
  background-color: #0a0a0a;
  color: #f1f1f1;
  padding: 3rem 1.5rem 1rem;
  font-family: "Segoe UI", sans-serif;
  border-top: 1px solid #222;
}

/* Responsive Stack */
@media (max-width: 768px) {
  footer {
    padding: 3rem 1rem 1rem;
  }
}

/* Footer layout for desktop */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Headings */
.footer-section h4 {
  font-size: 1.2rem;
  color: var(--yellow, #ffc107);
  margin-bottom: 1rem;
}

/* Paragraphs and list items */
.footer-section p,
.footer-section li {
  color: #777777;
  font-size: 0.95rem;
  margin: 0.3rem 0;
}

/* Links */
.footer-section a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: var(--yellow, #ffc107);
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.social-icons a {
  color: #f1f1f1;
  font-size: 1.3rem;
  transition: color 0.2s ease;
}

.social-icons a:hover {
  color: var(--yellow, #ffc107);
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #222;
  font-size: 0.9rem;
  color: #aaa;
}

.footer-bottom .site-by a {
  color: var(--yellow, #ffc107);
  font-weight: bold;
  text-decoration: none;
}

.footer-bottom .site-by a:hover {
  text-decoration: underline;
}

/* ========== MOBILE FIXES ========== */
@media (max-width: 768px) {
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }

  .footer-section {
    max-width: 400px;
    width: 100%;
  }

  /* ✅ Mobile: Vertical Quick Links (Clean Listing) */
  .footer-section.links ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-section.links ul li::before {
    content: none;
    /* Removes bullet dots */
  }

  .social-icons {
    justify-content: center;
  }

  .footer-bottom p,
  .footer-bottom .site-by {
    text-align: center;
  }
}

/* ===============================
   GPU Compositing Fix for Mobile Flinch
   =============================== */
.background-image,
.faq-background-image,
.mobile-bottom-nav,
.top-bar,
.main-navbar {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Mobile-specific scroll optimizations */
@media (max-width: 768px) {
  .background-image,
  .faq-background-image {
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.2s ease-out;
  }

  .services-intro-section .background-image,
  .faq-intro-section .faq-background-image {
    transform: translateZ(0);
    transition: transform 0.2s ease-out;
  }
}

/* ===============================
   Disable Scroll Chaining / Overscroll Bounce (Mobile)
   =============================== */
html,
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* smooth momentum scroll on iOS */
}

/* Show top bar on all devices */
@media (min-width: 992px) {
  .top-bar {
    display: flex !important;
  }
}

/* Mobile scroll performance optimizations */
@media (max-width: 768px) {
  html,
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    scroll-behavior: smooth;
  }

  /* Reduce animations on mobile for better performance */
  .animate-on-scroll {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }

  /* Disable hover effects on mobile */
  .service-card:hover,
  .why-list li:hover,
  .review-card:hover {
    transform: none;
    box-shadow: inherit;
  }

  /* Optimize service card animations */
  .service-card {
    transition: none;
  }

  /* Reduce transform operations on mobile */
  .navbar-collapse {
    transition: transform 0.2s ease;
  }
}

/* ===============================
   AUTO INSURANCE PARTNERS SECTION
================================= */
.insurance-partners-section {
  background: linear-gradient(to bottom, #0f0f0f 60%, #0a0a0a);
  color: #fff;
  padding: 5rem 1rem;
  overflow: hidden;
}

.insurance-partners-section .partners-heading {
  font-size: 2rem;
  color: var(--yellow);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.insurance-partners-section .partners-subtext {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.partners-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.carousel-track {
  display: flex;
  gap: 3rem;
  animation: scrollPartners 25s linear infinite;
  align-items: center;
}

.carousel-track img {
  height: 60px;
  filter: brightness(0.9);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.carousel-track img:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

@keyframes scrollPartners {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Light Mode Support */
body.light-mode .insurance-partners-section {
  background: linear-gradient(to bottom, #f7f7f8 60%, #ececec);
  color: #111;
}

body.light-mode .insurance-partners-section .partners-heading {
  color: var(--yellow);
}

body.light-mode .insurance-partners-section .partners-subtext {
  color: #333;
}

body.light-mode .carousel-track img {
  filter: brightness(1);
}


/* ================================
   Scroll-To-Top Button
================================ */
.scroll-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--yellow);
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
  z-index: 2000;
}

.scroll-top-btn:hover {
  background-color: #e3b600;
  transform: translateY(-4px);
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
}