@media(max-width:1200px){

    /* ======================== index page css ================= */

    

    

    /* ======================== product page css ================= */

    

    

    /* ======================== shop page css ================= */

    

    

    /* ======================== catalog page css ================= */

   

   

    /* ======================== blogs page css ================= */

   

   

    /* ======================== aboutus page css ================= */

   

   

    /* ======================== contact page css ================= */

}



@media(min-width: 992px){

    .header .menu-list ul li.has-submenu:hover > .sub-menu{

        opacity: 1;

        visibility: visible;

    }

}



@media(max-width:992px){



    /* ======================== index page css ================= */

    .header{

     

    }

    .header .logo img{

        width: auto;

    }

    .header .logo h2{

        line-height: 1;

    }

    .trending{

        padding: 0 15px;

    }

    .slick-prev{

        left: 0;

    } 

    .slick-next{

        right: 20px;

    }

    .header .menu-list{

        position: fixed;

        width: 300px;

        height: 100%;

        background: #fff;

        top: 0;

        left: -300px;

        z-index: 99999;

        transition: left .5s;

    }

    .header .menu-list.active{

        left: 0;

        box-shadow: 2px 0px 4px rgb(0 0 0 / 15%);

    }

    .header .menu-list .close-menu{ 

        display: block;

        position: absolute;

        top:15px; 

        right: 15px;

        transform: rotate(45deg);



    }

    .header .menu-list .close-menu i{

        cursor: pointer;

        font-size: 26px;

    }

    .header .menu-list .responsive-logo{

        display: block;

        padding: 0 0 20px 0;

    }

    .header .menu-list .responsive-logo a{

        display: flex;

        text-decoration: none;

        text-align: center;

        color: #333;

        font-size: 20px;

        font-weight: 500;

    }

     .header .menu-list .responsive-logo a img{

         width: 50%;

     }

    .header .menu-list > ul{

    flex-direction: column;

    align-items: start;

    justify-content: start;

    padding: 0;

    margin: 0;

    }

    .header .menu-list > ul > li{

    padding: 10px 10px;

    width: 100%;

    }

    .header .menu-list > ul > li > a{}

    .header  .toggle-menu{

        display: flex;

        margin-left: auto;

        justify-content: center;

        align-items: center;

        padding: 0;

        height: 100%;

    }



    .header .menu-list ul li > .sub-menu{

        position: relative;

        left:0;

        margin: 0;

        border: none;

        padding: 10px;

        display: none;

    }

    .header .menu-list ul li > .sub-menu.active{

        display: block;

        visibility: visible;

        opacity: 1;

    }

    

    .header .menu-list > ul > li.has-submenu > a {

        justify-content: space-between;

    }









    /* ======================== product page css ================= */

    

    

    /* ======================== shop page css ================= */

    

    

    /* ======================== catalog page css ================= */

   

   

    /* ======================== blogs page css ================= */

   .blogs{

        padding: 30px 20px;

   }

   .blogs .blogs-section .blogs-content .blog-post-title h3{

    font-size: 16px;

   }

   .blogs .blogs-section .blogs-content .blog-read-more{

    padding: 10px 0;

   }

    

   

   

   /* ======================== aboutus page css ================= */

   

    .aboutus{

        padding: 30px 20px;

    }

    .team{

        padding: 20px 20px;

    }

    .history{

        padding: 20px 20px;

    }

   

    /* ======================== contact page css ================= */







}

