body {
  font-family: Georgia, serif;
  /* Remove margin: 0 to make it scroll */
  padding: 0;
  background-color: #f9f9f9; /* Background color for the website */
}

/* Make the header sticky */
header {
  background-color: #E8E2CF;
  color: #BD0100;
  padding: 10px;
  position: sticky;
  top: 0;
  /* Ensure the header appears above other elements */ /* Remove z-index to make it scroll*/
  display: flex; /* Add flexbox to create a horizontal layout */
  align-items: center; /* Center the content vertically */
  background-image: url(./03_trans.png);
  background-repeat: repeat;
}

.meme {
  background-color: #ffde59;
  margin-left: 20px; 
  padding: 0;
}

.meme p {
  font-size: 20px;
}

nav {
  margin-left: auto; /* Push the navigation links to the right side */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  display: flex; /* Align navigation items horizontally */
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

.menu-bar a {
  color: #fff;
  text-decoration: none;
}

/* Define the brown background class */
.brown-bg {
  background-color: #BD0100;
  color: #ffde59; 
  padding: 10px 20px;
  border-radius: 5px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 20px;
  }

  .meme {
    margin-left: 0;
    margin-bottom: 10px;
  }

  nav {
    margin-left: 0;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
  }

  nav ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

.animated-heading{
  /*font-size: 48px;*/
  width: 90%;
  animation: fadeInOut 3s infinite; /* Apply the animation */
}

/* Define the animation */
@keyframes fadeInOut {
  0% {
    opacity: 0; /* Starting position - fully transparent */
  }
  50% {
    opacity: 1; /* Midway position - fully opaque */
  }
  100% {
    opacity: 0; /* Ending position - fully transparent */
  }
}

.animated-paragraph {
  opacity: 0; /* Start with the paragraph fully transparent */
  transform: translateY(20px); /* Start with the paragraph translated 20px down */
  animation: fadeInSlideUp 1.5s forwards;
}

/* Define the animation */
@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1; /* Fade in the paragraph */
    transform: translateY(0); /* Slide up the paragraph into view */
  }
}

/* Video section styles */
.video-section {
  position: relative;
  width: 100%;
}

video {
  width: 100%;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

/*.text-overlay h1 {
  font-size: 100px;
  margin-bottom: 20px;
  line-height: 0.5;
}

.text-overlay p {
  font-size: 30px;
  line-height: 1;
}*/

.cta-button {
  display: inline-block;
  background-color: #ffde59;
  color: #BD0100;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px;
  margin-block-end: 50px;
  font-size: 30px;
  border-radius: 5px;
}

.cta-button:hover {
  background-color: #ffde59;
}

.center-button {
  text-align: center;
}

.cta-button2 {
  text-decoration: none;
}

/* Responsive Styles 
@media screen and (max-width: 768px) {
  .text-overlay h1 {
    font-size: 60px;
    margin-bottom: 10px;
  }

  .text-overlay p {
    font-size: 20px;
    line-height: 1.2;
  }*/

  .cta-button {
    font-size: 24px;
    margin-block-end: 30px;
    padding: 8px 16px;
  }


/* Featured dishes section styles */

#featured-dishes {
  border-radius: 10px;
  background-image: url(./03.png);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding-top: 20px;
  text-align: center; /* Center all content within this section */
}

.featured-dishes-container {
  display: flex;
  justify-content: space-between; /* Distribute dishes evenly */
  flex-wrap: wrap; /* Allow dishes to wrap to a new line on smaller screens */
}

.dish {
  flex-basis: calc(33.33% - 40px); /* Set a flexible basis for each dish and leave some space between them */
  margin: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

#featured-dishes h2 {
  background-color: #BD0100;
  color: #ffde59; 
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 30px;
  margin-bottom: 20px; /* Add some spacing below the heading */
}

.dish img {
  width: 100%;
  border-radius: 5px;
}

.dish h3 {
  font-size: 24px;
  margin: 10px 0;
  color: #bb8513;
}

.dish p {
  color: #777;
  padding: 5px;
  margin:10px;
  line-height: 1.6;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  #featured-dishes {
    justify-content: center; /* Center dishes in a single column on smaller screens */
  }
  .featured-dishes-container {
    flex-direction: column; /* Display dishes in a single column on smaller screens */
  }
  .dish {
    flex-basis: 100%; /* Set each dish to take 100% width in a single column */
    margin: 20px 0; /* Remove horizontal margins to stack the dishes vertically */
  }
}

/* Center the "Order Now" button */
.center-button {
  text-align: center;
  margin-top: 20px; /* Add some spacing between dishes and the button */
}


#contact {
  padding: 20px;
  text-align: center;
}

#contact h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #BD0100;
}

#contact p {
  margin-bottom: 10px;
  font-size: 20px;
  color: #777;
}

/* Footer styles */
footer {
  background-color: #fff;
  color: #BD0100;
  text-align: center;
  padding: 20px;
}

footer p {
  font-size: 14px;
}

footer img {
  width: 250px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  /* Adjust styles for smaller screens here */

  .video-section {
    height: auto; /* Adjust the height to fit content on smaller screens */
  }

  .text-overlay h1 {
    font-size: 48px; /* Decrease the h1 font size for smaller screens */
    margin-bottom: 10px; /* Reduce the margin-bottom for better spacing */
    line-height: 1.2; /* Adjust line height for better readability */
  }

  .text-overlay p {
    font-size: 24px; /* Decrease the p font size for smaller screens */
  }

  .cta-button {
    font-size: 24px; /* Decrease the cta-button font size for smaller screens */
  }

  .featured-dishes-2 {
    margin: 10px; /* Reduce the margin for better spacing */
    padding: 10px; /* Reduce the padding for better spacing */
  }

  .dish {
    width: 100%; /* Adjust the width of the dishes for smaller screens */
    margin: 20px 0; /* Adjust the margin for better spacing */
  }

  footer img {
    width: 80px; /* Reduce the image width for smaller screens */
  }

  header {
    display: block;
    text-align: center;
    position: static;
  }
  
  .meme {
    margin-bottom: 10px;
  }

  nav {
    margin-top: 10px;
  }

  nav ul {
    display: flex;
    flex-direction: column;
  }

  nav ul li {
    margin: 10px 0;
    text-align: center;
  }
  
  .cta-button2 {
    display: block;
    margin: 10px auto;
  }
}


/* Fix to make it scroll */
#front {
  position: absolute;
}


@media screen and (max-width: 768px) {
  #header img {
    float: right;
  }
}

#contact {
  background-color: #f9f9f9;
  
}