/* responsive */
@media(min-width: 991.98px) and (max-width: 1199px){
    #product-list.row-cols-lg-4 .col{
        width: 33.33%;
    }
    .foot-app img {
        max-width: 95px;
    }
     #menu .nav > li > a, .view_more.my-menu {
    	padding: 6.5px 9px;
    }
  #search .input-lg {
    width: 58%;
  }
  .all-ser .d-inline-block {
    display: block !important;
    text-align: center !important;
  }
  .ser-co{
    margin-top: 7px;
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .foot-app ul {
    padding-left: 15px;
  }
  .foot-app .title-footer{
    font-size: var(--font-size-body);
  }
}
@media(min-width: 768px) and (max-width: 991.98px){
    #top #top-links.top-right{
        width: 63%;
    }
    .top-left-social{
        width: 37%;
    }
    #top-links ul li {
    	padding: 0 10px;
    }
    .cart-page {
    	display: block;
    }
    #menu .dropdown-inner a{
        min-width: 130px;
        padding: 10px 8px;
    }
    #menu .nav > li > a, .view_more.my-menu {
        padding: 8.2px 10px;
    }
    footer h5 {
        font: 500 16px/24px "Poppins",Helvetica,sans-serif;
    }
    .foot-app img {
        max-width: 78px;
    }
    .sliderightbanner {
        display: none;
    }
    #menu .navbar-toggler{
        display: none;
    }
    #menu{
        display: block;
    }
    #narbar-menu{
        display: block !important;
    }
    .service ul {
        text-align: center;
    }
    .service ul li{
        display: block;
    }
    .service ul li h4{
        margin-top: 10px;
    }
  .xs-menu{
      position: absolute;
      margin-top: -63px;
      margin-left: 15px;
  }
  .ser-block{
    width: 50%;
  }
  #header-cart li.list-inline-item {
    margin: 0 20px;
  }
  .top-contact{
    font-size: var(--font-size-h5);
  }
}
@media(max-width: 991.98px){/*a value of `991px` apparently fails to enforce `display: none` at 991px, allegedly because sub-pixel rounding??? or some other obscure phenomenon?*/
  .title-footer,#inspire-search-category{
    display: none !important;
  }
  .foot-app ul{
    padding: 0;
  }
  .speech{
    left: 0;
    border-radius: 5px;
  }
  #search .input-lg{
    width: 100%;
  }
  #search .input-lg{
    border-radius: 5px;
  }
}
@media(max-width: 767.98px){
    .pro-content.product-right h1{
        font-size: var(--font-size-title);
        margin-top: 15px;
    }
    .tab-pro.category-tab {
        padding-bottom: 8px;
    }
    #top-links .lang-cur{
        float: right;
    }
    .heading{
        margin-top: 30px;
    }
    .category-tab .nav-tabs {
        margin-right: 0;
        text-align: center;
        position: absolute;
        background-color: var(--color-neutral-light-100);
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 5px 0px;
        left: 0px;
        right: 0px;
        margin-top: 40px;
        z-index: 9;
    }
    .category-tab .nav-tabs>li {
        display: block;
        float: none;
        padding: 5px 0;
        width: 100%;
    }
    .catbe {
        text-align: right;
        position: relative;
        right: 75px;
        top: -4px;
    }
    .foot-bottom {
        padding: 15px 0;
        text-align: center;
        margin-top: 20px;
    }
    .service ul {
        padding: 6px 0px;
    }
    .foot-pay img {
        float: none !important;
        margin: 0 auto;
    }
    .foot-app img {
        margin: 12px 0 15px 0px;
    }
    .foot-top {
        margin-bottom: 20px;
    }
  .catbe .toggle.collapsed::after{
    content: '+';
    font-size: var(--font-size-body);
    font-weight: normal;
    float: right;
    cursor: pointer;
  }
  .catbe .toggle::after{
    font-family: 'FontAwesome';
    content: '-';
    font-size: var(--font-size-body);
    font-weight: normal;
    float: right;
    cursor: pointer;
  }
  .catbe button{
      padding: 0;
  }
  #search_block_top .input-group-btn {
    right: -8px;
  }
  .allmenu {
    background-color: transparent;
    height: auto;
    border: none;
    margin: 0;
  }
  .propage-tab .nav-tabs > li > a {
      font-size: var(--font-size-h5);
      padding: 8px 5px;
  }
  .countreview {
      margin: 0 8px;
  }
  #product-list .col{
      padding-left: 7px;
      padding-right: 7px;
  }
  #product-list{
    margin-left: -7px;
    margin-right: -7px;
  }
  .cate-border .input-group label, .cate-border .input-group select {
    height: 34px;
    font-size: var(--font-size-h5);
    line-height: 16px;
    padding: 4px;
  }
  .cate-sort{
    padding: 0;
  }
  .list-grid-button{
    margin-bottom: 15px;
  }
  .product-thumb .button-group button {
      opacity: 1;
  }
  .product-thumb .content .mt-3{
      margin-top: 10px !important;
  }
  .product-thumb .button-group {
      position: unset;
      margin-top: 10px;
  }
  #common-home .mt-5,.tab-pro,.service-bg,.topbanner,.logo-slider,footer{
    margin-top: 30px !important;
  }
  footer h5 {
	font: 500 16px/24px "Poppins",Helvetica,sans-serif;
  }
  .homeadd .btn-crt {
	padding: 0 11px;
  }
  .pro-tab-title.nav-tabs .nav-link {
    margin: 0 3px;
    font-size: var(--font-size-body);
  }
  .tab-pro-title h3{
      text-align: left;
      font-size: var(--font-size-1rem);
  }
  .tab-pro-title, .heading h3, .home-heading{
      font-size: var(--font-size-1rem);
  }
  .price-old {
    font-size: var(--font-size-h5);
  } 
  .price-new {
    font-size: var(--font-size-body);
  }
  .xs-menu {
    position: absolute;
    top: 10px;
    left: 13px;
    width: 45px;
    z-index: 100000;
  }
  /* #top a.dropdown-toggle {
      color: var(--color-neutral-dark-00);
  } */
  #menu i{
    color: var(--color-neutral-dark-05);
      font-size: 16pt;
      padding: 8px;
	  }
   #menu .closebtn icon
   {
    color: var(--color-neutral-light-90);
   }
  .button-group button, .button-group a {
    padding: 5px 7px;
    width: 30px;
    height: 30px;
    font-size: var(--font-size-title);
  }
  .top-search{
      margin-top: 20px;
  }
  .xslogo {
    max-width: 130px;
    position: relative;
    z-index: 99;
  }
  #logo img {
    max-width: 120px;
  }
  .pro-tab-title.nav{
    margin: 0;
    text-align: left;
  }
  .all-ser {
    text-align: left !important;
    padding: 0 15px;
  }
  .ser-block{
    width: 100%;
    border: none !important;
  }
  .footmr .pull-right img{
    max-width: 295px;
    margin-top: 15px;
  }
  footer h5:after{
    display: none;
  }
  footer h5 .btn {
    position: absolute;
    right: 15px;
    width: 100%;
    text-align: right;
  }
  footer h5 .toggle::after{
    color: var(--color-neutral-light-100) !important;
    text-shadow: none;
    background: none;
    background-image: none;
    background-image: none;
    border: 0;
    box-shadow: none;
    font-size: var(--font-size-h5);
    position: absolute;
    top: -12px;
    right: 0;
    width: 100%;
    padding: 9px 0;
  }
  footer h5 .toggle.collapsed::after{
    content: '+';
    font-size: var(--font-size-body);
    font-weight: normal;
    float: right;
    cursor: pointer;
  }
  footer h5 .toggle::after{
    font-family: 'FontAwesome';
    content: '-';
    font-size: var(--font-size-body);
    font-weight: normal;
    float: right;
    cursor: pointer;
  }
  footer h5 {
    margin-bottom: 15px;
  }
  .footmr {
    margin-top: 15px;
  }
}
@media(min-width: 360px) and (max-width: 599px){
    .block-cat-wr {
        width: 50%;
    }
}
@media(max-width: 575px){
    #carousel-banner-0{
      margin-top: 30px;
    }
    #carousel-banner-0 .col-6 {
        width: 100%;
    }
    #carousel-banner-0 .col-6 img{
        margin: 5px 0;
    }
    .foot-app img {
        max-width: 85px;
    }
    .secondbanner, .cbanner, .imgbanner {
        width: 50%;
    }
    .cbanner {
        display: none;
    }
    .tab-head {
        display: none;
    }
    ul#TopProducts {
        margin-bottom: 15px;
    }
}
