*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Montserrat", sans-serif;
}

body {
  font-size: 100%;
  overflow-y: scroll;
  background: url("back.PNG");
  padding-bottom: 80px;
}
/* 
header {
  background: url(back.PNG);
  width: 100%;
  border-bottom: 2px solid rgb(189, 148, 86);
  box-shadow: rgba(0, 0, 0, 0.01) 0px 0.2px 0.6px,
    rgba(0, 0, 0, 0.016) 0px 0.6px 1.5px, rgba(0, 0, 0, 0.02) 0px 1.1px 2.8px,
    rgba(0, 0, 0, 0.024) 0px 2px 4.9px, rgba(0, 0, 0, 0.027) 0px 3.8px 9.2px,
    rgba(0, 0, 0, 0.04) 0px 9px 22px;
  padding: 20px 0;
} */

.eldDJg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.eldDJg img {
  max-width: 100%;
  height: auto;
  max-height: 80px;
}
/* Topbar styles */
.topbar {
  position: fixed;
  left: 10px;
  top: 60px;
  background: #333;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.topbar h1 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #fff;
}

.topbar form {
  display: flex;
  justify-content: center;
}

.topbar select {
  appearance: none;
  background-color: #444;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  margin: 0 5px;
  transition: background-color 0.3s ease;
}

.topbar select:hover {
  background-color: #555;
}

.topbar select option {
  background-color: #333;
  color: #fff;
}

/* About section styles */
.about-us {
  background: url("back.jpeg") no-repeat center center/cover;
  padding: 20px;
  text-align: center;
  color: white;
  border: 2px solid rgb(189, 148, 86);
  border-radius: 10px;
  margin: 20px auto;
  max-width: 800px;
  display: none; /* Initially hidden */
}

.about-us .container {
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  text-align: left;
}

.about-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: yellow; /* Changed to yellow */
}

.about-content p {
  color: white; /* Changed to white */
  font-size: 18px;
  margin: 5px 0;
}

/* Footer styles */
footer {
  background: url("back.PNG") no-repeat center/cover;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-top: 2px solid rgb(189, 148, 86);
  background-attachment: fixed;
}

.footer-content a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.footer-content a:hover {
  text-decoration: underline;
}

/* Back to top button styles */
.back-top-btn {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.back-top-btn ion-icon {
  font-size: 20px;
}

/* About section styles */
.about-us {
  background: url("back.jpeg") no-repeat center center/cover;
  padding: 20px;
  text-align: center;
  color: white;
  border: 2px solid rgb(189, 148, 86);
  border-radius: 10px;
  margin: 20px auto;
  max-width: 800px;
  display: none; /* Initially hidden */
}

.about-us .container {
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  text-align: left;
}

.about-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: yellow; /* Changed to yellow */
}

.about-content p {
  color: white; /* Changed to white */
  font-size: 18px;
  margin: 5px 0;
}

/* Topbar styles */
.topbar {
  position: fixed;
  left: 5%;
  top: 20px;
  transform: translateX(0%);
  background: #444;
  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.topbar h1 {
  margin: 0 15px 0 0;
  font-size: 16px;
  color: #fff;
}

.topbar .form-container {
  margin-right: auto; /* Align the language button to the left */
}

.topbar form {
  display: flex;
  align-items: center;
}

.lang-button {
  background-color: #666;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  margin: 0 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.lang-button:hover {
  background-color: #777;
  transform: scale(1.05);
}

.lang-button.active {
  background-color: #fff;
  color: #444;
  border-color: #fff;
}

/* Professional Drop-Up Menu Styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #0056b3; /* Professional deep blue background */
  color: #ffffff; /* White text for contrast */
  border: none; /* Remove border for a clean look */
  padding: 12px 24px; /* Adjust padding for a more balanced look */
  font-size: 16px; /* Slightly larger font size */
  border-radius: 30px; /* More rounded corners for a modern look */
  cursor: pointer;
  outline: none;
  font-weight: bold; /* Bold text for emphasis */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.dropbtn:hover {
  background-color: #004080; /* Slightly darker blue on hover */
  transform: translateY(-2px); /* Lift effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom: 100%; /* Position it above the button */
  left: 0;
  background-color: #ffffff; /* White background for content */
  min-width: 180px;
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for dropdown */
  z-index: 1;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden; /* Initially hidden */
}

.dropdown-content a {
  color: #333333; /* Dark text for contrast */
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  color: #000000; /* Dark text on hover */
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible; /* Make visible when hovered */
}

.dropdown:hover .dropbtn {
  background-color: #004080; /* Maintain hover state color */
}

/* Menu Item Styles */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.menu-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  position: relative;
}

.menu-item img {
  max-width: 100%;
  border-radius: 10px 10px 0 0;
}

.menu-item h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #333;
}

.menu-item p {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}

.menu-item span {
  display: block;
  margin: 10px 0;
  font-size: 16px;
  color: #444;
  font-weight: bold;
}

.menu-item .cart-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #0056b3;
  color: #fff;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item .cart-icon:hover {
  background: #004080;
}
/* Footer styles */
footer {
  background: url("back.PNG") no-repeat center/cover;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-top: 2px solid rgb(189, 148, 86);
  background-attachment: fixed;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-content a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 16px; /* Base font size */
}

.footer-content a:hover {
  text-decoration: underline;
}

