/* Start Variables */
:root {
  --main-color: #b14b08;
  /* --main-color: #C0A37B; */
  /* #DD5903  #ac7221*/
  --white-color: #fff;
  --bg-color: #0e0d0a;
  --body-color: #9b9999;
  --section-padding: 70px;
  /* Site-wide typography system:
     - Headings/hero titles: Cormorant Garamond (--main-font)
     - Decorative script accents: Great Vibes (--header-font)
     - Everything else (navbar, buttons, body copy, forms, cards,
       footer): Manrope (--primary-font). Every part of the site already
       styles its non-heading text via var(--primary-font), so this one
       value change is what carries Manrope everywhere. */
  --primary-font: "Manrope", sans-serif;
  --main-font: "Cormorant Garamond", serif;
  --header-font: "Great Vibes", cursive;
}
/* End Variables */

/* Smooth cross-page transitions in browsers that support the View
   Transitions API (progressive enhancement, ignored elsewhere). */

/* Start Global Rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

body {
  font-family: var(--main-font);
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--body-color);
  overflow-x: hidden;
}

/* Real body-copy elements get Manrope explicitly rather than flipping
   body's own default font - a few scoped headings elsewhere in this file
   (.menu__card h3, .reservation__parking__opening__Hours h4, etc.) rely
   on inheriting body's serif default and are intentionally left alone. */
p,
a,
li,
label,
input,
textarea,
select,
button {
  font-family: var(--primary-font);
}

/* The Google Fonts <link> on every page only registers the Material Symbols
   font resource - without this rule the browser has no reason to actually
   use it on .material-symbols-outlined spans, so it falls back to the body
   font and renders the literal ligature text ("spa", "favorite",
   "shopping_cart", "calendar_month"...) instead of the icon glyph. This was
   missing project-wide; more specific per-context rules elsewhere still
   override the size/color here as before. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  /* Locks the icon's box to a 1-character square derived from its own
     font-size, which is known synchronously at first paint - independent
     of whether the Material Symbols font has finished loading yet. Before
     the font swaps in, the browser paints the fallback ligature text
     (e.g. "shopping_cart") in the body font, which is far wider than the
     eventual glyph; without a fixed box that swap visibly resizes the
     navbar (cart button, brand, nav icons) once the font arrives. Clipping
     the temporary fallback text via overflow doesn't affect the real
     glyph - Material Symbols glyphs are drawn within their own em-square. */
  width: 1em;
  height: 1em;
  overflow: hidden;
}

/* start  global rules */
html {
  font-size: 10px;
  scroll-behavior: smooth;
}

/* End Global Rules */
/* start global component */
p::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
a::selection,
button::selection,
span::selection {
  color: var(--white-color);
  background-color: var(--main-color);
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}
.d__flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay {
  position: fixed;
  background-color: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  inset: 0;
  z-index: 10000;
  animation: popupOverlayFadeIn 0.35s ease;
}
/* Shared popup/modal "skin" - every .overlay > .msg__container on the site
   (login/signup error popups, menu/oneProduct "please sign in" popups, the
   reservation preference/success/edit-reservation form modals) inherits
   this base look unless a more specific selector overrides it, so they all
   read as one consistent design system. Modeled on
   #loginRequiredOverlay .reservation__msg (res.html/res.css) - that rule
   is intentionally left untouched as the master reference; this base only
   copies its visual values (background, border, radius, shadow, padding,
   typography, button treatment), not its markup-specific selectors. */
