/* Styles remain unchanged except for the addition of .item-info and .item-price */
        .image-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
          }
      
          .image-container img {
            max-width: 30%;  /* Set to your desired size, e.g., 50% of the container */
            height: auto;    /* Maintain the aspect ratio */
          }


        .logo-title-container {
            margin-top: 10px;
        }

        .logo-title {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000000;
            color: #ffffff;
            background-color: #000;
            padding: 10px 20px;
            border-radius: 10px;
            display: inline-block;
        }

        #menu-container button {
            margin: 5px;
            padding: 8px 16px;
            border: 2px solid black;
            border-radius: 4px;
            background-color: white;
            color: black;
            cursor: pointer;
        }

        #menu-container button.selected {
            background-color: black;
            color: white;
        }

        .item-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc; /* Adds a horizontal line */
            padding-bottom: 20px; /* Adds some space between the content and the line */
        }
        
        .item-image {
            width: 100px; /* Default width for small screens */
            height: 100px; /* Default height for small screens */
            margin-right: 20px;
            border-radius: 50%; /* Makes the image circular */
            object-fit: cover; /* Ensures the image fills the circular area without distortion */
        }
        

        /* For larger screens, adjust the image size */
        @media (min-width: 768px) {
            .item-image {
                width: 150px; /* Increase the size on larger screens */
                height: 150px; /* Maintain the aspect ratio for larger screens */
            }
        }
        
        @media (min-width: 1200px) {
            .item-image {
                width: 200px; /* Increase the size even more on very large screens */
                height: 200px; /* Maintain the aspect ratio for very large screens */
            }
        }

        .item-name {
            font-weight: bold;
            font-size: 16px; /* Default size for small screens */
        }
        
        /* New styles for flex containers */
        .item-info {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .item-price {
            align-self: flex-end;
            margin-top: 10px;
            font-size: 14px; /* Default size for small screens */
        }
        
        /* For larger screens, adjust the font sizes */
        @media (min-width: 768px) {
            .item-name {
                font-size: 18px; /* Increase size on tablets */
            }
        
            .item-price {
                font-size: 16px; /* Increase size on tablets */
            }
        }
        
        @media (min-width: 1200px) {
            .item-name {
                font-size: 20px; /* Increase size on desktops */
            }
        
            .item-price {
                font-size: 18px; /* Increase size on desktops */
            }
        }
        
        


        .category-container {
            border: 2px solid black;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 20px;
        }

        .category-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .horizontal-line {
            border-top: 1px solid black;
            margin-bottom: 10px;
        }

        #tables-container {
            margin-top: 20px;
        }

    







        /**
        Spinner
        */
   
   .spinner-wrapper{
       width: 100%;
       height: 100%;
       background-color: #151515;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .spinner {
       position: relative;
       width: 8rem;
       height: 8rem;
       border-radius: 50%;
   }
   
   .spinner::before,
   .spinner:after{
       content: "";
       position: absolute;
       border-radius: 50%;
   }
   
   .spinner:before {
       width: 100%;
       height: 100%;
       background-image:linear-gradient(90deg, #ff00cc 0%,#333399 100% );
       animation: spin .5s infinite linear;
   }
   .spinner:after {
       width: 90%;
       height: 90%;
       background-color: #151515;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   
   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   
   }



   /** Language switcher */

   .flag-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  #languageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .language-item {
    display: flex;
    align-items: center;
  }
    /* Custom styles */
    .button-container {
        display: inline-block;
        padding: 5px; /* Adjust padding as needed */
        border-radius: 20px; /* Adjust border radius as needed */
        background-color: black;
    }


		/* Footer Section */
        footer {
            background-color: #222;
            color: white;
            padding: 25px 10px;
            text-align: center;
          }
          
          /* Footer Container - Aligns everything in a row */
          .footer-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: auto;
            flex-wrap: wrap;
            text-align: center;
          }
          
          /* Location, Social, and Contact Sections */
          .footer-location,
          .footer-social,
          .footer-contact {
            flex: 1;
            padding: 10px;
            min-width: 200px;
          }
          
          /* Titles in the footer */
          .footer-location h3,
          .footer-contact h3,
          .footer-social h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: #6e8a84;
          }
          
          /* Contact Info Styling */
          .footer-contact p,
          .footer-location p {
            font-size: 14px;
            color: #ccc;
            margin: 5px 0;
          }
          
          /* Social Media Section */
          .footer-social p {
            font-size: 16px;
            margin-bottom: 10px;
          }
          
          /* Social Icons */
          .social-icons {
            display: flex;
            justify-content: center;
            gap: 12px;
          }
          
          .social-icons a {
            color: white;
            text-decoration: none;
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #444;
            border-radius: 50%;
            transition: background-color 0.3s ease;
          }
          
          .social-icons a:hover {
            background-color: #6e8a84;
          }
          
          /* Responsive Design */
          @media (max-width: 768px) {
            .footer-container {
              flex-direction: column;
              text-align: center;
            }
          
            .footer-location,
            .footer-social,
            .footer-contact {
              margin-bottom: 15px;
            }
          }


          /* Scroll to Top Button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px; /* 20px from the bottom */
    right: 20px; /* 20px from the right */
    background-color: #243642; /* Button background color */
    color: white; /* Arrow icon color */
    border: none;
    border-radius: 50%; /* Makes the button circular */
    width: 50px; /* Width of the circular button */
    height: 50px; /* Height of the circular button */
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    font-size: 30px; /* Size of the arrow */
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent; 
    display: none; /* Hidden by default */
       z-index: 10;
}



.scroll-to-top-btn:focus {
    outline: none; /* Remove focus outline for better UX */
}