@media (max-width:932px){
    /* LOGIN PAGAE */
    #vendor_login_page{
        overflow-y: scroll;
        display: block;
    }
    #login_alert{
        width: 450px;
        min-width: 0px;
        max-height: none;
        margin-left: auto;
        margin-right: auto;
    }

    #vendor_ctn{
        display: flex;
        flex-direction: column;
        width: 450px;
        min-width: 0px;
        max-height: none;
        height: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    #vendor_ctn form{
        width: 100%;
        height: 75%;
        gap: 5.5%;
    }
    #vendor_ctn form h1{
        font-size: 3rem;
    }
    #vendor_ctn form h2{
        font-size: 1.3rem;

    }
    #vendor_ctn form p{
        font-size: 1.2rem;
        line-height: 2.5rem;
    }
    #vendor_ctn form .input_ctn{
        height: 50px;
        border-radius: 5px;
    }
    .svg-ctn{
        padding: 0.7rem;
    }
    #vendor_ctn form input[type="text"],[type="password"]{
        font-size: 1rem;
    }

    #vendor_ctn form .input_ctn input::placeholder{
        font-size: 1rem;
    }
    #vendor_ctn form input[type="submit"]{
        font-size: 1.1rem;
        height: 50px;
        border-radius: 5px;
    }
    #vendor_ctn #greeting{
        width: 100%;
        height: 25%;
        border-radius: 0px;
    }
    #header{
        gap: 1.3rem;
    }
    #header #p1{
        font-size: 1.4rem;
    }
    #header #p2{
        font-size: 1.1rem;
    }
    #vendor_ctn #greeting #contact_icons_ctn{
        height: 40%;
    }
    /* END 
    OF LOGIN PAGE */
/* ----------------------------------------------------------------------------------- */
    /*DASHBOARD PAGE */
    #dash_board_page form{
        height: 130px;
        max-height: 200px;
    }
    #stats_container{
        max-width: none;
        width: 98%;
        min-width: 640px;
        padding-top: 5px;
        padding-bottom: 150px;
    }
    .stats-title__svg-ctn{
        padding: 0.75rem;
    }
    .stats-title__writing{
        font-size: 1.3rem;
    }
    #stats_container > div >div{
        font-size: 1.3rem
    }
    #ranking_sales div p{
        font-size: 1.3rem;
    }
    /* END OF DASHBOARD PAGE */
/* ------------------------------------------------------------------------------------ */
        /* ORDER PAGE  already optimized by natural css (desktop)*/
        /* VIEW RECEIPT PAGE*/
        #view_order_page{
            display: block;
            height: 100vh;
            overflow-y: scroll;
            box-sizing: border-box;
            padding-bottom: 50vh;
        }
        .view-order-page__ctn{
            width: 70%;
            min-width: 475px;
            height: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
            padding-bottom: 0.7rem;
        }
        .view-order-page-ctn__partition-food{
            width: 100%;
            height: 50%;
            gap: 0.7rem;
        }
        .view-order-page-ctn-partition-food__header{
            margin-top: 0.7rem;
            height: 60px;
        }
        .view-order-page-ctn__partition-food-info{
            width: 100%;
            height: 50%;
            gap: 0.7rem;
        }
        .partition-food-header__ptag{
            font-size: 2rem;
            font-weight: lighter;
        }
        .partition-food__order-display{
            height: fit-content;
            border: none;
            font-size: 0.9rem;
            line-height: 2rem;
        }
        .Mark_as_delivered_btn{
            height: 50px;
        }
        .Mark_as_delivered_btn p{
            font-size: 1rem;
        }
        /* // */
        .partition-food-info__preference{
            margin-top: 0.5rem;
            height: 170px;
        }
        .food-preference-writing-ctn__body{
            font-size: 0.9rem;
            word-break: break-word;
            overflow: scroll;
        }
        .partition-food-info__amount_and_hostel{
            height: 170px;

        }
        .partition-food-info-amount_or_hostel__svg-ctn{
            padding: 0.5rem;
        }
        .partition-food-info-amount_or_hostel__body{
            font-size: 1.1rem;
        }
        .partition-food-info__delivery-info{
            height: 170px;
        }
        /* END OF RECIEPT PAGE */
        /* MENU PAGE ALREADY OPTIMIZED BY DESKTOP */
        /* ACCOUNT PAGE*/
        .account-header{
            width: max(760px,95%);
        }
        
        .account-header__title{
            font-size: max(10px,3vw);
        }
        .account-options{
            width: max(760px,95%);
        }
        .account-options__profile{
            height: 230px;
        }
        .account-options details{
            width: 100%;
        }
        .edit-vendor-summary__span{
            width: 30%;
            gap: 0.5%;
        }
        .account-header__logout{
            font-size: max(5px,1.8vw);
        }
        .profile-options__description{
            font-size: 1.4vw;
        }
        .edit-vendor-summary{
            font-size: max(14px,1.7vw);
        }
        #profile-actions__cancel a{
            font-size: max(15px,3vw);   
        }
        .edit-vendor-summary-span__svg-ctn{
            box-sizing: border-box;
            padding: 2rem;
        }
        .edit-vendor-summary-span__title{
            font-size: max(15px,1.7vw);
        }
        .edit-vendor-summary-span__display{
             font-size: max(13px,1.7vw);
        }
        .edit-vendor-summary-btn{
            font-size: max(11px,1.5vw);
            box-sizing: border-box;
        }

        
        /* END OF ACCOUNT PAGE */

    
}