.msg__container {
  width: 505px;
  background-image: url(../images/bg/lam.jpg);
  background-position: center;
  background-size: cover;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  height: auto;
  max-height: 85vh;
  overflow-y: auto;
  font-family: var(--main-font);
  font-size: 24px;
  line-height: 1.6;
  color: #f2e9de;
  border: 0.5px solid var(--main-color);
  border-radius: 8px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  padding: 77px 56px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.msg__container::after {
  content: " ";
  background-color: #000000d7;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
}
.reservation__msg {
  background-image: url(../images/bg/lam.jpg);
  color: var(--white-color);
  background-position: center;
  background-size: cover;
}
.btns__container {
  display: flex;
  flex-wrap: wrap;
  gap: 29px;
  justify-content: center;
  margin-top: 1.5rem;
}
.btns__container button,
.btns__container .btn {
  background-color: transparent;
  border: 1.5px solid var(--main-color);
  border-radius: 4px;
  color: var(--white-color);
  transition: all 0.3s ease;
}
.btns__container a {
  color: var(--white-color);
}
.btns__container .btn a {
  color: inherit;
  text-decoration: none;
}
.btns__container .btn:hover {
  background-color: rgba(177, 75, 8, 0.15);
  transform: translateY(-2px);
}
.btns__container .btn:first-child {
  background: linear-gradient(180deg, #c15a12, #9c4508);
  border: 1.5px solid var(--main-color);
  color: #fff;
}
.btns__container .btn:first-child:hover {
  background: var(--main-color);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(177, 75, 8, 0.35);
}
@keyframes popupOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes leftToRight {
  0% {
    transform: translateX(-9%);
    opacity: 0.1;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes RightToleft {
  0% {
    transform: translateX(25%);
    opacity: 0.1;
  }

  100% {
    transform: translateX(0);
    opacity: 0.8;
  }
}
@keyframes top {
  0% {
    transform: rotateX(90);
    opacity: 0.1;
  }
  100% {
    transform: rotateX(180deg);
    opacity: 1;
  }
}

/* end global component */

/* start scroll-reveal engine (see nav.js initScrollReveal) */
@media (prefers-reduced-motion: no-preference) {
  .wow {
    visibility: hidden;
  }
  .wow.animated {
    visibility: visible;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .wow.fadeInUp.animated {
    animation-name: fadeInUp;
  }
  .wow.fadeInDown.animated {
    animation-name: fadeInDown;
  }
  .wow.fadeInLeft.animated {
    animation-name: fadeInLeft;
  }
  .wow.fadeInRight.animated {
    animation-name: fadeInRight;
  }

  .reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal[data-reveal="fade-left"] {
    transform: translateX(-45px);
  }
  .reveal[data-reveal="fade-right"] {
    transform: translateX(45px);
  }
  .reveal--visible {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body {
  animation: pageFadeIn 0.5s ease;
}
/* end scroll-reveal engine */

/* start reusable image zoom + focus-visible accessibility */
.img-zoom {
  overflow: hidden;
  display: block;
}
.img-zoom img {
  transition: transform 0.6s ease;
}
.img-zoom:hover img {
  transform: scale(1.08);
}
a:focus-visible,
button:focus-visible,
.cart__btn:focus-visible,
input:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
}
/* end reusable image zoom + focus-visible accessibility */

/* start header */

.navbar {
  position: fixed !important;
  top: 0 !important;
  background-color: transparent;
  z-index: 9;
  padding: 1.8rem 0;
  left: 0;
  right: 0;
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--main-font);
  text-transform: uppercase;
  font-size: 2.6rem;
  letter-spacing: 2.5px;
  color: var(--white-color) !important;
  font-weight: 600 !important;
}
.navbar-brand .material-symbols-outlined {
  color: var(--main-color);
  font-size: 2.4rem;
}

.navbar-nav .nav-item {
  padding: 0 15px;
}
.navbar-nav .nav-link {
  position: relative;
  display: inline-block;
  color: aliceblue !important;
  font-size: 1.6rem;
  font-family: var(--primary-font) !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: var(--main-color);
  transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--main-color) !important;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}
.right__sec__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.userNameTitle {
  font-size: 2.8rem;
  font-family: var(--primary-font);
  color: var(--main-color);
  /* font-style: italic; */
}
.navbar .btn {
  background-color: var(--main-color);
  padding: 15px 20px !important;
  position: relative;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}
.navbar .btn a {
  color: var(--white-color);

  font-family: var(--primary-font);
  text-transform: capitalize;
  font-size: 1.4rem;
  letter-spacing: 1px;
}
/* The cart control is a single <a class="btn"> (not a <button> wrapping an
   <a>) so the whole icon/badge area is clickable in one tap - see cart
   navigation fix. Mirrors the text styling above for that anchor itself. */
.navbar a.btn {
  color: var(--white-color);
  font-family: var(--primary-font);
  text-transform: capitalize;
  font-size: 1.4rem;
  letter-spacing: 1px;
}
.cart__badge {
  position: absolute;
  top: 3px;
  right: 1.4rem;
  font-size: 1.4rem;
  /* background-color: var(--white-color); */
  height: 18px;
  width: 18px;
  border-radius: 50%;
  color: var(--main-color);
  font-weight: 500;
}
.navbar .btn .material-symbols-outlined {
  font-size: 2rem;
  color: #fff;
}
/* .login__btn is reused outside the navbar too (myReservations.html's
   "sign in to continue" prompt, res.html's inline login prompt) where the
   .navbar-scoped rules above don't reach, leaving the inner <a> with no
   color of its own (default browser blue) or a stray Bootstrap
   .btn-primary blue. Give it the same look everywhere regardless of
   context or any extra classes on the inner link. */
.login__btn {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.login__btn:hover {
  background-color: transparent;
}
.login__btn a,
.login__btn a.btn-primary {
  color: var(--white-color) !important;
  background-color: transparent !important;
  border: none !important;
  font-family: var(--primary-font);
  text-transform: capitalize;
  font-size: 1.4rem;
  letter-spacing: 1px;
  padding: 0 !important;
}
.login__circle {
  background-color: var(--main-color);
}

/* end header */
/* start main section  */
.main__section {
  height: 115vh;
  background-position: center;
  background-size: cover;
  background-color: var(--bg-color);
  position: relative;
  top: -76.5px;
  /* inset: 0; */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  overflow: hidden;
}

.main {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
@supports (-webkit-touch-callout: none) {
  .main {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/chad-montano-iSDSIrV9zEo-unsplash-3.jpg");
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
    will-change: transform;
    z-index: -1;
  }
}

.main__home {
  background-image: url(../images/benefits-carousel-1.jpg);
}
.main__section::after,
.main::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a39;
  z-index: 2;
  pointer-events: none;
}

.h1 {
  text-align: center;
  font-family: var(--header-font);
  font-size: 8rem;
  color: var(--main-color);
  font-weight: 500;
}
.main__p {
  color: var(--white-color);
  text-align: center;
  font-size: 6rem;
  font-family: var(--main-font);
  font-style: italic;
  font-weight: 500;
}
.main__btns {
  margin-top: 3rem;
  text-align: center;
}
.btn {
  padding: 15px 20px !important;
  font-family: var(--primary-font);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  font-size: 1.8rem;
  cursor: pointer !important;
  transition: all 0.3s ease;
}
.reserve__btn {
  background-color: var(--main-color);
  color: var(--white-color);
  border: 2px solid var(--main-color);
  transition: all 0.3s;
  /* cursor: pointer !important; */
}
.reserve__btn:hover {
  background-color: transparent;
  border: 2px solid var(--white-color);
  color: var(--white-color);
}
.main__btns .menu__btn {
  background-color: transparent;
  color: var(--white-color);
  border: 2px solid var(--white-color);
  margin-left: 1rem;
  transition: all 0.3s;
  z-index: 1000;
  cursor: pointer !important;
}
.main__btns a {
  color: var(--white-color);
}
.main__btns .menu__btn:hover {
  background-color: var(--white-color);
  color: var(--main-color);
  border: 2px solid var(--white-color);
}

/* start home hero redesign ---------------------------------------------
   Scoped entirely to .hero (only ever present on index.html's
   .main__section.main__home) so nothing here can leak into any other
   page. The ONLY thing that ever animates is the background photo - the
   text/buttons/cards/scroll indicator are all static, per design. */

.hero {
  padding: 12rem 0 11rem;
}

/* Background photos - three stacked, absolutely-positioned layers. Each
   plays the exact same 24s keyframe animation but starts 8s after the
   previous one (see :nth-child rules below), so at any moment exactly one
   is fading in/holding/fading out while the next quietly waits its turn -
   a perpetual, seamless 3-way crossfade with no JS and no flicker. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  animation: heroKenBurns 24s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero__bg__slide:nth-child(1) {
  animation-delay: 0s;
}
.hero__bg__slide:nth-child(2) {
  animation-delay: 8s;
}
.hero__bg__slide:nth-child(3) {
  animation-delay: 16s;
}

@keyframes heroKenBurns {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  7.29% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
    transform: scale(1.08);
  }
  40.62% {
    opacity: 0;
    transform: scale(1.08);
  }
  40.7% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Constant dark tint above every background image, below the content -
   never itself animated, so it can never flash during a photo transition
   and the white type stays readable no matter which photo is showing. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10, 9, 8, 0.92) 0%,
    rgba(10, 9, 8, 0.78) 30%,
    rgba(10, 9, 8, 0.55) 55%,
    rgba(10, 9, 8, 0.35) 100%
  );
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 700px;
  text-align: left;
}

.hero__script {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--header-font);
  font-size: 3rem;
  color: var(--main-color);
  line-height: 1;
  margin-bottom: 1.2rem;
}
.hero__script__line {
  display: inline-block;
  width: 4.5rem;
  height: 1px;
  background-color: var(--main-color);
}

.hero__title {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 7.4rem;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--white-color);
  text-align: left;
  margin: 0;
}
.hero__title__accent {
  color: var(--main-color);
  font-style: italic;
}

.hero__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 24rem;
  max-width: 100%;
  margin: 1.6rem 0;
}
.hero__divider span {
  flex: 1;
  height: 1px;
  background-color: rgba(177, 75, 8, 0.55);
}
.hero__divider i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--main-color);
  flex-shrink: 0;
}

.hero__desc {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: #d8d3ce;
  max-width: 480px;
  margin-bottom: 2.2rem;
}

.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 3rem;
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 2.6rem;
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hero__btn .material-symbols-outlined {
  font-size: 1.9rem;
}
.hero__btn--primary {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  color: var(--white-color);
}
.hero__btn--primary:hover {
  background-color: transparent;
  border-color: var(--white-color);
  color: var(--white-color);
}
.hero__btn--secondary {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white-color);
}
.hero__btn--secondary:hover {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--bg-color);
}

.hero__features {
  display: flex;
  align-items: stretch;
  max-width: 950px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background-color: rgba(14, 13, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__feature {
  flex: 1;
  text-align: center;
  padding: 1.8rem 1.4rem;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__feature:last-child {
  border-right: none;
}
.hero__feature .material-symbols-outlined {
  color: var(--main-color);
  font-size: 2.8rem;
  margin-bottom: 1rem;
}
.hero__feature__title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white-color);
  margin-bottom: 0.4rem;
}
.hero__feature__subtitle {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 1.3rem;
  color: #b9b4ae;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.3rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.hero__scroll__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: var(--white-color);
  animation: heroScrollBounce 2s ease-in-out infinite;
}
.hero__scroll p {
  font-family: var(--primary-font);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-color);
}
.hero__scroll__line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(var(--main-color), transparent);
}
@keyframes heroScrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg__slide {
    animation: none;
    opacity: 0;
  }
  .hero__bg__slide:first-child {
    opacity: 1;
  }
  .hero__scroll__circle {
    animation: none;
  }
}

@media screen and (max-width: 1200px) {
  .hero__title {
    font-size: 6.2rem;
  }
  .hero__features {
    max-width: 100%;
  }
}

@media screen and (max-width: 992px) {
  .hero {
    padding: 14rem 0 3rem;
  }
  .hero__title {
    font-size: 5.2rem;
  }
  .hero__features {
    flex-wrap: wrap;
  }
  .hero__feature {
    flex: 1 1 50%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .hero__feature:nth-child(2n) {
    border-right: none;
  }
  .hero__feature:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

@media screen and (max-width: 768px) {
  .main__section.hero {
    height: auto;
    min-height: 100vh;
  }
  .hero {
    padding: 13rem 0 3rem;
  }
  .hero__script {
    font-size: 2.4rem;
  }
  .hero__title {
    font-size: 4.4rem;
  }
  .hero__desc {
    font-size: 1.5rem;
  }
  .hero__btns {
    margin-bottom: 4rem;
  }
  .hero__btn {
    padding: 1.4rem 2rem;
    font-size: 1.2rem;
  }
  .hero__scroll {
    display: none;
  }
}

@media only screen and (max-width: 576px) {
  .hero {
    padding: 11rem 0 3rem;
  }
  .hero__content {
    text-align: left;
  }
  .hero__script {
    font-size: 2rem;
    gap: 1rem;
  }
  .hero__script__line {
    width: 2.6rem;
  }
  .hero__title {
    font-size: 3.6rem;
    text-align: center;
    margin-top: 4.5rem;
  }
  .hero__divider {
    width: 16rem;
    margin: 1.8rem auto;
  }
  .hero__desc {
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
  }
  .hero__btns {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }
  .hero__btn {
    justify-content: center;
  }
  .hero__feature {
    flex: 1 1 100%;
    border-right: none;
  }
  .hero__feature:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
}

/* end home hero redesign ------------------------------------------------- */

/* end main section  */
/* start our history section  */
.our__history {
  padding: 4rem 0;
}
.our__history__txt {
  font-size: 2.8rem;
  text-align: center;
  line-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primary-font);
}
.our__history__txt span {
  color: var(--main-color);
  font-family: var(--header-font);
  font-size: 5rem;
}
/* end our history section  */

/* start our services */
.our__services {
  text-align: center;
  padding: 4rem 0;
  margin: 3rem 0;
}
.services__card {
  margin: 2rem 0;
  padding: 2rem 1rem;
}
.our__services__h2 {
  padding: 2.5rem 0;
  font-size: 6rem;
  margin-top: 3rem;
  font-family: var(--header-font);
  color: var(--main-color);
}
.services__icons span {
  color: var(--main-color);
  font-size: 7rem;
  /* padding: 2rem 0; */
  /* margin-bottom: 1rem; */
}
.our__services__h3 {
  font-family: var(--main-font);
  font-size: 3rem;

  color: #c9c5c5;
}
.our__services__p {
  font-size: 2rem;
}

/* end our services */

/* start selected menu */
.selected__menu {
  margin-top: 2rem;
  padding-top: 2rem;
}
.selected__menu__bg {
  background-image: url(../images/jesse-ballantyne-9r5kHbw51fk-unsplash-1.jpg);
  height: auto;
  background-position: center;
  background-size: cover;
  padding: 4rem 0;
  position: relative;
  z-index: 1;
}
.selected__menu__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a3a;
  z-index: -1;
}
.lunch__special__left {
  transform: translateX(-9%);
  animation-fill-mode: forwards;
  opacity: 0;
  display: none;
}
.lunch__special__right {
  transform: translateX(25%);
  animation-fill-mode: forwards;
  opacity: 0;
  display: none;
}

.menu__card {
  margin: 2rem 0;
  margin-top: 4rem;
  background-color: #0e0d0a91;
  border: 2px solid var(--white-color);
}
.menu__card h3 {
  font-size: 3rem;
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  color: var(--white-color);
}

.menu__div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1.5rem 2rem;
  margin: 0 1rem;
}
.menu__txt,
.menu__price {
  font-size: 2.2rem;
  color: var(--white-color);
}
.menu__line {
  width: 20%;
  height: 0.5px;
  background-color: var(--body-color);
}

.menu__right__side {
  background-color: #ac7221;
  height: 100vh;
}
/* end selected menu */

/* start all menu */
.all__menu {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}
.all__menu__card {
  position: relative;
}
.all__menu__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a79;
  z-index: 1;
}
.all__menu__card img {
  z-index: -1;
}
.all__menu__card__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.all__menu__header {
  color: var(--main-color);
  text-align: center;
  position: relative;
  font-size: 2.5rem;
  font-weight: 500;
}
.all__menu__header::after {
  content: "";
  width: 15%;
  position: absolute;
  background-color: var(--main-color);
  height: 1.2px;

  top: 50%;
  right: 62.5%;
}
.all__menu__header::before {
  content: "";
  width: 15%;
  position: absolute;
  background-color: var(--main-color);
  height: 1.2px;

  top: 50%;
  right: 22.5%;
}
.full__menus {
  font-size: 4.8rem;
  font-family: var(--main-font);
  color: var(--white-color);
  text-align: center;
  line-height: 6rem;
}
.full__menus__description {
  color: var(--white-color);
  font-size: 2rem;
  text-align: center;
  line-height: 3rem;
}
.menus__btn {
  color: var(--white-color);
  background-color: transparent;
  text-decoration: none;
  position: relative;
  transition: all 1s;
}
.menus__btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: var(--main-color);
  width: 0;
  left: 0;
  height: 2px;
  top: -10p;
  text-transform: capitalize;
  transition: all 0.5s;
}
.menus__btn:hover::after {
  width: 100%;
}
.menus__btn:hover {
  color: var(--white-color) !important;
}
/* end all menu */

