@media (max-width: 767.98px) {
  .logo {
      max-width: 80px; /* Adjust the width of the logo for mobile view */
    }
  .bottom-navbar {
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .bottom-navbar .navbar-brand {
    flex: 1;
    text-align: center;
    color: #555;
    font-size: 1rem; /* Small font size for bottom navbar */
  }
  .bottom-navbar .navbar-brand i {
    font-size: 1.2rem; /* Adjusting icon size */
    margin-bottom: 0.2rem; /* Adjusting margin for icon */
  }
  .footer-mobile {
    display: none; /* Hide the footer for mobile view */
  }
  /* Adjust hero section height for mobile */
  .jumbotron {
    height: auto; /* Auto height for mobile */
    padding-top: 80px; /* Adjust top padding for mobile */
    padding-bottom: 50px; /* Adjust bottom padding for mobile */
  }
  /* Adjust font size for mobile */
  .homepage {
    font-size: 2rem; /* Larger font size for mobile */
  }
  .h4 {
    font-size: 1.5rem; /* Larger font size for mobile */
  }
  /* Adjust margin for mobile */
  .mt-5 {
    margin-top: 3rem; /* Decrease margin for mobile */
  }
  .form-group {
    margin-bottom: 1rem; /* Decrease margin for mobile */
  }
}

/* Custom Button Styles */
.btn-scanjee {
    background-color: #E19F65;
    color: #fff;
    border-color: #E19F65;
}

/* Custom Font Styles */
.font-white {
    color: #fff;
}

.space-xs {
    margin-bottom: 5px;
}

/* Custom CSS for additional styling */
/* Add your custom styles here */
.card {
border: none;
border-radius: 20px;
overflow: hidden;
transition: transform 0.3s;
}

.card:hover {
transform: translateY(-5px);
}

.card-img-top {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.card-title {
color: #333;
text-decoration: none;
font-size: 1.2rem;
}

.card-title:hover {
color: #E19F65;
}

.logo {
max-width: 100%;
height: auto;
}

.custom-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="5"><path d="M6 5L0 0h12z" fill="%23525252"/></svg>');
background-repeat: no-repeat;
background-position-x: calc(100% - 10px);
background-position-y: center;
padding-right: 30px;
border: 1px solid #ced4da;
border-radius: 5px;
height: 46px; /* Adjust the height as needed */
}

.custom-select:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-small {
font-size: 14px; /* Set smaller font size */
}

.btn-scanjee.btn-small {
padding: 8px 16px; /* Adjust padding for smaller size */
}

.btn-scanjee.btn-small:hover {
color: #E19F65; /* Change text color on hover */
border-color: #E19F65; /* Change border color on hover */
}

.btn-scanjee.btn-small:hover {
background-color: #E19F65; /* Change background color on hover */
color: #fff; /* Change text color on hover */
}

/* Custom Button Styles */
.btn-primary {
  background-color: #E19F65;
  border-color: #E19F65;
}
.btn-primary:hover {
  background-color: #b9004e; /* Darker shade on hover */
  border-color: #b9004e;
}

/* Custom Form Styles */
.card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Increased shadow effect */
}
.card-title {
  color: #333;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}
.form-group {
  margin-bottom: 20px;
}
label {
  font-weight: bold;
}

/* Custom Input Styles */
input[type="text"],
input[type="tel"],
input[type="password"] {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Increased shadow effect */
}

button:disabled {
  background-color: #6c757d !important; /* Grey color */
  cursor: not-allowed; /* Change cursor to not-allowed */
}


.contact-card {
border: 1px solid #E19F65;
border-radius: 10px;
transition: box-shadow 0.3s;
}

.contact-card:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

  /* Custom CSS for sticky green bar */
  .sticky-green-bar {
    position: sticky;
    bottom: 56px; /* Height of the bottom navbar */
    background-color: #28a745;
    color: #fff;
  }
  .d-none {
    display: none !important;
  }
  .navbar-brand {
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .navbar-brand i {
    margin-bottom: 5px; /* Adjust the margin as needed for spacing between icon and name */
  }

  .quantity-adjust {
    display: flex;
    align-items: center;
    color: green;
  }

  .quantity-adjust button {
    margin: 0 5px;
  }
      .addToCartBtn {
      width: 100px;
  }
  
  .btn-success{         
      background-color: #1ca474;     
  }       

/* Custom CSS to change btn-success color */
  .btn-success:hover,
  .btn-success:focus,
  .btn-success:active,
  .btn-success.active {
      background-color: #1ca474 !important; /* Change background color on hover, focus, click */
      border-color: #1ca474 !important; /* Change border color */
  }
  
  
  
 #recdiv {
      display: flex;
      align-items: center;
      justify-content: space-between; /* Align items to the start and end of the container */
      width: 100px; /* Set the width of the rectangular box */
      background-color: #fff; /* Set the background color */
      color: #1ca474; /* Set the text color */
      border: 1px solid #dddddd; /* Set the border color and width */
      border-radius: 10px; /* Set the border radius for rounded corners */
      padding: 10px; /* Set padding inside the rectangular box */
  }

  #recdiv button {
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      font-size: 18px; /* Adjust font size as needed */
  }

  #recdiv .cart-qty {
      font-size: 16px; /* Adjust font size as needed */
  }

  #recdiv button {
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      font-size: 18px; /* Adjust font size as needed */
      outline: none; /* Remove the outline on click */
  }

  #recdiv button:focus {
      outline: none; /* Remove the outline on focus (for accessibility) */
  }

  .login-container {
    display: flex;
    margin-top: -50px;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of the viewport */
    background-color: #f8f9fa; /* Light background color */
}

.login {
    width: 400px; /* Adjust the width as needed */
    padding: 20px;
    margin-top: -150px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.restaurant-logo {
    width: 80px; /* Adjust logo size */
    margin: auto; /* Center the logo */
    margin-bottom: 20px; /* Add some space below the logo */
}

@media (max-width: 576px) { /* Adjust for mobile view */
    .login {
        width: 90%; /* Make the card width 90% of the viewport */
    }
}

.btn-outline-scanjee {
  color: #E19F65;
  border-color: #E19F65;
}

.btn-outline-scanjee:hover {
  background-color: #E19F65;
  color: #fff;
}