@media only screen and (max-width: 990px) {
    .d-none-responsive {
      display: none !important;
    }
    #top_main {
        background-color: #F9F7FF;
        padding: 18px;
        z-index: 99;
        position: fixed;
        width: 100%;
        top: 0;
        right: 15px;
        border-top-left-radius: 0px; 
        box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.185);
    }
    #top_main_down{
        background-color: #F9F7FF;  
        z-index: 99;
        position: fixed;
        width: 100%;
        bottom: 0;
        border-top-left-radius: 0px;
        box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.185);
    }
    ul {
        list-style-type: none;
    }
    .w-100-responsive{
        width: 100%;
    }
    .card-image img {
        height: 130px !important;
        width: 100% !important;
        border-radius: 8px 8px 0px 0;
    }
    .box-white {
        width: 100% !important;
        height:auto !important;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 0px !important;
    }
    .bg-icon {
        padding: 1px !important;
        width: 100%;
        border-bottom: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .bg-icon:hover {
        background-color: #F9F7FF !important;
        color: black !important;
        border-radius: 5px;
        border-bottom: none;
    }
    .h-100vh{
        height: 100vh;
    }
    .d-flex-responsive{
        display: flex;
    }
    .detail-box {
        height: fit-content !important;
        width: fit-content !important;
        background-color: #fff;
    }
    .card-heading {
        font-size: 13px !important;
        font-weight: bold;
        background: #fff;
        padding: 10px 0px !important;
    }
    .card-text {
        padding: 5px 0px !important;
        background: #fff;
        font-size: 12px !important;
        color: #636262;
        padding-bottom: 5px;
    }
    .service-container {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-flow: column;
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        overflow-x: scroll;
        padding-bottom: 20px;
        max-height: 500px;
        align-content: flex-start;
      }
      .btn-save {
        background-color: #BBAFE0 !important;
        border-radius: 5px;
        width: 100% ;
        height: 37px;
        border: none;
        color: #fff;
        font-size:12px;
    }
    #new-appointment{
        margin-top:40px;
    }
    .search-input{
        width:100%;
    }
    #branches{
        overflow-x:hidden;
    }
    .owl-carousel .owl-item .offer-img {
        width: 100% !important;
        height: 260px;
        border-radius: 5px;
        margin-right: 10px !important;
    }
    .owl-carousel .owl-item .salon-img {
        width: 100% !important;
        height: 260px;
        border-radius: 5px;
        margin-right: 10px !important;
    }

    .grey-left{
        padding:0px !important;
    }
   

  }
  @media only screen and (max-width: 765px) {
     .slider-icon{
        left:85%;
     }
     .box-white-new {
        position:relative !important;
        top:0px !important;
        overflow-x: hidden !important;
    }
     
  }
  @media (min-width: 768px)  and (max-width: 1023px) and (orientation: portrait){
    .slider-icon{
        left:90%;
     }
    .box-white-new {
        top:0px !important;
       left:0px !important;
       height:90% !important;
    }
   
     .card-box{
        height: 125px;
        width: 209px;
        background-color: #fff
     }
     .img-box-pink {
        background: linear-gradient(to right, #800080, #FF69B4);
        height: 190px;
        border-radius: 10px;
        padding: 10px;
        
    }
    .img-box-blue {
        background: rgb(57 57 113);
        height: 190px;
        border-radius: 10px;
        padding: 20px;
      
  }
  .discount-box {
    position: absolute;
    top: 225px;
    left: 75% !important;
    background-color: #BC4E57;
    height: 35px;
    width: max-content;
    padding: 7px;
    display: flex;
    justify-content: center;
    border-bottom-right-radius: 5px;
}
}