/* start filltered menus */
.filtered__menus {
  margin: 4rem 0;
  padding: 4rem 0;
  display: flex;
  justify-content: space-between;
}
.steak__card__container {
  display: flex;
  justify-content: left;
}
.asian__card__container {
  display: flex;
  justify-content: center;
}
.desserts__card__container {
  display: flex;
  justify-content: right;
}
.filtered__cards {
  display: block;
  width: 75%;
  border-radius: 5px;
  border: 0.3px solid var(--bg-color);
  height: 60vh;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  position: relative;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-align: right;
}
.filtered__cards::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: var(--bg-color);
  inset: 0;
  opacity: 0.3;
  transition: all 1s;
}
.filtered__cards:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
.filtered__cards:hover::after {
  opacity: 0.5;
}
.steak__card {
  background-image: url(../images/steakhouse-img-2-370x559.jpg);
  position: relative;
}
.steak__card::before {
  content: "steak menu";
  position: absolute;
  transform: rotate(-0.25turn);
  left: -41%;
  color: var(--white-color);
  font-size: 4rem;
  top: 40%;
  transition: all 1s;
}
.steak__card:hover::before {
  opacity: 1;
}
.asian__card {
  background-image: url(../images/steakhouse-img-3-370x559.jpg);
  position: relative;
}
.asian__card::before {
  content: "asian menu";
  position: absolute;
  transform: rotate(-0.25turn);
  left: -40%;
  color: var(--white-color);
  font-size: 4rem;
  top: 40%;
}
.desserts__card {
  background-image: url(../images/steakhouse-img-5-370x559.jpg);

  position: relative;
  text-align: end;
}
.desserts__card::before {
  content: "desserts menu";
  position: absolute;
  transform: rotate(-0.25turn);
  left: -51%;
  color: var(--white-color);
  font-size: 4rem;
  top: 40%;
}

