* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #0f172a; overflow-x: hidden; }
        .font-geist { font-family: 'Geist', sans-serif; }
        .main_logo { width: 150px; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #64748b; }

        .fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
        .fade-left { opacity: 0; transform: translateX(-30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-left.visible { opacity: 1; transform: translateX(0); }
        .fade-right { opacity: 0; transform: translateX(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-right.visible { opacity: 1; transform: translateX(0); }
        .scale-in { opacity: 0; transform: scale(0.9); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .scale-in.visible { opacity: 1; transform: scale(1); }

        .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; }
        .hero-slide.active { opacity: 1; }
        .hero-slide img { transition: transform 8s ease-out; }
        .hero-slide.active img { transform: scale(1.05); }
        .slider-progress { transition: width 6s linear; }

        .product-card { transition: all 0.3s ease; }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); }
        .product-card .product-actions { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
        .product-card:hover .product-actions { opacity: 1; transform: translateY(0); }
        .product-card .product-img { transition: transform 0.7s ease; }
        .product-card:hover .product-img { transform: scale(1.08); }

        .tab-btn { position: relative; transition: color 0.3s; }
        .tab-btn::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #4f46e5; transition: width 0.3s ease; }
        .tab-btn.active { color: #4f46e5; }
        .tab-btn.active::after { width: 100%; }

        .brand-track { display: flex; gap: 3rem; animation: brandScroll 25s linear infinite; }
        .brand-track:hover { animation-play-state: paused; }
        @keyframes brandScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease; }
        .accordion-item.open .accordion-content { max-height: 300px; }
        .accordion-item .accordion-icon { transition: transform 0.3s ease; }
        .accordion-item.open .accordion-icon { transform: rotate(180deg); }

        .modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-overlay .modal-box { transform: scale(0.95) translateY(10px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        .modal-overlay.active .modal-box { transform: scale(1) translateY(0); }

        .cart-sidebar { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .cart-sidebar.open { transform: translateX(0); }
        .cart-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .cart-overlay.open { opacity: 1; pointer-events: auto; }

        .search-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .search-overlay.active { opacity: 1; pointer-events: auto; }
        .search-overlay .search-box { transform: translateY(-20px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .search-overlay.active .search-box { transform: translateY(0); }

        .toast { transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .toast.show { transform: translateX(0); }

        .mobile-menu { transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .mobile-menu.open { transform: translateX(0); }
        .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all 0.3s ease;

    z-index: 50;
}

.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

        .marquee-badge { animation: marquee 12s linear infinite; }
        @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

        .pulse-dot { animation: pulse 2s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

        .counter { display: inline-block; }

        .blog-card .blog-img { transition: transform 0.7s ease; }
        .blog-card:hover .blog-img { transform: scale(1.06); }
        .blog-card:hover { box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1); }

        input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); border-color: #4f46e5; }

        .blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: 0.5; pointer-events: none; }

        @keyframes badgeBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
        .badge-bounce { animation: badgeBounce 0.4s ease; }

        section { position: relative; }

        .sort-dropdown { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; }
        .sort-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }

        .zoom-img { transition: transform 0.5s ease; cursor: zoom-in; }
        .zoom-img:hover { transform: scale(1.15); }

        /* ===== DESKTOP SUBMENU ===== */
        .nav-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            min-width: 235px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 100;
        }
        .nav-dropdown-wrapper:hover .nav-dropdown,
        .nav-dropdown-wrapper.open .nav-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }
        .nav-dropdown-wrapper > .nav-link-indicator {
            transition: transform 0.3s ease;
        }
        .nav-dropdown-wrapper:hover > .nav-link-indicator,
        .nav-dropdown-wrapper.open > .nav-link-indicator {
            transform: rotate(180deg);
        }

        /* ===== MOBILE SUBMENU ===== */
        .mobile-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mobile-submenu.open {
            max-height: 340px;
        }
        .mobile-submenu-toggle .submenu-arrow {
            transition: transform 0.3s ease;
        }
        .mobile-submenu-toggle.open .submenu-arrow {
            transform: rotate(180deg);
        }
.bg-primary{background-color: rgb(175 212 98) ; color:#000000;
}

.bg-slate-900{background-color: #222;    }
.dnone{display: none;}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .grid-cols-2575 {
        grid-template-columns: 25% 75% !important;
    }
}

.bg-accent
{
    background-color: #b0d463;
}


.text-accent, .group:hover .group-hover\:text-accent
{
    color: #b0d463;
}
.hover\:bg-indigo-50\/60:hover
{
    background-color:rgb(176 212 99 / 16%);
}
.group:hover .group-hover\:bg-indigo-100
{
    background-color: #FFF;
}