html {
  overflow-x: hidden;
}
     .catbtn
    {
      
    max-height: 120px;
    border-radius: 20%;
    text-align: center;
    /* padding: 5px; */
    background: #f6f7fc;
    color: #774d96;
    margin: 5px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 600;
        white-space: nowrap;
        cursor:pointer;
   max-width: 350px;
   
    }
    
      .catbtnall
    {
        max-height: 120px;
    border-radius: 20%;
    text-align: center;
    /* padding: 5px; */
    background: #f6f7fc;
    color: #774d96;
    margin: 5px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 600;
        white-space: nowrap;
        cursor:pointer;
   width: 100px; 
    }
    
    .cimage {
    height: 32px;
    width: 32px;
    right: 10px;
    position: relative;
}
    
     .catbtn:hover
     {
          background: #774d96;
          color:#fff;
         
     }
     
     

    .wrapper::-webkit-scrollbar
    {
        width:0;
    }

    .wrapper
    {
         max-height: 120px;
        display: flex;
    overflow-x: auto;
    background: transparent;

   
  
    }
    
    input[type=text]:focus {
  border: 2px solid #7a4d96;
}
    
    .langcss
{
    width: 50px ;
    margin-left: 100% ;
    padding: 5px;
    border: 2px solid #612683 ;
    outline: none ;
    text-align: center ;
    margin-top: 20%;
    background:#f6f7fc;
}

    .designl
    {
        background-color: #fff;
    color: #0b0a0a;
    border-radius: 50px;
    padding: 5px;
    border: none;
    padding: 9px !important;
    margin-top: 1.5rem;
    margin-left: -50px;
    position: absolute;
    }

.designr
    {
      background-color: #fff;
    color: #0b0a0a;
    border-radius: 50px;
    padding: 5px !important;
    position: absolute;
    border: none;
    padding: 9px !important;
    margin-left: 81rem;
    margin-top: 28px;
    }
    
    .searchstyl
    {
     float: right;
    margin-right: 10%;
    width: 20%;
    border: 2px solid #7a4d96;
    border-radius: 5px;
    padding: 5px;
    }
    
     input:focus {
    outline:none;
}

    .oneline
    {
        display: flex;
        width: 10%;
        padding: 10px;
    }

     body {
            
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)
           
        }
    
       h2 {
            font-weight: 900
        }
        
        h4
        {
            font-size:20px;
            color:#4d4040;
            text-transform:capitalize;
            font-weight:bold;
        }
        

        .card-product {
            background: #fff;
            box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
            transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
            border: 0;
            border-radius: 1rem
        }

        .card-img-product,
        .card-img-top-product {
            border-top-left-radius: calc(1rem - 1px);
            border-top-right-radius: calc(1rem - 1px)
        }

        .card-product h5 {
            overflow: hidden;
            height: 56px;
            font-weight: 600;
            text-align: center;
            font-size: 14px;
             overflow-y: scroll !important;
             padding:20px;
        }

        .card-img-top-product {
            width: 100%;
            max-height: 220px;
            object-fit: contain;
            padding: 30px
        }

        .card-product h2 {
            font-size: 1rem
        }

        .card-product:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
            border:0.5px solid black;
           
        }

       
      
       
        
        @media (max-width: 768px) {
            .oneline {
               display:none;
            }
        }
        
        @media (max-width: 768px)
        {
             .searchstyl
    {
        
    width: 50%;
    margin-right:25%;
    border: 2px solid #7a4d96;
    border-radius: 5px;
    padding: 5px;
    }
    
    input::placeholder
    {
         text-align:center;
    }
    
   input:focus {
    outline:none;
}
        }
        
        @media (max-width: 768px) {
            h4
        {
            font-size:14px;
            height: 35px;
            color:#4d4040;
            text-transform:capitalize;
            font-weight:bold;
        }
        
       .whish {
    display: none;
}
        }
              @media (max-width: 768px) {
            .catbtn
        {
           font-size: 14px;
    text-transform: capitalize;
   
     max-height: 50px;
    border-radius: 15%;
    margin:2px;
    padding:2px;
        }
        }
        
        
        
         @media (max-width: 768px) {
            .card-img-top-product {
                width: 100%;
            max-height: 100px;
             object-fit: contain;
            padding:10px;
            }
        }
        
        .card {
            background: #fff;
            box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
            transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
            border: 0;
            border-radius: 1rem
        }

        
         @media (max-width: 768px) {
            .card-title {
              display:none;
            }
        }
        
        @media (max-width: 768px) {
            .btn-product {
               font-size: 12px !important;
               padding:8px !important;
               margin:0 !important;
               border-radius:10px !important;
              
            }
        }
        
         @media (max-width: 768px) {
            .bg-success {
               font-size: 12px !important;
               padding:5px !important;
               margin:2px !important;
               border-radius:10px !important;
            background-color: #9c7cb3 !important;
            
              
            }
        }
        
     
        
        

        .btn-product {
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            padding: 5px 50px 5px 50px
        }
        
       
        .box .btn-product {
            font-size: 1.5rem
        }

        @media (max-width: 1025px) {
            .btn-product {
                padding: 5px 40px 5px 40px
            }
        }

      

        .btn-warnings {
            background: none #774d96;
            color: #ffffff;
            fill: #ffffff;
            border: none;
            text-decoration: none;
            outline: 0;
            border-radius: 100px
        }
        
  
      

        .btn-warnings:hover {
            background: none #581b86 !important;
            color: #ffffff;
        }

        .bg-success {
            font-size: 1rem;
            background-color: #9c7cb3 !important
        }

       
       .clearfix
       {
           margin:0 auto;
       }
       
       
    .ribbon{
    color: #fff;
    background: #77489e;
    font-size: 12px;
   font-weight:bold;
    padding: 2px 6px 2px 6px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1px 3px 3px 1px;
    position: absolute;
   top: -240px;
    left: -25px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
    transform: rotate( 320deg);
}