@media(max-width:820px){  /* ipad air related devices */
    /* LOGIN PAGE ALREADY OPTIMIZED BY AN HIGHER DEVICE */
/* ---------------------------------------------- */
    /* DASHBOARD PAGE ALREADY OPTIMIZED BY HIGHER DEVICE */
    /* ORDER PAGE ALREADY OPTIMIZED BY HIGHER DEVICE */
    /* vIEW RCEIPT PAGE ALREADY OPTIMIZED BY HIGHER DEVICE  */
    /* MENU PAGE ALREADY OPTIMIZED BY DESKTOP  */
    /* ACCOUNT PAGE ALREADY OPTIMIZED BY HIGHER DEVICE  */
   
}

/* end of 820px */






@media(max-width:789px){ /* (ipad-mini) small tablet screens */
        /* ---------------------------------------------- */
    /* ORDER PAGE*/
    .order-page__header{
        min-width: 600px;
        width: 97%;
    }
    .order-page__header > h2{
        font-size: 4.5vw;
    }
    .order-page__header> form{
        gap: 7%;
    }
    .order-page__header >form > label{
        width: 20%;
        font-size: 2.3vw;
    }
    .order-page__header >form >select{
        width: 20%;
        font-size: 2.3vw;
    }
    #order_ctn{
        min-width: 600px;
        width: 97%;
    }
    .each-order{
        font-size: 2.2vw;
    }
    .each-order-action-trigger-view__order-ctn{
        padding: 1.1vw;
    }
    .each-order-action-trigger-call__ctn{
        padding: 1.1vw;
    }
    /* END OF ORDER PAGE */
    /* vIEW RCEIPT PAGE ALREADY OPTIMIZED BY HIGHER DEVICE  */
    /* MENU PAGE ALREADY OPTIMIZED BY DESKTOP */
    /* ACCOUNT PAGE */
    .account-header{
            width: max(630px,95%);
        }
    .account-header__title{
            font-size: max(26px,3.3vw);
        }
    .account-header__logout{
            font-size: max(15px,1.8vw);
            width: 13%;
        }
    .account-options{
        width: max(630px,95%);
    }
    .account-options__card{
        width: 210px;
    }
    .profile-options__description{
      font-size: max(12px,1.5vw);  
    }
    .edit-vendor-summary-span__svg-ctn svg{
        scale: 1.35;
    }
    .edit-vendor-summary__span{
        min-width: 190px;
    }
    .edit-vendor-summary-span__title{
        font-size: max(14px,1.9vw);
    }
    .edit-vendor-summary-span__display{
        font-size: max(13px,1.7vw);
    }
    .edit-vendor-summary-btn{
         font-size: max(12px,1.5vw);
         width: 90%;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
    }
    .edit-vendor-summary-link{
        width: 90%;  
    }
    
    /* END OF ACCOUNT PAGE */
    

}
/* END OF  (ipad-mini) small tablet screens */ 