/* end filltered menus */

/* start happy customers */

.happy__customers {
  margin: 4rem 0;
  padding: 4rem 0;
}
.happy__customer__bg {
  background-image: url(../images/george-kedenburg-iii-jso_yKod6-c-unsplash.jpg);
  background-position: center;
  background-size: cover;
  height: 50vh;
  position: relative;
  margin: 4rem 0;
  padding: 4rem 0;
}
.happy__customer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a94;
  z-index: 1;
}
.happy__customr__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.customers {
  color: var(--white-color);
  z-index: 2;
}
.happy__customr__card span {
  font-size: 6rem;
}
.customer__numbers {
  font-size: 5rem;
}
.customer__status {
  font-size: 2rem;
}
/* end happy customers */
/* start OPENING HOURS */
.reservation__parking__opening__Hours {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--main-color);
  padding: 3.5rem 0;
}
.reservation__parking__opening__Hours h4 {
  color: var(--main-color);
  font-size: 2.4rem;
  padding-top: 2.2rem;
  padding: 1.5rem 0;
}
.reservation__parking__opening__Hours p {
  color: var(--white-color);
  font-size: 1.8rem;
}
.all__details__imgs {
  background-image: url(../images/klara-kulikova-lZm_VDhGGW8-unsplash.jpg);
  background-position: center;
  background-size: cover;
}
.all__details__responsive{
  display: none;
}

