:root {
  --background-color: #0A1828; /* Deep Teal-Blue - A rich, vibrant dark background */
	  --default-color: #D1D8BE; /* Soft Off-White - Excellent readability on dark backgrounds */
	  --heading-color: #8D77AB; /* Pure White - For prominent headings and titles */
  --accent-color: #178582; /* Vivid Emerald Green - Highly saturated and energetic, symbolizing growth */
  --surface-color: #BFA181; /* Muted Teal-Blue - For cards, boxes, providing distinct separation */
	  --contrast-color: #819A91; /* Pure White - Ensures readability on accent and heading colors */
	}

        body {
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            background-color: var(--background-color); /* bg-gray-100 */
        }
        .main-container {
            display: flex;
            flex-grow: 1;
            max-width: 1200px; /* Max width for content */
            margin: 0 auto; /* Center the container */
            padding: 1.5rem; /* p-6 */
            gap: 1.5rem; /* Space between panes */
        }
        .left-pane {
            width: 30%; /* Slightly wider for filters and battery list */
            min-width: 280px; /* Ensure it doesn't get too narrow */
    background-color: var(--accent-color); /* bg-white */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
            padding: 1.5rem; /* p-6 */
            display: flex;
            flex-direction: column;
            overflow-y: auto; /* Allow scrolling for battery list */
			min-height: 900px; /* Adjust based on padding/margin */
            max-height: calc(100vh - 3rem); /* Adjust based on padding/margin */
        }
        .right-pane {
            flex-grow: 1; /* Takes remaining space */
    background-color: var(--accent-color);
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            display: flex;
            flex-direction: column; /* Allow content to stack vertically */
            overflow-y: auto; /* Allow scrolling for batteries */
        }
        /* Car logo grid styling */
        .car-logo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Responsive grid */
            gap: 1rem;
            justify-items: center;
            align-items: start;
            padding-top: 1rem;
        }
        .car-logo-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            width: 100%; /* Ensure cards take full grid cell width */
            min-height: 100px; /* Ensure consistent height */
            cursor: pointer; /* Indicate clickable */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .car-logo-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .car-logo-card img {
            max-width: 80px;
            max-height: 50px;
            object-fit: contain;
            margin-bottom: 0.5rem;
        }
        .car-logo-card p {
            font-size: 0.8rem;
            font-weight: 700;
            color: #4b5563;
        }

        /* Battery card styling for the right pane */
        .battery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid for batteries */
            gap: 1.5rem;
            padding-top: 1rem;
        }
        .battery-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1rem;
            background-color: #f9fafb; /* bg-gray-50 */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            border: 1px solid #e5e7eb; /* border border-gray-200 */
        }
        .battery-card img {
            width: 8rem; /* w-32 */
            height: 8rem; /* h-32 */
            object-fit: contain;
            border-radius: 0.5rem; /* rounded-lg */
            margin-bottom: 0.75rem; /* mb-3 */
            border: 1px solid #d1d5db; /* border border-gray-300 */
        }
        .battery-card h3 {
            font-size: 1.1rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            color: #1f2937; /* text-gray-900 */
            margin-bottom: 0.25rem;
        }
        .battery-card p {
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* text-gray-600 */
            line-height: 1.4;
        }
        .battery-card .price-section p {
            font-size: 0.95rem; /* Slightly larger for prices */
            line-height: 1.3;
        }
        .battery-card .price-section .font-extrabold {
            font-size: 1.1rem; /* Special price stands out */
        }

        /* Car list card styling for compatible cars display */
        .compatible-car-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
            padding-top: 1rem;
        }

        .compatible-car-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0.75rem;
            background-color: #f9fafb;
            border-radius: 0.75rem;
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
            border: 1px solid #e5e7eb;
        }
        .compatible-car-card img {
            max-width: 80px;
            max-height: 50px;
            object-fit: contain;
            margin-bottom: 0.5rem;
        }
        .compatible-car-card h4 {
            font-size: 1rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.25rem;
        }
        .compatible-car-card p {
            font-size: 0.85rem;
            color: #6b7280;
        }

        /* Battery details section when showing compatible cars */
        .selected-battery-details {
            background-color: #e0f2fe; /* blue-100 */
            border: 1px solid #90cdf4; /* blue-300 */
            border-radius: 0.75rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }
        .selected-battery-details img {
            width: 5rem;
            height: 5rem;
            object-fit: contain;
            border-radius: 0.5rem;
            border: 1px solid #bfdbfe; /* blue-200 */
        }
        .selected-battery-details .details-text {
            flex-grow: 1;
        }
        .selected-battery-details .details-text h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e40af; /* blue-800 */
            margin-bottom: 0.25rem;
        }
        .selected-battery-details .details-text p {
            font-size: 0.9rem;
            color: #3b82f6; /* blue-600 */
            line-height: 1.3;
        }
        .selected-battery-details .details-text .price-info-mrp {
            font-size: 1rem;
            font-weight: 500;
            color: #e34927; /* green-500 */
            margin-top: 0.5rem;
        }
        .selected-battery-details .details-text .price-info {
            font-size: 1rem;
            font-weight: 500;
            color: #10b981; /* green-500 */
            margin-top: 0.5rem;
        }
        .selected-battery-details .details-text .price-info-with-old-battery {
            font-size: 1rem;
            font-weight: 500;
            color: #e3a127; /* green-500 */
            margin-top: 0.5rem;
        }
        .selected-battery-details .details-text .price-info-without-old-battery {
            font-size: 1rem;
            font-weight: 500;
            color: #1C415D; /* green-500 */
            margin-top: 0.5rem;
        }



        /* Dropdown styling */
        select {
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid #d1d5db;
            background-color: #ffffff;
            font-size: 1rem;
            color: #374151;
            appearance: none; /* Remove default arrow */
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.5em 1.5em;
            cursor: pointer;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        select:focus {
            outline: none;
            border-color: #3b82f6; /* blue-500 */
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* ring-blue-200 */
        }
        select:disabled {
            background-color: #f3f4f6; /* gray-100 */
            cursor: not-allowed;
            color: #9ca3af; /* gray-400 */
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                padding: 1rem;
                gap: 1rem;
            }
            .left-pane {
                width: 100%;
                min-width: unset;
                max-height: unset; /* Let it expand naturally on mobile */
                margin-bottom: 1rem;
            }
            .right-pane {
                width: 100%;
                min-height: 200px; /* Give some height to the right pane */
            }
            .car-logo-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }
            .battery-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            .compatible-car-list {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
            .selected-battery-details {
                flex-direction: column;
                text-align: center;
            }
        }


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 5px 10px;
  color: white;
}
.logo a {
  color: white;
  font-size: 24px;
  text-decoration: none;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}
