body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.main-heading {
  font-size: 2rem; /* Adjust font size as needed */
  text-align: center;
  width: 90%; /* Set the width to ensure it fits on the screen */
  margin: 0 auto; /* Center the heading */
  line-height: 1.0; /* Increase line height for more space between lines */
}

.navbar-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease, transform 1s ease; /* Include transform in the transition */
  z-index: 1000;
  box-sizing: border-box;
  background-color: #1c1c1c; /* Add black background color */
}

@keyframes slideInNavbar {
  from {
    transform: translateY(-100%); /* Start with the navbar off the screen */
  }
  to {
    transform: translateY(0); /* Slide in the navbar to its original position */
  }
}

#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 40px;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.5s ease;
  background-color: #1c1c1c;
}

@media only screen and (max-width: 480px) {
  #navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 25px;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.5s ease;
  }
}

.navbar-wrapper.hidden {
  transform: translateY(-100%); /* Ensure the navbar is hidden */
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-left .logo {
  height: 40px;
  margin-right: 10px;
}


.nav-left .business-name {
  font-size: 24px;
  color: #FFEFE0;
  display: none; /* Hide by default */
}

@media (min-width: 768px) {
  .nav-left .business-name {
    display: inline; /* Show on larger screens */
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}

/* Common styles for navbar links */
.nav-right a,
.mobile-menu a {
  position: relative;
  color: #FFEFE0;
  text-decoration: none;
  overflow: hidden;
}

/* Underline animation */
.nav-right a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #c63337;
  transform: translateX(-100%);
  transition: transform .5s ease;
}

/* Hover and focus states */
.nav-right a:hover::after,
.nav-right a:focus::after{
  transform: translateX(0);
}

/* Style for active links */
.nav-right a.active,
.mobile-menu a.active {
  color: #c63337; /* Active link color */
}



.nav-mobile {
  display: none;
  color: white;
}

.menu-icon {
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
  color: #c63337;
}

@keyframes fadeIn {
  from {
      opacity: 0; /* Start with opacity 0 */
  }
  to {
      opacity: 1; /* Fade in to opacity 1 */
  }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1c1c1c;
  color: white;
  text-align: left;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeIn .5s ease; /* Apply fade-in animation with a duration of 3 seconds */
  z-index: 1002; /* Ensure mobile menu is above the navbar wrapper */
  justify-content: center;
  opacity: 0; /* Initially hide the mobile menu */
}




.mobile-menu .menu-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #FFEFE0;
}

.mobile-menu a {
  padding: 20px 0;
  color: #FFEFE0;
  text-decoration: none;
  font-size: 40px; /* Increase font size */
}

.mobile-menu a.active {
  text-decoration: underline;
}

/* Define CSS animation for sliding in */
@keyframes slideIn {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

/* Apply animation to mobile nav links */
.mobile-nav-link {
  animation: slideIn 0.5s forwards; /* Animation duration and fill mode */
  animation-delay: 0.2s; /* Delay for each link */
  opacity: 0; /* Start with opacity 0 */
}

@media only screen and (max-width: 768px) {
  .nav-right {
      display: none;
  }
  .nav-mobile {
      display: flex;
  }
}

.navbar-hidden {
  opacity: 0;
  display: none;
}


.menu-visible {
  display: flex;
  opacity: 1;
}

.scrolled {
  background-color: black;
}


/* ----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImage {
  height: 405px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.image {
  margin: auto;
  display: block;
  width: 100%; /* Updated width to fill the screen */
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 25px;
}

.modal-content {
  max-width: 100%;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */
.button-container {
  text-align: center;
  margin-top: 20px; /* Adjust as needed */
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-image: linear-gradient(to bottom, #ab7626, #8d5f1b);
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s, box-shadow 0.3s;
  text-decoration: none; /* Remove underline */
}

.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%; /* Adjust as needed */
  height: 300%; /* Adjust as needed */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.button:hover::before {
  width: 150%;
  height: 150%;
}

.button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  transition: all 0.3s ease;
  z-index: -1;
}

.button:hover::after {
  background: rgba(255, 255, 255, 0);
}

.button:active {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}


/* ----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */

.site-hero { 
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.55), 
      rgba(0, 0, 0, 0.55)
    ),
    /* bottom, image */
    url(../img/cover.jpg);

    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-shadow: 1px 1px 1px #000;
    min-height: 50vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0px;
    padding: 15rem;
    text-align: center; /* Center-align text */
}
  