@media(max-width:640px){    /* (surface duo devies) related device  */
        /* ----------------------------- */
    /* LOGINPAGE ALREADY OPTIMIZED BY AN HIGHER DEVICE */
    /* HEADER */

    #header_db #fs{
        font-size: 4vw;
    }
    #header_db #currentpagedsp{
        font-size: 4.5vw;
    }
    #header_db #greeting{
        font-size: 2.5vw;
    }
   


    /* ENE OF HEADER  */
    /* DASHBOARD PAGE */
    #dash_board_page form{
        width: 85%;
        height: 120px;
        min-width: 476px;
        width: 90%;
    }
    #dash_board_page h2{
        font-size: 5vw;

    }
    .dashboard-form-svg{
        padding: 0.3rem;
    }
    #dash_board_page form >div span{
        font-size: 2.5vw;
    }
    #stats_container{
        width: 100%;
        min-width: 600px;
    }
    #stats_container > div{
        height: 250px;
    }
    #dash_board_page form >div select{
        font-size: 2.2vw;
        width: 20%;
    }
    #stats_container{
        width: 90%;
        min-width: 476px;
    }
     #stats_container > div{
        width: 43%;
        height: 250px;
        max-height: 250px;
        min-height: 200px;
        min-width: 0px;
    }
    .stats-title__writing{
        font-size: 3vw;
    }
    .stats-title__svg-ctn{
        padding: 0.4rem;
    }
    /* END OF DASHBOARD PAGE */
    /* ---------------------------------------------------------- */
    /* ORDER PAGE */
    .order-page__header{
        min-width: 460px;
        width: 97%;
        height: 110px;
    }
    .order-page__header > h2{
        font-size: max(27px,4.5vw);
    }
    #order_ctn{
        min-width: 460px;
        width: 97%;

    }
    .each-order{
        font-size:max(12px,2.5vw);
    }
    .each-order__hostel{
        display: none;
    }
    .each-order__number{
        width: 7%;
    }
    .each-order__email{
        width: 40%;
    }
    .each-order__amount{
        width: 35%;
    }
    .each-order__action-trigger{
          width: 17%;
    }
    .each-order-action-trigger-view__order-ctn{
       padding: 1.3vw;
    }
    .each-order-action-trigger-call__ctn{
       padding: 1.3vw;
    }
    /* END OF ORDER PAGE */
    /* vIEW RCEIPT PAGE ALREADY OPTIMIZED BY HIGHER DEVICE  */
    /* MENU PAGE */
    .each_menu{
        width: 40%;
        min-width: 200px;
    }
    #menu_ctn{
        gap: 3%;

    }
    .menu_action button{
        font-size: max(12px,2.2vw);
    }
    .menu_action__svg-ctn{
        padding: max(3px,1.8vw);
    }
    .out_of_stock{
        width: 40%;
        min-width: 200px;
    }
    #action_feed form{
        width: 98%;
    }
    #action_feed form input[type="text"]{
        width: max(350px,55%);
    }
    .stock_file_ctn{
        width: max(350px,55%);
    }
    #file_ctn{
        width: max(350px,55%);
    }
    #action_feed form .yes-or-no__ctn{
        width: max(350px,55%);
    }
    #action_feed form textarea{
        width: max(350px,55%);
    }
   
    /* END OF MENU PAGE */

    /* ACCOUNT PAGE */
    .account-header{
        width: max(450px,99%);
        gap: 25%;
        border-radius: 0px;
        height: 60px;
    }
     .account-header__title{
            font-size: max(22px,3.3vw);
        }
    .account-header__logout{
         width: 17%;
    }
    .account-header-svg-ctn{
        padding: 0rem;
    }
    .account-options{
         width: max(450px,99%);
    }
    .account-options__profile{
        height: 220px;
        border-radius: 0px;
    }
    .account-options__card{
        border-radius: 5px;
    }
    .edit-vendor-summary{
        border-radius: 0px;
    }
    .edit-vendor-summary svg{
        width: 8%;
    }
    .edit-vendor-summary-actions-ctn{
        height: fit-content;
        box-sizing: border-box;
        padding-bottom: 1%;
        gap: 1%;

    }
    .edit-vendor-summary__span{
        min-width: 228px;
        width: 32%;
        border-radius: 0px;
        margin-top: 1%;
    }
    .pop-out-form__title{
        font-size: max(19px,3vw);
    }
    #pop_out_action form  textarea{
        width: 57%;
        min-width: 350px;
    }
    .pop-out-form__button-ctn{
        width: 57%;
        min-width: 350px;
    }
    #pop_out_action form input:is([type="text"],[type="email"],[type="password"]){
         width: 57%;
        min-width: 350px;
    }
 
    /* END OF ACCOUNT PAGE */


}


