body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white; /* Text color */
  background-color: darkblue; /* Background color of the header image */
  font-family: 'Lato', sans-serif;
  background-image: url('inside.jpg'); /* Replace with the actual image URL */
  background-repeat: no-repeat; /* If you want the image not to repeat */
  background-size: cover; /* Adjusts the image size to cover the entire background */
}

header {
    background: linear-gradient(to bottom, #4CAF50, #2E8B57);
    color: #fff;
    text-align: center;
    padding: 1rem;
    background-image: url('muertosdos.jpg'); /* Replace with the actual image URL */
  background-repeat: no-repeat; /* If you want the image not to repeat */
  background-size: cover; /* Adjusts the image size to cover the entire header */
  /* Other background properties you might want to use */
  /* background-position: center; */
  /* background-color: #f0f0f0; (Fallback color in case the image is unavailable) */
  padding: 1rem;
}

section {
    padding: 2rem;
    margin: 2rem 0;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    color: lightblue; /* Subheading and accent color */
}

form label {
    display: block;
    margin-top: 1rem;
}

form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="date"],
form input[type="time"] {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

form input[type="submit"] {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background-color: #555;
}


section#menu ul li strong {
    font-size: 1.5em;
    font-weight: bold;
  }

  h1, h2, h3 {
    color: red; /* Heading color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow with a slight blur */
    font-family: 'Montserrat', sans-serif;
  }

  a {
    color: #FFD700; /* Yellow for links */
    text-decoration: none; /* Remove underline from links */
  }
  
  a:hover {
    color: red; /* Hover effect for links */
  }

  #menu ul {
    list-style: none;
    padding: 0;
}

#menu ul li {
    margin-bottom: 1rem;
}

/* Style the nested menu items */
#menu ul ul {
    margin-left: 2rem;
}

/* Add spacing and style to the reservation form */
#reservation form {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#reservation form label {
    display: block;
    margin-top: 1rem;
}

#reservation form input[type="text"],
#reservation form input[type="email"],
#reservation form input[type="number"],
#reservation form input[type="date"],
#reservation form input[type="time"] {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#reservation form input[type="submit"] {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, #FFA500, #FF8C00);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#reservation form input[type="submit"]:hover {
    background: linear-gradient(to bottom, #FF8C00, #FFA500);
}

/* Add spacing to the contact information */
#contact {
    padding: 1rem;
}

/* Mobile Devices 319px — 480px */
@media only screen and (min-width: 319px) and (max-width: 480px) {
 
  }
  
  /* iPads and Tablets 481px — 1200px */
  @media only screen and (min-width: 481px) and (max-width: 1200px) {

  }
  
  /* Laptops 1201px — 1600px */
  @media only screen and (min-width: 1201px) and (max-width: 1600px) {

  }
  
  /* Desktops 1601px and more */
  @media only screen and (min-width: 1601px) {

  }


  /* Apply flexbox to create a two-column layout for the menu section */
#menu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Style each menu column */
.menu-column {
    flex: 1;
    padding: 2rem;
}

/* Adjust the width of the images */
.menu-column img {
    width: 100%;
    max-width: 200px; /* Adjust the size as needed */
    display: block;
    margin-top: 1rem;
}


/* Styling for the sticky navigation bar */
#navbar {
    top: 0;
    background-color: #333;
    padding: 1rem;
}

#navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

#navbar li {
    display: inline;
}

#navbar a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

#navbar a:hover {
    background-color: #555;
    color: #ffd700; /* Yellow for links when hovering */
}

/* Style the buttons */
button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;

    /* Add the CSS transition for smooth color change */
    transition: background-color 0.3s ease;
}

/* Change the button color when hovering over it */
button:hover {
    background-color: #555;
}

/* Style for the images */
img {
    opacity: 0; /* Set initial opacity to 0 for fade-in effect */
    transform: scale(0.8); /* Set initial scale to 0.8 for zoom-in effect */
    transition: opacity 1s ease, transform 1s ease;
}

/* Add a class to trigger fade-in effect */
.fade-in {
    opacity: 1;
}

/* Add a class to trigger zoom-in effect */
.zoom-in {
    opacity: 1;
    transform: scale(1);
}

/* Style for the input fields */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.5rem;
    transition: border-color 0.3s ease; /* Smooth border color change */
}

/* Apply the transition to the submit button */
input[type="submit"] {
    background: linear-gradient(to bottom, #FFA500, #FF8C00);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease; /* Smooth background color change */
}

/* CSS animation for the label when input is focused */
label {
    position: absolute;
    pointer-events: none;
    left: 0.5rem;
    top: 0.8rem;
    color: #555;
    transition: transform 0.3s ease, font-size 0.3s ease;
  }
  
  .focused {
    transform: translateY(-1.5rem) scale(0.8);
    font-size: 0.8rem;
    color: #FFA500;
  }

  /* Mobile menu styles */
#mobile-menu {
    display: none; /* Hide the menu by default on larger screens */
  }
  
  /* Styles for the menu button */
  #menu-toggle {
    display: block; /* Display the menu button on mobile */
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
  
  /* Styles for the navigation links in the mobile menu */
  #mobile-menu ul {
    list-style: none;
    padding: 0;
  }
  
  #mobile-menu li {
    margin-bottom: 1rem;
  }
  
  /* Add any other styles for the navigation links here */

  /* Styles for the accordion items */