.site-hero p {
  margin: 0; /* Remove default margin for <p> */
}

.site-wrapper{
  margin: 24px;
  border: 1px solid rgb(255, 255, 255);
  overflow: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  background-image: linear-gradient(to right, #ffffff, #ffffff, #ffffff);
  color: #000000;
  margin: 0;
  height: 100%;
  font-family: "Quasimoda", "ivyora-text", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.5em;
}

.site-header-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 80px 8.474576271%; 
  /* background:white; */
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem; /* Add some padding around the box */
  /* background-color: white;  */
}

.section-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 20px; /* Space between items */
  padding: 1rem; /* Padding inside the container */
  width: 100%;
  max-width: 1200px; /* Limit max width for large screens */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.section {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the left */
  background-color: #f9f9f9; /* Light background color for sections */
  padding: 20px; /* Padding inside each section */
  border: 1px solid #ddd; /* Border for each section */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for better visibility */
}

.section img {
  width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 10px; /* Space between image and heading */
}

.section h2 {
  margin: 10px 0 5px 0; /* Margin around heading */
  text-align: left; /* Align heading to the left */
}

.section p {
  margin: 0; /* Remove default margin */
  text-align: left; /* Align text to the left */
}

/* Ensure the sections don't touch the edges of the container */
.section-container > .section {
  margin: 0 10px; /* Margin between sections */
}


/* Additional CSS to adjust spacing between sections */
.section-container > :first-child {
  margin-right: auto; /* Push first child to the left */
}

.section-container > :last-child {
  margin-left: auto; /* Push last child to the right */
}

.section-info {
  margin: 0 auto;
  width: 49.01129944%;
   
}

.section-main {
  margin: 0 auto; /* Center the element horizontally */
  color: #000000;
  text-align: center; /* Center the text within the element */
  width: 100%; /* Set width to 100% to ensure it occupies the full width of its container */
}

/* Media query for tablets */
@media only screen and (max-width: 1024px) {
  .section-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust grid columns for smaller screens */
  }
}

/* Media query for smaller devices */
@media only screen and (max-width: 768px) {
  .section-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid columns for smaller screens */
  }
}

/* CSS for sliding effects on mobile screens (480px or lower) */
@media only screen and (max-width: 480px) {
  .slide-in-left {
    opacity: 0;
    transform: translateX(-50%);
    transition: all .3s ease-out;
  }

  .slide-in-right {
    opacity: 0;
    transform: translateX(50%);
    transition: all .5s ease-out;
  }

  .slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .fade {
    opacity: 0;
    transition: opacity .5s ease-out;
  }

  .fade.visible {
    opacity: 1;
  }

  .fading {
    opacity: 0;
    transition: opacity 1.5s ease-out;
  }

  .fading.visible {
    opacity: 1;
  }


  .image-container {
    position: relative;
  }
  
  .white-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Start with the white shape covering the image */
    background-color: white;
    z-index: 1; /* Ensure the white shape is above the image */
    animation: revealImage .5s forwards; /* Animation to reveal the image */
    animation-play-state: paused; /* Initially, pause the animation */
  }
  
  @keyframes revealImage {
    0% {
      height: 100%; /* Start with the white shape covering the entire image */
      top: 0; /* Start the white shape at the top */
    }
    100% {
      height: 0; /* Reduce the height to 0 to reveal the image */
      top: 100%; /* Move the white shape down to reveal the image */
    }
  } 
}

