:root {
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  --color-red-1: #fef2f2;
  --color-red-2: #ffa2a2;
  --color-red-3: #ff6467;
  --color-red-4: #fb2c36;
  --color-red-5: #e7000b;
  --color-gray-1: #f9fafb;
  --color-gray-2: #4a5565;
  --color-gray-900: #101828;
  --color-black: #000;
  --color-white: #fff;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xl: 0.75rem;
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-sm: 8px;
  --aspect-video: 16 / 9;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: "Inter", sans-serif;
  --default-mono-font-family: var(--font-mono);
  --color-border: hsl(var(--border));

  --border: 20 10% 20%;
  --input: 20 10% 20%;
  --ring: 40 20% 95%;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-outline-style: solid;
  --tw-blur: initial;
  --tw-brightness: initial;
  --tw-contrast: initial;
  --tw-grayscale: initial;
  --tw-hue-rotate: initial;
  --tw-invert: initial;
  --tw-opacity: initial;
  --tw-saturate: initial;
  --tw-sepia: initial;
  --tw-drop-shadow: initial;
  --tw-drop-shadow-color: initial;
  --tw-drop-shadow-alpha: 100%;
  --tw-drop-shadow-size: initial;
  --tw-backdrop-blur: initial;
  --tw-backdrop-brightness: initial;
  --tw-backdrop-contrast: initial;
  --tw-backdrop-grayscale: initial;
  --tw-backdrop-hue-rotate: initial;
  --tw-backdrop-invert: initial;
  --tw-backdrop-opacity: initial;
  --tw-backdrop-saturate: initial;
  --tw-backdrop-sepia: initial;
  --tw-leading: initial;

  --background: 40 20% 97%;
  --foreground: 20 10% 20%;
  --card: 40 20% 95%;
  --card-foreground: 20 10% 20%;
  --popover: 40 20% 97%;
  --popover-foreground: 20 10% 20%;
  --primary: 25 30% 25%;
  --primary-foreground: 40 20% 97%;
  --secondary: 35 15% 90%;
  --secondary-foreground: 25 30% 25%;
  --muted: 35 15% 90%;
  --muted-foreground: 25 10% 45%;
  --accent: 150 15% 30%;
  --accent-foreground: 40 20% 97%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 25 10% 85%;
  --input: 25 10% 85%;
  --ring: 25 30% 25%;
  --radius: 0rem;

  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  --tw-rotate-x: initial;
  --tw-rotate-y: initial;
  --tw-rotate-z: initial;
  --tw-skew-x: initial;
  --tw-skew-y: initial;
  --tw-space-y-reverse: 0;
  --tw-space-x-reverse: 0;
  --tw-border-style: solid;
  --tw-leading: initial;
  --tw-font-weight: initial;
  --tw-tracking: initial;
  --tw-ordinal: initial;
  --tw-slashed-zero: initial;
  --tw-numeric-figure: initial;
  --tw-numeric-spacing: initial;
  --tw-numeric-fraction: initial;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-outline-style: solid;
  --tw-blur: initial;
  --tw-brightness: initial;
  --tw-contrast: initial;
  --tw-grayscale: initial;
  --tw-hue-rotate: initial;
  --tw-invert: initial;
  --tw-opacity: initial;
  --tw-saturate: initial;
  --tw-sepia: initial;
  --tw-drop-shadow: initial;
  --tw-drop-shadow-color: initial;
  --tw-drop-shadow-alpha: 100%;
  --tw-drop-shadow-size: initial;
  --tw-backdrop-blur: initial;
  --tw-backdrop-brightness: initial;
  --tw-backdrop-contrast: initial;
  --tw-backdrop-grayscale: initial;
  --tw-backdrop-hue-rotate: initial;
  --tw-backdrop-invert: initial;
  --tw-backdrop-opacity: initial;
  --tw-backdrop-saturate: initial;
  --tw-backdrop-sepia: initial;
  --tw-duration: initial;
  --tw-ease: initial;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-content: "";
  --tw-animation-delay: 0s;
  --tw-animation-direction: normal;
  --tw-animation-duration: initial;
  --tw-animation-fill-mode: none;
  --tw-animation-iteration-count: 1;
  --tw-enter-blur: 0;
  --tw-enter-opacity: 1;
  --tw-enter-rotate: 0;
  --tw-enter-scale: 1;
  --tw-enter-translate-x: 0;
  --tw-enter-translate-y: 0;
  --tw-exit-blur: 0;
  --tw-exit-opacity: 1;
  --tw-exit-rotate: 0;
  --tw-exit-scale: 1;
  --tw-exit-translate-x: 0;
  --tw-exit-translate-y: 0;
}

