/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./assets/src/css/main.css ***!
  \*************************************************************************************************************************************************/
/* ==========================================================================

	Template Name: Beef Template
	Note: This is style css.

========================================================================== */
   
/* =====================================
    Tailwind Css - Base Components
===================================== */
   
/* ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */
   
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
   
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
   
::before,
::after {
  --tw-content: '';
}
   
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
   
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
}
   
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
   
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
   
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
   
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
   
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
   
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
   
/*
Remove the default font size and weight for headings.
*/
   
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
   
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
   
a {
  color: inherit;
  text-decoration: inherit;
}
   
/*
Add the correct font weight in Edge and Safari.
*/
   
b,
strong {
  font-weight: bolder;
}
   
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
   
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
   
/*
Add the correct font size in all browsers.
*/
   
small {
  font-size: 80%;
}
   
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
   
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
   
sub {
  bottom: -0.25em;
}
   
sup {
  top: -0.5em;
}
   
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
   
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
   
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
   
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
   
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
   
button,
select {
  text-transform: none;
}
   
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
   
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
   
/*
Use the modern Firefox focus style for all focusable elements.
*/
   
:-moz-focusring {
  outline: auto;
}
   
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
   
:-moz-ui-invalid {
  box-shadow: none;
}
   
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
   
progress {
  vertical-align: baseline;
}
   
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
   
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
   
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
   
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
   
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
   
::-webkit-search-decoration {
  -webkit-appearance: none;
}
   
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
   
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
   
/*
Add the correct display in Chrome and Safari.
*/
   
summary {
  display: list-item;
}
   
/*
Removes the default spacing and border for appropriate elements.
*/
   
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
   
fieldset {
  margin: 0;
  padding: 0;
}
   
legend {
  padding: 0;
}
   
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
   
/*
Prevent resizing textareas horizontally by default.
*/
   
textarea {
  resize: vertical;
}
   
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
   
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
   
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
   
/*
Set the default cursor for buttons.
*/
   
button,
[role="button"] {
  cursor: pointer;
}
   
/*
Make sure disabled buttons don't get the pointer cursor.
*/
   
:disabled {
  cursor: default;
}
   
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
   
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
   
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
   
img,
video {
  max-width: 100%;
  height: auto;
}
   
/* Make elements with the HTML hidden attribute stay hidden by default */
   