/* Ensure the fade-in effect for larger screens is still applied */
@media only screen and (min-width: 481px) {
  .fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
  }

  .fade-in.visible {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.container {
  position: relative;
  width: 100%;
  height: 400px; /* Set a specific height */
  margin-bottom: 20px; /* Add space between containers */
  overflow: hidden; /* Ensure content doesn't overflow */
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(2.5px); /* Adjust the blur level as needed */
  z-index: 1; /* Ensures the pseudo-element is below the text */
}

.container .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Ensure it covers the container */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255); /* Text color */
  padding: 20px;
  z-index: 2; /* Ensures text is above the blurred background */
  text-align: center;
  font-size: 1.5em;
  padding: 20px; /* Add padding around the content */
  box-sizing: border-box; /* Include padding in element's total width and height */
}

.container.container1::before {
  background-image: url('../img/better wine.jpg');
}

.container.container2::before {
  background-image: url('../img/cook.jpg');
}

.container.container3::before {
  background-image: url('../img/food.jpg');
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.img-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  filter: blur(.5px);
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.wrapper {
  background-color: lightgray; /* Set background color for the wrapper */
  padding: 1px; /* Set padding for all sides of the wrapper */
}

.footer {
  background-color: #1c1c1c; /* Set background color for the footer */
  color: white; /* Set text color for the footer */
  width: 100%; /* Ensure the footer spans the full width */
  display: flex; /* Use flexbox to align the grids */
  justify-content: space-between; /* Space between the two grids */
  padding: 20px; /* Add padding to the footer */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.footer-grid {
  display: grid; /* Use CSS grid layout */
  grid-template-columns: repeat(2, 1fr); /* 4 equal columns */
  gap: 20px; /* Space between columns */
  width: 50%; /* Each grid takes up half the footer width */
}

.footer-grid-column {
  display: flex;
  flex-direction: column;
}

.footer p {
  margin: 0; /* Remove default margin for paragraphs */
}

/* Responsive styles for smaller screens */
@media only screen and (max-width: 768px) {
  .footer {
    flex-direction: column; /* Stack the grids vertically */
    align-items: center; /* Center align the grids */
  }

  .footer-grid {
    width: 100%; /* Make each grid take the full width */
    margin-bottom: 20px; /* Add space between the grids */
  }
}


/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */
/* Media query for screens under 480px */
@media only screen and (max-width: 768px) {
  .section-container {
    grid-template-columns: repeat(1, 1fr); /* Change to one column */
    padding-left: 0;
    padding-right: 0;
    padding-top: 75px;
  }

  .section {
    text-align: center; /* Center text for better readability on small screens */
    padding: 20px;
  }

  .section img {
    max-width: 100%; /* Ensure images occupy full width on small screens */
    height: auto; /* Maintain aspect ratio */
  }

  .box {
    max-width: 100%; /* Ensure .box fills the screen width */
  }

  .modal {
    background-color: rgba(0, 0, 0, 0.9);
  }

  .modal-content {
    max-width: 100%; /* Ensure modal content fills the screen width */
    background-color: transparent; /* Set modal content background to transparent */
  }

  .container.container2, .container.container1, .container.container3{
    max-width: 100%; /* Ensure container fills the screen width */
    margin: 0 auto; /* Center container horizontally */
    padding: 0 0px; /* Add padding to the sides */
    padding-top: 20px;
    padding-bottom: 20px;
    height:400px;
  }

  .container.container2 .text-overlay, .container.container1 .text-overlay, .container.container3 .text-overlay {
    padding: 20px; /* Adjust padding for better readability */
  }

  .container.container2, .container.container1, .container.container3 h1,
  .container.container2, .container.container1, .container.container3 p {
    text-align: center; /* Center text on small screens */
  }

  .site-hero {
    padding: 8rem 1rem; /* Adjust padding for better display on mobile screens */
    min-height: auto; /* Remove minimum height */
    height: 200px;
  }
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-section {
  position: relative;
  text-align: center;
  color: white;
}

.header-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 60% of the viewport height */
  padding: 20px; /* Adjust padding as needed */
  color: white;
  text-align: center;
}

.header-image h1 {
  font-size: 3em;
  margin: 0;
}

.header-image p {
  font-size: 1.5em;
  margin-top: 10px;
}

.header-image img {
  max-height: 100%;
  width: auto;
}


/* Specific background images for each header */
.header-image1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 60% of the viewport height */
  padding: 20px; /* Adjust padding as needed */
  color: #FFEFE0;
  text-align: center;
  position: relative; /* Add relative positioning */
}

.header-image1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/cover.jpg') no-repeat center center/cover;
  background-size: cover;
  filter: blur(1px); /* Add blur effect */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.header-image2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 60% of the viewport height */
  padding: 20px; /* Adjust padding as needed */
  color: #FFEFE0;
  text-align: center;
  position: relative; /* Add relative positioning */
}

