:root {

            --primary-color: #dc3545;

            --secondary-color: #212529;

            --accent-color: #ffc107;

            --text-light: #6c757d;

            --bg-light: #f8f9fa;

            --transition: all 0.3s ease;

        }

        

        [data-theme="dark"] {

            --bs-body-bg: #0a0a0a;

            --bs-body-color: #e0e0e0;

            --primary-color: #ff4458;

            --secondary-color: #1a1a1a;

            --accent-color: #ffcc00;

            --text-light: #a0a0a0;

            --bg-light: #1a1a1a;

        }

        

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            transition: var(--transition);

            overflow-x: hidden;

        }

        

        /* Fix text-muted in dark mode */

        [data-theme="dark"] .text-muted {

            color: #b0b0b0 !important;

        }

        [data-theme="dark"] .navbar {

            --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

        }

        

        /* Navbar Styles */

        .navbar {

            background: rgba(255, 255, 255, 0.95);

            backdrop-filter: blur(10px);

            box-shadow: 0 2px 20px rgba(0,0,0,0.1);

            transition: var(--transition);

            padding: 1rem 0;

        }

        

        [data-theme="dark"] .navbar {

            background: rgba(10, 10, 10, 0.95);

            box-shadow: 0 2px 20px rgba(0,0,0,0.5);

        }

        

        .navbar-brand {

            font-size: 1.8rem;

            font-weight: bold;

            color: var(--primary-color) !important;

        }

        

        .nav-link {

            color: var(--secondary-color) !important;

            font-weight: 500;

            margin: 0 0.5rem;

            transition: var(--transition);

            position: relative;

        }

        

        /* Dark mode navbar text fix */

        [data-theme="dark"] .nav-link {

            color: #ffffff !important;

        }

        

        .nav-link:hover {

            color: var(--primary-color) !important;

            transform: translateY(-2px);

        }

        

        .nav-link::after {

            content: '';

            position: absolute;

            bottom: -5px;

            left: 50%;

            width: 0;

            height: 2px;

            background: var(--primary-color);

            transition: var(--transition);

            transform: translateX(-50%);

        }

        

        .nav-link:hover::after {

            width: 80%;

        }

        

        /* Hero Section */

        .hero-section {

            min-height: 100vh;

            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 

                        url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1740&q=80');

            background-size: cover;

            background-position: center;

            background-attachment: fixed;

            display: flex;

            align-items: center;

            position: relative;

            overflow: hidden;

            padding-top: 8rem;

            padding-bottom: 5rem;

        }

        

        [data-theme="dark"] .hero-section {

            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 

                        url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1740&q=80');

            background-size: cover;

            background-position: center;

            background-attachment: fixed;

        }

        

        .hero-content h1 {

            font-size: 3.5rem;

            font-weight: bold;

            color: white;

            margin-bottom: 1.5rem;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

        }

        

        .hero-content p {

            font-size: 1.3rem;

            color: rgba(255,255,255,0.95);

            margin-bottom: 2rem;

            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

        }

        

        .btn-primary-custom {

            background: var(--primary-color);

            color: white;

            padding: 12px 35px;

            border: none;

            border-radius: 50px;

            font-weight: 600;

            transition: var(--transition);

            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);

            text-decoration: none;

            display: inline-block;

        }

        

        .btn-primary-custom:hover {

            background: #c82333;

            transform: translateY(-3px);

            box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);

            color: white;

        }

        

        .btn-outline-custom {

            background: transparent;

            color: white;

            padding: 12px 35px;

            border: 2px solid white;

            border-radius: 50px;

            font-weight: 600;

            transition: var(--transition);

            text-decoration: none;

            display: inline-block;

            margin-left: 1rem;

        }

        

        .btn-outline-custom:hover {

            background: white;

            color: var(--primary-color);

            transform: translateY(-3px);

        }

        

        /* Car Cards */

        .car-card {

            background: white;

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 5px 20px rgba(0,0,0,0.1);

            transition: var(--transition);

            height: 100%;

        }

        

        [data-theme="dark"] .car-card {

            background: #1a1a1a;

            box-shadow: 0 5px 20px rgba(0,0,0,0.5);

        }

        

        .car-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 10px 30px rgba(0,0,0,0.2);

        }

        

        .car-card img {

            width: 100%;

            height: 200px;

            object-fit: cover;

            transition: var(--transition);

        }

        

        .car-card:hover img {

            transform: scale(1.1);

        }

        

        .car-card-body {

            padding: 1.5rem;

        }

        

        .car-title {

            font-size: 1.3rem;

            font-weight: bold;

            color: var(--secondary-color);

            margin-bottom: 0.5rem;

        }

        

        [data-theme="dark"] .car-title {

            color: #ffffff;

        }

        

        .car-price {

            font-size: 1.5rem;

            color: var(--primary-color);

            font-weight: bold;

            margin-bottom: 1rem;

        }

        

        .car-features {

            list-style: none;

            padding: 0;

            margin-bottom: 1rem;

        }

        

        .car-features li {

            color: var(--text-light);

            margin-bottom: 0.5rem;

            font-size: 0.9rem;

        }

        

        .car-features i {

            color: var(--accent-color);

            margin-right: 0.5rem;

        }

        

        /* Feature Section */

        .feature-box {

            text-align: center;

            padding: 2rem;

            background: var(--bg-light);

            border-radius: 15px;

            transition: var(--transition);

            height: 100%;

        }

        

        [data-theme="dark"] .feature-box {

            background: #1a1a1a;

        }

        

        .feature-box:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 30px rgba(0,0,0,0.1);

        }

        

        .feature-icon {

            font-size: 3rem;

            color: var(--primary-color);

            margin-bottom: 1rem;

        }

        

        /* Testimonial */

        .testimonial-card {

            background: var(--bg-light);

            padding: 2rem;

            border-radius: 15px;

            box-shadow: 0 5px 20px rgba(0,0,0,0.1);

            margin-bottom: 2rem;

        }

        

        [data-theme="dark"] .testimonial-card {

            background: #1a1a1a;

            box-shadow: 0 5px 20px rgba(0,0,0,0.3);

        }

        

        .testimonial-text {

            font-style: italic;

            color: var(--text-light);

            margin-bottom: 1rem;

        }

        

        .testimonial-author {

            display: flex;

            align-items: center;

        }

        

        .author-img {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            margin-right: 1rem;

        }

        

        /* Contact Section */

        .contact-section {

            background: var(--bg-light);

            padding: 5rem 0;

        }

        

        [data-theme="dark"] .contact-section {

            background: #1a1a1a;

        }

        

        .contact-info {

            background: white;

            padding: 2rem;

            border-radius: 15px;

            box-shadow: 0 5px 20px rgba(0,0,0,0.1);

        }

        

        [data-theme="dark"] .contact-info {

            background: #2a2a2a;

        }

        

        .contact-item {

            display: flex;

            align-items: center;

            margin-bottom: 1.5rem;

        }

        

        .contact-icon {

            font-size: 1.5rem;

            color: var(--primary-color);

            margin-right: 1rem;

            width: 40px;

        }

        

        /* Map Container */

        .map-container {

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 5px 20px rgba(0,0,0,0.1);

            height: 450px;

        }

        

        [data-theme="dark"] .map-container {

            box-shadow: 0 5px 20px rgba(0,0,0,0.3);

        }

        

        .map-container iframe {

            width: 100%;

            height: 100%;

            border: none;

        }

        

        /* WhatsApp Button */

        .whatsapp-float {

            position: fixed;

            bottom: 30px;

            right: 30px;

            background: #25d366;

            color: white;

            width: 60px;

            height: 60px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 2rem;

            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);

            transition: var(--transition);

            z-index: 1000;

            text-decoration: none;

        }

        

        .whatsapp-float:hover {

            transform: scale(1.1);

            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);

            color: white;

        }

        

        /* Theme Toggle */

        .theme-toggle {

            background: var(--secondary-color);

            color: white;

            border: none;

            border-radius: 50px;

            padding: 8px 15px;

            cursor: pointer;

            transition: var(--transition);

        }

        

        [data-theme="dark"] .theme-toggle {

            background: #ffffff;

            color: #000000;

        }

        

        .theme-toggle:hover {

            background: var(--primary-color);

            transform: rotate(180deg);

            color: white;

        }

        

        /* Footer */

        footer {

            background: var(--secondary-color);

            color: white;

            padding: 3rem 0 1rem;

        }

        

        .footer-links a {

            color: rgba(255,255,255,0.7);

            text-decoration: none;

            margin-right: 1rem;

            transition: var(--transition);

        }

        

        .footer-links a:hover {

            color: white;

        }

        

        .footer-contact-item {

            display: flex;

            align-items: center;

            margin-bottom: 0.8rem;

            color: rgba(255,255,255,0.8);

        }

        

        .footer-contact-item i {

            margin-right: 0.8rem;

            color: var(--primary-color);

        }

        

        /* Responsive */

        @media (max-width: 768px) {

            .hero-content h1 {

                font-size: 2.5rem;

            }

            

            .btn-outline-custom {

                margin-left: 0;

                margin-top: 1rem;

                display: block;

                width: fit-content;

            }

            

            .map-container {

                height: 300px;

                margin-top: 2rem;

            }

        }

        

        /* Loading Animation */

        .loading-spinner {

            display: none;

            position: fixed;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            z-index: 9999;

        }

        

        .spinner-border {

            width: 3rem;

            height: 3rem;

            border-width: 0.3rem;

        }