.accordion-item {
    margin-bottom: 1rem;
  }
  
  /* Styles for the accordion buttons */
  .accordion-button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
  }
  
  /* Styles for the accordion content */
  .accordion-content {
    display: none; /* Hide the content by default */
  }
  
  /* Display the content when the accordion button is active */
  .accordion-item.active .accordion-content {
    display: block;
  }
  
  /* Add any other styles for the accordion content here */

  
  /* Styles for the loading animation */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.3);
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  footer {
    background-color: #333;
    color: #fff;
    padding: 2rem;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .social-media img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition: transform 0.3s ease; /* Add a smooth transition for the social media icons */
  }
  
  .social-media img:hover {
    transform: scale(1.2); /* Add a slight scale effect on hover */
  }
  
  .contact-info p {
    margin: 0;
  }
  
  /* Add any additional styles for the footer as needed */

  /* Styling for the hero image section */
#home {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10rem 2rem; /* Adjust the padding as needed */
    text-align: center;
}

/* Styling for the welcome message on the hero image */
.welcome-message {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Styling for the special offer section */
#special-offer {
    background-color: #FFA500;
    color: #fff;
    padding: 2rem;
    border-radius: 5px;
    text-align: center;
}

/* Styling for the About Us section */
#about {
    background-color: #2E8B57;
    color: #fff;
    padding: 2rem;
    border-radius: 5px;
    text-align: center;
}

/* Styling for the featured dishes section */
#featured-dishes {
    text-align: center;
    margin-top: 2rem;
}

/* Styling for the images of featured dishes */
.featured-images img {
    width: 200px; /* Adjust the width of the images as needed */
    margin: 1rem;
}

/* Styling for the customer reviews section */
#customer-reviews {
    border-top: 1px solid #fff;
    padding-top: 2rem;
    margin-top: 2rem;
    text-align: center;
}

/* Styling for individual customer reviews */
.review {
    margin-bottom: 1rem;
}

/* Add styles for the new menu items */
ul li ul li {
    list-style-type: disc; /* Use bullets for nested menu items */
    margin-left: 1rem; /* Adjust the margin to create an indentation */
    font-size: 1rem; /* Adjust font size as needed */
}

ul li ul li:before {
    content: "• "; /* Use custom bullet icon */
}

/* Adjust the font size and style for the menu sections */
ul li strong {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFA500; /* Set a color for the menu sections */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow */
}

/* Add styles for the three-column layout */
#menu {
    display: flex;
    justify-content: space-between;
}

.menu-column {
    flex: 1;
    padding: 1rem;
    margin: 1rem;
    background-color: #f9f9f9; /* Optional: Add background color for better visual separation */
    border-radius: 5px;
}

.menu-column h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFA500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.menu-column ul {
    list-style-type: disc;
    margin-left: 1rem;
    font-size: 1rem;
}

.menu-column ul li:before {
    content: "• ";
}

/* Adjust spacing between columns and items */
.menu-column:not(:last-child) {
    margin-right: 2rem;
}

/* Responsive adjustments: For smaller screens, display menu items in a single column */
@media only screen and (max-width: 768px) {
    #menu {
        flex-direction: column;
    }

    .menu-column:not(:last-child) {
        margin-right: 0;
        margin-bottom: 2rem;
    }
}

#menu {
    position: relative;
    display: flex;
}

.menu-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px; /* Adjust the width as needed */
    z-index: 1; /* To position the images above the columns */
}

#image1 {
    top: 5px; /* Adjust the vertical position for image 1 */
}

#image2 {
    top: 10px; /* Adjust the vertical position for image 2 */
}

#image3 {
    top: 15px; /* Adjust the vertical position for image 3 */
}

.menu-column {
    flex: 1;
    padding: 1rem;
    margin: 1rem;
    background-color: #C0504D; /* Terracotta color */
    border-radius: 5px;
}

header {
    position: relative; /* Ensure relative positioning for proper layout */
    text-align: center;
    padding: 2rem 0; /* Adjust the padding as needed */
}

#navbar {
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    background-color: #333;
    padding: 1rem;
    z-index: 1000; /* Set a higher z-index to ensure the navigation appears above other content */
}
  
/* ...your existing CSS... */

/* Add styling for the header background */
#header {
    background-color: #C0504D; /* Green background color */
    padding: 10px; /* Adjust padding for spacing */
    text-align: center; /* Center the content horizontally */
    width: 40%; /* Reduce the width of the header */
    margin: 0 auto; /* Center the header within its container */
}

/* Style for the h1 text */
#header h1 {
    margin: 0; /* Remove default margin for h1 */
    color: #FFA500; /* Set the text color for h1 */
    font-size: 24px; /* Adjust the font size */
}

#reservation form input[type="text"],
#reservation form input[type="email"],
#reservation form input[type="number"],
#reservation form input[type="date"],
#reservation form input[type="time"] {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid #555; /* Dark gray border color */
    border-radius: 5px;
    background-color: #C0504D; /* Light gray background color */
}




/* Style input fields with specific width */
input[type="text"],
input[type="email"],
textarea {
    width: 300px; /* Set the desired width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 10px;
    transition: border-color 0.3s;
}

/* Hover and focus effects */
input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover {
    border-color: #999;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #555;
}