@media (max-width:768px) {
    html{
        font-size: 70%;
    }
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}

    .container-login{
        max-width: 50%;
        /* margin: 0 ; */
        padding: 10px;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 7%;
      }
      .sproduct-Card {
        /* float: left;  */
        text-align: center;
        margin:0.5rem; 
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        /* max-width: 18%;  */
        max-width: 30%;
        min-width: 30%;
        height: 30vh;
        background-color: rgba(233, 231, 235, 0.995);
        padding: 5px;
        } 
        .middle-part-navbar{     
          display: none;
        }
        .right-part-navbar  {
          display:inline-block;
          margin:0;
         padding: 0;
         justify-content: flex-end;
        }
        .left-part-navbar{
          margin:0;
          padding: 0;
          display:inline-block;
        }
        .right-part-navbar > ul   {
          display:flex;
          justify-content: space-between;  
          margin:0;
          /* padding-top: 10px; */
          padding-right: 20px;
        }
        
        .dropdown-container{
          display:block;
          /* position: relative; */
          text-align: right;
          float: right;  
          padding: 3px;
          max-width: fit-content;
          min-width: fit-content;
        }
        
        .dropdown-container:hover .dropdown-content{
          display:block;
        }
        .dropdown-content{
          /* background-color: rgba(147, 145, 144, 0.624); */
          position:initial;
          text-align: left;
          color: black;
          max-width: fit-content;
          min-width: fit-content;
          padding: 3px;
        }
        .dropdown-content a{  
          position:relative;        
          padding: 7px;
          /* color: white */
        }
        .container-navbar {
          width: 100%;
          display: flex;
          justify-content:space-between; 
          margin: 0;  
         height: 3rem;
        }
        .item_rate{
          position: absolute;
          bottom: 6vh;
          text-align: center;
          /* margin:.5rem;  */
          padding: 2px;  
          background-color: rgb(244, 219, 219);
          width: 100%;
          font-size: 8px
          }

          .item_avgrate{
            position: absolute;
            bottom: 3vh;
            text-align: center;
            /* margin:.5rem;  */
            padding: 2px;  
            background-color: rgb(213, 208, 208);
            width: 100%;
            font-size: 8px
          }
          .item_minirate{
            position: absolute;
            bottom: 0;
            text-align: center;
            /* margin:.5rem;  */
            padding: 2px;  
            background-color: rgb(213, 205, 205);
            width: 100%;
            font-size: 8px
          }
          .order-table-container{
            max-width: 98%;
            min-width: 98%;
            text-align: center;
            /* margin: auto;
            padding-left: 2px;
            padding-right: 2px; */
            font-size: 9px;
          }
      }