#circle {
   animation: pulse 5s infinite ease-in-out;
 }


 @keyframes pulse {
   0% {
     transform: scale(1);
     fill: #E86C60;
   }

   50% {
     transform: scale(1.2);
     fill: #FF6B6B;
   }

   100% {
     transform: scale(1);
     fill: #E86C60;
   }
 }

 .custom-offcanvas {
   width: 250px;
   height: 0vh;
   top: 80px;
   left: 1%;
   transform: translate(-50%, 0%);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
   overflow-y: scroll;
 }

 .category_light li {
   position: relative;
   font-size: 14px;
   white-space: nowrap;
   padding: 12px;
 }

 .category_light li:hover {
   background-color: #ddd;
   color: black;
 }


 .category_light li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 2px;
   height: 100%;
   background-color: #757575;
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .category_light li:hover::before {
   opacity: 1;

 }

 .custom-offcanvas.show {
   display: block;
   width: 23% !important;
 }

 .menu-categories {
   /* display: flex !important; */
   position: sticky;
   top: 160px;
   /* z-index: 999; */
   background-color: #ffffff;
   overflow-y: auto;
   max-height: 500px;
 }


 /* Vishal-Csss */
 .menu-categories ul {
  /* top: 100px; */
   list-style: none;
   padding: 0;
   overflow-x: scroll;
   scrollbar-width: none;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: start;
   text-align: start;
 }

 .menu-categories ul::-webkit-scrollbar {
   display: none;
 }

 .menu-categories li {
   padding: 10px;
   font-size: 1.2rem;
   color: #a1a1a1;
   cursor: pointer;
   white-space: nowrap;
   margin-bottom: 5px;
   text-align: center;
   transition: background-color 0.3s;
   margin: 0 20px;
 }

 
 .dark-mode .menu-categories {
    background-color: #000 !important;
  }
  .dark-mode .menu-categories li.active {
    color: white !important;
  }
  .dark-mode .menu-categories li.hover {
    color: white !important;
  }

 .menu-categories li.active {
   border-left: 4px solid #ae0014;
   font-weight: bold;
   color: #000;
   z-index: 999;
   /* white-space: normal; */
 }

 .menu-categories li:hover {
   /* color: black; */
   z-index: 999;
 }



 .restro-search {
   width: 15rem;
   float: right;
   margin: 0;
 }

 @media (min-width:1024px) {
   .restro-search {
     width: 100%;
   }
 }


 /* Vishal Css End */

 /* Menu Items on the right */
 .menu-section h2 {
   font-size: 1.7rem;
 }

 .menu-item {
   background-color: white;
   padding: 20px;
   margin-bottom: 15px;
   border-radius: 5px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .menu-item h3 {
   margin: 0;
 }

 .menu-item .price {
   margin-top: 10px;
   font-weight: bold;
 }

 .lds-roller {
   display: inline-block;
   position: relative;
   width: 40px;
   /* Match the width of the plus button */
   height: 40px;
   /* Match the height of the plus button */
 }

 .lds-roller div {
   animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   transform-origin: 20px 20px;
   /* Centering for the animation */
 }

 .lds-roller div:after {
   content: " ";
   display: block;
   position: absolute;
   width: 5.2px;
   /* Adjust to fit inside the circle */
   height: 5.2px;
   /* Adjust to fit inside the circle */
   border-radius: 50%;
   background: currentColor;
   margin: -3.6px 0 0 -3.6px;
 }

 /* Animation delays */
 .lds-roller div:nth-child(1) {
   animation-delay: -0.036s;
 }

 .lds-roller div:nth-child(1):after {
   top: 27px;
   left: 27px;
 }

 .lds-roller div:nth-child(2) {
   animation-delay: -0.072s;
 }

 .lds-roller div:nth-child(2):after {
   top: 30px;
   left: 22px;
 }

 .lds-roller div:nth-child(3) {
   animation-delay: -0.108s;
 }

 .lds-roller div:nth-child(3):after {
   top: 32px;
   left: 17px;
 }

 .lds-roller div:nth-child(4) {
   animation-delay: -0.144s;
 }

 .lds-roller div:nth-child(4):after {
   top: 33px;
   left: 10px;
 }

 .lds-roller div:nth-child(5) {
   animation-delay: -0.18s;
 }

 .lds-roller div:nth-child(5):after {
   top: 32px;
   left: 3px;
 }

 .lds-roller div:nth-child(6) {
   animation-delay: -0.216s;
 }

 .lds-roller div:nth-child(6):after {
   top: 30px;
   left: -2px;
 }

 .lds-roller div:nth-child(7) {
   animation-delay: -0.252s;
 }

 .lds-roller div:nth-child(7):after {
   top: 27px;
   left: -9px;
 }

 .lds-roller div:nth-child(8) {
   animation-delay: -0.288s;
 }

 .lds-roller div:nth-child(8):after {
   top: 22px;
   left: -14px;
 }

 /* Keyframes for the loader animation */
 @keyframes lds-roller {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }


 .select_menu {
  height: 80px;
  position: sticky !important;
  z-index: 2;
  top: 70px;
  background-color: #ffffff !important;
  align-items: center;
}
 .dark-mode .select_menu {
  background-color: #000 !important;
 }
 .dark-mode .menu-item-details {
  background-color: #000 !important;
  color: #ffffff !important;
 }
 .dark-mode .menu-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid white;
 }
 .dark-mode .menu-option {
  background-color: #000000 !important;
  border: 1px solid white;
 }
 .menu-option {
  padding: 10px;
 }
 .dark-mode .feature_bar {
  background-color: #000000 !important;
  color: #ffffff !important;
 }

 @media (min-width:768px) and (max-width:1200px) {
   .feature_bar {
     transform: translateY(-23%) !important;
   }

   .select_menu {
     transform: translateY(-10%) !important;
     top: 50px;
   }
   .pop-button .right-btn {
      left: 150px !important;
   }
 }

 @media (max-width:1200px) {
   .menu-categories li {
     font-size: 16px;
   }

   .menu-categories li.active {
     font-weight: bold;
     border-left: 0px;
     border-bottom: 5px solid #ae0014;
     color: #000;
   }

   .menu-categories ul {
     flex-direction: row;
   }

   .feature_menu_btn {
     display: flex !important;
   }

   .custom-offcanvas {
     top: 135px;
     height: 100% !important;
   }

   .feature_bar {
     position: sticky !important;
     z-index: 99;
     top: 147px;
     padding: 10px 0;
     margin-top: 40px;
     transform: translateY(-65%);
     background-color: #ffffff;
   }

   .select_menu {
     position: sticky !important;
     z-index: 100;
     top: 66px;
   }
 }



 @media (max-width:768px) {
   .delivery-pickup {
     margin: 15px;
   }

   .select_menu {
     position: sticky !important;
     z-index: 1000;
     top: 77px;
   }

   .custom-offcanvas.show {
    width: 100% !important;
 
  }

   .menu-categories li {
     font-size: 16px;
   }

   .menu-categories li.active {

     font-weight: bold;
     border-left: 0px;
     border-bottom: 5px solid #ae0014;
     color: #000;
   }

   .menu-categories ul {
     flex-direction: row;
   }

   .feature_menu_btn {
     display: flex !important;
   }

   .custom-offcanvas {
     top: 0;
     height: 100% !important;
   }

   .feature_bar {
     position: sticky !important;
     z-index: 99;
     top: 164px;
     margin-top: 40px;
     transform: translateY(-65%);
     background-color: #ffffff;
   }


 }

 @media (max-width: 767px) {
    .select_menu {
      top: 70px;        
      display: flex;
      flex-direction: row;
      gap: 10px;
    }
    .order-time {
      margin: 8px 0;
    }
    .feature_bar {
      top: 195px;
      margin-top: 70px;
    }
    .pop-button .right-btn {
      left: 125px !important;
    }
 }

 @media (max-width: 575px) {
    .feature_bar {
      top: 217px;
    }

    .pop-button .nav-link {
      font-size: 13px !important;
    }
 }

 @media(max-width:425px) {
    .pop-button .right-btn {
      left: 90px !important;
    }
 }

 @media(max-width:375px) {
  .pop-button .right-btn {
    left: 75px !important;
  }
}
@media(max-width:320px) {
  .pop-button .right-btn {
    left: 70px !important;
  }
}

 @media (min-width:320px) and (max-width:425px) {
   
   .select_menu {
     top: 91px;
   }

   .feature_bar {
     top: 242px;
   }

   .restro-search {
     margin-top: 6px;
     width: 100%;
     float: right;
   }

   .menu-container {
     width: 100% !important;
   }

   .menu-content {
     width: 90%;
   }   
 }



 /* tab of deliver and pickup start */



 /* Make buttons rounded-pill */
 .nav-link {
   margin-top: 5px;
   width: 112px;
   border-radius: 50px;
   /* padding: 10px 20px; */
   font-size: 14px;
   font-weight: 600;
   transition: all 0.3s ease;
   color: #000000;
   background-color: #f8d7da;
   border: none;
 }

 /* Hover effect */
 .nav-link:hover {
   background-color: #f8d7da;
   color: #000000;
   /* transform: translateY(-2px); */
 }

 .nav-link.active {
   background-color: #ae0014;
   color: #ffffff;
 }


 #v-pills-tab {
   top: 2px;
   left: 14px;
   position: relative;
   height: 50px;
 }



 #v-pills-driver-tab,
 #v-pills-store-tab {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   /* transition: z-index 0.1s ease, transform 0.1s ease; */
 }

 #v-pills-store-tab {
   left: 95px;
   z-index: 0;
 }

 #v-pills-profile-tab {

   position: absolute;
   left: 173px;
   z-index: 0;
 }

 #v-pills-driver-tab.active {
   z-index: 2;
 }

 #v-pills-store-tab.active {
   z-index: 2;
 }


 @media(min-width:1024px) and (max-width:1200px) {
   .nav-link {
     margin-left: -50px;

   }
 }

 /* tab of deliver and pickup end */

 #pac-input {
   z-index: 9999;
   position: relative;
 }

 .pac-container {
   z-index: 9999 !important;
 }

 @media(min-width:1024px) and (max-width:1200px) {

   #v-pills-tab {
     top: 2px;
     left: 64px;
     position: relative;
     height: 50px;
   }

 }

 /* .menu-categories {
  display: block;
  overflow-y: scroll;
  scrollbar-width: none;
} */

 @media(min-width:1200px) {
   .menu-categories {
     display: block !important;
     overflow-y: scroll;
     scrollbar-width: none;
   }
   .menu-categories li {
     padding-left: 5px;
     padding-bottom: 6px;
     font-size: 1.2rem;
     color: #a1a1a1;
     cursor: pointer;
     white-space: nowrap;
     margin-bottom: 5px;
     text-align: center;
     transition: background-color 0.3s;
     margin: 0 20px;
   }
 }