[hidden] {
  display: none;
}
   
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
   
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
   
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
   
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .\!container {
    max-width: 640px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
   
  .container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .\!container {
    max-width: 768px !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
   
  .container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .\!container {
    max-width: 1024px !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
   
  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .\!container {
    max-width: 1280px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
   
  .container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
/* =====================================
    Default Styles
===================================== */
   
/* ==========================================================================
   Spacing System - Design Tokens
   Base unit: 4px (0.25rem)
========================================================================== */
   
:root {
  /* =====================================
     Base Spacing Scale (Tailwind-aligned)
  ===================================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-14: 3.5rem;   /* 56px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  --spacing-28: 7rem;     /* 112px */
  --spacing-32: 8rem;     /* 128px */
  --spacing-36: 9rem;     /* 144px */
  --spacing-40: 10rem;    /* 160px */

  /* =====================================
     Semantic Component Spacing
     Use these for consistent component spacing
  ===================================== */
  --space-xs: var(--spacing-1);    /* 4px - Tight spacing, icons */
  --space-sm: var(--spacing-2);    /* 8px - Small elements */
  --space-md: var(--spacing-4);    /* 16px - Default spacing */
  --space-lg: var(--spacing-6);    /* 24px - Component gaps */
  --space-xl: var(--spacing-8);    /* 32px - Section spacing */
  --space-2xl: var(--spacing-12);  /* 48px - Large sections */
  --space-3xl: var(--spacing-16);  /* 64px - Major sections */
  --space-4xl: var(--spacing-20);  /* 80px - Hero spacing */
  --space-5xl: var(--spacing-28);  /* 112px - Extra large spacing */

  /* =====================================
     Layout Spacing
     Consistent gaps for flex and grid layouts
  ===================================== */
  --layout-gap: var(--spacing-6);       /* 24px - Default grid/flex gap */
  --layout-gap-sm: var(--spacing-4);    /* 16px - Compact layouts */
  --layout-gap-lg: var(--spacing-8);    /* 32px - Spacious layouts */
  --layout-gap-xl: var(--spacing-10);   /* 40px - Extra spacious layouts */

  /* =====================================
     Section Spacing
     Vertical spacing for major page sections
  ===================================== */
  --section-padding-y: var(--spacing-16);       /* 64px - Default section padding */
  --section-padding-y-md: var(--spacing-20);    /* 80px - Medium section padding */
  --section-padding-y-lg: var(--spacing-24);    /* 96px - Large section padding */
  --section-padding-y-xl: var(--spacing-28);    /* 112px - Extra large section padding */

  /* =====================================
     Container Spacing
     Horizontal padding for container elements
  ===================================== */
  --container-padding-x: var(--spacing-4);      /* 16px - Mobile */
  --container-padding-x-sm: var(--spacing-6);   /* 24px - Small tablet */
  --container-padding-x-md: var(--spacing-8);   /* 32px - Tablet */
  --container-padding-x-lg: var(--spacing-12);  /* 48px - Desktop */
  --container-padding-x-xl: var(--spacing-16);  /* 64px - Large desktop */

  /* =====================================
     Card Spacing
     Padding for card and box components
  ===================================== */
  --card-padding: var(--spacing-6);       /* 24px - Default card padding */
  --card-padding-sm: var(--spacing-4);    /* 16px - Compact card */
  --card-padding-lg: var(--spacing-8);    /* 32px - Spacious card */

  /* =====================================
     Stack Spacing
     Vertical rhythm for stacked elements
  ===================================== */
  --stack-gap: var(--spacing-4);       /* 16px - Default stack gap */
  --stack-gap-sm: var(--spacing-2);    /* 8px - Tight stack */
  --stack-gap-lg: var(--spacing-6);    /* 24px - Loose stack */

  /* =====================================
     Z-Index System
     Layering hierarchy for consistent stacking

     Usage: Use Tailwind z-* utilities with these values
     - z-0 to z-10: Content layers (overlays, decorative)
     - z-20 to z-40: Components (cards, dropdowns)
     - z-50: Slider controls, tooltips
     - z-[99]: Fixed UI elements
     - z-[100]: Navigation header
     - z-[999]: Sticky header (scrolled state)
     - z-[9999]: Accessibility (skip link only)
  ===================================== */
  --z-content: 0;           /* Base content */
  --z-overlay: 10;          /* Overlays, decorative elements */
  --z-decorative: 20;       /* Pseudo-elements, borders */
  --z-component: 30;        /* Timeline markers, badges */
  --z-dropdown: 40;         /* Dropdown menus */
  --z-control: 50;          /* Slider arrows, controls */
  --z-fixed: 99;            /* Fixed UI elements */
  --z-header: 100;          /* Navigation header */
  --z-sticky: 999;          /* Sticky header active */
  --z-a11y: 9999;           /* Skip link (accessibility emergency) */
}
   
/* =====================================
   Usage Examples:

   .section {
     padding-block: var(--section-padding-y);
   }

   .card {
     padding: var(--card-padding);
   }

   .grid {
     gap: var(--layout-gap);
   }

   @media (min-width: 768px) {
     .section {
       padding-block: var(--section-padding-y-lg);
     }
   }
===================================== */
   
/* ===================================
    01. Google font
====================================== */
   
/* Note: Fonts are loaded via <link> in HTML head for better performance */
   
/* See index.html and other pages for preconnect + stylesheet links */
   
/* ===================================
    02. Icons Fontawesome
====================================== */
   
/* Note: Font Awesome is loaded via <link> in HTML head for better control */
   
/* See index.html for Font Awesome stylesheet link */
   
/* ===================================
    02. Reset
====================================== */
   
html {font-size: 18px;}
   
body {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.25px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; color: #D1D2D4;
}
   
body, html {-moz-osx-font-smoothing: grayscale; position: relative;}
   
a, a:active, a:focus {color: #D1D2D4; text-decoration: none;}
   
a:hover, a:active{color: var(--base-color); text-decoration: none;}
   
a:focus, a:active, button:focus, button:active,.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none;}
   
img {max-width:100%; height:auto;}
   
video {background-size: cover; display: table-cell; vertical-align: middle; width: 100%;}
   
/* Base input styles - Minimal reset only (detailed styles in _form.css .input class) */
   
input, textarea, select {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.25px;
	width: 100%;
	max-width: 100%;
	color: inherit;
	-webkit-appearance: none;
}
   
textarea {
	resize: vertical; /* Allow vertical resize only */
}
   
input[type="submit"] {
	width: auto;
}
   
/* Remove default focus outlines - proper focus styles handled by .input class */
   
input[type="button"]:focus,
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.btn.focus,
.btn:focus {
	outline: none;
	box-shadow: none;
}
   
select::-ms-expand{display:none;}
   
iframe {border: 0;}
   
p {
  margin-bottom: 1.5rem;
}
   
b, strong {
  font-weight: 600;
}
   
.last-paragraph-no-margin p:last-of-type {margin-bottom:0}
   
.alt-font strong {
  font-weight: 700;
}
   
ul, ol, dl {list-style-position: outside;margin-bottom: 1.5rem;}
   
/* Global transition defaults removed - use explicit Tailwind classes instead:
   - duration-200: Fast UI (icons, menus)
   - duration-300: Standard interactions (hover, focus)
   - duration-500: Slow animations (modals)
   Use: transition-colors, transition-opacity, transition-transform for specific properties
*/
   
.no-transition *, .swiper-container *, .mfp-container *, .portfolio-wrapper *, .parallax, .rev-slider *, .header-searchbar *, .header-social-icon *, .dropdropdown-menu * {transition: none !important;}
   
::-moz-selection {color: #000000; background: #D1D2D4;}
   
::selection {color: #000000; background: #D1D2D4;}
   
::-moz-selection {color: #000000; background: #D1D2D4;}
   
::-webkit-input-placeholder {color: #8B8E91; text-overflow: ellipsis;}
   
::-moz-placeholder {color: #8B8E91; text-overflow: ellipsis; opacity:1;}
   
:-ms-input-placeholder {color: #8B8E91; text-overflow: ellipsis; opacity:1;}
   
/* ===================================
    Smooth Scroll (respects reduced motion)
====================================== */
   
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
   
/* ===================================
    Custom Scrollbar (webkit browsers)
====================================== */
   
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
   
::-webkit-scrollbar-track {
    background: #0A0D0F;
}
   
::-webkit-scrollbar-thumb {
    background: #3A3D41;
    border-radius: 4px;
}
   
::-webkit-scrollbar-thumb:hover {
    background: #5E6165;
}
   
/* Firefox scrollbar */
   
* {
    scrollbar-width: thin;
    scrollbar-color: #3A3D41 #0A0D0F;
}
   
/* base color variable*/
   
:root {--base-color: #D9B282;}
   
/* ===================================
    02. Reset
====================================== */
   
body {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity)) !important;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/* ===================================
    03. Typography
====================================== */
   
/* heading */
   
h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  margin-bottom: 1.5rem;
  font-family: Barlow Condensed, sans-serif;
  letter-spacing: -0.025em;
}
   
h1, h2, h3 {
  letter-spacing: -0.025em;
}
   
h4, h5, h6 {
  letter-spacing: 0em;
}
   
h1 {
  font-size: 58px !important;
  line-height: 1.2 !important;
}
   
h2 {
  font-size: 48px !important;
  line-height: 1.2 !important;
}
   
h3 {
  font-size: 38px !important;
  line-height: 1.2 !important;
}
   
h4 {
  font-size: 28px !important;
  line-height: 1.4 !important;
}
   
h5 {
  font-size: 22px !important;
  line-height: 1.4 !important;
}
   
h6 {
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px !important;
}
   
p {
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 300;
  letter-spacing: -0.025em;
}
   
/* ===================================
    04. Overlayer
    Note: Overlayer classes moved to _overlay.css
    Retrocompatibility aliases maintained in _overlay.css
====================================== */
   
/* ===================================
    404
====================================== */
   
.content-404 {
  position: relative;
  z-index: 0;
  height: 80vh;
  min-height: 80vh;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-bottom: 3rem;
}
   
.content-404__background {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  display: block;
  height: 100%;
  width: 100%;
}
   
.content-404__background img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.25;
}
   
.content-404__container {
  position: relative;
  z-index: 20;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .content-404__container {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1024px) {
   
  .content-404__container {
    padding-top: 8rem;
  }
}
   
@media (min-width: 1280px) {
   
  .content-404__container {
    padding-top: 10rem;
  }
}
   
.content-404__content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
}
   
@media (min-width: 768px) {
   
  .content-404__content {
    max-height: 480px;
  }
}
   
@media (min-width: 1280px) {
   
  .content-404__content {
    max-height: 600px;
  }
}
   
.content-404__title {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}
   
.content-404__title img {
  max-height: 140px;
}
   
@media (min-width: 640px) {
   
  .content-404__title img {
    max-height: 180px;
  }
}
   
@media (min-width: 768px) {
   
  .content-404__title img {
    max-height: 240px;
  }
}
   
@media (min-width: 1024px) {
   
  .content-404__title img {
    max-height: 280px;
  }
}
   
@media (min-width: 1280px) {
   
  .content-404__title img {
    max-height: 380px;
  }
}
   
/* ===================================
    Confirmation
====================================== */
   
.confirmation {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
@media (min-width: 1024px) {
   
  .confirmation {
    height: 668px;
    min-height: 668px;
  }
}
   
@media (min-width: 1280px) {
   
  .confirmation {
    height: 768px;
    min-height: 768px;
  }
}
   
.confirmation__background {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  display: block;
  height: 100%;
  width: 100%;
}
   
.confirmation__background img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.25;
}
   
.confirmation__container {
  position: relative;
  z-index: 20;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .confirmation__container {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1024px) {
   
  .confirmation__container {
    padding-top: 8rem;
  }
}
   
@media (min-width: 1280px) {
   
  .confirmation__container {
    padding-top: 10rem;
  }
}
   
.confirmation__content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
}
   
@media (min-width: 768px) {
   
  .confirmation__content {
    max-height: 480px;
  }
}
   
@media (min-width: 1280px) {
   
  .confirmation__content {
    max-height: 600px;
  }
}
   
.confirmation__title {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}
   
@media (min-width: 640px) {
   
  .confirmation__title {
    font-size: 91px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
@media (min-width: 768px) {
   
  .confirmation__title {
    font-size: 91px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
@media (min-width: 1280px) {
   
  .confirmation__title {
    font-size: 120px !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
  }
}
   
/* ===================================
    Coming soon
====================================== */
   
.coming-soon {
  position: relative;
}
   
.coming-soon__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
		height: 100vh;
}
   
.coming-soon__container {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.coming-soon__image {
  position: relative;
  grid-column: span 12 / span 12;
  display: none;
  height: 100%;
  overflow: hidden;
}
   
@media (min-width: 768px) {
   
  .coming-soon__image {
    grid-column: span 4 / span 4;
    display: flex;
  }
}
   
@media (min-width: 1024px) {
   
  .coming-soon__image {
    grid-column: span 6 / span 6;
  }
}
   
.coming-soon__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.coming-soon__content {
  grid-column: span 12 / span 12;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .coming-soon__content {
    padding: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .coming-soon__content {
    grid-column: span 8 / span 8;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .coming-soon__content {
    grid-column: span 6 / span 6;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
.coming-soon__content .content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .coming-soon__content .content {
    padding: 2rem;
  }
}
   
.coming-soon__content .logo {
  margin-bottom: 4rem;
  width: 180px;
}
   
.coming-soon__title {
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: uppercase !important;
}
   
@media (min-width: 640px) {
   
  .coming-soon__title {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 768px) {
   
  .coming-soon__title {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
.coming-soon__text {
  text-align: center !important;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
}
   
@media (min-width: 1280px) {
   
  .coming-soon__text {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1.5px;
  }
}
   
.coming-soon__form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
   
.coming-soon__form .form__body {
  margin-bottom: 1rem;
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
}
   
@media (min-width: 640px) {
   
  .coming-soon__form .form__body {
    margin-bottom: 0px;
    width: 68% !important;
  }
}
   
@media (min-width: 768px) {
   
  .coming-soon__form .form__body {
    width: 70% !important;
  }
}
   
@media (min-width: 1280px) {
   
  .coming-soon__form .form__body {
    width: 74% !important;
  }
}
   
.coming-soon__form .form__body {
			/* Input styling handled by .input.input--no-margin class in HTML */
		}
   
.coming-soon__form .form__footer {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
}
   
@media (min-width: 640px) {
   
  .coming-soon__form .form__footer {
    width: 28% !important;
  }
}
   
@media (min-width: 768px) {
   
  .coming-soon__form .form__footer {
    width: 26% !important;
  }
}
   
@media (min-width: 1280px) {
   
  .coming-soon__form .form__footer {
    width: 22% !important;
  }
}
   
/* =====================================
    Animate.css - Custom (only used animations)
    Replaces full animate.css to reduce bundle size
===================================== */
   
/* =====================================
    Custom Animate.css - Only Used Animations

    This file replaces the full animate.css import to reduce bundle size.
    Only includes animations actually used in the theme.
===================================== */
   
/* Base animation class */
   
.animate__animated {
    animation-duration: 1s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
}
   
/* Fade In Up - Main animation used throughout theme */
   
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__fadeInUp {
    animation-name: fadeInUp;
}
   
/* Fade In Left - Used in some sections */
   
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__fadeInLeft {
    animation-name: fadeInLeft;
}
   
/* Fade In Right - Used in some sections */
   
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__fadeInRight {
    animation-name: fadeInRight;
}
   
/* Fade In Down - Top entrance animation */
   
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__fadeInDown {
    animation-name: fadeInDown;
}
   
/* Zoom In - Scale entrance animation */
   
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.85, 0.85, 0.85);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
   
.animate__zoomIn {
    animation-name: zoomIn;
}
   
/* Slide In Left - Horizontal entrance */
   
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__slideInLeft {
    animation-name: slideInLeft;
}
   
/* Slide In Right - Horizontal entrance */
   
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
   
.animate__slideInRight {
    animation-name: slideInRight;
}
   
/* WOW.js delay utilities - used with data-wow-delay */
   
.wow {
    visibility: hidden;
}
   
.wow.animate__animated {
    visibility: visible;
}
   
/* Animation duration variables */
   
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}
   
/* Duration utilities */
   
.animate__delay-1s {
    animation-delay: 1s;
    animation-delay: var(--animate-delay);
}
   
.animate__delay-2s {
    animation-delay: calc(1s * 2);
    animation-delay: calc(var(--animate-delay) * 2);
}
   
.animate__delay-3s {
    animation-delay: calc(1s * 3);
    animation-delay: calc(var(--animate-delay) * 3);
}
   
/* Faster animations */
   
.animate__faster {
    animation-duration: calc(1s / 2);
    animation-duration: calc(var(--animate-duration) / 2);
}
   
.animate__fast {
    animation-duration: calc(1s * 0.8);
    animation-duration: calc(var(--animate-duration) * 0.8);
}
   
/* Slower animations */
   
.animate__slow {
    animation-duration: calc(1s * 2);
    animation-duration: calc(var(--animate-duration) * 2);
}
   
.animate__slower {
    animation-duration: calc(1s * 3);
    animation-duration: calc(var(--animate-duration) * 3);
}
   
/* Infinite repeat */
   
.animate__infinite {
    animation-iteration-count: infinite;
}
   
/* Repeat utilities */
   
.animate__repeat-1 {
    animation-iteration-count: 1;
    animation-iteration-count: var(--animate-repeat);
}
   
.animate__repeat-2 {
    animation-iteration-count: calc(1 * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2);
}
   
.animate__repeat-3 {
    animation-iteration-count: calc(1 * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3);
}
   
/* =====================================
    Common Styles
===================================== */
   
/* ==========================================================================
   Unified Padding System - Complete Utilities
   Standardized spacing for sections, containers, and components
========================================================================== */
   
/* ==========================================================================
   SECTION 1: VERTICAL PADDING (py, pt, pb)
   For section-level vertical spacing
========================================================================== */
   
/* =====================================
   Standard Section Spacing (Most Common)
   Use for main content sections
   Smooth progression: 48px → 64px → 80px → 96px → 112px
===================================== */
   
.section-spacing {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.section-spacing-top {
  padding-top: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-top {
    padding-top: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-top {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-top {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-top {
    padding-top: 7rem;
  }
}
   
.section-spacing-bottom {
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-bottom {
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-bottom {
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-bottom {
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-bottom {
    padding-bottom: 7rem;
  }
}
   
/* =====================================
   Section Spacing with LG Breakpoint (DEPRECATED - Use section-spacing)
   Kept for backwards compatibility, identical to section-spacing
   Progression: 48px → 64px → 80px → 96px → 112px
===================================== */
   
.section-spacing-lg {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-lg {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-lg {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-lg {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.section-spacing-lg-top {
  padding-top: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-lg-top {
    padding-top: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-lg-top {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-lg-top {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-lg-top {
    padding-top: 7rem;
  }
}
   
.section-spacing-lg-bottom {
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-lg-bottom {
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-lg-bottom {
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-lg-bottom {
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-lg-bottom {
    padding-bottom: 7rem;
  }
}
   
/* =====================================
   Compact Section Spacing
   Use for nested sections or cards
   Progression: 32px → 48px → 64px → 64px → 80px
===================================== */
   
.section-spacing-compact {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-compact {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-compact {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-compact {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-compact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.section-spacing-compact-top {
  padding-top: 2rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-compact-top {
    padding-top: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-compact-top {
    padding-top: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-compact-top {
    padding-top: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-compact-top {
    padding-top: 5rem;
  }
}
   
.section-spacing-compact-bottom {
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-compact-bottom {
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-compact-bottom {
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-compact-bottom {
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-compact-bottom {
    padding-bottom: 5rem;
  }
}
   
/* =====================================
   Small Section Spacing
   Use for minor sections, badges, dividers
   Progression: 24px → 32px → 48px → 48px → 64px
===================================== */
   
.section-spacing-small {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-small {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-small {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-small {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-small {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
.section-spacing-small-top {
  padding-top: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-small-top {
    padding-top: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-small-top {
    padding-top: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-small-top {
    padding-top: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-small-top {
    padding-top: 4rem;
  }
}
   
.section-spacing-small-bottom {
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .section-spacing-small-bottom {
    padding-bottom: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-spacing-small-bottom {
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-spacing-small-bottom {
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-spacing-small-bottom {
    padding-bottom: 4rem;
  }
}
   
/* =====================================
   Hero Spacing
   Special spacing for hero sections
===================================== */
   
.hero-spacing {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .hero-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-spacing {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-spacing {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.hero-spacing-top {
  padding-top: 4rem;
}
   
@media (min-width: 768px) {
   
  .hero-spacing-top {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-spacing-top {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-spacing-top {
    padding-top: 7rem;
  }
}
   
/* ==========================================================================
   SECTION 2: HORIZONTAL PADDING (px, pl, pr)
   For container-level horizontal spacing
========================================================================== */
   
/* =====================================
   Standard Container Padding
   Use for main containers
   Progression: 16px → 16px → 24px → 48px → 64px
===================================== */
   
.container-padding {
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .container-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .container-padding {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.container-padding-left {
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .container-padding-left {
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .container-padding-left {
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding-left {
    padding-left: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding-left {
    padding-left: 4rem;
  }
}
   
.container-padding-right {
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .container-padding-right {
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .container-padding-right {
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding-right {
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding-right {
    padding-right: 4rem;
  }
}
   
/* =====================================
   Extended Container Padding
   Use for wider containers
===================================== */
   
.container-padding-xl {
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .container-padding-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding-xl {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding-xl {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
.container-padding-2xl {
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .container-padding-2xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding-2xl {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding-2xl {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}
   
/* =====================================
   Compact Horizontal Padding
   Use for tight layouts
===================================== */
   
.container-padding-compact {
  padding-left: 18px;
  padding-right: 18px;
}
   
@media (min-width: 768px) {
   
  .container-padding-compact {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
/* =====================================
   Loose Horizontal Padding
   Use for spacious layouts
===================================== */
   
.container-padding-loose {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .container-padding-loose {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .container-padding-loose {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .container-padding-loose {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
/* =====================================
   Content Block Padding
   Use for article/blog content areas
===================================== */
   
.content-padding {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .content-padding {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .content-padding {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .content-padding {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1536px) {
   
  .content-padding {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}
   
/* ==========================================================================
   SECTION 3: ALL-SIDES PADDING (p)
   For component-level spacing
========================================================================== */
   
/* =====================================
   Card Padding
   Use for card components
   Progression: 12px → 16px → 24px → 32px
===================================== */
   
.card-padding {
  padding: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .card-padding {
    padding: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-padding {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-padding {
    padding: 2rem;
  }
}
   
.card-padding-compact {
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .card-padding-compact {
    padding: 0.75rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-padding-compact {
    padding: 1rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-padding-compact {
    padding: 1.25rem;
  }
}
   
.card-padding-spacious {
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .card-padding-spacious {
    padding: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-padding-spacious {
    padding: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-padding-spacious {
    padding: 2.5rem;
  }
}
   
/* =====================================
   Feature/Hero Card Padding
   Use for large featured cards
   Progression: 24px → 32px → 48px → 64px → 80px
===================================== */
   
.feature-padding {
  padding: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .feature-padding {
    padding: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .feature-padding {
    padding: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .feature-padding {
    padding: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .feature-padding {
    padding: 5rem;
  }
}
   
/* =====================================
   Component Padding
   Use for small UI components
===================================== */
   
.component-padding {
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .component-padding {
    padding: 1.5rem;
  }
}
   
.component-padding-small {
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .component-padding-small {
    padding: 0.75rem;
  }
}
   
@media (min-width: 768px) {
   
  .component-padding-small {
    padding: 1rem;
  }
}
   
/* =====================================
   Input/Form Padding
   Use for form elements
===================================== */
   
.input-padding {
  padding: 0.75rem;
}
   
@media (min-width: 768px) {
   
  .input-padding {
    padding: 1rem;
  }
}
   
/* ==========================================================================
   SECTION 4: COMBINED SEMANTIC UTILITIES
   Combines vertical + horizontal for common patterns
========================================================================== */
   
/* =====================================
   Full Section (vertical + horizontal)
===================================== */
   
.section-container {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .section-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-container {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-container {
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-container {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.section-container-lg {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .section-container-lg {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-container-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-container-lg {
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-container-lg {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.section-container-xl {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .section-container-xl {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .section-container-xl {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-container-xl {
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-container-xl {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
/* =====================================
   Content Block (for article/blog areas)
===================================== */
   
.content-block {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .content-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .content-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .content-block {
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .content-block {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1536px) {
   
  .content-block {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}
   
/* =====================================
   Card Variants (combined padding + styling)
===================================== */
   
.card-default {
  border-radius: 0.5rem;
  padding: 1rem;
}
   
@media (min-width: 768px) {
   
  .card-default {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-default {
    padding: 2rem;
  }
}
   
.card-compact {
  border-radius: 0.5rem;
  padding: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .card-compact {
    padding: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-compact {
    padding: 1.25rem;
  }
}
   
.card-featured {
  border-radius: 0.5rem;
  padding: 2rem;
}
   
@media (min-width: 768px) {
   
  .card-featured {
    padding: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-featured {
    padding: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .card-featured {
    padding: 5rem;
  }
}
   
/* =====================================
   Hero Section (large spacing)
===================================== */
   
.hero-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .hero-section {
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-section {
    padding-top: 12rem;
    padding-bottom: 12rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-section {
    padding-top: 14rem;
    padding-bottom: 14rem;
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
/* ==========================================================================
   SECTION 5: EDGE CASES & OVERRIDES
   Use sparingly for special situations
========================================================================== */
   
/* =====================================
   Full Width with Padding
   For full-width sections with internal padding
===================================== */
   
.full-width-padded {
  width: 100%;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
   
@media (min-width: 768px) {
   
  .full-width-padded {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
   
@media (min-width: 1024px) {
   
  .full-width-padded {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
   
@media (min-width: 1280px) {
   
  .full-width-padded {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}
   
/* =====================================
   Tight Horizontal Spacing
   For edge cases needing minimal horizontal space
===================================== */
   
.section-tight-h {
  padding-left: 0px;
  padding-right: 0px;
}
   
@media (min-width: 768px) {
   
  .section-tight-h {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .section-tight-h {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .section-tight-h {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
/* =====================================
   No Padding Reset
   For components that need padding reset
===================================== */
   
.section-no-pad {
  margin: 0px;
  padding: 0px;
}
   
/* ==========================================================================
   USAGE EXAMPLES & GUIDELINES
========================================================================== */
   
/*
=====================================
VERTICAL SPACING EXAMPLES
=====================================

<!-- Standard section -->
<section class="section-spacing">
    <div class="container">...</div>
</section>

<!-- Section with LG breakpoint -->
<section class="section-spacing-lg">
    <div class="container">...</div>
</section>

<!-- Top padding only -->
<section class="section-spacing-top">
    <div class="container">...</div>
</section>

<!-- Compact section for nested content -->
<div class="section-spacing-compact">
    <div class="container">...</div>
</div>

=====================================
HORIZONTAL SPACING EXAMPLES
=====================================

<!-- Standard container -->
<div class="container container-padding">
    ...
</div>

<!-- Wide container -->
<div class="container container-padding-xl">
    ...
</div>

<!-- Content area -->
<div class="content-padding">
    ...
</div>

=====================================
COMPONENT PADDING EXAMPLES
=====================================

<!-- Card component -->
<div class="card-padding rounded-lg bg-white">
    ...
</div>

<!-- Featured card -->
<div class="feature-padding rounded-lg bg-white">
    ...
</div>

<!-- Form input -->
<input class="input-padding rounded border" />

=====================================
COMBINED UTILITIES EXAMPLES
=====================================

<!-- Full section with container -->
<section class="section-container">
    ...
</section>

<!-- Article/blog content -->
<article class="content-block">
    ...
</article>

<!-- Hero section -->
<section class="hero-section">
    ...
</section>

<!-- Card with default styling -->
<div class="card-default bg-white shadow">
    ...
</div>

=====================================
CSS VARIABLE ALTERNATIVE
=====================================

<!-- Using CSS custom properties -->
<section style="padding-block: var(--section-padding-y);">
    <div class="container">...</div>
</section>

<div style="padding: var(--card-padding);">
    ...
</div>

=====================================
MIGRATION FROM INLINE @apply
=====================================

BEFORE:
.my-section {
    @apply py-16 md:py-20 xl:py-28;
}

AFTER:
.my-section {
    @apply section-spacing;
}

---

BEFORE:
.my-container {
    @apply px-4 md:px-6 lg:px-12 xl:px-16;
}

AFTER:
.my-container {
    @apply container-padding;
}

---

BEFORE:
.my-card {
    @apply p-4 md:p-6 lg:p-8 rounded-lg;
}

AFTER:
.my-card {
    @apply card-default;
}

*/
   
/* ==========================================================================
   SECTION 5: CONTENT WIDTH UTILITIES
   Standardized max-width values for content containers
========================================================================== */
   
/* =====================================
   Content Width Narrow (600px)
   Use for: Forms, section titles, centered text content
===================================== */
   
.content-width-narrow {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}
   
/* =====================================
   Content Width Medium (720px)
   Use for: About sections, CTAs, wider text content
===================================== */
   
.content-width-medium {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
   
/* =====================================
   Content Width Wide (800px)
   Use for: Menu sections, history, feature content
===================================== */
   
.content-width-wide {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
   
/* =====================================
   Content Width Full (1200px)
   Use for: Blog layouts, multi-column content
===================================== */
   
.content-width-full {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
   
/* ==========================================================================
   Section Block Variants - Modular Layout Options
   Provides reusable modifiers for common section patterns
========================================================================== */
   
/* ==========================================================================
   CTA BLOCK VARIANTS
========================================================================== */
   
/* Minimal - No borders, more compact, ideal for secondary CTAs */
   
.cta--minimal .cta__container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .cta--minimal .cta__container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta--minimal .cta__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta--minimal .cta__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta--minimal .cta__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.cta--minimal .cta__body {
  border-width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.5rem;
}
   
/* Split - Content divided into two columns for comparisons */
   
.cta--split .cta__content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .cta--split .cta__content {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
.cta--split .cta__header {
  grid-column: 1 / -1;
}
   
/* Compact - Smaller version for newsletters, secondary actions */
   
.cta--compact .cta__container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .cta--compact .cta__container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta--compact .cta__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta--compact .cta__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta--compact .cta__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta--compact .cta__content {
    width: 100%;
  }
}
   
@media (min-width: 1024px) {
   
  .cta--compact .cta__content {
    width: 83.333333%;
  }
}
   
.cta--compact .cta__body {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .cta--compact .cta__body {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
   
/* ==========================================================================
   ABOUT BLOCK VARIANTS
========================================================================== */
   
/* Centered - Everything centered without image, ideal for mission statements */
   
.about--centered .about-content__image {
  display: none;
}
   
.about--centered .about-content__info {
  grid-column: span 12 / span 12;
  align-items: center;
  text-align: center;
}
   
/* Image Right - Reverses visual order */
   
.about--image-right .about-content__image {
  order: 2;
}
   
.about--image-right .about-content__info {
  order: 1;
}
   
/* Minimal - Text only, no image, compact spacing */
   
.about--minimal .about-content__image {
  display: none;
}
   
.about--minimal .about-content__info {
  grid-column: span 12 / span 12;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .about--minimal .about-content__info {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .about--minimal .about-content__info {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about--minimal .about-content__info {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .about--minimal .about-content__info {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about--minimal .about-content__info {
    grid-column: span 8 / span 8;
  }
}
   
/* Full Width - No container restrictions, full image */
   
.about--fullwidth {
  max-width: none;
}
   
.about--fullwidth .about-content {
  max-width: none;
}
   
.about--fullwidth .about-content__image {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .about--fullwidth .about-content__image {
    grid-column: span 6 / span 6;
  }
}
   
.about--fullwidth .about-content__info {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .about--fullwidth .about-content__info {
    grid-column: span 6 / span 6;
  }
}
   
/* ==========================================================================
   SERVICES BLOCK VARIANTS
========================================================================== */
   
/* Horizontal - Horizontal list for feature highlights */
   
.services--horizontal .services-illustrations__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
   
.services--horizontal .services-illustrations__card {
  flex-direction: row;
  gap: 1rem;
  text-align: left;
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .services--horizontal .services-illustrations__card {
    padding: 1.5rem;
  }
}
   
.services--horizontal .services-illustrations__card-illustration {
  height: 4rem;
  width: 4rem;
}
   
/* Centered - Single column, ideal for 1-3 featured services */
   
.services--centered .services-illustrations__content {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
   
/* Minimal - No cards, flat design for footer/sidebar */
   
.services--minimal .services-illustrations__card {
  border-width: 0px;
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .services--minimal .services-illustrations__card {
    padding: 1.5rem;
  }
}
   
/* Dense - 6 columns for many items (technologies, partners) */
   
@media (min-width: 640px) {
   
  .services--dense .services-illustrations__content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .services--dense .services-illustrations__content {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
   
.services--dense .services-illustrations__card {
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .services--dense .services-illustrations__card {
    padding: 0.75rem;
  }
}
   
@media (min-width: 768px) {
   
  .services--dense .services-illustrations__card {
    padding: 1rem;
  }
}
   
.services--dense .services-illustrations__card-illustration {
  height: 3rem;
  width: 3rem;
}
   
/* ==========================================================================
   TEAM BLOCK VARIANTS
========================================================================== */
   
/* List - Horizontal layout with always visible info */
   
.team--list .team-block__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
   
.team--list .team-block__team {
  grid-column: 1 / -1;
}
   
.team--list .card-team {
  max-height: none;
  flex-direction: row;
  align-items: center;
}
   
.team--list .card-team__image {
  height: 12rem;
  width: 12rem;
  flex-shrink: 0;
}
   
.team--list .card-team__info {
  position: relative;
  inset: auto;
  align-items: flex-start;
  background-color: transparent;
  padding-left: 1.5rem;
  text-align: left;
  opacity: 1;
}
   
/* Minimal - Only small circular avatars */
   
.team--minimal .team-block__description {
  grid-column: 1 / -1;
}
   
.team--minimal .team-block__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
   
.team--minimal .team-block__team {
  width: auto;
}
   
.team--minimal .card-team {
  max-height: 8rem;
  width: 8rem;
  overflow: hidden;
  border-radius: 9999px;
}
   
.team--minimal .card-team__image img {
  border-radius: 9999px;
}
   
.team--minimal .card-team__info {
  display: none;
}
   
/* Centered - Larger centered cards */
   
.team--centered .team-block__description {
  grid-column: 1 / -1;
  text-align: center;
}
   
.team--centered .team-block__grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-items: center;
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .team--centered .team-block__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .team--centered .team-block__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
.team--centered .team-block__team {
  grid-column: span 1 / span 1;
}
   
/* ==========================================================================
   GALLERY BLOCK VARIANTS
========================================================================== */
   
/* Large - 2 columns with large images for portfolio */
   
@media (min-width: 640px) {
   
  .gallery--large .gallery-block__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
.gallery--large .gallery-block__item-image {
  height: 300px !important;
}
   
@media (min-width: 1024px) {
   
  .gallery--large .gallery-block__item-image {
    height: 500px !important;
  }
}
   
/* Compact - 6 columns for thumbnails/categories */
   
.gallery--compact .gallery-block__list {
  gap: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .gallery--compact .gallery-block__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
   
.gallery--compact .gallery-block__item-image {
  height: 120px !important;
}
   
.gallery--compact .gallery-block__item-info {
  display: none;
}
   
/* Minimal - No info, only images with minimal spacing */
   
.gallery--minimal .gallery-block__item-info {
  display: none;
}
   
.gallery--minimal .gallery-block__list {
  gap: 0.5rem;
}
   
/* ==========================================================================
   MENU/DISH BLOCK VARIANTS
========================================================================== */
   
/* Centered - Single centered column for featured menu */
   
.menu--centered .menu-block__dishes {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
   
/* Compact - Compact list without descriptions for quick menu */
   
.menu--compact .dish__description {
  display: none;
}
   
.menu--compact .dish {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}
   
/* Cards - Each dish in individual card with background */
   
.menu--cards .dishes__list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
   
@media (min-width: 768px) {
   
  .menu--cards .dishes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .menu--cards .dishes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
.menu--cards .dish {
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .menu--cards .dish {
    padding: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu--cards .dish {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu--cards .dish {
    padding: 2rem;
  }
}
   
/* Minimal - No borders for prix fixe/set menus */
   
.menu--minimal .dish {
  margin-bottom: 0.5rem;
  border-width: 0px;
  padding-bottom: 0.5rem;
}
   
/* ==========================================================================
   SPECIAL OFFERS VARIANTS
========================================================================== */
   
/* Centered - Image on top, info below (vertical stack) */
   
.special-offers--centered .special-offers__item {
  display: flex;
  flex-direction: column;
}
   
.special-offers--centered .special-offers__item-image {
  max-height: 400px;
}
   
/* Minimal - Info only, small or hidden image */
   
.special-offers--minimal .special-offers__item {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
   
.special-offers--minimal .special-offers__item-image {
  max-height: 200px;
}
   
@media (min-width: 768px) {
   
  .special-offers--minimal .special-offers__item-image {
    max-height: 240px;
  }
}
   
/* Overlay - Info positioned over the image */
   
.special-offers--overlay .special-offers__item {
  position: relative;
}
   
.special-offers--overlay .special-offers__item-info {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgb(5 6 8 / 0.9);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
   
/* ==========================================================================
   USAGE EXAMPLES
========================================================================== */
   
/*
<!-- CTA Minimal -->
<div class="cta cta--minimal">
    ...
</div>

<!-- About Image Right -->
<div class="about__image-info about--image-right">
    ...
</div>

<!-- Services Horizontal -->
<div class="services-illustrations services--horizontal">
    ...
</div>

<!-- Team List View -->
<div class="team-block team--list">
    ...
</div>

<!-- Gallery Large -->
<div class="gallery-block gallery--large">
    ...
</div>

<!-- Menu Compact -->
<div class="menu-block menu--compact">
    ...
</div>

<!-- Special Offers Centered -->
<div class="special-offers special-offers--centered">
    ...
</div>
*/
   
/*==========================
    Divider
===========================*/
   
.divider {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  height: 1px;
  width: 100%;
  max-width: 32rem;
}
   
@media screen and (max-width: 480px) {
   
.divider {
    max-width: 50%;
  }
	}
   
.div-transparent:before {
	content: "";
	position: absolute;
	top: 0px;
	left: 5%;
	right: 5%;
	height: 1px;
	width: 90%;
	background-image: linear-gradient(to right, transparent, #D9B282, transparent);
}
   
.div-arrow-down:after {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: 50%;
	z-index: 10;
	height: 0.875rem;
	width: 0.875rem;
	--tw-translate-x: -50%;
	--tw-rotate: 45deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(217 178 130 / var(--tw-border-opacity));
	--tw-bg-opacity: 1;
	background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
.div-stopper:after {
	content: "";
	position: absolute;
	top: -0.375rem;
	left: 50%;
	z-index: 10;
	height: 0.75rem;
	width: 0.875rem;
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-left-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(217 178 130 / var(--tw-border-opacity));
	--tw-bg-opacity: 1;
	background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
/* ===================================
    Button System v2.0
    Consolidated & Minimal Design System
====================================== */
   
/* ===================================
    1. Base Button (.btn)
    Primary button component - outline/ghost style
    Consolidates: .btn__default, form buttons, blog search button
====================================== */
   
.btn {
  display: inline-block;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 0.5px;
}
   
.btn:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
/* Button Modifiers */
   
.btn--solid {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn--solid:hover {
  --tw-border-opacity: 1;
  border-color: rgb(225 193 155 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(225 193 155 / var(--tw-bg-opacity));
}
   
.btn--solid:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.btn--compact {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
   
/* ===================================
    2. Link Button (.btn-link)
    Text link with animated underline effect
    Use for: "read more", "add order", text links
====================================== */
   
.btn-link {
  position: relative;
  margin-top: 2rem;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0px;
  border-bottom-width: 1px;
  border-color: transparent !important;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.25px !important;
  font-weight: 400;
  text-transform: capitalize;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
@media (min-width: 768px) {
   
  .btn-link {
    font-size: 18px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
  }
}
   
.btn-link {
    letter-spacing: 1px;
    text-decoration: none;
}
   
/* Pseudo-elements for animated underline */
   
.btn-link:before,
    .btn-link:after {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        width: 0;
    }
   
.btn-link:before {
        transition: width 0s ease, background .4s ease;
        left: 0;
        right: 0;
        bottom: -8px;
    }
   
.btn-link:after {
        right: 2.2%;
        bottom: -8px;
        background: #D9B282;
        transition: width .4s ease;
    }
   
.btn-link:hover {
  cursor: pointer;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.btn-link:hover:before {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
            left: 5%;
            width: 90%;
            transition: width .4s ease;
}
   
.btn-link:hover:after {
            left: 5%;
            width: 90%;
            background: 0 0;
            transition: all 0s ease;
        }
   
.btn-link:focus-visible {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn-link:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(174 142 104 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.btn-link:disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  opacity: 0.5;
}
   
/* ===================================
    3. Scroll-to-Top Button (.btn-scroll-top)
    Fixed floating button for page scroll
    Use for: Back to top functionality
====================================== */
   
.btn-scroll-top {
  position: fixed;
  bottom: 4rem;
  right: 1rem;
  z-index: 50;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(5 6 8 / 0.8);
  padding: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 0.5;
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.btn-scroll-top:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  opacity: 1;
}
   
.btn-scroll-top:focus-visible {
  opacity: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn-scroll-top:active {
  --tw-scale-x: 0.93;
  --tw-scale-y: 0.93;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  opacity: 1;
}
   
.btn-scroll-top:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.25;
}
   
/* ===================================
    Retrocompatibility Aliases
    TODO: Remove in v3.0
====================================== */
   
.btn__default.active.focus,.btn__default.active:focus,.btn__default.focus,.btn__default:active.focus,.btn__default:active:focus,.btn__default:focus {outline: none; box-shadow: none;}
   
.btn__default.focus,.btn__default:focus {
	outline: none;
	box-shadow: none;
}
   
.btn__default {
  display: inline-block;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 0.5px;
}
   
.btn__default:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn__default:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn__default:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn__default:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
@media (prefers-contrast: more) {
    .btn__default {
    border-width: 2px;
  }
}
   
.topbar .btn__default {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.topbar .btn__default:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   

			.hero-slider .slider-hero .slick-active .btn__default {
				transform: translateY(16px);
				opacity: 0;
				animation: showContent 0.4s 0.2s ease-out 1 forwards;
			}
   
.hero-slider .slider-hero .slick-active .btn__default {
				animation-delay: 0.65s;
			}
   
.special-offers-2__item-info .btn__default {
  position: relative;
  z-index: 50;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
   
.menu-block .btn__default {
  margin-top: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .menu-block .btn__default {
    margin-top: 0px;
  }
}
   
.menu-item__action .btn__default {
  width: 100%;
  min-width: 280px;
  text-align: center;
}
   
@media (min-width: 640px) {
   
  .menu-item__action .btn__default {
    width: auto;
  }
}
   
.services-box .services-illustrations__card-info .btn__default {
  margin-top: 0px;
}
   
.location__item-content .btn__default {
  margin-top: 0.75rem;
}
   
.post__footer .btn__default {
  margin-top: 0px;
}
   
.btn__solid.active.focus,.btn__solid.active:focus,.btn__solid.focus,.btn__solid:active.focus,.btn__solid:active:focus,.btn__solid:focus {outline: none; box-shadow: none;}
   
.btn__solid.focus,.btn__solid:focus {
	outline: none;
	box-shadow: none;
}
   
.btn__solid {
  display: inline-block;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 0.5px;
}
   
.btn__solid:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn__solid:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn__solid:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn__solid:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
.btn__solid {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn__solid:hover {
  --tw-border-opacity: 1;
  border-color: rgb(225 193 155 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(225 193 155 / var(--tw-bg-opacity));
}
   
.btn__solid:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
@media (prefers-contrast: more) {
    .btn__solid {
    border-width: 2px;
  }
}
   
.topbar .btn__solid {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.topbar .btn__solid:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   

			.hero-slider .slider-hero .slick-active .btn__solid {
				transform: translateY(16px);
				opacity: 0;
				animation: showContent 0.4s 0.2s ease-out 1 forwards;
			}
   
.hero-slider .slider-hero .slick-active .btn__solid {
				animation-delay: 0.65s;
			}
   
.special-offers-2__item-info .btn__solid {
  position: relative;
  z-index: 50;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
   
.menu-block .btn__solid {
  margin-top: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .menu-block .btn__solid {
    margin-top: 0px;
  }
}
   
.menu-item__action .btn__solid {
  width: 100%;
  min-width: 280px;
  text-align: center;
}
   
@media (min-width: 640px) {
   
  .menu-item__action .btn__solid {
    width: auto;
  }
}
   
.services-box .services-illustrations__card-info .btn__solid {
  margin-top: 0px;
}
   
.location__item-content .btn__solid {
  margin-top: 0.75rem;
}
   
.post__footer .btn__solid {
  margin-top: 0px;
}
   
.btn__link {
  position: relative;
  margin-top: 2rem;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0px;
  border-bottom-width: 1px;
  border-color: transparent !important;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.25px !important;
  font-weight: 400;
  text-transform: capitalize;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
@media (min-width: 768px) {
   
  .btn__link {
    font-size: 18px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
  }
}
   
.btn__link {
    letter-spacing: 1px;
    text-decoration: none;
}
   
.btn__link:before,.btn__link:after {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        width: 0;
    }
   
.btn__link:before {
        transition: width 0s ease, background .4s ease;
        left: 0;
        right: 0;
        bottom: -8px;
    }
   
.btn__link:after {
        right: 2.2%;
        bottom: -8px;
        background: #D9B282;
        transition: width .4s ease;
    }
   
.btn__link:hover {
  cursor: pointer;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.btn__link:hover:before {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
            left: 5%;
            width: 90%;
            transition: width .4s ease;
}
   
.btn__link:hover:after {
            left: 5%;
            width: 90%;
            background: 0 0;
            transition: all 0s ease;
        }
   
.btn__link:focus-visible {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn__link:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1 !important;
  border-bottom-color: rgb(174 142 104 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.btn__link:disabled {
  cursor: not-allowed;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  opacity: 0.5;
}
   
.btn-to-top {
  position: fixed;
  bottom: 4rem;
  right: 1rem;
  z-index: 50;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(5 6 8 / 0.8);
  padding: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 0.5;
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.btn-to-top:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  opacity: 1;
}
   
.btn-to-top:focus-visible {
  opacity: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn-to-top:active {
  --tw-scale-x: 0.93;
  --tw-scale-y: 0.93;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  opacity: 1;
}
   
.btn-to-top:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.25;
}
   
@media print {
    .btn-to-top {
        display: none;
    }
}
   
/* ===================================
    Card System - Reusable Utilities
    Extracted common patterns from components
====================================== */
   
/* ===================================
    1. Animated Corner Borders
    Used by: services, special-offers
    Impact: Reduces 60 lines of duplication
====================================== */
   
.card--animated-corners {
  position: relative;
}
   
.card--animated-corners::before,
    .card--animated-corners::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 10;
        border: 1px solid #D9B282;
        border-radius: 8px;
        transform: scale(0.6);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }
   
.card--animated-corners::before {
        transform-origin: left top;
        border-right: 0;
        border-bottom: 0;
    }
   
.card--animated-corners::after {
        transform-origin: right bottom;
        border-top: 0;
        border-left: 0;
    }
   
.card--animated-corners:hover::before,
    .card--animated-corners:hover::after,
    .card--animated-corners:focus-within::before,
    .card--animated-corners:focus-within::after {
        transform: scale(1);
        opacity: 1;
    }
   
/* ===================================
    2. Image Scale on Hover
    Used by: team cards
    Impact: Reduces 20 lines of duplication
====================================== */
   
.card__image--scalable {
  position: relative;
  overflow: hidden;
}
   
.card__image--scalable img {
  height: 100%;
  width: 100%;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
/* Apply scale effect to parent card hover */
   
.card:hover .card__image--scalable img,
.card:focus-within .card__image--scalable img {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ===================================
    3. Split Horizontal Layout
    Used by: blog posts, menu categories
    Impact: Reduces 40 lines of duplication
====================================== */
   
.card--split-horizontal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.card--split-horizontal .card__media {
  position: relative;
  order: 1;
  grid-column: span 12 / span 12;
  overflow: hidden;
}
   
@media (min-width: 768px) {
   
  .card--split-horizontal .card__media {
    grid-column: span 5 / span 5;
  }
}
   
@media (min-width: 1024px) {
   
  .card--split-horizontal .card__media {
    grid-column: span 6 / span 6;
  }
}
   
.card--split-horizontal .card__body {
  order: 2;
  grid-column: span 12 / span 12;
}
   
@media (min-width: 768px) {
   
  .card--split-horizontal .card__body {
    grid-column: span 7 / span 7;
  }
}
   
@media (min-width: 1024px) {
   
  .card--split-horizontal .card__body {
    grid-column: span 6 / span 6;
  }
}
   
/* Alternating layout for even items */
   
.card--split-horizontal:nth-child(even) .card__media {
  order: 1;
}
   
@media (min-width: 768px) {
   
  .card--split-horizontal:nth-child(even) .card__media {
    order: 2;
  }
}
   
.card--split-horizontal:nth-child(even) .card__body {
  order: 2;
}
   
@media (min-width: 768px) {
   
  .card--split-horizontal:nth-child(even) .card__body {
    order: 1;
  }
}
   
/* ===================================
    4. Base Card Structure (Optional)
    Foundation for future card unification
====================================== */
   
.card {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
   
.card__media {
  position: relative;
  overflow: hidden;
}
   
.card__media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
   
.card__body {
  display: flex;
  flex-direction: column;
}
   
.card__title {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
}
   
.card__subtitle {
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-style: italic;
}
   
.card__description {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.card__description p:last-of-type {
  margin-bottom: 0px;
}
   
.card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
   
/* ===================================
    5. Card Height Utilities
    Standardized responsive height scales
====================================== */
   
.card-h-sm {
  max-height: 13rem;
}
   
@media (min-width: 640px) {
   
  .card-h-sm {
    max-height: 16rem;
  }
}
   
.card-h-md {
  max-height: 16rem;
}
   
@media (min-width: 640px) {
   
  .card-h-md {
    max-height: 20rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-h-md {
    max-height: 24rem;
  }
}
   
.card-h-lg {
  max-height: 20rem;
}
   
@media (min-width: 640px) {
   
  .card-h-lg {
    max-height: 24rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-h-lg {
    max-height: 32rem;
  }
}
   
.card-h-auto {
  height: auto;
}
   
/* ===================================
    6. Shadow Utilities
    Unified shadow scale for consistency
====================================== */
   
/* Subtle shadow - resting state for cards */
   
.shadow-subtle {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Elevated shadow - hover/focus states */
   
.shadow-elevated {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Floating shadow - modals, lightbox, overlays */
   
.shadow-floating {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* ===================================
    7. Card Modifiers
    Common styling variations
====================================== */
   
/* Bordered card with hover effect */
   
.card--bordered {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.card--bordered:hover,
    .card--bordered:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Card with shadow */
   
.card--shadowed {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Rounded corners */
   
.card--rounded {
  border-radius: 0.5rem;
}
   
/* Overlay info on hover (team card style) */
   
.card--overlay .card__overlay {
  position: absolute;
  inset: 0px;
  z-index: 10;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.75;
  opacity: 0;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.card--overlay:hover .card__overlay,
    .card--overlay:focus-within .card__overlay {
  opacity: 1;
}
   
/* ===================================
    Usage Examples:

    <!-- Animated corners (services, special offers) -->
    <div class="card--animated-corners">
        Content here
    </div>

    <!-- Image scale hover (team cards) -->
    <div class="card">
        <div class="card__image--scalable">
            <img src="..." alt="...">
        </div>
    </div>

    <!-- Split horizontal (blog, menu) -->
    <div class="card--split-horizontal">
        <div class="card__media">...</div>
        <div class="card__body">...</div>
    </div>

    <!-- Combined modifiers -->
    <div class="card card--bordered card--rounded card--shadowed">
        <div class="card__media card__image--scalable">...</div>
        <div class="card__body">...</div>
    </div>
====================================== */
   
/*==================================================
    Overlay System
    Unified overlay utilities for backgrounds, images, and interactive elements
==================================================*/
   
/* ===================================
    Base Overlay
====================================== */
   
.overlay {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
    z-index: 1;
}
   
/* ===================================
    Color Variants
====================================== */
   
.overlay--dark {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.overlay--accent {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.overlay--black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
   
/* ===================================
    Opacity Variants
====================================== */
   
.overlay--light {
  --tw-bg-opacity: 0.4;
}
   
.overlay--medium {
  --tw-bg-opacity: 0.6;
}
   
.overlay--heavy {
  --tw-bg-opacity: 0.8;
}
   
.overlay--full {
  --tw-bg-opacity: 1;
}
   
/* ===================================
    Interactive Overlays (Reveal on Hover)
====================================== */
   
.overlay--reveal {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.overlay--reveal:hover,
*:hover > .overlay--reveal,
*:focus-within > .overlay--reveal {
  opacity: 1;
}
   
/* ===================================
    Content Positioning
====================================== */
   
.overlay--centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.overlay--centered-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
   
.overlay--bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
   
.overlay--top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
   
/* ===================================
    Z-index Variants
====================================== */
   
.overlay--z-0 {
    z-index: 0;
}
   
.overlay--z-10 {
    z-index: 10;
}
   
.overlay--z-20 {
    z-index: 20;
}
   
/* ===================================
    Special Effects
====================================== */
   
.overlay--gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
   
.overlay--gradient-top {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
   
/* ===================================
    Retrocompatibility Aliases
    (Will be deprecated in v3.0)
====================================== */
   
.overlayer {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
    background-color: rgb(5 6 8 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.8;
    z-index: 1;
}
   
.overlayer-hero {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
    background-color: rgb(5 6 8 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.4;
    z-index: 10;
    transform: scale(1.05);
}
   
/* ===================================
    Usage Examples:

    <!-- Hero Section -->
    <div class="hero">
        <div class="overlay overlay--dark overlay--light overlay--z-10"></div>
        <div class="hero__content">...</div>
    </div>

    <!-- Interactive Card Overlay -->
    <div class="card">
        <img src="..." alt="...">
        <div class="overlay overlay--accent overlay--heavy overlay--reveal overlay--centered-col">
            <h3>Card Title</h3>
            <p>Card description</p>
        </div>
    </div>

    <!-- CTA Section -->
    <section class="cta bg-parallax" style="background-image: url(...)">
        <div class="overlay overlay--dark overlay--medium"></div>
        <div class="cta__content">...</div>
    </section>

    <!-- Gradient Overlay -->
    <div class="image-container">
        <img src="..." alt="...">
        <div class="overlay overlay--gradient overlay--bottom">
            <p class="caption">Image caption</p>
        </div>
    </div>
====================================== */
   
/*==================================================
    Focus Ring Utilities
    Standardized focus states for accessibility (WCAG 2.1 Level AA)
==================================================*/
   
/* ===================================
    Base Focus Ring
    Use with @apply in component styles
====================================== */
   
/* ===================================
    Usage Examples:

    Apply in component CSS:
    .btn:focus-visible {
        @apply focus-ring;
    }

    .input:focus-visible {
        @apply focus-ring;
    }

    .input--dark:focus-visible {
        @apply focus-ring-dark;
    }

    .link:focus-visible {
        @apply focus-ring-compact;
    }
====================================== */
   
/*==================================================
    Accessibility Utilities
    WCAG 2.1 Level AA compliant utilities
==================================================*/
   
/* ===================================
    Screen Reader Only
    Visually hidden but accessible to screen readers
====================================== */
   
/* ===================================
    Skip Link
    Skip to main content for keyboard users
====================================== */
   
.skip-link {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  text-decoration-line: none;
}
   
.skip-link:not(:focus):not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
   
.skip-link:focus,.skip-link:focus-within {
        position: static;
        width: auto;
        height: auto;
        padding: inherit;
        margin: inherit;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
   
.skip-link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .skip-link:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Reduced Motion
    Respect user's motion preferences
====================================== */
   
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
   
/* ===================================
    High Contrast Mode Support
====================================== */
   
@media (prefers-contrast: more) {
    .btn {
    border-width: 2px;
  }

    .focus-ring,
    .focus-ring-dark,
    .focus-ring-light {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Live Regions
    For dynamic content announcements
====================================== */
   
.aria-live-polite {
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
.aria-live-assertive {
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* ===================================
    Usage Examples:

    Screen reader only text:
    <span class="sr-only">Opens in new window</span>

    Skip link (place after <body>):
    <a href="#main-content" class="skip-link">Skip to main content</a>

    Live region for announcements:
    <div class="aria-live-polite" aria-live="polite" aria-atomic="true">
        Slide 1 of 5
    </div>
====================================== */
   
/*==================================================
    Icon Decorator Utilities
    FontAwesome pseudo-element decorators for lists, links, and text

    Note: !important on font-family is required to override
    inherited fonts in pseudo-elements (::before, ::after)
==================================================*/
   
/* ===================================
    Base Decorator Styles
====================================== */
   
.icon-decorator-before::before,
.icon-decorator-after::after {
    font-family: "Font Awesome 6 Free" !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 900;
}
   
/* ===================================
    Marker Icons (::before)
====================================== */
   
.icon-decorator--marker::before {
    content: '\f7a5'; /* fa-diamond */ margin-right: 0.5rem; --tw-text-opacity: 1; color: rgb(217 178 130 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--dot::before {
    content: '\f111'; /* fa-circle */ margin-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(217 178 130 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--check::before {
    content: '\f00c'; /* fa-check */ margin-right: 0.5rem; --tw-text-opacity: 1; color: rgb(217 178 130 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--star::before {
    content: '\f005'; /* fa-star */ margin-right: 0.5rem; --tw-text-opacity: 1; color: rgb(217 178 130 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--arrow-right::before {
    content: '\f061'; /* fa-arrow-right */ margin-right: 0.5rem; --tw-text-opacity: 1; color: rgb(217 178 130 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
/* ===================================
    Chevron Icons (::after)
====================================== */
   
.icon-decorator--chevron::after {
    content: '\f105'; /* fa-chevron-right */ margin-left: auto; --tw-text-opacity: 1; color: rgb(94 97 101 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--chevron-down::after {
    content: '\f078'; /* fa-chevron-down */ margin-left: 0.5rem; --tw-text-opacity: 1; color: rgb(94 97 101 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
.icon-decorator--angle::after {
    content: '\f105'; /* fa-angle-right */ margin-left: auto; font-size: 1rem; line-height: 1.5rem; --tw-text-opacity: 1; color: rgb(94 97 101 / var(--tw-text-opacity));
    font-family: "Font Awesome 6 Free" !important;
}
   
/* ===================================
    Text Decorators
====================================== */
   
.icon-decorator--comma::after {
    content: ',';
    display: inline-flex;
    width: auto;
    --tw-text-opacity: 1;
    color: rgb(209 210 212 / var(--tw-text-opacity));
    font-family: inherit !important;
}
   
.icon-decorator--separator::after {
    content: '|';
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    display: inline-flex;
    --tw-text-opacity: 1;
    color: rgb(94 97 101 / var(--tw-text-opacity));
    font-family: inherit !important;
}
   
.icon-decorator--bullet::after {
    content: '•';
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    display: inline-flex;
    --tw-text-opacity: 1;
    color: rgb(94 97 101 / var(--tw-text-opacity));
    font-family: inherit !important;
}
   
/* ===================================
    Color Variants
====================================== */
   
.icon-decorator--accent::before,
.icon-decorator--accent::after {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.icon-decorator--muted::before,
.icon-decorator--muted::after {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.icon-decorator--light::before,
.icon-decorator--light::after {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* ===================================
    Size Variants
====================================== */
   
.icon-decorator--sm::before,
.icon-decorator--sm::after {
  font-size: 0.75rem;
  line-height: 1rem;
}
   
.icon-decorator--lg::before,
.icon-decorator--lg::after {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.icon-decorator--xl::before,
.icon-decorator--xl::after {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
/* ===================================
    Spacing Variants
====================================== */
   
.icon-decorator--spacing-sm::before {
  margin-right: 0.25rem;
}
   
.icon-decorator--spacing-lg::before {
  margin-right: 0.75rem;
}
   
.icon-decorator--spacing-sm::after {
  margin-left: 0.25rem;
}
   
.icon-decorator--spacing-lg::after {
  margin-left: 0.75rem;
}
   
/* ===================================
    Usage Examples:

    <!-- List with markers and chevrons -->
    <ul class="list-icon">
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Category Item</span>
        </li>
        <li class="icon-decorator--dot icon-decorator--chevron">
            <span>Another Item</span>
        </li>
    </ul>

    <!-- Comma-separated tags -->
    <a href="#" class="icon-decorator--comma">Tag 1</a>
    <a href="#" class="icon-decorator--comma">Tag 2</a>
    <a href="#" class="icon-decorator--comma">Tag 3</a>

    <!-- Checklist items -->
    <div class="icon-decorator--check">
        <span>Completed task</span>
    </div>

    <!-- Navigation links with chevrons -->
    <a href="#" class="icon-decorator--marker icon-decorator--chevron">
        <span>Read More</span>
    </a>

    <!-- Sidebar categories -->
    <a href="#" class="icon-decorator--marker icon-decorator--chevron icon-decorator--accent">
        <span>Category Name</span>
    </a>
====================================== */
   
/*==================================================
    Typography Utilities
    Decorative text styles and typography patterns
==================================================*/
   
/* ===================================
    Decorative Text (Sorts Mill Goudy Italic)
    Used for subtitles, captions, and decorative elements
====================================== */
   
.text-decorative {
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
}
   
/* Color Variants */
   
.text-decorative--accent {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.text-decorative--muted {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.text-decorative--light {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.text-decorative--dark {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/* Size Variants */
   
.text-decorative--sm {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
}
   
.text-decorative--md {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
}
   
@media (min-width: 640px) {
   
  .text-decorative--md {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1.5px;
  }
}
   
.text-decorative--lg {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
}
   
@media (min-width: 640px) {
   
  .text-decorative--lg {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.25px;
  }
}
   
.text-decorative--xl {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
}
   
@media (min-width: 640px) {
   
  .text-decorative--xl {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }
}
   
/* ===================================
    Heading Utilities
    Standardized heading styles with Barlow Condensed
====================================== */
   
.heading {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-weight: 400;
  text-transform: capitalize;
}
   
.heading--xl {
  font-size: 58px;
  line-height: 1.2;
}
   
.heading--lg {
  font-size: 48px;
  line-height: 1.2;
}
   
.heading--md {
  font-size: 38px;
  line-height: 1.2;
}
   
.heading--sm {
  font-size: 28px;
  line-height: 1.4;
}
   
.heading--xs {
  font-size: 22px;
  line-height: 1.4;
}
   
/* Heading with no bottom margin */
   
.heading--no-margin {
  margin-bottom: 0px;
}
   
/* Responsive heading sizes */
   
.heading--responsive-lg {
  font-size: 38px;
  line-height: 1.2;
}
   
@media (min-width: 640px) {
   
  .heading--responsive-lg {
    font-size: 48px;
    line-height: 1.2;
  }
}
   
@media (min-width: 768px) {
   
  .heading--responsive-lg {
    font-size: 58px;
    line-height: 1.2;
  }
}
   
.heading--responsive-md {
  font-size: 28px;
  line-height: 1.4;
}
   
@media (min-width: 640px) {
   
  .heading--responsive-md {
    font-size: 38px;
    line-height: 1.2;
  }
}
   
@media (min-width: 768px) {
   
  .heading--responsive-md {
    font-size: 48px;
    line-height: 1.2;
  }
}
   
.heading--responsive-sm {
  font-size: 22px;
  line-height: 1.4;
}
   
@media (min-width: 640px) {
   
  .heading--responsive-sm {
    font-size: 28px;
    line-height: 1.4;
  }
}
   
@media (min-width: 768px) {
   
  .heading--responsive-sm {
    font-size: 38px;
    line-height: 1.2;
  }
}
   
/* ===================================
    Text Case Utilities
====================================== */
   
.text-uppercase {
  text-transform: uppercase;
}
   
.text-capitalize {
  text-transform: capitalize;
}
   
.text-lowercase {
  text-transform: lowercase;
}
   
.text-normal-case {
  text-transform: none;
}
   
/* ===================================
    Font Weight Utilities
====================================== */
   
.text-thin {
  font-weight: 100;
}
   
.text-light {
  font-weight: 300;
}
   
.text-normal {
  font-weight: 400;
}
   
.text-medium {
  font-weight: 500;
}
   
.text-semibold {
  font-weight: 600;
}
   
.text-bold {
  font-weight: 700;
}
   
/* ===================================
    Letter Spacing Utilities
====================================== */
   
.text-tracking-tight {
    letter-spacing: -0.025em;
}
   
.text-tracking-normal {
    letter-spacing: 0;
}
   
.text-tracking-wide {
    letter-spacing: 0.025em;
}
   
.text-tracking-wider {
    letter-spacing: 0.05em;
}
   
/* ===================================
    Line Height Utilities
====================================== */
   
.text-leading-tight {
  line-height: 1.25;
}
   
.text-leading-normal {
  line-height: 1.5;
}
   
.text-leading-relaxed {
  line-height: 1.625;
}
   
.text-leading-loose {
  line-height: 2;
}
   
/* ===================================
    Paragraph Utilities
====================================== */
   
.text-lead-centered {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  font-size: 21px;
  letter-spacing: 0.5px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.text-body-primary {
  font-size: 18px;
  letter-spacing: 0.25px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.text-body-secondary {
  font-size: 16px;
  letter-spacing: 0.25px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Section Subtitle (Decorative) -->
    <p class="text-decorative text-decorative--accent text-decorative--md">
        Our Story
    </p>

    <!-- Blog Author -->
    <p class="text-decorative text-decorative--muted text-decorative--sm">
        By John Doe
    </p>

    <!-- Menu Description -->
    <p class="text-decorative text-decorative--light text-decorative--sm">
        Fresh ingredients, carefully prepared
    </p>

    <!-- Section Title -->
    <h2 class="heading heading--responsive-lg">
        Welcome to Our Restaurant
    </h2>

    <!-- Card Title -->
    <h3 class="heading heading--md heading--no-margin">
        Special Dish
    </h3>

    <!-- Event Title -->
    <h4 class="heading heading--sm">
        Live Music Night
    </h4>
====================================== */
   
/*==================================================
    Border Utilities
    Accent borders and decorative border patterns
==================================================*/
   
/* ===================================
    Border Accent Base
====================================== */
   
.border-accent {
  border-style: solid;
}
   
/* ===================================
    Directional Borders with Padding
====================================== */
   
.border-accent--left {
  border-left-width: 4px;
  padding-left: 1rem;
}
   
.border-accent--right {
  border-right-width: 4px;
  padding-right: 1rem;
}
   
.border-accent--top {
  border-top-width: 4px;
  padding-top: 1rem;
}
   
.border-accent--bottom {
  border-bottom-width: 1px;
  padding-bottom: 1rem;
}
   
/* ===================================
    Thickness Variants
====================================== */
   
.border-accent--thin {
    border-width: 1px;
}
   
.border-accent--medium {
    border-width: 2px;
}
   
.border-accent--thick {
    border-width: 4px;
}
   
/* Thin variants with direction */
   
.border-accent--left.border-accent--thin {
  border-left-width: 1px;
  padding-left: 1rem;
}
   
.border-accent--right.border-accent--thin {
  border-right-width: 1px;
  padding-right: 1rem;
}
   
.border-accent--top.border-accent--thin {
  border-top-width: 1px;
  padding-top: 1rem;
}
   
.border-accent--bottom.border-accent--thin {
  border-bottom-width: 1px;
  padding-bottom: 1rem;
}
   
/* ===================================
    Color Variants
====================================== */
   
.border-accent--primary {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.border-accent--secondary {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
}
   
.border-accent--tertiary {
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
}
   
.border-accent--dark {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
}
   
.border-accent--light {
  --tw-border-opacity: 1;
  border-color: rgb(181 183 185 / var(--tw-border-opacity));
}
   
/* ===================================
    Spacing Variants (Padding)
====================================== */
   
.border-accent--spacing-sm.border-accent--left {
  padding-left: 0.5rem;
}
   
.border-accent--spacing-sm.border-accent--right {
  padding-right: 0.5rem;
}
   
.border-accent--spacing-sm.border-accent--top {
  padding-top: 0.5rem;
}
   
.border-accent--spacing-sm.border-accent--bottom {
  padding-bottom: 0.5rem;
}
   
.border-accent--spacing-lg.border-accent--left {
  padding-left: 1.5rem;
}
   
.border-accent--spacing-lg.border-accent--right {
  padding-right: 1.5rem;
}
   
.border-accent--spacing-lg.border-accent--top {
  padding-top: 1.5rem;
}
   
.border-accent--spacing-lg.border-accent--bottom {
  padding-bottom: 1.5rem;
}
   
/* ===================================
    Horizontal Borders (Top & Bottom)
====================================== */
   
.border-accent--horizontal {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
   
.border-accent--horizontal.border-accent--primary {
  border-top-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.border-accent--horizontal.border-accent--secondary {
  border-top-color: rgb(139 142 145 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(139 142 145 / var(--tw-border-opacity));
}
   
/* ===================================
    Vertical Borders (Left & Right)
====================================== */
   
.border-accent--vertical {
  border-left-width: 1px;
  border-right-width: 1px;
  border-style: solid;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
.border-accent--vertical.border-accent--primary {
  border-left-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-right-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.border-accent--vertical.border-accent--secondary {
  border-left-color: rgb(139 142 145 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-right-color: rgb(139 142 145 / var(--tw-border-opacity));
}
   
/* ===================================
    Full Border
====================================== */
   
.border-accent--full {
  border-width: 1px;
  border-style: solid;
  padding: 1rem;
}
   
/* ===================================
    Usage Examples:

    <!-- Blog Excerpt with Left Border -->
    <div class="border-accent border-accent--left border-accent--secondary">
        <p>Excerpt text with decorative left border...</p>
    </div>

    <!-- Comment Text with Left Border -->
    <p class="border-accent border-accent--left border-accent--secondary">
        Comment content with accent border
    </p>

    <!-- Menu Dish Separator (Bottom Border) -->
    <div class="border-accent border-accent--bottom border-accent--tertiary border-accent--thin">
        <h4>Dish Name</h4>
        <p class="price">$24.99</p>
    </div>

    <!-- Title with Horizontal Borders -->
    <h3 class="border-accent--horizontal border-accent--primary border-accent--thick">
        Special Event
    </h3>

    <!-- Highlighted Section with Full Border -->
    <div class="border-accent--full border-accent--primary">
        <p>Important announcement</p>
    </div>

    <!-- Thin Left Border with Small Spacing -->
    <blockquote class="border-accent border-accent--left border-accent--thin border-accent--primary border-accent--spacing-sm">
        "Quote text here"
    </blockquote>
====================================== */
   
/*==================================================
    Image Utilities
    Object-fit, positioning, and image treatment patterns
==================================================*/
   
/* ===================================
    Image Cover (Object Fit)
====================================== */
   
.img-cover {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
/* Position Variants */
   
.img-cover--top {
  -o-object-position: top;
     object-position: top;
}
   
.img-cover--bottom {
  -o-object-position: bottom;
     object-position: bottom;
}
   
.img-cover--left {
  -o-object-position: left;
     object-position: left;
}
   
.img-cover--right {
  -o-object-position: right;
     object-position: right;
}
   
.img-cover--left-top {
  -o-object-position: left top;
     object-position: left top;
}
   
.img-cover--right-top {
  -o-object-position: right top;
     object-position: right top;
}
   
.img-cover--left-bottom {
  -o-object-position: left bottom;
     object-position: left bottom;
}
   
.img-cover--right-bottom {
  -o-object-position: right bottom;
     object-position: right bottom;
}
   
/* ===================================
    Image Contain
====================================== */
   
.img-contain {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
   
.img-contain--top {
  -o-object-position: top;
     object-position: top;
}
   
.img-contain--bottom {
  -o-object-position: bottom;
     object-position: bottom;
}
   
/* ===================================
    Animated Images (Transitions)
====================================== */
   
.img-cover--animated,
.img-contain--animated {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
/* ===================================
    Image Scale on Hover
    Note: Already exists in _card.css as .card__image--scalable
    Use these for standalone images
====================================== */
   
.img-zoom {
  position: relative;
  overflow: hidden;
}
   
.img-zoom img {
  height: 100%;
  width: 100%;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.img-zoom:hover img,
    .img-zoom:focus-within img {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.img-zoom--subtle img {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.img-zoom--subtle:hover img,
    .img-zoom--subtle:focus-within img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.img-zoom--intense img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.img-zoom--intense:hover img,
    .img-zoom--intense:focus-within img {
  --tw-scale-x: 1.15;
  --tw-scale-y: 1.15;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ===================================
    Image with Overlay
    Combines with overlay utilities
====================================== */
   
.img-overlay-wrapper {
  position: relative;
  overflow: hidden;

    /* Use with .overlay utilities from _overlay.css */
}
   
.img-overlay-wrapper img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
   
/* ===================================
    Aspect Ratio Containers
====================================== */
   
.img-aspect-square {
  aspect-ratio: 1 / 1;
}
   
.img-aspect-video {
  aspect-ratio: 16 / 9;
}
   
.img-aspect-portrait {
    aspect-ratio: 3/4;
}
   
.img-aspect-landscape {
    aspect-ratio: 4/3;
}
   
/* ===================================
    Rounded Images
====================================== */
   
.img-rounded {
  border-radius: 0.5rem;
}
   
.img-rounded--sm {
  border-radius: 0.25rem;
}
   
.img-rounded--lg {
  border-radius: 0.75rem;
}
   
.img-rounded--full {
  border-radius: 9999px;
}
   
/* ===================================
    Image Filters
====================================== */
   
.img-grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
.img-grayscale:hover {
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
.img-brightness-low {
  --tw-brightness: brightness(.75);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
.img-brightness-low:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
/* ===================================
    Image Aspect Portrait Wrapper
    Combines aspect ratio + overflow + rounded
====================================== */
   
.img-aspect-portrait-wrapper {
  overflow: hidden;
  border-radius: 0.5rem;
    aspect-ratio: 4/5;
}
   
/* ===================================
    Usage Examples:

    <!-- Standard cover image -->
    <img src="..." class="img-cover" alt="...">

    <!-- Top-aligned portrait (team cards) -->
    <img src="team.jpg" class="img-cover img-cover--top" alt="Team member">

    <!-- Animated image -->
    <img src="..." class="img-cover img-cover--animated" alt="...">

    <!-- Zoom on hover -->
    <div class="img-zoom">
        <img src="..." alt="...">
    </div>

    <!-- Image with overlay -->
    <div class="img-overlay-wrapper">
        <img src="..." alt="...">
        <div class="overlay overlay--dark overlay--medium overlay--reveal overlay--centered">
            <h3>Title</h3>
        </div>
    </div>

    <!-- Square aspect ratio -->
    <div class="img-aspect-square">
        <img src="..." class="img-cover" alt="...">
    </div>

    <!-- Rounded image with zoom -->
    <div class="img-zoom img-rounded">
        <img src="..." alt="...">
    </div>

    <!-- Grayscale on load, color on hover -->
    <img src="..." class="img-cover img-grayscale" alt="...">
====================================== */
   
/*==================================================
    Flex Layout Utilities
    Common flex patterns to reduce repetition
==================================================*/
   
/* ===================================
    Flex Center (Row)
====================================== */
   
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.flex-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
   
/* ===================================
    Flex Start
====================================== */
   
.flex-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.flex-start-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
/* ===================================
    Flex End
====================================== */
   
.flex-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
   
.flex-end-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
   
/* ===================================
    Flex Between (Space Between)
====================================== */
   
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
   
.flex-between-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
   
/* ===================================
    Flex Around (Space Around)
====================================== */
   
.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
   
.flex-around-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
   
/* ===================================
    Flex Evenly (Space Evenly)
====================================== */
   
.flex-evenly {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
   
.flex-evenly-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
   
/* ===================================
    Mixed Alignments
====================================== */
   
.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
   
.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
   
.flex-start-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
   
.flex-end-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
   
.flex-start-between {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
   
.flex-end-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
   
/* ===================================
    Gap Utilities (Common Sizes)
====================================== */
   
.flex-gap-xs {
  gap: 0.25rem;
}
   
.flex-gap-sm {
  gap: 0.5rem;
}
   
.flex-gap {
  gap: 1rem;
}
   
.flex-gap-md {
  gap: 1.5rem;
}
   
.flex-gap-lg {
  gap: 2rem;
}
   
.flex-gap-xl {
  gap: 3rem;
}
   
/* ===================================
    Flex Wrap
    Note: Use Tailwind's built-in utilities directly:
    - flex-wrap
    - flex-nowrap
    - flex-wrap-reverse
====================================== */
   
/* ===================================
    Full Width/Height
====================================== */
   
.flex-full {
  height: 100%;
  width: 100%;
}
   
.flex-w-full {
  width: 100%;
}
   
.flex-h-full {
  height: 100%;
}
   
/* ===================================
    Usage Examples:

    <!-- Centered content (column) -->
    <div class="flex-center-col flex-gap-md">
        <h2>Title</h2>
        <p>Content</p>
    </div>

    <!-- Space between (header layout) -->
    <div class="flex-between w-full">
        <span>Logo</span>
        <span>Menu</span>
    </div>

    <!-- Centered with gap -->
    <div class="flex-center flex-gap">
        <button>Cancel</button>
        <button>Confirm</button>
    </div>

    <!-- Start aligned column -->
    <div class="flex-start-col flex-gap-sm">
        <label>Name</label>
        <input type="text">
    </div>

    <!-- Centered vertically, start horizontally -->
    <div class="flex-center-start flex-gap">
        <i class="icon"></i>
        <span>Text</span>
    </div>

    <!-- Full width flex container -->
    <div class="flex-between flex-w-full">
        <div>Left</div>
        <div>Right</div>
    </div>

    <!-- Wrapped flex items -->
    <div class="flex-center flex-wrap flex-gap">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
====================================== */
   
/*==================================================
    Grid Utilities
    Responsive grid patterns
==================================================*/
   
/* ===================================
    Two Column Grid
====================================== */
   
.grid-two-cols {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .grid-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .grid-two-cols {
    gap: 3rem;
  }
}
   
.grid-two-cols--items-center {
  align-items: center;
}
   
.grid-two-cols--gap-compact {
  gap: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .grid-two-cols--gap-compact {
    gap: 2rem;
  }
}
   
/* ===================================
    Three Column Grid
====================================== */
   
.grid-three-cols {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .grid-three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .grid-three-cols {
    gap: 3rem;
  }
}
   
.grid-three-cols--gap-compact {
  gap: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .grid-three-cols--gap-compact {
    gap: 2rem;
  }
}
   
/* ===================================
    Usage Examples:

    <!-- Two Column Grid -->
    <div class="grid-two-cols">
        <div>Column 1</div>
        <div>Column 2</div>
    </div>

    <!-- Two Column Grid (centered items) -->
    <div class="grid-two-cols grid-two-cols--items-center">
        <div>Column 1</div>
        <div>Column 2</div>
    </div>

    <!-- Three Column Grid -->
    <div class="grid-three-cols">
        <div>Column 1</div>
        <div>Column 2</div>
        <div>Column 3</div>
    </div>
====================================== */
   
/*==================================================
    List Icon Component
    Styled lists with icon markers and decorators
==================================================*/
   
/* ===================================
    Base List Icon
====================================== */
   
.list-icon {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
   
.list-icon a, .list-icon li {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.list-icon a:hover, .list-icon li:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ===================================
    Size Variants
====================================== */
   
.list-icon--compact {
  gap: 0.25rem;
}
   
.list-icon--compact a, .list-icon--compact li {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.list-icon--large {
  gap: 1rem;
}
   
.list-icon--large a, .list-icon--large li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
   
/* ===================================
    Style Variants
====================================== */
   
.list-icon--bordered a, .list-icon--bordered li {
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
}
   
.list-icon--bordered a:last-child, .list-icon--bordered li:last-child {
  border-bottom-width: 0px;
}
   
.list-icon--spaced {
  gap: 0.75rem;
}
   
.list-icon--spaced a, .list-icon--spaced li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
   
/* ===================================
    Color Variants
====================================== */
   
.list-icon--muted a, .list-icon--muted li {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.list-icon--muted a:hover, .list-icon--muted li:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.list-icon--light a, .list-icon--light li {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.list-icon--light a:hover, .list-icon--light li:hover {
  --tw-text-opacity: 1;
  color: rgb(225 193 155 / var(--tw-text-opacity));
}
   
/* ===================================
    With Count/Badge
====================================== */
   
.list-icon__count {
  margin-left: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
/* ===================================
    Nested Lists
====================================== */
   
.list-icon--nested .list-icon {
  margin-top: 0.5rem;
  gap: 0.25rem;
  padding-left: 1rem;
}
   
.list-icon--nested .list-icon a, .list-icon--nested .list-icon li {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Basic list with icons -->
    <ul class="list-icon">
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Category Name</span>
        </li>
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Another Category</span>
        </li>
    </ul>

    <!-- List with counts -->
    <ul class="list-icon">
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Category Name</span>
            <span class="list-icon__count">12</span>
        </li>
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Another Category</span>
            <span class="list-icon__count">8</span>
        </li>
    </ul>

    <!-- Compact list with borders -->
    <ul class="list-icon list-icon--compact list-icon--bordered">
        <li class="icon-decorator--dot">
            <span>Item 1</span>
        </li>
        <li class="icon-decorator--dot">
            <span>Item 2</span>
        </li>
    </ul>

    <!-- Recent posts list -->
    <ul class="list-icon list-icon--spaced">
        <li class="icon-decorator--marker">
            <a href="#">
                <span>Blog Post Title</span>
            </a>
        </li>
    </ul>

    <!-- Tags list -->
    <div class="list-icon list-icon--compact">
        <a href="#" class="icon-decorator--marker icon-decorator--chevron">
            <span>Tag Name</span>
            <span class="list-icon__count">5</span>
        </a>
    </div>

    <!-- Nested categories -->
    <ul class="list-icon list-icon--nested">
        <li class="icon-decorator--marker icon-decorator--chevron">
            <span>Parent Category</span>
            <ul class="list-icon">
                <li class="icon-decorator--dot">
                    <span>Sub Category</span>
                </li>
            </ul>
        </li>
    </ul>
====================================== */
   
/*==================================================
    Icon with Text Component
    Layout pattern for icons paired with text
==================================================*/
   
/* ===================================
    Base Icon Text
====================================== */
   
.icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}
   
.icon-text i, .icon-text .icon, .icon-text svg {
  font-size: 1rem;
  line-height: 1.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
/* ===================================
    Alignment Variants
====================================== */
   
.icon-text--center {
  justify-content: center;
}
   
.icon-text--end {
  justify-content: flex-end;
}
   
.icon-text--between {
  justify-content: space-between;
}
   
/* ===================================
    Gap Variants
====================================== */
   
.icon-text--gap-xs {
  gap: 0.25rem;
}
   
.icon-text--gap-sm {
  gap: 0.5rem;
}
   
.icon-text--gap-md {
  gap: 0.75rem;
}
   
.icon-text--gap-lg {
  gap: 1rem;
}
   
.icon-text--gap-xl {
  gap: 1.5rem;
}
   
/* ===================================
    Icon Position (Reverse)
====================================== */
   
.icon-text--reverse {
  flex-direction: row-reverse;
}
   
/* ===================================
    Vertical Layout
====================================== */
   
.icon-text--vertical {
  flex-direction: column;
}
   
.icon-text--vertical-reverse {
  flex-direction: column-reverse;
}
   
/* ===================================
    Icon Style Variants
====================================== */
   
.icon-text--icon-accent i, .icon-text--icon-accent .icon, .icon-text--icon-accent svg {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.icon-text--icon-accent:hover i,
    .icon-text--icon-accent:hover .icon,
    .icon-text--icon-accent:hover svg {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.icon-text--icon-muted i, .icon-text--icon-muted .icon, .icon-text--icon-muted svg {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.icon-text--icon-lg i, .icon-text--icon-lg .icon, .icon-text--icon-lg svg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
.icon-text--icon-xl i, .icon-text--icon-xl .icon, .icon-text--icon-xl svg {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   
.icon-text--icon-2xl i, .icon-text--icon-2xl .icon, .icon-text--icon-2xl svg {
  font-size: 1.5rem;
  line-height: 2rem;
}
   
/* ===================================
    Full Width
====================================== */
   
.icon-text--full {
  width: 100%;
}
   
/* ===================================
    With Background/Badge
====================================== */
   
.icon-text--badge i, .icon-text--badge .icon, .icon-text--badge svg {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.icon-text--badge-outlined i, .icon-text--badge-outlined .icon, .icon-text--badge-outlined svg {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Basic icon with text -->
    <a href="#" class="icon-text">
        <i class="fab fa-facebook"></i>
        <span>Facebook</span>
    </a>

    <!-- Centered with accent icon -->
    <div class="icon-text icon-text--center icon-text--icon-accent">
        <i class="fas fa-phone"></i>
        <span>Call Us: 123-456-7890</span>
    </div>

    <!-- Large icon, small gap -->
    <div class="icon-text icon-text--gap-sm icon-text--icon-xl">
        <i class="fas fa-map-marker-alt"></i>
        <span>123 Main Street</span>
    </div>

    <!-- Icon after text (reversed) -->
    <a href="#" class="icon-text icon-text--reverse">
        <i class="fas fa-arrow-right"></i>
        <span>Read More</span>
    </a>

    <!-- Vertical layout -->
    <div class="icon-text icon-text--vertical icon-text--center">
        <i class="fas fa-heart icon-text--icon-2xl"></i>
        <span>Favorites</span>
    </div>

    <!-- Full width with space between -->
    <div class="icon-text icon-text--full icon-text--between">
        <div class="icon-text">
            <i class="fas fa-envelope"></i>
            <span>Email</span>
        </div>
        <span class="badge">5</span>
    </div>

    <!-- With badge style icon -->
    <div class="icon-text icon-text--badge">
        <i class="fas fa-check"></i>
        <span>Completed</span>
    </div>

    <!-- Social media list -->
    <div class="flex gap-4">
        <a href="#" class="icon-text icon-text--icon-accent icon-text--gap-sm">
            <i class="fab fa-facebook"></i>
            <span>Facebook</span>
        </a>
        <a href="#" class="icon-text icon-text--icon-accent icon-text--gap-sm">
            <i class="fab fa-twitter"></i>
            <span>Twitter</span>
        </a>
    </div>

    <!-- Team member info -->
    <div class="icon-text icon-text--icon-muted">
        <i class="fas fa-briefcase"></i>
        <span>Chef</span>
    </div>
====================================== */
   
/*==================================================
    Feature Blocks
    Icon-led content blocks for features and highlights
==================================================*/
   
/* ===================================
    Feature Icon Block
    Use for: Feature listings, service highlights
====================================== */
   
.feature-icon-block {
  text-align: center;
}
   
@media (min-width: 768px) {
   
  .feature-icon-block {
    text-align: left;
  }
}
   
.feature-icon-block__icon {
  margin-bottom: 1rem;
  display: inline-block;
  font-size: 2.25rem;
  line-height: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.feature-icon-block__title {
  margin-bottom: 0.75rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px !important;
  line-height: 1.4 !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.feature-icon-block__description {
  font-size: 16px;
  letter-spacing: 0.25px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ===================================
    Achievement Badge
    Use for: Awards, certifications, highlights
====================================== */
   
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
   
.achievement-badge i, .achievement-badge .icon, .achievement-badge svg {
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.achievement-badge span, .achievement-badge .text {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/* ===================================
    Philosophy Point
    Use for: Value propositions, philosophy lists
====================================== */
   
.philosophy-point {
  display: flex;
  gap: 1rem;
}
   
.philosophy-point__icon-wrapper {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.philosophy-point__icon-wrapper i, .philosophy-point__icon-wrapper .icon, .philosophy-point__icon-wrapper svg {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.philosophy-point__content {
  flex: 1 1 0%;
}
   
.philosophy-point__title {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.philosophy-point__description {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Feature Icon Block -->
    <div class="feature-icon-block">
        <div class="feature-icon-block__icon">
            <i class="fa-solid fa-users" aria-hidden="true"></i>
        </div>
        <h3 class="feature-icon-block__title">Intimate Setting</h3>
        <p class="feature-icon-block__description">Limited to eight guests per evening.</p>
    </div>

    <!-- Achievement Badge -->
    <div class="achievement-badge">
        <i class="fa-solid fa-star" aria-hidden="true"></i>
        <span>Two Michelin Stars</span>
    </div>

    <!-- Philosophy Point -->
    <div class="philosophy-point">
        <div class="philosophy-point__icon-wrapper">
            <i class="fa-solid fa-seedling" aria-hidden="true"></i>
        </div>
        <div class="philosophy-point__content">
            <h4 class="philosophy-point__title">Seasonality First</h4>
            <p class="philosophy-point__description">The menu evolves with nature's rhythm.</p>
        </div>
    </div>
====================================== */
   
/*==================================================
    Title Utilities
    Title styling patterns and decorative borders
==================================================*/
   
/* ===================================
    Title with Horizontal Borders
====================================== */
   
.title-bordered {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
}
   
/* Thickness Variants */
   
.title-bordered--thin {
  border-top-width: 1px;
  border-bottom-width: 1px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
   
.title-bordered--thick {
  border-top-width: 2px;
  border-bottom-width: 2px;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}
   
/* Spacing Variants */
   
.title-bordered--compact {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
   
.title-bordered--spacious {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
/* Color Variants */
   
.title-bordered--primary {
  border-top-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.title-bordered--secondary {
  border-top-color: rgb(139 142 145 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(139 142 145 / var(--tw-border-opacity));
}
   
.title-bordered--tertiary {
  border-top-color: rgb(94 97 101 / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  border-bottom-color: rgb(94 97 101 / var(--tw-border-opacity));
}
   
/* ===================================
    Title with Top Border Only
====================================== */
   
.title-border-top {
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-top: 1rem;
}
   
.title-border-top--thick {
  border-top-width: 2px;
  padding-top: 1.25rem;
}
   
/* ===================================
    Title with Bottom Border Only
====================================== */
   
.title-border-bottom {
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-bottom: 1rem;
}
   
.title-border-bottom--thick {
  border-bottom-width: 2px;
  padding-bottom: 1.25rem;
}
   
/* ===================================
    Title with Left Accent
====================================== */
   
.title-accent-left {
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 1rem;
}
   
.title-accent-left--thick {
  border-left-width: 8px;
  padding-left: 1.5rem;
}
   
/* ===================================
    Title with Underline Effect
====================================== */
   
.title-underline {
  position: relative;
  padding-bottom: 1rem;
}
   
.title-underline::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 1px;
        width: 4rem;
        --tw-bg-opacity: 1;
        background-color: rgb(217 178 130 / var(--tw-bg-opacity));
    }
   
.title-underline--center::after {
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.title-underline--full::after {
  width: 100%;
}
   
.title-underline--thick::after {
  height: 0.25rem;
}
   
/* ===================================
    Title with Background
====================================== */
   
.title-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
   
.title-bg--accent {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.title-bg--bordered {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Event title with horizontal borders -->
    <h3 class="title-bordered">
        Special Event
    </h3>

    <!-- Location title with thick borders -->
    <h4 class="title-bordered title-bordered--thick">
        Our Locations
    </h4>

    <!-- Compact bordered title -->
    <h5 class="title-bordered title-bordered--compact title-bordered--secondary">
        Opening Hours
    </h5>

    <!-- Title with bottom border only -->
    <h3 class="title-border-bottom">
        Menu Categories
    </h3>

    <!-- Title with left accent -->
    <h2 class="title-accent-left heading heading--lg">
        About Us
    </h2>

    <!-- Title with centered underline -->
    <h2 class="title-underline title-underline--center heading heading--responsive-lg">
        Our Services
    </h2>

    <!-- Title with full-width thick underline -->
    <h3 class="title-underline title-underline--full title-underline--thick">
        Featured Dishes
    </h3>

    <!-- Title with background -->
    <h4 class="title-bg">
        Newsletter
    </h4>

    <!-- Title with accent background -->
    <h3 class="title-bg title-bg--accent">
        Special Offer
    </h3>

    <!-- Combined with heading utilities -->
    <h2 class="heading heading--responsive-lg title-bordered title-bordered--thick">
        Welcome to Beef Restaurant
    </h2>

    <!-- Combined with typography utilities -->
    <h3 class="heading heading--md title-accent-left">
        Our Story
    </h3>
    <p class="text-decorative text-decorative--accent text-decorative--md">
        Since 1995
    </p>
====================================== */
   
/*==================================================
    Link Utilities
    Animated and styled link patterns
==================================================*/
   
/* ===================================
    Animated Underline Link
====================================== */
   
.link-underline-animate {
  position: relative;
  display: inline-block;
}
   
.link-underline-animate::before,
    .link-underline-animate::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: block;
        height: 1px;
        width: 0px;
    }
   
.link-underline-animate::before {
        transition: width 0s ease, background 0.4s ease;
    }
   
.link-underline-animate::after {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
        transition: width 0.4s ease;
}
   
.link-underline-animate:hover::before, .link-underline-animate:focus-visible::before {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
            transition: width 0.4s ease;
}
   
.link-underline-animate:hover::after, .link-underline-animate:focus-visible::after {
  width: 100%;
            background: transparent;
            transition: all 0s ease;
}
   
.link-underline-animate:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-underline-animate:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* Thickness Variants */
   
.link-underline-animate--thin::before,
    .link-underline-animate--thin::after {
  height: 1px;
}
   
.link-underline-animate--thick::before,
    .link-underline-animate--thick::after {
        height: 2px;
    }
   
.link-underline-animate--extra-thick::before,
    .link-underline-animate--extra-thick::after {
        height: 3px;
    }
   
/* ===================================
    Simple Underline (No Animation)
====================================== */
   
.link-underline {
  text-decoration-line: underline;
  text-decoration-color: #D9B282;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.link-underline:hover,
    .link-underline:focus-visible {
  text-decoration-color: #AE8E68;
}
   
.link-underline:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-underline:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.link-underline--thin {
  text-decoration-thickness: 1px;
}
   
.link-underline--thick {
  text-decoration-thickness: 2px;
}
   
/* ===================================
    Underline on Hover Only
====================================== */
   
.link-hover-underline {
  text-decoration-line: none;
}
   
.link-hover-underline:hover,
    .link-hover-underline:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: #D9B282;
  text-underline-offset: 2px;
}
   
.link-hover-underline:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-hover-underline:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Arrow Link (Text with Arrow)
====================================== */
   
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.link-arrow::after {
        content: '\f061'; /* fa-arrow-right */
        font-family: "Font Awesome 6 Free" !important;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 900;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
   
.link-arrow:hover::after,
    .link-arrow:focus-visible::after {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.link-arrow:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-arrow:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.link-arrow--left::before {
        content: '\f060'; /* fa-arrow-left */
        font-family: "Font Awesome 6 Free" !important;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 900;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
   
.link-arrow--left::after {
        content: none;
    }
   
.link-arrow--left:hover::before,
    .link-arrow--left:focus-visible::before {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ===================================
    Link with Icon
====================================== */
   
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
   
.link-icon i, .link-icon .icon {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.link-icon:hover i,
    .link-icon:hover .icon,
    .link-icon:focus-visible i,
    .link-icon:focus-visible .icon {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.link-icon:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-icon:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Link Button Style
====================================== */
   
.link-button {
  display: inline-block;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.link-button:hover,
    .link-button:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.link-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-button:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.link-button--solid {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.link-button--solid:hover,
    .link-button--solid:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.link-button--solid:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-button--solid:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Link Color Variants
====================================== */
   
.link-accent {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.link-accent:hover,
    .link-accent:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.link-accent:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-accent:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.link-muted {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.link-muted:hover,
    .link-muted:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.link-muted:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-muted:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.link-light {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.link-light:hover,
    .link-light:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.link-light:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .link-light:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Usage Examples:

    <!-- Animated underline link -->
    <a href="#" class="link-underline-animate">
        Hover for animation
    </a>

    <!-- Thick animated underline -->
    <a href="#" class="link-underline-animate link-underline-animate--thick">
        Bold underline
    </a>

    <!-- Simple underline -->
    <a href="#" class="link-underline">
        Simple underline link
    </a>

    <!-- Underline on hover only -->
    <a href="#" class="link-hover-underline">
        Hover to underline
    </a>

    <!-- Link with arrow -->
    <a href="#" class="link-arrow link-accent">
        Read More
    </a>

    <!-- Link with left arrow -->
    <a href="#" class="link-arrow link-arrow--left link-accent">
        Go Back
    </a>

    <!-- Link with icon -->
    <a href="#" class="link-icon link-accent">
        <i class="fas fa-download"></i>
        <span>Download Menu</span>
    </a>

    <!-- Link button style -->
    <a href="#" class="link-button">
        View Menu
    </a>

    <!-- Solid link button -->
    <a href="#" class="link-button link-button--solid">
        Reserve Now
    </a>

    <!-- Muted link with hover -->
    <a href="#" class="link-muted">
        Privacy Policy
    </a>

    <!-- Combined: Arrow link with animated underline -->
    <a href="#" class="link-arrow link-underline-animate link-accent">
        Explore Our Services
    </a>

    <!-- Navigation link -->
    <a href="#" class="link-accent link-hover-underline">
        About Us
    </a>
====================================== */
   
/*==================================================
    Background Utilities
    Background images, parallax effects, and patterns
==================================================*/
   
/* ===================================
    Parallax Background
    Fixed background with parallax effect
====================================== */
   
.bg-parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
.bg-parallax {
        background-attachment: fixed
}
    }
   
/* Position Variants */
   
@media (min-width: 768px) {
   
.bg-parallax--top {
        background-position: center 0%
}
   
.bg-parallax--bottom {
        background-position: center 100%
}
   
.bg-parallax--left {
        background-position: left center
}
   
.bg-parallax--right {
        background-position: right center
}
    }
   
/* ===================================
    Fixed Background (No Parallax)
====================================== */
   
.bg-fixed {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    background-attachment: fixed;
}
   
.bg-fixed--top {
    background-position: center 0%;
}
   
.bg-fixed--bottom {
    background-position: center 100%;
}
   
/* ===================================
    Background Cover & Contain
    Note: Use Tailwind's built-in utilities directly:
    - bg-cover (for object-fit: cover)
    - bg-contain (for object-fit: contain)
    - bg-center, bg-top, bg-bottom (for positioning)
    - bg-no-repeat, bg-repeat (for repeat behavior)

    Combine as needed:
    - bg-cover bg-center bg-no-repeat
    - bg-contain bg-top bg-no-repeat
====================================== */
   
/* ===================================
    Background Patterns
====================================== */
   
.bg-pattern {
  background-repeat: repeat;
}
   
.bg-pattern--x {
  background-repeat: repeat-x;
}
   
.bg-pattern--y {
  background-repeat: repeat-y;
}
   
/* ===================================
    Background with Overlay Ready
    Combine with .overlay utilities
====================================== */
   
.bg-with-overlay {
  position: relative;
  overflow: hidden;
}
   
/* ===================================
    Usage Examples:

    <!-- Hero section with parallax -->
    <section class="bg-parallax" style="background-image: url('/img/hero.jpg')">
        <div class="overlay overlay--dark overlay--medium overlay--z-10"></div>
        <div class="hero__content">...</div>
    </section>

    <!-- CTA with parallax (bottom positioned) -->
    <section class="bg-parallax bg-parallax--bottom" style="background-image: url('/img/cta.jpg')">
        <div class="overlay overlay--dark overlay--heavy"></div>
        <div class="cta__content">...</div>
    </section>

    <!-- Testimonials with fixed background -->
    <section class="bg-fixed" style="background-image: url('/img/testimonials.jpg')">
        <div class="overlay overlay--dark overlay--light"></div>
        <div class="testimonials__content">...</div>
    </section>

    <!-- Menu section with parallax -->
    <section class="bg-parallax bg-with-overlay" style="background-image: url('/img/menu-bg.jpg')">
        <div class="overlay overlay--dark overlay--medium"></div>
        <div class="menu__content">...</div>
    </section>

    <!-- Standard background cover -->
    <div class="bg-cover" style="background-image: url('/img/about.jpg')">
        <div class="content">...</div>
    </div>

    <!-- Background pattern (repeating) -->
    <div class="bg-pattern" style="background-image: url('/img/pattern.png')">
        <div class="content">...</div>
    </div>
====================================== */
   
/*==================================================
    Menu Item Component
    Standardized menu dish/item display
    Consolidates .dish patterns from menu blocks
==================================================*/
   
/* ===================================
    Base Menu Item
====================================== */
   
.menu-item {
  margin-bottom: 1.5rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.menu-item__content {
  margin-bottom: 0.75rem;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding-bottom: 0.75rem;
}
   
.menu-item__title {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: capitalize;
}
   
.menu-item__price {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.menu-item__description {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
}
   
/* ===================================
    Layout Variants
====================================== */
   
.menu-item--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
   
.menu-item--horizontal .menu-item__content {
  margin-bottom: 0px;
  flex: 1 1 0%;
  border-bottom-width: 0px;
  padding-bottom: 0px;
}
   
.menu-item--with-image {
  flex-direction: row;
  gap: 1rem;
}
   
.menu-item--with-image .menu-item__image {
  height: 5rem;
  width: 5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
}
   
.menu-item--with-image .menu-item__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.menu-item--with-image .menu-item__details {
  flex: 1 1 0%;
}
   
/* ===================================
    Style Variants
====================================== */
   
.menu-item--bordered {
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding: 1rem;
}
   
.menu-item--bordered .menu-item__content {
  border-bottom-width: 0px;
}
   
.menu-item--compact {
  margin-bottom: 0.5rem;
}
   
.menu-item--compact .menu-item__content {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}
   
.menu-item--compact .menu-item__title {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.menu-item--compact .menu-item__price {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.menu-item--spacious {
  margin-bottom: 1.5rem;
}
   
.menu-item--spacious .menu-item__content {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
}
   
/* ===================================
    Price Alignment Variants
====================================== */
   
.menu-item--price-dots .menu-item__content {
  position: relative;
}
   
.menu-item--price-dots .menu-item__content::after {
            content: '';
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            flex: 1 1 0%;
            border-bottom-width: 1px;
            border-style: dotted;
            --tw-border-opacity: 1;
            border-color: rgb(94 97 101 / var(--tw-border-opacity));
        }
   
.menu-item--price-dots .menu-item__title,
    .menu-item--price-dots .menu-item__price {
  flex-shrink: 0;
}
   
/* ===================================
    Hover & Focus Effects
====================================== */
   
.menu-item--hoverable {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.menu-item--hoverable:hover .menu-item__title, .menu-item--hoverable:focus-within .menu-item__title {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.menu-item--hoverable:hover .menu-item__price, .menu-item--hoverable:focus-within .menu-item__price {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.menu-item--hoverable:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .menu-item--hoverable:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* ===================================
    Badge/Label Support
====================================== */
   
.menu-item__badge {
  margin-left: 0.5rem;
  display: inline-block;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.menu-item__badge--new {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
   
.menu-item__badge--hot {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.menu-item__badge--vegetarian {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
/* ===================================
    Retrocompatibility
    Support for existing .dish class
====================================== */
   
.dish {
  margin-bottom: 1.5rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
@media print {
    .dish {
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
    }
}
   
.dish__content {
  margin-bottom: 0.75rem;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding-bottom: 0.75rem;
}
   
.menu-item--horizontal .dish__content {
  margin-bottom: 0px;
  flex: 1 1 0%;
  border-bottom-width: 0px;
  padding-bottom: 0px;
}
   
.menu-item--bordered .dish__content {
  border-bottom-width: 0px;
}
   
.menu-item--compact .dish__content {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}
   
.menu-item--spacious .dish__content {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
}
   
.menu-item--price-dots .dish__content {
  position: relative;
}
   
.menu-item--price-dots .dish__content::after {
            content: '';
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            flex: 1 1 0%;
            border-bottom-width: 1px;
            border-style: dotted;
            --tw-border-opacity: 1;
            border-color: rgb(94 97 101 / var(--tw-border-opacity));
        }
   
.dish__title {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: capitalize;
}
   
.menu-item--compact .dish__title {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.menu-item--price-dots .dish__title {
  flex-shrink: 0;
}
   
.menu-item--hoverable:hover .dish__title, .menu-item--hoverable:focus-within .dish__title {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
@media print {

    .dish__title {
        font-weight: bold;
    }
}
   
.dish__price {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.menu-item--compact .dish__price {
  font-size: 1rem;
  line-height: 1.5rem;
}
   

    .menu-item--price-dots .dish__price {
  flex-shrink: 0;
}
   
.menu-item--hoverable:hover .dish__price, .menu-item--hoverable:focus-within .dish__price {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
@media print {

    .dish__price {
        font-weight: bold;
    }
}
   
.dish__description {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
}
   
/* ===================================
    Usage Examples:

    <!-- Standard menu item -->
    <div class="menu-item">
        <div class="menu-item__content">
            <h4 class="menu-item__title">Grilled Beef Steak</h4>
            <span class="menu-item__price">$24.99</span>
        </div>
        <p class="menu-item__description">
            Premium aged beef with seasonal vegetables
        </p>
    </div>

    <!-- With price dots -->
    <div class="menu-item menu-item--price-dots">
        <div class="menu-item__content">
            <h4 class="menu-item__title">Caesar Salad</h4>
            <span class="menu-item__price">$12.99</span>
        </div>
        <p class="menu-item__description">
            Fresh romaine with parmesan and croutons
        </p>
    </div>

    <!-- With image -->
    <div class="menu-item menu-item--with-image">
        <div class="menu-item__image">
            <img src="dish.jpg" alt="Dish">
        </div>
        <div class="menu-item__details">
            <div class="menu-item__content">
                <h4 class="menu-item__title">Ribeye Steak</h4>
                <span class="menu-item__price">$32.99</span>
            </div>
            <p class="menu-item__description">
                12oz certified Angus beef
            </p>
        </div>
    </div>

    <!-- Bordered compact -->
    <div class="menu-item menu-item--bordered menu-item--compact">
        <div class="menu-item__content">
            <h4 class="menu-item__title">Coffee</h4>
            <span class="menu-item__price">$3.99</span>
        </div>
    </div>

    <!-- With badge -->
    <div class="menu-item">
        <div class="menu-item__content">
            <h4 class="menu-item__title">
                Truffle Pasta
                <span class="menu-item__badge menu-item__badge--new">New</span>
            </h4>
            <span class="menu-item__price">$28.99</span>
        </div>
        <p class="menu-item__description">
            Fresh pasta with black truffle sauce
        </p>
    </div>

    <!-- Hoverable -->
    <div class="menu-item menu-item--hoverable">
        <div class="menu-item__content">
            <h4 class="menu-item__title">Salmon Fillet</h4>
            <span class="menu-item__price">$26.99</span>
        </div>
    </div>

    <!-- Using retrocompat .dish class -->
    <div class="dish">
        <div class="dish__content">
            <h4 class="dish__title">Classic Burger</h4>
            <span class="dish__price">$15.99</span>
        </div>
        <p class="dish__description">
            100% beef patty with all the fixings
        </p>
    </div>
====================================== */
   
/*==================================================
    Decorative Utilities
    Decorative elements for sections (side images, ornaments)
==================================================*/
   
/* ===================================
    Decorated Section (Side Images)
    Left and right decorative images
====================================== */
   
.decorated-section {
  position: relative;
}
   
.decorated-section--sides::before,
    .decorated-section--sides::after {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        display: none;
        height: 100%;
        width: 140px;
        background-size: contain;
        background-repeat: repeat-y;
    }
   
@media (min-width: 1024px) {
   
  .decorated-section--sides::before,
    .decorated-section--sides::after {
    display: block;
  }
}
   
.decorated-section--sides::before {
  left: 0px;
  background-position: left;
        background-image: url(.././img/left.png);
}
   
.decorated-section--sides::after {
  right: 0px;
  background-position: right;
        background-image: url(.././img/right.png);
}
   
/* Width Variants */
   
.decorated-section--narrow::before,
    .decorated-section--narrow::after {
  width: 100px;
}
   
.decorated-section--wide::before,
    .decorated-section--wide::after {
  width: 180px;
}
   
@media (min-width: 1280px) {
   
  .decorated-section--wide::before,
    .decorated-section--wide::after {
    display: block;
  }
}
   
/* Visibility Variants */
   
@media (min-width: 1024px) {
   
  .decorated-section--xl-only::before,
    .decorated-section--xl-only::after {
    display: none;
  }
}
   
@media (min-width: 1280px) {
   
  .decorated-section--xl-only::before,
    .decorated-section--xl-only::after {
    display: block;
  }
}
   
/* ===================================
    Left Only / Right Only
====================================== */
   
.decorated-section--left-only::before {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        display: none;
        height: 100%;
        width: 140px;
        background-size: contain;
        background-position: left;
        background-repeat: repeat-y;
    }
   
@media (min-width: 1024px) {
   
  .decorated-section--left-only::before {
    display: block;
  }
}
   
.decorated-section--left-only::before {
        background-image: url(.././img/left.png);
    }
   
.decorated-section--right-only::after {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        display: none;
        height: 100%;
        width: 140px;
        background-size: contain;
        background-position: right;
        background-repeat: repeat-y;
    }
   
@media (min-width: 1024px) {
   
  .decorated-section--right-only::after {
    display: block;
  }
}
   
.decorated-section--right-only::after {
        background-image: url(.././img/right.png);
    }
   
/* ===================================
    Custom Images
    Override with inline styles or custom classes
====================================== */
   
.decorated-section--custom-left::before {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        display: none;
        height: 100%;
        width: 140px;
        background-size: contain;
        background-position: left;
        background-repeat: repeat-y;
    }
   
@media (min-width: 1024px) {
   
  .decorated-section--custom-left::before {
    display: block;
  }
}
   
.decorated-section--custom-left::before {
        /* Add background-image via inline style or custom class */
    }
   
.decorated-section--custom-right::after {
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        display: none;
        height: 100%;
        width: 140px;
        background-size: contain;
        background-position: right;
        background-repeat: repeat-y;
    }
   
@media (min-width: 1024px) {
   
  .decorated-section--custom-right::after {
    display: block;
  }
}
   
.decorated-section--custom-right::after {
        /* Add background-image via inline style or custom class */
    }
   
/* ===================================
    Ornamental Dividers
====================================== */
   
.ornament-top {
  position: relative;
}
   
.ornament-top::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 50%;
        height: 0.25rem;
        width: 4rem;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-bg-opacity: 1;
        background-color: rgb(217 178 130 / var(--tw-bg-opacity));
    }
   
.ornament-bottom {
  position: relative;
}
   
.ornament-bottom::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 50%;
        height: 0.25rem;
        width: 4rem;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-bg-opacity: 1;
        background-color: rgb(217 178 130 / var(--tw-bg-opacity));
    }
   
.ornament-center {
  position: relative;
}
   
.ornament-center::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 1px;
        width: 4rem;
        --tw-translate-x: -50%;
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-bg-opacity: 1;
        background-color: rgb(217 178 130 / var(--tw-bg-opacity));
    }
   
/* ===================================
    Corner Decorations
====================================== */
   
.corner-decoration {
  position: relative;
}
   
.corner-decoration::before,
    .corner-decoration::after {
        content: "";
        position: absolute;
        height: 2rem;
        width: 2rem;
        border-style: solid;
    }
   
.corner-decoration::before {
  top: 0px;
  left: 0px;
  border-top-width: 2px;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.corner-decoration::after {
  bottom: 0px;
  right: 0px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.corner-decoration--all {
    position: relative;
}
   
.corner-decoration--all::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        height: 2rem;
        width: 2rem;
        border-top-width: 2px;
        border-left-width: 2px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(217 178 130 / var(--tw-border-opacity));
    }
   
.corner-decoration--all::after {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        height: 2rem;
        width: 2rem;
        border-top-width: 2px;
        border-right-width: 2px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(217 178 130 / var(--tw-border-opacity));
    }
   
.corner-decoration--all::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2rem;
    width: 2rem;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
/* ===================================
    Usage Examples:

    <!-- Section with side decorations -->
    <section class="decorated-section decorated-section--sides">
        <div class="container">
            <!-- Section content -->
        </div>
    </section>

    <!-- Narrow decorations -->
    <section class="decorated-section decorated-section--sides decorated-section--narrow">
        <div class="container">
            <!-- Content -->
        </div>
    </section>

    <!-- Left decoration only -->
    <section class="decorated-section decorated-section--left-only">
        <div class="container">
            <!-- Content -->
        </div>
    </section>

    <!-- Custom decoration images (inline styles) -->
    <section class="decorated-section">
        <div class="decorated-section--custom-left" style="background-image: url('/img/custom-left.png')">
            <!-- Content -->
        </div>
    </section>

    <!-- With ornamental top divider -->
    <section class="ornament-top py-12">
        <div class="container">
            <h2>Section Title</h2>
        </div>
    </section>

    <!-- Corner decorations -->
    <div class="corner-decoration p-8">
        <h3>Highlighted Content</h3>
        <p>Important information</p>
    </div>

    <!-- Combined: sides + ornament -->
    <section class="decorated-section decorated-section--sides ornament-top">
        <div class="container">
            <!-- Content -->
        </div>
    </section>
====================================== */
   
/*==================================================
    Transition Utilities
    Standardized transition patterns
==================================================*/
   
/* ===================================
    Standard Transitions
    Note: Several Tailwind built-in utilities exist:
    - transition-colors (color transitions)
    - transition-opacity (opacity transitions)
    - transition-transform (transform transitions)
    - transition-all (all properties)

    Combine with duration and easing:
    - transition-colors duration-300 ease-in-out
    - transition-opacity duration-500 ease-out
====================================== */
   
.transition-standard {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
/* ===================================
    Duration Variants
====================================== */
   
.transition-fast {
    transition-duration: 150ms;
}
   
.transition-normal {
    transition-duration: 300ms;
}
   
.transition-slow {
    transition-duration: 500ms;
}
   
/* ===================================
    Easing Variants
====================================== */
   
.transition-ease-in {
    transition-timing-function: ease-in;
}
   
.transition-ease-out {
    transition-timing-function: ease-out;
}
   
.transition-ease-in-out {
    transition-timing-function: ease-in-out;
}
   
.transition-linear {
    transition-timing-function: linear;
}
   
/* ===================================
    Combined Utilities
====================================== */
   
.transition-all-fast {
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.transition-all-slow {
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.transition-colors-fast {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.transition-opacity-slow {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
/* ===================================
    No Transition
====================================== */
   
.transition-none {
    transition: none !important;
}
   
/* ===================================
    Hover Transform Utilities
====================================== */
   
.hover-scale {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-scale:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.hover-scale-sm {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-scale-sm:hover {
        transform: scale(1.02);
    }
   
.hover-scale-lg {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-scale-lg:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.hover-lift {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-lift:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.hover-lift-lg {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-lift-lg:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ===================================
    Hover Opacity Utilities
====================================== */
   
.hover-opacity {
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-opacity:hover {
  opacity: 0.8;
}
   
.hover-opacity-low {
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.hover-opacity-low:hover {
  opacity: 0.6;
}
   
/* ===================================
    Usage Examples:

    <!-- Standard transition -->
    <button class="transition-standard">
        Button
    </button>

    <!-- Color transition only -->
    <a href="#" class="transition-colors">
        Link
    </a>

    <!-- Fast transition -->
    <div class="transition-all-fast">
        Content
    </div>

    <!-- Hover scale effect -->
    <div class="hover-scale">
        <img src="..." alt="...">
    </div>

    <!-- Hover lift effect -->
    <div class="card hover-lift">
        Card content
    </div>

    <!-- Hover opacity -->
    <img src="..." class="hover-opacity" alt="...">

    <!-- Fade in animation -->
    <div class="fade-in">
        Animated content
    </div>

    <!-- Slide in up -->
    <div class="slide-in-up">
        Content slides up
    </div>

    <!-- Combined: hover scale + opacity -->
    <div class="hover-scale hover-opacity">
        Interactive element
    </div>

    <!-- No transition (override) -->
    <div class="transition-none">
        No animation
    </div>
====================================== */
   
/* ===================================
    Social Icons Component
    Enhanced with variants for different contexts
====================================== */
   
.social_icons {
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
   
.social_icons li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
   
.social_icons li a {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.social_icons li a:hover {
  --tw-text-opacity: 1;
  color: rgb(130 107 78 / var(--tw-text-opacity));
}
   
.social_icons li a:focus-visible {
  border-radius: 0.125rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .social_icons li a:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.social_icons li a:active {
  --tw-text-opacity: 1;
  color: rgb(87 71 52 / var(--tw-text-opacity));
}
   
/* ===================================
    Size Variants
====================================== */
   
.social_icons--sm {
  gap: 1rem;
}
   
.social_icons--sm li a {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.social_icons--lg {
  gap: 2rem;
}
   
.social_icons--lg li a {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
.social_icons--xl {
  gap: 2.5rem;
}
   
.social_icons--xl li a {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   
/* ===================================
    Alignment Variants
====================================== */
   
.social_icons--center {
  justify-content: center;
}
   
.social_icons--end {
  justify-content: flex-end;
}
   
/* ===================================
    Color Variants
====================================== */
   
.social_icons--dark li a {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.social_icons--dark li a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.social_icons--light li a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.social_icons--light li a:hover {
  --tw-text-opacity: 1;
  color: rgb(232 209 180 / var(--tw-text-opacity));
}
   
.social_icons--muted li a {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.social_icons--muted li a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ===================================
    Style Variants
====================================== */
   
.social_icons--outlined li a {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.social_icons--outlined li a:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.social_icons--outlined li a:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.social_icons--filled li a {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.social_icons--filled li a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.social_icons--filled li a:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(130 107 78 / var(--tw-bg-opacity));
}
   
.social_icons--squared li a {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.social_icons--squared li a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.social_icons--squared li a:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
/* ===================================
    Overlay Style (for team cards)
====================================== */
   
.social_icons--overlay {
  gap: 1rem;
}
   
.social_icons--overlay li a {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.social_icons--overlay li a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.social_icons--overlay li a:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
/* ===================================
    Vertical Layout
====================================== */
   
.social_icons--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
   
/* ===================================
    Usage Examples:

    <!-- Default social icons -->
    <ul class="social_icons">
        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    </ul>

    <!-- Large centered -->
    <ul class="social_icons social_icons--lg social_icons--center">
        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
    </ul>

    <!-- Outlined style -->
    <ul class="social_icons social_icons--outlined">
        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
    </ul>

    <!-- Filled style -->
    <ul class="social_icons social_icons--filled">
        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
    </ul>

    <!-- Dark variant for light backgrounds -->
    <ul class="social_icons social_icons--dark">
        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
    </ul>

    <!-- Overlay style (team cards) -->
    <ul class="social_icons social_icons--overlay">
        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
    </ul>

    <!-- Vertical layout -->
    <ul class="social_icons social_icons--vertical">
        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
    </ul>
====================================== */
   
/* ===================================
   Splide Slider Styles
   Unified styling for Splide.js carousels
====================================== */
   
/* Arrows custom */
   
.slider-nav-arrows {
  position: relative;
  display: none;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .slider-nav-arrows {
    display: flex;
  }
}
   
.slider-nav-arrows .slider-arrow {
  position: relative;
  top: 20% !important;
  z-index: 50;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
		transform: translateY(-50%);
}
   
.slider-nav-arrows .slider-arrow:hover,
		.slider-nav-arrows .slider-arrow:focus-visible {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.slider-nav-arrows .slider-arrow:hover:before,
		.slider-nav-arrows .slider-arrow:focus-visible:before {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.slider-nav-arrows .slider-arrow:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .slider-nav-arrows .slider-arrow:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.slider-nav-arrows .slider-arrow:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.slider-nav-arrows .slider-arrow:active:before {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.slider-nav-arrows .slider-arrow::before {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 1;
			font-family: "Font Awesome 5 Free";
}
   
.slider-nav-arrows .slider-arrow.slick-prev {
  left: 0px;
}
   
.slider-nav-arrows .slider-arrow.slick-prev::before {
				content: "\f054";
			}
   
.slider-nav-arrows .slider-arrow.slick-next {
  right: 0px;
}
   
.slider-nav-arrows .slider-arrow.slick-next::before {
				content: "\f053";
			}
   
/* ===================================
   Splide Arrows
====================================== */
   
.splide__arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
   
.splide__arrow {
  position: relative;
  z-index: 50;
  display: none;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 768px) {
   
  .splide__arrow {
    display: flex;
  }
}
   
.splide__arrow:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.splide__arrow:hover svg {
  fill: #050608;
}
   
.splide__arrow:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .splide__arrow:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.splide__arrow:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.splide__arrow:active svg {
  fill: #050608;
}
   
.splide__arrow:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
.splide__arrow svg {
  height: 0.75rem;
  width: 0.75rem;
  fill: #D9B282;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
@media (min-width: 768px) {
   
  .splide__arrow--prev {
    left: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .splide__arrow--prev {
    left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .splide__arrow--next {
    right: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .splide__arrow--next {
    right: 1rem;
  }
}
   
/* ===================================
   Splide Pagination (Dots)
====================================== */
   
.splide__pagination {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
   
.splide__pagination__page {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(217 178 130 / 0.9);
  background-color: transparent;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.splide__pagination__page:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(217 178 130 / 0.9);
}
   
.splide__pagination__page:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.splide__pagination__page:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.splide__pagination__page.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
/* Dots custom */
   
.slick-dots li button {
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.slick-dots li button:before {
  font-size: 10px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.slick-dots li button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.slick-dots li button:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.slick-dots li.slick-active button {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.slick-dots li.slick-active button:before {
  font-size: 10px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.slick-arrow {
  position: relative;
  z-index: 50;
  display: none;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 768px) {
   
  .slick-arrow {
    display: flex;
  }
}
   
.slick-arrow:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.slick-arrow:hover:before {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.slick-arrow:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .slick-arrow:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.slick-arrow:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.slick-arrow:active:before {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.slick-arrow::before {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
		font-family: "Font Awesome 5 Free";
}
   
@media (min-width: 768px) {
   
  .slick-arrow.slick-prev {
    left: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .slick-arrow.slick-prev {
    left: 1rem;
  }
}
   
.slick-arrow.slick-prev::before {
			content: "\f053";
		}
   
@media (min-width: 768px) {
   
  .slick-arrow.slick-next {
    right: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .slick-arrow.slick-next {
    right: 1rem;
  }
}
   
.slick-arrow.slick-next::before {
			content: "\f054";
		}
   
.slick-arrow.slick-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
.slick-arrow.slick-disabled::before {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 1;
}
   
/* Arrows custom */
   
.splide__arrows {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
.splide__arrows .splide__arrow {
  position: relative;
  top: auto !important;
  z-index: 50;
  display: flex;
  height: 40px;
  width: 40px;
  transform: none !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.splide__arrows .splide__arrow:hover {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.splide__arrows .splide__arrow:hover:before {
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.splide__arrows .splide__arrow::before {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 1;
			font-family: "Font Awesome 5 Free";
}
   
.splide__arrows .splide__arrow--prev {
  left: 3rem;
}
   
.splide__arrows .splide__arrow--prev::before {
				content: "\f054";
			}
   
.splide__arrows .splide__arrow--next {
  right: 3rem;
}
   
.splide__arrows .splide__arrow--next::before {
				content: "\f053";
			}
   
/* Dots custom */
   
.splide__pagination {
  bottom: 2rem !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  gap: 0.25rem;
}
   
@media (min-width: 640px) {
   
  .splide__pagination {
    bottom: 2.5rem !important;
  }
}
   
@media (min-width: 768px) {
   
  .splide__pagination {
    justify-content: center !important;
  }
}
   
.splide__pagination .splide__pagination__page {
  height: 24px;
  width: 24px;
  border-radius: 9999px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
  background-color: transparent;
}
   
.splide__pagination .splide__pagination__page:before {
  margin-left: 6px;
  margin-right: 6px;
  display: flex;
  height: 10px;
  width: 10px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  font-size: 10px !important;
  line-height: 1 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  --tw-content: '';
  content: var(--tw-content);
}
   
.splide__pagination .splide__pagination__page.is-active {
  transform: none;
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
}
   
.splide__pagination .splide__pagination__page.is-active:before {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity)) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
   
/* Dots custom */
   
.slick-dots li button {
  border-radius: 9999px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
}
   
.slick-dots li button:before {
  font-size: 10px !important;
  line-height: 1 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.slick-dots li.slick-active button {
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
}
   
.slick-dots li.slick-active button:before {
  font-size: 10px !important;
  line-height: 1 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.slick-arrow {
  position: relative;
  z-index: 50;
  display: none !important;
  height: 40px !important;
  width: 40px !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px !important;
  border-style: solid !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  background-color: transparent;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 768px) {
   
  .slick-arrow {
    display: flex !important;
  }
}
   
.slick-arrow:hover {
  cursor: pointer !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity)) !important;
}
   
.slick-arrow:hover:before {
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.slick-arrow::before {
  font-weight: 900;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
		font-family: "Font Awesome 5 Free" !important;
		font-size: 14px !important;
		line-height: 1.6 !important;
		letter-spacing: 0.25px !important;
}
   
@media (min-width: 768px) {
   
  .slick-arrow.slick-prev {
    left: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .slick-arrow.slick-prev {
    left: 1rem;
  }
}
   
.slick-arrow.slick-prev::before {
			content: "\f053";
		}
   
@media (min-width: 768px) {
   
  .slick-arrow.slick-next {
    right: -5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .slick-arrow.slick-next {
    right: 1rem;
  }
}
   
.slick-arrow.slick-next::before {
			content: "\f054";
		}
   
.slick-arrow.slick-disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}
   
.slick-arrow.slick-disabled::before {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
  opacity: 1 !important;
}
   
.slick-arrow.slick-disabled:hover:before {
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
/*==========================
    Section Title
===========================*/
   
.section-title {
  position: relative;
  margin-bottom: 0px;
  max-width: 600px;
  padding-bottom: 0.5rem;
}
   
.section-title__subtitle {
  margin-bottom: 0.5rem;
  width: 100%;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
@media (min-width: 640px) {
   
  .section-title__subtitle {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1.5px;
  }
}
   
.section-title__title {
  margin-bottom: 1rem;
  width: 100%;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 640px) {
   
  .section-title__title {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 768px) {
   
  .section-title__title {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
.section-title p:last-of-type {
  padding-bottom: 0px;
}
   
.section-title__center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
   
/*==========================
    Openings Hours
===========================*/
   
.opening-hours {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(87 71 52 / var(--tw-border-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
   
/* Header styles now applied directly to h3 */
   
.opening-hours > h3,
    .opening-hours__header h3 {
  margin-bottom: 1rem;
  width: 100%;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .opening-hours > h3,
    .opening-hours__header h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 1280px) {
   
  .opening-hours > h3,
    .opening-hours__header h3 {
    margin-bottom: 1.5rem;
  }
}
   
.opening-hours__header {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
   
.opening-hours__body {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
   
.opening-hours__item {
  margin-bottom: 0.5rem;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
}
   
.opening-hours__item:last-of-type {
  margin-bottom: 0px;
}
   
@media (min-width: 640px) {
   
  .opening-hours__item {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
   
.opening-hours__item-day {
  grid-column: span 4 / span 4;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.opening-hours__item-time {
  grid-column: span 4 / span 4;
  text-align: right;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
   
@media (min-width: 640px) {
   
  .opening-hours__item-time {
    grid-column: span 2 / span 2;
  }
}
   
/*==========================
    Text Cols 
===========================*/
   
.text-cols {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .text-cols {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .text-cols {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .text-cols {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .text-cols {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.text-cols__container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
   
@media (min-width: 640px) {
   
  .text-cols__container {
    max-width: 640px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}
   
@media (min-width: 768px) {
   
  .text-cols__container {
    max-width: 768px !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}
   
@media (min-width: 1024px) {
   
  .text-cols__container {
    max-width: 1024px !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
}
   
@media (min-width: 1280px) {
   
  .text-cols__container {
    max-width: 1280px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}
   
.text-cols__container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .text-cols__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .text-cols__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .text-cols__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .text-cols__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.text-cols__content {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
   
@media (min-width: 768px) {
   
  .text-cols__content {
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .text-cols__content {
    gap: 2.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.text-cols__col {
  grid-column: span 2 / span 2;
}
   
@media (min-width: 768px) {
   
  .text-cols__col {
    grid-column: span 1 / span 1;
  }
}
   
.text-cols__col p:last-of-type {
  margin-bottom: 0px;
}
   
/*==================================================
    Input System - Unified Base Classes
==================================================*/
   
/* ===================================
    Base Input Class
    Replaces duplicate styles from base.css and form context
====================================== */
   
.input {
  margin-bottom: 1.25rem;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.3);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	letter-spacing: 0.25px;
}
   
.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  -moz-transition-property: opacity;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.input:hover:not(:focus):not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.4);
}
   
.input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(217 178 130 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.input:focus::-moz-placeholder {
  opacity: 0.6;
}
   
.input:focus::placeholder {
  opacity: 0.6;
}
   
.input:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.input:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  opacity: 0.5;
}
   
/* ===================================
    Textarea Specific Styles
====================================== */
   
.input-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.625;
}
   
/* ===================================
    Input Modifiers
====================================== */
   
/* Compact variant - reduced padding */
   
.input--compact {
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
/* Dark variant - for search bars and special contexts */
   
.input--dark {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  background-color: rgb(5 6 8 / 0.8);
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.input--dark:hover:not(:focus):not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.input--dark:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.input--dark:focus-visible {
  --tw-ring-offset-color: #0A0D0F;
}
   
/* Search variant - for button groups (no right border-radius) */
   
.input--search {
  margin-bottom: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right-width: 0px;
}
   
/* No margin variant - for special layouts */
   
.input--no-margin {
  margin-bottom: 0px;
}
   
/* ===================================
    Date/Time Input Adjustments
    Native pickers need different padding
====================================== */
   
input[type="date"].input,
input[type="time"].input {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; /* 10px - adjusted for native picker icons */
}
   
/* ===================================
    Retrocompatibility
    Support old form_field context (will be deprecated in v3.0)
====================================== */
   
.form_field input:not([class*="input"]),
	.form_field textarea:not([class*="input"]) {
  margin-bottom: 1.25rem;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.3);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	letter-spacing: 0.25px;
}
   
.form_field input:not([class*="input"])::-moz-placeholder, .form_field textarea:not([class*="input"])::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  -moz-transition-property: opacity;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.form_field input:not([class*="input"])::placeholder,
	.form_field textarea:not([class*="input"])::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.form_field input:not([class*="input"]):hover:not(:focus):not(:disabled),
	.form_field textarea:not([class*="input"]):hover:not(:focus):not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.4);
}
   
.form_field input:not([class*="input"]):focus,
	.form_field textarea:not([class*="input"]):focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(217 178 130 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.form_field input:not([class*="input"]):focus::-moz-placeholder, .form_field textarea:not([class*="input"]):focus::-moz-placeholder {
  opacity: 0.6;
}
   
.form_field input:not([class*="input"]):focus::placeholder,
	.form_field textarea:not([class*="input"]):focus::placeholder {
  opacity: 0.6;
}
   
.form_field input:not([class*="input"]):focus-visible,
	.form_field textarea:not([class*="input"]):focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.form_field input:not([class*="input"]):disabled,
	.form_field textarea:not([class*="input"]):disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  opacity: 0.5;
}
   
input[type="date"].form_field input:not([class*="input"]),
input[type="time"].form_field input:not([class*="input"]),input[type="date"]
	.form_field textarea:not([class*="input"]),
input[type="time"]
	.form_field textarea:not([class*="input"]) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; /* 10px - adjusted for native picker icons */ /* 10px - adjusted for native picker icons */
}
   
.events-contact-form input.form_field input:not([class*="input"]),
    .events-contact-form select.form_field input:not([class*="input"]),
    .events-contact-form textarea.form_field input:not([class*="input"]),.events-contact-form input
	.form_field textarea:not([class*="input"]),
    .events-contact-form select
	.form_field textarea:not([class*="input"]),
    .events-contact-form textarea
	.form_field textarea:not([class*="input"]) {
  width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.events-contact-form input.form_field input:not([class*="input"]):focus, .events-contact-form select.form_field input:not([class*="input"]):focus, .events-contact-form textarea.form_field input:not([class*="input"]):focus,.events-contact-form input
	.form_field textarea:not([class*="input"]):focus, .events-contact-form select
	.form_field textarea:not([class*="input"]):focus, .events-contact-form textarea
	.form_field textarea:not([class*="input"]):focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
}
   
.events-contact-form input.form_field input:not([class*="input"])::-moz-placeholder, .events-contact-form select.form_field input:not([class*="input"])::-moz-placeholder, .events-contact-form textarea.form_field input:not([class*="input"])::-moz-placeholder, .events-contact-form input
	.form_field textarea:not([class*="input"])::-moz-placeholder, .events-contact-form select
	.form_field textarea:not([class*="input"])::-moz-placeholder, .events-contact-form textarea
	.form_field textarea:not([class*="input"])::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form input.form_field input:not([class*="input"])::placeholder, .events-contact-form select.form_field input:not([class*="input"])::placeholder, .events-contact-form textarea.form_field input:not([class*="input"])::placeholder,.events-contact-form input
	.form_field textarea:not([class*="input"])::placeholder, .events-contact-form select
	.form_field textarea:not([class*="input"])::placeholder, .events-contact-form textarea
	.form_field textarea:not([class*="input"])::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form select.form_field input:not([class*="input"]),.events-contact-form select
	.form_field textarea:not([class*="input"]) {
  cursor: pointer;
}
   
.events-contact-form select.form_field input:not([class*="input"]) option,.events-contact-form select
	.form_field textarea:not([class*="input"]) option {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.form_field textarea:not([class*="input"]) {
  min-height: 140px;
  resize: vertical;
  line-height: 1.625;
}
   
/* Date inputs in form context */
   
.form_field__date input:not([class*="input"]) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
   
/*==================================================
    Form Component Structure
==================================================*/
   
.form {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5rem;
}
   
.form__body {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
.form__footer {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
}
   
.form_row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}
   
.form_field {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.form_field label {
  margin-bottom: 0.5rem;
  display: block;
  font-family: Josefin Sans, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* Show labels when needed */
   
.form_field--with-label label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
   
.form_field__name {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__name {
    grid-column: span 9 / span 9;
  }
}
   
.form_field__phone {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__phone {
    grid-column: span 3 / span 3;
  }
}
   
.form_field__email {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__email {
    grid-column: span 6 / span 6;
  }
}
   
.form_field__person {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__person {
    grid-column: span 2 / span 2;
  }
}
   
.form_field__date {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__date {
    grid-column: span 2 / span 2;
  }
}
   
.form_field__hours {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .form_field__hours {
    grid-column: span 2 / span 2;
  }
}
   
.form_field__message {
  grid-column: span 12 / span 12;
}
   
/* ===================================
    Form Field States
====================================== */
   
.input--error {
  border-color: rgb(239 68 68 / 0.7);
  background-color: rgb(239 68 68 / 0.05);
}
   
.input--error:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.input--success {
  border-color: rgb(34 197 94 / 0.7);
  background-color: rgb(34 197 94 / 0.05);
}
   
.input--success:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(34 197 94 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Success icon indicator (optional - can be added via JS) */
   
.input--success[data-validated="true"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"%2310b981\"%3E%3Cpath fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 1rem center;
		background-size: 1.25rem;
		padding-right: 3rem;
	}
   
/* ===================================
    Form Field Container
    Wrapper for input + label + error message
====================================== */
   
.form-field {
  margin-bottom: 1.5rem;
}
   
.form-field__label {
  margin-bottom: 0.5rem;
  display: block;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.form-field__error-message,
.form_field__error-message {
  margin-top: 0.5rem;
  margin-bottom: 0px;
  font-family: Josefin Sans, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
   
/* Error icon */
   
.form-field__error-message::before, .form_field__error-message::before {
		content: '⚠';
		display: inline-block;
		flex-shrink: 0;
		--tw-text-opacity: 1;
		color: rgb(248 113 113 / var(--tw-text-opacity));
	}
   
.form-field__success-message {
  margin-top: 0.5rem;
  margin-bottom: 0px;
  font-family: Josefin Sans, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
   
/* Success icon */
   
.form-field__success-message::before {
		content: '✓';
		display: inline-block;
		flex-shrink: 0;
		font-weight: 700;
		--tw-text-opacity: 1;
		color: rgb(74 222 128 / var(--tw-text-opacity));
	}
   
.form-field__help-text {
  margin-top: 0.5rem;
  margin-bottom: 0px;
  font-family: Josefin Sans, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/*==================================================
    Search Component
    Extension: Search form and results styling
    Justification: Essential discovery feature for premium themes
==================================================*/
   
/* ===================================
    Search Form - Header Integration
====================================== */
   
.search-form {
  position: relative;
  width: 100%;
}
   
.search-form__input-group {
  position: relative;
  display: flex;
  align-items: center;
}
   
.search-form__input {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.3);
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 3rem;
  padding-right: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 0.25px;
}
   
.search-form__input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.search-form__input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.search-form__input:hover:not(:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.4);
}
   
.search-form__input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(217 178 130 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.search-form__input:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.search-form__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  pointer-events: none;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.search-form__submit {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-form__submit:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.search-form__submit:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
/* ===================================
    Search Form - Hero Variant (Large)
====================================== */
   
.search-form--hero {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
}
   
@media (min-width: 1024px) {
   
  .search-form--hero {
    padding-bottom: 2.25rem;
  }
}
   
@media (min-width: 1280px) {
   
  .search-form--hero {
    padding-bottom: 4rem;
  }
}
   
.search-form--hero .search-form__input {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
.search-form--hero .search-form__icon {
  left: 1.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
}
   
.search-form--hero .search-form__submit {
  right: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
/* ===================================
    Search Form - Compact Variant
====================================== */
   
.search-form--compact .search-form__input {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.search-form--compact .search-form__icon {
  left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.search-form--compact .search-form__submit {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
   
/* ===================================
    Search Results Page
====================================== */
   
.search-results {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 768px) {
   
  .search-results {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
.search-results__header {
  margin-bottom: 2rem;
}
   
@media (min-width: 768px) {
   
  .search-results__header {
    margin-bottom: 3rem;
  }
}
   
.search-results__title {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-results__title {
    font-size: 48px;
    line-height: 1.2;
  }
}
   
.search-results__meta {
  padding-top: 1rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-results__meta {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
   
.search-results__meta strong {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.search-results__filters {
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  padding-bottom: 1.5rem;
}
   
.search-results__filter-label {
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.search-results__filter-btn {
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  background-color: transparent;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-results__filter-btn:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.search-results__filter-btn--active {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.search-results__filter-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
/* ===================================
    Search Result Item
====================================== */
   
.search-result {
  margin-bottom: 2rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
  padding-bottom: 2rem;
}
   
.search-result:last-child {
  border-bottom-width: 0px;
}
   
.search-result {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-result:hover {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
}
   
.search-result__category {
  margin-bottom: 0.75rem;
  display: inline-block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.search-result__title {
  margin-bottom: 0.75rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-result__title {
    font-size: 28px;
    line-height: 1.4;
  }
}
   
.search-result__title {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-result__title a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.search-result__excerpt {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-result__excerpt {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.25px;
  }
}
   
.search-result__excerpt mark {
  border-radius: 0.25rem;
  background-color: rgb(217 178 130 / 0.2);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.search-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.search-result__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
   
.search-result__meta-item i {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.search-result__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-result__link:hover {
  gap: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.search-result__link::after {
        content: '→';
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms;
    }
   
/* ===================================
    No Results State
====================================== */
   
.search-results__empty {
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
   
@media (min-width: 768px) {
   
  .search-results__empty {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
.search-results__empty-icon {
  margin-bottom: 1.5rem;
  font-size: 3.75rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(36 39 43 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-results__empty-icon {
    font-size: 4.5rem;
    line-height: 1;
  }
}
   
.search-results__empty-title {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-results__empty-title {
    font-size: 38px;
    line-height: 1.2;
  }
}
   
.search-results__empty-text {
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .search-results__empty-text {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.25px;
  }
}
   
.search-results__empty-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
}
   
.search-results__empty-suggestions {
  margin-left: auto;
  margin-right: auto;
  max-width: 28rem;
  text-align: left;
}
   
.search-results__empty-suggestions-title {
  margin-bottom: 1rem;
  font-family: Mulish, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.search-results__empty-suggestions-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
   
.search-results__empty-suggestions-list li {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.search-results__empty-suggestions-list li::before {
            content: '•';
            margin-right: 0.5rem;
            --tw-text-opacity: 1;
            color: rgb(217 178 130 / var(--tw-text-opacity));
        }
   
/* ===================================
    Search Modal/Overlay (Optional)
====================================== */
   
.search-overlay {
  position: fixed;
  inset: 0px;
  z-index: 50;
  background-color: rgb(5 6 8 / 0.95);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 5rem;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.search-overlay--active {
  pointer-events: auto;
  opacity: 1;
}
   
.search-overlay__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.search-overlay__close:hover {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.search-overlay__close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.search-overlay__content {
  width: 100%;
  max-width: 48rem;
}
   
/* ===================================
    Responsive Adjustments
====================================== */
   
@media (max-width: 768px) {

    .search-result__title {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }
}
   
/*==================================================
    USAGE EXAMPLES:

    Basic search form:
    <form class="search-form" role="search">
        <div class="search-form__input-group">
            <i class="fa-solid fa-magnifying-glass search-form__icon"></i>
            <input type="search" class="search-form__input" placeholder="Search..." />
            <button type="submit" class="search-form__submit">Search</button>
        </div>
    </form>

    Hero variant (large):
    <form class="search-form search-form--hero" role="search">
        ...
    </form>

    Compact variant:
    <form class="search-form search-form--compact" role="search">
        ...
    </form>
==================================================*/
   
/* ===================================
    Tab´s
====================================== */
   
.tabs {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 1.5rem;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .tabs {
    margin-bottom: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .tabs {
    margin-bottom: 3.5rem;
    border-width: 2px;
  }
}
   
.tabs__link {
  position: relative;
  margin: 0px;
  display: inline-block;
  width: 41.666667%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-weight: 400;
  text-transform: capitalize;
  font-style: normal;
  --tw-text-opacity: 1 !important;
  color: rgb(209 210 212 / var(--tw-text-opacity)) !important;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
@media (min-width: 640px) {
   
  .tabs__link {
    width: 25%;
  }
}
   
@media (min-width: 768px) {
   
  .tabs__link {
    width: -moz-fit-content;
    width: fit-content;
    background-color: transparent;
  }
}
   
.tabs__link {
        letter-spacing: 1px;
        text-decoration: none;

    }
   
.tabs__link:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
}
   
.tabs__link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.tabs__link:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(58 61 65 / var(--tw-bg-opacity));
}
   
.tabs__link:disabled,
        .tabs__link[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
.tabs__link::after {
  position: absolute;
  bottom: -18px;
  left: calc(50% - 7px);
  z-index: 10;
  display: none;
  height: 14px;
  width: 14px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 2px;
  border-right-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  --tw-content: '';
  content: var(--tw-content);
}
   
.tabs__link.active {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.tabs__link.active::after {
  display: none;
}
   
@media (min-width: 768px) {
   
  .tabs__link.active::after {
    display: block;
  }
}
   
.tabs-content {
  width: 100%;
  overflow: hidden;
  padding-bottom: 2.5rem;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
@media (min-width: 768px) {
   
  .tabs-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 1024px) {
   
  .tabs-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .tabs-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
.tabs-content__item {
  display: none;
  width: 100%;
        animation: fadeEffect 0.3s ease-in-out;
}
   
.tabs-content__item .menu__category-dishes .section-title__title {
  font-size: 58px !important;
  line-height: 1.2 !important;
}
   
.tabs-content__item.active {
  display: block;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
/* Simplified: fade only, no horizontal slide */
   
@keyframes fadeEffect {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
   
/*==================================================
    Pagination Component
    Extension: Numbered pagination for blog lists, menu archives, search results
    Justification: Essential navigation component missing from theme
==================================================*/
   
.pagination {
  margin: 0px;
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0px;
  margin-top: 3rem;
}
   
@media (min-width: 768px) {
   
  .pagination {
    margin-top: 4rem;
  }
}
   
.pagination__item {
  display: inline-flex;
}
   
.pagination__link {
    /* Base styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-width: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    line-height: 1rem;
}
   
@media (min-width: 768px) {
   
  .pagination__link {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
   
.pagination__link {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  background-color: transparent;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  border-radius: 0px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
/* Hover state */
   
.pagination__link:hover:not(.pagination__link--active):not(.pagination__link--disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
/* Focus state - accessibility */
   
.pagination__link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
/* Active/current page */
   
.pagination__link--active {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  cursor: default;
  pointer-events: none;
}
   
/* Disabled state (for prev/next at boundaries) */
   
.pagination__link--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
   
/* Previous/Next arrow buttons */
   
.pagination__prev,
.pagination__next {
    /* Base styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-width: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    line-height: 1rem;
}
   
@media (min-width: 768px) {
   
  .pagination__prev,
.pagination__next {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
   
.pagination__prev,
.pagination__next {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  background-color: transparent;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  border-radius: 0px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.pagination__prev:hover:not(.pagination__link--active):not(.pagination__link--disabled),
.pagination__next:hover:not(.pagination__link--active):not(.pagination__link--disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.pagination__prev:focus-visible,
.pagination__next:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.pagination--compact .pagination__prev,.pagination--compact 
.pagination__next {
  height: 2.25rem;
  min-width: 36px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
   
.pagination--simple .pagination__prev,.pagination--simple 
.pagination__next {
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
}
   
.pagination--simple .pagination__prev:hover:not(.pagination__link--active):not(.pagination__link--disabled),.pagination--simple 
.pagination__next:hover:not(.pagination__link--active):not(.pagination__link--disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.pagination--rounded .pagination__prev,.pagination--rounded 
.pagination__next {
  border-radius: 0.375rem;
}
   
@media (hover: none) and (pointer: coarse) {
    .pagination__prev,
.pagination__next {
    min-height: 48px;
    min-width: 48px;
  }
}
   
/* Icon spacing */
   
.pagination__prev svg,
    .pagination__prev i,
    .pagination__next svg,
    .pagination__next i {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
/* Optional: Add left arrow icon styling */
   
.pagination__prev::before {
        content: '←';
        margin-right: 0.5rem;
    }
   
/* Optional: Add right arrow icon styling */
   
.pagination__next::after {
        content: '→';
        margin-left: 0.5rem;
    }
   
/* Ellipsis for skipped pages */
   
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  min-width: 44px;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  pointer-events: none;
}
   
/*==================================================
    Pagination Variants
==================================================*/
   
/* Compact variant - for sidebars or narrow spaces */
   
.pagination--compact {
  margin-top: 2rem;
  gap: 0.25rem;
}
   
.pagination--compact .pagination__link {
  height: 2.25rem;
  min-width: 36px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
   
/* Simple variant - minimal styling */
   
.pagination--simple .pagination__link {
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
}
   
.pagination--simple .pagination__link:hover:not(.pagination__link--active):not(.pagination__link--disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.pagination--simple .pagination__link--active {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
/* Rounded variant */
   
.pagination--rounded .pagination__link {
  border-radius: 0.375rem;
}
   
/*==================================================
    Responsive Adjustments
==================================================*/
   
/* Mobile: Hide intermediate page numbers, keep first/last/current */
   
@media (max-width: 640px) {
    .pagination__item:not(.pagination__item--first):not(.pagination__item--last):not(.pagination__item--current):not(.pagination__item--prev):not(.pagination__item--next) {
    display: none;
  }
}
   
/*==================================================
    Accessibility Enhancements
==================================================*/
   
/* Screen reader only text for navigation context */
   
.pagination__sr-label {
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* Improved touch targets for mobile */
   
@media (hover: none) and (pointer: coarse) {
    .pagination__link {
    min-height: 48px;
    min-width: 48px;
  }
}
   
/*==================================================
    USAGE EXAMPLES:

    Basic pagination:
    <nav class="pagination" aria-label="Pagination">
        <ul class="pagination">
            <li class="pagination__item pagination__item--prev">
                <a href="#" class="pagination__prev" aria-label="Previous page">
                    <span class="pagination__sr-label">Previous</span>
                </a>
            </li>
            <li class="pagination__item">
                <a href="#" class="pagination__link" aria-label="Go to page 1">1</a>
            </li>
            <li class="pagination__item pagination__item--current">
                <span class="pagination__link pagination__link--active" aria-current="page" aria-label="Current page, page 2">2</span>
            </li>
            <li class="pagination__item">
                <a href="#" class="pagination__link" aria-label="Go to page 3">3</a>
            </li>
            <li class="pagination__item">
                <span class="pagination__ellipsis">…</span>
            </li>
            <li class="pagination__item">
                <a href="#" class="pagination__link" aria-label="Go to page 10">10</a>
            </li>
            <li class="pagination__item pagination__item--next">
                <a href="#" class="pagination__next" aria-label="Next page">
                    <span class="pagination__sr-label">Next</span>
                </a>
            </li>
        </ul>
    </nav>

    Compact variant:
    <nav class="pagination pagination--compact" aria-label="Pagination">
        ...
    </nav>

    Simple variant:
    <nav class="pagination pagination--simple" aria-label="Pagination">
        ...
    </nav>
==================================================*/
   
/* ============================================
   RATING COMPONENT
   Reusable star rating system for reviews, testimonials, and menu items
============================================= */
   
/* ============================================
   BASE RATING COMPONENT
============================================= */
   
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: Mulish, sans-serif;
}
   
/* Rating with numerical value */
   
.rating__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
   
.rating__value {
  margin-left: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.rating__count {
  margin-left: 0.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
/* ============================================
   STAR STYLES
============================================= */
   
.rating__star {
  display: inline-block;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Filled star */
   
.rating__star--filled {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Half-filled star */
   
.rating__star--half {
  position: relative;
}
   
.rating__star--half::before {
        content: '★';
        position: absolute;
        left: 0px;
        top: 0px;
        --tw-text-opacity: 1;
        color: rgb(217 178 130 / var(--tw-text-opacity));
        overflow: hidden;
        width: 50%;
    }
   
.rating__star--half::after {
        content: '★';
        --tw-text-opacity: 1;
        color: rgb(36 39 43 / var(--tw-text-opacity));
    }
   
/* Empty star */
   
.rating__star--empty {
  --tw-text-opacity: 1;
  color: rgb(36 39 43 / var(--tw-text-opacity));
}
   
/* ============================================
   SIZE VARIANTS
============================================= */
   
/* Small rating (for compact layouts) */
   
.rating--sm .rating__star {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.rating--sm .rating__value {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.rating--sm .rating__count {
  font-size: 0.75rem;
  line-height: 1rem;
}
   
/* Default rating */
   
.rating--default .rating__star {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.rating--default .rating__value {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.rating--default .rating__count {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
/* Large rating (for hero sections, featured reviews) */
   
.rating--lg .rating__star {
  font-size: 1.5rem;
  line-height: 2rem;
}
   
.rating--lg .rating__value {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   
.rating--lg .rating__count {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
/* Extra large rating (for stats sections) */
   
.rating--xl .rating__star {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
   
.rating--xl .rating__value {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
   
.rating--xl .rating__count {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
/* ============================================
   LAYOUT VARIANTS
============================================= */
   
/* Inline rating (default) */
   
.rating--inline {
  display: inline-flex;
  align-items: center;
}
   
/* Stacked rating (stars above value) */
   
.rating--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
   
.rating--stacked .rating__value {
  margin-left: 0px;
}
   
/* Centered rating */
   
.rating--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
   
.rating--centered .rating__value {
  margin-left: 0px;
}
   
/* ============================================
   COLOR VARIANTS
============================================= */
   
/* Gold/Calico (default) */
   
.rating--gold .rating__star--filled,
    .rating--gold .rating__star--half::before {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Red variant (for spicy ratings, etc.) */
   
.rating--red .rating__star--filled,
    .rating--red .rating__star--half::before {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
   
/* Green variant (for eco ratings, etc.) */
   
.rating--green .rating__star--filled,
    .rating--green .rating__star--half::before {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
   
/* White variant (for dark backgrounds) */
   
.rating--white .rating__star--filled,
    .rating--white .rating__star--half::before {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.rating--white .rating__star--empty {
  color: rgb(255 255 255 / 0.3);
}
   
.rating--white .rating__value {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.rating--white .rating__count {
  color: rgb(255 255 255 / 0.7);
}
   
/* ============================================
   INTERACTIVE RATING (for forms)
============================================= */
   
.rating--interactive .rating__star {
  cursor: pointer;
}
   
.rating--interactive .rating__star:hover {
  --tw-text-opacity: 1;
  color: rgb(225 193 155 / var(--tw-text-opacity));
}
   
.rating--interactive .rating__star {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.rating--interactive .rating__star:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ============================================
   RATING WITH LABEL
============================================= */
   
.rating-with-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
   
.rating-with-label__label {
  font-family: Mulish, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
   
/* ============================================
   RATING BREAKDOWN (for detailed reviews)
============================================= */
   
.rating-breakdown > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
   
.rating-breakdown__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
   
.rating-breakdown__label {
  font-family: Mulish, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 80px;
}
   
.rating-breakdown__bar {
  height: 0.5rem;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
.rating-breakdown__fill {
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.rating-breakdown__value {
  font-family: Mulish, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  min-width: 40px;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
/* ============================================
   RATING SUMMARY CARD
============================================= */
   
.rating-summary {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .rating-summary {
    padding: 2rem;
  }
}
   
.rating-summary__header {
  margin-bottom: 1.5rem;
  text-align: center;
}
   
.rating-summary__score {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .rating-summary__score {
    font-size: 3.75rem;
    line-height: 1;
  }
}
   
.rating-summary__score {
  font-family: Barlow Condensed, sans-serif;
}
   
.rating-summary__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  margin-top: 0.5rem;
}
   
.rating-summary__stars {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
   
.rating-summary__count {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.rating-summary__breakdown {
  margin-top: 1.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  padding-top: 1.5rem;
}
   
/* ============================================
   ACCESSIBILITY
============================================= */
   
/* Screen reader only text */
   
.rating__sr-only {
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* Focus states for interactive ratings */
   
.rating--interactive .rating__star:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
  border-radius: 0.25rem;
}
   
/* ============================================
   RESPONSIVE BEHAVIOR
============================================= */
   
@media (max-width: 640px) {
    /* Stack rating on mobile for better readability */
    .rating--responsive {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

        .rating--responsive .rating__value {
    margin-left: 0px;
  }

    /* Reduce star size on mobile */
        .rating--lg .rating__star {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
        .rating--xl .rating__star {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
   
/* ============================================
   UTILITY CLASSES
============================================= */
   
/* Margin utilities for ratings */
   
.rating-mt {
  margin-top: 1rem;
}
   
.rating-mb {
  margin-bottom: 1rem;
}
   
/* ============================================
   USAGE EXAMPLES IN COMMENTS:

   1. Basic Rating:
   <div class="rating">
       <div class="rating__stars">
           <span class="rating__star rating__star--filled">★</span>
           <span class="rating__star rating__star--filled">★</span>
           <span class="rating__star rating__star--filled">★</span>
           <span class="rating__star rating__star--filled">★</span>
           <span class="rating__star rating__star--half">★</span>
       </div>
       <span class="rating__value">4.5</span>
       <span class="rating__count">(284 reviews)</span>
   </div>

   2. Large Centered Rating:
   <div class="rating rating--lg rating--centered">
       <div class="rating__stars">
           <!-- stars here -->
       </div>
       <span class="rating__value">4.9</span>
       <span class="rating__count">Based on 284 reviews</span>
   </div>

   3. Interactive Rating (for forms):
   <div class="rating rating--interactive" role="radiogroup" aria-label="Rate this dish">
       <button class="rating__star" role="radio" aria-label="1 star">★</button>
       <button class="rating__star" role="radio" aria-label="2 stars">★</button>
       <!-- ... -->
   </div>

   4. Rating Breakdown:
   <div class="rating-breakdown">
       <div class="rating-breakdown__item">
           <span class="rating-breakdown__label">5 stars</span>
           <div class="rating-breakdown__bar">
               <div class="rating-breakdown__fill" style="width: 75%"></div>
           </div>
           <span class="rating-breakdown__value">75%</span>
       </div>
       <!-- more items -->
   </div>

   5. Rating Summary Card:
   <div class="rating-summary">
       <div class="rating-summary__header">
           <div class="rating-summary__score">4.9</div>
           <p class="rating-summary__label">Average Rating</p>
           <div class="rating-summary__stars">
               <!-- rating component -->
           </div>
           <p class="rating-summary__count">Based on 284 reviews</p>
       </div>
       <div class="rating-summary__breakdown">
           <!-- rating breakdown -->
       </div>
   </div>

============================================= */
   
/* ============================================
   NEWSLETTER COMPONENT
   Reusable newsletter subscription forms
============================================= */
   
/* ============================================
   BASE NEWSLETTER FORM
============================================= */
   
.newsletter-form {
  width: 100%;
}
   
.newsletter-form__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .newsletter-form__wrapper {
    flex-direction: row;
  }
}
   
.newsletter-form__input {
  flex: 1 1 0%;
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.newsletter-form__input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.newsletter-form__input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.newsletter-form__input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.newsletter-form__input:hover {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
}
   
.newsletter-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.newsletter-form__button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.newsletter-form__button {
  font-family: Mulish, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0.375rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.newsletter-form__button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.newsletter-form__button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.newsletter-form__button i {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.newsletter-form__button:hover i {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.newsletter-form__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  margin-top: 0.75rem;
}
   
.newsletter-form__privacy i {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ============================================
   NEWSLETTER FORM VARIANTS
============================================= */
   
/* Hero variant - Large prominent form */
   
.newsletter-form--hero .newsletter-form__wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
   
.newsletter-form--hero .newsletter-form__input {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
   
.newsletter-form--hero .newsletter-form__button {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
   
/* Inline variant - Horizontal always */
   
.newsletter-form--inline .newsletter-form__wrapper {
  flex-direction: column;
}
   
@media (min-width: 768px) {
   
  .newsletter-form--inline .newsletter-form__wrapper {
    flex-direction: row;
  }
}
   
/* Compact variant - Smaller for sidebars/footer */
   
.newsletter-form--compact .newsletter-form__input {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.newsletter-form--compact .newsletter-form__button {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
   
.newsletter-form--compact .newsletter-form__privacy {
  font-size: 0.75rem;
  line-height: 1rem;
}
   
/* Footer variant - Light on dark */
   
.newsletter-form--footer .newsletter-form__input {
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.newsletter-form--footer .newsletter-form__input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
/* Light variant - For light backgrounds */
   
.newsletter-form--light .newsletter-form__input {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.newsletter-form--light .newsletter-form__input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
}
   
.newsletter-form--light .newsletter-form__input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
}
   
.newsletter-form--light .newsletter-form__input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
   
.newsletter-form--light .newsletter-form__button {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
   
.newsletter-form--light .newsletter-form__privacy {
  --tw-text-opacity: 1;
  color: rgb(36 39 43 / var(--tw-text-opacity));
}
   
/* ============================================
   NEWSLETTER SECTION STYLES
============================================= */
   
/* Newsletter widget in sidebar */
   
.newsletter-widget {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1.5rem;
}
   
.newsletter-widget__title {
  margin-bottom: 0.75rem;
  font-size: 22px;
  line-height: 1.4;
}
   
.newsletter-widget__description {
  margin-bottom: 1.5rem;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* Newsletter popup/modal */
   
.newsletter-popup {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(5 6 8 / 0.9);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.newsletter-popup.active {
  pointer-events: auto;
  opacity: 1;
}
   
.newsletter-popup__content {
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 2rem;
}
   
@media (min-width: 768px) {
   
  .newsletter-popup__content {
    padding: 3rem;
  }
}
   
.newsletter-popup__content {
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: 600px;
  position: relative;
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.newsletter-popup.active .newsletter-popup__content {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.newsletter-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
.newsletter-popup__close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
}
   
.newsletter-popup__close {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.newsletter-popup__close:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.newsletter-popup__close {
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  cursor: pointer;
}
   
.newsletter-popup__close:hover {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.newsletter-popup__title {
  margin-bottom: 1rem;
  font-size: 38px;
  line-height: 1.2;
}
   
.newsletter-popup__description {
  margin-bottom: 1.5rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* ============================================
   NEWSLETTER SUCCESS/ERROR STATES
============================================= */
   
.newsletter-form--success .newsletter-form__wrapper {
  display: none;
}
   
.newsletter-form__success-message {
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
  background-color: rgb(34 197 94 / 0.1);
  padding: 1.5rem;
  text-align: center;
  display: none;
}
   
.newsletter-form--success .newsletter-form__success-message {
  display: block;
}
   
.newsletter-form__success-icon {
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
   
.newsletter-form__success-title {
  margin-bottom: 0.5rem;
  font-size: 22px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
   
.newsletter-form__success-text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.newsletter-form--error .newsletter-form__input {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
   
.newsletter-form__error-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  display: none;
}
   
.newsletter-form--error .newsletter-form__error-message {
  display: flex;
}
   
.newsletter-form__error-message::before {
        content: '⚠';
        display: inline-block;
        flex-shrink: 0;
        --tw-text-opacity: 1;
        color: rgb(248 113 113 / var(--tw-text-opacity));
    }
   
/* ============================================
   NEWSLETTER BENEFITS GRID
============================================= */
   
.newsletter-benefits {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .newsletter-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .newsletter-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
.newsletter-benefit {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
   
.newsletter-benefit__icon {
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(217 178 130 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  border-radius: 9999px;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   
.newsletter-benefit__content {
  flex: 1 1 0%;
}
   
.newsletter-benefit__title {
  margin-bottom: 0.5rem;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
   
.newsletter-benefit__description {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ============================================
   RESPONSIVE BEHAVIOR
============================================= */
   
@media (max-width: 640px) {
    /* Stack form elements on mobile */
    .newsletter-form__wrapper {
    flex-direction: column;
  }

    .newsletter-form__button {
    width: 100%;
  }

    /* Reduce padding on mobile */
    .newsletter-popup__content {
    padding: 1.5rem;
  }

    /* Adjust hero form on mobile */
        .newsletter-form--hero .newsletter-form__input {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

        .newsletter-form--hero .newsletter-form__button {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
/* ============================================
   ACCESSIBILITY
============================================= */
   
/* Focus visible for keyboard navigation */
   
.newsletter-form__input:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
/* Screen reader only text */
   
.newsletter-form__sr-only {
        padding: 0;
        border: 0;
        position: absolute;
        margin: -1px;
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* Loading state for button */
   
.newsletter-form__button--loading {
  pointer-events: none;
  opacity: 0.5;
}
   
.newsletter-form__button--loading::after {
        content: '';
        margin-left: 0.5rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        border-width: 2px;
        --tw-border-opacity: 1;
        border-color: rgb(5 6 8 / var(--tw-border-opacity));
        border-top-color: transparent;
        border-radius: 9999px;
    }
   
@keyframes spin {
   
  to {
    transform: rotate(360deg);
  }
}
   
.newsletter-form__button--loading::after {
  animation: spin 1s linear infinite;
}
   
/* ============================================
   USAGE EXAMPLES IN COMMENTS:

   1. Basic Newsletter Form:
   <form class="newsletter-form" action="#" method="post">
       <div class="newsletter-form__wrapper">
           <input
               type="email"
               class="newsletter-form__input"
               placeholder="Enter your email address"
               aria-label="Email address"
               required
           >
           <button type="submit" class="newsletter-form__button">
               Subscribe
               <i class="fa-solid fa-arrow-right"></i>
           </button>
       </div>
       <p class="newsletter-form__privacy">
           <i class="fa-solid fa-lock"></i>
           We respect your privacy. Unsubscribe at any time.
       </p>
   </form>

   2. Hero Newsletter Form (Large):
   <form class="newsletter-form newsletter-form--hero">
       <!-- Same structure as basic -->
   </form>

   3. Compact Newsletter Form (Sidebar):
   <div class="newsletter-widget">
       <h3 class="newsletter-widget__title">Stay Updated</h3>
       <p class="newsletter-widget__description">
           Get the latest news and offers
       </p>
       <form class="newsletter-form newsletter-form--compact">
           <!-- Form fields -->
       </form>
   </div>

   4. Footer Newsletter Form:
   <form class="newsletter-form newsletter-form--footer newsletter-form--compact">
       <!-- Form fields -->
   </form>

   5. Newsletter Popup:
   <div class="newsletter-popup" id="newsletter-popup">
       <div class="newsletter-popup__content">
           <button class="newsletter-popup__close" aria-label="Close">
               <i class="fa-solid fa-times"></i>
           </button>
           <h3 class="newsletter-popup__title">Join Our Newsletter</h3>
           <p class="newsletter-popup__description">
               Get exclusive offers and updates
           </p>
           <form class="newsletter-form">
               <!-- Form fields -->
           </form>
       </div>
   </div>

   6. Success State:
   <form class="newsletter-form newsletter-form--success">
       <div class="newsletter-form__success-message">
           <div class="newsletter-form__success-icon">✓</div>
           <h4 class="newsletter-form__success-title">Thank You!</h4>
           <p class="newsletter-form__success-text">
               You've been subscribed successfully.
           </p>
       </div>
   </form>

   7. Error State:
   <form class="newsletter-form newsletter-form--error">
       <div class="newsletter-form__wrapper">
           <!-- Form fields -->
       </div>
       <p class="newsletter-form__error-message">
           Please enter a valid email address.
       </p>
   </form>

============================================= */
   
/* --------------------------
    Enhanced Lightbox
    Features:
    - Loading states (spinner, error)
    - Image captions (title, category, description)
    - Fullscreen mode
    - Slideshow controls
 -------------------------- */
   
.lightbox {
  position: fixed;
  inset: 0px;
  z-index: 999;
  display: none;
  height: 100%;
  width: 100%;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.9;
  padding: 2rem;
}
   
.lightbox-open {
  overflow: hidden;
}
   
.lightbox-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
.lightbox.open {
  display: flex;
}
   
/* Close button */
   
.lightbox-close {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 50;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 9999px;
  text-align: right;
  font-size: 38px;
  line-height: 1.2;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.lightbox-close:hover,
		.lightbox-close:focus-visible {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.lightbox-close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .lightbox-close:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.lightbox-close:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Content wrapper */
   
.lightbox-content {
  position: relative;
  width: 100%;
  border-radius: 0.75rem;
  padding: 0px;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 1280px) {
   
  .lightbox-content {
    width: 75%;
  }
}
   
.lightbox-content {
		animation: lightboxImage 0.5s ease;
	}
   
.lightbox-content img {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 0.75rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
/* Loading spinner */
   
.lightbox-loader {
  position: absolute;
  inset: 0px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
		display: none;
}
   
.lightbox-loader .spinner {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  border-top-color: transparent;
			animation: spin 1s linear infinite;
}
   
/* Error state */
   
.lightbox-error {
  position: absolute;
  inset: 0px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.75;
  padding: 2rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
		display: none;
		flex-direction: column;
		gap: 1rem;
}
   
.lightbox-error::before {
			content: '\f071';
			font-size: 2.25rem;
			line-height: 2.5rem;
			--tw-text-opacity: 1;
			color: rgb(217 178 130 / var(--tw-text-opacity));
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
		}
   
/* Caption section */
   
.lightbox-caption {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem;
}
   
.lightbox-caption-title {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.lightbox-caption-category {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.lightbox-caption-description {
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* Controls container */
   
.lightbox-controls {
  position: absolute;
  left: 0px;
  top: 50%;
  display: flex;
  height: 2.5rem;
  width: 100%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
/* Additional controls (fullscreen, play/pause) */
   
.lightbox-additional-controls {
  position: absolute;
  top: 1rem;
  right: 4rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
   
/* Arrow buttons */
   
.lightbox-arrows {
  position: relative;
  z-index: 50;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 210 212 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.lightbox-arrows:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.lightbox-arrows:hover::before {
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.lightbox-arrows:focus-visible {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .lightbox-arrows:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.lightbox-arrows:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.lightbox-arrows:active::before {
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.lightbox-arrows::before {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  opacity: 1;
			font-family: "Font Awesome 5 Free";
}
   
.lightbox-arrows.lightbox-next {
  left: 0px;
}
   
.lightbox-arrows.lightbox-next::before {
				content: "\f054";
			}
   
.lightbox-arrows.lightbox-prev {
  right: 0px;
}
   
.lightbox-arrows.lightbox-prev::before {
				content: "\f053";
			}
   
/* Fullscreen button */
   
.lightbox-fullscreen {
  position: relative;
  z-index: 50;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 210 212 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.lightbox-fullscreen:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.lightbox-fullscreen:focus-visible {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .lightbox-fullscreen:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.lightbox-fullscreen:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.lightbox-fullscreen i {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.lightbox-fullscreen:hover i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-fullscreen:focus-visible i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-fullscreen:active i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-fullscreen .fa-compress {
			display: none;
		}
   
/* Play/Pause button */
   
.lightbox-play-pause {
  position: relative;
  z-index: 50;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 210 212 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.lightbox-play-pause:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.lightbox-play-pause:focus-visible {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .lightbox-play-pause:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.lightbox-play-pause:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.lightbox-play-pause i {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.lightbox-play-pause:hover i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-play-pause:focus-visible i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-play-pause:active i {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.lightbox-play-pause .pause-icon {
			display: none;
		}
   
/* Fullscreen mode adjustments */
   
.lightbox:fullscreen {
  padding: 1rem;
}
   
.lightbox:fullscreen .lightbox-content {
  width: 100%;
  max-width: 1536px;
}
   
.lightbox:fullscreen .lightbox-close {
  top: 1rem;
  right: 1rem;
}
   
.lightbox:fullscreen .lightbox-additional-controls {
  top: 1rem;
  right: 5rem;
}
   
/* Lightbox image animation */
   
@keyframes lightboxImage {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
   
/* Spinner animation */
   
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
   
/* Lightbox image fade transition */
   
.lightbox-img {
	transition: opacity 0.3s ease-out;
}
   
.lightbox-img.fade-in {
  opacity: 1;
}
   
/* Screen reader only (for announcements) */
   
.sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0px;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
}
   
/* Responsive adjustments */
   
@media (max-width: 768px) {
	.lightbox {
    padding: 1rem;
  }

	.lightbox-content {
    width: 100%;
  }

	.lightbox-caption {
    padding: 0.75rem;
  }

	.lightbox-caption-title {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }

	.lightbox-additional-controls {
    top: 0.5rem;
    right: 3.5rem;
    gap: 0.25rem;
  }

	.lightbox-fullscreen,
	.lightbox-play-pause {
    height: 2.25rem;
    width: 2.25rem;
  }

		.lightbox-fullscreen i, .lightbox-play-pause i {
    font-size: 0.75rem;
    line-height: 1rem;
  }

	.lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    height: 2.25rem;
    width: 2.25rem;
    font-size: 28px;
    line-height: 1.4;
  }
}
   
/*==================================================
    Feedback Components
    Loading states, alerts, and notifications
==================================================*/
   
/* ===================================
    1. Loading Spinner
    Use for form submissions and async operations
====================================== */
   
.spinner {
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
}
   
@keyframes spin {
   
  to {
    transform: rotate(360deg);
  }
}
   
.spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
    border-color: currentColor;
    border-right-color: transparent;
}
   
.spinner--sm {
  height: 1rem;
  width: 1rem;
}
   
.spinner--lg {
  height: 2rem;
  width: 2rem;
  border-width: 3px;
}
   
.spinner--xl {
  height: 3rem;
  width: 3rem;
  border-width: 4px;
}
   
/* Spinner color variants */
   
.spinner--primary {
    border-color: #D9B282;
    border-right-color: transparent;
}
   
.spinner--light {
    border-color: #D1D2D4;
    border-right-color: transparent;
}
   
.spinner--dark {
    border-color: #0E1013;
    border-right-color: transparent;
}
   
/* Button loading state */
   
.btn--loading {
  pointer-events: none;
  position: relative;
}
   
.btn--loading .btn__text {
  opacity: 0;
}
   
.btn--loading .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* ===================================
    2. Alert / Notification Component
    For form feedback and system messages
====================================== */
   
.alert {
  position: relative;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  padding: 1rem;
}
   
.alert__icon {
  margin-top: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}
   
.alert__content {
  min-width: 0px;
  flex: 1 1 0%;
}
   
.alert__title {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  font-weight: 500;
}
   
.alert__message {
  margin-bottom: 0px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
}
   
.alert__close {
  margin-right: -0.25rem;
  margin-top: -0.25rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.alert__close:hover {
  background-color: rgb(0 0 0 / 0.1);
}
   
.alert__close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .alert__close:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/* Alert variants */
   
.alert--success {
  border-color: rgb(34 197 94 / 0.3);
  background-color: rgb(34 197 94 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}
   
.alert--success .alert__title {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}
   
.alert--error {
  border-color: rgb(239 68 68 / 0.3);
  background-color: rgb(239 68 68 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}
   
.alert--error .alert__title {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}
   
.alert--warning {
  border-color: rgb(245 158 11 / 0.3);
  background-color: rgb(245 158 11 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}
   
.alert--warning .alert__title {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}
   
.alert--info {
  border-color: rgb(59 130 246 / 0.3);
  background-color: rgb(59 130 246 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}
   
.alert--info .alert__title {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}
   
/* Neutral alert (default) */
   
.alert--neutral {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  background-color: rgb(14 16 19 / 0.5);
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.alert--neutral .alert__title {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/* ===================================
    3. Toast Notification
    For transient messages
====================================== */
   
.toast {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
    min-width: 280px;
    max-width: 420px;
}
   
.toast--top-right {
  top: 1rem;
  right: 1rem;
}
   
.toast--top-center {
  top: 1rem;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.toast--bottom-right {
  bottom: 1rem;
  right: 1rem;
}
   
.toast--bottom-center {
  bottom: 1rem;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Toast variants (inherit alert colors) */
   
.toast--success {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
  background-color: rgb(34 197 94 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.toast--error {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
  background-color: rgb(239 68 68 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.toast--warning {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity));
  background-color: rgb(245 158 11 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.toast--info {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
  background-color: rgb(59 130 246 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
/* ===================================
    4. Empty State
    For lists with no content
====================================== */
   
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
}
   
.empty-state__icon {
  margin-bottom: 1.5rem;
  height: 4rem;
  width: 4rem;
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
}
   
.empty-state__title {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.empty-state__message {
  margin-bottom: 1.5rem;
  max-width: 28rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
/* ===================================
    5. Skeleton Loader
    Placeholder for loading content
====================================== */
   
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
.skeleton::after {
        content: "";
        position: absolute;
        inset: 0px;
        background: linear-gradient(
            90deg,
            transparent,
            rgb(36 39 43 / 40%),
            transparent
        );
        animation: skeleton-shimmer 1.5s infinite;
    }
   
.skeleton--text {
  height: 1rem;
  width: 100%;
}
   
.skeleton--title {
  height: 1.5rem;
  width: 75%;
}
   
.skeleton--avatar {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
}
   
.skeleton--image {
  aspect-ratio: 16 / 9;
  width: 100%;
}
   
.skeleton--card {
  height: 12rem;
  width: 100%;
}
   
@keyframes skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
   
/* ===================================
    Usage Examples:

    <!-- Loading spinner in button -->
    <button class="btn btn--loading">
        <span class="btn__text">Submit</span>
        <span class="spinner"></span>
    </button>

    <!-- Standalone spinner -->
    <div class="spinner spinner--lg spinner--primary"></div>

    <!-- Success alert -->
    <div class="alert alert--success">
        <i class="alert__icon fas fa-check-circle"></i>
        <div class="alert__content">
            <h6 class="alert__title">Reservation Confirmed</h6>
            <p class="alert__message">We've sent a confirmation to your email.</p>
        </div>
        <button class="alert__close">&times;</button>
    </div>

    <!-- Toast notification -->
    <div class="toast toast--top-right toast--success">
        <i class="fas fa-check"></i>
        <span>Your message has been sent!</span>
    </div>

    <!-- Empty state -->
    <div class="empty-state">
        <i class="empty-state__icon fas fa-search"></i>
        <h4 class="empty-state__title">No Results Found</h4>
        <p class="empty-state__message">Try adjusting your search criteria.</p>
        <button class="btn">Clear Filters</button>
    </div>

    <!-- Skeleton loader -->
    <div class="skeleton skeleton--card"></div>
====================================== */
   
/*==================================================
    Print Styles
    Optimized for menu and reservation printing
==================================================*/
   
@media print {
    /* ===================================
        1. Global Print Resets
    ====================================== */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html {
        font-size: 12pt;
    }

    body {
        font-family: Georgia, "Times New Roman", serif;
        line-height: 1.5;
    }

    /* ===================================
        2. Hide Non-Essential Elements
    ====================================== */
    .header,
    .footer,
    .topbar,
    .btn-scroll-top,
    .lightbox,
    .mm-menu,
    .slider-nav-arrows,
    .slick-dots,
    .splide__pagination,
    .social_icons,
    nav,
    aside,
    .no-print {
        display: none !important;
    }

    /* ===================================
        3. Page Break Control
    ====================================== */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    img, figure {
        page-break-inside: avoid;
    }

    p, blockquote, li {
        orphans: 3;
        widows: 3;
    }

    /* ===================================
        4. Link Handling
    ====================================== */
    a,
    a:visited {
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* ===================================
        5. Content Optimization
    ====================================== */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Menu items - ensure readability */
    .menu-item,
    .dish {
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 0.5em !important;
        margin-bottom: 0.5em !important;
    }

    .menu-item__title,
    .dish__title {
        font-weight: bold !important;
    }

    .menu-item__price,
    .dish__price {
        font-weight: bold !important;
    }

    /* Section titles */
    .section-title {
        border-bottom: 2px solid #000 !important;
        margin-bottom: 1em !important;
        padding-bottom: 0.5em !important;
    }

    /* ===================================
        6. Image Handling
    ====================================== */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Hide decorative images */
    .hero-slider,
    .hero-basic,
    .hero-inner,
    [class*="__background"],
    .overlayer {
        display: none !important;
    }

    /* ===================================
        7. Print-Specific Classes
    ====================================== */
    .print-only {
        display: block !important;
    }

    .print-break-before {
        page-break-before: always;
    }

    .print-break-after {
        page-break-after: always;
    }

    .print-avoid-break {
        page-break-inside: avoid;
    }
}
   
/* Hide print-only elements on screen */
   
@media screen {
    .print-only {
        display: none !important;
    }
}
   
/* ==========================================================================
   NO-JS FALLBACKS
   Ensures graceful degradation when JavaScript is disabled or fails to load.

   Usage: Add class="no-js" to <html> element, then remove it via JS:
   <script>document.documentElement.classList.remove('no-js')</script>
========================================================================== */
   
/* ==========================================================================
   1. WOW.JS ANIMATION FALLBACK
   Elements with .wow class are hidden by default (visibility: hidden).
   Without JS, they remain hidden forever. This ensures visibility.
========================================================================== */
   
.no-js .wow {
    visibility: visible !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}
   
/* Also handle elements that might have animate.css classes directly */
   
.no-js .animate__animated {
    animation-name: none !important;
    animation-duration: 0s !important;
    opacity: 1 !important;
}
   
/* ==========================================================================
   2. MOBILE MENU FALLBACK
   Without Mmenu.js, the mobile menu is completely inaccessible.
   Show a basic navigation for no-JS users on mobile.
========================================================================== */
   
/* Hide the JS-dependent mmenu navigation */
   
.no-js #menu {
    display: none !important;
}
   
/* Fallback mobile navigation - hidden by default when JS works */
   
.mobile-nav-fallback {
    display: none;
}
   
/* Show fallback nav only without JS on mobile */
   
.no-js .mobile-nav-fallback {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #050608;
    border-bottom: 1px solid #3A3D41;
}
   
@media (min-width: 1024px) {
    .no-js .mobile-nav-fallback {
        display: none;
    }
}
   
.mobile-nav-fallback__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
}
   
.mobile-nav-fallback__link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #D1D2D4;
    background-color: #0E1013;
    border-radius: 0.25rem;
}
   
.mobile-nav-fallback__link:hover {
    color: #D9B282;
}
   
/* Add top padding to body when fallback nav is visible */
   
.no-js body {
    padding-top: 60px;
}
   
@media (min-width: 1024px) {
    .no-js body {
        padding-top: 0;
    }
}
   
/* ==========================================================================
   3. TAB CONTENT FALLBACK
   Only first tab is visible without JS. Show all tabs stacked.
========================================================================== */
   
.no-js .tabs-content__item {
    display: block !important;
    margin-bottom: 2rem;
}
   
/* Add visual separator between tab sections */
   
.no-js .tabs-content__item:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom: 1px solid #3A3D41;
}
   
/* Hide the tab navigation since it won't work */
   
.no-js .tabs {
    display: none;
}
   
/* Show category titles as section headers instead */
   
.no-js .tabs-content .menu__category-header {
    display: block;
}
   
/* ==========================================================================
   4. CAROUSEL/SLIDER FALLBACK
   Carousels show all slides stacked without JS.
   Ensure first slide is prominent and others are accessible.
========================================================================== */
   
/* Slick Carousel - Show all slides in a grid */
   
.no-js .slick-slider {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
   
@media (min-width: 768px) {
    .no-js .slick-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
   
.no-js .slick-slide {
    display: block !important;
}
   
/* Hide carousel navigation elements */
   
.no-js .slick-arrow,
.no-js .slick-dots,
.no-js .slider-nav-arrows {
    display: none !important;
}
   
/* Hero slider - Show only first slide */
   
.no-js .slider-hero .slick-slide:not(:first-child) {
    display: none !important;
}
   
.no-js .slider-hero .slick-slide:first-child {
    display: block !important;
}
   
/* Thumbnail navigation - hide it */
   
.no-js .slider-thumbnail {
    display: none !important;
}
   
/* Splide Carousel Fallback */
   
.no-js .splide__list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    transform: none !important;
}
   
.no-js .splide__slide {
    display: block !important;
    flex-shrink: 0;
}
   
.no-js .splide__arrows,
.no-js .splide__pagination {
    display: none !important;
}
   
/* Badges carousel - show in a centered grid */
   
.no-js #badges__splide .splide__list {
    justify-content: center;
}
   
.no-js #badges__splide .splide__slide {
    width: auto;
}
   
/* Special offers - show first 2-3 items */
   
.no-js .special-offers__content .slick-slide:nth-child(n+4) {
    display: none !important;
}
   
/* ==========================================================================
   5. STICKY HEADER FALLBACK
   Header won't become sticky without JS. Ensure it's still usable.
========================================================================== */
   
.no-js .header {
    position: relative;
}
   
/* ==========================================================================
   6. SCROLL-TO-TOP BUTTON
   Hide since it won't work without JS
========================================================================== */
   
.no-js #myBtn {
    display: none !important;
}
   
/* ==========================================================================
   7. LIGHTBOX FALLBACK
   Make gallery images link to full-size version
========================================================================== */
   
.no-js [data-lightbox] {
    cursor: default;
}
   
/* Hide lightbox icon overlay */
   
.no-js .gallery-block__item-icon {
    display: none;
}
   
/* ==========================================================================
   8. DROPDOWN MENU FALLBACK
   Ensure dropdowns work via CSS :hover/:focus
========================================================================== */
   
.no-js .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: #0E1013;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    transition: opacity 0.2s, visibility 0.2s;
}
   
.no-js .dropdown:hover .dropdown-menu,
.no-js .dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
}
   
/* ==========================================================================
   NOSCRIPT MESSAGE
   Styles for the <noscript> warning message
========================================================================== */
   
.noscript-warning {
    background-color: #D9B282;
    color: #050608;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}
   
.noscript-warning a {
    text-decoration: underline;
    font-weight: 600;
}
   
/* =====================================
    Hover Effects Library
    Reusable hover interactions for premium UX
===================================== */
   
/* =====================================
    Lift Effect - Subtle elevation on hover
===================================== */
   
.hover-lift {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
   
.hover-lift:hover,
.hover-lift:focus-within {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Lift with shadow enhancement */
   
.hover-lift--shadow {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-lift--shadow:hover,
.hover-lift--shadow:focus-within {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* =====================================
    Glow Effect - Subtle glow on hover
===================================== */
   
.hover-glow {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    position: relative;
}
   
.hover-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    box-shadow: 0 0 20px rgba(209, 178, 130, 0.4);
    pointer-events: none;
}
   
.hover-glow:hover::before,
.hover-glow:focus-within::before {
    opacity: 1;
}
   
/* =====================================
    Scale Effect - Zoom on hover
===================================== */
   
.hover-scale {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}
   
.hover-scale:hover,
.hover-scale:focus-within {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Scale down variant */
   
.hover-scale--sm {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-scale--sm:hover,
.hover-scale--sm:focus-within {
    transform: scale(1.02);
}
   
/* =====================================
    Brightness Effect - Image hover
===================================== */
   
.hover-brighten {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-brighten:hover,
.hover-brighten:focus-within {
    filter: brightness(1.1);
}
   
/* Darken variant */
   
.hover-darken {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-darken:hover,
.hover-darken:focus-within {
    filter: brightness(0.9);
}
   
/* =====================================
    Underline Effect - Elegant text hover
===================================== */
   
.hover-underline {
    position: relative;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease-out;
}
   
.hover-underline:hover::after,
.hover-underline:focus::after {
    width: 100%;
}
   
/* Animated underline (from center) */
   
.hover-underline--center::after {
    left: 50%;
    transform: translateX(-50%);
}
   
/* =====================================
    Tilt Effect - 3D subtle rotation
===================================== */
   
.hover-tilt {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform-style: preserve-3d;
}
   
.hover-tilt:hover,
.hover-tilt:focus-within {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}
   
/* =====================================
    Shimmer Effect - Shine animation
===================================== */
   
.hover-shimmer {
    position: relative;
    overflow: hidden;
}
   
.hover-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease-out;
}
   
.hover-shimmer:hover::before,
.hover-shimmer:focus-within::before {
    left: 150%;
}
   
/* =====================================
    Border Grow Effect
===================================== */
   
.hover-border-grow {
    position: relative;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.hover-border-grow::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #D9B282;
    border-radius: inherit;
    transform: scale(1);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
   
.hover-border-grow:hover::before,
.hover-border-grow:focus-within::before {
    transform: scale(1.05);
    opacity: 1;
}
   
/* =====================================
    Accessibility - Reduced Motion
===================================== */
   
@media (prefers-reduced-motion: reduce) {
    .hover-lift,
    .hover-lift--shadow,
    .hover-scale,
    .hover-scale--sm,
    .hover-tilt,
    .hover-border-grow {
        transition: none !important;
        transform: none !important;
    }

    .hover-lift:hover,
    .hover-lift--shadow:hover,
    .hover-scale:hover,
    .hover-scale--sm:hover,
    .hover-tilt:hover {
        transform: none !important;
    }

    .hover-shimmer::before,
    .hover-glow::before,
    .hover-underline::after {
        transition: none !important;
    }
}
   
/* =====================================
    Performance Optimization
===================================== */
   
/* Enable GPU acceleration for smoother animations */
   
.hover-lift,
.hover-lift--shadow,
.hover-scale,
.hover-scale--sm,
.hover-tilt {
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
   
/* Remove will-change after transition */
   
.hover-lift,
.hover-scale,
.hover-scale--sm,
.hover-tilt {
    transition: transform 0.3s ease-out;
}
   
.hover-lift:not(:hover):not(:focus-within),
.hover-scale:not(:hover):not(:focus-within),
.hover-tilt:not(:hover):not(:focus-within) {
    will-change: auto;
}
   
/* ===================================
    Course Timeline Component
    Used for: Chef's Table tasting menu sequence
====================================== */
   
.course-timeline {
  position: relative;
}
   
.course-timeline__list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .course-timeline__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .course-timeline__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
  }
}
   
@media (min-width: 1280px) {
   
  .course-timeline__list {
    gap: 3rem;
  }
}
   
.course-timeline__item {
  position: relative;
}
   
.course-timeline__card {
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.course-timeline__card:hover {
  --tw-translate-y: -8px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
   
.course-timeline__image {
  position: relative;
  height: 16rem;
  width: 100%;
  overflow: hidden;
}
   
.course-timeline__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}
   
.course-timeline__card:hover .course-timeline__image img {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.course-timeline__content {
  padding: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .course-timeline__content {
    padding: 2rem;
  }
}
   
.course-timeline__number {
  margin-bottom: 0.5rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.course-timeline__name {
  margin-bottom: 0.75rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.course-timeline__description {
  margin-bottom: 1rem;
  font-size: 16px;
  letter-spacing: 0.25px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.course-timeline__pairing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  padding-top: 1rem;
}
   
.course-timeline__pairing .icon {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.course-timeline__pairing .text {
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* ===================================
    Chef Quote Block Component
    Used for: Chef philosophy and storytelling
====================================== */
   
.chef-quote {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 0px;
}
   
@media (min-width: 1024px) {
   
  .chef-quote {
    padding-bottom: 1.5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .chef-quote {
    padding-top: 9rem;
    padding-bottom: 0px;
  }
}
   
.chef-quote__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
.chef-quote__marks {
  margin-bottom: 1rem;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 3.75rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  opacity: 0.2;
}
   
@media (min-width: 1024px) {
   
  .chef-quote__marks {
    font-size: 6rem;
    line-height: 1;
  }
}
   
.chef-quote__marks {
  position: absolute;
  top: 5rem;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
@media (min-width: 1024px) {
   
  .chef-quote__marks {
    top: 3rem;
  }
}
   
.chef-quote__text {
  position: relative;
  z-index: 10;
  font-size: 22px !important;
  line-height: 1.4 !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 1024px) {
   
  .chef-quote__text {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
.chef-quote__text {
  text-align: center;
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
   
.chef-quote__attribution {
  text-align: center;
}
   
.chef-quote__attribution .name {
  display: block;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.chef-quote__attribution .title {
  margin-top: 0.25rem;
  display: block;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* ===================================
    Reservation Card Component
    Used for: Chef's Table booking information
====================================== */
   
.reservation-card {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 2rem;
}
   
@media (min-width: 1024px) {
   
  .reservation-card {
    padding: 3rem;
  }
}
   
.reservation-card {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  text-align: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
}
   
.reservation-card__title {
  margin-bottom: 1.5rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.reservation-card__details {
  margin-bottom: 2rem;
}
   
.reservation-card__details > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
   
.reservation-card__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
   
.reservation-card__detail .icon {
  width: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.reservation-card__detail .text {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.reservation-card__cta > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
   
.reservation-card__cta {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  padding-top: 1.5rem;
}
   
.reservation-card__note {
  margin-top: 1.5rem;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* =====================================
    Header Styles
===================================== */
   
/*====================
    Header Area 
======================*/
   
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 99;
  display: flex;
  width: 100%;
  transform: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0px;
  padding-right: 1rem;
  opacity: 1;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
@media (min-width: 1024px) {
   
  .header {
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .header {
    top: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
.header__content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
   
.header__logo {
  width: 160px;
  padding-left: 1rem;
}
   
@media (min-width: 768px) {
   
  .header__logo {
    width: 180px;
  }
}
   
@media (min-width: 1280px) {
   
  .header__logo {
    padding-left: 0px;
  }
}
   
.header__logo a {
  border-radius: 0.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.header__logo a:hover {
  opacity: 0.8;
}
   
.header__logo a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.header__logo a:active {
  opacity: 0.7;
}
   
.header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .header__nav {
    gap: 2rem;
  }
}
   
.header__menu {
  display: none;
  flex-wrap: wrap;
  align-items: center;
}
   
@media (min-width: 1280px) {
   
  .header__menu {
    display: flex;
  }
}
   
.header__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-left-width: 0px;
  padding-left: 0px;
}
   
@media (min-width: 1024px) {
   
  .header__social {
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-left-color: rgb(94 97 101 / var(--tw-border-opacity));
    padding-left: 1.5rem;
  }
}
   
.header__menu-list {
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
   
.header__menu-list li {
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.header__menu-list li a {
  position: relative;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.header__menu-list li a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.header__menu-list li a:focus {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.header__menu-list li a:before,
                .header__menu-list li a:after{
                    content: '';
                    display: block;
                    position: absolute;
                    height: 1px;
                    width: 0;

                }
   
.header__menu-list li a:before{
                    transition: width 0s ease,background .4s ease;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
   
.header__menu-list li a:after{
                    bottom: 0;
                    background: #D9B282;
                    transition: width .4s ease;
                }
   
.header__menu-list li a:hover:before {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
                        left:0;
                        width: 97.8%;
                        transition: width .4s ease;
}
   
.header__menu-list li a:hover:after{
                        left:0;
                        width: 90%;
                        background: 0 0;
                        transition: all 0s ease;
                    }
   
.header__menu-list li a:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.header__menu-list li a:active {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.header__menu-list li.dropdown {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 0.75rem;
}
   
.header__menu-list li.dropdown.simple-dropdown:after{
                    /* top-[38%] + translateY(-25%) = visually centered with menu item text */
                    top: 38%;
                    right: 0.25rem;
                    display: block;
                    height: 0.5rem;
                    width: 0.5rem;
                    font-family: Josefin Sans, sans-serif;
                    font-size: 1.5rem;
                    line-height: 2rem;
                    --tw-text-opacity: 1;
                    color: rgb(94 97 101 / var(--tw-text-opacity));
                    content: '+';
                    position: absolute;
                    transform: rotate(0) translateY(-25%);
                }
   
.header__menu-list li.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: -1.5rem;
  z-index: 50;
  min-width: 220px;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  opacity: 0;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
                    visibility: hidden;
                    max-height: 0;
                    transition: all 0.3s linear;
}
   
.header__menu-list li.dropdown .dropdown-menu li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
   
.header__menu-list li.dropdown .dropdown-menu li.dropdown {
  position: relative;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
   
.header__menu-list li.dropdown .dropdown-menu li a {
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.header__menu-list li.dropdown .dropdown-menu li a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.header__menu-list li.dropdown .dropdown-menu li a:focus {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.header__menu-list li.dropdown .dropdown-menu li a:focus-visible {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.header__menu-list li.dropdown .dropdown-menu li a.active {
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.header__menu-list li.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
                        max-height: -moz-fit-content;
                        max-height: fit-content;
                        visibility: visible;
}
   
.header__menu-list li.dropdown:hover.simple-dropdown:after {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.header__mobile {
  display: flex;
}
   
@media (min-width: 1280px) {
   
  .header__mobile {
    display: none;
  }
}
   
.header.header--sticky {
  position: fixed;
  top: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  opacity: 0;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
   
.header.header--sticky-visible {
  left: 0px;
  right: 0px;
  z-index: 999;
  opacity: 1;
}
   
/* ===================================
    Topbar
====================================== */
   
.topbar {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-color: rgb(181 183 185 / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
  padding: 0px;
}
   
@media (min-width: 1280px) {
   
  .topbar {
    display: flex;
  }
}
   
.topbar {
	/* Hide topbar on mobile and tablet devices (< 1280px) */
	display: none;

}
   
@media (min-width: 1280px) {
   
  .topbar {
    display: flex;
  }
}
   
.topbar__left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  padding-left: 2rem;
}
   
.topbar__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  padding-right: 2rem;
}
   
.topbar__right:has(.topbar__call-to) {
  padding-right: 0px;
}
   
.topbar__email,
	.topbar__phone,
	.topbar__address {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
   
.topbar__email a, .topbar__phone a, .topbar__address a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.topbar__email a > i,.topbar__phone a > i,.topbar__address a > i {
  margin-right: 0.5rem;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.25px !important;
  transition-property: none;
    transition: none;
}
   
.topbar__email a:hover, .topbar__phone a:hover, .topbar__address a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.topbar__email a:focus-visible, .topbar__phone a:focus-visible, .topbar__address a:focus-visible {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.topbar .btn {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.topbar .btn:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ===================================
    Menu Mobile
====================================== */
   
.mm-menu--offcanvas{
    z-index: 9999;
}
   
.mm-menu--theme-light {
    --mm-color-background: #0A0D0F!important;
}
   
.mm-navbar {
  --tw-border-opacity: 1 !important;
  border-color: rgb(58 61 65 / var(--tw-border-opacity)) !important;
}
   
.mm-navbar .mm-navbar__title {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
   
.mm-navbar .mm-navbar__title span {
  font-family: Barlow Condensed, sans-serif !important;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.mm-btn--next:after, .mm-btn--prev:before {
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
}
   
.mm-listitem {
  --tw-border-opacity: 1 !important;
  border-color: rgb(58 61 65 / var(--tw-border-opacity)) !important;
}
   
.mm-listitem__text {
  --tw-text-opacity: 1 !important;
  color: rgb(209 210 212 / var(--tw-text-opacity)) !important;
}
   
.mm-navbars--bottom .mm-navbar a {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.mm-listitem__text {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.mm-listitem__text:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.mm-listitem a {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.mm-listitem a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
}
   
.mm-listitem a:active {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
/* =====================================
    Header Styles
===================================== */
   
/*====================
    Footer Area 
======================*/
   
.footer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 1rem;
}
   
.footer__button {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .footer__button {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
.footer__copyright {
  width: 100%;
}
   
@media (min-width: 1280px) {
   
  .footer__copyright {
    width: 50%;
  }
}
   
.footer__copyright p {
  margin-bottom: 0px !important;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 1280px) {
   
  .footer__copyright p {
    text-align: left;
  }
}
   
.footer__copyright p br {
  display: inline;
}
   
@media (min-width: 640px) {
   
  .footer__copyright p br {
    display: none;
  }
}
   
.footer__legal {
  width: 100%;
}
   
@media (min-width: 1280px) {
   
  .footer__legal {
    width: 50%;
  }
}
   
.footer__legal ul {
  margin: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0px;
  padding-top: 1.5rem;
}
   
@media (min-width: 1280px) {
   
  .footer__legal ul {
    justify-content: flex-end;
    padding-top: 0px;
  }
}
   
.footer__legal ul li {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.footer__legal ul li:after {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
                    content: "/";
}
   
.footer__legal ul li:last-of-type:after {
  display: none;
}
   
.footer__legal ul li a {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.footer__legal ul li a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.footer__legal ul li a:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.footer__legal ul li a:active {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.footer__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .footer__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .footer__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .footer__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .footer__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.footer__container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .footer__container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .footer__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .footer__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .footer__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.footer__container {
  padding-left: 18px;
  padding-right: 18px;
}
   
@media (min-width: 768px) {
   
  .footer__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media print {
    .footer__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.footer__content {
  display: flex;
  max-width: 720px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
   
.footer__logo {
  margin-bottom: 2rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
.footer__logo a {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
   
.footer__logo img {
  height: auto;
  width: 12rem;
}
   
@media (min-width: 768px) {
   
  .footer__logo img {
    width: 16rem;
  }
}
   
.footer__info {
  margin-bottom: 0px;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 640px) {
   
  .footer__info {
    margin-bottom: 1.5rem;
    gap: 2rem;
  }
}
   
.footer__address {
  width: 100%;
  text-align: center;
}
   
@media (min-width: 640px) {
   
  .footer__address {
    width: 41.666667%;
    text-align: right;
  }
}
   
.footer__address p {
  margin-bottom: 0px;
}
   
.footer__info-contact {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1 !important;
  color: rgb(209 210 212 / var(--tw-text-opacity)) !important;
}
   
@media (min-width: 640px) {
   
  .footer__info-contact {
    width: 41.666667%;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
   
.footer__info-contact a {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
@media (min-width: 640px) {
   
  .footer__info-contact a {
    text-align: left;
  }
}
   
.footer__info-contact a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.footer__info-contact a:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0A0D0F;
}
   
.footer__info-contact a:active {
  --tw-text-opacity: 1;
  color: rgb(174 142 104 / var(--tw-text-opacity));
}
   
.footer__social {
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
   
/* =====================================
    Hero Styles
===================================== */
   
/*==================================================
    Hero - Carousel - Front
==================================================*/
   
.hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
   
@media (min-width: 768px) {
   
  .hero-slider {
    max-height: 100vh;
  }
}
   
.hero-slider__images {
  position: relative;
  z-index: 0;
  height: 100%;
  width: 100%;
}
   
.hero-slider .slider-hero__item {
  position: relative;
  z-index: 0;
  height: 100vh;
  overflow: hidden;
}
   
@media (min-width: 768px) {
   
  .hero-slider .slider-hero__item {
    max-height: 100vh;
  }
}
   
.hero-slider .slider-hero__item img {
  height: 100%;
  width: 100%;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.hero-slider .slider-hero__item-content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 50;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
			background-image: linear-gradient(
				to top,
				rgb(5 6 8 / 50%),
				rgb(5 6 8 / 80%) 40%
			);
}
   
.hero-slider .slider-hero__item-info {
			/* ml-[9-10%] offsets content from left edge for asymmetric hero layout */
			position: relative;
			z-index: 50;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			height: 100%;
			max-width: 42rem;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-left: 1rem;
			padding-right: 1rem;
			padding-bottom: 5rem;
			text-align: center;
		}
   
@media (min-width: 768px) {
   
  .hero-slider .slider-hero__item-info {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-slider .slider-hero__item-info {
    padding-bottom: 0px;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-slider .slider-hero__item-info {
    margin-left: 10%;
    max-width: 48rem;
  }
}
   
.hero-slider .slider-hero__item-info .subtitle {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.hero-slider .slider-hero__item-info .title {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 48px !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .hero-slider .slider-hero__item-info .title {
    font-size: 81px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-slider .slider-hero__item-info .title {
    font-size: 91px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-slider .slider-hero__item-info .title {
    font-size: 100px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
.hero-slider .slider-hero__item-info p {
  margin-bottom: 1.5rem;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.hero-slider .slider-hero .slick-active .subtitle,
			.hero-slider .slider-hero .slick-active .title,
			.hero-slider .slider-hero .slick-active p:nth-child(3),
			.hero-slider .slider-hero .slick-active .btn {
				transform: translateY(16px);
				opacity: 0;
				animation: showContent 0.4s 0.2s ease-out 1 forwards;
			}
   
.hero-slider .slider-hero .slick-active .title {
				animation-delay: 0.35s;
			}
   
.hero-slider .slider-hero .slick-active .subtitle {
				animation-delay: 0.2s;
			}
   
.hero-slider .slider-hero .slick-active p:nth-child(3) {
				animation-delay: 0.5s;
			}
   
.hero-slider .slider-hero .slick-active .btn {
				animation-delay: 0.65s;
			}
   
.hero-slider .slider-hero .splide__pagination {
  bottom: 18% !important;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 1rem;
}
   
@media (min-width: 768px) {
   
  .hero-slider .slider-hero .splide__pagination {
    bottom: 0px;
    top: 0px;
    right: 0px;
    width: 3rem;
    flex-direction: column;
  }
}
   
.hero-slider .thumbnail {
  position: absolute;
  right: 0px;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  height: auto;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .hero-slider .thumbnail {
    width: 480px;
  }
}
   
@media (min-width: 768px) {
   
  .hero-slider .thumbnail {
    right: 0.5rem;
    width: 560px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.hero-slider .slider-thumbnail {
  position: relative;
  width: 100%;
}
   
@media (min-width: 1024px) {
   
  .hero-slider .slider-thumbnail {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
.hero-slider .slider-thumbnail__item {
  position: relative;
  z-index: 0;
  height: 110px;
  flex-shrink: 0;
  border-radius: 1rem;
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(217 178 130 / var(--tw-border-opacity)) !important;
  padding: 0px;
}
   
@media (min-width: 1024px) {
   
  .hero-slider .slider-thumbnail__item {
    height: 220px;
  }
}
   
.hero-slider .slider-thumbnail__item-image {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.hero-slider .slider-thumbnail__item-image img {
  height: 100%;
  width: 100%;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.4;
}
   
.hero-slider .slider-thumbnail__item-image img:hover {
  cursor: pointer;
}
   
.hero-slider .slider-thumbnail__item-image:hover img {
  opacity: 1;
}
   
.hero-slider .slider-thumbnail__item.is-active .slider-thumbnail__item-image img {
  opacity: 1;
}
   
@keyframes showContent {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
   
/*==================================================
    Hero - Basic - Front
==================================================*/
   
.hero-basic {
  position: relative;
  display: flex;
  height: 100vh;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
@media (min-width: 640px) {
   
  .hero-basic {
    min-height: 100vh;
  }
}
   
@media (min-width: 768px) {
   
  .hero-basic {
    min-height: 100vh;
  }
}
   
.hero-basic__background {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  display: block;
  height: 100%;
  width: 100%;
}
   
.hero-basic__background img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.hero-basic__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: 2rem;
  padding-left: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .hero-basic__container {
    padding-top: 3rem;
    padding-left: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-basic__container {
    padding-top: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-basic__container {
    padding-left: 12rem;
  }
}
   
.hero-basic__container {
		background-image: linear-gradient(
			to left,
			rgb(5 6 8 / 20%),
			rgb(5 6 8 / 60%) 70%
		);
	}
   
.hero-basic__content {
  grid-column: span 11 / span 11;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
   
@media (min-width: 640px) {
   
  .hero-basic__content {
    grid-column: span 10 / span 10;
  }
}
   
@media (min-width: 768px) {
   
  .hero-basic__content {
    grid-column: span 8 / span 8;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-basic__content {
    grid-column: span 6 / span 6;
  }
}
   
.hero-basic__subtitle {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-transform: capitalize;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.hero-basic__title {
  margin-bottom: 1rem;
  font-size: 48px !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .hero-basic__title {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 1280px) {
   
  .hero-basic__title {
    font-size: 91px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
.hero-basic__description {
  margin-bottom: 1.5rem;
  display: flex;
  width: 83.333333%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
.hero-basic__description p {
  font-size: 21px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.5px !important;
}
   
.hero-basic.hero-center .hero-basic__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0px;
  padding-right: 0px;
}
   
.hero-basic.hero-center .hero-basic__content {
  margin-left: auto;
  margin-right: auto;
  align-items: center !important;
  text-align: center;
}
   
@media (min-width: 1280px) {
   
  .hero-basic.hero-center .hero-basic__content {
    max-width: 75%;
  }
}
   
.hero-basic.hero-center .hero-basic__title {
  text-align: center;
}
   
.hero-basic.hero-center .hero-basic__subtitle {
  text-align: center;
}
   
.hero-basic.hero-center .hero-basic__description {
  align-items: center;
  justify-content: center;
}
   
/*==================================================
    Hero - Inner
==================================================*/
   
.hero-inner {
  position: relative;
  z-index: 0;
  height: 16rem;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
@media (min-width: 768px) {
   
  .hero-inner {
    height: 24rem;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-inner {
    height: 640px;
    min-height: 640px;
  }
}
   
.hero-inner__background {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  display: block;
  height: 100%;
  width: 100%;
}
   
.hero-inner__background img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.25;
}
   
.hero-inner__container {
  position: relative;
  z-index: 20;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
}
   
.hero-inner__content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .hero-inner__content {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.hero-inner__title {
  margin-bottom: 0.5rem;
  text-align: center;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .hero-inner__title {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 1024px) {
   
  .hero-inner__title {
    font-size: 81px !important;
    line-height: 1.2 !important;
    letter-spacing: -1.5px !important;
  }
}
   
.hero-inner__breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.hero-inner__breadcrumbs p {
  margin-bottom: 0px;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.hero-inner__breadcrumbs p a {
  margin-bottom: 0px;
  font-family: Mulish, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.hero-inner__breadcrumbs p a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/*==================================================
    Breadcrumb Component
    Extension: Structured breadcrumb navigation for hero sections
    Justification: Provides semantic navigation with visual separators
==================================================*/
   
.breadcrumb__list {
  margin: 0px;
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 0px;
}
   
.breadcrumb__item {
  font-family: Mulish, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  display: flex;
  align-items: center;
	/* Responsive font size: smaller on mobile, standard on desktop */
	font-size: 10px;
}
   
@media (min-width: 768px) {
   
  .breadcrumb__item {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
   
/* Elegant separator between items (except last) */
   
.breadcrumb__item:not(:last-child)::after {
		content: '•';
		/* Responsive spacing: tighter on mobile, comfortable on desktop */
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		--tw-text-opacity: 1;
		color: rgb(217 178 130 / var(--tw-text-opacity));
		opacity: 0.4;
	}
   
@media (min-width: 768px) {
   
  .breadcrumb__item:not(:last-child)::after {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
   
.breadcrumb__item:not(:last-child)::after {
		/* Responsive separator size */
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
   
@media (min-width: 768px) {
   
  .breadcrumb__item:not(:last-child)::after {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
   
.breadcrumb__item a {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.breadcrumb__item a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Current page (no link) */
   
.breadcrumb__item[aria-current="page"] {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/*==================================================
    Hero - Blog
==================================================*/
   
.blog-details .hero-inner__title {
  margin-bottom: 1rem;
  font-size: 22px !important;
  line-height: 1.4 !important;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .blog-details .hero-inner__title {
    margin-bottom: 1.5rem;
    font-size: 28px !important;
    line-height: 1.4 !important;
  }
}
   
@media (min-width: 1024px) {
   
  .blog-details .hero-inner__title {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
.blog-details .hero-inner__title{
		/* Mobile-specific improvements */
		line-height: 1.25;
	}
   
.blog-details .hero-inner__breadcrumbs {
  margin-top: 0.5rem;
}
   
@media (min-width: 768px) {
   
  .blog-details .hero-inner__breadcrumbs {
    margin-top: 0px;
  }
}
   
/* =====================================
    Blocks Styles
===================================== */
   
/*==========================
    About / Style-1 
===========================*/
   
.about__image-info {
  display: flex;
}
   
.about__image-info .about-content {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.about__image-info .about-content__image {
  position: relative;
  grid-column: span 3 / span 3;
  display: none;
  max-height: 1080px;
  overflow: hidden;
}
   
@media (min-width: 1024px) {
   
  .about__image-info .about-content__image {
    display: block;
  }
}
   
@media (min-width: 1280px) {
   
  .about__image-info .about-content__image {
    grid-column: span 6 / span 6;
  }
}
   
.about__image-info .about-content__image img {
  height: 100%;
  width: 100%;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.about__image-info .about-content__info {
  position: relative;
  grid-column: span 12 / span 12;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .about__image-info .about-content__info {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .about__image-info .about-content__info {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about__image-info .about-content__info {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .about__image-info .about-content__info {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.about__image-info .about-content__info {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .about__image-info .about-content__info {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about__image-info .about-content__info {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .about__image-info .about-content__info {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about__image-info .about-content__info {
    grid-column: span 9 / span 9;
  }
}
   
@media (min-width: 1280px) {
   
  .about__image-info .about-content__info {
    grid-column: span 6 / span 6;
    max-width: 720px;
  }
}
   
.about__image-info .about-content__description {
  padding-bottom: 0.5rem;
}
   
/*==========================
    About Us / Style-2 
===========================*/
   
.about-s2__container-fluid {
  position: relative;
  width: 100%;
}
   
.about-s2__content {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
   
.about-s2__image {
  grid-column: span 3 / span 3;
  display: none;
}
   
@media (min-width: 1024px) {
   
  .about-s2__image {
    display: block;
  }
}
   
.about-s2__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.about-s2__text {
  grid-column: span 12 / span 12;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .about-s2__text {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .about-s2__text {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about-s2__text {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .about-s2__text {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.about-s2__text {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .about-s2__text {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .about-s2__text {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .about-s2__text {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
@media (min-width: 640px) {
   
  .about-s2__text {
    grid-column: span 10 / span 10;
    grid-column-start: 2;
  }
}
   
@media (min-width: 1024px) {
   
  .about-s2__text {
    grid-column: span 6 / span 6;
  }
}
   
.about-s2__text .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  width: 100%;
}
   
/*==========================
    Special Offers
===========================*/
   
.special-offers__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .special-offers__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.special-offers__container {
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .special-offers__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .special-offers__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.special-offers .section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
}
   
.special-offers .section-title::before {
  content: var(--tw-content);
  display: none;
}
   
.special-offers__item {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .special-offers__item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers__item {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers__item {
    gap: 2rem;
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.special-offers__item-image {
  grid-column: span 3 / span 3;
  padding: 0px;
}
   
@media (min-width: 1280px) {
   
  .special-offers__item-image {
    padding: 1.5rem;
  }
}
   
.special-offers__item-image img {
  height: 100%;
  width: 100%;
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.special-offers__item-info {
  z-index: 50;
  grid-column: span 3 / span 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .special-offers__item-info {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers__item-info {
    padding: 1.5rem;
  }
}
   
.special-offers__item-info h3 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  padding-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  text-transform: capitalize;
}
   
@media (min-width: 768px) {
   
  .special-offers__item-info h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
.special-offers__item-info h3 span {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.special-offers__item-info p:first-of-type {
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  font-style: italic;
}
   
.special-offers__item-info p:last-of-type {
  margin-bottom: 0px;
}
   
.special-offers .slider-nav-arrows {
  padding-bottom: 0px;
}
   
@media (min-width: 1024px) {
   
  .special-offers .slider-nav-arrows {
    padding-top: 3rem;
  }
}
   
/*==========================
    Special Offers - full width
===========================*/
   
.special-offers-2 {
  position: relative;
  overflow: hidden;
}
   
.special-offers-2__container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
   
.special-offers-2__slider {
  width: 100%;
}
   
.special-offers-2__item {
  position: relative;
  display: inline-flex !important;
  height: 100%;
  width: 100% !important;
  justify-content: flex-end;
  overflow: hidden;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .special-offers-2__item {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers-2__item {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers-2__item {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers-2__item {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers-2__item {
    padding-right: 2.25rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers-2__item {
    padding-right: 5rem;
  }
}
   
@media (min-width: 1536px) {
   
  .special-offers-2__item {
    min-height: 891px;
  }
}
   
.special-offers-2__item .overlayer {
  position: absolute;
			background: #000000;
			background: linear-gradient(
				0deg,
				rgb(0 0 0 / 80%) 0%,
				transparent 100%
			);
}
   
.special-offers-2__item-image {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
   
.special-offers-2__item-image img {
  height: 100% !important;
  width: auto !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center !important;
     object-position: center !important;
}
   
@media (min-width: 768px) {
   
  .special-offers-2__item-image img {
    width: 100% !important;
  }
}
   
.special-offers-2__item-info {
			/* Positioned offsets (top/right) create floating card effect over slider images */
			position: relative;
			z-index: 50;
			display: flex;
			height: -moz-fit-content;
			height: fit-content;
			width: 100%;
			flex-direction: column;
			justify-content: center;
			background-color: rgb(5 6 8 / 0.9);
			padding-bottom: 1rem;
			padding: 1rem;
		}
   
@media (min-width: 640px) {
   
  .special-offers-2__item-info {
    padding: 1.5rem;
  }
}
   
.special-offers-2__item-info {
  position: relative;
}
   
.special-offers-2__item-info::before,.special-offers-2__item-info::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 10;
        border: 1px solid #D9B282;
        border-radius: 8px;
        transform: scale(0.6);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }
   
.special-offers-2__item-info::before {
        transform-origin: left top;
        border-right: 0;
        border-bottom: 0;
    }
   
.special-offers-2__item-info::after {
        transform-origin: right bottom;
        border-top: 0;
        border-left: 0;
    }
   
.special-offers-2__item-info:hover::before,.special-offers-2__item-info:hover::after,.special-offers-2__item-info:focus-within::before,.special-offers-2__item-info:focus-within::after {
        transform: scale(1);
        opacity: 1;
    }
   
.special-offers-2__item-info {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 640px) {
   
  .special-offers-2__item-info {
    padding-bottom: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers-2__item-info {
    width: 480px;
    border-radius: 0.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers-2__item-info {
    width: 580px;
  }
}
   
.special-offers-2__item-info {
			/* Animated corner borders moved to _card.css utility: card--animated-corners */
		}
   
.special-offers-2__item-info .tag {
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.special-offers-2__item-info h3 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .special-offers-2__item-info h3 {
    padding-bottom: 1rem;
  }
}
   
@media (min-width: 1024px) {
   
  .special-offers-2__item-info h3 {
    padding-bottom: 1.5rem;
    font-size: 28px !important;
    line-height: 1.4 !important;
  }
}
   
@media (min-width: 1280px) {
   
  .special-offers-2__item-info h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
.special-offers-2__item-info h3 span {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.special-offers-2__item-info p {
  display: block;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.special-offers-2__item-info p:first-of-type {
  display: block;
  font-family: Sorts Mill Goudy, serif;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
@media (min-width: 1024px) {
   
  .special-offers-2__item-info p:first-of-type {
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
  }
}
   
.special-offers-2__item-info p:last-of-type {
  margin-bottom: 0px;
}
   
.special-offers-2__item-info .btn {
  position: relative;
  z-index: 50;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
   
.special-offers-2 .slick-dots {
  bottom: 3rem !important;
  padding-right: 1rem;
  text-align: right;
}
   
@media (min-width: 640px) {
   
  .special-offers-2 .slick-dots {
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .special-offers-2 .slick-dots {
    text-align: center;
  }
}
   
/*==========================
    Menu Page 
===========================*/
   
.menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 3rem;
}
   
@media (min-width: 640px) {
   
  .menu {
    padding-top: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu {
    padding-top: 7rem;
  }
}
   
.menu:after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
  height: auto;
  width: 140px;
  background-size: contain;
  background-position: right;
  background-repeat: repeat-y;
}
   
@media (min-width: 1024px) {
   
  .menu:after {
    display: block;
  }
}
   
.menu:after {
		content: "";
		background-image: url(.././img/right.png);
	}
   
.menu:before {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: none;
  height: auto;
  width: 140px;
  background-size: contain;
  background-position: right;
  background-repeat: repeat-y;
}
   
@media (min-width: 1024px) {
   
  .menu:before {
    display: block;
  }
}
   
.menu:before {
		content: "";
		background-image: url(.././img/left.png);
	}
   
.menu__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .menu__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.menu__container {
  margin-left: auto;
  margin-right: auto;
}
   
@media print {
    .menu__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.menu__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 800px;
  text-align: center;
}
   
.menu__container .section-title p {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}
   
.menu__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
.menu__container__full {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
   
.menu__container__full .menu__category:nth-child(even) .menu__category-dishes {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
   
@media (min-width: 768px) {
   
  .menu__container__full .menu__category:nth-child(even) .menu__category-dishes {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__container__full .menu__category:nth-child(even) .menu__category-dishes {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__container__full .menu__category:nth-child(even) .menu__category-dishes {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
}
   
/*==========================
    Menu tabs
===========================*/
   
.menu-tabs .menu:after,
	.menu-tabs .menu:before {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
   
/*==========================
    Menu dish
===========================*/
   
.dish {
  margin-bottom: 1.5rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.dish__content {
  margin-bottom: 0.75rem;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding-bottom: 0.75rem;
}
   
.dish__title {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  text-transform: capitalize;
}
   
.dish__price {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.dish__description {
  margin-bottom: 0px;
  width: 100%;
  font-family: Sorts Mill Goudy, serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/*==========================
    Menu dishes list
===========================*/
   
.menu__dishes-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.menu__dishes-col {
  grid-column: span 1 / span 1;
}
   
/*==========================
    Block Menu - two columns 
===========================*/
   
.menu-block {
  position: relative;
  overflow: hidden;
  border-style: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	background-image: url(.././img/bg-menu.webp);
}
   
@media (min-width: 768px) {
   
.menu-block {
		background-attachment: fixed;
		background-position: center 100%
}
	}
   
.menu-block__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .menu-block__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu-block__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu-block__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu-block__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.menu-block__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .menu-block__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu-block__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu-block__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu-block__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .menu-block__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.menu-block__overlayer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  opacity: 0.9;
}
   
.menu-block__dishes {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
   
@media (min-width: 768px) {
   
  .menu-block__dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu-block__dishes {
    gap: 2.5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu-block__dishes {
    gap: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 1rem;
  }
}
   
.menu-block .btn {
  margin-top: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .menu-block .btn {
    margin-top: 0px;
  }
}
   
/*==========================
    Block Menu - category
===========================*/
   
.menu__category {
  position: relative;
  z-index: 50;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  height: auto;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-left: 0px;
  padding-right: 0px;
}
   
@media (min-width: 768px) {
   
  .menu__category {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__category {
    padding-top: 0px;
  }
}
   
.menu__category-image {
  grid-column: span 12 / span 12;
  height: 100%;
  max-height: 320px;
}
   
@media (min-width: 640px) {
   
  .menu__category-image {
    max-height: 480px;
  }
}
   
@media (min-width: 768px) {
   
  .menu__category-image {
    grid-column: span 4 / span 4;
    max-height: 100%;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__category-image {
    grid-column: span 6 / span 6;
  }
}
   
.menu__category-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.menu__category-dishes {
  grid-column: span 12 / span 12;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .menu__category-dishes {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu__category-dishes {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__category-dishes {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__category-dishes {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 768px) {
   
  .menu__category-dishes {
    grid-column: span 8 / span 8;
    padding-left: 2rem;
    padding-right: 0px;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__category-dishes {
    grid-column: span 6 / span 6;
    padding-left: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__category-dishes {
    padding-left: 6rem;
  }
}
   
.menu__category-dishes .section-title {
  margin-bottom: 2rem;
  max-width: none;
  padding-left: 0px;
  padding-right: 0px;
  text-align: left;
}
   
.menu__category-dishes .section-title__title {
  margin-bottom: 1rem;
  width: 100%;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize;
}
   
.menu__category-dishes .section-title p {
  padding: 0px;
}
   
.menu__category-dishes .dish:last-of-type {
  margin-bottom: 0px;
}
   
/* Alternating layout and 40-60 split handled by card--split-horizontal utility */
   
.menu__category:nth-child(even) .menu__category-image {
  order: 1;
}
   
@media (min-width: 768px) {
   
  .menu__category:nth-child(even) .menu__category-image {
    order: 2;
  }
}
   
.menu__category:nth-child(even) .menu__category-dishes {
  order: 2;
  padding-left: 0px !important;
}
   
@media (min-width: 768px) {
   
  .menu__category:nth-child(even) .menu__category-dishes {
    order: 1;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__category:nth-child(even) .menu__category-dishes {
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__category:nth-child(even) .menu__category-dishes {
    padding-right: 6rem;
  }
}
   
.menu__container__full .section-title {
  margin-bottom: 1rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
   
.menu__container__full .menu__category {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
		/* card__media and card__body column spans handled by card--split-horizontal */
}
   
.menu__container__full .menu__category-dishes {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
   
@media (min-width: 640px) {
   
  .menu__container__full .menu__category-dishes {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
   
@media (min-width: 768px) {
   
  .menu__container__full .menu__category-dishes {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}
   
@media (min-width: 1024px) {
   
  .menu__container__full .menu__category-dishes {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}
   
@media (min-width: 1280px) {
   
  .menu__container__full .menu__category-dishes {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
}
   
.menu__container__full .menu__category-dishes .section-title {
  margin-bottom: 4rem;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
   
/*==========================
    Menu Single Item
===========================*/
   
/* Extension: Menu single item detail page components */
   
/* Justification: Follows existing patterns from blog and menu modules */
   
.menu-item__meta {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
}
   
.menu-item__meta-price {
  position: relative;
  top: 0px;
  right: 0px;
  margin-top: 1rem;
}
   
@media (min-width: 640px) {
   
  .menu-item__meta-price {
    position: absolute;
    top: 0.75rem;
    margin-top: 0px;
  }
}
   
.menu-item__price-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(217 178 130 / 0.1);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
@media (min-width: 640px) {
   
  .menu-item__price-value {
    font-size: 48px;
    line-height: 1.2;
  }
}
   
.menu-item__action {
  margin-bottom: 2rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
.menu-item__action .btn {
  width: 100%;
  min-width: 280px;
  text-align: center;
}
   
@media (min-width: 640px) {
   
  .menu-item__action .btn {
    width: auto;
  }
}
   
.menu-item__action .social_icons {
  justify-content: center;
  gap: 1.5rem;
}
   
.menu-item__action .social_icons li a {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
}
   
/* Menu Item Specifications */
   
/* Extension: Table-like spec display for dish details */
   
/* Justification: Reusable pattern for nutritional/technical info across menu items */
   
.menu-item__specs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
   
.menu-item__specs-row {
  display: flex;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  padding-bottom: 0.5rem;
}
   
.menu-item__specs-label {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.menu-item__specs-value {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Menu Item Ingredients List */
   
/* Extension: Styled list for ingredients/preparation steps */
   
/* Justification: Maintains consistency with existing list patterns, reusable for recipe details */
   
.menu-item__ingredients-list {
  list-style-type: disc;
}
   
.menu-item__ingredients-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
   
.menu-item__ingredients-list {
  padding-left: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* Review Stars */
   
/* Extension: Star rating display component */
   
/* Justification: Reusable pattern for ratings across reviews and testimonials */
   
.review-stars {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Quick Info Widget Items */
   
/* Extension: Icon + text info display for sidebar widgets */
   
/* Justification: Pattern reusable for feature lists, info cards, spec highlights */
   
.quick-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.quick-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
   
.quick-info-item i {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.quick-info-item span {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* Sidebar Price Display */
   
/* Extension: Price display for sidebar related items */
   
/* Justification: Consistent pricing display across widgets, related products */
   
.sidebar-price {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.sidebar-price:before {
  display: none;
}
   
/*==========================
    Services - Ilustrations / Block 
===========================*/
   
.services-illustrations {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .services-illustrations {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .services-illustrations {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-illustrations {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .services-illustrations {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.services-illustrations__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .services-illustrations__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .services-illustrations__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-illustrations__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .services-illustrations__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.services-illustrations__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}
   
@media (min-width: 768px) {
   
  .services-illustrations__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media print {
    .services-illustrations__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.services-illustrations__content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .services-illustrations__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .services-illustrations__content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
   
.services-illustrations__card {
  grid-column: span 1 / span 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  text-align: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .services-illustrations__card {
    padding: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .services-illustrations__card {
    padding: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-illustrations__card {
    padding: 2.5rem;
  }
}
   
.services-illustrations__card {
  position: relative;
}
   
.services-illustrations__card::before,.services-illustrations__card::after {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        z-index: 10;
        border: 1px solid #D9B282;
        border-radius: 8px;
        transform: scale(0.6);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }
   
.services-illustrations__card::before {
        transform-origin: left top;
        border-right: 0;
        border-bottom: 0;
    }
   
.services-illustrations__card::after {
        transform-origin: right bottom;
        border-top: 0;
        border-left: 0;
    }
   
.services-illustrations__card:hover::before,.services-illustrations__card:hover::after,.services-illustrations__card:focus-within::before,.services-illustrations__card:focus-within::after {
        transform: scale(1);
        opacity: 1;
    }
   
.services-illustrations__card {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
        transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
   
.services-illustrations__card-illustration {
  position: relative;
  z-index: 50;
  display: flex;
  height: 8rem;
  width: 8rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  font-size: 3.75rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
            transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
   
.services-illustrations__card-illustration img.hover {
  display: none;
}
   
.services-illustrations__card-info {
  position: relative;
  z-index: 50;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.services-illustrations__card-info h4 {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.services-illustrations__card-info p {
  margin-bottom: 0px;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.services-illustrations__card:hover{
            transform: translateY(-8px) rotateX(4deg);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
   
.services-illustrations__card:hover,
        .services-illustrations__card:focus-within {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.services-illustrations__card:hover .services-illustrations__card-illustration, .services-illustrations__card:focus-within .services-illustrations__card-illustration {
                transform: translateY(-4px);
            }
   
.services-illustrations__card:hover .services-illustrations__card-illustration img, .services-illustrations__card:focus-within .services-illustrations__card-illustration img {
  display: none;
}
   
.services-illustrations__card:hover .services-illustrations__card-illustration img.hover, .services-illustrations__card:focus-within .services-illustrations__card-illustration img.hover {
  display: block;
}
   
.services-illustrations__card:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .services-illustrations__card:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
/*==========================
    Services - box
===========================*/
   
.services-box {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .services-box {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .services-box {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-box {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .services-box {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.services-box {
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .services-box {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-box {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .services-box {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}
   
.services-box .services-illustrations__content {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .services-box .services-illustrations__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 768px) {
   
  .services-box .services-illustrations__card-info {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 1024px) {
   
  .services-box .services-illustrations__card-info {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .services-box .services-illustrations__card-info {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
.services-box .services-illustrations__card-info .btn {
  margin-top: 0px;
}
   
/*==========================
    Services - Icons
===========================*/
   
.services-icons .services-illustrations__card {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
.services-icons .services-illustrations__card-illustration {
  margin-bottom: 1rem;
  height: 2.5rem;
  width: 2.5rem;
}
   
.services-icons .services-illustrations__card-info h5 {
  margin-bottom: 0px;
  text-align: center;
  font-weight: 400 !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/*==========================
    CTA Block 
===========================*/
   
.cta {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	background-image: url(.././img/bg-cta.webp);
}
   
@media (min-width: 768px) {
   
.cta {
		background-attachment: fixed;
		background-position: center 100%
}
	}
   
.cta__overlayer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  opacity: 0.75;
}
   
.cta__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .cta__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.cta__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .cta__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .cta__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.cta__content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
   
@media (min-width: 768px) {
   
  .cta__content {
    width: 83.333333%;
  }
}
   
@media (min-width: 1024px) {
   
  .cta__content {
    width: 66.666667%;
  }
}
   
@media (min-width: 1280px) {
   
  .cta__content {
    width: 58.333333%;
  }
}
   
.cta__header {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
.cta__header h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-family: Barlow Condensed, sans-serif;
  font-size: 48px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 640px) {
   
  .cta__header h2 {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
.cta__body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .cta__body {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta__body {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta__body {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta__body {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.cta__body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .cta__body {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta__body {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta__body {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
.cta__body p {
  font-family: Josefin Sans, sans-serif;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
   
.cta__body p:last-of-type {
  margin-bottom: 0px;
}
   
.cta__footer {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
}
   
/* ------ style 2 ------ */
   
.cta-2 {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	background-image: url(.././img/bg-cta-2.webp);
}
   
@media (min-width: 768px) {
   
.cta-2 {
		background-attachment: fixed;
		background-position: center 100%
}
	}
   
.cta-2__overlayer {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  opacity: 0.75;
}
   
.cta-2__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .cta-2__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta-2__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta-2__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta-2__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.cta-2__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .cta-2__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .cta-2__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta-2__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta-2__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .cta-2__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.cta-2__content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 768px) {
   
  .cta-2__content {
    width: 83.333333%;
  }
}
   
@media (min-width: 1024px) {
   
  .cta-2__content {
    width: 66.666667%;
  }
}
   
@media (min-width: 1280px) {
   
  .cta-2__content {
    width: 58.333333%;
  }
}
   
.cta-2__content .divider {
  margin-bottom: 1rem;
}
   
@media (min-width: 640px) {
   
  .cta-2.cta-2__right .cta-2__container {
    align-items: flex-end !important;
  }
   
  .cta-2.cta-2__left .cta-2__container {
    align-items: flex-start !important;
  }
}
   
.cta-2__header {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
.cta-2__header h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-family: Barlow Condensed, sans-serif;
  font-size: 48px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 640px) {
   
  .cta-2__header h2 {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
}
   
.cta-2__body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .cta-2__body {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .cta-2__body {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .cta-2__body {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
   
.cta-2__body p {
  font-family: Josefin Sans, sans-serif;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
   
.cta-2__body p:last-of-type {
  margin-bottom: 0px;
}
   
.cta-2__footer {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
}
   
/* ==========================
    Item Gallery
    Simplified hover: image scale + icon reveal only
=========================== */
   
.gallery-block__item {
  position: relative;
}
   
.gallery-block__item-image {
  position: relative;
  height: 200px !important;
  max-height: -moz-min-content !important;
  max-height: min-content !important;
  min-height: -moz-min-content !important;
  min-height: min-content !important;
  overflow: hidden;
}
   
@media (min-width: 1024px) {
   
  .gallery-block__item-image {
    height: 360px !important;
    max-height: 360px !important;
    min-height: 360px !important;
  }
}
   
.gallery-block__item-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.gallery-block__item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .gallery-block__item-info {
    padding: 0.75rem;
  }
}
   
@media (min-width: 768px) {
   
  .gallery-block__item-info {
    padding: 1rem;
  }
}
   
.gallery-block__item-info h3 {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.gallery-block__item-info p {
  margin-bottom: 0px;
  width: 100%;
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.gallery-block__item-icon {
  position: absolute;
  inset: 0.75rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(217 178 130 / 0.8);
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.gallery-block__item:hover,
	.gallery-block__item:focus-within {
  cursor: pointer;
}
   
.gallery-block__item:hover .gallery-block__item-icon, .gallery-block__item:focus-within .gallery-block__item-icon {
  opacity: 1;
}
   
.gallery-block__item:hover .gallery-block__item-image img, .gallery-block__item:focus-within .gallery-block__item-image img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.gallery-block__item:hover .gallery-block__item-info h4, .gallery-block__item:focus-within .gallery-block__item-info h4 {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.gallery-block__item:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .gallery-block__item:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.gallery-block__small {
  padding-top: 1.5rem !important;
}
   
/* ==========================
    Gallery Block
=========================== */
   
.gallery-block {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-top: 2.25rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .gallery-block {
    padding-top: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .gallery-block {
    padding-top: 6rem;
  }
}
   
.gallery-block__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .gallery-block__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .gallery-block__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .gallery-block__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .gallery-block__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.gallery-block__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
   
@media print {
    .gallery-block__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.gallery-block__list {
  margin-top: 0px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .gallery-block__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
   
/* ==========================
    Lazy Loading States
=========================== */
   
/* Default: blurred placeholder */
   
.gallery-block__item-image img[data-src] {
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}
   
/* Loading state */
   
.gallery-block__item-image img.lazy-loading {
  opacity: 0.75;
}
   
/* Loaded state */
   
.gallery-block__item-image img.lazy-loaded {
  opacity: 1;
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
		transition: filter 0.3s ease-out, opacity 0.3s ease-out;
}
   
/* Error state */
   
.gallery-block__item-image img.lazy-error {
  opacity: 0.5;
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
/* ==========================
    Gallery Block - Masonry Variant
    Uses masonry-layout library
    Maintains visual coherence with existing gallery
=========================== */
   
/* Masonry variant modifier */
   
.gallery-block--masonry {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
   
/* Masonry container wrapper */
   
.gallery-block__masonry-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .gallery-block__masonry-container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .gallery-block__masonry-container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .gallery-block__masonry-container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .gallery-block__masonry-container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.gallery-block__masonry-container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
   
@media print {
    .gallery-block__masonry-container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
/* Masonry grid container */
   
.gallery-block__masonry-grid {
  width: 100%;
  max-width: 1420px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .gallery-block__masonry-grid {
    padding-bottom: 2.25rem;
  }
}
   
@media (min-width: 1024px) {
   
  .gallery-block__masonry-grid {
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .gallery-block__masonry-grid {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.gallery-block__masonry-grid {
	/* Masonry JS controls layout - no CSS grid here */
	/* Using container-fluid (max-width: 1420px) for better 4-column layout */
}
   
/* Grid sizer and item base width - Desktop first approach */
   
.gallery-block__masonry-item,
.gallery-block__masonry-sizer {
  margin-bottom: 0.5rem;
}
   
@media (min-width: 1280px) {
   
  .gallery-block__masonry-item,
.gallery-block__masonry-sizer {
    margin-bottom: 1.5rem;
  }
}
   
.gallery-block__masonry-item,
.gallery-block__masonry-sizer {
	width: calc(25% - 20.5px); /* 4 columns with 24px gutter (24px * 3 / 4) */
}
   
/* Tablet Landscape: 3 columns */
   
@media (max-width: 1024px) {
	.gallery-block__masonry-item,
	.gallery-block__masonry-sizer {
		width: calc(33.333% - 20.5px); /* 3 columns with 24px gutter (24px * 2 / 3) */
	}
}
   
/* Tablet: 2 columns */
   
@media (max-width: 768px) {
	.gallery-block__masonry-item,
	.gallery-block__masonry-sizer {
		width: calc(33% - 20.5px); /* 2 columns with 24px gutter (24px / 2) */
	}
}
   
/* Mobile: 1 column */
   
@media (max-width: 640px) {
	.gallery-block__masonry-item,
	.gallery-block__masonry-sizer {
		width: calc(50% - 20.5px); /* Single column, full width */
	}
}
   
/* Masonry gutter sizer */
   
.gallery-block__masonry-gutter-sizer {
  width: 1.5rem;
}
   
/* Item content wrapper - reuses existing item structure */
   
.gallery-block__masonry-item .gallery-block__item {
  margin-bottom: 0px;
  cursor: pointer;
  overflow: hidden;
	/* Inherit hover, focus, and icon behavior from base .gallery-block__item */
}
   
/* Flexible height for masonry items - override fixed heights */
   
.gallery-block__masonry-item .gallery-block__item-image {
  position: relative;
  height: auto !important;
  max-height: none !important;
  min-height: 0px !important;
  overflow: hidden;
}
   
/* Let natural image aspect ratio dictate height */
   
.gallery-block__masonry-item .gallery-block__item-image img {
  height: auto;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
		/* Maintain aspect ratio */
}
   
/* Zoom effect on hover */
   
.gallery-block__masonry-item .gallery-block__item:hover .gallery-block__item-image img,
.gallery-block__masonry-item .gallery-block__item:focus-within .gallery-block__item-image img {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Info overlay - appears on hover */
   
.gallery-block__masonry-item .gallery-block__item-info {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(5 6 8 / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 6 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(5 6 8 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 6 8 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem;
  padding-bottom: 2rem;
  text-align: left;
	min-height: 40%;
}
   
.gallery-block__masonry-item .gallery-block__item-info h4 {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.gallery-block__masonry-item .gallery-block__item-info p {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Show info overlay on hover/focus */
   
.gallery-block__masonry-item .gallery-block__item:hover .gallery-block__item-info,
.gallery-block__masonry-item .gallery-block__item:focus-within .gallery-block__item-info {
  opacity: 1;
}
   
/* Hide icon overlay for masonry variant (using info instead) */
   
.gallery-block__masonry-item .gallery-block__item-icon {
  display: none;
}
   
/* Loading state - prevents layout shift */
   
.gallery-block__masonry-grid.is-loading {
  opacity: 0;
}
   
.gallery-block__masonry-grid.is-ready {
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
/*==========================
    Team Block 
===========================*/
   
.team-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
}
   
@media (min-width: 640px) {
   
  .team-block {
    padding-top: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .team-block {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .team-block {
    padding-top: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .team-block {
    padding-top: 7rem;
  }
}
   
.team-block__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
   
.team-block__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 42rem;
  text-align: center;
}
   
.team-block__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
.team-block__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.team-block__description {
  grid-column: span 12 / span 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  padding-top: 0px;
}
   
@media (min-width: 1024px) {
   
  .team-block__description {
    grid-column: span 6 / span 6;
    max-height: 24rem;
  }
}
   
@media (min-width: 1280px) {
   
  .team-block__description {
    padding: 5rem;
  }
}
   
.team-block__icon {
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
.team-block__icon img {
  height: 3rem;
  width: 3rem;
}
   
.team-block__text p {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  font-style: italic;
}
   
.team-block__team {
  grid-column: span 6 / span 6;
}
   
@media (min-width: 1024px) {
   
  .team-block__team {
    grid-column: span 3 / span 3;
  }
}
   
/*==========================
	Card Team
===========================*/
   
.card-team {
  position: relative;
  display: flex;
  height: 100%;
  max-height: 13rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
   
@media (min-width: 640px) {
   
  .card-team {
    max-height: 16rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-team {
    max-height: 20rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-team {
    max-height: 24rem;
  }
}
   
.card-team__image {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
   
.card-team__image img {
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.card-team__info {
  position: absolute;
  inset: 0px;
  z-index: 10;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(217 178 130 / 0.75);
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
   
.card-team__name {
  margin-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
}
   
.card-team__position {
  margin-bottom: 1rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-style: italic;
  --tw-text-opacity: 1 !important;
  color: rgb(36 39 43 / var(--tw-text-opacity)) !important;
}
   
.card-team .social_icons li a {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1 !important;
  color: rgb(10 13 15 / var(--tw-text-opacity)) !important;
}
   
.card-team .social_icons li a:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(130 107 78 / var(--tw-text-opacity)) !important;
}
   
.card-team:hover {
  cursor: pointer;
}
   
.card-team:hover .card-team__image img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.card-team:hover .card-team__info {
  opacity: 1;
}
   
.card-team:focus-within {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #D9B282;
}
   
.card-team:focus-within .card-team__info {
  opacity: 1;
}
   
/*==========================
    Team Block 2
===========================*/
   
.team-block-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .team-block-2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .team-block-2 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .team-block-2 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .team-block-2 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.team-block-2__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .team-block-2__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .team-block-2__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .team-block-2__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .team-block-2__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.team-block-2__container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .team-block-2__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .team-block-2__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .team-block-2__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .team-block-2__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .team-block-2__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.team-block-2__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 600px;
  text-align: center;
}
   
.team-block-2__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
.team-block-2__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}
   
.team-block-2__team {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 640px) {
   
  .team-block-2__team {
    grid-column: span 6 / span 6;
  }
}
   
@media (min-width: 1024px) {
   
  .team-block-2__team {
    grid-column: span 4 / span 4;
  }
}
   
/*==========================
	Card Team 2
===========================*/
   
.card-team-2 {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 520px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  padding: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .card-team-2 {
    padding: 0.75rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-team-2 {
    padding: 1rem;
  }
}
   
.card-team-2__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .card-team-2__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .card-team-2__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .card-team-2__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .card-team-2__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.card-team-2__container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
   
@media print {
    .card-team-2__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.card-team-2__image {
  position: relative;
  inset: 0px;
  height: 100%;
  width: 100%;
}
   
.card-team-2__image img {
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
/* Social icons - horizontal bar over image */
   
.card-team-2__image .social_icons {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 20;
  display: flex;
  width: 90%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 0.5rem;
  background-color: rgb(209 210 212 / 0.4);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
			backdrop-filter: blur(5px);
}
   
.card-team-2__image .social_icons li {
  margin-bottom: 0px;
}
   
.card-team-2__image .social_icons li a {
  margin-bottom: 0px;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1 !important;
  color: rgb(5 6 8 / var(--tw-text-opacity)) !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.card-team-2__image .social_icons li a:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.card-team-2__image .social_icons li a i {
  font-size: 1rem;
  line-height: 1.5rem;
}
   
.card-team-2__info {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(5 6 8 / 0.9);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
.card-team-2__name {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1 !important;
  color: rgb(209 210 212 / var(--tw-text-opacity)) !important;
}
   
.card-team-2__position {
  margin-bottom: 0px;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-style: italic;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.card-team-2:hover,
	.card-team-2:focus-within {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.card-team-2:hover .card-team-2__image .social_icons, .card-team-2:focus-within .card-team-2__image .social_icons {
  opacity: 1;
}
   
.card-team-2:focus-within {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #D9B282;
}
   
/*==========================
    Testimonial Slider
===========================*/
   
.testimonials {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 5rem;
  padding-bottom: 5rem;
	background-image: url(.././img/bg-testimonials.webp);
}
   
.testimonials__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials__container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.testimonials__swiper {
  width: 100%;
  max-width: 56rem;
}
   
.testimonials__swiper .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.testimonials__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
   
.testimonials__item-comment {
  width: 100%;
  text-align: center;
  font-family: Sorts Mill Goudy, serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.testimonials__item-author {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
   
.testimonials__item-author h3 {
  margin-bottom: 0px;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
}
   
.testimonials__item-author p {
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/*==================================================
    Testimonials Page - Extended Components
    Extension: Custom review/testimonial display system for page-testimonials.html
    Justification: Specific review card layout with ratings, verified badges, and stats
==================================================*/
   
/* =====================================
   Stats Section
   Use: Review statistics display (ratings, total reviews, etc.)
===================================== */
   
.testimonials-stats {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-stats {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-stats {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-stats {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-stats {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.testimonials-stats__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-stats__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-stats__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-stats__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-stats__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.testimonials-stats__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-stats__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-stats__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-stats__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-stats__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .testimonials-stats__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.testimonials-stats__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}
   
.testimonials-stats__item {
  text-align: center;
}
   
.testimonials-stats__number {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
@media (min-width: 1024px) {
   
  .testimonials-stats__number {
    font-size: 3rem;
    line-height: 1;
  }
}
   
.testimonials-stats__label {
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.testimonials-stats__stars {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
   
.testimonials-stats__stars i {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* =====================================
   Content Section
   Use: Main container for testimonials list and filters
===================================== */
   
.testimonials-content {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-content {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-content {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-content {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-content {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.testimonials-content {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-content {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .testimonials-content {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
/* =====================================
   Filter Bar
   Use: Review filtering and sorting controls
===================================== */
   
.testimonials-filter {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-filter {
    flex-direction: row;
    align-items: center;
  }
}
   
.testimonials-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
   
/* Filter button variant - inactive state with hover */
   
.btn-filter {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.btn-filter.active.focus,.btn-filter.active:focus,.btn-filter.focus,.btn-filter:active.focus,.btn-filter:active:focus,.btn-filter:focus {outline: none; box-shadow: none;}
   
.btn-filter.focus,.btn-filter:focus {
	outline: none;
	box-shadow: none;
}
   
.btn-filter {
  display: inline-block;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    letter-spacing: 0.5px;
}
   
.btn-filter:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn-filter:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.btn-filter:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn-filter:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
@media (prefers-contrast: more) {
    .btn-filter {
    border-width: 2px;
  }
}
   
.topbar .btn-filter {
  border-radius: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.topbar .btn-filter:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   

			.hero-slider .slider-hero .slick-active .btn-filter {
				transform: translateY(16px);
				opacity: 0;
				animation: showContent 0.4s 0.2s ease-out 1 forwards;
			}
   
.hero-slider .slider-hero .slick-active .btn-filter {
				animation-delay: 0.65s;
			}
   
.special-offers-2__item-info .btn-filter {
  position: relative;
  z-index: 50;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
   
.menu-block .btn-filter {
  margin-top: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .menu-block .btn-filter {
    margin-top: 0px;
  }
}
   
.menu-item__action .btn-filter {
  width: 100%;
  min-width: 280px;
  text-align: center;
}
   
@media (min-width: 640px) {
   
  .menu-item__action .btn-filter {
    width: auto;
  }
}
   
.services-box .services-illustrations__card-info .btn-filter {
  margin-top: 0px;
}
   
.location__item-content .btn-filter {
  margin-top: 0.75rem;
}
   
.post__footer .btn-filter {
  margin-top: 0px;
}
   
.btn-filter:hover {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.btn-filter[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.testimonials-filter__sort {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
   
@media (min-width: 768px) {
   
  .testimonials-filter__sort {
    width: 12rem;
  }
}
   
/* Select dropdown modifier */
   
.input--select {
  min-width: 200px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 2.5rem;
}
   
.testimonials-filter__icon {
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 35%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/* =====================================
   Testimonials Grid
   Use: Grid layout for testimonial cards
===================================== */
   
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
/* =====================================
   Testimonial Card
   Use: Individual review card with author, rating, content, and metadata
===================================== */
   
.testimonial-card {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
@media (min-width: 1024px) {
   
  .testimonial-card {
    padding: 2rem;
  }
}
   
.testimonial-card:hover {
  border-color: rgb(217 178 130 / 0.3);
}
   
.testimonial-card__header {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
   
.testimonial-card__avatar {
  flex-shrink: 0;
}
   
.testimonial-card__avatar img {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 9999px;
  border-width: 2px;
  border-color: rgb(217 178 130 / 0.3);
  -o-object-fit: cover;
     object-fit: cover;
}
   
.testimonial-card__author {
  flex-grow: 1;
}
   
.testimonial-card__name {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.testimonial-card__date {
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.testimonial-card__rating {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
   
.testimonial-card__rating i {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.testimonial-card__rating i.fa-regular {
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
}
   
.testimonial-card__title {
  margin-bottom: 0.75rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.testimonial-card__content {
  margin-bottom: 1rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  letter-spacing: 0.25px;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.testimonial-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  padding-top: 1rem;
}
   
.testimonial-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.testimonial-card__helpful {
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.testimonial-card__helpful i {
  margin-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(58 61 65 / var(--tw-text-opacity));
}
   
/* =====================================
   CTA Section
   Use: Call-to-action for leaving reviews
===================================== */
   
.testimonials-cta {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-cta {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-cta {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-cta {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.testimonials-cta__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-cta__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-cta__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-cta__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-cta__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.testimonials-cta__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-cta__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .testimonials-cta__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .testimonials-cta__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .testimonials-cta__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .testimonials-cta__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.testimonials-cta__actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 640px) {
   
  .testimonials-cta__actions {
    flex-direction: row;
  }
}
   
/*==========================
    Testimonial Slider V2
    Refined version for premium experiences
===========================*/
   
.testimonials-v2 {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding-top: 5rem;
  padding-bottom: 5rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.testimonials-v2__container {
  position: relative;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2__container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.testimonials-v2__swiper {
  width: 100%;
  max-width: 1280px;
}
   
@media (min-width: 640px) {
   
  .testimonials-v2__swiper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
.testimonials-v2 .splide {
  position: relative;
}
   
.testimonials-v2 .splide__slide {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
   
.testimonials-v2__item {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(36 39 43 / 0.3);
  background-color: rgb(5 6 8 / 0.5);
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.testimonials-v2__item:hover {
  border-color: rgb(217 178 130 / 0.3);
  background-color: rgb(10 13 15 / 0.7);
}
   
.testimonials-v2__item-quote-icon {
  font-size: 3rem;
  line-height: 1;
  color: rgb(217 178 130 / 0.2);
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2__item-quote-icon {
    font-size: 3.75rem;
    line-height: 1;
  }
}
   
.testimonials-v2__item-comment {
  width: 100%;
  flex-grow: 1;
  text-align: center;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px !important;
  letter-spacing: 0.25px !important;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2__item-comment {
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
  }
}
   
.testimonials-v2__item-rating {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
   
.testimonials-v2__item-rating i {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.testimonials-v2__item-author {
  margin-top: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
   
.testimonials-v2__item-author-image {
  height: 3.5rem;
  width: 3.5rem;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 2px;
  border-color: rgb(217 178 130 / 0.3);
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2__item-author-image {
    height: 4rem;
    width: 4rem;
  }
}
   
.testimonials-v2__item-author-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
   
.testimonials-v2__item-author-info {
  text-align: center;
}
   
.testimonials-v2__item-author-info h3 {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.testimonials-v2__item-author-info p {
  font-family: Sorts Mill Goudy, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Navigation arrows styling */
   
.testimonials-v2 .splide__arrows {
  position: relative;
}
   
.testimonials-v2 .splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  cursor: pointer;
  opacity: 1;
}
   
.testimonials-v2 .splide__arrow:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
.testimonials-v2 .splide__arrow:hover svg {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.testimonials-v2 .splide__arrow:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.testimonials-v2 .splide__arrow:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
   
.testimonials-v2 .splide__arrow:disabled:hover {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
.testimonials-v2 .splide__arrow svg {
  height: 1.5rem;
  width: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.testimonials-v2 .splide__arrow--prev {
  left: -1.5rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2 .splide__arrow--prev {
    left: -4rem;
  }
}
   
.testimonials-v2 .splide__arrow--next {
  right: -1.5rem;
}
   
@media (min-width: 1024px) {
   
  .testimonials-v2 .splide__arrow--next {
    right: -4rem;
  }
}
   
/* Custom pagination styling for v2 */
   
.testimonials-v2 .splide__pagination {
  margin-top: 3rem;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
        position: relative !important;
        bottom: auto !important;
}
   
.testimonials-v2 .splide__pagination__page {
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(58 61 65 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
            opacity: 0.6;
            margin: 0 !important;
}
   
.testimonials-v2 .splide__pagination__page:before {
  margin-left: 3px !important;
  margin-right: 3px !important;
}
   
.testimonials-v2 .splide__pagination__page:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(94 97 101 / var(--tw-bg-opacity));
                opacity: 0.8;
}
   
.testimonials-v2 .splide__pagination__page.is-active {
  width: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
                opacity: 1;
}
   
/*==========================
    Badges - Award Logos Carousel
===========================*/
   
.badges {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .badges {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .badges {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .badges {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .badges {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
.badges__item {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
.badges__item img {
  height: 100%;
  max-height: 80px;
  width: auto;
}
   
@media (min-width: 1024px) {
   
  .badges__item img {
    max-height: 120px;
  }
}
   
/*==========================
    Badge Component - Labels & Tags
    Extension: Reusable badge system for labels, tags, status indicators
    Justification: Versatile component for menu items, blog posts, products
===========================*/
   
/* Base Badge */
   
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Mulish, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
/* Badge Variants - Color Schemes */
   
.badge--primary {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.badge--secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.badge--success {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--warning {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.badge--danger {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--info {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
/* Badge Variants - Outline Style */
   
.badge--outline {
  border-width: 1px;
  border-color: currentColor;
  background-color: transparent;
}
   
.badge--outline.badge--primary {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.badge--outline.badge--primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.badge--outline.badge--secondary {
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.badge--outline.badge--secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
}
   
/* Badge Size Variants */
   
.badge--sm {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
}
   
.badge--lg {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
/* Badge with Icon */
   
.badge--icon {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
   
.badge--icon i, .badge--icon svg {
  font-size: 0.75rem;
  line-height: 1rem;
}
   
/* Special Purpose Badges */
   
.badge--new {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.badge--new::before {
        content: '✨';
        margin-right: 0.25rem;
    }
   
.badge--hot {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--hot::before {
        content: '🔥';
        margin-right: 0.25rem;
    }
   
.badge--seasonal {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--vegan {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--vegan::before {
        content: '🌱';
        margin-right: 0.25rem;
    }
   
.badge--spicy {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--spicy::before {
        content: '🌶️';
        margin-right: 0.25rem;
    }
   
.badge--gluten-free {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--chef-special {
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--chef-special::before {
        content: '👨‍🍳';
        margin-right: 0.25rem;
    }
   
.badge--verified {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.badge--verified::before {
        content: '✓';
        margin-right: 0.25rem;
        font-weight: 700;
    }
   
/* Badge Positioning Helpers */
   
.badge--absolute {
  position: absolute;
}
   
.badge--top-left {
  top: 0.5rem;
  left: 0.5rem;
}
   
.badge--top-right {
  top: 0.5rem;
  right: 0.5rem;
}
   
.badge--bottom-left {
  bottom: 0.5rem;
  left: 0.5rem;
}
   
.badge--bottom-right {
  bottom: 0.5rem;
  right: 0.5rem;
}
   
/* Badge Group */
   
.badge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
   
/*==========================
    USAGE EXAMPLES:

    Basic badge:
    <span class="badge badge--primary">New</span>

    Outline badge:
    <span class="badge badge--outline badge--primary">Featured</span>

    Badge with icon:
    <span class="badge badge--icon badge--success">
        <i class="fa-solid fa-check"></i>
        Verified
    </span>

    Special purpose badges:
    <span class="badge badge--new">New Dish</span>
    <span class="badge badge--hot">Hot Item</span>
    <span class="badge badge--vegan">Vegan</span>
    <span class="badge badge--spicy">Spicy</span>

    Badge on card/image:
    <div class="relative">
        <img src="dish.jpg" alt="Dish">
        <span class="badge badge--new badge--absolute badge--top-right">New</span>
    </div>

    Badge group:
    <div class="badge-group">
        <span class="badge badge--vegan">Vegan</span>
        <span class="badge badge--gluten-free">Gluten Free</span>
        <span class="badge badge--chef-special">Chef's Special</span>
    </div>
===========================*/
   
/*==========================
    Contact / 
===========================*/
   
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .contact {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .contact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .contact {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .contact {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.contact__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .contact__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .contact__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .contact__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .contact__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.contact__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .contact__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .contact__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .contact__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .contact__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .contact__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.contact__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 600px;
  text-align: center;
}
   
.contact__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
.contact__form {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
   
@media (min-width: 640px) {
   
  .contact__form {
    width: 83.333333%;
  }
}
   
/*==========================
    History / 
===========================*/
   
.history {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 4rem;
}
   
@media (min-width: 768px) {
   
  .history {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .history {
    padding-top: 7rem;
  }
}
   
/* Decorative side images - change paths in url() to customize */
   
.history:after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
  .history:after {
    width: 120px;
  }
}
   
@media (min-width: 1024px) {
   
  .history:after {
    display: block;
  }
}
   
@media (min-width: 1280px) {
   
  .history:after {
    width: 260px;
  }
}
   
.history:after {
		content: "";
		background-image: url(.././img/right.png);
	}
   
.history:before {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: none;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
  .history:before {
    width: 120px;
  }
}
   
@media (min-width: 1024px) {
   
  .history:before {
    display: block;
  }
}
   
@media (min-width: 1280px) {
   
  .history:before {
    width: 260px;
  }
}
   
.history:before {
		content: "";
		background-image: url(.././img/left.png);
	}
   
.history__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .history__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .history__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .history__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .history__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.history__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .history__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .history__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .history__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .history__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .history__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.history__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  max-width: 800px;
  text-align: center;
}
   
.history__container .section-title p {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}
   
.history__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
.history__content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .history__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .history__content {
    width: 91.666667%;
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
@media (min-width: 1024px) {
   
  .history__content {
    width: 83.333333%;
  }
}
   
/* Timeline start/end markers - offsets align with vertical border line */
   
.history__content:after {
  position: absolute;
  top: 0px;
  right: 0.25rem;
  z-index: 20;
  height: 0.75rem;
  width: 3rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
  .history__content:after {
    top: -1rem;
    right: -1.75rem;
    height: 1rem;
    width: 3.5rem;
  }
}
   
.history__content:after {
			content: "";
			background-image: url(.././img/start-point.png);
		}
   
.history__content:before {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  display: none;
  height: 0.75rem;
  width: 3rem;
  background-size: contain;
  background-position: top;
  background-repeat: repeat-y;
}
   
@media (min-width: 640px) {
   
  .history__content:before {
    display: block;
  }
}
   
@media (min-width: 768px) {
   
  .history__content:before {
    top: -1rem;
    left: -1.75rem;
    height: 1rem;
    width: 3.5rem;
  }
}
   
.history__content:before {
			content: "";
			background-image: url(.././img/start-point.png);
		}
   
.history__list {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
   
@media (min-width: 640px) {
   
  .history__list {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
   
@media (min-width: 768px) {
   
  .history__list {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
   
  .history__list {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .history__list {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.history__list:after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 1px;
  background-size: contain;
  background-position: top;
  background-repeat: repeat-y;
			content: "";
			background-image: url(.././img/border-list.png);
}
   
.history__list:before {
  position: absolute;
  top: 0px;
  left: -1px;
  bottom: 0px;
  z-index: 10;
  display: none;
  height: 100%;
  width: 1px;
  background-size: contain;
  background-position: top;
  background-repeat: repeat-y;
}
   
@media (min-width: 640px) {
   
  .history__list:before {
    display: block;
  }
}
   
.history__list:before {
			content: "";
			background-image: url(.././img/border-list.png);
		}
   
.history__item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 0px;
}
   
@media (min-width: 640px) {
   
  .history__item {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .history__item {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.history__item-image {
  position: relative;
  order: 1;
  grid-column: span 4 / span 4;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
   
@media (min-width: 640px) {
   
  .history__item-image {
    display: flex;
  }
}
   
.history__item-content {
  position: relative;
  order: 2;
  grid-column: span 12 / span 12;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-right: 2rem;
  text-align: right;
}
   
@media (min-width: 640px) {
   
  .history__item-content {
    grid-column: span 8 / span 8;
    padding-right: 0px;
  }
}
   
@media (min-width: 1024px) {
   
  .history__item-content {
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .history__item-content {
    padding-left: 3rem;
  }
}
   
.history__item-year {
  position: relative;
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
@media (min-width: 1024px) {
   
  .history__item-year {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
/* Timeline dot marker - simple CSS circle */
   
.history__item-year:after {
  position: absolute;
  top: 0.375rem;
  right: -3.5rem;
  z-index: 30;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
@media (min-width: 640px) {
   
  .history__item-year:after {
    right: -3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .history__item-year:after {
    right: -4.75rem;
    height: 1.5rem;
    width: 1.5rem;
  }
}
   
.history__item-year:after {
				content: "";
			}
   
.history__item-description {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.history__item-title {
  position: relative;
  font-size: 28px !important;
  line-height: 1.4 !important;
}
   
@media (min-width: 640px) {
   
  .history__item-title {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 1024px) {
   
  .history__item-title {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
@media (min-width: 640px) {
				.history__item:nth-child(even) .history__item-image {
    order: 2 !important;
  }
				.history__item:nth-child(even) .history__item-content {
    order: 1 !important;
    align-items: flex-start;
    padding-left: 0px;
    text-align: left;
  }
				@media (min-width: 1024px) {
   
    .history__item:nth-child(even) .history__item-content {
      padding-left: 0px;
    }
  }
					.history__item:nth-child(even) .history__item-year:after {
    left: -3rem;
    right: auto;
  }
					@media (min-width: 1024px) {
   
    .history__item:nth-child(even) .history__item-year:after {
      left: -4.75rem;
    }
  }
		}
   
/*==========================
   Events / Block
===========================*/
   
.events-block {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .events-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-block {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-block {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.events-block__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-block__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-block__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-block__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-block__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.events-block__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}
   
@media (min-width: 768px) {
   
  .events-block__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media print {
    .events-block__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.events-block__list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  padding-left: 0px;
  padding-right: 0px;
}
   
.events-block__item {
  grid-column: span 12 / span 12;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 768px) {
   
  .events-block__item {
    grid-column: span 6 / span 6;
  }
}
   
@media (min-width: 1024px) {
   
  .events-block__item {
    grid-column: span 4 / span 4;
  }
}
   
.events-block__item-image {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
   
.events-block__item-image img {
  display: block;
  height: 100%;
  width: 100%;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}
   
.events-block__item-info {
  padding: 2rem;
  text-align: center;
}
   
.events-block__item-info__subtitle {
  font-family: Sorts Mill Goudy, serif !important;
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
  text-transform: capitalize !important;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.events-block__item-info__title {
  width: 100%;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.events-block__item-info p {
  margin-bottom: 0px;
}
   
.events-block__item:hover,
        .events-block__item:focus-within {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.events-block__item:focus-within {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #D9B282;
}
   
/*==========================
   Events Page - Introduction Section
===========================*/
   
.events-intro {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .events-intro {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-intro {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-intro {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-intro {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.events-intro__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-intro__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-intro__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-intro__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-intro__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.events-intro__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-intro__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-intro__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-intro__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-intro__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .events-intro__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.events-intro__container .section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
}
   
.events-intro__container .section-title p:last-of-type {
  margin-bottom: 0px;
}
   
/*==========================
   Events Page - Venue Spaces Section
===========================*/
   
.venue-spaces {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .venue-spaces {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .venue-spaces {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .venue-spaces {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .venue-spaces {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.venue-spaces__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .venue-spaces__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .venue-spaces__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .venue-spaces__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .venue-spaces__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.venue-spaces__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .venue-spaces__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .venue-spaces__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .venue-spaces__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .venue-spaces__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .venue-spaces__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.venue-spaces__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  max-width: 600px;
  text-align: center;
}
   
.venue-spaces .gallery-block__list {
  padding-left: 0px;
  padding-right: 0px;
}
   
/* Venue Details List - Full Width on Top */
   
.venue-spaces__details {
  margin-bottom: 3rem;
}
   
.venue-spaces__details-title {
  margin-bottom: 1.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.venue-spaces__details-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .venue-spaces__details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
/* Individual Venue Card */
   
.venue-spaces__item {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.venue-spaces__item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.venue-spaces__item-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
   
.venue-spaces__item-icon {
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
.venue-spaces__item-icon i {
  font-size: 1.5rem;
  line-height: 2rem;
}
   
.venue-spaces__item-info {
  flex: 1 1 0%;
}
   
.venue-spaces__item-title {
  margin-bottom: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.venue-spaces__item-capacity {
  font-family: Sorts Mill Goudy, serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.venue-spaces__item-description {
  margin-bottom: 0.75rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.venue-spaces__item-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
   
.venue-spaces__item-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.venue-spaces__item-features li i {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/*==========================
   Events Page - Enhanced Services Section
===========================*/
   
.events-services {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .events-services {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-services {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-services {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-services {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.events-services__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-services__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-services__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-services__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-services__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.events-services__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-services__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .events-services__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-services__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .events-services__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .events-services__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.events-services__container .section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  max-width: 600px;
  text-align: center;
}
   
/* Split Layout: Two Columns */
   
.events-services__split {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
@media (min-width: 640px) {
   
  .events-services__split {
    gap: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-services__split {
    gap: 3rem;
  }
}
   
.events-services__column {
  grid-column: span 12 / span 12;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
   
@media (min-width: 640px) {
   
  .events-services__column {
    gap: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .events-services__column {
    grid-column: span 6 / span 6;
  }
}
   
.events-services__column-header {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-bottom-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-bottom: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-services__column-header {
    flex-direction: row;
  }
}
   
.events-services__column-icon {
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  display: flex;
  align-items: center;
  justify-content: center;
}
   
.events-services__column-icon i {
  font-size: 1.5rem;
  line-height: 2rem;
}
   
.events-services__column-icon--secondary {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.events-services__column-title {
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .events-services__column-title {
    font-size: 38px;
    line-height: 1.2;
  }
}
   
/* Service Card */
   
.events-services__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
}
   
@media (min-width: 640px) {
   
  .events-services__card {
    flex-direction: row;
    padding: 1.5rem;
  }
}
   
.events-services__card {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.events-services__card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.events-services__card:hover .events-services__card-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.events-services__card-icon {
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.events-services__card-icon i {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
   
.events-services__card-content {
  flex: 1 1 0%;
}
   
.events-services__card-title {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.events-services__card-description {
  margin-bottom: 0.75rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-services__card-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
   
.events-services__card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.events-services__card-list li::before {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  --tw-content: '•';
  content: var(--tw-content);
}
   
/* Bottom CTA Banner */
   
.events-services__banner {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  padding: 2rem;
}
   
@media (min-width: 1024px) {
   
  .events-services__banner {
    padding: 3rem;
  }
}
   
.events-services__banner {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
.events-services__banner-content {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}
   
.events-services__banner-title {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.events-services__banner-text {
  margin-bottom: 1.5rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
/*==========================
   Events Page - Contact Form
===========================*/
   
.events-contact-form {
  margin-top: 2rem;
  width: 100%;
}
   
.events-contact-form .form {
  width: 100%;
}
   
.events-contact-form .form__body {
  width: 100%;
}
   
.events-contact-form .form_row {
  margin-bottom: 1rem;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
   
@media (min-width: 768px) {
   
  .events-contact-form .form_row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
.events-contact-form .form_row .form_field {
  grid-column: span 1 / span 1;
}
   
.events-contact-form .form_row:has(.form_field__name) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
   
.events-contact-form .form_row:has(.form_field__message) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
   
.events-contact-form .form_field {
  display: flex;
  width: 100%;
  flex-direction: column;
}
   
.events-contact-form .form_field label {
  margin-bottom: 0.5rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.events-contact-form .form_footer {
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
  justify-content: center;
}
   
.events-contact-form .form_footer .form_field {
  display: flex;
  align-items: center;
}
   
/* Event form specific input styles */
   
.events-contact-form input.input,
    .events-contact-form select.input,
    .events-contact-form textarea.input {
  width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.events-contact-form input.input:focus, .events-contact-form select.input:focus, .events-contact-form textarea.input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
}
   
.events-contact-form input.input::-moz-placeholder, .events-contact-form select.input::-moz-placeholder, .events-contact-form textarea.input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form input.input::placeholder, .events-contact-form select.input::placeholder, .events-contact-form textarea.input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form select.input {
  cursor: pointer;
}
   
.events-contact-form select.input option {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
/*==========================
   Locations / Block 
===========================*/
   
.location {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .location {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .location {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .location {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .location {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
.location__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .location__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .location__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .location__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .location__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.location__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}
   
@media (min-width: 768px) {
   
  .location__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media print {
    .location__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.location__list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}
   
.location__item {
  width: 100%;
}
   
@media (min-width: 640px) {
   
  .location__item {
    width: 41.666667%;
  }
}
   
@media (min-width: 1024px) {
   
  .location__item {
    width: 33.333333%;
  }
}
   
.location__item-image {
  position: relative;
  border-radius: 0.75rem;
}
   
.location__item-image img {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}
   
.location__item-content {
  text-align: center;
  padding: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .location__item-content {
    padding: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .location__item-content {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .location__item-content {
    padding: 2rem;
  }
}
   
.location__item-content__title {
  width: 100%;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: capitalize !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.location__item-content .btn {
  margin-top: 0.75rem;
}
   
/*==========================
    Blog Post
===========================*/
   
.post {
  position: relative;
  display: flex;
  overflow: hidden;
}
   
.post__content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.post__image {
  position: relative;
  order: 1;
  grid-column: span 12 / span 12;
  max-height: 320px;
  overflow: hidden;
}
   
@media (min-width: 640px) {
   
  .post__image {
    max-height: 380px;
  }
}
   
@media (min-width: 768px) {
   
  .post__image {
    grid-column: span 5 / span 5;
    max-height: 540px;
  }
}
   
@media (min-width: 1024px) {
   
  .post__image {
    grid-column: span 6 / span 6;
    max-height: 720px;
  }
}
   
.post__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.post__info {
  order: 2;
  grid-column: span 12 / span 12;
  height: 100%;
  max-height: 780px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .post__info {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .post__info {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .post__info {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1536px) {
   
  .post__info {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}
   
@media (min-width: 768px) {
   
  .post__info {
    grid-column: span 7 / span 7;
  }
}
   
@media (min-width: 1024px) {
   
  .post__info {
    grid-column: span 6 / span 6;
  }
}
   
@media (min-width: 1536px) {
   
  .post__info {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (max-width: 740px) {
   
.post__info {
    padding-top: 3rem;
  }
		}
   
.post__info-text {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px;
}
   
.post__info-title {
  margin-bottom: 0.5rem;
  font-size: 28px !important;
  line-height: 1.4 !important;
}
   
@media (min-width: 640px) {
   
  .post__info-title {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
}
   
.post__info-title a {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.post__info-title a:hover {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.post__info-title a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.post__info-excerpt {
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  padding-left: 1rem;
}
   
.post__info-excerpt p:last-of-type {
  margin-bottom: 0px;
}
   
.post__footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
   
.post__footer .btn {
  margin-top: 0px;
}
   
.post__footer .social_icons a {
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.post__footer .social_icons a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Alternating layout for even items */
   
.post:nth-child(even) .post__image {
  order: 1;
}
   
@media (min-width: 768px) {
   
  .post:nth-child(even) .post__image {
    order: 2;
  }
}
   
.post:nth-child(even) .post__info {
  order: 2;
}
   
@media (min-width: 768px) {
   
  .post:nth-child(even) .post__info {
    order: 1;
  }
}
   
.post__date {
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
   
@media (min-width: 1024px) {
   
  .post__date {
    margin-bottom: 1.5rem;
  }
}
   
.post__date span {
  font-family: Josefin Sans, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.post__date span.month {
  padding-top: 0.125rem;
  font-size: 38px;
  line-height: 1;
}
   
.post__author {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: 1px !important;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.post__author a {
  position: relative;
  margin-bottom: 0px;
  margin-left: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0.25rem;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.post__author a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.post__author a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.post__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  font-style: italic;
}
   
.post__category a {
  position: relative;
  margin-bottom: 0px;
  margin-right: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.post__category a:after {
  display: inline-flex;
  width: auto;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  --tw-content: ',';
  content: var(--tw-content);
}
   
.post__category a:hover {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.post__category a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
/*==========================
    Blog Post
===========================*/
   
/* Blog Standard */
   
.blog {
  position: relative;
}
   
.blog__posts {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
   
.blog.blog__sidebar {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0px;
}
   
.blog.blog__sidebar .blog__posts {
  grid-column: span 12 / span 12;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__posts {
    grid-column: span 7 / span 7;
  }
}
   
@media (min-width: 1280px) {
   
  .blog.blog__sidebar .blog__posts {
    grid-column: span 8 / span 8;
  }
}
   
.blog.blog__sidebar .blog__posts .post__image {
  max-height: 320px;
}
   
@media (min-width: 640px) {
   
  .blog.blog__sidebar .blog__posts .post__image {
    max-height: 420px;
  }
}
   
@media (min-width: 768px) {
   
  .blog.blog__sidebar .blog__posts .post__image {
    grid-column: span 12 / span 12;
    max-height: 720px;
  }
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__posts .post__image {
    grid-column: span 4 / span 4;
  }
}
   
@media (min-width: 1280px) {
   
  .blog.blog__sidebar .blog__posts .post__image {
    grid-column: span 6 / span 6;
  }
}
   
.blog.blog__sidebar .blog__posts .post__info {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .blog.blog__sidebar .blog__posts .post__info {
    grid-column: span 12 / span 12;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__posts .post__info {
    grid-column: span 8 / span 8;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .blog.blog__sidebar .blog__posts .post__info {
    grid-column: span 6 / span 6;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1536px) {
   
  .blog.blog__sidebar .blog__posts .post__info {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
.blog.blog__sidebar .blog__posts .post__info-title {
  font-size: 38px !important;
  line-height: 1.2 !important;
}
   
.blog.blog__sidebar .blog__posts .post:nth-child(even) .post__image {
  order: 1;
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__posts .post:nth-child(even) .post__image {
    order: 2;
  }
}
   
.blog.blog__sidebar .blog__posts .post:nth-child(even) .post__info {
  order: 2;
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__posts .post:nth-child(even) .post__info {
    order: 1;
  }
}
   
.blog.blog__sidebar .blog__sidebar {
  grid-column: span 12 / span 12;
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .blog.blog__sidebar .blog__sidebar {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .blog.blog__sidebar .blog__sidebar {
    grid-column: span 5 / span 5;
  }
}
   
@media (min-width: 1280px) {
   
  .blog.blog__sidebar .blog__sidebar {
    grid-column: span 4 / span 4;
  }
}
   
.blog .pagination {
  margin-bottom: 1.5rem;
  margin-top: 0px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 1024px) {
   
  .blog .pagination {
    margin-bottom: 2.25rem;
    margin-top: 1.5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .blog .pagination {
    margin-bottom: 3rem;
  }
}
   
/* Sidebar */
   
.sidebar__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}
   
.sidebar__content .sidebar__widget {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding: 1rem;
}
   
@media (min-width: 640px) {
   
  .sidebar__content .sidebar__widget {
    padding: 1.5rem;
  }
}
   
.sidebar__content .sidebar__widget-title {
  margin-bottom: 0px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__search {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
}
   
.sidebar__content .sidebar__search input {
  padding: 0.5rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 18px;
  line-height: 1.4;
  font-style: italic;
  margin-bottom: 1.25rem;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.3);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	letter-spacing: 0.25px;
}
   
.sidebar__content .sidebar__search input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  -moz-transition-property: opacity;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.sidebar__content .sidebar__search input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.sidebar__content .sidebar__search input:hover:not(:focus):not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.4);
}
   
.sidebar__content .sidebar__search input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(217 178 130 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
   
.sidebar__content .sidebar__search input:focus::-moz-placeholder {
  opacity: 0.6;
}
   
.sidebar__content .sidebar__search input:focus::placeholder {
  opacity: 0.6;
}
   
.sidebar__content .sidebar__search input:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
.sidebar__content .sidebar__search input:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  background-color: rgb(10 13 15 / 0.5);
  opacity: 0.5;
}
   
.sidebar__content .sidebar__search input {
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  background-color: rgb(5 6 8 / 0.8);
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__search input:hover:not(:focus):not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 65 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.sidebar__content .sidebar__search input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.sidebar__content .sidebar__search input:focus-visible {
  --tw-ring-offset-color: #0A0D0F;
}
   
.sidebar__content .sidebar__search input {
  margin-bottom: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right-width: 0px;
}
   
input[type="date"].sidebar__content .sidebar__search input,
input[type="time"].sidebar__content .sidebar__search input {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem; /* 10px - adjusted for native picker icons */ /* 10px - adjusted for native picker icons */
}
   
.events-contact-form input.sidebar__content .sidebar__search input,
    .events-contact-form select.sidebar__content .sidebar__search input,
    .events-contact-form textarea.sidebar__content .sidebar__search input {
  width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.events-contact-form input.sidebar__content .sidebar__search input:focus, .events-contact-form select.sidebar__content .sidebar__search input:focus, .events-contact-form textarea.sidebar__content .sidebar__search input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
}
   
.events-contact-form input.sidebar__content .sidebar__search input::-moz-placeholder, .events-contact-form select.sidebar__content .sidebar__search input::-moz-placeholder, .events-contact-form textarea.sidebar__content .sidebar__search input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form input.sidebar__content .sidebar__search input::placeholder, .events-contact-form select.sidebar__content .sidebar__search input::placeholder, .events-contact-form textarea.sidebar__content .sidebar__search input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.events-contact-form select.sidebar__content .sidebar__search input {
  cursor: pointer;
}
   
.events-contact-form select.sidebar__content .sidebar__search input option {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__search button {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.sidebar__content .sidebar__search button:hover {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(225 193 155 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(225 193 155 / var(--tw-bg-opacity));
}
   
.sidebar__content .sidebar__search button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .sidebar__content .sidebar__search button:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.sidebar__content .sidebar__search button:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(174 142 104 / var(--tw-bg-opacity));
}
   
.sidebar__content .sidebar__search button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
   
.sidebar__content .sidebar__categories {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
   
.sidebar__content .sidebar__categories a {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.sidebar__content .sidebar__categories a .number-posts {
  margin-left: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__categories a::after {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(94 97 101 / var(--tw-text-opacity));
  --tw-content: '\f105';
  content: var(--tw-content);
				font-family: "Font Awesome 6 Free" !important;
}
   
.sidebar__content .sidebar__categories a > span::before {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  --tw-content: '\f7a5';
  content: var(--tw-content);
				font-family: "Font Awesome 6 Free" !important;
}
   
.sidebar__content .sidebar__categories a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__categories a:hover::after {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__categories a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.sidebar__content .sidebar__recent-posts {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post {
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__image {
  display: block;
  height: 100%;
  width: 100%;
  max-width: 120px;
}
   
@media (min-width: 640px) {
   
  .sidebar__content .sidebar__recent-posts .sidebar__post__image {
    max-width: 180px;
  }
}
   
@media (min-width: 1024px) {
   
  .sidebar__content .sidebar__recent-posts .sidebar__post__image {
    max-width: 140px;
  }
}
   
@media (min-width: 1280px) {
   
  .sidebar__content .sidebar__recent-posts .sidebar__post__image {
    max-width: 180px;
  }
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__image a {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__image a img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content p {
  margin-bottom: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .sidebar__content .sidebar__recent-posts .sidebar__post__content p {
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 1.5px;
  }
}
   
@media (min-width: 1024px) {
   
  .sidebar__content .sidebar__recent-posts .sidebar__post__content p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content p span {
  font-family: Josefin Sans, sans-serif;
  --tw-text-opacity: 1 !important;
  color: rgb(217 178 130 / var(--tw-text-opacity)) !important;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content p::before {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  --tw-content: '\f7a5';
  content: var(--tw-content);
						font-family: "Font Awesome 6 Free" !important;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content h4,
				.sidebar__content .sidebar__recent-posts .sidebar__post__content h5 {
  margin-bottom: 0px;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content a {
  border-radius: 0.25rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__recent-posts .sidebar__post__content a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.sidebar__content .sidebar__tags {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
   
.sidebar__content .sidebar__tags a {
  flex-grow: 1;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.sidebar__content .sidebar__tags a:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.sidebar__content .sidebar__tags a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.sidebar__content .sidebar__gallery {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
   
.sidebar__content .sidebar__gallery .gallery-block__list {
  width: 100%;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
   
@media (min-width: 768px) {
   
  .sidebar__content .sidebar__gallery .gallery-block__list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
   
@media (min-width: 1280px) {
   
  .sidebar__content .sidebar__gallery .gallery-block__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
   
.sidebar__content .sidebar__gallery .gallery-block__list .gallery-block__item-image {
  height: 120px !important;
  max-height: 120px !important;
  min-height: 120px !important;
}
   
.sidebar__content .sidebar__gallery .gallery-block__list .gallery-block__item-icon {
  inset: 0.5rem !important;
}
   
/*==========================
    Blog Details
===========================*/
   
.blog-details .blog {
  margin-left: auto;
  margin-right: auto;
  max-width: 1536px;
}
   
.post__details {
  grid-column: span 12 / span 12;
  padding: 18px;
}
   
@media (min-width: 768px) {
   
  .post__details {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .post__details {
    grid-column: span 7 / span 7;
    padding-right: 0px;
  }
}
   
@media (min-width: 1280px) {
   
  .post__details {
    grid-column: span 8 / span 8;
  }
}
   
.post__details-wrap {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 1024px) {
   
  .post__details-wrap {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }
}
   
@media (min-width: 1280px) {
   
  .post__details-wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1536px) {
   
  .post__details-wrap {
    padding-top: 6rem;
  }
}
   
.post__details-info {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
}
   
.post__details .post__date {
  position: relative;
  right: 0px;
  margin-bottom: 0px;
  padding-bottom: 1rem;
}
   
@media (min-width: 768px) {
   
  .post__details .post__date {
    position: absolute;
    top: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
   
@media (min-width: 1280px) {
   
  .post__details .post__date {
    top: 10px;
  }
}
   
.post__details .post__author {
  margin-bottom: 0px;
}
   
.post__details-text {
  padding-bottom: 1.5rem;
}
   
.post__details-text img {
  margin-bottom: 1.5rem;
}
   
.post__details-text a {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.post__details-author {
  margin-bottom: 0px;
  margin-top: 4rem;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1.5rem;
}
   
.post__details-author__avatar {
  margin-bottom: 1.5rem;
  height: auto;
  max-height: 320px;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}
   
@media (min-width: 640px) {
   
  .post__details-author__avatar {
    margin-bottom: 0px;
    width: 25%;
  }
}
   
.post__details-author__avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
   
.post__details-author__name {
  margin-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.post__details-author__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-left: 0px;
}
   
@media (min-width: 640px) {
   
  .post__details-author__content {
    width: 75%;
    padding-left: 1.5rem;
  }
}
   
.post__details .divider {
  margin-bottom: 1.5rem !important;
}
   
.post__details .post__share-icons {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
   
.comments {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
.comments-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}
   
.comments-list.children {
  padding-left: 1rem;
  padding-top: 2rem;
}
   
@media (min-width: 640px) {
   
  .comments-list.children {
    padding-left: 4rem;
  }
}
   
.comments-item {
  margin-bottom: 0.5rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0px;
}
   
.comments-item__header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
   
.comments-item__avatar {
  height: 4rem;
  width: 4rem;
  overflow: hidden;
  border-radius: 9999px;
}
   
@media (min-width: 768px) {
   
  .comments-item__avatar {
    height: 5rem;
    width: 5rem;
  }
}
   
.comments-item__avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
   
.comments-item__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-left: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .comments-item__content {
    padding-left: 2rem;
  }
}
   
.comments-item__name {
  margin-bottom: 0px !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.comments-item__date {
  margin-bottom: 0px !important;
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.comments-item__text {
  margin-bottom: 0px !important;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(139 142 145 / var(--tw-border-opacity));
  padding-left: 1rem;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.comments-item__info {
  position: relative;
  width: 100%;
}
   
.comments-item__reply {
  position: absolute;
  top: 0px;
  right: 0px;
}
   
.comments-title {
  margin-bottom: 0px !important;
}
   
.comments__form {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(94 97 101 / var(--tw-border-opacity));
  padding-top: 2.5rem;
}
   
.comments__form .form {
  padding-bottom: 0px;
}
   
.comments__form .form_row {
  gap: 1rem !important;
}
   
.comments__form .form_field__name {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .comments__form .form_field__name {
    grid-column: span 6 / span 6;
  }
}
   
.comments__form .form_field__email {
  grid-column: span 12 / span 12;
}
   
@media (min-width: 1024px) {
   
  .comments__form .form_field__email {
    grid-column: span 6 / span 6;
  }
}
   
.landing-page__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
   
.landing-page__content:after {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  display: none;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
  .landing-page__content:after {
    width: 120px;
  }
}
   
@media (min-width: 1024px) {
   
  .landing-page__content:after {
    display: block;
  }
}
   
@media (min-width: 1280px) {
   
  .landing-page__content:after {
    width: 260px;
  }
}
   
.landing-page__content:after {
		content: "";
		background-image: url(.././img/right.png);
	}
   
.landing-page__content:before {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 20;
  display: none;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
   
@media (min-width: 768px) {
   
  .landing-page__content:before {
    width: 120px;
  }
}
   
@media (min-width: 1024px) {
   
  .landing-page__content:before {
    display: block;
  }
}
   
@media (min-width: 1280px) {
   
  .landing-page__content:before {
    width: 260px;
  }
}
   
.landing-page__content:before {
		content: "";
		background-image: url(.././img/left.png);
	}
   
/*==========================
    Pages
===========================*/
   
.pages {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .pages {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pages {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pages {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
.pages__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pages__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pages__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pages__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pages__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pages__container {
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .pages__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .pages__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pages__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pages__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .pages__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.pages__content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .pages__content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pages__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pages__content {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pages__content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 640px) {
   
  .pages__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 768px) {
   
  .pages__content {
    padding-top: 2rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pages__content {
    gap: 2rem;
  }
}
   
.pages__title {
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.pages__item {
  position: relative;
  grid-column: span 2 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
   
@media (min-width: 640px) {
   
  .pages__item {
    grid-column: span 1 / span 1;
  }
}
   
.pages__item a {
  border-radius: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.pages__item a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.pages__item a:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.pages__image {
  position: relative;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Simplified: single border with opacity fade */
   
.pages__image::before {
            content: "";
            z-index: 10;
            position: absolute;
            inset: 0px;
            border-radius: 0.5rem;
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(217 178 130 / var(--tw-border-opacity));
            opacity: 0;
            transition-property: opacity;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
   
.pages__image:hover::before {
  opacity: 1;
}
   
/*==========================
    Sections
===========================*/
   
.sections {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(36 39 43 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 768px) {
   
  .sections {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .sections {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .sections {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
   
.sections__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .sections__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .sections__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .sections__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .sections__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.sections__container {
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 640px) {
   
  .sections__container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 768px) {
   
  .sections__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .sections__container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
@media (min-width: 1280px) {
   
  .sections__container {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
   
@media print {
    .sections__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.sections__content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .sections__content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .sections__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .sections__content {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .sections__content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
.sections__item {
  position: relative;
  grid-column: span 12 / span 12;
  border-radius: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
@media (min-width: 640px) {
   
  .sections__item {
    grid-column: span 6 / span 6;
  }
}
   
@media (min-width: 768px) {
   
  .sections__item {
    grid-column: span 4 / span 4;
  }
}
   
.sections__item:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #0E1013;
}
   
.sections__item:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.sections__title {
  pointer-events: none;
  margin-bottom: 0.75rem;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  font-family: Josefin Sans, sans-serif;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .sections__title {
    margin-bottom: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
   
.sections__tag-new {
  pointer-events: none;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: 99;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.sections__image {
  position: relative;
  width: 100%;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Simplified: single border with opacity fade */
   
.sections__image::before {
            content: "";
            z-index: 10;
            position: absolute;
            inset: 0px;
            border-radius: 0.5rem;
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(217 178 130 / var(--tw-border-opacity));
            opacity: 0;
            transition-property: opacity;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
   
.sections__image:hover::before {
  opacity: 1;
}
   
/*==========================
    features
===========================*/
   
.features {
  position: relative;
  z-index: 10;
  width: 100%;
}
   
.features__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .features__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .features__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .features__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .features__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.features__container {
  margin-left: auto;
  margin-right: auto;
}
   
@media print {
    .features__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.features__container .features__item {
  width: 100px;
}
   
.features__list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .features__list {
    padding: 2rem;
  }
}
   
@media (min-width: 768px) {
   
  .features__list {
    padding: 3rem;
  }
}
   
@media (min-width: 1024px) {
   
  .features__list {
    padding: 4rem;
  }
}
   
@media (min-width: 1280px) {
   
  .features__list {
    padding: 5rem;
  }
}
   
.features__item {
  width: 64px;
}
   
.features__item img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.25;
}
   
/*==========================
   Menu / Sidebar 
===========================*/
   
.menu.menu-sidebar {
  overflow: visible;
  padding-top: 2rem !important;
}
   
@media (min-width: 1024px) {
   
  .menu.menu-sidebar {
    padding-top: 5rem !important;
  }
}
   
.navmenu__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .navmenu__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .navmenu__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .navmenu__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .navmenu__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.navmenu__container {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 0px;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media (min-width: 640px) {
   
  .navmenu__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .navmenu__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .navmenu__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
   
@media (min-width: 1280px) {
   
  .navmenu__container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
   
@media print {
    .navmenu__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
@media (min-width: 768px) {
   
  .navmenu__container {
    padding-bottom: 4rem;
  }
}
   
.navmenu-sidebar {
  position: relative;
  grid-column: span 12 / span 12;
  display: block;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .navmenu-sidebar {
    grid-column: span 4 / span 4;
  }
}
   
@media (min-width: 1024px) {
   
  .navmenu-sidebar {
    grid-column: span 3 / span 3;
  }
}
   
.navmenu-sidebar__list {
  position: sticky;
  top: 6rem;
  margin: 0px;
  display: flex;
  max-height: -moz-fit-content;
  max-height: fit-content;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 0px;
  padding: 0.75rem;
}
   
@media (min-width: 640px) {
   
  .navmenu-sidebar__list {
    padding: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .navmenu-sidebar__list {
    padding: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .navmenu-sidebar__list {
    padding: 2rem;
  }
}
   
.navmenu-sidebar__list {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.navmenu-sidebar__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.25px !important;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
@media (min-width: 1024px) {
   
  .navmenu-sidebar__link {
    font-size: 18px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.25px !important;
  }
}
   
.navmenu-sidebar__link img {
  margin-right: 1rem;
  height: 1rem;
  width: 1rem;
  opacity: 0.2;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
   
.navmenu-sidebar__link:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.navmenu-sidebar__link:hover img {
  opacity: 0.6;
}
   
.navmenu-sidebar__link:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
@media (prefers-contrast: more) {

    .navmenu-sidebar__link:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}
   
.navmenu-sidebar__link.active {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.navmenu-sidebar__link.active img {
  opacity: 1;
}
   
.navmenu-content {
  grid-column: span 12 / span 12;
  border-radius: 0.75rem;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
@media (min-width: 768px) {
   
  .navmenu-content {
    grid-column: span 8 / span 8;
  }
}
   
@media (min-width: 1024px) {
   
  .navmenu-content {
    grid-column: span 9 / span 9;
  }
}
   
.navmenu-content .menu__category {
  margin: 0px;
  width: 100%;
  gap: 1.5rem;
  padding: 0px;
  padding-bottom: 1.5rem;
}
   
.navmenu-content .menu__category-image {
  order: 2;
  grid-column: span 12 / span 12;
  height: 100%;
  max-height: 340px;
  min-height: 340px !important;
  overflow: hidden;
  border-radius: 0.75rem;
}
   
.navmenu-content .menu__category-dishes {
  grid-column: span 12 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding: 1rem !important;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .navmenu-content .menu__category-dishes {
    padding: 1.5rem !important;
  }
}
   
.navmenu-content .menu__category-dishes .section-title {
  grid-column: span 2 / span 2;
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-align: center;
}
   
.navmenu-content .menu__category-dishes .section-title__title {
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 400;
  text-transform: uppercase;
}
   
@media (min-width: 1024px) {
   
  .navmenu-content .menu__category-dishes .section-title__title {
    font-size: 48px !important;
    line-height: 1.2 !important;
  }
}
   
.navmenu-content .menu__category-dishes .section-title p {
  margin-left: auto;
  margin-right: auto;
  max-width: 530px;
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.navmenu-content .menu__category-dishes .dish__title {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.navmenu-content .menu__category-dishes .dish {
  grid-column: span 2 / span 2;
  margin-bottom: 0px;
  min-height: 160px;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding: 1.5rem;
}
   
@media (min-width: 1024px) {
   
  .navmenu-content .menu__category-dishes .dish {
    grid-column: span 1 / span 1;
  }
}
   
.navmenu-content .menu__category:nth-child(even) .menu__category-dishes {
  padding: 1rem !important;
}
   
@media (min-width: 768px) {
   
  .navmenu-content .menu__category:nth-child(even) .menu__category-dishes {
    padding: 1.5rem !important;
  }
}
   
/**
 * Menu Category Page Styles
 *
 * Extension of existing menu and blog patterns for category listing view.
 * Reuses spacing, typography, and color tokens from the premium system.
 *
 * New components:
 * - .menu-category__content: Main content area for category items
 * - .menu-category__grid: Grid layout for menu items
 * - .menu-category__item: Individual menu item card with image
 * - .menu-category__item-image: Card image container
 * - .menu-category__item-content: Card content wrapper
 *
 * All components extend existing patterns without introducing new visual tokens.
 */
   
/* ========================================================================
   Menu Category Content Area
   ======================================================================== */
   
/**
 * Main content wrapper for category page
 * Extends .post__details pattern from blog system
 * Needs proper padding to work within .blog__posts container
 */
   
.menu-category-page .blog__posts {
  background-color: transparent !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
.menu-category-page .blog__posts .menu-category__content {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
.menu-category__content {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
@media (min-width: 768px) {
    .menu-category__content {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
   
@media (min-width: 1024px) {
    .menu-category__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1280px) {
    .menu-category__content {
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
/* ========================================================================
   Menu Category Grid
   ======================================================================== */
   
/**
 * Grid layout for menu item cards
 * Uses responsive grid with consistent gaps
 * Extends existing grid patterns from gallery and blog components
 */
   
.menu-category__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
   
@media (min-width: 640px) {
    .menu-category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
    .menu-category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
   
/* ========================================================================
   Menu Item Card
   ======================================================================== */
   
/**
 * Individual menu item card container
 * Combines image + content in vertical layout
 * Extends card patterns from existing components
 */
   
.menu-category__item {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
   
.menu-category__item:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
   
/* Card Image Container
   ========================================================================
   Extends .sidebar__post__image pattern for aspect ratio consistency
*/
   
.menu-category__item-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
}
   
.menu-category__item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}
   
.menu-category__item:hover .menu-category__item-image img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
/* Card Content Wrapper
   ========================================================================
   Provides consistent padding and background
*/
   
.menu-category__item-content {
  padding: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
.menu-category__item-content .dish {
  margin-bottom: 0px;
}
   
@media (min-width: 768px) {
    .menu-category__item-content {
    padding: 2rem;
  }
}
   
/* Dish Component Integration
   ========================================================================
   The .dish component (already defined in _menu.css) is reused here
   No additional styles needed - existing patterns handle all styling

   Structure:
   - .dish (container)
   - .dish__content (title + price wrapper)
   - .dish__title (dish name)
   - .dish__price (price value)
   - .dish__description (ingredients/description)

   All styling comes from existing .dish definitions in _menu.css
*/
   
/* ========================================================================
   Sidebar Enhancements for Menu Category
   ======================================================================== */
   
/**
 * Active state for category navigation
 * Extends existing .sidebar__categories pattern
 */
   
.sidebar__categories a.active {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  padding-left: 0.75rem;
  border-left-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
.sidebar__categories a.active::after {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/**
 * Price display in sidebar posts
 * Extends existing typography system
 */
   
.sidebar__post__content .sidebar-price {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 0.25rem;
  margin-bottom: 0px;
}
   
/* ========================================================================
   Responsive Adjustments
   ======================================================================== */
   
/**
 * Mobile optimization
 * Maintains readability and touch targets on small screens
 */
   
@media (max-width: 639px) {
    .menu-category__grid {
    gap: 1.5rem;
  }

    .menu-category__item-content {
    padding: 1.25rem;
  }
}
   
/**
 * Large desktop optimization
 * Increases grid columns for better content density
 */
   
@media (min-width: 1280px) {
    .menu-category__grid {
    gap: 1.5rem;
  }
}
   
/* ========================================================================
   Print Styles
   ======================================================================== */
   
@media print {
    .menu-category__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }

    .menu-category__item-image {
    aspect-ratio: auto;
    height: 8rem;
  }

    .menu-category__item-content {
    padding: 0.75rem;
  }
}
   
/* ===================================
    FAQ Page Styles
    Extension natural del Premium Tailwind System
    Basado en: page-about structure + card system
====================================== */
   
/* ===================================
    1. FAQ Intro Section
    Reutiliza: section-title + spacing del sistema
====================================== */
   
.faq-intro {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .faq-intro {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .faq-intro {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
.faq-intro__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .faq-intro__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .faq-intro__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .faq-intro__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .faq-intro__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.faq-intro__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .faq-intro__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
/* ===================================
    2. FAQ Section - Layout Principal
    Mantiene coherencia con grid de about + services
====================================== */
   
.faq-section {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 768px) {
   
  .faq-section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}
   
.faq-section__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .faq-section__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .faq-section__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .faq-section__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .faq-section__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.faq-section__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
}
   
@media print {
    .faq-section__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.faq-section__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 1024px) {
   
  .faq-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}
   
.faq-section__column {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
   
@media (min-width: 640px) {
   
  .faq-section__column {
    padding: 1.5rem;
  }
}
   
@media (min-width: 768px) {
   
  .faq-section__column {
    padding: 2rem;
  }
}
   
.faq-section__category-title {
  margin-bottom: 1.5rem;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
  padding-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* ===================================
    3. FAQ Accordion Component
    Nuevo componente, extensión natural del card system
    Reutiliza: border, spacing, transitions del sistema
====================================== */
   
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
   
/* FAQ Item - Base card structure */
   
.faq-accordion__item {
  position: relative;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.faq-accordion__item:hover,
        .faq-accordion__item:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
}
   
/* Item activo (expanded) */
   
.faq-accordion__item.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Trigger button - Clickable header */
   
.faq-accordion__trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-width: 0px;
  background-color: transparent;
  padding: 1.5rem;
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.faq-accordion__trigger:hover {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.faq-accordion__trigger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 178 130 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #050608;
}
   
/* Question text */
   
.faq-accordion__question {
  margin: 0px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.faq-accordion__trigger:hover .faq-accordion__question,
        .is-active .faq-accordion__question {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Icon (+ / -) */
   
.faq-accordion__icon {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
/* Plus icon */
   
.faq-accordion__icon::before,
        .faq-accordion__icon::after {
            content: "";
            position: absolute;
            --tw-bg-opacity: 1;
            background-color: rgb(217 178 130 / var(--tw-bg-opacity));
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
   
/* Horizontal line */
   
.faq-accordion__icon::before {
  top: 50%;
  left: 0px;
  height: 0.125rem;
  width: 100%;
            transform: translateY(-50%);
}
   
/* Vertical line */
   
.faq-accordion__icon::after {
  top: 0px;
  left: 50%;
  height: 100%;
  width: 0.125rem;
            transform: translateX(-50%);
}
   
/* Rotate to minus when active */
   
.is-active .faq-accordion__icon::after {
                transform: translateX(-50%) rotate(90deg) scaleY(0);
            }
   
/* Content wrapper - Collapsible area */
   
.faq-accordion__content {
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
        max-height: 0;
        opacity: 0;
}
   
.is-active .faq-accordion__content {
            max-height: 500px;
            opacity: 1;
        }
   
/* Answer content */
   
.faq-accordion__answer {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.faq-accordion__answer p {
  margin-bottom: 1rem;
}
   
.faq-accordion__answer p:last-child {
  margin-bottom: 0px;
}
   
/* ===================================
    4. FAQ Additional Info Section
    Reutiliza: grid + spacing de about sections
====================================== */
   
.faq-additional {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
.faq-additional__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .faq-additional__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .faq-additional__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .faq-additional__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .faq-additional__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.faq-additional__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .faq-additional__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.faq-additional__content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .faq-additional__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .faq-additional__content {
    gap: 3rem;
  }
}
   
.faq-additional__content {
        max-width: 1100px;
        margin: 0 auto;
    }
   
.faq-additional__col {
  display: flex;
  flex-direction: column;
}
   
.faq-additional__title {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.faq-additional p {
  margin-bottom: 0px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* ===================================
    5. FAQ CTA Section
    Reutiliza: button system + spacing
====================================== */
   
.faq-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 640px) {
   
  .faq-cta {
    flex-direction: row;
    gap: 1.5rem;
  }
}
   
/* ===================================
    Justificación de Nuevos Componentes:

    1. .faq-accordion
       - Patrón reutilizable para Q&A, collapsibles, help sections
       - No existe en el sistema actual
       - Mantiene coherencia: borders, spacing, transitions del card system
       - Accesible: aria-expanded, focus states, keyboard navigation

    2. .faq-additional
       - Extensión del grid system de about/services
       - Mismo spacing vertical (py-16 md:py-20)
       - Mismo color scheme (bg-coarseWool-800)

    3. Todos los tokens visuales (colores, tipografía, spacing)
       provienen del sistema existente via @apply

    4. Sin nuevas animaciones, solo transitions del sistema
    5. Mobile-first responsive, igual que el resto del theme
====================================== */
   
/* ===================================
    Pricing Page Styles
    Premium restaurant pricing component
    Based on: card system + section utilities
====================================== */
   
/* ===================================
    1. Pricing Intro Section
    Reuses: section-title + spacing system
====================================== */
   
.pricing-intro {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 4rem;
}
   
@media (min-width: 768px) {
   
  .pricing-intro {
    padding-top: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-intro {
    padding-top: 6rem;
  }
}
   
.pricing-intro__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-intro__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pricing-intro__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-intro__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pricing-intro__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pricing-intro__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .pricing-intro__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
/* ===================================
    2. Pricing Grid Layout
    3-column responsive grid for pricing tiers
====================================== */
   
.pricing-grid {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .pricing-grid {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-grid {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
   
.pricing-grid__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-grid__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pricing-grid__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-grid__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pricing-grid__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pricing-grid__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .pricing-grid__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
@media (min-width: 1280px) {
   
  .pricing-grid__container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.pricing-grid__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .pricing-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-grid__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
.pricing-grid__grid {
        max-width: 1200px;
        margin: 0 auto;
    }
   
/* ===================================
    3. Pricing Card Component
    Card-based pricing tier display
    Extends: card system with pricing-specific modifiers
====================================== */
   
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(14 16 19 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
/* Base hover effect */
   
.pricing-card:hover,
    .pricing-card:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
   
/* Featured variant - highlighted middle tier */
   
.pricing-card--featured {
  z-index: 10;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 1024px) {
   
  .pricing-card--featured {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
   
.pricing-card--featured:hover,
        .pricing-card--featured:focus-within {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.7);
  --tw-shadow: var(--tw-shadow-colored);
}
   
@media (min-width: 1024px) {
   
  .pricing-card--featured:hover,
        .pricing-card--featured:focus-within {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
   
/* Header section */
   
.pricing-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}
   
.pricing-card--featured .pricing-card__header {
  --tw-border-opacity: 1;
  border-color: rgb(174 142 104 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
}
   
/* Badge for featured tier */
   
.pricing-card__badge {
  margin-bottom: 1rem;
  display: inline-block;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(217 178 130 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Josefin Sans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.pricing-card--featured .pricing-card__badge {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
/* Tier name */
   
.pricing-card__name {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
.pricing-card--featured .pricing-card__name {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
/* Price display */
   
.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  font-family: Sorts Mill Goudy, serif;
  font-style: italic;
}
   
.pricing-card__price-currency {
  font-size: 28px;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.pricing-card--featured .pricing-card__price-currency {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.pricing-card__price-amount {
  font-size: 81px;
  letter-spacing: -1.5px;
  font-weight: 400;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.pricing-card--featured .pricing-card__price-amount {
  --tw-text-opacity: 1;
  color: rgb(5 6 8 / var(--tw-text-opacity));
}
   
.pricing-card__price-period {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.pricing-card--featured .pricing-card__price-period {
  --tw-text-opacity: 1;
  color: rgb(10 13 15 / var(--tw-text-opacity));
}
   
/* Body section */
   
.pricing-card__body {
  flex: 1 1 0%;
  padding: 2rem;
}
   
/* Features list */
   
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
   
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
/* Checkmark icon */
   
.pricing-card__feature-icon {
  margin-top: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.pricing-card__feature-icon i {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
}
   
.pricing-card__feature-text {
  flex: 1 1 0%;
}
   
/* Footer section */
   
.pricing-card__footer {
  padding: 2rem;
  padding-top: 0px;
}
   
.pricing-card__cta {
  width: 100%;
}
   
/* ===================================
    4. Private Events Section
    Grid layout for event packages
====================================== */
   
.pricing-events {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .pricing-events {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.pricing-events__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-events__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pricing-events__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-events__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pricing-events__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pricing-events__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .pricing-events__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
@media (min-width: 1280px) {
   
  .pricing-events__container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
   
.pricing-events__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
   
@media (min-width: 768px) {
   
  .pricing-events__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-events__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
   
.pricing-events__grid {
        max-width: 1200px;
        margin: 0 auto;
    }
   
/* ===================================
    5. Event Card Component
    Simplified card for event packages
====================================== */
   
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(36 39 43 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
   
.event-card:hover,
    .event-card:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(217 178 130 / var(--tw-border-opacity));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(5 6 8 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
   
.event-card__icon {
  margin-bottom: 1rem;
  height: 3rem;
  width: 3rem;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.event-card__title {
  margin-bottom: 0.5rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
.event-card__price {
  margin-bottom: 1rem;
  font-family: Sorts Mill Goudy, serif;
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.event-card__description {
  margin-bottom: 1.5rem;
  flex: 1 1 0%;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.event-card__description p {
  margin-bottom: 0.75rem;
}
   
.event-card__description p:last-child {
  margin-bottom: 0px;
}
   
.event-card__cta {
  width: 100%;
}
   
/* Custom pricing variant */
   
.event-card--custom .event-card__icon {
  height: 2.25rem;
  width: 2.25rem;
}
   
.event-card--custom .event-card__icon i {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}
   
.event-card--custom .event-card__price {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.05em;
}
   
/* ===================================
    6. Pricing FAQ Section
    Compact FAQ for pricing-related questions
    Reuses: faq-accordion component structure
====================================== */
   
.pricing-faq {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
}
   
@media (min-width: 768px) {
   
  .pricing-faq {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.pricing-faq__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-faq__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pricing-faq__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-faq__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pricing-faq__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pricing-faq__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .pricing-faq__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.pricing-faq__container {
        max-width: 900px;
    }
   
.pricing-faq__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
   
/* ===================================
    7. Pricing CTA Section
    Reuses: existing CTA patterns
====================================== */
   
.pricing-cta {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
   
@media (min-width: 768px) {
   
  .pricing-cta {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
   
.pricing-cta__container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-cta__container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
@media (min-width: 768px) {
   
  .pricing-cta__container {
    max-width: 768px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
   
@media (min-width: 1024px) {
   
  .pricing-cta__container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
   
@media (min-width: 1280px) {
   
  .pricing-cta__container {
    max-width: 1280px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
   
.pricing-cta__container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
   
@media print {
    .pricing-cta__container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}
   
.pricing-cta__container {
        max-width: 800px;
    }
   
.pricing-cta__title {
  margin-bottom: 1rem;
  font-family: Barlow Condensed, sans-serif;
  font-size: 58px;
  line-height: 1.2;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(232 233 234 / var(--tw-text-opacity));
}
   
.pricing-cta__description {
  margin-bottom: 2rem;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.pricing-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
   
@media (min-width: 640px) {
   
  .pricing-cta__actions {
    flex-direction: row;
  }
}
   
/* ===================================
    Justification for New Components:

    1. .pricing-card
       - Reusable pattern for any pricing display
       - Extends card system with pricing-specific elements
       - Featured modifier for highlighted tier (common pattern)
       - Maintains consistency: borders, spacing, transitions

    2. .event-card
       - Simplified card for event packages
       - Different content structure than pricing-card
       - Reuses same visual tokens (colors, spacing, typography)

    3. All visual tokens (colors, typography, spacing)
       come from existing system via @apply

    4. No new animations, only existing transitions
    5. Mobile-first responsive, consistent with theme
    6. Accessible: proper focus states, semantic HTML expected
====================================== */
   
/* =====================================
    Tailwind Css - Utilities
===================================== */
   
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
   
.visible {
  visibility: visible;
}
   
.static {
  position: static;
}
   
.fixed {
  position: fixed;
}
   
.absolute {
  position: absolute;
}
   
.relative {
  position: relative;
}
   
.sticky {
  position: sticky;
}
   
.z-50 {
  z-index: 50;
}
   
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
   
.mb-0 {
  margin-bottom: 0px;
}
   
.mb-12 {
  margin-bottom: 3rem;
}
   
.mb-16 {
  margin-bottom: 4rem;
}
   
.mb-3 {
  margin-bottom: 0.75rem;
}
   
.mb-4 {
  margin-bottom: 1rem;
}
   
.mb-6 {
  margin-bottom: 1.5rem;
}
   
.mb-8 {
  margin-bottom: 2rem;
}
   
.mt-2 {
  margin-top: 0.5rem;
}
   
.mt-4 {
  margin-top: 1rem;
}
   
.mt-8 {
  margin-top: 2rem;
}
   
.block {
  display: block;
}
   
.inline-block {
  display: inline-block;
}
   
.flex {
  display: flex;
}
   
.table {
  display: table;
}
   
.grid {
  display: grid;
}
   
.hidden {
  display: none;
}
   
.max-w-content {
  max-width: 600px;
}
   
.max-w-content-lg {
  max-width: 800px;
}
   
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
   
.resize {
  resize: both;
}
   
.flex-wrap {
  flex-wrap: wrap;
}
   
.items-center {
  align-items: center;
}
   
.justify-center {
  justify-content: center;
}
   
.gap-2 {
  gap: 0.5rem;
}
   
.gap-6 {
  gap: 1.5rem;
}
   
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
   
.rounded {
  border-radius: 0.25rem;
}
   
.rounded-lg {
  border-radius: 0.5rem;
}
   
.border {
  border-width: 1px;
}
   
.bg-coarseWool-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 19 / var(--tw-bg-opacity));
}
   
.bg-coarseWool-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 13 15 / var(--tw-bg-opacity));
}
   
.bg-coarseWool-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 6 8 / var(--tw-bg-opacity));
}
   
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
   
.from-coarseWool-800 {
  --tw-gradient-from: #0A0D0F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 13 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
   
.to-coarseWool-900 {
  --tw-gradient-to: #050608 var(--tw-gradient-to-position);
}
   
.p-4 {
  padding: 1rem;
}
   
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
   
.pb-0 {
  padding-bottom: 0px;
}
   
.text-center {
  text-align: center;
}
   
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
   
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
   
.text-body {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.25px;
}
   
.text-body-small {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.25px;
}
   
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
   
.text-title-2 {
  font-size: 48px;
  line-height: 1.2;
}
   
.text-title-4 {
  font-size: 28px;
  line-height: 1.4;
}
   
.text-calico-500 {
  --tw-text-opacity: 1;
  color: rgb(217 178 130 / var(--tw-text-opacity));
}
   
.text-coarseWool-100 {
  --tw-text-opacity: 1;
  color: rgb(209 210 212 / var(--tw-text-opacity));
}
   
.text-coarseWool-200 {
  --tw-text-opacity: 1;
  color: rgb(181 183 185 / var(--tw-text-opacity));
}
   
.text-coarseWool-300 {
  --tw-text-opacity: 1;
  color: rgb(139 142 145 / var(--tw-text-opacity));
}
   
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
   
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
   
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
   
/* Thicker ring variant */
   
/* No offset variant (for compact elements) */
   
.sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
   
/* Allow element to be focusable when navigated to */
   
/* Not screen reader - hide from assistive tech */
   
.hover\:underline:hover {
  text-decoration-line: underline;
}