/* General styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333333;
  }
  .Title {
    position: absolute;
    text-align: center;
    left: 50%; /* Moves the left edge to the center */
    transform: translateX(-50%);
  }
  
  header {
    background-color: #8b5f0c;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
  }
  .logo-container img {
    height: 200px;
    display: block; /* Ensures the shadow applies nicely all around */
    margin: auto; /* Centers the logo if the header has enough space */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Adjust the fade effect */
    border-radius: 30px; /* Optional: Adds a slight rounded corner to soften the edges */
}
  header h1 {
    margin: 0;
    font-size: 36px;
  }
  .menu-container {
    position: relative;
    display: inline-block;
    left: 45%;
  }
  
.menu-button {
    background-color: #8b5f0c;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor:pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .menu-button:hover {
    background-color: #a76d00;
  }
  
  .dropdown-menu {
    display: none;
    
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1;
    border-radius: 5px;
  }
  
  .dropdown-menu a {
    display: block;
    padding: 8px 12px;
    color: #8b5f0c;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .dropdown-menu a:hover {
    background-color: #f0f0f0;
  }
  .hamburger-icon {
    display: flex;
    
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 25px;
  }
  
  .hamburger-icon .line {
    background-color: white;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    transition: background-color 0.3s ease;
  }
  
  .menu-button {
    background-color: #8b5f0c;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }
  
  .menu-button:hover .line {
    background-color: #ffffff;
  }
  .menu-container {
    position: relative; /* Ensure the dropdown menu is positioned relative to this container */
  }
  
  .dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute; /* Positioned relative to the .menu-container */
    top: 100%; /* Positions the dropdown just below the button */
    right: 0; /* Aligns the dropdown menu to the right of the container */
    background-color: #6a4603; /* Matches the header background */
    color: white;
    width: 150px; /* Set the width as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000; /* Ensures it appears above other elements */
  }
  
  .dropdown-menu a {
    display: block; /* Ensures each link takes up full width */
    padding: 10px 15px;
    text-decoration: none;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
  }
  
  .dropdown-menu a:hover {
    background-color: #a76d00;
  }
  
  .menu-container:hover .dropdown-menu {
    display: block; /* Show the menu when hovering over the container */
  }
  
  body {
    overflow-y: auto; /* Ensures the scrollbar remains unaffected */
  }
  .booking-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .booking-container h2 {
    text-align: center;
    color: #8b5f0c;
  }
  
  /* Form styling */
  form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  form input, 
  form textarea,
  form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  form textarea {
    resize: none;
  }
  
  form select {
    background-color: #ffffff;
    cursor: pointer;
  }
  
  form button {
    background-color: #8b5f0c;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  form button:hover {
    background-color: #333333;
  }
  
  /* Footer styling */
  footer {
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
  }
  @media (max-width: 480px) {
    header h1 {
      font-size: 20px; /* Further adjust font size */
    }
  
    .menu-container {
      position: relative;
      display: inline-block;
      left: 45%;
    }
    .hamburger-icon {
      height: 15px; /* Reduce hamburger icon size */
      width: 20px;
    }
  
    .hamburger-icon .line {
      height: 2px; /* Slimmer lines for smaller screens */
    }
  
    .booking-container {
      padding: 10px; /* Reduce padding */
    }
  
    form input,
    form textarea,
    form select {
      font-size: 12px; /* Further reduce font size */
      padding: 6px;
    }
  
    form button {
      font-size: 12px;
      padding: 6px;
    }
  
    footer {
      font-size: 10px; /* Smallest font size for footer */
    }
  }