.ribbon-new{
    color: #fff;
    background: #77489e;
    font-size: 12px;
   font-weight:bold;
    padding: 2px 6px 2px 6px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1px 3px 3px 1px;
    position: absolute;
   top: -258px;
    left: -9px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
    transform: rotate( 320deg);
}
       
     @media (max-width: 768px) {
         .ribbon{
    color: #fff;
    background: #77489e;
    font-size: 10px;
   
    padding: 2px 5px 2px 5px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1px 3px 3px 1px;
    position: absolute;
   top: -125px;
    left: -20px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
    transform: rotate( 320deg);
}

.ribbon-new{
    color: #fff;
    background: #77489e;
    font-size: 10px;
   
    padding: 2px 5px 2px 5px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1px 3px 3px 1px;
    position: absolute;
   top: -125px;
    left: -20px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
    transform: rotate( 320deg);
}
         
     }
  
.drpcss
{
    margin-right:40px;
    margin-top:10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
 
  @media (max-width: 768px) {
      
 #btn-back-to-top
 {
    bottom: 160px;
    right: 20px;
     background-color: #7a4d96;
  color:#fff;
 }
      }
   @media (max-width: 768px) {
            .drpcss {
               display:none;
            
            }
             .trackorder
      {
          display:none;
          
      }
        }
        
    .trackorder
    {
            color: #212529;
    text-decoration: none;
       margin-top: 18px;
    margin-right: 15px;
    }
    
      .trackorder:hover
      {
           color: #7a4d96;
          
      }
      
          .mobile-nav
{
    background: #f6f7fc;
    position: fixed;
    bottom: 0;
    height: 65px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    z-index:999;
}
.bloc-icon
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.bloc-icon img
{
    width: 30px;
}

 input::placeholder {
    font-weight: bold;
    opacity: 0.5;
    color: #7a4d96;
   
}
@media screen and (min-width:600px) {
    .mobile-nav
    {
        display: none;
    }
    
   
    
}