* {
  border-color: hsl(var(--border));
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(var(--background));
  font-family: "Inter", sans-serif;
  color: #38312e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: var(--text-5xl);
  line-height: var(--text-5xl--line-height);
  font-weight: var(--font-weight-normal);
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* fonts and text */

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: var(--font-weight-bold);
}

.inherit {
  font-weight: inherit;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xs {
  font-size: var(--text-xs);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-error {
  color: #8B0000;
}

.font-display {
    font-family: "Space Grotesk", sans-serif;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: "Inter", sans-serif;
  }
  .font-serif {
    font-family: "Playfair Display", serif;
  }

.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.tracking-wider {
  letter-spacing: var(--tracking-wider);
}

.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

.font-bold {
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    font-weight: var(--font-weight-semibold);
  }

/* end fonts and text */

/* buttons */

.btn-style1 {
  display: inline-flex;
  border: 1px solid #2C2424;
  gap: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 6);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-family: "Space Grotesk", sans-serif;
  color: inherit;
  text-transform: uppercase;
}

.btn-style1:hover {
  background: #2C2424;
  color: #EBE7DE;
}

/* end buttons */

/* opacity */

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.grayscale {
  filter: grayscale(100%);
}

.grayscale:hover {
  filter: grayscale(0);
  transition: all 0.7s ease;
}

/* end opacity */

/* generic classes */

.flex {
  display: flex;
  flex-direction: column;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row !important;
}

.flex-col {
  flex-direction: column !important;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.flex,
.grid {
  gap: 20px;
}

.flex-1 {
  flex: 1;
}

.align-start {
  align-items: start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.justify-space-around {
  justify-content: space-around;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-evenly {
  justify-content: space-evenly;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: end;
}

.align-self-start {
  align-self: start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: end;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.relative {
  position: relative;
}

.gap-0 {
    gap: calc(var(--spacing) * 0);
}

.gap-1 {
    gap: calc(var(--spacing) * 1);
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.gap-4 {
    gap: calc(var(--spacing) * 4);
}

.gap-5 {
    gap: calc(var(--spacing) * 5);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.gap-7 {
    gap: calc(var(--spacing) * 7);
}

.gap-8 {
    gap: calc(var(--spacing) * 8);
}

.gap-9 {
    gap: calc(var(--spacing) * 9);
}

.gap-10 {
    gap: calc(var(--spacing) * 10);
}

.gap-40 {
    gap: calc(var(--spacing) * 40);
}

.gap-16 {
  gap: calc(var(--spacing) * 16);
}

.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

.mb-16 {
  margin-bottom: calc(var(--spacing) * 16);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}

.mt-12 {
  margin-top: calc(var(--spacing) * 12);
}

.mt-24 {
  margin-top: calc(var(--spacing) * 24);
}

.pt-12 {
  padding-top: calc(var(--spacing) * 12);
}

/* end generic classes */


.rounded-full {
    border-radius: calc(infinity * 1px);
    overflow: hidden;
    line-height: 0;
  }
  .rounded-lg {
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
  }
  .rounded-md {
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    line-height: 0;
  }
  .rounded-none {
    border-radius: 0;
    overflow: hidden;
    line-height: 0;
  }
  .rounded-sm {
    border-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    line-height: 0;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
    overflow: hidden;
    line-height: 0;
  }

.container {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 12);
  max-width: 100%;
  margin-inline: auto;
}

.hero {
  width: 100%;
  height: 100vh; 
}

.hero img {
  max-width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero .text {
  position: absolute;
  bottom: calc(var(--spacing) * 12);
  right: calc(var(--spacing) * 0);
  text-align: center;
  z-index: 9999;
  width: 100%;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  font-family: var(--font-mono);
}

.hero .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

.main-menu {
  background-color: #1a1a1a;
  padding: calc(var(--spacing) * 8);
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  color: var(--color-white);
  padding-inline: calc(var(--spacing) * 8);
  z-index: 99999;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

.main-menu.active {
    transform: translateX(0);
}

.main-menu .nav {
  padding-left: calc(var(--spacing) * 8);
}

.main-menu svg {
  position: absolute;
  right: calc(var(--spacing) * 8);
  top: calc(var(--spacing) * 8);
  fill: var(--color-white);
}

.main-menu a {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-family: "Playfair Display", serif;
  color: var(--color-white);
  font-style: italic;
  align-self: start;
}

.main-menu a:hover {
  opacity: 0.7;
}

.main-menu .timings {
  position: absolute;
  bottom: calc(var(--spacing) * 12);
  left: calc(var(--spacing) * 0);
  padding-inline: calc(var(--spacing) * 8);
}

.hamburger-wrapper {
  position: absolute;
  cursor: pointer;
  z-index: 9999;
  top: calc(var(--spacing) * 18);
  right: calc(var(--spacing) * 12);
  color: var(--color-white);
}

.hamburger-wrapper > span {
  text-transform: uppercase;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: var(--tracking-widest);
}

.hidden {
    display: none;
}

.hamburger {
    width: 32px;
    height: 22px;
    position: relative;
}
.hamburger span {
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--color-white);
    right: 0;
    transition: 0.3s ease;
    border-radius: 15px;
}
.hamburger span:nth-child(1) { top: 0; width: 32px; }
.hamburger span:nth-child(2) { top: 6px; width: 24px; height: 3px; }
.hamburger span:nth-child(3) { top: 13px; width: 16px; }

.hamburger-wrapper:hover .hamburger span:nth-child(1),
.hamburger-wrapper:hover .hamburger span:nth-child(3) {
  width: 24px;
}

.hamburger-wrapper:hover .hamburger span:nth-child(2) {
  width: 32px;
}

.hamburger-wrapper:hover > span {
  display: block;
}

#menu {
  background-color: #f6c6ad;
}

.menu-group {
  margin-bottom: calc(var(--spacing) * 16);
}

.menu-group h3 {
  text-transform: uppercase;
  margin-bottom: calc(var(--spacing) * 10);
  padding-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  border-bottom: 2px solid rgba(44, 36, 34, 0.1);
  color: #38312e;
  letter-spacing: var(--tracking-widest);
}

.menu-item {
  gap: 0;
}

.item-info {
  border-bottom: 1px solid rgba(44, 36, 34, 0.1);
  margin-bottom: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 1);
  align-items: center;
}

.item-name {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  font-family: "Playfair Display", serif;
  font-weight: var(--font-weight-medium);
}

.item-price {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
}

.item-desc {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  font-style: italic;
  font-weight: var(--font-weight-light);
}

.qr-code {
  transform: rotate(3deg);
  width: 200px;
}

.grid-insta-feed {
    grid-template-columns: 1fr 1fr;
}

.insta-feed {
    overflow: hidden;
    height: calc(356 / 2);
    position: relative;
    
}

.insta-feed svg {
    display: none;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    border: 0;
}

.insta-feed:hover svg {
    display: block;
    transition: all 0.7s ease;
}

.insta-feed img {
    min-width: 100% !important;
    min-height: 100% !important;
    /* object-fit: cover;
    object-position: center center; */
}

.insta-feed:hover img {
    transform: scale(1.1);
    transition: all 0.7s ease;
}

.insta-feed svg {
    stroke: var(--color-white);
}

.payment-info {
  margin-top: calc(var(--spacing) * 24);
  padding-top: calc(var(--spacing) * 12);
  border-top: 1px solid rgba(44, 36, 34, 0.1);
  font-family: var(--font-mono);
  color: #2C2424;
  font-size: var(--text-sm);
}

.payment-info p {
  text-align: center;
}

.honoring {
  position: relative;
}

/* .honoring img {
  height: 780px;
} */

.est-text {
    position: absolute;
    background: #F5F1E8;
    bottom: calc(var(--spacing) * -6);
    right: calc(var(--spacing) * -6);
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 32);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    display: flex;
    display: none;
    font-style: italic;
    font-size: var(--text-2xl);
    font-family: "Playfair Display", serif;
    align-items: center;
    justify-content: center;
}

footer {
  background: #1a1a1a;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.4);
}

#about h2 {
  margin-bottom: calc(var(--spacing) * 8);
}

#about p {
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: hsl(var(--muted-foreground));
  font-size: var(--text-lg);
  font-family: "Inter", sans-serif;
  margin-bottom: calc(var(--spacing) * 6);
}

.round-img-wrap {
  padding: calc(var(--spacing) * 2);
  border: 1px solid hsl(var(--border));
}

.honoring-left-section h3 {
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: hsl(var(--foreground));
  font-weight: inherit;
}

.honoring-left-section p {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  font-family: "Inter", sans-serif;
  font-weight: var(--font-weight-normal);
  color: hsl(var(--muted-foreground));
}

.find-us {
  font-style: italic;
  color: hsl(var(--primary));
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  font-family: "Playfair Display", serif;
  gap: calc(var(--spacing) * 2);
}

.find-us:hover {
  color: hsl(var(--primary));
  opacity: 0.7;
}

.find-us:hover svg {
  --tw-translate-x: calc(var(--spacing) * 1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

#booking {
  background-color: #2C2424;
}

#booking * {
  color: #EBE7DE;
}

#booking h3 {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  padding-bottom: calc(var(--spacing) * 4);
  border-bottom: 1px solid rgba(235, 231, 221, 0.2);
  font-weight: inherit;
}

.dark {
    background-color: #2C2424;
}

.dark h2,
.dark p {
    color: #EBE7DE;
}

.dark .btn-style1 {
    background-color: #EBE7DE;
    color: #2C2424;
}

.dark .btn-style1:hover {
  background: #ff6467;
  color: #EBE7DE;
}

/*--color-red-1: #fef2f2;*/
/*  --color-red-2: #ffa2a2;*/
/*  --color-red-3: #ff6467;*/
/*  --color-red-4: #fb2c36;*/
/*  --color-red-5: #e7000b;*/
/*  --color-gray-1: #f9fafb;*/
/*  --color-gray-2: #4a5565;*/
/*  --color-gray-900: #101828;*/

.contact-info {
  font-weight: var(--font-weight-light);
}

.contact-info:hover {
  color: var(--color-white);
}

.contact-info span {
  color: #EBE7DE;
}

.timings-group {
  padding-left: calc(var(--spacing) * 6);
  border-left: 2px solid rgba(235, 231, 221, 0.2);
}

.timings-group p:nth-child(1),
.timings-group p:nth-child(4){
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  /*font-size: var(--text-sm);*/
  font-size: var(--text-2xl);
 line-height: var(--tw-leading, var(--text-3xl--line-height));
  /*line-height: var(--tw-leading, var(--text-sm--line-height));*/
  margin-bottom: calc(var(--spacing) * 2);
}

.timings-group p:nth-child(2),
.timings-group p:nth-child(5) {
  font-weight: var(--font-weight-light);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  font-family: "Inter", sans-serif;
}

.timings-group p:nth-child(3) {
  font-style: italic;
  color: rgba(235, 231, 221, 0.4);
  margin-block: calc(var(--spacing) * 8);
 font-size: var(--text-2xl);
 line-height: var(--tw-leading, var(--text-3xl--line-height));
}

.map-container {
  height: 500px;
  max-height: 500px;
  overflow: hidden;
  width: 100%;
}

.map-container img {
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.map-btn {
  position: absolute;
  bottom: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  padding-block: calc(var(--spacing) * 2);
  color: var(--color-black);
  background: var(--color-white);
  display: inline-flex;
  padding-inline: calc(var(--spacing) * 4);
}

.map-btn:hover {
  color: var(--color-white);
  background: var(--color-black);
  transition: all 0.7s ease;
}

/* swiper */

.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: none;
    object-position: center;
}

.swiper-slide video {
    width: 100%;
    height: 100%;
}

.insta-feed-sec .link1 {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  font-style: italic;
  font-family: "Playfair Display", serif;
  gap: calc(var(--spacing) * 2);
  display: flex;
  color: inherit;
}

.insta-feed-sec .link2 {
  display: flex;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  font-family: var(--font-mono);
  gap: calc(var(--spacing) * 2);
  color: inherit;
  text-decoration: none;
}

.insta-feed-sec .link2:hover {
  text-decoration: underline;
}

#location h2 {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  margin-bottom: calc(var(--spacing) * 4);
}