/* Topbar styles inside footer */
.footer-content .form-container {
  display: inline-block;
  margin-right: 20px;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  footer {
    padding: 10px;
  }

  .footer-content a {
    font-size: 14px; /* Smaller font size on small screens */
    margin: 0 5px; /* Adjust margin for better spacing */
  }

  .footer-content .form-container {
    margin-right: 10px; /* Adjust margin for smaller screens */
  }
}

@media (max-width: 480px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-content a {
    margin: 5px 0; /* Adjust margin for vertical stacking */
  }
}
.lang-button {
  background-color: #666;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.lang-button:hover {
  background-color: #777;
  transform: scale(1.05);
}

.lang-button.active {
  background-color: #fff;
  color: #444;
  border-color: #fff;
}

/* Responsive styles for small screens */
@media (max-width: 768px) {
  .lang-button {
    padding: 6px 16px; /* Adjust padding for smaller screens */
    font-size: 12px; /* Adjust font size for better readability */
  }
}

@media (max-width: 480px) {
  .lang-button {
    padding: 4px 12px; /* Further adjust padding */
    font-size: 10px; /* Further adjust font size */
  }
}

/* Other styles omitted for brevity */

/* Back to top button styles */
.back-top-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.back-top-btn ion-icon {
  font-size: 20px;
}

/* About section styles */
.about-us {
  background: url("back.jpeg") no-repeat center center/cover;
  padding: 20px;
  text-align: center;
  color: white;
  border: 2px solid rgb(189, 148, 86);
  border-radius: 10px;
  margin: 20px auto;
  max-width: 800px;
  display: none; /* Initially hidden */
}

.about-us .container {
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  text-align: left;
}

.about-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: yellow; /* Changed to yellow */
}

.about-content p {
  color: white; /* Changed to white */
  font-size: 18px;
  margin: 5px 0;
}

/* Topbar styles */
.topbar {
  position: fixed;
  left: 5%;
  top: 20px;
  transform: translateX(0%);
  background: #444;
  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.topbar h1 {
  margin: 0 15px 0 0;
  font-size: 16px;
  color: #fff;
}

.topbar .form-container {
  margin-right: auto; /* Align the language button to the left */
}

.topbar form {
  display: flex;
  align-items: center;
}

.lang-button {
  background-color: #666;
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  margin: 0 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Professional Drop-Up Menu Styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: #00030e; /* Professional deep blue background */
  color: yellow; /* White text for contrast */
  border: none; /* Remove border for a clean look */
  padding: 12px 24px; /* Adjust padding for a more balanced look */
  font-size: 16px; /* Slightly larger font size */
  border-radius: 30px; /* More rounded corners for a modern look */
  cursor: pointer;
  outline: none;
  font-weight: bold; /* Bold text for emphasis */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.dropbtn:hover {
  background: #00030e; /* Slightly darker blue on hover */
  transform: translateY(-2px); /* Lift effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom: 100%; /* Position it above the button */
  left: 0;
  background-color: #ffffff; /* White background for content */
  min-width: 240px; /* Adjust width to fit two columns */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for dropdown */
  z-index: 1;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden; /* Initially hidden */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  gap: 10px; /* Space between columns */
  padding: 10px; /* Space inside dropdown */
}

.dropdown-content a {
  color: #333333; /* Dark text for contrast */
  padding: 8px 12px; /* Adjust padding */
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  color: #000000; /* Dark text on hover */
}

.dropdown:hover .dropdown-content {
  display: grid;
  opacity: 1;
  visibility: visible; /* Make visible when hovered */
}

.dropdown:hover .dropbtn {
  background: #00030e; /* Maintain hover state color */
}

/* Add to Cart button styles */
.add-to-cart {
  background: #00030e;
  color: yellow; /* Text color */
  border: none; /* Remove border */
  padding: 10px 20px; /* Padding */
  font-size: 14px; /* Font size */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  display: flex; /* Flexbox for icon alignment */
  align-items: center; /* Center items vertically */
  margin-top: 10px; /* Space above the button */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.add-to-cart i {
  margin-right: 8px; /* Space between icon and text */
}

.add-to-cart:hover {
  background-color: transparent; /* Darker background on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
} /* Menu section styles */
.menu-section {
  padding: 20px;
}

.menu-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.menu-section h2 {
  color: white;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.menu-item {
  background: #00030e;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: calc(33.333% - 20px);
  max-width: 300px;
  text-align: center;
  padding: 10px;
}

.menu-item img {
  max-width: 100%;
  height: auto;
}

.menu-item h3 {
  color: white;
  font-size: 18px;
  margin: 10px 0;
}

.menu-item p {
  font-size: 14px;
  color: #ccc;
}

.menu-item span {
  font-size: 16px;
  color: #fff;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  .menu-item {
    width: calc(
      100% - 20px
    ); /* Ensures each item takes up the full width of its container minus the gap */
  }

  .menu-section h2 {
    font-size: 22px;
  }

  .menu-item h3 {
    font-size: 16px;
  }

  .menu-item p,
  .menu-item span {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .menu-item {
    width: 100%; /* Ensures each item takes up the full width of its container */
    max-width: 100%; /* Ensures no max-width constraint */
  }

  .menu-section h2 {
    font-size: 20px;
  }

  .menu-item h3 {
    font-size: 14px;
  }

  .menu-item p,
  .menu-item span {
    font-size: 12px;
  }
}

.search-form {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.search-form input[type="text"] {
  padding: 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
  flex: 1;
}

.search-form button {
  background: #00030e;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-form button:hover {
  background-color: #004080;
}