*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            background-color: #fcfcfc;
            color: #333;
            line-height: 1.6;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        .navbar {
            background-color: rgb(0, 140, 255);
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            filter: brightness(1.03);
        }

        .navbar-top {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 1rem;
            position: relative;
            gap: 1rem;
        }

        .brand { 
            display:flex; 
            align-items:center; 
            gap:0.5rem;
            font-size: 20px;
            font-weight: 600;
            color: white;
        }
        .brand img { 
            height:50px; 
            width:50px;
            display:block; 
            box-shadow: 2px 2px 6px rgba(0,0,0,0.12); 
            border-radius: 15px;
        }

        /* Nav */
        .nav-ul { 
            list-style:none; 
            display:flex; 
            gap:0.5rem; 
            margin:0; 
            padding:0; 
            align-items:center; 
        }
        .nav-ul a { 
            color:#fff; 
            padding:0.45rem 0.8rem; 
            border-radius:6px; 
            display:inline-block; 
            font-weight:600; 
        }
        .nav-ul a:hover, .nav-ul a:focus { 
            background: rgba(255,255,255,0.08); 
            outline:none 
        }
        .nav-ul .active { 
            background: rgba(255,255,255,0.12); 
            color: rgb(255, 242, 0);
        }

        /* Mobile toggle */
        .nav-toggle {
            border: 0;
            color: #fff;
            padding: 6px;
            font-size: 1.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .nav-toggle:focus {
            outline: none;
        }

        /* Mobile menu hidden by default */
        .mobile-nav { 
            display: none;
            background: rgb(0, 140, 255);
            padding: 0.4rem 0.5rem;
            transition: max-height 280ms ease, opacity 200ms ease;
            opacity: 0;
            overflow: hidden;
        }

        .mobile-nav.open {
            display: block;
            max-height: 1000px;
            opacity: 1;
        }
        .mobile-nav .nav-ul {
            flex-direction: column;
            gap: 0.25rem;
        }
        .mobile-nav .nav-ul a {
            color: #fff;
            padding: 0.7rem 0.6rem;
            border-radius: 6px;
            display: block;
        }

        @media (max-width: 768px) {
            .nav-ul { 
                flex-direction:column; 
                gap:0; 
            }
            .nav-ul a { 
                width:100%; 
                padding:0.9rem 1rem; 
            }
            .navbar-top { 
                padding:0.5rem 0.9rem; 
            }

            /* hide desktop nav, show toggle */
            nav.desktop { 
                display:none; 
            }
            .nav-toggle { 
                display:flex; 
            }

            /* mobile menu container */
            .mobile-nav { 
                display:block; 
 
                overflow:hidden; 
                max-height:0; 
                transition: max-height 280ms ease; 
            }
            .mobile-nav.open { 
                max-height: 400px; 
            }
        }
        
        @media (min-width:769px) {
            .nav-toggle { 
                display:none; 
            }
            nav.desktop { 
                display:flex; 
            }
        }
        /* Main / hero */
        .site-main { 
            padding: 0;
            margin-top: 4rem; 
            margin-bottom: 0.5rem;
            margin-top: 8px;
        }
        .hero { 
            position:relative; 
            height:60vh; 
            min-height:320px; 
            display:flex; 
            align-items:center; 
            justify-content:center; 
            overflow:hidden; 
            background:#111; 
        }
        .hero-video { 
            position:absolute; 
            inset:0; width:100%; 
            height:100%; 
            object-fit:cover; 
            filter:brightness(0.85); 
            pointer-events:none;
            margin: 0;
        }
        .hero-overlay { 
            position:relative; 
            z-index:2; 
            text-align:center; 
            color:#fff; 
            padding:2rem; 
            max-width:1100px; 
        }
        .hero-title { 
            font-size:clamp(1.4rem, 3.6vw, 2.6rem); 
            margin-bottom:0.4rem; 
            font-weight:700;
        }
        .hero-sub { 
            font-size:clamp(1rem, 2.2vw, 1.2rem); 
            opacity:0.9; 
        }
        .hero-dim { 
            position:absolute; 
            inset:0; 
            background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35)); 
            z-index:1;
        }
        .btn { 
            display:inline-block; 
            text-decoration:none; 
            padding:0.7rem 1.1rem; 
            border-radius:8px; 
            font-weight:700; 
            margin-top: 3rem;
        }
        .btn-primary { 
            background:#ffcd00; 
            color:#1a1a1a; 
            box-shadow:0 6px 18px rgba(255,205,0,0.14); 
            transition:transform .12s ease, box-shadow .12s ease; 
        }
        .btn-primary:hover, .btn-primary:focus { 
            transform:translateY(-2px); 
            box-shadow:0 10px 28px rgba(255,205,0,0.18); 
            outline:none; 
        }

        /* sliding images */
        .slider {
            display: flex; 
            overflow-x: auto; 
            scroll-behavior: smooth;
            gap: 1rem; 
            padding: 1rem 0.5rem;
        }
        .slider-container { 
            position: relative; 
        }
        
        .nav-btn {
            z-index: 1200;
            opacity: 0.95;
            background: rgba(0,0,0,0.6);
            color: #fff;
            padding: 0.45rem 0.6rem;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
        }
        .slider-container {
            position: relative;
            overflow: visible; 
        }
        
        .nav-btn.left, .nav-btn.right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .nav-btn.left { 
            left: 8px; 
        }
        .nav-btn.right { 
            right: 8px; 
        }
        .nav-btn:focus { 
            outline: 3px solid rgba(31,111,235,0.2); 
        }

        @media (max-width: 480px) {
            .nav-btn { 
                width: 34px; 
                height: 34px; 
                font-size: 1rem; 
            }
        }

        .product-card {
            flex: 0 0 auto; 
            width: 220px;
            border-radius: 10px;
            padding: 0.9rem; 
            text-align: center; 
            background: rgb(255, 255, 255);
            border:1px solid rgba(15,15,15,0.04);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
            transition: transform .18s ease, box-shadow .18s ease;
            position: relative;
            z-index: 1;
        }
        .product-card img { 
            max-width: 100%;
            height: 150px; 
            object-fit:cover;
            margin-bottom: 0.6rem; 
            border-radius:20px;box-shadow: 0 6px 18px rgba(10,10,10,0.06);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
        }
        .product-card:hover{ 
            transform: translateY(-6px); 
            box-shadow:0 18px 40px rgba(10,10,10,0.08); 
        }

        /* Add-to-cart button styles */
        .add-to-cart {
            display: inline-block;
            background: #000000;
            color: #fff;
            border: none;
            padding: 0.55rem 0.9rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.95rem;
            transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
            box-shadow: 0 8px 20px rgba(31,111,235,0.12);
        }
        .add-to-cart:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 14px 30px rgba(31,111,235,0.16); 
        }
        .add-to-cart:active { 
            transform: translateY(-1px); 
        }
        .add-to-cart[disabled] { 
            opacity: 0.6; 
            cursor: not-allowed; 
            transform: none; 
            box-shadow: none; 
        }

        @media (max-width: 480px) {
            .add-to-cart { 
                padding: 0.45rem 0.7rem; 
                font-size: 0.9rem; 
                border-radius: 8px; 
            }
        }

        .items-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
            padding: 0.75rem 1rem 1.25rem 1rem;
            background: #fff;
        }
        .items-card {
            border-radius: 10px;
            padding: 0.9rem;
            text-align: center;
            background: rgb(255, 255, 255);
            border:1px solid rgba(15,15,15,0.04);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
            transition: transform .18s ease, box-shadow .18s ease;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .items-card img {
            max-width: 100%;
            height: 150px; 
            object-fit:cover;
            margin-bottom: 0.6rem; 
            border-radius:20px;box-shadow: 0 6px 18px rgba(10,10,10,0.06);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
        }
        .items-card:hover {
            transform: translateY(-6px); 
            box-shadow:0 18px 40px rgba(10,10,10,0.08); 
        }

        .items-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
            padding: 0.75rem 1rem 1.25rem 1rem;
            background: #fff;
        }
        .items-card {
            border-radius: 10px;
            padding: 0.9rem;
            text-align: center;
            background: rgb(255, 255, 255);
            border:1px solid rgba(15,15,15,0.04);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
            transition: transform .18s ease, box-shadow .18s ease;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .items-card img {
            max-width: 100%;
            height: 150px; 
            object-fit:cover;
            margin-bottom: 0.6rem; 
            border-radius:20px;box-shadow: 0 6px 18px rgba(10,10,10,0.06);
            box-shadow: 0 8px 18px rgba(10,10,10,0.06);
        }
        .items-card:hover {
            transform: translateY(-6px); 
            box-shadow:0 18px 40px rgba(10,10,10,0.08); 
        }


        /* Shop Page */
        .mini-search {
            display: flex;
            align-items: center;
            margin-left: 0;
            align-items: stretch;
            width: 100%;
            max-width: 400px;
        }
        .mini-search .search-input {
            flex: 1;
            min-width: 0; 
            padding: 10px 15px;
            border: 2px solid #ccc;
            border-right: none;
            border-radius: 8px 0 0 8px;
            outline: none;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }
        .mini-search .search-btn {
            padding: 0 20px 5px;
            width: 100px;
            border: 2px solid black; 
            border-radius: 0 8px 8px 0;
            background: black; 
            color: #fff; 
            font-size: 1rem; 
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .mini-search .search-input:focus {
            border-color: #007bff;
        }
        

       

        /* About page */
        .hero1 {
            padding: 4rem 1rem; 
            text-align: center;
            background: linear-gradient(180deg, rgba(121,49,49,0.05), transparent);
        }
        .hero h1 { 
            color: rgb(88,183,16); 
            font-size: 2.5rem; 
            margin-bottom: 1rem; 
        }

        .container { 
            max-width: 1100px; 
            margin: 0 auto; 
            padding: 2rem; 
        }
        
        /* About & Mission */
        .about-card {
            background: white; 
            padding: 2.5rem; 
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
            margin-bottom: 3rem;
        }
        .about-section h2 { 
            color: rgb(88,183,16);
             margin-bottom: 1rem; 
        }

        /* Team Grid */
        .team-title { 
            text-align: center; 
            margin-bottom: 2rem; 
            color: #333; 
        }
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem; 
            margin-bottom: 4rem;
        }
        .team-member {
            background: white; 
            padding: 1.5rem; 
            border-radius: 12px;
            text-align: center; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .team-member img {
            width: 100px; 
            height: 100px; 
            border-radius: 50%;
            object-fit: cover; 
            margin-bottom: 1rem; 
            border: 3px solid #eee;
        }
        .team-member h3 { 
            font-size: 1.1rem; 
            color: rgb(0, 140, 255) }
        .team-member p { 
            font-size: 0.9rem; 
            color: #777; 
        }


        /* login page */
        .login-box { 
            background: rgba(44, 62, 80, 0.7);
            padding: 50px 40px;
            width: 330px;
            margin-top: 90px;
            margin-left: 180px;
            margin: 90px auto 0;
            border-radius: 10px;
        }
        h3 {
            text-align: center;
            color: rgb(0, 255, 0);
            margin-bottom: 20px;
            padding-bottom: 2px;
        }
        form {
            width: 240px;
            text-align: center;
            margin-top: -10;
        }
        input {
            width: 240px;
            text-align: center;
            font-size: 16px;
            font-weight: 200;
            transition: border 0.5s;
            outline: none;
            height: 35px;
        }
        button{
            border: none;
            width: 180px;
            font-size: 18px;
            font-weight: 600;
            line-height: 25px;
            padding: 10px 0;
            border-radius: 10px;
            background: gold;
            cursor: pointer;
        }
        button:hover {
            color: rgb(0, 255, 0);
            background: black;
        }

        a {
            color:rgb(0, 255, 0);
        }

        a:hover {
            color: red;
        }
        p {
            color: white;
            padding-top: 2px;
        }

        /* signup */
        .signup-box { 
            background: rgba(44, 62, 80, 0.7);
            padding: 50px 40px;
            width: 330px;
            margin-top: 90px;
            margin-left: 180px;
            margin: 90px auto 0;
            border-radius: 10px;
        }
        

        /* footer styles (realistic) */
        .site-footer { 
            background: rgb(0, 140, 255); 
            color: #cbd5e1; 
            padding: 3rem 0 1.5rem; 
            margin-top: 2rem; 
            font-size: 0.95rem; 
        }
        .site-footer .footer-inner { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 1rem; 
            display: grid; 
            grid-template-columns: repeat(4,1fr); 
            gap: 1.5rem; 
            align-items: start; 
        }
        .site-footer h4 { 
            color: #fff; 
            margin-bottom: 0.6rem; 
            font-size: 1rem; 
        }
        .site-footer p, .site-footer li { 
            color: #cbd5e1; 
            line-height: 1.5; 
        }
        .site-footer .footer-links { 
            list-style: none; 
            padding: 0; 
            margin: 0; 
        }
        .site-footer .footer-links li { 
            margin-bottom: 0.45rem; 
        }
        /* newsletter form */
        .newsletter-form { 
            display: flex; 
            gap: 0.5rem; 
            margin-top: 0.6rem; 
        }
        .newsletter-form input { 
            flex: 1 1 auto; 
            padding: 0.5rem 0.6rem; 
            border-radius: 6px; 
            border: 1px solid rgba(255,255,255,0.08); 
            background: rgba(255,255,255,0.02); 
            color: #fff; 
            outline: none; 
            border: 1px solid white;
        }
        .newsletter-form input::placeholder { 
            color: #9aa4b2; 
        }
        .newsletter-form button { 
            padding: 0.5rem 0.8rem; 
            border-radius: 6px; 
            background: #c300ff; 
            color: #fff; 
            border: none; 
            cursor: pointer; 
        }
            @media (max-width: 480px) { .newsletter-form { 
                flex-direction: column; 
                align-items: stretch; 
            } 
            .newsletter-form input, .newsletter-form button { 
                width: 100%; 
            } 
        }
            .site-footer a { 
                color: #cbd5e1; 
                text-decoration: none; 
            }
            .site-footer a:hover { 
                color: #fff; 
                text-decoration: underline; 
            }
            .site-footer .brand { 
                display: flex; 
                align-items: center; 
                gap: 0.5rem; 
            }
        .site-footer .footer-bottom { 
            border-top: 1px solid rgba(63, 62, 62, 0.05); 
            margin-top: 1.25rem; 
            padding-top: 1rem; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap; 
            gap: 0.75rem; 
        }
        
        .site-footer .payments { 
            display: flex; 
            gap: 0.5rem; 
            align-items: center; 
            margin-left: 2rem;
        }
        .site-footer .socials { 
            display: flex; 
            gap: 0.5rem; 
            align-items: center;
            margin-right: 2rem;
        }
        .socials img {
            height: 22px;
            width: auto;
            display: inline-block;
            margin-left: 0.5rem;
            opacity: 0.9;
            transition: transform .12s ease, opacity .12s ease;
        }
        .socials img:hover {
            opacity: 1;
            transform: translateY(-2px) scale(1.06);
        }
            @media (max-width: 800px) { 
                .site-footer .footer-inner { 
                    grid-template-columns: repeat(2,1fr); 
                } 
            }
            @media (max-width: 480px) { 
                .site-footer .footer-inner { 
                    grid-template-columns: 1fr; 
                    text-align: left; 
                } 
            .site-footer .footer-bottom { 
                flex-direction: column; 
                text-align: center; 
            } 
        }

        /* about page footer */
        footer {
            background: rgb(0, 140, 255); 
            color: #eee;
            padding: 3rem 1.5rem; 
            margin-top: 4rem;
        }
        .footer-content {
            max-width: 1100px; 
            margin: 0 auto;
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2.5rem;
        }
        .footer-section h4 { 
            color: white; 
            margin-bottom: 1.2rem; 
        }
        .footer-section p, .footer-section li { 
            font-size: 0.9rem; 
            margin-bottom: 0.5rem; 
        }
        .footer-bottom {
            text-align: center; 
            padding-top: 2rem; 
            margin-top: 2rem;
            border-top: 1px solid #444; 
            font-size: 0.8rem;
        }