@media(max-width:768px){



    /* ======================== index page css ================= */

    .body-section{

        padding: 15px;

    }

    .header .logo img{

        width: 50%;

    }

    .header{

        

    }

    .header .logo h2{

        line-height: 1.3;

    }

    .slider-section .slider{

        

    }

    .disc-sale-flat{

        padding: 20px 0;

    }

    .disc-sale-flat .dsf-box{

        margin-bottom: 20px;

    }

    .trending .trending-title{

        padding-top: 0;

    }

    .slick-prev{

        left: 0;

    } 

    .slick-next{

        right: 20px;

    }

    .disc-sale-flat{

        padding: 40px 10px;

    }

    .disc-sale-flat .first-dsf-box{ padding-left: 14px;}

    .disc-sale-flat .second-dsf-box{}

    .disc-sale-flat .third-dsf-box{ padding-right: 14px;}

    .browse-section .slider{

        height: 300px;

    }

    .browse-section .slider-content{

        padding: 40px 50px;

    }

 

    footer{

        padding: 50px 20px 10px;

    }



    footer .footer-title{

        padding-bottom: 0;

    }

    footer .footer-add{

        padding: 20px 0;

    }

    footer form{

        padding: 20px 0;

    }

    .bottom-footer p{

        line-height: 1.3;

    }

    

    /* ======================== product page css ================= */

    

    

    /* ======================== shop page css ================= */

    

    

    /* ======================== catalog page css ================= */

    .catalog{

        padding: 20px 20px;

    }

    .catalog .catalog-content .title h2{

        font-size: 38px;

    }

   

    /* ======================== blogs page css ================= */

    .blogs{

        padding: 20px 10px;

    }

    .blogs .category{

        padding-bottom: 20px;

    }

    .blogs .category .cate-list ul{

        display: flex;

        flex-wrap: wrap;

    }

    .blogs .category .cate-list ul li{

        padding: 0 10px;

    }

    .blogs .category .cate-list ul li:before{

        display: none;

    }

   

   

    /* ======================== aboutus page css ================= */

    

    .team .teamer-details,

    .team .team-member{

        margin-bottom: 20px;

    }





   

    /* ======================== contact page css ================= */

    .map{

        padding: 0;

        padding-bottom: 20px;

    }





}

@media(max-width:576px){



    /* ======================== index page css ================= */

    .topheader{

        display: none;

    }

    .slick-prev{

       left: 0; 

    } 

    .slick-next{

        right: 20px;

    }

    .header .toggle-menu{

        margin-right: 0;

    }

    .browse-section .slider{

        height: 250px;

    }

    .browse-section .slider-content .title h2{

        font-size: 38px;

    }

    .browse-section .slider-content .title h1{

        font-weight: 600;

    }

    footer{

        padding: 15px 20px;

    }

    footer .footer-add{

        padding: 20px 0;

    }

    footer form{

        padding: 20px 0;

    }

    .bottom-footer p{

        line-height: 1.3;

    }





    /* ======================== product page css ================= */

    .product-section .trending-box .trending-img{

    

    }

    

    /* ======================== shop page css ================= */

    .shop .shop-content .color{

        padding: 0;

    }

    .shop .shop-content .desc{

        padding: 5px 0;

    }

    .trending .trending-box .trending-img{

        

    }

    .trending .trending-box .trending-img img{

    

    }

    

    /* ======================== catalog page css ================= */

    .catalog{

        padding: 20px 10px;

    }

    .catalog .catalog-content{

        flex-direction: column;

        align-items: center;

    }

    .catalog .catalog-btn{

        padding-top: 20px;

        text-align: center;

    }

   

   

    /* ======================== blogs page css ================= */

   

   

   

    /* ======================== aboutus page css ================= */

   

    .team .team-member{

        margin-bottom: 0;

    }

    .team .teamer-details{

        padding: 15px 0;

    }

    .team{

        padding-bottom: 0;

    }

    .team .section-title h3, .history .section-title h3{

        font-size: 24px;

    }

   

    /* ======================== contact page css ================= */

    .contact-form form,

    .contact-form .footer-add{

        padding: 20px 0;

    }





}

@media(max-width:360px){



    /* ======================== index page css ================= */

    

    .header{

        

    }

    .body-section{

        padding: 0;

    }

    .slider-section .slider{

      

    }

    .browse-section{

        padding-top: 0;

    }

    .browse-section .slider{ height: 200px;}

    .browse-section .slider-content{padding:  30px;}

    .browse-section .slider-content .title h2{

    font-size: 24px;

}

    .browse-section .slider-content .title h1{

    font-size: 30px;

}

    footer{

        padding: 15px 0;

    }

    /* ======================== product page css ================= */

    

    

    /* ======================== shop page css ================= */

    

    

    /* ======================== catalog page css ================= */

    .catalog .catalog-content .title h2{

        font-size: 28px;

        padding-bottom: 10px;

    }

   

    /* ======================== blogs page css ================= */

   

   

    /* ======================== aboutus page css ================= */

    .aboutus{

        padding: 20px 10px;

    }

   

    /* ======================== contact page css ================= */







}