:root {
            /* Brand Colors */
            --primary-tech: #3080C4;
            --secondary-tech: #38671B;

            /* Default Dark Theme Colors */
            --bg-main: #0a0e17;
            --bg-section: #111827;
            --bg-card: #1f2937;

            --text-main: #f8f9fa;
            --text-muted: #d1d5db;

            --border-color: rgba(255, 255, 255, 0.05);
            --border-focus: rgba(48, 128, 196, 0.25);

            --nav-bg: rgba(10, 14, 23, 0.95);
            --nav-scrolled: rgba(10, 14, 23, 1);
            --nav-border: rgba(48, 128, 196, 0.2);

            --input-bg: rgba(255, 255, 255, 0.05);
        }

        /* Light Theme Overrides */
        [data-theme="light"] {
            --bg-main: #f0f2f5;
            --bg-section: #ffffff;
            --bg-card: #ffffff;

            --text-main: #1f2937;
            --text-muted: #6b7280;

            --border-color: rgba(0, 0, 0, 0.1);
            --border-focus: rgba(48, 128, 196, 0.5);

            --nav-bg: rgba(255, 255, 255, 0.95);
            --nav-scrolled: rgba(255, 255, 255, 1);
            --nav-border: rgba(0, 0, 0, 0.1);

            --input-bg: rgba(0, 0, 0, 0.03);
        }

        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Typography & Colors */
        .text-theme {
            color: var(--text-main) !important;
            transition: color 0.3s ease;
        }

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

        .text-tech-alt {
            color: var(--secondary-tech) !important;
        }

        .bg-tech-dark {
            background-color: var(--bg-section);
            transition: background-color 0.3s ease;
        }

        .text-muted {
            color: var(--text-muted) !important;
            transition: color 0.3s ease;
        }

        /* Custom Buttons */
        .btn-tech {
            background-color: transparent;
            border: 2px solid var(--primary-tech);
            color: var(--primary-tech);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .btn-tech:hover {
            background-color: var(--primary-tech);
            color: #ffffff;
            box-shadow: 0 0 15px rgba(48, 128, 196, 0.5);
            transform: translateY(-2px);
        }

        .btn-tech-alt {
            background-color: var(--secondary-tech);
            border: 2px solid var(--secondary-tech);
            color: #ffffff;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-tech-alt:hover {
            background-color: transparent;
            color: var(--secondary-tech);
            box-shadow: 0 0 15px rgba(56, 103, 27, 0.5);
        }

        /* Navbar */
        .navbar {
            background-color: var(--nav-bg);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--nav-border);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .navbar-brand {
            font-weight: 800;
            letter-spacing: 1.5px;
        }

        .nav-link {
            color: var(--text-main) !important;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: var(--primary-tech) !important;
        }

        /* Theme Toggle Button */
        #themeToggle {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #themeToggle:hover {
            background: var(--primary-tech);
            color: #ffffff;
            border-color: var(--primary-tech);
        }

        /* Hero Slider */
        .hero-carousel .carousel-item {
            height: 90vh;
            min-height: 600px;
            background: no-repeat center center scroll;
            background-size: cover;
            position: relative;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(10, 14, 23, 0.95) 0%, rgba(10, 14, 23, 0.5) 100%);
        }

        .carousel-caption {
            top: 50%;
            transform: translateY(-50%);
            bottom: auto;
            text-align: left;
        }

        /* About/Intro Section */
        .feature-icon-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            padding: 2rem;
            border-radius: 10px;
            transition: 0.3s;
            height: 100%;
        }

        .feature-icon-box:hover {
            border-color: var(--primary-tech);
            box-shadow: 0 0 20px rgba(48, 128, 196, 0.15);
        }

        /* Products Section */
        .product-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-tech);
            box-shadow: 0 10px 25px rgba(48, 128, 196, 0.25);
        }

        .product-img-wrapper {
            height: 250px;
            overflow: hidden;
            background-color: #000;
        }

        .product-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
            transition: 0.3s;
        }

        .product-card:hover .product-img-wrapper img {
            opacity: 1;
            transform: scale(1.05);
        }

        .badge-alt {
            background-color: var(--secondary-tech);
            color: #ffffff;
            font-weight: 600;
            padding: 0.4em 0.8em;
        }

        /* Review Slider */
        .review-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-top: 4px solid var(--primary-tech);
            border-radius: 10px;
            padding: 3rem 2rem;
            transition: background-color 0.3s ease;
        }

        #reviewCarousel .carousel-indicators {
            bottom: -50px;
        }

        #reviewCarousel .carousel-indicators [data-bs-target] {
            background-color: var(--primary-tech);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 5px;
            opacity: 0.5;
        }

        #reviewCarousel .carousel-indicators .active {
            opacity: 1;
            background-color: var(--secondary-tech);
        }

        /* Contact Section */
        .contact-box {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--border-color) !important;
            transition: background-color 0.3s ease;
        }

        .icon-bg {
            background-color: var(--bg-main);
            transition: background-color 0.3s ease;
        }

        /* Contact Form */
        .form-control {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 0.8rem;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }

        .form-control:focus {
            background-color: var(--input-bg);
            border-color: var(--primary-tech);
            box-shadow: 0 0 0 0.25rem var(--border-focus);
            color: var(--text-main);
        }

        /* Footer */
        footer {
            background-color: var(--bg-main);
            border-top: 1px solid var(--nav-border);
            transition: background-color 0.3s ease;
        }


        /* Layout */
        #wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }

        /* Sidebar */
        #sidebar {
            min-width: 250px;
            max-width: 250px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            min-height: 100vh;
            transition: all 0.3s;
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .sidebar-nav {
            padding: 1rem 0;
            list-style: none;
            margin: 0;
        }

        .sidebar-nav li a {
            padding: 12px 20px;
            display: block;
            color: var(--text-muted);
            text-decoration: none;
            transition: 0.3s;
        }

        .sidebar-nav li a:hover,
        .sidebar-nav li.active a {
            color: #fff;
            background: rgba(48, 128, 196, 0.1);
            border-left: 3px solid var(--primary-tech);
        }

        .sidebar-nav li a i {
            width: 25px;
            color: var(--primary-tech);
        }

        /* Content Area */
        #content {
            width: 100%;
        }

        /* Topnav */
        .topnav {
            background: var(--bg-sidebar);
            border-bottom: 1px solid var(--border-color);
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Cards */
        .admin-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 20px;
        }

        /* Sidebar Dropdown Submenu Styling */
        .submenu-list {
            background: rgba(0, 0, 0, 0.15);
            /* Slightly darker background for nested items */
            border-left: 3px solid var(--primary-tech);
            margin: 5px 0 5px 15px;
            /* Indent the nested list */
            border-radius: 0 4px 4px 0;
        }

        .submenu-list li a {
            padding: 10px 20px 10px 30px !important;
            /* Extra left padding for sub-items */
            font-size: 0.9em;
        }

        /* Toggle Icon Animation */
        .dropdown-toggle-custom .toggle-icon {
            transition: transform 0.3s ease;
        }

        /* Rotate the chevron when the menu is open */
        .dropdown-toggle-custom[aria-expanded="true"] .toggle-icon {
            transform: rotate(180deg);
        }



        /* --- Light Dropdown Styling --- */
        .custom-light-dropdown {
            background-color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 0.5rem 0;
            min-width: 230px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        }

        /* Subtle divider line */
        .custom-light-dropdown .dropdown-divider {
            border-top: 1px solid #e5e5e5;
            margin: 0.3rem 0;
        }

        /* Default state for items (Light Gray) */
        .custom-light-dropdown .dropdown-item {
            color: #a0a0a0;
            /* Matches the light gray text in the image */
            font-weight: 500;
            padding: 0.6rem 1.5rem;
            font-size: 0.95rem;
            transition: all 0.2s ease;
        }

        /* Specific styling for the chevron */
        .custom-light-dropdown .chevron-icon {
            font-size: 0.65rem;
            opacity: 0.5;
        }

        /* Active "All Products" State */
        .custom-light-dropdown .active-item {
            color: var(--primary-tech, #0d6efd) !important;
            background-color: transparent !important;
        }

        /* Hover States */
        .custom-light-dropdown .dropdown-item:hover,
        .custom-light-dropdown .dropdown-item:focus {
            background-color: #f8f9fa;
            /* Very subtle light background on hover */
            color: var(--primary-tech, #0d6efd) !important;
            /* Turns blue on hover */
        }

        .custom-light-dropdown .dropdown-item:hover .chevron-icon {
            opacity: 1;
        }

        /* --- Multi-level Hover Dropdown Logic --- */
        @media all and (min-width: 992px) {
            .dropdown-hover:hover>.dropdown-menu {
                display: block;
                margin-top: 0;
            }

            .dropdown-hover>.dropdown-toggle:active {
                pointer-events: none;
            }

            .dropdown-submenu {
                position: relative;
            }

            .dropdown-submenu>.dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                display: none;
            }

            .dropdown-submenu:hover>.dropdown-menu {
                display: block;
            }
        }


        /* Card Hover Effect */
        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            border-color: var(--primary-tech) !important;
        }

        .transition-all {
            transition: all 0.3s ease;
        }

        /* Subcategory Link Hover */
        .hover-dark-text {
            transition: color 0.2s ease;
        }

        .hover-dark-text:hover {
            color: #212529 !important;
            /* Darkens text on hover instead of turning it white */
        }

        /* Accordion Button Overrides */
        .accordion-button:focus {
            border-color: transparent;
            box-shadow: none;
        }

        .accordion-button:not(.collapsed) {
            color: var(--primary-tech);
            background-color: #ffffff;
            box-shadow: none;
        }

        /* Fix for the Accordion Chevron (Arrow) */
        .accordion-button::after {
            filter: none;
            /* Removed the invert so the arrow stays dark/grey */
            opacity: 0.6;
        }

        .accordion-button:not(.collapsed)::after {
            /* Tints the arrow to match your primary tech color when open */
            filter: invert(40%) sepia(80%) saturate(3000%) hue-rotate(200deg) brightness(90%) contrast(90%);
            opacity: 1;
        }