.header-image2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/reserve.jpg') no-repeat center center/cover;
  background-size: cover;
  filter: blur(1px); /* Add blur effect */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.header-image3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 60% of the viewport height */
  padding: 20px; /* Adjust padding as needed */
  color: #FFEFE0;
  text-align: center;
  position: relative; /* Add relative positioning */
}

.header-image3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/manuel.jpg') no-repeat center center/cover;
  background-size: cover;
  filter: blur(1px); /* Add blur effect */
  z-index: -1; /* Place the pseudo-element behind the content */
}

.header-image4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 60% of the viewport height */
  padding: 20px; /* Adjust padding as needed */
  color: #FFEFE0;
  text-align: center;
  position: relative; /* Add relative positioning */
}

.header-image4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/location.jpg') no-repeat center center/cover;
  background-size: cover;
  filter: blur(1px); /* Add blur effect */
  z-index: -1; /* Place the pseudo-element behind the content */
}


.header-img {
  background: url('../img/cover.jpg') no-repeat center center/cover;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
  color: #FFEFE0; /* Adjust text color for better contrast */
  text-align: center;
}

.header-img h1 {
  font-size: 3em;
  margin: 0;
}

.header-img p {
  font-size: 1.5em;
  margin-top: 10px;
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.reservation-form-section {
  padding: 50px 20px;
  background: #f8f8f8;
}

.reservation-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.reservation-form label {
  margin: 10px 0 5px;
}

.reservation-form input, .reservation-form textarea {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.reservation-form button {
  padding: 10px;
  background: #ab7626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Media queries for responsive design */
@media only screen and (max-width: 768px) {
  .reservation-form-section {
    padding: 40px 20px; /* Further reduced padding for smaller screens */
  }

  .reservation-form {
    max-width: 100%; /* Adjusted maximum width for smaller screens */
  }

  .reservation-form label {
    margin: 8px 0 4px; /* Adjusted margin for smaller screens */
  }

  .reservation-form input, .reservation-form textarea {
    padding: 8px; /* Reduced padding for smaller screens */
    margin-bottom: 10px; /* Reduced margin bottom for smaller screens */
  }

  .reservation-form button {
    padding: 8px; /* Reduced padding for smaller screens */
    font-size: 14px; /* Adjusted font size for smaller screens */
  }
}


/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */


.contact-info-section, .location-hours-section {
  padding: 50px 20px;
  text-align: center;
}

.map {
  height: 300px;
  background: #e0e0e0;
  margin-bottom: 20px;
}

.custom-icon {
  width: 30px;
  height: 30px;
}

.outer-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  border: 2px solid red;
  position: relative;
}

.inner-circle {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Media queries for responsive design */
@media only screen and (max-width: 768px) {
  .reservation-form-section, .contact-info-section, .location-hours-section {
    padding: 30px 20px; /* Further reduced padding for smaller screens */
  }

  .map {
    height: 200px; /* Further reduced map height for smaller screens */
  }

  .custom-icon {
    width: 16px; /* Further reduced size for smaller screens */
    height: 16px; /* Further reduced size for smaller screens */
  }

  .outer-circle {
    border: 1px solid red; /* Adjusted border size for smaller screens */
  }
}

/* Adjust z-index of map elements */
.leaflet-container {
  z-index: 1; /* Ensure the map is behind the navbar */
}

/* Adjust z-index of navbar dropdown menu */
.navbar .dropdown-menu {
  z-index: 2; /* Ensure the dropdown menu is above the map */
}


/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */


.news-section {
  padding: 40px 20px 60px; /* Added bottom padding to prevent items from touching the border */
  background-color: #f9f9f9;
}

.news-section {
  padding: 40px 20px 60px; /* Added bottom padding */
  background-color: #f9f9f9;
}

.news-header {
  text-align: center;
  margin-bottom: 40px;
}

.news-header h2 {
  font-size: 36px;
  margin: 0;
}

.news-header p {
  font-size: 18px;
  color: #555;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.news-item {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px; /* Maximum width for larger screens */
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-item img {
  width: 100%;
  height: auto;
  max-height: 400px; /* Limit the height to prevent overly large images */
  object-fit: cover;
}

.news-item h3 {
  margin: 20px 0 10px;
}

.news-item p {
  color: #666;
}

.news-date {
  font-size: 14px;
  color: #999;
  margin: 10px 0;
}


.read-more {
  display: inline-block;
  margin-top: 10px;
  color: #000000;
  text-decoration: underline; /* Ensure the link is underlined */
  font-size: 15px;
}

.read-more:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .news-item {
    width: 45%; /* Adjusted width for even larger screens */
  }
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  background-image: url('../img/web\ pattern.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #333;
}

.menu-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.menu-h1, .menu-h2 {
  text-align: center;
  margin-bottom: 20px;
}

.menu-h1 {
  font-size: 2.5em;
  font-weight: 700;
}

.menu-h2 {
  font-size: 2em;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 20px;
}

.menu-section {
  margin-bottom: 40px;
}

.menu-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.menu-item {
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
}

.menu-item:hover {
  transform: translateY(-5px);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item-name {
  font-size: 1.5em;
  font-weight: 600;
}

.item-description {
  font-size: 1em;
  color: #555;
}

.item-price {
  font-size: 1em;
  color: #888;
  font-weight: 600;
  text-align: right;
}

.menu-filter {
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
  padding: 10px;
  font-size: 1em;
  border-radius: 8px;
  border: 1px solid #ccc;
  display: block;
}

@media (min-width: 768px) {
  .menu-items {
    grid-template-columns: 1fr 1fr;
  }

  .menu-item:nth-child(even) {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .menu-item {
      border-bottom: 1px solid #ccc; /* Add border bottom to each menu item */
      margin-bottom: 10px; /* Add some space between menu items */
      padding-bottom: 10px; /* Add padding at the bottom of each menu item */
  }

  .menu-item:last-child {
      border-bottom: none; /* Remove border bottom from the last menu item */
      margin-bottom: 0; /* Remove margin from the last menu item */
      padding-bottom: 0; /* Remove padding from the last menu item */
  }
}

.menu-item.specialties .item-description {
  margin-top: 10px; /* Add margin to all item-descriptions */
}


/* Add this to your existing CSS */
.menu-subheading {
  text-align: center; /* Center align the sub-heading */
  font-size: 0.8em; /* Make the font size smaller */
  margin-bottom: 10px; /* Add some space below the sub-heading */
}

/* Add this to your existing CSS */
.bottom-heading {
  text-align: center; /* Center align the content */
  margin-top: 60px; /* Adjust the top margin as needed */
}

.bottom-subheading {
  font-size: 1.1em; /* Adjust the font size as needed */
  font-weight: 600; /* Adjust the font weight as needed */
  color: #555; /* Adjust the color as needed */
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */


.new-news {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.news-article {
  width: 80%;
  max-width: 800px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.article-meta {
  font-style: italic;
  color: #888;
  margin-bottom: 20px;
}

.article-content {
  line-height: 1.6;
}

.article-content p {
  margin-bottom: 20px;
  color: #555;
}

.article-content figure {
  margin: 20px 0;
}

.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.article-content video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.article-content figcaption {
  text-align: center;
  color: #888;
  font-style: italic;
  font-size: 14px;
}

.article-footer {
  border-top: 1px solid #ddd;
  padding-top: 20px;
  margin-top: 20px;
  font-size: 14px;
  color: #888;
}

.article-footer p {
  margin-bottom: 5px;
  /* font-family: "Cormorant Garamond", serif; */
  font-weight: 300;
  font-style: italic;  ;
}


.section-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.section-buttons button {
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.section-buttons button:hover {
  background-color: #555;
}

.next-section {
  margin-left: auto;
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */


.carousel-body {
  height: 600px;
  margin: 0;
  display: grid;
  grid-template-rows: 500px 100px;
  grid-template-columns: 1fr repeat(10, auto) 1fr; /* Adjusted grid columns */
  align-items: center;
  justify-items: center;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  position: relative;
}



.item img {
  width: 100%; /* Make the image take up 100% of its container's width */
  height: 100%; /* Make the image take up 100% of its container's height */
  object-fit: cover; /* Ensure the image covers the entire container, maintaining aspect ratio */
  border-radius: 20px; /* Retain the border-radius if desired */
}

.item.inactive img {
  opacity: 0.25;
}

.carousel-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.carousel-arrows button {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  color: #333;
  font-size: 1.5em;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.carousel-arrows button:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

  #carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: calc(100% * 10); /* Adjusted width to accommodate all slides */
  }
  
  div.item {
    /* Other styles */
    flex: 0 0 auto;
    width: 100%;
  }
  
main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 12; /* Adjusted to span all columns */
  width: 100vw;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events: none;
  position: relative; /* Ensure relative positioning for absolute children */
}

div.item {
  text-align: center;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  width: 300px;
  height: 250px;
  background-color: white;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all .75s linear;
  transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}


/* Existing CSS remains unchanged */

/* Adjust input positions */
.radio-container {
  grid-column: 1 / 12; /* Span all columns */
  grid-row: 2 / 3; /* Place in the second row */
  justify-self: center; /* Center horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0px;
}

.radio-container input[type="radio"] {
  display: inline-block;
  width: 10px; /* Adjust width as needed */
  height: 10px; /* Adjust height as needed */
  margin: 0 5px; /* Adjust spacing between radios */
}


div.item:nth-of-type(1) { --offset: 1; }
div.item:nth-of-type(2) { --offset: 2; }
div.item:nth-of-type(3) { --offset: 3; }
div.item:nth-of-type(4) { --offset: 4; }
div.item:nth-of-type(5) { --offset: 5; }
div.item:nth-of-type(6) { --offset: 6; }
div.item:nth-of-type(7) { --offset: 7; }
div.item:nth-of-type(8) { --offset: 8; }
div.item:nth-of-type(9) { --offset: 9; }
div.item:nth-of-type(10) { --offset: 10; }

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
  --position: 1;
}

input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}

input:nth-of-type(6) {
  grid-column: 7 / 8;
  grid-row: 2 / 3;
}
input:nth-of-type(6):checked ~ main#carousel {
  --position: 6;
}

input:nth-of-type(7) {
  grid-column: 8 / 9;
  grid-row: 2 / 3;
}
input:nth-of-type(7):checked ~ main#carousel {
  --position: 7;
}

input:nth-of-type(8) {
  grid-column: 9 / 10;
  grid-row: 2 / 3;
}
input:nth-of-type(8):checked ~ main#carousel {
  --position: 8;
}

input:nth-of-type(9) {
  grid-column: 10 / 11;
  grid-row: 2 / 3;
}
input:nth-of-type(9):checked ~ main#carousel {
  --position: 9;
}

input:nth-of-type(10) {
  grid-column: 11 / 12;
  grid-row: 2 / 3;
}
input:nth-of-type(10):checked ~ main#carousel {
  --position: 10;
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.overlay{
  margin: 10px;
  line-height: 3rem;
}

ol {
  margin-top: 0;
  margin-bottom: 15px;
}

/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */

.to-menu-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.to-menu-link {
  text-decoration: underline;
  color: #000; /* Change to your desired text color */
  font-size: 24px;
  padding-bottom: 50px;
}

@media (max-width: 768px) {
  .to-menu-container {
      justify-content: center;
  }
}
/* ------------------------------------------------------------------------
---------------------------------------------------------------------
------------------------------------------------------------------- */
/* .header-font {
  font-family: "Playwrite NG Modern", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.subheader-font {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  
}

.title {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 2em;
}

.items {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.text {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;  
  font-size: 24px;
}

.menu-font {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 24px
}

.page-font {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 24px
} */