/* Smooth scroll for anchor links */
        html { scroll-behavior: smooth; }

        body { font-family: Arial, sans-serif; background: #f9f9f9; margin:0; color:#222; }
        header { 
            background:#333;
            padding:15px;
            position:sticky;
            top:0;
            z-index:1000;
            display:flex;
            align-items:center;
            transition: background 400ms ease;
        }
        header.scrolling{ background: rgba(0, 0, 0, 0.9); }
        header img.logo { height:82px; margin-right:18px; display:block; }

        /* Simple nav next to logo */
        nav.site-nav { margin-left:8px; }
        nav.site-nav a { color:#fff; margin-right:18px; text-decoration:none; font-weight:600; font-size:15px; }
        nav.site-nav a:hover { text-decoration:underline; opacity:0.95; }

        .cart-icon{ margin-left: auto; font-size:28px; color:#fff; cursor:pointer; display:flex; align-items:center; position:relative; }
        .badge { background:#e53935; color:#fff; border-radius:50%; padding:3px 8px; font-size:12px; position:relative; top:-10px; left:-6px; }

        /* Hamburger icon */
        .hamburger {
            display:none;
            font-size:28px;
            color:#fff;
            cursor:pointer;
            margin-left:15px;
        }

        /* Default nav */
        .site-nav {
            display:flex;
            gap:20px;
        }
        .site-nav a {
            color:#fff;
            text-decoration:none;
            font-weight:600;
        }
        .site-nav a:hover { text-decoration:underline; }

        /* Mobile styles */
        @media (max-width:768px) {
            .hamburger { display:block; }
            .site-nav {
                display:none;
                flex-direction:column;
                background:#333;
                position:absolute;
                top:70px;
                left:0;
                width:100%;
                padding:15px;
                border-top:1px solid #444;
            }
            .site-nav.active { display:flex; }
            .site-nav a { padding:10px 0; border-bottom:1px solid #444; }
        }
       
 /* Cart dropdown */
        .cart-dropdown {
            display:none;
            position:absolute;
            right:10px;
            top:64px;
            width:360px;
            background:#fff;
            border-radius:10px;
            box-shadow:0 14px 40px rgba(0,0,0,0.25);
            padding:14px;
            z-index:2000;
            animation: fadeIn 0.22s ease-in;
        }
        .cart-dropdown.active { display:block; }
        .cart-dropdown h3 {
            margin:0 0 10px;
            font-size:1.15em;
            border-bottom:1px solid #eee;
            padding-bottom:8px;
        }
        .cart-item { display:flex; align-items:center; margin-bottom:12px; gap:10px; }
        .cart-item img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
        .cart-item .meta { flex:1; font-size:0.95em; display:flex; flex-direction:column; gap:4px; }
        .cart-item .meta .name { font-weight:600; color:#222; }
        .cart-item .meta .qty { color:#666; font-size:0.9em; }
        .cart-item .actions { display:flex; gap:6px; align-items:center; }
        .cart-item .actions a { text-decoration:none; color:#333; font-size:18px; padding:6px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
        .cart-item .actions a:hover { background:#f5f5f5; }
        .quote-btn {
            display:block;
            text-align:center;
            background:#111;
            color:#fff;
            padding:10px;
            border-radius:8px;
            margin-top:10px;
            text-decoration:none;
            font-weight:700;
        }
        .quote-btn:hover { background:#222; }

        /* Hero */
        .hero { position:relative; text-align:center; color:#fff; margin-bottom:18px; }
        .hero img { width:100%; height:850px; object-fit:cover; margin-top:-20%; brightness(60%); display:block; }
        .hero-text { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); font-size:2em; font-weight:bold; background:rgba(0,0,0,0.5); padding:18px; border-radius:8px; }

        main { padding:22px; max-width:1200px; margin:0 auto; }

        /* Products */
        .products-row { display:flex; flex-wrap:wrap; gap:20px; justify-content:flex-start; margin-bottom:30px; }
        .product { background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); padding:14px; width:260px; text-align:center; transition: transform 0.25s, box-shadow 0.25s; }
        .product:hover { transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.12); }
        .product h3 { margin:8px 0 10px; font-size:1.05em; }
        .product img { width:220px; height:220px; object-fit:cover; border-radius:8px; display:block; margin:0 auto 10px; }
        .product a.add-btn { display:inline-block; margin-top:6px; padding:8px 10px; background:#111; color:#fff; border-radius:6px; text-decoration:none; font-weight:600; }
        .product a.add-btn:hover { background:#222; }

        /* Carousel */
        .carousel { display:flex; overflow:hidden; width:100%; max-width:900px; margin:30px auto; }
        .slide { min-width:70%; transition: transform 0.5s ease; }
        /* .bilOne img {height: 10px;} */
        .slide img { width:50%; border-radius:8px; display:block; }

        /* Coming Soon */
        .coming-soon { display:flex; flex-wrap:wrap; justify-content:center; margin:40px auto; max-width:1000px; gap:18px; }
        .coming-soon .soon-item { position:relative; width:200px; height:200px; border-radius:8px; overflow:hidden; }
        .coming-soon img { width:100%; height:100%; object-fit:cover; display:block; }
        .coming-soon .overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1em; font-weight:700; background:rgba(0,0,0,0.55); }

        /* About section */
        #about {
    background:#fff;
    padding:50px 20px;
    margin:40px auto;
    max-width:1200px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.about-container {
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    align-items:center;
}

.about-image img {
    width:100%;
    max-width:400px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.about-text {
    flex:1;
    font-size:1.05em;
    line-height:1.6;
    color:#444;
}

.about-highlights {
    display:flex;
    gap:20px;
    margin-top:20px;
    flex-wrap:wrap;
}

.highlight {
    flex:1 1 200px;
    background:#f9f9f9;
    padding:20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:transform 0.25s ease;
}
.highlight:hover {
    transform:translateY(-5px);
}
.highlight .icon {
    font-size:2em;
    display:block;
    margin-bottom:10px;
}

        footer {
    background:#222;
    color:#ddd;
    padding:40px 20px 20px;
    margin-top:40px;
}
    .footer-container {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        max-width:1200px;
        margin:0 auto;
        gap:30px;
    }
    .footer-container h3 { color:#fff; margin-bottom:10px; }
    .footer-container p, .footer-container a { font-size:0.95em; color:#ccc; text-decoration:none; }
    .footer-container a:hover { color:#fff; }

    .footer-links ul { list-style:none; padding:0; }
    .footer-links li { margin-bottom:8px; }

    .social-icons a { margin-right:10px; font-size:1.2em; color:#ccc; }
    .social-icons a:hover { color:#fff; }

    .footer-bottom {
        text-align:center;
        margin-top:20px;
        border-top:1px solid #444;
        padding-top:10px;
        font-size:0.85em;
        color:#aaa;
    }

    /* General responsive container */
main, .footer-container {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* Products grid */
.products-row {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}
.product {
    flex:1 1 260px;
    max-width:260px;
}

/* Footer responsiveness */
.footer-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:30px;
}
.footer-about, .footer-links, .footer-contact {
    flex:1 1 250px;
}

    /* Media queries */
    @media (max-width:1024px) {
        header img.logo { height:60px; }
        .hero img { height:500px; }
        .product img { height:200px; }
    }

    @media (max-width:768px) {
        nav.site-nav { display:none; } /* hide nav links on tablets/mobiles if needed */
        .product { flex:1 1 45%; max-width:45%; }
        .cart-dropdown { width:90%; right:5%; }
        .footer-container { flex-direction:column; align-items:center; text-align:center; }
    }

    @media (max-width:480px) {
        header img.logo { height:50px; }
        .hero img { height:350px; margin-top: -35%;}
        .hero-text {font-size:1.3em; margin-top: 15%;}
        .product { flex:1 1 100%; max-width:100%; }
        .product img { height:180px; }
        .cart-dropdown { width:95%; right:2.5%; }
    }



        @keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

        /* Responsive */
        @media (max-width:800px) {
            header { padding:12px; }
            .product { width:calc(50% - 28px); }
            .hero img { height:420px; }
            .cart-dropdown { right:8px; left:8px; width:auto; top:64px; }
        }
        @media (max-width:480px) {
            .product { width:100%; }
            nav.site-nav { display:none; } /* hide nav links on very small screens to keep header clean */
        }