/* end OPENING HOURS */
/* start find us */
.find__us {
  padding: 3rem 0;
  margin: 3rem 0;
}
.find__us__img {
  background-image: url(../images/image_3.jpg);
  /* height: 100vh; */
  background-position: center;
  background-size: cover;
  position: relative;
}
.find__us__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a27;
  z-index: 1;
}
.find__us__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  margin: 3rem 0;
}
.find__us_title {
  color: var(--white-color);
  font-size: 4rem;
  text-align: center;
  padding: 2rem 0;
}
.where {
  color: var(--white-color);
  font-size: 2.5rem;
  font-weight: 700;
}
.address {
  color: var(--white-color);
  font-size: 1.8rem;
  text-align: center;
}
.find__us__btns {
  margin: 2rem 0;
}

.viewMap__btn a {
  color: #000;
  background-color: var(--white-color);
  padding: 0.6rem 2.8rem;
  letter-spacing: 1px;
  font-size: 1.8rem;
}
.bookTable__btn a {
  color: var(--white-color);
  background-color: transparent;
  border: 1px solid var(--white-color);
  padding: 0.6rem 2.8rem;
  letter-spacing: 1px;
  font-size: 1.8rem;
}

/* end find us */

/* start foodinfin  place */

.foodinfin__place {
  padding: 3rem 0;
  margin: 3rem 0;
}
.foodinfin__place__bg {
  background-image: url(../images/paralax.jpg);
}
.header-intro {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e0d0a88;
  z-index: -1;
}
.foodinfin__place h5,
.header-intro h5 {
  text-align: center;
  margin-top: 3rem;
  font-family: var(--main-font);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 10px;
  word-spacing: 6px;
  z-index: 3;
}
@supports (-webkit-touch-callout: none) {
  .foodinfin__place__bg {
    background-image: url();
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .foodinfin__place__bg ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/paralax.jpg");
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
    will-change: transform;
    z-index: -1;
  }
}

