/* Universal styles for all elements */
* {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
}

/* Header styles */
header {
  background-color: #070e16; /* Dark blue background */
  padding: 20px; /* Padding around the header */
  display: flex; /* Flexbox for layout */
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Space between logo and nav */
}

.logo img {
  height: 60px; /* Logo height */
  margin-left: 50px; /* Margin on the left side */
}

nav ul {
  list-style: none; /* Remove default list styling */
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block; /* Horizontal list items */
  margin-right: 15px; /* Space between items */
}

nav ul li a {
  text-decoration: none; /* Remove underline */
  color: white; /* White text color */
  font-weight: bold; /* Bold text */
  transition: color 0.3s ease; /* Smooth color transition */
}

nav ul li a:hover {
  color: #ff0000; /* Red color on hover */
}

/* Hero section styles */
.hero {
  background-image: url("images/hero-background1.jpg"); /* Background image */
  background-size: cover; /* Cover the whole section */
  background-position: center; /* Center the background */
  height: 100vh; /* Full viewport height */
  display: flex;
  text-align: left; /* Left-aligned text */
  color: #fff; /* White text color */
}

.hero-content {
  max-width: 600px; /* Maximum width for content */
  padding: 20px; /* Padding around the content */
  margin-top: 50px;
  margin-left: 4%;
}

.hero-content h1 {
  font-size: 48px; /* Large heading */
  margin-bottom: 20px; /* Space below the heading */
}

.hero-content p {
  font-size: 24px; /* Large paragraph */
  margin-bottom: 30px; /* Space below the paragraph */
}