.nav-links li a {
  color: white;
  text-decoration: none;
  padding: 8px;
  transition: background 0.3s;
}
.nav-links li a:hover {
  background: #444;
}
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
}


/* --- Top Banner Styles --- */
.top-banner-container {
    width: 100%;
    height: 100px; /* Adjust this value to change banner height */
    background-color: #e0e0e0; /* Light background for the banner */
    overflow: hidden; /* Crucial: Hides images outside the banner area */
    position: relative; /* Needed for absolute positioning if you add text overlay etc. */
    display: flex; /* Use flexbox to center content vertically if needed */
    align-items: center; /* Vertically center images */
    border-bottom: 2px solid #ccc; /* Optional: subtle border */
}

.image-track {
    display: flex; /* Arranges images in a row */
    white-space: nowrap; /* Prevents images from wrapping to the next line */
    /* Changed animation direction for left-to-right scroll */
    animation: marquee-ltr 15s linear infinite; /* Adjust duration to change speed */
    /* The HTML now has the images duplicated in reverse order for this animation */
}

.banner-image {
    height: 50px; /* Height of individual images, adjust as needed */
    width: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between images */
    flex-shrink: 0; /* Prevent images from shrinking */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
    object-fit: cover; /* Ensures image covers the area without distortion */
}

/* Marquee Animation (Left to Right) */
@keyframes marquee-ltr {
    0% {
        transform: translateX(0%); /* Starts at the beginning of the track */
    }
    100% {
        /* Moves the track to the right by 50% of its total width.
           Since the HTML content within .image-track is duplicated (original set + duplicate set),
           moving by 50% makes the duplicate set perfectly align where the original set started,
           creating a seamless, infinite loop. */
        transform: translateX(50%);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .top-banner-container {
        height: 80px; /* Slightly smaller height on mobile */
    }
    .banner-image {
        height: 60px; /* Smaller images on mobile */
        margin-right: 15px;
    }
    /* Adjust marquee speed for smaller screens if images are smaller */
    @keyframes marquee-ltr {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0%); }
    }
}


        /* Widget container */
        .contact-widget {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            transition: all 0.3s ease;
        }
        
        /* Widget trigger (visible part when collapsed) */
        .widget-trigger {
            background-color: #25D366; /* WhatsApp green */
            color: white;
            padding: 15px 5px;
            border-radius: 5px 0 0 5px;
            cursor: pointer;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-weight: bold;
            box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
        }
        
        /* Widget content (hidden by default) */
        .widget-content {
            background-color: white;
            padding: 15px;
            border-radius: 5px 0 0 5px;
            box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
            display: none;
            flex-direction: column;
            gap: 15px;
        }
        
        /* Show content on hover */
        .contact-widget:hover .widget-content {
            display: flex;
        }
        
        /* Icons styling */
        .contact-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            text-decoration: none;
            transition: transform 0.2s;
        }
        
        .contact-icon:hover {
            transform: scale(1.1);
        }
        
        .whatsapp {
            background-color: #25D366;
        }
        
        .phone {
            background-color: #007bff;
        }
        
        /* Tooltip for icons */
        .icon-tooltip {
            position: absolute;
            left: -100px;
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        
        .contact-icon:hover .icon-tooltip {
            opacity: 1;
}