@media screen and (max-width:1600px){
    #my-swiper .swiper-slide{
        position: relative;
        width: 1300px;
      }
}
@media screen and (max-width:1400px){
   
    #my-swiper .swiper-slide{
        width: 1000px;
      }
}
@media screen and (max-width:1200px){
    body{
        font-size: 12px !important;
    }
    #my-swiper .swiper-slide{
        width: 900px;
      }
    .header-down{
        font-size: 12px;
    }
    #my-swiper .slide-txt strong{
        font-size: 1.3em;
      }
      #my-swiper .slide-txt span{
        font-size: 1.2em ;
      }
      #my-swiper-2 .swiper-slide{
        position: relative;
        width: 800px;
      }
      .pro-baner-sec .col-6{
        padding: 0px 50px;
      }
      .pro-ban-text{
        right:20%;
        font-size: 1.2em;
      }
      .pro-ban-img{
        left: 18%;

      }
       .owl-dots {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        background: none !important;
      }
      .owl-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 0 5px;
        background-color:#dad8d8;
        border: 1px solid var(--orange) !important;
        border-radius: 50%;
      }
      .owl-dot.active{
        background-color:var(--orange) !important;
    
      }
}
@media screen and (max-width:992px){
  .up-desk{
    display: none;
  }
  .up-mobile{
    display: block;
  }
    .bar-menu{
        display: block;
        font-size: 18px;
    }
    .web-search{
        display: none;
    }
    .basket-txt, .user-txt{
        display: none;
    }
    .header-down{
        display: none;
    }
    .res-search{
        display: block;
        background-color: black;
        padding: 10px 0px;
        position: relative;
        transition: all 0.3s ease-in-out;
        z-index: 0;
        transition: z-index 0.3s ease-in-out;
    }
    .res-search.header-hidden {
      transform: translateY(-100%);
      transition: transform .3s ease;
      z-index: -1;
    
    }
    #my-swiper .swiper-slide{
        width: 850px;
      }
      #my-swiper .slide-txt strong{
        font-size: 1.2em;
      }
      #my-swiper .slide-txt span{
        font-size: 1.1em ;
      }
      #my-swiper .slide-txt .more{
        font-size: .9em;
      }
      .nav-btns{
        right: 15%;
      }
      .nav-btns >div{
        width: 22px;
        height: 22px;
      }
      .nav-btns i{
        font-size: 10px;
      }
      .product-sec .pro-img{
        width: 100px;
        height: 100px;
      
      }
        .product-sec .pro-img{
        width: 101px;
        height: 101px;
      
      }
      .product-sec .pro-img::before {
  top: -3px;
  left: -1px;
  width: 101px;
  height: 101px;
    }
      #my-swiper-2 .swiper-slide{
        position: relative;
        width: 850px;
      }
      #my-swiper-3 .swiper-slide{
        position: relative;
        width: 850px;
      }
      .circle-category{
        position: relative;
      }
      /* .circle-category .owl-dots{
        position: absolute;
        bottom: 10px !important;
        right: 50%;
        transform: translateX(-50%);
      }
      .circle-category .owl-dots span{
        padding: 1px 8px;
        margin: 2px;
        border-radius: 50%;
        background-color: orange;
      } */
      .baner{
        position: relative;
        padding: 10px 20px;
      }
      .pro-baner-sec .col-6{
        padding: 0px 30px;
      }
      .pro-ban-text{
        right:18%;
        font-size: 1.2em;
      }
      .pro-ban-img{
        left: 15%;

      }
      .cook{
        width: 30px !important;
        height: 30px !important;
      }
       .cook {
  top: -5px;
  right: 0;
  transition: transform 0.4s ease;
}

      .footer-last{
        justify-content: center;
      }
      .cart-menu-container {
        width: 300px;
        background-color: #f8f8ff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: -0px;
        z-index: 1001;
        font-family: IRANYekanWebRegular;
        visibility: hidden;
        opacity: 0;
        margin-top: 1px;
        transform: translateY(0px);
        transition: transform .5s;
      }
      .product-card-img{
        width: 70px;
        height: 70px;
      }
      .product-card-img img{
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
      .amount{
        font-size: 1em;
      }
      .user-menu {
        width: 200px;
        position:absolute;
        top: 100%;
        left: 0px;
        font-size: .9em;
      }
      .user-header {
        padding: 10px;
      }
      .menu-item {
        display: flex;
        align-items: center;
        padding: 10px;
      }
      .off-canvas-header{
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        font-family: IRANYekanWebMedium;
        color: white;
        background-color: var(--orange);
      }
      .off-canvas-nav{
        padding-top:10px ;
      }
      .off-canvas-item{
        padding: 15px 20px;
      
      }
      .off-canvas-navs{
        background-color: #f5f5f5;
      
      }
      .off-canvas-item i{
        float: left;
      }
       .pro-card{
    position: relative;
    padding: 15px;
  }
  .cook {
  top: 0px;
  
}

}
@media screen and (max-width:768px){
 
  
   
    #my-swiper .swiper-slide{
        width: 650px;
        height: 300px;
      }
      .timer-sec {
        height: 290px;
        width: 150px; 
        padding: 5px;
      }
      .timer-sec .sale-img{
        width: 150px;
        height:150px;
        }
     .product-owl-container {
            width: calc(100% - 150px);
        }
     #my-swiper-2 .swiper-slide , #my-swiper-3 .swiper-slide {
         position: relative;
         width: 650px;
         }
     .baner .baner-img{
        width: 150px;
        height: 100px;
    }
    .baner .baner-img img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .pro-baner-sec .col-6{
        padding: 0px 10px;
      }
      .pro-ban-text{
        right:10%;
        font-size: 1.2em;
      }
      .pro-ban-img{
        left: 10%;

      }
      .footer-container{
        flex-direction:column;
        justify-content:center;
    }
    .footer-container >div:first-child{
      margin-top: 5px;
    }
    
}
@media screen and (max-width:576px){
   
    #my-swiper .swiper-slide{
        width: 500px;
        height: 250px;
      }
      #my-swiper .slide-txt{
        
        right: 2%;
        
      }
      #my-swiper .slide-txt strong{
        font-size: 1em;
      }
      #my-swiper .slide-txt span{
        font-size: .9em ;
      }
      #my-swiper .slide-txt .more{
        font-size: .7em;
      }
      .product-sec .pro-img{
        width: 90px;
        height: 90px;
      
      }
      .product-sec .pro-img::before {
  top: -3px;
  left: -1px;
  width: 91px;
  height: 91px;
    }
      .footer-list-container{
        flex-direction: column;
    }
    .footer-list-container .footer-list{
        width: 100%;
        margin-top: 20px;
      }
    .footer-list >div:first-child{
        margin-bottom: 5px;
        border-bottom: 1px solid var(--orange);
        display: flex;
      }
      .footer-list i{
      display: block;
      margin-right: auto;
      color: var(--orange);
      cursor: pointer;
      }
      .footer-tab{
        padding-bottom: 5px;
      }
      .footer-list-content {
        margin-top: 10px;
        display: none;
      }
      #my-swiper-2 .slide-txt-2 span{
        margin-top: 10px;
        font-size: 1em ;
        
      }
    
      #my-swiper-2 a span{
        color: #333 !important;
        font-size: 0.8em !important;
      }
      #my-swiper-3 .slide-txt-2 span{
        margin-top: 10px;
        font-size: 1em ;
        
      }
    
      #my-swiper-3 a span{
        color: #333 !important;
        font-size: 0.8em !important;
      }
}
@media screen and (max-width:480px){
   
    #my-swiper .swiper-slide{
        width: 380px;
        height: 200px;
      }
    .brand-header{
      width: 150px;
    }
    .brand-header img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .user-img{
      width: 38px;
      height: 38px;
    }
    .user-img img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .basket-img{
      width: 40px;
      height: 40px;
    }
    .basket-img img{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .product-sec .pro-img{
      width: 80px;
      height: 80px;
    }
    .product-sec .pro-img::before {
  top: -3px;
  left: -1px;
  width: 81px;
  height: 81px;
    }
    
    .timer-sec {
        width: 130px; 
        justify-content: center;
     }
     .timer-sec strong{
         font-size:1.5em;
     }
    .timer-sec .sale-img{
        width: 120px;
        height:120px;
        }
        
    .product-owl-container {
            width: calc(100% - 130px);
       }
   
    .product-owl-container .nav-btn{
        display: none;
     }
     .product-img{
        width: 120px;
        height: 140px;
      }
      .product-img img{
          width:100%;
          height:100%;
          object-fit:contain
      }
      .sale-sec{
        padding-right: 12px !important;
        padding-left: 12px !important;
      }
      #my-swiper-2 .swiper-slide , #my-swiper-3 .swiper-slide {
        position: relative;
        width: 380px;
        height: 220px;
        }
        #my-swiper-2 .swiper-slide img, #my-swiper-3 .swiper-slide img{
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
        
        .category-sec .pro-img{
          width: 100px;
          height: 100px;

        }
        .pro-ban-img{
          width: 100px;
          height: 100px;
          left: -7px !important;
          bottom: 70px;
        }
        .pro-ban-img img{
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        /* .pan-2 {
          width: 105px;
          left: -10px !important;
          bottom: 80px;
        } */
        .chat-box{
          bottom: 70px;
          right: 20px;
          width: 300px;
        }
        .chat-text{
          height: 280px;
        }
    

}
@media screen and (max-width:380px){
    .category-sec .pro-img{
          width: 90px;
          height: 90px;

        }
    .category-sec .category-item{
        padding:10px 0px !important;
    }
}