@media (max-width:475px){
    /* LOGINPAGE */
    #login_alert{
        width: 100%;
        min-width: 320px; 
        margin-left: auto;
        margin-right: auto;
    }
    #vendor_ctn{
        width: 100%;
        height: 750px;
        min-width: 320px;
        min-height: 0;
        border: none;
    }
    #vendor_ctn form{
        gap: 6vw;
        height: 73%;
        width: 100%;
    }
    #vendor_ctn form h1{
        font-size: 12vw;
    }
    #vendor_ctn form h2{
        font-size: 5vw;
    }
    #vendor_ctn form p{
        line-height: 10vw;
        font-size: 4.3vw;
    }
    #vendor_ctn form .input_ctn{
        height: 3rem;
    }
    #vendor_ctn form input[type="text"],[type="password"]{
        font-size: 3.5vw;
    }
    #vendor_ctn form .input_ctn input::placeholder{
        font-size: 3.7vw;
    }
    .svg-ctn{
        padding: 0.5rem;
    }
    #vendor_ctn form input[type="submit"]{
        height: 3rem;
        font-size: 4vw;
    }
    #vendor_ctn #greeting{
        height: 27%;
    }
    #header{
        gap: 4vw;
    }
    #header #p1{
        font-size: 5vw;
    }
    #header #p2{
        font-size: 4.25vw;
    }
    #vendor_ctn #greeting #contact_icons_ctn{
        height: 40%;
    }
    footer{
         width: 100%;
        min-width: 320px; 
        margin-left: auto;
        margin-right: auto;
    }
    /* END OF LOGIN PAGE  */
    /* -------------------------- */
    /* HEADER */
    #header_db #fs{
        font-size: 5vw;
    }
     #vendor_db #header_db{
        transform: translateX(-50%) scale(0.8);
        border-radius: 0px;
        border-radius: 25px;
    }
    #header_db #currentpagedsp{
        font-size: 5vw;
    }
    #header_db #greeting{
        font-size: 5vw;
    }
  

    /* END OF HEADER */
    /* VENDOR DASHBOARD */
     #dash_board_page form{
        width: 95%;
        height: 95px;
        min-width: 320px;
    }
    #stats_container{
        width: 95%;
        height: 80dvh;
        min-width: 320px;
        padding-top: 2vh;
    }
    #stats_container > div{
        width: 43%;
        height: 75%;
        max-height: 250px;
        min-height: 200px;
        min-width: 0px;
    }
    .stats-title__svg-ctn{
        padding: 0.6rem;
    }
    .stats-title__writing{
        font-size: 3.5vw;
    }
    #stats_container > div >div{
        font-size: 4vw;
    }
    
    #ranking_sales div p{
        font-size: 3vw;
    }
    

    /* END OF DASHBOARD  */
    /* -------------------------------------------------------- */
    /*ORDER PAGE*/
    .order-page__header{
        width: 98%;
        min-width: 320px;
        height: 100px;
    }
    .pending_delivered__form-svg-ctn{
        display: none;
    }

    .order-page__header > h2{
        font-size: max(23px,5vw);
    }
    .order-page__header >form > label{
        font-size: max(10px,2.7vw);
        width: 23%;
    }
    .order-page__header >form >select{
        width: 23%;
         font-size: max(10px,2.7vw);
    }
    #order_ctn{
         width: 98%;
        min-width: 320px;
    }
    #no_order{
        font-size: 4vw;
    }
    .each-order{
        font-size: max(10px,3.2vw);
    }
    .each-order__number{
        width:8%;
    }
    .each-order__email{
        width: 35%;
    }
    .each-order__amount{
        width: 30%;
    }
    .each-order__action-trigger{
          width: 25%;
          height: 90%;
          margin-top: auto;
          margin-bottom: auto;
    }
    .each-order-action-trigger-view__order-ctn,.each-order-action-trigger-call__ctn{
        padding: 2vw;
    }
    /* END OF ORDER PAGE */
    /* ------------------------------------------------------------------------------------------------------ */
    /* RECEIPT PAGE */
    .view-order-page__ctn{
        min-width: 320px;
        width: 100%;
    }
    .partition-food-header__ptag{
        font-size: max(25px,6vw);
    }
    .partition-food__order-display{
        font-size: max(14px,3vw);
    }
     .Mark_as_delivered_btn p{
        font-size: max(15px,3.8vw);
    }
    .food-preference-writing-ctn__header{
        font-size: max(14px,3.5vw);
    }
    .food-preference-writing-ctn__body{
        font-size: max(12px,3vw);
    }
    .partition-food__order-display{
        font-size:  max(1px,3vw);
     }
     .partition-food-info-amount_or_hostel__svg-ctn{
        padding: 0.6rem;
     }
     .partition-food-info-amount_or_hostel__body{
        font-size: 4.3vw;
     }
    .delivery-info-writing-ctn__header{
         font-size: max(14px,3.5vw);
     }
     .delivery-info-time strong{
        font-size: max(14px,3vw);
     }
     .delivery-info-time__body{
        font-size: max(13px,2.8vw);
     }
     .delivery-info-status strong{
         font-size: max(12px,2.2vw);
     }
     .delivery-info-status__body{
        font-size: max(13px,2.8vw);
     }
    /* END OF RECIEPT PAGE */
    /* ----------------------------------------------------- */
    /* MENU PAGE */
     .each_menu{
        width: 45%;
        height: 300px;
        min-width: 100px;
    }
     #menu_ctn{
        gap: 0.1%;
        padding-top: 60px;

    }
    .out_of_stock{
         width: 45%;
        height: 300px;
        min-width: 100px;
    }
    .each_menu .menu_action_trigger{
        height: max(20px,10%);
    }
    .menu__food-description{
        font-size: 2.8vw;
    }
    .each-menu-info__ctn{
        height: 10.5%;
    }
    .each-menu__price{
        border-top: 2px solid white;
        border-left: 2px solid white;
    }
    .menu_svg_and_others_ctn p{
        font-size: 4vw;
    }
    .each-menu-info__ctn{
        height: 13%;
    }
    .menu_action button{
        font-size: 2.5vw;
    }
    .menu_action button{
        font-size:2.5vw;
    }
    .menu_action__svg-ctn{
        padding: 1.8vw;
    }
    .menu_action button:nth-child(5){
        font-size: 2.7vw;
    }

     #action_feed form{
        width: 100%;
        gap: 6%;
    }
    #action_feed form input[type="text"]{
        width: max(300px,90%);
    }
    #action_feed form textarea{
        width: max(300px,90%);
    }
    #action_feed form input[type="number"]{
        width: max(300px,90%);
    }


    .stock_file_ctn{
        width: max(310px,90%);
     }
     #file_ctn{
        width: max(310px,90%);
     }
     #action_feed form .yes-or-no__ctn{
         width: max(310px,90%);
     }

    /* END OF MENU PAGE */
    /* ACCOUNT PAGE */
     .account-header{
        width:max(310px,97%);
        height: 55px;
        border-radius: 0px;
        gap: 20%;
     }
     .account-header__title{
            font-size: max(20px,4vw);
        }
    .account-header__logout{
        font-size: 3.2vw;
    }
    .account-header-svg-ctn{
         padding: 0.1rem;
    }
    .account-options{
         width:max(310px,97%);
    }
    .account-options__profile{
        height: 180px;
        border-radius: 0px;
        margin-top: 1%;
    }
    .profile-options__description{
        font-size: 0.65rem;
        line-height: 1rem;
      }
      
    .account-options__card{
        width: 40%;
    }
     .edit-vendor-summary{
        border-radius: 0px;
        height: 40px;
     }
     .edit-vendor-summary__span{
        min-width: 0px;
        width: 48.5%;
        height: 250px;
     }
      



    

    /* END OF ACCOUNT PAGE */

}

