/* ========================================
   LFNG Landing Page - Styles
   Mobile-First Responsive Design
   ======================================== */

/* ========================================
   Font Face Declarations
   ======================================== */
*,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  text-decoration: none;
  list-style: none;
  text-transform: none;
  letter-spacing: 0.05em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.05em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.05em;
}

@font-face {
  font-family: 'Runda';
  src: url('../assets/fonts/Runda/fonnts.com-Runda_Normal.woff2') format('woff2'),
    url('../assets/fonts/Runda/fonnts.com-Runda_Normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Runda';
  src: url('../assets/fonts/Runda/fonnts.com-Runda_Medium.woff2') format('woff2'),
    url('../assets/fonts/Runda/fonnts.com-Runda_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Runda';
  src: url('../assets/fonts/Runda/fonnts.com-Runda_Bold.woff2') format('woff2'),
    url('../assets/fonts/Runda/fonnts.com-Runda_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* #### Generated By: http://font.download #### */

@font-face {
  font-family: 'Baskerville Normal';
  font-style: normal;
  font-weight: normal;
  src: local('Baskerville Normal'), url('../assets/fonts/Baskerville/baskvl.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Baskerville Regular'), url('../assets/fonts/Baskerville/baskervi.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville Light-Italic';
  font-style: italic;
  font-weight: 300;
  src: local('Baskerville Light-Italic'), url('../assets/fonts/Baskerville/BASKE10.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville Light';
  font-style: normal;
  font-weight: 300;
  src: local('Baskerville Light'), url('../assets/fonts/Baskerville/BASKE9.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville LightA';
  font-style: normal;
  font-weight: 300;
  src: local('Baskerville LightA'), url('../assets/fonts/Baskerville/BASKRV_L.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville Bold';
  font-style: normal;
  font-weight: bold;
  src: local('Baskerville Bold'), url('../assets/fonts/Baskerville/BASKE1.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville Bold Alt';
  font-style: normal;
  font-weight: bold;
  src: local('Baskerville Bold Alt'), url('../assets/fonts/Baskerville/Baskerville Bold font.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville BT Roman';
  font-style: normal;
  font-weight: normal;
  src: local('Baskerville BT Roman'), url('../assets/fonts/Baskerville/BaskervilleBT.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville BT Italic';
  font-style: italic;
  font-weight: normal;
  src: local('Baskerville BT Italic'), url('../assets/fonts/Baskerville/BaskervilleItalicBT.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville BT Bold';
  font-style: normal;
  font-weight: bold;
  src: local('Baskerville BT Bold'), url('../assets/fonts/Baskerville/BaskervilleBoldBT.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville BT Bold Alt';
  font-style: normal;
  font-weight: bold;
  src: local('Baskerville BT Bold Alt'), url('../assets/fonts/Baskerville/baskerville bold bt.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville BT Bold Italic';
  font-style: italic;
  font-weight: bold;
  src: local('Baskerville BT Bold Italic'), url('../assets/fonts/Baskerville/BaskervilleBoldItalicBT.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Baskerville';
  src: url('../assets/fonts/Baskerville/Baskerville Semi Bold Italic.woff2') format('woff2'),
    url('../assets/fonts/Baskerville/Baskerville Semi Bold Italic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* CSS Custom Properties (Variables) */
:root {
  /* Colors */
  --color-primary: #8dc63f;
  /* LFNG Brand Green */
  --color-accent: #D4AF37;
  /* Gold/Accent */
  --color-black: #000000;
  /* Black */
  --color-white: #FFFFFF;
  /* White */
  --color-light-gray: #F5F5F5;
  --color-gray: #bbbbbb;
  /* Gray */
  --color-dark: #1A1A1A;
  --color-dark-2: #0A0E13;
  /* Dark background */
  --color-gray-light: #F5F5F5;
  /* Light gray */
  --color-gray-medium: #666666;
  /* Medium gray */
  --color-gray-dark: #333333;
  /* Dark gray */

  /* Typography */
  --font-primary: 'Runda', sans-serif;
  /* Headings */
  --font-secondary: 'Runda', sans-serif;
  /* Body text */
  --font-accent: 'Baskerville Regular', serif;
  /* Accent text */

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */
  --font-size-6xl: 3.75rem;
  /* 60px */

  /* Font Weights */
  --font-weight-normal: 400;
  /* Runda Normal */
  --font-weight-medium: 500;
  /* Runda Medium */
  --font-weight-bold: 700;
  /* Runda Bold */
  --font-weight-semibold: 600;
  /* Baskerville Semi Bold */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 0.25rem;
  /* 4px */
  --spacing-sm: 0.5rem;
  /* 8px */
  --spacing-md: 1rem;
  /* 16px */
  --spacing-lg: 1.5rem;
  /* 24px */
  --spacing-xl: 2rem;
  /* 32px */
  --spacing-2xl: 3rem;
  /* 48px */
  --spacing-3xl: 4rem;
  /* 64px */
  --spacing-4xl: 6rem;
  /* 96px */
  --spacing-5xl: 8rem;
  /* 128px */

  /* Container */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);

  /* Border Radius */
  --border-radius-sm: 0.25rem;
  /* 4px */
  --border-radius-md: 0.5rem;
  /* 8px */
  --border-radius-lg: 1rem;
  /* 16px */
  --border-radius-full: 9999px;
  /* Full rounded */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   Reset & Base Styles
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Typography
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
}

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

/* ========================================
   Utility Classes
   ======================================== */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Button Components
   ======================================== */

.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 140px;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ========================================
   Header & Navigation
   ======================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-gray-dark);
  z-index: var(--z-modal);
  /* Higher than mobile menu */
  padding: 0;
  min-height: 100px;
}

/* Mobile Book Tasting Bar */
.header__book-tasting {
  background-color: var(--color-gray-dark);
  padding: var(--spacing-xs) 0;
  display: none;
}

.header__book-tasting-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.header__book-tasting-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-gray);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.header__phone-icon {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.header__book-text {
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
}

.header__phone-number {
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
}

.nav__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--container-padding);
}

.nav__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav__mobile-menu-text {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  display: block;
}

.nav__social-links-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: 0;
}

.nav__social-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-gray) !important;
  font-size: var(--font-size-lg);
  transition: all var(--transition-fast);
  border-radius: 50%;
  background-color: transparent;

}

.nav__social-link a:hover,
.nav__social-link a:focus {
  color: var(--color-accent) !important;
  /* background-color: rgba(212, 175, 55, 0.3); */
  /* border-color: var(--color-accent); */
  transform: translateY(-2px);
}

.nav__social-link i {
  font-size: var(--font-size-base);
  color: inherit !important;
}

/* Override any global link styles for social icons */
.nav__social-links a {
  color: var(--color-light-gray) !important;
  text-decoration: none !important;
}

.nav__social-links a:hover {
  color: var(--color-accent) !important;
}

.nav__title {
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  padding: 10px 0;
  margin: 0;
}

/* Log In and Cart styling */
.nav__login {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.nav__login:hover,
.nav__login:focus {
  color: var(--color-accent);
}

.nav__cart {
  color: var(--color-gray);
  font-size: var(--font-size-xs);
  text-align: center;
  line-height: 1.2;
}

.nav__cart p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
}

.nav__logo-img {
  height: 40px;
  width: auto;
}
.portfolio-about__image-mobile,
.nav_mobile_menu_container{
  display: none;
}
.dinner-invitation{
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  min-height: 1000px;
}
.nav__menu {
  display: flex;
  list-style: none;
  align-items: center;
  flex-wrap: wrap;
}

.nav__link {
  color: var(--color-light-gray);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  font-family: var(--font-secondary);
}

.nav__link:hover,
.nav__link:focus {
  color: var(--color-primary);
}

.nav__item {
  display: flex;
  align-items: center;
  position: relative;
}

/* Diamond separators between nav items */
.nav__item:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  transform: rotate(45deg);
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

/* Dropdown Menu Styles */
.nav__item--dropdown {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-primary);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  margin-top: 20px;
}

.nav__item--dropdown:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-black);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  transition: all var(--transition-fast);
  text-transform: uppercase;
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus {
  background-color: transparent;
  color: var(--color-white);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  z-index: var(--z-modal);
}

.nav__toggle-line {
  width: 25px;
  height: 3px;
  background-color: var(--color-white);
  transition: all var(--transition-fast);
}

/* Hamburger to Cross Animation */
.nav__toggle--open .nav__toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle--open .nav__toggle-line:nth-child(2) {
  opacity: 0;
}

.nav__toggle--open .nav__toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu Overlay */
.nav__mobile-overlay {
  position: fixed;
  top: 80px;
  /* Start below the navbar */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary);
  z-index: var(--z-fixed);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all var(--transition-normal);
}

.nav__mobile-overlay--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__mobile-menu {
  height: calc(100vh - 80px);
  /* Full height minus navbar height */
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.nav__mobile-menu-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
}

.nav__mobile-logo {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  letter-spacing: 0.1em;
}

.nav__mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav__mobile-item {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.nav__mobile-item:last-child {
  border-bottom: none;
}

.nav__mobile-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav__mobile-item-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav__mobile-item-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-family-primary);
}

.nav__mobile-item-toggle {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.nav__mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-normal);
  background-color: rgba(0, 0, 0, 0.03);
}

.nav__mobile-item--expanded .nav__mobile-submenu {
  max-height: 300px;
  padding: 15px 0;
  overflow: visible;
}

.nav__mobile-submenu-link {
  display: none;
  padding: 12px 0 12px 20px;
  color: var(--color-black);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.nav__mobile-item--expanded .nav__mobile-submenu-link {
  display: block;
}

.nav__mobile-submenu-link:hover {
  opacity: 1;
  border-left-color: var(--color-black);
  background-color: rgba(0, 0, 0, 0.05);
}

.nav__mobile-social {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: auto;
  padding: 30px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.nav__mobile-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-black);
  font-size: 18px;
  text-decoration: none;
  transition: all var(--transition-fast);
  border-radius: 50%;
}

.nav__mobile-social-link:hover {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   Main Content
   ======================================== */

.main {
  /* margin-top: 60px; */
  /* Account for fixed header */
}

/* ========================================
   Hero Section
   ======================================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: contain;
  object-position: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/assets/20th/assets/images/LFNG_header.png');
  /* margin-top: 100px; */
}

.hero__content {
  position: absolute;
  top: 30%;
  /* left: 0; */
  right: 15%;
  /* bottom: 0; */
  /* background-color: rgba(0, 0, 0, 0.5); */

}

.hero__emblem-img {
  max-width: 200px;
  width: 100%;
}

.hero__text-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: 0;
  color: var(--color-white);
  font-family: var(--font-accent);
}

.hero__sub-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-white);
  font-family: var(--font-accent);
}

/* ========================================
   Section Base Styles
   ======================================== */

section {
  padding: var(--spacing-4xl) 0;
}

/* ========================================
   Portfolio About Section
   ======================================== */

.portfolio-about {
  padding: 0;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.portfolio-about__content {
  display: flex;
  position: relative;


}
.portfolio-about__image-container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;

}
.portfolio-about__image {
  width: 100%;
  height: 1300px !important;
  object-fit: contain;
  margin-top: -200px;
  margin-left: -200px;
  z-index: 2;
}

.portfolio-about__text-two-box-empty,
.portfolio-about__text-one-box-empty {
  width: 60%;
}

/* .portfolio-about__text-box-one{} */
.portfolio-about__text-box-one {
  background-color: var(--color-dark-2);
  color: var(--color-white);
  padding: var(--spacing-2xl);
  display: flex;
  justify-content: center;
}

.portfolio-about__text-box-two-contanier,
.portfolio-about__text-box-one-contanier {
  display: flex;
  width: 100%;
  max-width: var(--container-max-width);
  justify-content: center;
  margin: 0 auto;
}

.portfolio-about__text-box-two-content,
.portfolio-about__text-box-one-content {
  max-width: 600px;
  width: 100%;
}

.portfolio-about__text-box-one-content p {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-lg);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-accent);
  color: var(--color-accent);
}