#location p {
  color: hsl(var(--muted-foreground));
}

.sticky-whatsapp {
  position: fixed;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  color: var(--color-white);
  padding: calc(var(--spacing) * 3);
  background-color: #25D366;
  border-radius: calc(infinity * 1px);
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 9999;
  bottom: calc(var(--spacing) * 6);
  right: calc(var(--spacing) * 6);
}

.sticky-whatsapp img {
  width: 30px;
  height: 30px;
  filter: invert(1);
}

.map-over {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-over div {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    text-align: center;
    padding-block: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
    background-color: var(--color-white);
    color: hsl(var(--foreground));
    font-family: "Inter", sans-serif;
}

#malaymail {
    background: url(../images/4.jpg);
    background-size: cover;
    background-position: 0% 60%;
    position: relative;
    background-attachment: fixed;
}

#malaymail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0;
}

#malaymail .container {
    position: relative;
    z-index: 1;
}

/* end swiper */

/* media queries */

@media (width < 48rem) {
  .gap-40 {
      gap: calc(var(--spacing) * 18);
  }

  #booking .container > .flex {
    gap: 80px;
  }

  .hide-on-mobile {
    display: none !important;
  }
.menu-sec {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }
}

@media (width >= 48rem) {
  h2 {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
    line-height: var(--leading-tight);
  }

  .honoring-wrap {
    flex-direction: row-reverse !important;
  }

  #about h2 {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
    line-height: 1.2;
  }

  /*#menu {*/
  /*  background-image: url('../images/logo-bg.png');*/
  /*  background-position: center;*/
  /*  background-size: 250px;*/
  /*  background-repeat: no-repeat;*/
  /*}*/

  #venue {
    width: 50%;
  }

  .payment-info p {
    text-align: left;
  }

  .glass-svg {
    color: rgba(44, 36, 34, 0.4);
  }

  .main-menu {
    width: calc(1 / 2 * 100%);
  }

  .main-menu .nav {
    padding-left: calc(var(--spacing) * 16);
  }

  .main-menu a {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .main-menu .timings {
    padding-inline: calc(var(--spacing) * 16);
  }

  .flex {
    flex-direction: row;
  }

  .menu-items-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--spacing) * 12);
    column-gap: calc(var(--spacing) * 50);
  }

  .insta-feed {
    overflow: hidden;
    height: 356px;
    position: relative;  
  }

  .grid-insta-feed {
      grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .container {
    padding-block: calc(var(--spacing) * 20);
  }

  .container-4xl {
    max-width: var(--container-4xl);
  }

  .container-6xl {
    max-width: var(--container-6xl);
  }

  .est-text {
    display: flex;
  }
  
  .swiper {
    width: 100%;
    height: 600px;
  }
  
  .swiper-slide video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
}

@media (width >= 64rem) {
    .main-wrapper-lg {
        max-width: 64rem;
    }

    .main-menu {
      width: calc(1 / 3 * 100%);
    }
}

@media (width >= 80rem) {
    .main-wrapper-lg {
        max-width: 80rem;
    }
}

@media (width >= 96rem) {
    .main-wrapper-lg {
        max-width: 96rem;
    }
}
