.center-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  top: -40px;
}

.logo-img {
  max-width: 300px;
  width: 100%;
}

img.award-img.img-fluid.mt-3 {
  width: 50%;
}
@media (max-width: 768px) {
  .center-logo {
    top: -20px;
  }
  .logo-img {
    max-width: 220px;
  }
  .award-img {
    max-width: 90px;
  }
}
/* Centered logo + award stack */
.center-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0px; /* moves the logo+award group upward slightly */
}

.logo-img {
  max-width: 300px; /* adjust as needed */
}

.award-img {
  max-width: 120px;
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .center-logo {
    top: -20px;
  }
  .logo-img {
    max-width: 220px;
  }
  .award-img {
    max-width: 180px;
  }
}
/*------------------------------------------------------------
    RESET & BASE STYLES
  ------------------------------------------------------------*/
html,
body,
p,
a,
strong,
button,
div,
span {
  font-family: "Raleway", sans-serif !important;
}

html,
body {
  color: white;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: "Raleway", sans-serif !important;
}

/*------------------------------------------------------------
    FULL PAGE BACKGROUND IMAGE CONTAINER
  ------------------------------------------------------------*/
.bgimg {
  background-image: url("../img/aperitif-taylaedit2.png");
  background-size: auto 150%;
  background-position: 0% center;
  background-repeat: repeat-x;
  height: 100vh;
  position: relative;
  /*animation: scrollStripes 30s linear infinite; */
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: scroll-back-forth 80s ease-in-out infinite;
}

.bgimg2 {
  background-image: url("../img/aperitif-taylaedit2.png");
  background-size: auto 150%;
  background-position: 0% center;
  background-repeat: repeat-x;
  height: 100vh;
  position: relative;
}

@keyframes scrollStripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0;
  }
}

