:root {
     --primary-color: #d32f2f;
     /* Racing Red */
     --dark-color: #333;
     --light-bg: #f8f9fa;
  }

  body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #fff;
  }

  /* --- 1. HEADER & TOP BAR --- */
  .top-bar {
     background-color: #eee;
     font-size: 0.85rem;
     padding: 5px 0;
  }

  .main-header {
     padding: 20px 0;
     border-bottom: 1px solid #ddd;
     background: white;
     position: sticky;
     top: 0;
     z-index: 1020;
  }

  .search-group .form-control {
     border-radius: 0;
     border: 2px solid var(--primary-color);
  }

  .search-group .btn {
     background-color: var(--primary-color);
     color: white;
     border-radius: 0;
     padding-left: 20px;
     padding-right: 20px;
  }

  /* --- 2. DESKTOP SIDEBAR (HOVER FLYOUT) --- */
  .cat-header {
     background-color: var(--primary-color);
     color: white;
     padding: 15px;
     font-weight: bold;
     text-transform: uppercase;
  }

  .category-sidebar .dropdown-item {
     position: relative;
     padding: 12px 20px;
     border-bottom: 1px solid #eee;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: white;
  }

  .category-sidebar .dropdown-item:hover {
     background-color: #f8f9fa;
     color: var(--primary-color);
     cursor: pointer;
  }

  /* Hide sub-menus by default on Desktop */
  .category-sidebar .submenu {
     display: none;
     position: absolute;
     left: 100%;
     top: 0;
     width: 250px;
     background: white;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
     border: 1px solid #eee;
     list-style: none;
     padding: 0;
     z-index: 1000;
  }

  /* Show submenu on hover (Desktop Only) */
  .category-sidebar .has-submenu:hover>.submenu {
     display: block;
  }

  /* Arrow rotation on hover */
  .category-sidebar .has-submenu:hover>.dropdown-item i.fa-chevron-right {
     transform: rotate(90deg);
     transition: 0.2s;
  }

  /* --- 3. MOBILE MENU STYLES --- */
  /* Simple styling for the slide-out menu */
  .mobile-cat-link {
     display: block;
     padding: 12px 15px;
     border-bottom: 1px solid #eee;
     text-decoration: none;
     color: #333;
     font-weight: 500;
     display: flex;
     justify-content: space-between;
     align-items: center;
  }

  .mobile-cat-link:hover {
     background-color: #f1f1f1;
     color: var(--primary-color);
  }

  .mobile-sub-menu {
     background-color: #f9f9f9;
     padding-left: 15px;
     /* Indent sub items */
     font-size: 0.95rem;
  }

  .mobile-sub-sub-menu {
     background-color: #f1f1f1;
     padding-left: 15px;
     /* Indent sub-sub items */
     font-size: 0.9rem;
  }

  /* --- 4. PRODUCT CARDS --- */
  .product-card {
     border: 1px solid #eee;
     transition: 0.3s;
     background: white;
     margin-bottom: 20px;
  }

  .product-card:hover {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-color: var(--primary-color);
  }

  .product-img {
     height: 200px;
     object-fit: contain;
     padding: 20px;
  }

  .product-details {
     padding: 15px;
     text-align: center;
  }

  .product-title {
     font-size: 1rem;
     font-weight: 600;
     color: #333;
     min-height: 48px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
  }

  .price {
     color: var(--primary-color);
     font-size: 1.2rem;
     font-weight: bold;
     display: block;
     margin: 10px 0;
  }


 

  /* --- FOOTER STYLES --- */
  footer {
     background-color: #222;
     color: #bbb;
     font-size: 0.9rem;
  }

  footer h5 {
     color: white;
     font-weight: 700;
     margin-bottom: 20px;
     text-transform: uppercase;
     font-size: 1rem;
  }

  footer ul {
     padding: 0;
     list-style: none;
  }

  footer ul li {
     margin-bottom: 10px;
  }

  footer a {
     color: #bbb;
     text-decoration: none;
     transition: 0.2s;
  }

  footer a:hover {
     color: var(--primary-color);
     padding-left: 5px;
     /* Slight slide effect */
  }

  .footer-bottom {
     background-color: #111;
     padding: 20px 0;
     font-size: 0.85rem;
  }

  .social-btn {
     width: 35px;
     height: 35px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #333;
     color: white;
     border-radius: 50%;
     margin-right: 5px;
     transition: 0.3s;
     text-decoration: none;
  }

  .social-btn:hover {
     background: var(--primary-color);
     color: white;
  }




  .breadcrumb-item a {
    color: #666;
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--primary-color); /* Matches your brand */
    font-weight: 600;
}



.service-card {
    padding: 20px 10px;
    text-align: center;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #444; /* Subtle border for dark cards */
    height: 100%; /* Ensure equal height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-5px); /* Lift up effect */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    background-color: var(--primary-color) !important; /* Turn red on hover */
}

/* Ensure icons turn white on hover if they were red */
.service-card:hover i {
    color: white !important;
}