body {
  font-family: 'Roboto', sans-serif; /* Change font to Roboto */
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

/* Header styles */
header {
  background-image: linear-gradient(to bottom, #2c3e50, #455a64); /* Modern gradient background */
  color: #fff;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex; /* Use flexbox to center buttons */
  justify-content: space-between; /* Evenly space buttons */
  align-items: center; /* Vertically center buttons */
}

header a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  flex: 1; /* Make buttons equal width */
}


header a:hover {
  background-color: #788ea4; /* Darken the background on hover */
}



/* Add font styling for h1 */
h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-family: 'Open Sans', sans-serif; /* Change font to Open Sans */
}

/* Adjust map styles */
#map {
  height: 400px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* Adjust container styles */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Adjust cafe list item styles */
.cafe-list li {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.cafe-list li:hover {
  background-color: #e0e0e0; /* Lighten the background on hover */
}

/* Adjust footer styles */
footer {
  background: linear-gradient(to right, #008CBA, #4CAF50); /* Gradient background */
  color: #fff;
  padding: 10px;
  text-align: center;
  margin-top: 20px;
}

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

footer a:hover {
  color: #ccc;
}

/* Banner styling */
.banner {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 100%;
  min-height: 100%;
}

/* Login modal styles */
.login-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* Hide modal by default */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;
}

.login-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.login-container h1 {
  margin-top: 0;
  color: #333;
}

.login-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-container label {
  margin-bottom: 10px;
  color: #333;
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-container button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #9c6654;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-container button[type="submit"]:hover {
  background-color: #3e8e41;
}

.login-container.forgot-password {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.login-container.register-link {
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

/* Show login modal when login button is clicked */
.login-modal.show {
  display: flex;
}

/* Media queries for smaller screens */
@media (max-width: 768px) {
  header a {
    margin: 0 5px; /* Reduce margin on smaller screens */
    padding: 6px 10px; /* Reduce padding on smaller screens */
  }
}

@media (max-width: 480px) {
  header a {
    flex-basis: 100%; /* Make buttons full-width on very small screens */
    margin: 0; /* Remove margin on very small screens */
  }
}

select {
  width: 100%; /* Change the width to 100% */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.container img {
  max-width: 100%; /* Ensure images don't exceed container width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure proper spacing between paragraphs */
  margin: 20px auto; /* Add some margin for spacing */
}