.portfolio-about__text-box-one-content p:nth-child(2) {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  padding-right: 50px;
  font-size: var(--font-size-xl);
  text-align: justify;
}

.portfolio-about__text-box-two {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-gray-light);
  line-height: var(--line-height-normal);
  font-family: var(--font-accent);
  padding: var(--spacing-2xl);
}

.portfolio-about__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio-about__separator {
  height: 2px;
  background-color: var(--color-primary);
  width: 100%;
  margin: 0;
}

.portfolio-about__text-box-two-content p:nth-child(2),
.portfolio-about__text-box-two-content p:nth-child(1) {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-accent);
  color: var(--color-black);
  font-style: italic;
}

.portfolio-about__text-box-two p:last-child {
  color: var(--color-gray-dark);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.portfolio-about__text-box-one a {
  background-color: #8EC73F;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--spacing-md);
  min-width: 200px;
}

.portfolio-about__text-box-one a:hover,
.portfolio-about__text-box-one a:focus {
  background-color: var(--color-dark);
  color: #8EC73F;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.portfolio-about__text-box-two-content-attribution {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-md);
}

.portfolio-about__text-box-two .portfolio-about__text-box-two-content .portfolio-about__text-box-two-content-attribution-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-family: var(--font-accent);
  margin: 0;
}

