/*=====================================
1400px
=====================================*/

@media (max-width:1400px){

.container{

width:94%;

}

.hero h1{

font-size:58px;

}

.hero-container{

gap:60px;

}

}

/*=====================================
1200px
=====================================*/

@media (max-width:1200px){

.nav-links{

gap:20px;

}

.search-box{

width:220px;

}

.hero h1{

font-size:52px;

}

.stats-grid,

.why-grid,

.steps-grid{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}
@media(max-width:992px){

.nav-links,

.search-box{

display:none;

}

.menu-toggle{

display:block;

background:none;

border:none;

color:#fff;

font-size:28px;

cursor:pointer;

}

.hero{

padding-top:130px;

}

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-right{

margin-top:40px;

}

.stats-grid,

.featured-grid,

.categories-grid,

.why-grid,

.steps-grid,

.faq-grid{

grid-template-columns:repeat(2,1fr);

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

width:100%;

}

}
@media(max-width:768px){

section{

padding:80px 0;

}

.hero h1{

font-size:40px;

}

.section-header h2{

font-size:34px;

}

.stats-grid,

.featured-grid,

.categories-grid,

.why-grid,

.steps-grid,

.faq-grid,

.footer-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-outline{

width:100%;

justify-content:center;

}

.product-preview{

padding:22px;

}

.stat-card,

.category-card,

.step-card,

.why-card,

.faq-card{

padding:25px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/*=====================================
Small Phones
=====================================*/

@media(max-width:480px){

.hero h1{

font-size:34px;

}

.logo-text small{

display:none;

}

.hero-badge{

font-size:13px;

}

.hero p{

font-size:16px;

}

.section-header h2{

font-size:28px;

}

}
/*=====================================
MARKETPLACE
1200px
=====================================*/

@media (max-width:1200px){

.marketplace-layout{

grid-template-columns:260px 1fr;

gap:25px;

}

.marketplace-hero h1{

font-size:50px;

}

.products-grid{

grid-template-columns:repeat(2,1fr);

}

}
/*=====================================
MARKETPLACE
992px
=====================================*/


/*=====================================
MARKETPLACE
768px
=====================================*/

@media(max-width:768px){

.marketplace-hero{

padding:120px 0 60px;

text-align:center;

}

.marketplace-hero h1{

font-size:38px;

}

.market-toolbar{

flex-direction:column;

align-items:stretch;

}

.market-search{

width:100%;

}

#sortProducts{

width:100%;

}

.category-chips{

justify-content:center;

}

.products-grid{

grid-template-columns:1fr;

}

.market-product{

max-width:100%;

}

.filter-card{

padding:22px;

}

}
/*=====================================
MARKETPLACE
480px
=====================================*/

@media(max-width:480px){

.marketplace-hero h1{

font-size:30px;

line-height:1.3;

}

.marketplace-hero p{

font-size:15px;

}

.section-tag{

font-size:13px;

}

.market-product-body{

padding:18px;

}

.market-product-title{

font-size:20px;

}

.market-product-price{

font-size:24px;

}

.market-product-footer{

flex-direction:column;

gap:15px;

align-items:stretch;

}

.market-product-footer .btn-primary{

width:100%;

text-align:center;

justify-content:center;

}

.chip{

padding:10px 16px;

font-size:14px;

}

}
/*=====================================
FLOATING ICONS
992px
=====================================*/


@media (max-width:992px){

.nav-menu,
.nav-right a{

    display:none;

}

.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.left-icons{

left:0;

}

.right-icons{

right:0;

}

}
/*=====================================
FLOATING ICONS
768px
=====================================*/

@media (max-width:768px){

.hero-container{

flex-direction:column;

text-align:center;

}

.hero-right{

width:100%;

min-height:220px;

margin-top:40px;

}

.floating-icons{

position:relative;

flex-direction:row;

justify-content:center;

gap:20px;

}

.left-icons,

.right-icons{

left:auto;

right:auto;

}

.right-icons{

margin-top:25px;

}

.social-icon{

width:55px;

height:55px;

font-size:24px;

}

}
/*=====================================
FLOATING ICONS
480px
=====================================*/

@media (max-width:480px){

.hero-right{

min-height:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.floating-icons{

flex-wrap:wrap;

justify-content:center;

}

.social-icon{

width:48px;

height:48px;

font-size:20px;

}

}
/*=====================================
MARKETPLACE RESPONSIVE
=====================================*/


@media(max-width:768px){

.market-toolbar{

flex-direction:column;

gap:20px;

align-items:stretch;

}

.market-search{

width:100%;

}

.market-search input{

width:100%;

}

.category-chips{

justify-content:center;

flex-wrap:wrap;

}

.pagination{

gap:8px;

}

}
@media(max-width:480px){

.products-grid{

grid-template-columns:1fr;

}

.product-count{

text-align:center;

}

.pagination button{

width:40px;

height:40px;

}

.empty-box{

padding:30px 20px;

}

}
/*==========================================
MOBILE NAVIGATION
==========================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#111827;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    max-width:85%;

    height:100vh;

    background:#071226;

    border-left:1px solid rgba(255,255,255,.08);

    transition:.35s;

    z-index:999;

    display:flex;

    flex-direction:column;

}

.mobile-menu.active{

    right:0;

}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-header h2{

    color:#fff;

}

.mobile-header span{

    color:#60A5FA;

}

.mobile-header button{

    background:none;

    border:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;

}

.mobile-nav{

    display:flex;

    flex-direction:column;

    padding:25px;

    gap:18px;

}

.mobile-nav a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#CBD5E1;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

}

.mobile-nav a:hover{

    color:#60A5FA;

    padding-left:8px;

}

.mobile-buttons{

    margin-top:auto;

    padding:25px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.mobile-buttons a{

    width:100%;

    justify-content:center;

}

@media (max-width:992px){

    .nav-links,
    .nav-actions{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .nav-container{

        justify-content:space-between;

    }

}

/*==========================================
STATISTICS RESPONSIVE
==========================================*/

@media (max-width:992px){

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.stat-card{

    padding:25px;

}

}

@media (max-width:768px){

.stats-grid{

    grid-template-columns:1fr;

}

.stat-card{

    text-align:center;

    padding:30px 20px;

}

.stat-icon{

    margin:0 auto 20px;

}

.stat-card h2{

    font-size:36px;

}

}

/*==========================================
CATEGORIES RESPONSIVE
==========================================*/

@media (max-width:992px){

.categories-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

}

@media (max-width:768px){

.categories-grid{

    grid-template-columns:1fr;

}

.category-card{

    text-align:center;

    padding:30px;

}

.category-icon{

    margin:0 auto 20px;

}

}

/*==========================================
WHY CHOOSE US
==========================================*/

@media (max-width:992px){

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

}

@media (max-width:768px){

.why-grid{

    grid-template-columns:1fr;

}

.why-card{

    text-align:center;

    padding:30px 20px;

}

.why-card i{

    margin-bottom:18px;

}

}

/*==========================================
HOW IT WORKS
==========================================*/

@media (max-width:992px){

.steps-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

}

@media (max-width:768px){

.steps-grid{

    grid-template-columns:1fr;

}

.step-card{

    text-align:center;

    padding:30px;

}

}

/*==========================================
FAQ
==========================================*/

@media (max-width:768px){

.faq-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.faq-card{

    padding:25px;

}

}

/*==========================================
NEWSLETTER
==========================================*/

@media (max-width:768px){

.newsletter-container{

    text-align:center;

}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.newsletter-form input,

.newsletter-form button{

    width:100%;

}

}

/*==========================================
FOOTER
==========================================*/

@media (max-width:992px){

.footer-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

}

@media (max-width:768px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.social-links{

    justify-content:center;

}

.footer-bottom{

    text-align:center;

}

}

/*==========================================
MARKETPLACE RESPONSIVE
==========================================*/

@media (max-width:992px){

    .marketplace-layout{

        grid-template-columns:1fr;

        gap:30px;

    }

    .filter-sidebar{

        order:2;

    }

    .products-wrapper{

        order:1;

    }

    .filter-card{

        position:static;

        width:100%;

    }

}

@media (max-width:768px){

    .marketplace-hero{

        padding:120px 0 60px;

        text-align:center;

    }

    .marketplace-hero h1{

        font-size:36px;

        line-height:1.2;

    }

    .marketplace-hero p{

        font-size:16px;

        margin:auto;

    }

}

@media (max-width:768px){

    .market-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .market-search{

        width:100%;

    }

    #sortProducts{

        width:100%;

    }

    .product-count{

        width:100%;

        text-align:center;

    }

}

@media (max-width:768px){

    .filter-card{

        padding:20px;

    }

    .filter-group{

        margin-bottom:20px;

    }

}

@media (max-width:992px){

    .products-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

}

@media (max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

    }

    .market-product{

        width:100%;

    }

    .market-product-image{

        height:180px;

    }

    .market-product-title{

        font-size:20px;

    }

    .market-product-price{

        font-size:24px;

    }

}

/*==========================================
MOBILE FILTER DRAWER
==========================================*/

.mobile-filter-bar{

    display:none;

    margin-bottom:20px;

}

.filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.filter-header button{

    display:none;

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#111827;

    color:#fff;

    cursor:pointer;

}

@media (max-width:768px){

    .mobile-filter-bar{

        display:block;

    }

    .filter-sidebar{

    position:fixed;

    top:0;

    left:-100%;

    width:320px;

    max-width:85%;

    height:100vh;

    background:#071226;

    z-index:9999;

    overflow-y:auto;

    transition:left .35s ease;

    padding:20px;

    box-shadow:10px 0 30px rgba(0,0,0,.45);

}

    .filter-sidebar.active{

        left:0;

    }

    .filter-card{

        position:static;

        border:none;

        padding:0;

        background:transparent;

    }

    .filter-header button{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}

/*=====================================
MARKETPLACE NAVBAR
=====================================*/

@media (max-width:992px){

    .market-navbar .navbar-container{

        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:nowrap;

    }

    .market-navbar .logo{

        flex:1;

    }

    .market-navbar .nav-menu,
    .market-navbar .nav-right{

        display:none;

    }

    .market-navbar .menu-toggle{

        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:auto;
        flex-shrink:0;

    }

}

.filter-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.filter-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==========================================
TABLET
==========================================*/

@media (max-width:992px){

    .desktop-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .market-layout{

        grid-template-columns:1fr;

    }

    .filter-sidebar{

        position:fixed;

        top:0;

        left:-100%;

        width:320px;

        max-width:85%;

        height:100vh;

        background:#08111F;

        z-index:9999;

        transition:.35s;

        overflow-y:auto;

        padding:25px;

    }

    .filter-sidebar.active{

        left:0;

    }

    .filter-card{

        background:transparent;

        border:none;

        padding:0;

        position:static;

    }

}

/*==========================================
MOBILE
==========================================*/

@media (max-width:768px){

    .navbar-container{

        height:72px;

    }

    .market-hero{

        padding:70px 0 50px;

    }

    .market-hero h1{

        font-size:34px;

    }

    .market-hero p{

        font-size:15px;

    }

    .hero-search{

        height:58px;

    }

    .hero-categories{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:10px;

        scrollbar-width:none;

    }

    .hero-categories::-webkit-scrollbar{

        display:none;

    }

    .chip{

        flex:0 0 auto;

    }

    .market-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .toolbar-left{

        justify-content:space-between;

    }

    .toolbar-right select{

        width:100%;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

    .product-bottom{

        flex-direction:column;

        gap:15px;

    }

    .buy-btn{

        width:100%;

        justify-content:center;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

}

/*==========================================
SMALL PHONES
==========================================*/

@media (max-width:480px){

    .logo-content small{

        display:none;

    }

    .market-hero h1{

        font-size:28px;

    }

    .market-hero p{

        font-size:14px;

    }

    .hero-search{

        height:54px;

    }

    .chip{

        padding:10px 16px;

        font-size:13px;

    }

    .price{

        font-size:24px;

    }

}

/* =========================================
   HOMEPAGE MOBILE MENU FIX
========================================= */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:9998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}


.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:85%;

    height:100vh;

    background:#081225;

    border-left:1px solid rgba(255,255,255,.08);

    padding:25px;

    z-index:9999;

    overflow-y:auto;

    transition:right .35s ease;

    box-shadow:-15px 0 40px rgba(0,0,0,.35);

}

.mobile-menu.active{

    right:0;

}


.mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;

}

.mobile-header h2{

    color:#fff;

    font-size:26px;

}

.mobile-header h2 span{

    color:#60a5fa;

}

#closeMenu{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#0f172a;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}


.mobile-nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mobile-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px;

    border-radius:12px;

    color:#cbd5e1;

    text-decoration:none;

    transition:.25s ease;

}

.mobile-nav a:hover{

    background:#10203c;

    color:#60a5fa;

}

.mobile-nav a i{

    width:22px;

    text-align:center;

}


.mobile-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:35px;

}

.mobile-buttons a{

    width:100%;

}


body.menu-open{

    overflow:hidden;

}