body{
  min-height: 100vh;
  background: white;
  color: white;
  background-size: cover;
  background-position: center;
 }

 .all-products{
  position: relative;
  overflow: hidden;
  display: flex;
  padding: 0 10%;
  min-height: 450px;
  margin-top: 88px;
 }

 .link-allproduct{
  text-decoration: none;
  overflow: hidden;
  width: 300px;
  height: 350px;
  padding: 20px;
 }
 
 figure{
     margin: 0 !important;
 }

 .flex{
  display: flex;
 }

 .menu-btn{
  background: #fff;
  padding: 10px;
  border-radius: 50%;
  color: rgb(0, 0, 0);
  font-size: 35px;
  cursor: pointer;
  z-index: 3;
  font-size: 24px;
  display: none;
 }

  .title-ap {
    z-index: 4;
    font-size: 28px;
  }

 .side-bar{
  background: #fff;
  color: #33363a;
  backdrop-filter: blur(15px);
  /*width: 240px;*/
  height: 100%;
  /*position: absolute;*/
  /*top: 0;*/
  /*left: -550px;*/
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
 }
 
 .sidebar{
     width: 20%;
 }

 .side-bar::-webkit-scrollbar {
    width: 0px;
  }
  
  .new-side{
    margin-left: 15px;
    width: 100%;
  }
  
  .side-bar .menu::-webkit-scrollbar {
    width: 2px;
  }

  .side-bar.active{
    left: 0;
  }

  .top-sidebar {
    display: flex;
  }

  .top-sidebar .title-sidebar{
    margin: 15px 0px 15px 25px;
    font-weight: 400;
  }

  .top-sidebar .title-2{
    margin: 15px 0px 15px 5px;
  }

  .center{
    margin-top: 35px;
    margin-bottom: 30px;
    pointer-events: none;
    font-weight: 700;
  }

  h1{
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    padding-bottom: 13px;
    font-family: sans-serif;
    letter-spacing: 2px;
  }

  .close-btn{
    position: absolute;
    color: #262627;
    font-size: 23px;
    right:  0px;
    margin: 15px;
    cursor: pointer;
    display: none;
   }

   .side-bar .menu{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
   }
   .side-bar .menu .item{
    position: relative;
    /*cursor: pointer;*/
    color: #58585A;
   }
   .side-bar .menu .item a{
    color: #58585A;
    font-size: 16px;
    width: max-content;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 5px 0px;
    margin-bottom: 20px;
    /*line-height: 40px;*/
   }

   .side-bar .menu .item a:hover{
    background: #fff;
    transition: 0.3s ease;
   }
   .side-bar .menu .item i{
    margin-right: 15px;
   }

   .side-bar .menu .item a .dropdown{
    position: absolute;
    right: 0;
    margin: 20px;
    transition: 0.3s ease;
   }
   .side-bar .menu .item .sub-menu{
    background: #fff;
    display: none;
   }
   .side-bar .menu .item .sub-menu a{
    padding-left: 80px;
    font-size: 14px;
   }

   .rotate{
    transform: rotate(180deg);
   }

   .right-bar{
    overflow: hidden;
    /*margin-left: 250px;*/
    width: 80%;
   }

   .flex-top-ap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    width: 100%;
   }

   .title-right-bar{
    font-size: 28px;
    color: #58585A;
    font-weight: 700;
    display: flex;
    align-items: center;
   }

   .all-product-container{
    width: 99%;
    height: 60vh;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }

   .all-product-card{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5%;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 1100px;
   }
   
   .all-pro-no-pro {
        display: flex;
        justify-content: center;
        width: 100%;
        font-weight: 700;
        color: #58585A;
    }
   
   .img-card-all {
        position: relative;
        height: 200px;
    }
    
    .hover-sold {
        width: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: absolute;
        text-align: center;
        top: 0;
        text-decoration: none;
    }
    
    .hover-sold-text {
        width: 55%;
        height: 55%;
        position: absolute;
        background: #958ebf;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-radius: 50%;
    }
    
    .img-card-all:hover .hover-sold{
        display: flex;
    }
    
    .img-card-all .img-all {
        width: 200px;
        height: 200px;
        display: flex;
        margin: auto;
        object-fit: contain;
        aspect-ratio: 1;
    }

   .flashsale-shape {
        position: absolute;
        top: -10px;
        right: -10px;
        background: #E17EAC;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: 700;
        border: 2px solid white;

    }
    .flashsale-shape:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: pink;
        transform: rotate(135deg);
        border-radius: 5px;
    }
    
    .hover-add-to-cart{
        text-decoration: none;
        /* opacity: 0.8; */
        background: transparent;
        color: #EFEEFC;
        width: 100%;
        top: 30%;
        position: absolute;
        display: none;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 14px;
        line-height: 28px;
        cursor: pointer;
    }
    
    .hover-add-to-cart-2{
        text-decoration: none;
        /* opacity: 0.8; */
        background: transparent;
        color: #EFEEFC;
        width: 100%;
        top: 50%;
        position: absolute;
        display: none;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 14px;
        line-height: 28px;
        cursor: pointer;
    }
    
    .hover-add-to-cart-container{
        width: 80%;
        background: #958ebf;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .card-promo:hover .hover-add-to-cart {
        display: flex;
    }
    
    .card-promo:hover .hover-add-to-cart-2 {
        display: flex;
    }
    
   .all-product-promo {
        position: absolute;
        top: -15px;
        right: -15px;
        background: #E17EAC;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: 700;
        border: 2px solid white;
    }

    .all-product-flashsale {
        position: absolute;
        top: 0px;
        background: #958EC1;
        padding: 6px;
        border-radius: 10px 30px 30px 10px;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 600;
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 998;
    }
    
    .text-fs-tag{
        font-size: 12px; 
        padding: 0; 
        z-index: 998;
    }
    
    .all-product-img-fs{
        width: 110px !important;
        height: 14px !important;
        z-index: 998;
    }

    /*.all-product-flashsale:before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 3px;*/
    /*    right: 3px;*/
    /*    background: #F181B3;*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*    border-radius: 5%;*/
    /*    color: #fff;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    border-radius: 50%;*/
    /*    font-size: 12px;*/
    /*    letter-spacing: 1px;*/
    /*    font-weight: 700;*/
    /*    border: 2px solid white;*/
        /* transform: rotate(135deg); */
    /*}*/

    .m-autos{
      margin: auto;
      margin-bottom: 20px;
    }

    .group {
      display: flex;
      line-height: 28px;
      align-items: center;
      position: relative;
      max-width: 200px;
    }

    .icon {
      position: absolute;
      left: 1rem;
      fill: #9e9ea7;
      width: 1rem;
      height: 1rem;
    }

    .input {
      width: 100%;
      height: 40px;
      line-height: 28px;
      padding: 0 1rem;
      padding-left: 2.5rem;
      border: 2px solid transparent;
      border-radius: 8px;
      outline: none;
      background-color: #f3f3f4;
      color: #0d0c22;
      transition: .3s ease;
      font-size: 12px;
    }
    
    .sidebar-profile-box{
        display: none !important;
    }
    
    /*.float-arrow-up {*/
    /*    width: 180px;*/
    /*    height: 40px;*/
    /*    background: #958ebf;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    border-radius: 30px;*/
    /*    margin: 20px auto 10px;*/
        /*margin-bottom: 20px;*/
    /*    cursor: pointer;*/
    /*    transition: margin-bottom 0.5s ease;*/
    /*    font-size: 14px;*/
    /*    font-weight: 600;*/
    /*}*/
    
    .float-arrow-up {
        display: flex;
        margin: auto;
        /* margin-right: 18px; */
        padding: 8px;
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: center;
        background: #958EC1;
        border: #958EC1;
        color: #fff;
        transition: margin-bottom 0.5s ease;
        margin-bottom: 15px;
        font-weight: 600;
        border-radius: 30px;
        font-size: 12px;
    }
    
    .float-arrow-up:hover{
      background: #6f6992;
    }
    
    .pop-up-variant-bg{
        width: 100%;
        height: 100%;
        background: #c2c2c2;
        opacity: 0.5;
        border-radius: 6px;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translate(-50%,-50%) scale(0.1);
        text-align: center;
        padding: 20px;
        color: #111;
        visibility: hidden;
        transition: transform 0.4s, top 0.4s;
        z-index: 9;
    }
    
    .pop-up-variant{
        width: 30%;
        height: 460px;
        background: #fff;
        opacity: 1;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translate(-50%,-50%) scale(0.1);
        text-align: center;
        padding: 20px;
        color: #111;
        visibility: hidden;
        transition: transform 0.4s, top 0.4s;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .x-icon-do-co {
        width: 20px;
        height: 20px;
        position: absolute;
        cursor: pointer;
        font-size: 20px;
        right: 0;
        top: 0;    
    }
    
    .open-popup-variant{
        visibility: visible;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        z-index: 999;
    }
    
    .open-popup-variant-bg{
        visibility: visible;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        z-index: 999;
    }
    
    .content-mitra-popup {
        width: 100%;
        font-weight: 600;
        color: #636363;
        padding: 0;
        margin: 30px auto 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .more-info-mitra-popup{
        width: max-content;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F181B3;
        border-radius: 30px;
        border: solid 2px #F181B3;
        color: #fff;
        padding: 5px 15px;
        margin: 10px auto;
        transition: background 0.5s;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .more-info-mitra-popup:hover{
        background: #FFF;
        color: #F181B3;
    }
    
    .top-container{
      text-align: center;
      padding: 0px 0px 0px 0px;
    }
    
    .img-all-pop-up-variant{
        width: 200px;
        height: 200px;
        display: flex;
        margin: 30px auto;
        object-fit: contain;
        aspect-ratio: 1;
    }
    
    .title-mitra {
        font-size: 28px;
        font-weight: 700;
        color: #958EBF;
        line-height: 26px;
        padding-top: 30px;
    }
    
     .flex-content-pd{
      display: flex;
      align-items: center;
      justify-content: center;
     }
     
      .flex-content-pd i{
      margin-right: 6px;
      color: #E17EAC;
     }
     
      .radio-variant{
      display: none;
     }
     
     .category-variant-2 {
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       padding: 6px 14px;
       /*width: 60px;*/
       font-size: 10px;
       border-radius: 30px;
       border: 2px solid #E17EAC;
       font-weight: 700;
       letter-spacing: 0.5px;
       margin-left: 10px;
     }
     
      .category-variant-2 {
       background: #fff;
       color: #E17EAC;
     }
     
      input[type="radio"]:checked + label {
       background: #E17EAC; 
       color: #fff;
       border: 2px solid #E17EAC;
     }
     
     .resp-popup{
         width: 100%;
         height: 100%;
         position: relative;
     }

    .category-scroll{
        text-align: center;
        position: absolute;
        bottom: -500px;
        z-index: -1;
        padding-bottom: 20px;
        width: 100%;
        height: max-content;
        background: #fff;
        border-radius: 30px 30px 0px 0px;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
        transition: bottom 0.5s ease;
    }
    
    #category-back{
        cursor: pointer;
    }
    
    .scroll-up-category-ap{
        bottom: 0;
        padding-bottom: 20px;
    }
    
    .h-float-up{
        margin-bottom: -200px;
    }

    @media screen and (max-width: 1200px) {
    .pop-up-variant {
        width: 50%;
    }
      /*.all-product-card{*/
      /*  gap: 2%;*/
      /*}*/

      /*.flex-top-ap{*/
      /*  margin-right: 11% ;*/
      /*}*/
    }

  @media  screen and (max-width: 999px){
    .all-product-container{
      grid-template-columns: repeat(2, 1fr);
    }
   }

  @media screen and (max-width: 975px) {
    .all-product-promo{
      top: -6px;
      right: -9px;
    }
    
    .all-product-img-fs {
        width: 90px !important;
        height: 12px !important;
    }
    
    .text-fs-tag{
        font-size: 10px;
    }
  }

  @media screen and (min-width: 881px) {
    .right-bar{
      /*width: 75%;*/
    }
  }

  @media screen and (max-width: 880px) {
    .right-bar{
      /*width: 90%;*/
    }

    .flex-top-ap{
      /*width: 73%;*/
    }
  }

  @media screen and (max-width: 767px) {
    /*.scroll-up{*/
    /*    bottom: 1.7rem !important;*/
    /*}  */
    
    /*.box2 {*/
    /*    bottom: 1.8rem !important;*/
    /*}*/
      
   .all-product-card {
      /*margin-left: 20px;*/
      justify-content: center;
      margin-bottom: 120px;
    }
    
    .pop-up-variant{
        width: 80%;
        height: 490px;
    }
    
    .hover-add-to-cart {
        top: 30%;
    }
    
    .card-promo:hover .hover-add-to-cart {
        display: none;
    }
    
    .card-promo:hover .hover-add-to-cart-2 {
        display: none;
    }

    .side-bar.active{
      display: none;
    }

    .flex-top-ap{
      padding: 0 6%;
    }
    
    .all-products{
        padding: 0 0;
        margin-top: 125px;
    }
    
    .right-bar{
        width: 100%;
    }
    
    .sidebar{
        width: 0%;
    }
    
    .all-pro-bottom{
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
        background: #fff;
        border-radius: 30px 30px 0px 0px;
        padding: 20px 20px 0px 20px;
    }
    
    .category-slide {
        width: 100%;
        position: fixed;
        bottom: -500px;
        border-radius: 30px 30px 0px 0px;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
        background: white;
        z-index: 99999999;
        transition: bottom 0.5s ease;
    }
    .
  }

    @media screen and (max-width: 550px) {
    .menu-btn{
      margin: 0px;
      display: none;
    }

    .input-home{
      width: 120px;
    }

    .group{
      justify-content: flex-end;
    }

    .input{
      width: 75%;
    }

    .icon{
      left: 4rem;
    }
    
    /*.all-product-flashsale {*/
    /*    width: 38px;*/
    /*    height: 38px;*/
    /*}*/

    .all-product-flashsale:before {
        width: 32px;
        height: 32px;
    }
    
    /*.all-product-flashsale {*/
    /*    right: -5px;*/
    /*    top: -5px;*/
    /*}*/
    .fs-resp-text{
        font-size: 6px;
        margin-top: 2px;
    }
    }


  @media screen and (max-width: 450px) {

    .side-bar{
      width: 60%;
    }

    .title-right-bar{
      font-size: 14px;
      margin-left: 0px;
    }

    .menu-btn{
      margin: 12px;
      display: none;
    }

    .input-home{
      margin-right: 30px;
    }

    .all-product-card{
      margin-left: 0px;
      margin-top: 30px;
    }

    .flex-top-ap{
      margin: auto;
      margin-top: 20px;
    }
  }

  @media screen and (max-width: 850px) {

    .menu-btn{
      display: none;
    }

    /*.all-product-card{*/
    /*  gap: 3%;*/
    /*}*/

  }

  @media screen and (max-width: 800px) {
    .title-ap{
      font-size: 14px;
    }

    .input-home{
      max-width: 180px;
      min-height: 30px;
      font-size: 14px;
      margin-right: 0px;
    }
  }

  @media screen and (max-width: 784px) {
    /*.all-product-card{*/
    /*  gap: 3%;*/
    /*}*/
  }

  .d-none{
    display: none;
  }

  @media screen and (max-width: 767px) {
    .d-none-resp{
      display: none;
    }

    .right-bar{
      /*margin: auto;*/
      /*width: 95%;*/
    }

    /*.all-product-card{*/
    /*  gap: 4%;*/
    /*}*/

    .sub-menu {
      display: none;
      text-align: left;
      text-indent: 10px;
    }

    a.sub-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      width: 100%;
      justify-content: space-between;
    }

    .sub-btn i{
      transition: 0.3s ease;
      font-size: 14px;
    }

    .mr-10{
      /*margin-right: 20px;*/
    }

    .sub-item{
      margin-bottom: 20px;
      font-size: 14px;
    }

    .left-ul-list{
      align-items: flex-start;
    }

    .d-none{
      display: block !important;
      width: 100%;
    }
  }

  @media screen and (max-width: 808px) {
    /*.all-product-card{*/
    /*  gap: 2%;*/
    /*}*/
  }

  @media screen and (max-width: 782px) {
    /*.all-product-card{*/
    /*  gap: 2%;*/
    /*}*/
  }

  @media screen and (max-width: 701px) {
    /*.all-product-card{*/
    /*  gap: 5%;*/
    /*}*/
  }

  @media screen and (max-width: 450px) {
    .all-product-card{
      gap: 5%;
      /*margin-left: 5%;   */
    }
    
      .hover-add-to-cart, .hover-add-to-cart-2{
          font-size: 12px;
      }

    .m-autos{
      margin-bottom: 30px;
    }
    
    .img-card-all .img-all{
        width: 180px !important;
        height: 180px !important;
    }
    
    .img-card-all {
        height: 180px !important;
    }
    
    .card-promo{
        width: 180px !important;
    }
    
    .flex-promo-price s {
        font-size: 10px;
    }
    
    .all-product-promo {
        width: 50px;
        height: 50px;
        font-size: 10px;
    }
  }

  @media screen and (max-width: 400px) {
    .title-ap{
      font-size: 11px;
    }

    .input{
      font-size: 9px;
      height: 30px;
    }

    .icon{
      width: 0.75rem;
      height: 0.75rem;
    }

    .img-card-all .img-all{
        width: 160px !important;
        height: 160px !important;
    }
    
    .img-card-all {
        height: 160px !important;
    }
    
    .card-promo{
        width: 160px !important;
    }
     
    .all-product-promo {
        width: 40px;
        height: 40px;
        font-size: 10px;
    }
  }

  @media screen and (max-width: 366px) {
    .card-promo{
        width: 160px !important;
    }
  }