.portfolio-about__text-box-two .portfolio-about__text-box-two-content .portfolio-about__text-box-two-content-attribution-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-family: var(--font-accent);
  font-style: normal;
}

/* ========================================
   Wine Review Section
   ======================================== */



/* ========================================
   Awards Section
   ======================================== */

.awards-section {
  display: flex;
  background-color: #FFFEF6;
}

.awards-section__content {
  max-width: var(--container-max-width);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
  gap: var(--spacing-lg);
}

.awards-section__content img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

/* ========================================
   Cult Quote Section
   ======================================== */
.cult-quote-section {
  background-color: #8EC73F;
  padding: 0;
}

.cult-quote-section__content {
  /* max-width: 1200px; */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: var(--spacing-2xl);
}

.cult-quote-section__text {
  width: 50%;
}

.cult-quote-section__image {
  flex: 1;
  width: 50%;
}

.cult-quote-section__text-content {
  max-width: 400px;
  width: 100%;
  margin-left: auto;
  text-align: right;
}

.cult-quote-section__text-content h3 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-semibold);
  font-family: 'Baskerville BT Bold Italic', serif;
  color: var(--color-dark);
  font-style: normal;
  text-align: right;
}

.cult-quote-section__text-content p {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-family: var(--font-accent);
}

.cult-quote-section__text-content a {
  background-color: #8EC73F;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-accent);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 200px;
  border-radius: var(--border-radius-lg);
  margin-top: var(--spacing-3xl);
  display: inline-block;
}