/* end foodinfin  place */
.border__b {
  border-bottom: 1px solid var(--main-color);
}
.menu img {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.menu__title {
  text-align: center;
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
  padding: 3rem 0;
  font-family: var(--main-font);
  font-size: 3rem;
  color: var(--main-color);
  letter-spacing: 1px;
}
.menu__des {
  padding: 3rem;
}
.food__details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu__content {
  color: var(--white-color);
  font-size: 2rem;
  font-style: italic;
}

.food__description p {
  font-size: 1.4rem;
  color: var(--white-color);
}
.footer-p {
  color: #a9a9a9;
  font-size: 2rem;
  text-align: center;
}
.final-footer {
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 4rem 0;
}
.footer-logo {
  text-align: center;
}
.footer-logo img {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .steak__card::before,
  .asian__card::before,
  .desserts__card::before {
    transform: rotate(0);
    font-size: 3rem;
    width: 100%;
    top: 100%;
    left: 0;
    text-align: center;
  }

  .steak__card::before {
    content: "steak menu";
  }
  .asian__card::before {
    content: "asian menu";
  }
  .desserts__card::before {
    content: "desserts menu";
  }
}
@media screen and (max-width: 992px) {
  .navbar-toggler {
    color: #fff !important;
    background-color: #fff !important;
  }
  /* These are empty, background-image-only columns that normally get their
     height by flex-stretching against a taller sibling column. Once
     Bootstrap stacks the columns below this breakpoint they're no longer
     on the same flex line, so without an explicit height they collapse to
     0px and the image disappears entirely. */
  .all__details__imgs,
  .find__us__img {
    min-height: 300px;
  }
  .full__menus {
    font-size: 3.2rem;

    /* line-height: rem; */
  }
  .all__menu__header::after {
    right: 72.5%;
  }
  .all__menu__header::before {
    right: 12.5%;
  }
  .full__menus__description {
    font-size: 1.6rem;
    text-align: center;
    line-height: 2.5rem;
  }
  .filtered__cards {
    width: 70%;
    margin: 4rem auto;
    height: 50vh;
  }

  .all__details__txts {
    padding: 0 3rem;
  }
  .menu__txt,
  .menu__price {
    font-size: 1.8rem;
    color: var(--white-color);
  }
  .menu__card h3 {
    font-size: 2.4rem;
  }
  .menu__line {
    width: 12%;
  }
}
@media screen and (max-width: 768px) {
  .full__menus {
    font-size: 4.2rem;
  }
  .all__menu__header::after {
    right: 58.5%;
  }
  .all__menu__header::before {
    right: 26%;
  }
  .full__menus__description {
    font-size: 2.8rem;
    text-align: center;
    line-height: 3.8rem;
  }
  .all__menu__card__txt {
    margin: 4rem 0;
    padding: 4rem 0;
  }
  .filtered__cards {
    width: 300px;
    height: 500px;
  }
  .steak__card__container {
    display: flex;
    justify-content: center;
  }
  .asian__card__container {
    display: flex;
    justify-content: center;
  }
  .desserts__card__container {
    display: flex;
    justify-content: center;
  }
  .steak__card::before,
  .asian__card::before,
  .desserts__card::before {
    font-size: 3.8rem;
  }

  .menu__txt,
  .menu__price {
    font-size: 2.8rem;
    color: var(--white-color);
  }
  .menu__card h3 {
    font-size: 3.4rem;
  }
  .menu__line {
    width: 20%;
  }
  .menu__div {
    justify-content: space-around;
  }
  .msg__container {
    padding: 42px 32px;
  }
}
/* @media only screen and (max-width: 576px) */
@media only screen and (max-width: 576px) {
  .right__sec__nav {
    padding: 10px 15px;
  }
  .navbar .btn {
    padding: 12px 7px !important;
  }
  .cart__badge {
    top: -5px;
    right: 0.8rem;
    font-size: 1.1rem;
    height: 18px;
    width: 18px;
    color: var(--main-color);
  }
  /* .navbar .btn .material-symbols-outlined {
    font-size: 2rem;
    color: #fff;
  } */
  .login__circle {
    background-color: var(--main-color);
  }
  .userNameTitle {
    font-size: 2.2rem;
  }
  .main__p {
    font-size: 4rem;
  }

  .navbar-brand {
    font-size: 2.5rem !important;
  }
  h1 {
    font-size: 5rem;
  }
  .our__history__txt {
    font-size: 2rem;
  }
.our__services__h2 {
  font-size: 3.8rem;
} 
.services__icons span {
  font-size: 5rem;
} 
  .menu__card {
    width: 90%;
    margin: 2rem auto;
  }
  .menu__card h3 {
    font-size: 2.5rem;
  }
  .menu__price{
    font-size: 2rem;
  }
  .full__menus__description{
    font-size: 2rem;
   
  }
  .menu__div .menu__txt {
    font-size: 2rem;
  }
  .full__menus {
    font-size: 3rem;
  }
  .reservation__parking__opening__Hours {
    flex-direction: column;
  }
  .find__us_title {
    font-size: 3rem;
  }
  h5 {
    font-size: 4rem;
  }
  .filtered__cards {
    width: 250px;
  }

  .footer-logo img {
    width: 80%;
    margin: 0 auto;
  }

  .steak__card::before,
  .asian__card::before,
  .desserts__card::before {
    font-size: 3rem;
  }

  .happy__customers {
    display: none;
  }
  .find__us__btns {
    text-align: center;
  }
  .foodinfin__place h5,
  .header-intro h5 {
    font-size: 2.6rem;
    letter-spacing: 4px;
    word-spacing: 3px;
  }

  .all__details__imgs , .find__us__img {
    background-image: none;

  }
  .all__details__responsive{
    display: block;
    width: 90%;
    margin: 0 auto;
  }
}

/* =======================================================================
   Global site footer - used identically on every page.
   ======================================================================= */
.site-footer {
  background-color: #0a0908;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5rem 0 0;
}
.site-footer__row {
  padding-bottom: 3rem;
}
.site-footer__col {
  margin-bottom: 2.5rem;
}
.site-footer__brand {
  margin-bottom: 1.2rem;
  font-size: 2.2rem !important;
}
.site-footer__desc {
  font-family: var(--primary-font);
  color: var(--body-color);
  font-size: 1.35rem;
  line-height: 1.7;
  margin-bottom: 1.6rem;
  max-width: 280px;
}
.site-footer__social {
  display: flex;
  gap: 1rem;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white-color);
  font-size: 1.4rem;
  transition: all 0.3s ease;
}
.site-footer__social a:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.site-footer__heading {
  font-family: var(--primary-font);
  color: var(--main-color);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links li {
  margin-bottom: 1rem;
}
.site-footer__links a {
  font-family: var(--primary-font);
  color: var(--body-color);
  font-size: 1.35rem;
  transition: color 0.3s ease;
}
.site-footer__links a:hover {
  color: var(--main-color);
}
.site-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-family: var(--primary-font);
  color: var(--body-color);
  font-size: 1.35rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.site-footer__contact .material-symbols-outlined {
  color: var(--main-color);
  font-size: 1.7rem;
  flex-shrink: 0;
}
.site-footer__hours {
  font-family: var(--primary-font);
  color: var(--body-color);
  font-size: 1.35rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
}
.site-footer__hours strong {
  color: var(--white-color);
}
.site-footer__note {
  font-family: var(--primary-font);
  color: var(--main-color);
  font-size: 1.3rem;
  margin-top: 0.5rem;
}
.site-footer__bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 0;
  font-family: var(--primary-font);
  color: var(--body-color);
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
  .site-footer__col {
    text-align: center;
  }
  .site-footer__social {
    justify-content: center;
  }
  .site-footer__contact li {
    justify-content: center;
    text-align: left;
  }
  .site-footer__desc {
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 400px) {
  .site-footer {
    padding-top: 3.5rem;
  }
  .site-footer__heading {
    font-size: 1.4rem;
  }
}
/* end global site footer */