:root {
         --primary-navy: #0B2B56;
         --primary-navy-hover: #113f7a;
         --accent-red: #C8102E;
         --accent-red-hover: #a30b24;
         --bg-light: #f8f9fa;
     }

     body {
         font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }

     /* Top Header */
     .top-header {
         background-color: var(--primary-navy);
         color: white;
         font-size: 0.9rem;
     }

     .top-header a {
         color: white;
         text-decoration: none;
         transition: opacity 0.3s;
     }

     .top-header a:hover {
         opacity: 0.8;
     }

     /* Navbar */
     .navbar {
         background-color: white;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }

     .navbar-brand img {
         max-height: 50px;
     }

     .nav-link {
         font-weight: 500;
         color: var(--primary-navy) !important;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 0.5rem 1rem !important;
         transition: color 0.3s;
     }

     .nav-link:hover {
         color: var(--accent-red) !important;
     }

     /* Buttons */
     .btn-accent {
         background-color: var(--accent-red);
         color: white;
         font-weight: 600;
         padding: 0.5rem 1.5rem;
         border-radius: 4px;
         transition: background-color 0.3s;
     }

     .btn-accent:hover {
         background-color: var(--accent-red-hover);
         color: white;
     }

     .btn-outline-primary {
         border-color: var(--primary-navy);
         color: var(--primary-navy);
     }

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

     /* Footer */
     .footer {
         background-color: var(--primary-navy);
         color: white;
         margin-top: auto;
     }
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(26 43 83) !important;
}
.text-primary {
    --bs-text-opacity: 1;
    color:  rgb(26 43 83)!important;
}
     .footer a {
         color: rgba(255, 255, 255, 0.8);
         text-decoration: none;
         transition: color 0.3s;
     }

     .footer a:hover {
         color: white;
         text-decoration: underline;
     }

     .footer-bottom {
         background-color: #061a35;
     }

     /* Utilities */
     .text-accent {
         color: var(--accent-red) !important;
     }

     .text-navy {
         color: var(--primary-navy) !important;
     }

     .bg-navy {
         background-color: var(--primary-navy) !important;
     }

     .bg-light-gray {
         background-color: var(--bg-light);
     }

     /* Scoped styles for the home page */
     .hero-carousel {
         height: 70vh;
         min-height: 500px;
         background-color: var(--primary-navy);
     }

     .hero-carousel .carousel-item {
         height: 100%;
     }

     .hero-carousel img {
         object-fit: cover;
         height: 100%;
         width: 100%;
         opacity: 0.6;
         /* Dim the image for text readability */
     }

     .hero-overlay {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         background: linear-gradient(to right, rgba(11, 43, 86, 0.95) 0%, rgba(11, 43, 86, 0.7) 50%, transparent 100%);
         z-index: 2;
     }

     .hero-title {
         font-weight: 800;
         font-size: 3.5rem;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     }

     /* Mobile Responsiveness for Hero Section */
     @media (max-width: 768px) {
         .hero-title {
             font-size: 2.2rem;
         }
         .hero-carousel {
             height: 85vh;
             min-height: 700px;
         }
         .hero-overlay {
             padding-top: 60px;
         }
     }

     .section-padding {
         padding: 5rem 0;
     }

     .inventory-card {
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: none;
         overflow: hidden;
     }

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

     .inventory-card img {
         height: 250px;
         object-fit: cover;
     }

     .icon-box {
         display: flex;
         align-items: center;
         gap: 15px;
     }

     .icon-box i {
         font-size: 2rem;
         color: var(--accent-red);
     }

     .about-img {
         border-radius: 10px;
         box-shadow: 12px 12px 0px var(--accent-red);
     }

     .btn-primary {
         --bs-btn-color: #fff;
         --bs-btn-bg: var(--accent-red);
         --bs-btn-hover-color: #fff;
         --bs-btn-border-color: var(--accent-red);
         --bs-btn-hover-bg: var(--accent-red);
         --bs-btn-focus-shadow-rgb: 49, 132, 253;
         --bs-btn-active-color: #fff;
         --bs-btn-active-bg: var(--accent-red-hover);
         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
         --bs-btn-disabled-color: #fff;
         --bs-btn-disabled-bg: #0d6efd;
         --bs-btn-disabled-border-color: #0d6efd;
     }

     /* =========================================
   INVENTORY PAGE STYLES
========================================= */

     /* Inventory Header Wrapper */
     .inventory-header-bg {
         background: linear-gradient(to right, var(--primary-navy), #061a35);
         border-bottom: 5px solid var(--accent-red);
     }

     /* Elevated Filter Card */
     .filter-card {
         border-top: 4px solid var(--accent-red);
         background-color: #ffffff40;
     }

     .filter-card .form-label {
         color: white;
     }

     /* Inventory Results Background Wrapper */
     .inventory-results-bg {
         background-color: var(--bg-light);
         padding-top: 80px;
         /* Offset the overlap */
     }

     /* Result Cards Component */
     .result-card {
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border-radius: 8px;
         background-color: #ffffff;
     }

     .result-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
     }

     .result-img {
         height: 240px;
         object-fit: cover;
         transition: transform 0.5s ease;
     }

     .result-card:hover .result-img {
         transform: scale(1.05);
     }

     .bg-accent {
         background-color: var(--accent-red) !important;
         color: white;
     }

     .btn-outline-accent {
         border: 2px solid var(--accent-red);
         color: var(--accent-red);
         transition: all 0.3s;
         background-color: transparent;
     }

     .btn-outline-accent:hover {
         background-color: var(--accent-red);
         color: white;
     }

/* =========================================
   VEHICLE DETAIL PAGE (VDP) STYLES
========================================= */

#vdpCarousel {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.vdp-main-img {
    height: 100%;
    object-fit: cover;
}

.vdp-thumbnail-wrapper {
    width: 80px;
    height: 60px;
    cursor: pointer;
}

.vdp-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.vdp-thumbnail:hover {
    border-color: var(--primary-navy);
}

.vdp-thumbnail.selected {
    border-color: var(--accent-red);
    box-shadow: 0 0 5px rgba(200, 16, 46, 0.5);
}