/* Global Resets & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #e9f7f1;
  color: #333;
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #d0fdc6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-size: cover;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.logo {
  height: 50px;
  width: auto;
}
.site-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.0rem, 4.5vw, 1.5rem);
  color: #2c3e50;
}
.navbar-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.navbar-links a {
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}
.navbar-links a:hover,
.navbar-links .btn-shop {
  background: #2c3e50;
  color: #ffffff;
  border-radius: 4px;
}
/* Social icons in the navbar */
.navbar-links li a {
  display: flex;
  align-items: center;
}

.navbar-links .social-group a {
  padding: 0.5rem 0.2rem;
}

/* but inside the social group, use a smaller gap */
.navbar-links .social-group {
  display: flex;
  gap: 0rem;            /* icons sit closer together */

}

.navbar-links .social-icon {
  width: 24px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.navbar-links li a:hover .social-icon,
.navbar-links li a:focus .social-icon {
  opacity: 0.7;
}
/* Hero Section */
.hero-section {
	margin-top:-10px;
  position: relative;
  overflow: hidden;
}
.hero-image {
	position: relative;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}
/* 1) Container does all the absolute positioning & centering */
.hero-overlay-container {
  position: absolute;
  top: 12%;                /* tweak as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1;
  width: 100%;
}
/* Overlay image */
.hero-overlay-image {
  width: 80%;             /* size as needed */
}
/* Overlay button */
.hero-overlay-button {
  background: #ffc107;
  color: #333;
  padding: 0.25rem 1.0rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}
.hero-overlay-button:hover {
  background: #e0a800;
}
/* overlay the full height SVG */
.wave-divider {
  width: 100%;
  height: 80px;                     /* visible slice height */
  overflow: hidden;                 /* crop the rest */
  background-size: 100% auto;           /* scale SVG to full width */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  clip-path: inset(0 0 0 0);		/* remove the top (shadow) from view */
  position: relative;
}

/* The image inside will cover the container */
.wave-divider .wave-img {
  width: 100%;
  height: 100%;
  object-position: top center;
  display: block;
}

.wave-divider.nav {
  height: 15px;                     /* visible slice height */
}

/* About Section */
.about-section {
  position: relative;
  z-index: 0;                       /* sit below the wave-overlay */
  background: #d0fdc6;
  padding: 4rem 2rem;
  text-align: center;
}
.about-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}
.about-section p {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  color: #555;
}
/* make the carousel a positioning context */
.carousel {
  position: relative;
  width: 100%;
  height: 400px;         /* adjust to taste */
  margin: 0 auto;
  overflow: hidden;
}
/* track holds all items absolutely */
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
/* common slide styles */
.carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
/* center slide */
.carousel-item.current {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
  z-index: 2;
}
/* left preview */
.carousel-item.prev {
  transform: translate(calc(-50% - 40%), -50%) scale(0.6);
  opacity: 0.5;
  z-index: 0;
}
/* right preview */
.carousel-item.next {
  transform: translate(calc(-50% + 40%), -50%) scale(0.6);
  opacity: 0.5;
  z-index: 1;
}
.carousel-item img {
  border-radius: 8px;
}
/* hide any others */
.carousel-item:not(.prev):not(.current):not(.next) {
  opacity: 0;
}
/* controls */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 3;
}
.carousel-control.prev { left: 0rem; }
.carousel-control.next { right: 0rem; }
/* dots */
.carousel-dots {
  position: absolute;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dots button.active {
  background: rgba(0,0,0,0.8);
}
/* Menu Section */
.menu-section {
  position: relative;
  background: #e9f7f1;
  padding: 4rem 2rem;
}
/* Announcement Section */
.announcement-section {
	margin-top: -10vh;
	margin-bottom: -10vh;
	z-index: -1;
  position: relative;
  background: #30442b;
  padding: 10rem 2rem;
}
.announcement-section .section-header h2 , h4, h3, p{
  color: #d0fdc6;
  width: 100%;
  font-family: 'EB Garamond', serif;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 2rem;
}
.section-header h2 {
  font-family: 'EB Garamond', serif;
  font-size: 2rem;
  color: #2c3e50;
}
.btn-view-all {
  padding: 0.5rem 1rem;
  border: 2px solid #2c3e50;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-view-all:hover {
  background: #2c3e50;
  color: #ffffff;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.menu-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.menu-card:hover {
  transform: translateY(-5px);
}
.menu-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.menu-card h3 {
  padding: 1rem;
  font-size: 1.2rem;
  color: #2c3e50;
}
.arch {
  /* 16:9 example size—adjust as you like */
  width: 80%;
  height: 100%;

  /* make the top corners semicircles of half the width */
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;

  overflow: hidden;  /* crop the image to the rounded box */
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-link {
  color: inherit;           /* use the same text color */
  text-decoration: none;    /* kill the underline */
}

.no-link:hover {
  text-decoration: none;    /* make sure no hover‑underline appears */
}

/* Footer */
.footer {
  background: #d0fdc6;
  text-align: center;
  padding: 2rem;
  position: relative;
}
.footer p {
  color: #7f8c8d;
  margin: 0.5rem 0;
}
#year {
  font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .navbar { flex-direction: column; gap: 1rem; }
  .section-header { flex-direction: column; gap: 1rem; }
}

/* Responsive Adjustments */
@media (min-width: 768px) {
	.arch {
	/* 16:9 example size—adjust as you like */
	  width: 40%;
	  height: 100%;

	  /* make the top corners semicircles of half the width */
	  border-top-left-radius: 200px;
	  border-top-right-radius: 200px;

	  overflow: hidden;  /* crop the image to the rounded box */
	}
	/* make the carousel a positioning context */
	.carousel {
	  position: relative;
	  width: 70%;
	  height: 500px;         /* adjust to taste */
	  margin: 0 auto;
	  overflow: hidden;
	}
	/* track holds all items absolutely */
	.carousel-track {
	  position: relative;
	  width: 100%;
	  height: 100%;
	}
}