.cult-quote-section__text-content-attribution {
  padding-top: 60px;
}

.cult-quote-section__text-content-attribution-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-family: 'Baskerville BT Bold Italic', serif;
  margin: 0;
  text-align: right;
}

.cult-quote-section__text-content .cult-quote-section__text-content-attribution-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-family: 'Baskerville BT Bold Italic', serif;

  font-style: normal;
  text-align: right;
}

.cult-quote-section__text-content-button {
  background-color: #8EC73F;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 200px;
}

.cult-quote-section__text-content a:hover,
.cult-quote-section__text-content a:focus,
.cult-quote-section__text-content-a:hover,
.cult-quote-section__text-content-a:focus {
  background-color: var(--color-dark);
  color: #8EC73F;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Winery Award Section
   ======================================== */



/* ========================================
   Event Invitation Section
   ======================================== */

.event-invitation {
  position: relative;
  background-image: url('/assets/20th/assets/images/LFNG-landing-page_WINEALIGN_bkrnd.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-4xl) 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-invitation__content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.event-invitation__award-img {
  max-width: 400px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--spacing-lg);
  display: block;
}

.event-invitation__rating-text {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
}

/* ========================================
   Dinner Invitation Section
   ======================================== */

.dinner-invitation {
  position: relative;
  background-image: url('/assets/20th/assets/images/LFNG-landing-page_DINNER_bkrnd.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-4xl) 0;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* min-height: 100vh; */
}

.dinner-invitation__content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  text-align: center;
}

.dinner-invitation__title {
  font-size: var(--font-size-5xl) !important;
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--spacing-xl);
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
  font-family: var(--font-accent);
  text-align: center;
}

.dinner-invitation__text {
  margin-bottom: var(--spacing-2xl);
}

.dinner-invitation__description {
  font-size: var(--font-size-2xl) !important;
  line-height: var(--line-height-normal);
  color: var(--color-dark);
  margin-bottom: var(--spacing-2xl);
  font-family: 'Baskerville BT Bold';

}

.dinner-invitation__notice {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-dark);
  margin-bottom: 0;
  font-family: 'Baskerville LightA';

}

.dinner-invitation__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

.dinner-invitation__button {
  background-color: #CFA451;
  color: var(--color-dark);
  border: none;
  /* padding: var(--spacing-md) var(--spacing-xl); */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
  max-width: 250px;
  width: 100%;
  height: 40px;
  font-family: var(--font-accent);
  display: flex;
  justify-content: center;
  align-items: center;

}

.dinner-invitation__button:hover,
.dinner-invitation__button:focus {
  background-color: var(--color-dark);
  color: #8EC73F;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dinner-invitation__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.dinner-invitation__sig-img {
  max-width: 250px;
  height: auto;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.dinner-invitation__sig-title {
  font-size: var(--font-size-sm);
  color: var(--color-white);
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  font-weight: var(--font-weight-medium);
}

/* ========================================
   Testimonial Section
   ======================================== */

.testimonial {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-white);
}