@media (max-width:404px){
    /* header */
    #vendor_db #header_db{
    /* scaling exist   */
       width: 110%;
       min-width: 380px;
        border-radius: 0px;
        border-radius: 25px;
    }
    /* end of header  */
    #menu_ctn{
        min-width: 310px;
         gap: 1%;

    }
     .each_menu{
        width: 43%;
         min-width: 0px;
        height: 260px;
       
      
    }
    .out_of_stock{
         width: 43%;
         min-width: 0px;
        height: 260px;
     }
    .each_menu .menu_action_trigger{
        height: max(25px,10%);
    }
    .menu__food-description{
        font-size: 2vw;
        line-height: 1rem;
    }
    .menu_svg_and_others_ctn p{
        font-size: 3.7vw;
    }
    #action_feed{
        min-width: 320px;
        overflow: hidden;
    }
    #action_feed form p{
        font-size: 5.5vw;
    }
    

     .stock_file_ctn{
        width: max(310px,90%);
     }
     #file_ctn{
        width: max(310px,90%);
     }
     #action_feed form .yes-or-no__ctn{
         width: max(310px,90%);
     }
     /* ACCOUNT PAGE */
      .account-header{
            width: max(300px,98%);
            gap: 15%;
            height: 50px;
        }
        .account-header__title{
            font-size: 5vw;
        }
        .account-header__logout{
            font-size: 3.5vw;
            width: 19%;
        }
         .account-options{
            width: max(300px,98%);
         }
         .account-options__profile{
            height: 170px;
         }
         .account-options__card{
            min-width: 170px;
         }
         .profile-svg-ctn{
            padding: 0.3rem;
         }
        .edit-vendor-summary__span{
            width: 48.5%;
            min-width: 140px;
        }
        .edit-vendor-summary-span__title{
            font-size: max(13px,3.5vw);
        }




     /*END OF ACCOUNT PAGE*/
     


}