.btn {
  display: inline-block; /* Inline block for buttons */
  background-color: #ff0000; /* Red background */
  color: #fff; /* White text */
  padding: 10px 20px; /* Padding inside button */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

.btn:hover {
  background-color: #e60000; /* Darker red on hover */
}

/* About section styles */
.about {
  display: flex; /* Flexbox for layout */
  align-items: center; /* Center items vertically */
  padding: 80px 0; /* Padding around the section */
}

.about-content {
  flex: 1; /* Take up remaining space */
  max-width: 600px; /* Maximum width for content */
  padding-right: 50px; /* Padding on the right */
  color: #fff; /* White text color */
  margin-left: 5%;
}

.about h2 {
  font-size: 36px; /* Large heading */
  margin-bottom: 20px; /* Space below the heading */
}

.about p {
  font-size: 18px; /* Medium paragraph */
  margin-bottom: 20px; /* Space below the paragraph */
}

.about-image {
  max-width: 50%; /* Half the width */
  margin-right: 5%;
}

.about-image img {
  max-width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px; /* Rounded corners */
}

.dark-theme {
  background-color: #070e16; /* Dark blue background */
}

/* Menu section styles */
.menu {
  padding: 80px 0; /* Padding around the section */
  text-align: center; /* Centered text */
  background-color: #070e16; /* Dark blue background */
}

.menu h2 {
  font-size: 36px; /* Large heading */
  margin-bottom: 40px; /* Space below the heading */
  color: #ffffff; /* White text color */
}

.menu-items {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center items horizontally */
}

.menu-item {
  max-width: 300px; /* Maximum width for items */
  margin: 0 20px; /* Margin around items */
  text-align: left; /* Left-aligned text */
}

.menu-item img {
  max-width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 10px; /* Space below image */
}

.menu-item h3 {
  font-size: 24px; /* Medium heading */
  margin-bottom: 10px; /* Space below the heading */
  color: #ffffff; /* White text color */
}

.menu-item p {
  font-size: 16px; /* Small paragraph */
  margin-bottom: 20px; /* Space below the paragraph */
  color: #ffffff; /* White text color */
}

/* Reservations section styles */
.reservations {
  background-color: #1f1f1f; /* Dark grey background */
  padding: 80px 0; /* Padding around the section */
  text-align: center; /* Centered text */
}

.reservation-form {
  max-width: 500px; /* Maximum width for form */
  margin: 0 auto; /* Center the form */
  background-color: #333; /* Dark background */
  padding: 40px; /* Padding inside the form */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
}

.reservation-form h2 {
  color: #fff; /* White text color */
  font-size: 28px; /* Medium heading */
  margin-bottom: 20px; /* Space below the heading */
}

.reservation-form form input,
.reservation-form form textarea {
  display: block; /* Block level elements */
  width: 100%; /* Full width */
  padding: 10px; /* Padding inside inputs */
  margin-bottom: 20px; /* Space below elements */
  border-radius: 5px; /* Rounded corners */
  border: none; /* No border */
}

.reservation-form form button {
  display: inline-block; /* Inline block for buttons */
  background-color: #ff0000; /* Red background */
  color: #fff; /* White text */
  padding: 10px 20px; /* Padding inside button */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

.reservation-form form button:hover {
  background-color: #e60000; /* Darker red on hover */
}

/* Testimonials section styles */
.testimonials {
  padding: 80px 0; /* Padding around the section */
  text-align: center; /* Centered text */
  background-color: #070e16; /* Dark blue background */
}

.testimonials h2 {
  font-size: 36px; /* Large heading */
  margin-bottom: 40px; /* Space below the heading */
  color: #fff; /* White text color */
}

.testimonial {
  max-width: 600px; /* Maximum width for testimonial */
  margin: 0 auto 40px; /* Center and space below */
  text-align: left; /* Left-aligned text */
}

.testimonial img {
  display: block; /* Block level element */
  width: 80px; /* Image width */
  height: 80px; /* Image height */
  border-radius: 50%; /* Circular image */
  margin: 0 auto 20px; /* Center and space below */
}

.testimonial p {
  font-size: 18px; /* Medium paragraph */
  margin-bottom: 20px; /* Space below the paragraph */
  color: #fff; /* White text color */
}

.testimonial h4 {
  font-size: 20px; /* Medium heading */
  font-weight: bold; /* Bold text */
  color: #fff; /* White text color */
}

/* Gallery section styles */
.gallery {
  padding: 80px 0; /* Padding around the section */
  text-align: center; /* Centered text */
  background-color: #070e16; /* Dark blue background */
}

.gallery h2 {
  font-size: 36px; /* Large heading */
  margin-bottom: 40px; /* Space below the heading */
  color: #fff; /* White text color */
}

.image-grid {
  display: grid; /* Grid layout */
  grid-template-columns: repeat(4, 1fr); /* Four equal columns */
  grid-gap: 20px; /* Gap between items */
  margin-left: 5%; /* Margin on the left side */
  margin-right: 5%; /* Margin on the right side */
}

.image-item img {
  width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px; /* Rounded corners */
}

/* Contact section styles */
.contact {
  background-color: #333; /* Dark background */
  padding: 80px 0; /* Padding around the section */
  text-align: center; /* Centered text */
  color: #fff; /* White text color */
}

.contact-container {
  max-width: 600px; /* Maximum width for container */
  margin: 0 auto; /* Center the container */
}

.contact h2 {
  font-size: 36px; /* Large heading */
  margin-bottom: 40px; /* Space below the heading */
}

.contact-info {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center items horizontally */
  margin-bottom: 40px; /* Space below the info */
}

.info-item {
  margin: 0 20px; /* Margin around items */
  text-align: center; /* Centered text */
}

.info-item i {
  font-size: 24px; /* Large icon */
  margin-bottom: 10px; /* Space below the icon */
}

.contact-form input,
.contact-form textarea {
  display: block; /* Block level elements */
  width: 100%; /* Full width */
  padding: 10px; /* Padding inside inputs */
  margin-bottom: 20px; /* Space below elements */
  border-radius: 5px; /* Rounded corners */
  border: none; /* No border */
}

.contact-form textarea {
  resize: vertical; /* Vertical resizing */
}

.contact-form button {
  display: inline-block; /* Inline block for buttons */
  background-color: #ff0000; /* Red background */
  color: #fff; /* White text */
  padding: 10px 20px; /* Padding inside button */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

.contact-form button:hover {
  background-color: #e60000; /* Darker red on hover */
}

/* Footer styles */
.footer {
  background-color: #070e16; /* Dark blue background */
  padding: 40px 0; /* Padding around the footer */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
}

.footer-content {
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Vertical alignment */
  align-items: center; /* Center items horizontally */
  margin-bottom: 40px; /* Space below the content */
}

.footer-logo img {
  max-width: 150px; /* Maximum width for logo */
}

.footer-links a {
  color: #fff; /* White text color */
  margin: 0 10px; /* Margin around links */
  text-decoration: none; /* Remove underline */
}

.footer-social a {
  color: #fff; /* White text color */
  margin: 0 5px; /* Margin around icons */
  text-decoration: none; /* Remove underline */
}

.footer-text {
  font-size: 14px; /* Small text */
}