@keyframes scroll-back-forth {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

/*------------------------------------------------------------
    CENTER LOGO IN THE MIDDLE OF THE SCREEN
  ------------------------------------------------------------*/
.center-logo img {
  max-width: 500px;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: logoAnimation 0.9s 0.15s forwards cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
  transition: filter;
}

@keyframes logoAnimation {
  from {
    transform: translateY(-20px) scale(0.85);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/*------------------------------------------------------------
    PAGE-LOAD INTRO: logo first, then sides slide in
    Uses the `translate` property (not `transform`) so it doesn't
    clash with hover transforms or the mobile award centering.
  ------------------------------------------------------------*/
.intro-left,
.intro-right {
  opacity: 0;
  animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--intro-delay, 0.8s);
}

.intro-left {
  animation-name: introFromLeft;
}

.intro-right {
  animation-name: introFromRight;
}

@keyframes introFromLeft {
  from { opacity: 0; translate: -80px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes introFromRight {
  from { opacity: 0; translate: 80px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .center-logo img,
  .intro-left,
  .intro-right {
    animation: none;
    opacity: 1;
  }
}

/*------------------------------------------------------------
    TOP CORNERS: MENU & BOOK ICONS
  ------------------------------------------------------------*/
.menu-left,
.menu-right {
  position: absolute;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: white;
  text-align: center;
}

.menu-left {
  left: 20px;
}

.menu-right {
  right: 20px;
}

.menu-title:hover {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  transition: text-shadow 0.3s ease;
}

/* Shared image size for menu + book icons */
img.menu-img,
img.book-img {
  width: clamp(123px, 7vw, 140px);
  height: auto;
  object-fit: contain;
}

/* Hover effect */
.menu-left img:hover,
.menu-right img:hover {
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
  transition: filter 0.3s ease;
}

/*------------------------------------------------------------
    DROPDOWN MENU
  ------------------------------------------------------------*/
.menu-left .dropdown-menu {
  position: absolute !important;
  margin-left: 83% !important;
  top: -7px !important;
  transform: none !important;
  min-width: 160px;
  z-index: 1050;
}

.menu-left .dropdown-menu .dropdown-item {
  text-align: left;
  padding-left: 1rem;
}

.modern-dropdown {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding: 0.5rem 0;
  overflow: hidden;
}

.modern-dropdown .dropdown-item {
  color: white;
  font-weight: 500;
  font-size: 15pt;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeDown 0.4s ease forwards;
  animation-delay: var(--delay);
  border-radius: 0;
  background-color: transparent;
}

@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-toggle::after {
  display: none;
}

button#menuDropdown {
  border: none;
}

.modern-dropdown:hover .dropdown-item:hover {
  color: rgb(255, 251, 212);
  text-decoration: underline;
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.708);
}

/*------------------------------------------------------------
  BUTTONS ROW
------------------------------------------------------------*/
.see-whatson-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 5%;
}

.see-whatson-button,
.giftcard-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  white-space: nowrap;

  font-family: "Raleway", sans-serif;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;

  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Shared ::before outline */
.see-whatson-button::before,
.giftcard-button::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(218, 165, 100, 0.35);
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Shared ::after sheen */
.see-whatson-button::after,
.giftcard-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(
    135deg,
    rgba(245, 241, 232, 0.05) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.see-whatson-button:hover::after,
.giftcard-button:hover::after {
  opacity: 1;
}

/*-- What's On: red --*/
.see-whatson-button {
  background: linear-gradient(
    135deg,
    rgba(139, 60, 58, 0.9) 0%,
    rgba(101, 44, 43, 0.9) 100%
  );
  color: #f5f1e8;
  box-shadow: inset 0 0 0 2px rgba(218, 165, 100, 0.5),
    inset 0 0 0 4px rgba(120, 60, 58, 0.9),
    inset 0 0 0 6px rgba(210, 150, 80, 0.3), 0 8px 16px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
  animation: buttonShine 6s 2s ease-in-out infinite;
}

.see-whatson-button:hover {
  background: linear-gradient(
    135deg,
    rgba(159, 70, 68, 0.95) 0%,
    rgba(121, 54, 53, 0.95) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(238, 180, 120, 0.6),
    inset 0 0 0 4px rgba(140, 70, 68, 0.95),
    inset 0 0 0 6px rgba(228, 170, 100, 0.4), 0 12px 20px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(238, 180, 120, 0.25);
  transform: translateY(-2px);
}

.see-whatson-button:active {
  transform: translateY(0px) scale(0.98);
  background: linear-gradient(
    135deg,
    rgba(109, 40, 38, 1) 0%,
    rgba(75, 30, 28, 1) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(180, 130, 70, 0.7),
    inset 0 0 0 4px rgba(90, 40, 38, 1), inset 0 0 0 6px rgba(170, 120, 60, 0.4),
    inset 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
}

/*-- Gift Cards: gold --*/
.giftcard-button {
  background: linear-gradient(
    135deg,
    rgba(180, 140, 60, 0.88) 0%,
    rgba(140, 100, 35, 0.88) 100%
  );
  color: #f5f1e8;
  box-shadow: inset 0 0 0 2px rgba(255, 220, 130, 0.5),
    inset 0 0 0 4px rgba(140, 100, 35, 0.9),
    inset 0 0 0 6px rgba(220, 170, 80, 0.3), 0 8px 16px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.giftcard-button:hover {
  background: linear-gradient(
    135deg,
    rgba(200, 160, 75, 0.95) 0%,
    rgba(160, 115, 45, 0.95) 100%
  );
  transform: translateY(-2px);
}

.button-text {
  line-height: 1;
  position: relative;
  z-index: 2;
}

@keyframes buttonShine {
  0%   { box-shadow: inset 0 0 0 2px rgba(218, 165, 100, 0.5), inset 0 0 0 4px rgba(120, 60, 58, 0.9), inset 0 0 0 6px rgba(210, 150, 80, 0.3), 0 8px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }
  10%  { box-shadow: inset 0 0 0 2px rgba(218, 165, 100, 0.5), inset 0 0 0 4px rgba(120, 60, 58, 0.9), inset 0 0 0 6px rgba(210, 150, 80, 0.3), 0 8px 16px rgba(0,0,0,0.5), 0 0 30px rgba(238, 180, 120, 0.6), 0 0 60px rgba(218, 150, 80, 0.3); }
  20%  { box-shadow: inset 0 0 0 2px rgba(218, 165, 100, 0.5), inset 0 0 0 4px rgba(120, 60, 58, 0.9), inset 0 0 0 6px rgba(210, 150, 80, 0.3), 0 8px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }
  100% { box-shadow: inset 0 0 0 2px rgba(218, 165, 100, 0.5), inset 0 0 0 4px rgba(120, 60, 58, 0.9), inset 0 0 0 6px rgba(210, 150, 80, 0.3), 0 8px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }
}
/*------------------------------------------------------------
      BOTTOM LEFT: CONTACT INFO
    ------------------------------------------------------------*/
.bottom-left-text {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  color: white;
}

.contact-info {
  color: white;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
}

strong.address {
  text-decoration: underline;
}

.address:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.708);
}

p.view-location {
  margin-bottom: 0%;
  text-decoration: none;
  font-size: larger;
}

/*------------------------------------------------------------
    BOTTOM RIGHT: SOCIAL ICONS --OLD
  ------------------------------------------------------------*/
  /*
.bottom-right-img {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  font-size: 30pt;
}

.social-icon {
  color: white;
}

i.fa-brands.fa-facebook.social-icon {
  font-size: 28pt !important;
}

i.fa-brands.fa-facebook.social-icon:hover {
  font-size: 30pt !important;
}

i.fa-brands.fa-instagram.social-icon:hover {
  font-size: 32pt !important;
} */

/*------------------------------------------------------------
    BOTTOM RIGHT: SOCIAL ICONS --NEW
  ------------------------------------------------------------*/
.bottom-right-img {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 22px;
}

.bottom-right-img p {
  margin: 0;
}

.bottom-right-img a {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b2e2e 0%, #7a2828 100%);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(139, 46, 46, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 3px solid #c9a87c;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.social-icon {
  font-size: 28pt;
  z-index: 1;
  position: relative;
}

i.fa-brands.fa-facebook.social-icon {
  font-size: 26pt;
}

.bottom-right-img a::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s;
  pointer-events: none;
  z-index: 0;
}

.bottom-right-img a:hover::before {
  left: 100%;
}

.bottom-right-img a:hover {
  background: linear-gradient(135deg, #a33838 0%, #8b2e2e 100%);
  transform: translateX(-8px) scale(1.15);
  box-shadow: 0 8px 24px rgba(139, 46, 46, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: #d4956d;
  border-width: 3.5px;
}

.bottom-right-img a:hover .social-icon {
  font-size: 30pt;
}

.bottom-right-img a:hover i.fa-brands.fa-facebook.social-icon {
  font-size: 28pt;
}

/*------------------------------------------------------------
    MUTE BUTTON
  ------------------------------------------------------------*/
.mute-button {
  position: absolute !important;
  bottom: 191px;
  right: 26px;
  background: none;
  border: none;
  color: white;
  font-size: 22pt;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
}

.mute-button:hover {
  transform: scale(1.2);
}



/* Ensure award images sit above other elements and are visible/clickable */
.award-images-container {
  position: absolute;
  bottom: 25px; /* move container lower toward the bottom */
  right: 90px; /* sit to the left of the social icons which are at right:30px */
  display: flex;
  flex-direction: column; /* stack vertically */
  gap: 0; /* remove gap so images sit tightly */
  align-items: center;
  z-index: 1060;
  pointer-events: auto;
}

.award-badge {
  max-width: 225px; /* increased size */
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -15%;
}

/* Slight overlap: pull the second badge upward */
.award-badge + .award-badge {
  margin-top: -60px; /* increase overlap so top image is closer */
}

/* Wine List badge (SVG): smaller and lifted clear of the badge below */
@media (min-width: 769px) {
  .award-badge.award-5 {
    max-width: 160px;
    margin-bottom: 0;
  }

  .award-badge.award-5 + .award-badge {
    margin-top: -60px; /* 6.png has transparent space on top, so pull it up */
  }
}

/* Bring contact links above any overlapping elements so they're clickable */
.contact-info {
  z-index: 1065;
  position: relative;
}
.contact-info a {
  position: relative;
  z-index: 1066;
}