.testimonial__content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.testimonial__quote {

  margin: 0 0 var(--spacing-xl) 0;
  background-color: var(--color-white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Baskerville BT Bold Italic';
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  text-align: center;
  flex-direction: column;
  gap: 80px;
}



.testimonial__quote p {
  font-family: 'Baskerville BT Bold Italic';
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  color: var(--color-black);
  margin: 0;
  text-align: center;
}

.testimonial__attribution {
  text-align: right;
}

.testimonial__name {
  font-family: 'Baskerville Bold';
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  font-style: normal;
  display: block;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.4;
}

.testimonial__title {
  font-family: 'Baskerville Light';
  font-size: var(--font-size-base);
  color: var(--color-black);
  margin: 0;
  font-weight: var(--font-weight-normal);
  text-align: center;
}

/* ========================================
   Vineyard Landscape Section
   ======================================== */





/* ========================================
   Industry Insight Section
   ======================================== */

.industry-insight {
  padding: 0;
  background-color: #0A0E13;
}

.industry-insight__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
  /* max-width: var(--container-max-width); */
  margin: 0 auto;
  /* padding: 0 var(--container-padding); */
  justify-content: center;
}

.industry-insight__image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.industry-insight__image {
  width: 100%;
  /* max-width: 500px; */
  /* height: auto; */
  /* object-fit: cover; */
  /* border-radius: var(--border-radius-md); */
}

.industry-insight__text-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.industry-insight__text-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

.industry-insight__text-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

.industry-insight__text-button-button {
  background-color: transparent;
  color: #8EC73F;
  border: 1px solid #8EC73F;
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 250px;
}

.industry-insight__text-button-button:hover,
.industry-insight__text-button-button:focus {
  background-color: #8EC73F;
  color: #0A0E13;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(142, 199, 63, 0.3);
}

.industry-insight__text-button-text {
  color: #8EC73F;
  font-family: var(--font-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  text-align: center;
  margin: 0;
  letter-spacing: 0.05em;
}

/* ========================================
   Newsletter Signup Section
   ======================================== */

.newsletter-signup {
  padding: var(--spacing-4xl) 0;
  background-color: #8EC73F;
}

.newsletter-signup__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-4xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.newsletter-signup__text {
  flex: 1;
}

.newsletter-signup__title {
  font-family: var(--font-accent);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin: 0;
  text-align: left;
}

.newsletter-signup__subtitle {
  font-weight: var(--font-weight-medium);
  display: block;
  margin-top: var(--spacing-sm);
}

.newsletter-signup__form-container {
  flex: 1;
}

.newsletter-signup__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.newsletter-signup__form-columns {
  display: flex;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

.newsletter-signup__form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.newsletter-signup__form-column--left { flex: 1; }
.newsletter-signup__form-column--right { flex: 1; }

.newsletter-signup__form-group {
  display: flex;
  flex-direction: column;
}

.newsletter-signup__checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.newsletter-signup__label {
  font-family: var(--font-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.newsletter-signup__input,
.newsletter-signup__select {
  border: none;
  border-bottom: 2px solid var(--color-white);
  background-color: transparent;
  padding: var(--spacing-sm) 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  color: var(--color-white);
  outline: none;
  transition: border-color var(--transition-fast);
}

.newsletter-signup__input:focus,
.newsletter-signup__select:focus {
  border-bottom-color: var(--color-dark);
}

.newsletter-signup__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.newsletter-signup__checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.newsletter-signup__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-dark);
}

.newsletter-signup__checkbox-label {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  color: var(--color-white);
  cursor: pointer;
}

.newsletter-signup__submit-btn {
  background-color: var(--color-dark);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-xs) var(--spacing-xl);
  font-family: var(--font-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* min-width: 140px; */
  width: fit-content;
}

.newsletter-signup__submit-btn:hover,
.newsletter-signup__submit-btn:focus {
  background-color: var(--color-white);
  color: var(--color-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.newsletter-message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  text-align: center;
  font-family: var(--font-secondary);
}

.newsletter-message--success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.newsletter-message--error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ========================================
   Footer
   ======================================== */

.footer {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: var(--spacing-4xl) 0 0;
  overflow: hidden;
}

.footer__background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 150px;
  z-index: 1;
  pointer-events: none;
}

.footer__bg-image {
  /* max-width: 300px; */
  margin-top: 100px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

.footer__content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.footer__quote-section {
  flex: 1;
  max-width: 400px;
}

.footer__quote {
  font-family: 'Baskerville BT Italic';
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin: 0;
  /* quotes: """ """ "'" "'"; */
  max-width: 350px;
  width: 100%;
}

/* .footer__quote::before {
  content: open-quote;
} */

.footer__quote::after {
  content: close-quote;
}

.footer__quote-author {
  font-family: var(--font-accent);
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-white);
  display: block;
  margin-top: 0;
  padding-left: var(--spacing-2xl);
}

.footer__links-section {
  flex: 1;
  display: flex;
  gap: var(--spacing-3xl);
  justify-content: flex-end;
}

.footer__column {
  min-width: 150px;
}

.footer__column-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-md) 0;
}

.footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__link-list li {
  margin-bottom: var(--spacing-sm);
}

.footer__link {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus {
  color: var(--color-white);
}

.footer__copyright {
  position: relative;
  z-index: 2;
  text-align: center;
  /* margin-top: var(--spacing-2xl); */
  padding-top: var(--spacing-lg);
  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
}

.footer__copyright p {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  margin: 0;
}

/* ========================================
   Mobile Footer Styles
   ======================================== */

.footer__mobile {
  display: none;
  background-color: var(--color-gray-dark);
  color: var(--color-primary);
  padding: 0;
}

.footer__mobile-accordion {
  padding: 0;
}

.footer__mobile-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__mobile-item:last-child {
  border-bottom: none;
}

.footer__mobile-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.footer__mobile-item-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.footer__mobile-item-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.footer__mobile-item-toggle {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.footer__mobile-item-content {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-normal);
  background-color: rgba(0, 0, 0, 0.1);
}

.footer__mobile-item--expanded .footer__mobile-item-content {
  max-height: 300px;
  padding: 15px 0;
  overflow: visible;
}

.footer__mobile-link {
  display: none;
  padding: 12px 0 12px var(--spacing-lg);
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.footer__mobile-item--expanded .footer__mobile-link {
  display: block;
}

.footer__mobile-link:hover {
  opacity: 1;
  border-left-color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.footer__mobile-copyright {
  text-align: center;
  padding: 30px var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__mobile-copyright p {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  color: var(--color-gray-light);
  margin: 0;
}






/* ========================================
   JavaScript-Enhanced Styles
   ======================================== */

/* Mobile Navigation Open State */
.nav__menu--open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-black);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-lg);
}

.nav__toggle--open .nav__toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle--open .nav__toggle-line:nth-child(2) {
  opacity: 0;
}

.nav__toggle--open .nav__toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Body scroll lock when nav is open */
body.nav-open {
  overflow: hidden;
}

/* ========================================
   Scroll Animations
   ======================================== */

/* Animation Classes */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--fade-in {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.scroll-animate--slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--rotate {
  opacity: 0;
  transform: rotate(-5deg) scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stagger animations for lists */
.scroll-animate--stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--stagger:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate--stagger:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate--stagger:nth-child(3) { transition-delay: 0.3s; }
.scroll-animate--stagger:nth-child(4) { transition-delay: 0.4s; }
.scroll-animate--stagger:nth-child(5) { transition-delay: 0.5s; }
.scroll-animate--stagger:nth-child(6) { transition-delay: 0.6s; }

/* Active state - when element is in viewport */
.scroll-animate.animate-in,
.scroll-animate--fade-in.animate-in,
.scroll-animate--slide-left.animate-in,
.scroll-animate--slide-right.animate-in,
.scroll-animate--scale.animate-in,
.scroll-animate--rotate.animate-in,
.scroll-animate--stagger.animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

/* Special animations for specific elements */
.scroll-animate--hero-title {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate--hero-title.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scroll-animate--hero-subtitle {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.3s;
}

.scroll-animate--hero-subtitle.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate--hero-button {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.6s;
}

.scroll-animate--hero-button.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Parallax effect for background images */
.scroll-animate--parallax {
  transform: translateY(0);
  transition: transform 0.1s ease-out;
}

/* Form message styles */
.form-message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  text-align: center;
}

.form-message--success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message--error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Button ripple effect */
.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Scroll to top button */
.scroll-to-top {
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
}

.scroll-to-top:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Lazy loading styles */
img.lazy {
  opacity: 0;
  transition: opacity var(--transition-normal);
}

img.loaded {
  opacity: 1;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */
@media (max-width: 1024px) {

  .nav__title,
  .nav__link {
    font-size: var(--font-size-xs);
  }

  .awards-section__content {
    flex-direction: column;
  }

  .cult-quote-section__text-content h3 {
    font-size: var(--font-size-xl);
  }

  .cult-quote-section__text-content {
    max-width: 300px;
    width: 100%;
    margin-left: auto;
  }

  .cult-quote-section__text-content .cult-quote-section__text-content-attribution-title,
  .cult-quote-section__text-content p {
    font-size: var(--font-size-xs);
  }

  .cult-quote-section__text-content button {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  .portfolio-about__text-box-two-content p:nth-child(2),
  .portfolio-about__text-box-two-content p:nth-child(1),
  .portfolio-about__text-box-one-content p {
    font-size: var(--font-size-base);
  }

  .portfolio-about__text-box-one-content p:nth-child(2) {
    font-size: var(--font-size-md);
  }

  .portfolio-about__text-box-two-content,
  .portfolio-about__text-box-one-content {
    max-width: 350px;
  }

  .portfolio-about__text-box-one {
    padding: var(--spacing-xl);
  }

  .portfolio-about__image {
    width: 90%;
    left: -20%;
  }

  .dinner-invitation__content {
    max-width: 600px;
  }

  .dinner-invitation__title {
    font-size: var(--font-size-4xl) !important;
  }

  .dinner-invitation__description {
    font-size: var(--font-size-xl) !important;
    line-height: var(--line-height-tight);
  }

  .dinner-invitation {
    min-height: 1000px;
  }

  .dinner-invitation__notice {
    font-size: var(--font-size-xs);
  }

  .dinner-invitation__button {
    font-size: var(--font-size-xs);
    max-width: 240px;
    height: 36px;
    text-wrap: nowrap;
  }

  .dinner-invitation__signature img {
    max-width: 200px;
    width: 100%;
  }

  .testimonial__content {
    max-width: 600px
  }

  .testimonial__quote {
    font-size: var(--font-size-base);
  }

  .testimonial__title,
  .testimonial__name {
    font-size: var(--font-size-sm);
  }

  .industry-insight__content {
    gap: var(--spacing-xl);
  }

  .industry-insight__text-image {
    max-width: 300px;
  }

  .industry-insight__text-button-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    min-width: 200px;
  }

  .industry-insight__text-button-text {
    font-size: var(--font-size-sm);
  }

  .newsletter-signup__content {
    max-width: 600px;
  }

  .newsletter-signup__content {
    flex-direction: column;
  }

}

/* Mobile Styles */
@media (max-width: 767px) {

  /* Show mobile book tasting bar */
  .header__book-tasting {
    display: block;
  }

  /* Show mobile menu text */
  .nav__mobile-menu-text {
    display: block;
  }

  /* Hide desktop navigation elements */
  .nav__links {
    display: none;
  }

  /* Show mobile toggle */
  .nav__toggle {
    display: flex;
  }

  /* Update header height for mobile */
  .header {
    min-height: auto;
    width: 100%;
  }

  .main {
    /* margin-top: 20px; */
    overflow: hidden;
    /* Adjust for mobile header height */
  }

  .hero {
    /* margin-top: 80px; */
    /* Adjust for mobile header height */
  }
  .portfolio-about__image-mobile{
    display: flex;
  }

  .event-invitation {
    min-height: 60vh;
    padding: var(--spacing-2xl) 0;
  }

  .event-invitation__award-img {
    max-width: 300px;
  }

  .portfolio-about__text-two-box-empty,
  .portfolio-about__text-one-box-empty,
  .portfolio-about__image {
    display: none;
  }

  .portfolio-about__text-box-two-content,
  .portfolio-about__text-box-one-content {
    max-width: 100%;
  }

  .portfolio-about__text-box-one-content p:nth-child(2) {
    padding-right: 0px;
  }

  .portfolio-about__text-box-one button {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    min-width: 120px;

  }

  .nav__logo-img {
    max-width: 180px;
  }

  .nav_mobile_menu_container {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cult-quote-section__image {
    width: 100%;
  }

  .cult-quote-section__text-content {
    max-width: 100%;
  }

  .cult-quote-section__text {
    width: 90%;
    padding-bottom: 50px;
  }

  .industry-insight__text-image {
    max-width: 90%;

  }

  .industry-insight__text-container {
    padding-bottom: 40px;
  }

  .hero__content {
    top: 150px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--spacing-xl);
  }

  .hero__emblem-img {
    max-width: 160px;
  }

  .hero__title {
    font-size: var(--font-size-lg);
  }

  .hero__sub-title {
    font-size: var(--font-size-lg);
  }

  .newsletter-signup__form-column--left {
    width: 100%;
  }

  /* Awards Section Mobile Layout */
  .awards-section__content {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .awards-section__content img {
    max-width: 100%;
    width: 100%;
  }

  .event-invitation__rating-text {
    font-size: var(--font-size-xl);
  }

  .dinner-invitation {
    min-height: 80vh;
    padding: 0;
    border-radius: 0;
  }

  .dinner-invitation__title {
    font-size: var(--font-size-3xl);
  }

  .dinner-invitation__description {
    font-size: var(--font-size-base);
  }

  .dinner-invitation__notice {
    font-size: var(--font-size-base);
  }

  /* Improve readability on mobile with a subtle light overlay */
  .dinner-invitation__content {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  /* Keep button text perfectly centered */
  .dinner-invitation__button {
    line-height: 40px;
    padding: 0;
  }

  .dinner-invitation__sig-img {
    max-width: 200px;
  }

  .testimonial__quote {
    padding: var(--spacing-lg);
  }

  .testimonial__quote p {
    font-size: var(--font-size-base);
  }

  .testimonial__name {
    font-size: var(--font-size-lg);
  }

  .testimonial__title {
    font-size: var(--font-size-xs);
  }

  /* Portfolio About Mobile Layout */
  .portfolio-about__content {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .portfolio-about__image {
    width: 100%;
    margin-top: 0;
    order: 2;
  }

  .portfolio-about__text {
    order: 1;
  }

  .portfolio-about__text-box-one,
  .portfolio-about__text-box-two {
    padding: var(--spacing-lg);
  }

  .portfolio-about__text-box-one p,
  .portfolio-about__text-box-two p {
    font-size: var(--font-size-base);
  }

  /* */
  /* Industry Insight Mobile Layout */

  .industry-insight__content {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .industry-insight__image {
    max-width: 100%;

  }

  .industry-insight__text-button {
    margin-top: var(--spacing-lg);
  }

  .industry-insight__text-button-button {
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-xs);
  }

  .industry-insight__text-button-text {
    font-size: var(--font-size-sm);
  }

  /* Newsletter Signup Mobile Layout */
  .newsletter-signup__content {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }

  .newsletter-signup__form-columns {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .newsletter-signup__title {
    font-size: var(--font-size-xl);
    text-align: center;
  }

  /* Footer Mobile Layout */
  .footer__content {
    flex-direction: column;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .footer__quote-section {
    max-width: 100%;
  }

  .footer__quote {
    font-size: var(--font-size-base);
  }

  .footer__links-section {
    flex-direction: column;
    gap: var(--spacing-xl);
    justify-content: center;
  }

  .footer__column {
    min-width: auto;
  }

  .cult-quote-section__content {
    flex-direction: column-reverse;
  }

  /* Mobile Footer */
  .footer__mobile {
    display: block;
  }

  .footer__content {
    display: none;
  }
}

/* Tablet Styles */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--spacing-lg);
  }

  /* Awards Section Tablet Layout */
  .awards-section__content {
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl) var(--container-padding);
  }

  .awards-section__content img {
    max-width: 450px;
  }

 

  .nav__toggle {
    display: flex;
  }

  .dinner-invitation__action {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-2xl);
  }

  .dinner-invitation__signature {
    align-items: flex-end;
  }

  .industry-insight__content {
    flex-direction: row;
    /* align-items: flex-start; */
  }

  .industry-insight__text {
    text-align: left;
  }

  /* Footer Tablet Layout */
  .footer__content {
    flex-direction: row;
    text-align: left;
  }

  .footer__links-section {
    flex-direction: row;
    gap: var(--spacing-2xl);
  }

  .awards__content {
    flex-direction: row;
    align-items: center;
  }


}

/* Desktop Styles */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--spacing-xl);
  }




  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-4xl);
  }

  h3 {
    font-size: var(--font-size-3xl);
  }

  .event-invitation {
    min-height: 90vh;
  }

  .event-invitation__award-img {
    max-width: 500px;
  }

  .event-invitation__rating-text {
    font-size: var(--font-size-3xl);
  }

  .dinner-invitation { min-height: auto; }

  .dinner-invitation__title {
    font-size: var(--font-size-5xl);
  }

  .dinner-invitation__description {
    font-size: var(--font-size-xl);
  }

  .dinner-invitation__notice {
    font-size: var(--font-size-xl);
  }

  .dinner-invitation__sig-img {
    max-width: 300px;
  }

  .testimonial__quote p {
    font-size: var(--font-size-xl);
  }

  .testimonial__name {
    font-size: var(--font-size-2xl);
  }

  .testimonial__title {
    font-size: var(--font-size-lg);
  }

  .industry-insight__image { width: 100%; }

  .awards__graphic,
  .awards__timeline { max-width: 600px; }

  /* Footer Desktop Layout */
  .footer__links-section {
    gap: var(--spacing-3xl);
  }

  .footer__quote {
    font-size: var(--font-size-xl);
  }
}