/* =========================================================
   RESPONSIVE
   Tank Life Store
========================================================= */

/* ---------- 1600px ---------- */

@media (max-width:1600px){

    .home-container{
        width:calc(100% - 30px);
    }



}

/* ---------- 1400px ---------- */

@media (max-width:1400px){

    .categories-list{
        grid-template-columns:repeat(3,1fr);
    }

    .market-layout{
        grid-template-columns:minmax(0,1fr) 280px;
    }

}

/* ---------- 1200px ---------- */

@media (max-width:1200px){

    .hero h1{
        font-size:54px;
    }

    .hero p{
        font-size:18px;
    }

    

    .news-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   TABLETS
========================================================= */

/* ---------- 992px ---------- */

@media (max-width:992px){

    .market-layout{

        grid-template-columns:1fr;

        gap:24px;

    }

    .market-right{

        position:static;

    }

 

    .categories-list{

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

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .hero{

        min-height:620px;

    }

    .hero h1{

        font-size:46px;

        line-height:1.1;

    }

    .hero p{

        font-size:17px;

    }

    .hero-features{

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

    }

}


/* ---------- 768px ---------- */

@media (max-width:768px){

    .home-container{

        width:calc(100% - 20px);

    }

    .products-box,
    .news-box,
    .top-sellers{

        padding:20px;

    }

    .products-head,
    .news-header,
    .sidebar-head{

        padding:0;
        margin-bottom:20px;

    }

    .products-head h2,
    .news-header h2,
    .sidebar-head h3{

        font-size:26px;

    }



    .news-grid{

        padding:0;

    }

    .news-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .news-image{

        width:100%;

        height:180px;

    }

    .seller-banner{

        height:300px;

    }

    .seller-banner h3{

        font-size:30px;

    }

    .hero{

        min-height:560px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-btn{

        margin:auto;

    }

}

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

/* ---------- 576px ---------- */

@media (max-width:576px){

    .hero{

        min-height:500px;

        padding:110px 0 70px;

    }

    .hero h1{

        font-size:38px;

        line-height:1.05;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

        margin-top:18px;

    }

    .hero-btn{

        width:100%;

        max-width:320px;

        justify-content:center;

        margin-top:28px;

    }

    .hero-features{

        grid-template-columns:1fr;

        gap:14px;

    }

    .categories-list{

        grid-template-columns:1fr;

    }

    .category-card{

        min-height:82px;

    }

  

  

    .product-title{

        font-size:18px;

    }

    .product-price{

        font-size:30px;

    }

    .seller-banner{

        height:270px;

    }

    .seller-banner h3{

        font-size:28px;

    }

    .news-card{

        padding:14px;

    }

    .news-image{

        height:170px;

    }

}


/* ---------- 480px ---------- */

@media (max-width:480px){

    .home-container{

        width:calc(100% - 16px);

    }

    .products-box,
    .news-box,
    .top-sellers{

        border-radius:16px;

        padding:16px;

    }

    .products-head,
    .news-header,
    .sidebar-head{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .products-head h2,
    .news-header h2,
    .sidebar-head h3{

        font-size:24px;

    }

    .product-content{

        padding:16px;

    }

    .product-bottom{

        margin-top:14px;

    }

    .product-buy{

    min-width:110px;

    width:auto;

    height:48px;

    padding:0 20px;

    }

    .seller-row{

        grid-template-columns:24px 40px 1fr;

        gap:10px;

    }

    .seller-avatar{

        width:40px;

        height:40px;

    }

    .seller-info strong{

        font-size:14px;

    }

    .seller-info span{

        font-size:12px;

    }

    .news-title{

        font-size:16px;

    }

    .news-date{

        font-size:12px;

    }

    .news-link{

        font-size:14px;

    }

    .seller-banner-overlay{

        left:18px;

        right:18px;

        bottom:18px;

    }

}


/* ---------- 360px ---------- */

@media (max-width:360px){

    .hero h1{

        font-size:32px;

    }

    .hero p{

        font-size:15px;

    }

    .hero-btn{

        height:52px;

        font-size:15px;

    }

    .product-price{

        font-size:26px;

    }

    .seller-banner{

        height:240px;

    }

}

@media(max-width:992px){

    .market-layout{

        grid-template-columns: minmax(0,1fr) !important;

    }


    .market-left,
    .products-box{

        min-width:0 !important;
        width:100% !important;
        max-width:100% !important;

    }

}