:root{--bg-black: #0a0a0a;
    --bg-dark: #121212;
    --bg-dark-alt: #161616;
    --bg-card: #1a1a1a;
    --border-dark: #2a2a2a;
    --lime: #b6f000;
    --lime-bright: #cbff1a;
    --lime-dim: #8fbf00;
    --white: #ffffff;
    --grey-100: #f4f4f4;
    --grey-300: #c7c7c7;
    --grey-500: #8a8a8a;
    --grey-700: #4d4d4d;
    --danger: #ff4d4d;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 24px rgba(182, 240, 0, 0.45);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
body{font-family:Arial,Helvetica,sans-serif !important;background:var(--w3c-bg)  !important;color:var(--w3c-text)  !important;line-height:1.5  !important}
a{color:inherit}
.w3c-container{max-width:1280px;margin:auto}
.w3c-topbar{background:#111;color:#fff;font-size:13px}
.w3c-header{background:#fff;border-bottom:1px solid var(--w3c-border)}
.w3c-logo{font-size:26px;font-weight:700;text-decoration:none;letter-spacing:-.5px}
.w3c-logo span{color:var(--w3c-accent)}
.w3c-search{display:flex;max-width:620px;margin:auto}
.w3c-search input{border:2px solid #111;border-right:0;border-radius:4px 0 0 4px}
.w3c-search button{border-radius:0 4px 4px 0;background:#111;color:#fff}
.w3c-nav{background:#fff;border-bottom:1px solid var(--w3c-border)}
.w3c-nav a{text-decoration:none;font-weight:600}
.w3c-hero{min-height:360px;background:linear-gradient(90deg,#222,#777);color:#fff;display:flex;align-items:center}
.w3c-hero h1{font-size:46px;line-height:1.1;margin:12px 0}
.w3c-section-title{font-size:28px;margin:0 0 20px}
.w3c-category-card,.w3c-product-card{background:#fff;border-radius:6px;overflow:hidden;height:100%}
.w3c-category-card img{width:100%;height:180px;object-fit:cover}
.w3c-product-card img{width:100%;height:240px;object-fit:cover}
.w3c-product-info{padding:16px}
.w3c-product-name{font-size:17px;font-weight:600;min-height:48px}
.w3c-price{font-size:20px;font-weight:700;margin:8px 0}
.w3c-old-price{text-decoration:line-through;color:#888;font-size:14px;margin-left:6px}
.w3c-rating{letter-spacing:2px}
.w3c-badge{background:var(--w3c-accent);color:#fff;padding:4px 8px;border-radius:3px;font-size:12px}
.w3c-banner{background:#111;color:#fff;border-radius:8px}
.w3c-footer{background:#171717;color:#ddd;margin-top:40px}
.w3c-footer a{text-decoration:none;color:#ddd}
.w3c-breadcrumb{background:#fff;border-bottom:1px solid var(--w3c-border)}
.w3c-sidebar,.w3c-product-main,.w3c-cart-table{background:#fff}
.w3c-product-main{border-radius:8px}
.w3c-thumb{border:1px solid var(--w3c-border);cursor:pointer}
.w3c-qty{display:flex;max-width:140px}
.w3c-qty input{text-align:center}
.w3c-form label{font-weight:600;display:block;margin-bottom:5px}
.w3c-alert{padding:12px 16px;margin-bottom:16px;border-radius:4px;background:#fff8e1}
@media(max-width:600px){
 .w3c-search{margin-top:12px}
 .w3c-hero{min-height:280px}
 .w3c-hero h1{font-size:34px}
 .w3c-product-card img{height:190px}
}
 /* =========================
           SEARCH BAR
        ========================= */

        .search-container {
            flex: 1;
            max-width: 650px;
            margin: 0 auto;
            position: relative;
            z-index: 10001 !important;
            overflow: visible !important;
        }

        .search-box {
            height: 46px;
            display: flex;
            align-items: center;
            background: #fff;
            border: 2px solid #e0e0e0;
            overflow: hidden;
            transition: border-color 0.2s, box-shadow 0.2s;
            position: relative;
            z-index: 6001;
        }

        .search-box:focus-within {
            border-color: #000;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
        }

        .search-icon {
            font-size: 18px;
            margin-left: 18px;
            color: #666;
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            height: 100%;
            padding: 0 12px;
            font-size: 15px;
            background: transparent;
        }

        .search-box input::placeholder {
            color: #888;
        }

        .search-button {
            height: 100%;
            border: none;
            background: #b6f000;
            color: #000000;
            padding: 0 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .search-button:hover {
            background: #333;
        }

        .search-clear {
            display: none;
            border: none;
            background: transparent;
            cursor: pointer;
            color: #888;
            padding: 10px;
        }

        .search-clear:hover {
            color: #000;
        }

        /* Search Suggestions */

        .search-suggestions {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            min-width: 100%;
            background: #fff;
            border-radius: 8px;
            padding: 8px 0;
            z-index: 2147483647 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
            border: 1px solid #d9d9d9;
            overflow: visible !important;
            visibility: visible;
            opacity: 1;
        }

        .search-suggestions a {
            display: block;
            padding: 12px 20px;
            text-decoration: none;
            color: #333;
        }

        .search-suggestions a:hover {
            background: #f5f5f5;
        }

        .search-suggestions i {
            width: 25px;
            color: #777;
        }

        .suggestion-title {
            padding: 10px 20px;
            font-size: 12px;
            font-weight: bold;
            color: #777;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
#main-body{
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5  !important
    background: #0a0a0a !important;

}


.hero-title{
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.hero-title .accent{
    color: var(--bs-primary);
}


.hero-container{
        background: radial-gradient(ellipse at 30% 20%, #1c2400 0%, #0a0a0a 55%),
              linear-gradient(160deg, #0a0a0a 0%, #111 60%, #0a0a0a 100%);
        color:#FFFFFF;
        align-items: center;
        padding: 60px 0px 40px;
}


.fuel-your-goal {
    background: transparent;
    border: 1px solid var(--bs-primary);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-card);
    color: var(--white);
}
.hero-banner {
    background: transparent;
    border: 1px solid var(--bs-primary);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-card) 0 10px 30px rgba(0, 0, 0, 0.45);
}

.hero-banner > img{
    width: 100%;
    max-height: 560px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 0 40px rgba(182, 240, 0, 0.12);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 94%, transparent 100%);
    animation: heroFloat 6s ease-in-out infinite;
}

 .site-header {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
        }

        .header-main {
            min-height: 80px;
        }

        .site-logo {
            font-size: 28px;
            font-weight: 700;
            text-decoration: none;
            color: #212529;
            white-space: nowrap;
        }

        .search-box {
            position: relative;
        }

        .search-box .form-control {
            height: 46px;
            padding-right: 50px;
            border-radius: 6px;
        }

        .search-button {
            position: absolute;
            right: 0;
            top: 0;
            height: 46px;
            width: 48px;
            border: 0;
            background: transparent;
            color: #495057;
        }

        .header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
        }

        .header-action {
            position: relative;
            color: #212529;
            text-decoration: none;
            text-align: center;
            min-width: 42px;
        }

        .header-action i {
            display: block;
            font-size: 23px;
            line-height: 1;
        }

        .header-action span {
            display: block;
            font-size: 12px;
            margin-top: 4px;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: 2px;
            background: #dc3545;
            color: #fff;
            font-size: 10px;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
        }

        @media (max-width: 767.98px) {

            .header-main {
                min-height: auto;
                padding-top: 15px;
                padding-bottom: 15px;
            }

            .site-logo {
                font-size: 24px;
            }

            .header-actions {
                gap: 12px;
            }

            .header-action span {
                display: none;
            }

            .header-action i {
                font-size: 22px;
            }

            .search-wrapper {
                margin-top: 15px;
            }
        }


 @keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-820px) translateX(20px); opacity: 0; }
}
		.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-glow {
    /*position: absolute;*/
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle, var(--bs-primary) 0%, transparent 65%);
    filter: blur(10px);
    pointer-events: none;
    animation: glowPulse 6s ease-in-out infinite;
}
.particle {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height:4px;
    background: var(--bs-primary);
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: 0 0 6px 2px var(--bs-primary);
    animation: floatUp linear infinite;
}
        .site-header {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
        }

        .header-main {
            min-height: 80px;
        }

        .site-logo {
            font-size: 28px;
            font-weight: 700;
            text-decoration: none;
            color: #212529;
            white-space: nowrap;
        }

        .search-box {
            position: relative;
        }

        .search-box .form-control {
            height: 46px;
            padding-right: 50px;
            border-radius: 6px;
        }

        .search-button {
            position: absolute;
            right: 0;
            top: 0;
            height: 46px;
            width: 48px;
            border: 0;
            background: transparent;
            color: #495057;
        }

        .header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
        }

        .header-action {
            position: relative;
            color: #212529;
            text-decoration: none;
            text-align: center;
            min-width: 42px;
        }

        .header-action i {
            display: block;
            font-size: 23px;
            line-height: 1;
        }

        .header-action span {
            display: block;
            font-size: 12px;
            margin-top: 4px;
        }

        .cart-count, .wishlist-count {
            position: absolute;
            top: -8px;
            right: 2px;
            background: #dc3545;
            color: #fff;
            font-size: 10px;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
        }

        @media (max-width: 767.98px) {

            .header-main {
                min-height: auto;
                padding-top: 15px;
                padding-bottom: 15px;
            }

            .site-logo {
                font-size: 24px;
            }

            .header-actions {
                gap: 12px;
            }

            .header-action span {
                display: none;
            }

            .header-action i {
                font-size: 22px;
            }

            .search-wrapper {
                margin-top: 15px;
            }
        }
 .hero-container-wrapper{
    position: relative;
 }