:root {

  --background-900: #FFFFFF;
  --background-800: #E0E0E0;
  --background-700: #D0D0D0;
  --background-600: #B0B0B0;
  --background-500: #909090;
  --background-400: #707070;
  --background-300: #505050;
  --background-200: #383838;
  --background-100: #2A2A2A;
  --background-50: #1C1C1C;
  --background-0: #222222;

  --background-0-30: rgba(255, 255, 255, 0.3);


  --light-background-950: #121212;
  --light-background-600: #4b5563;
  --light-background-500: #6b7280;
  --light-background-400: #9ca3af;
  --light-background-300: #d1d5db;
  --light-background-200: #e5e7eb;


  --primary-red-900: #1D0000;
  --primary-red-800: #2B0000;
  --primary-red-700: #3C0000;
  --primary-red-600: #4D0000;
  --primary-red-500: #8D0000;
  --primary-red-400: #951818;
  --primary-red-300: #AE2C33;
  --primary-red-200: #F76C6C;
  --primary-red-100: #F9B5B5;
  --primary-red-50: #FCE4E4;
  --primary-red-0: #FFFFFF;


  --primary-dark-red-900: #FFFFFF;
  --primary-dark-red-800: #FDECEC;
  --primary-dark-red-700: #FBC8C8;
  --primary-dark-red-600: #F9A4A4;
  --primary-dark-red-500: #F68080;
  --primary-dark-red-400: #F35C5C;
  --primary-dark-red-300: #F03838;
  --primary-dark-red-200: #CC2E2E;
  --primary-dark-red-100: #8D0000;
  --primary-dark-red-50: #4D0000;
  --primary-dark-red-0: #330000;


  --secondary-yellow-900: #8E6F3A;
  --secondary-yellow-800: #A78D4D;
  --secondary-yellow-700: #BFA469;
  --secondary-yellow-600: #D8B977;
  --secondary-yellow-500: #D6B750;
  --secondary-yellow-400: #E2C24B;
  --secondary-yellow-300: #FDDC37;
  --secondary-yellow-200: #FCEBAF;
  --secondary-yellow-100: #FDF3D4;
  --secondary-yellow-50: #FEF9E7;
  --secondary-yellow-0: #FFFFFF;

  --info-800: #1E429F;
  --info-600: #2563EB;
  --info-100: #BFDBFE;
  --info-50: #EBF5FF;

  --secondary-700: #891323;
  --secondary-100: #FFFBF1;

  --success-300: #0e9f6e;
  --success-200: #31c48d;

  --alert-600: #DC2626;

  --error-400: #c81e1e;
  --error-300: #e02424;
  --error-200: #f05252;
  --error-100: #fdf2f2;

  --warning-500: #FBBF24;
  --warning-200: #ff5a1f;

  --special-separator: #4D4D4D;
  --special-star: #eab308;

  --overlay: rgb(34 34 34 / 0.5);
  --overlay-2: rgb(0 0 0 / 0.80);


  --text-c-900: var(--background-900);
  --text-c-800: var(--background-800);
  --text-c-700: var(--background-700);
  --text-c-600: var(--background-600);
  --text-c-500: var(--background-500);
  --text-c-400: var(--background-400);
  --text-c-300: var(--background-300);
  --text-c-200: var(--background-200);
  --text-c-100: var(--background-100);
  --text-c-50: var(--background-50);
  --text-c-0: var(--background-0);

  --border-c-900: var(--background-900);
  --border-c-800: var(--background-800);
  --border-c-700: var(--background-700);
  --border-c-600: var(--background-600);
  --border-c-500: var(--background-500);
  --border-c-300: var(--background-300);
  --border-c-200: var(--background-200);
  --border-c-100: var(--background-100);
  --border-c-0: var(--background-0);


  --text-gray-800: #FAFAFA;
  --text-gray-700: var(--background-700);
  --text-gray-600: var(--background-600);
  --text-gray-500: var(--background-500);
  --text-gray-400: #ffff;

  --text-dark-800: #F8F8F8;
  --text-dark-700: #E6E6E6;
  --text-dark-600: #D1D1D1;

  --wl-std-separator-thickness: 1px;
  --wl-std-separator-length: 6rem;
  --wl-std-separator-color: var(--background-900);


  .bg-floating-phone-btn {
    background-color: var(--secondary-yellow-400);
  }

  .bg-floating-phone-btn:hover {
    background-color: var(--secondary-yellow-300);
    transform: scale(1.1);
  }

  .bg-btn-w-text {
    background-color: var(--secondary-yellow-500);
  }

  .bg-btn-w-text:hover {
    background-color: var(--secondary-yellow-300);
  }

  #hero-images-carousel-wrapper .slick-dots li button {
    background-color: var(--background-300);
  }

  #hero-images-carousel-wrapper .slick-dots li.slick-active button {
    background-color: var(--background-700);
  }

  .btn-border-yellow-500 {
    border: 1.5px solid;
    border-color: var(--secondary-yellow-500);
  }

  .menu-underline-offset {
    text-underline-offset: 4px;
  }

  .bg-info-sticky-message {
    background-color: var(--info-600);
  }

  .bg-warning-sticky-message {
    background-color: var(--warning-500);
  }

  .bg-alert-sticky-message {
    background-color: var(--alert-600);
  }

  .bg-about-us,
  .bg-popular-dishes {
    background-color: var(--background-0);
    scroll-margin-top: 30px;
  }

  .bg-opening-hours {
    scroll-margin-top: 30px;
  }

  @media (min-width: 768px) {
    .bg-about-us {
      background-color: var(--background-0);
      scroll-margin-top: 40px;
    }

    .bg-popular-dishes,
    .bg-opening-hours {
      background-color: var(--background-0);
      scroll-margin-top: 32px;
    }
  }

  @media (min-width: 1024px) {
    .bg-popular-dishes,
    .bg-opening-hours {
      background-color: var(--background-0);
      scroll-margin-top: 40px;
    }
  }

  .bg-gallery,
  .bg-testimonials {
    background-color: var(--background-0);
    scroll-margin-top: 145px;
  }

  .margin-scroll-menu-category {
    scroll-margin-top: 150px;
  }

  @media (min-width: 768px) {
    .margin-scroll-menu-category {
      scroll-margin-top: 200px;
    }
  }

  @media (min-width: 1280px) {
    .margin-scroll-menu-category {
      scroll-margin-top: 210px;
    }
  }

  .margin-scroll-contact {
    scroll-margin-top: 30px;
  }

  @media (min-width: 768px) {
    .margin-scroll-contact {
      scroll-margin-top: 150px;
    }
  }

  .bg-mobile-menu {
    background-color: var(--background-50);
  }

  .bg-nav-bar-scrolled {
    background-color: var(--light-background-950);
  }

  .border-mobile-menu {
    border-color: var(--background-100);
  }

  .border-mobile-language-dropdown {
    border-color: var(--background-200);
  }

  .bg-mobile-language-selector,
  .bg-mobile-language-dropdown {
    background-color: var(--background-100);
  }

  .text-secondary-yellow-400 {
    color: var(--secondary-yellow-400);
  }

  .text-primary-red-900 {
    color: var(--primary-red-900);
  }

  .text-primary-red-500 {
    color: var(--primary-red-500);
  }

  .text-primary-dark-700 {
    color: var(--background-700);
  }

  .text-info-sticky-message {
    color: var(--background-900);
  }

  .text-warning-sticky-message {
    color: var(--background-0);
  }

  .text-alert-sticky-message {
    color: var(--background-900);
  }

  .bg-info-sticky-cancel-btn {
    color: var(--info-100);
  }

  .text-nav-unscrolled,
  .text-carousal-section,
  .text-explore-menu-btn {
    color: var(--background-900);
  }

  .about-us-restaurant-name,
  .gallery-name,
  .discover-name,
  .popular-dishes-name {
    color: var(--secondary-yellow-500);
  }

  .about-us-icons {
    color: var(--secondary-yellow-600);
  }

  .parallax-section {
    position: relative;
    overflow: hidden;
  }

  .parallax-bg {
    position: absolute;
    inset: 0;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    height: 100%;
    will-change: transform;
  }

  .parallax-opacity {
    background: #00000026;
  }

  .parallax-opacity-w-content {
    background: #000000B2;
  }

  .special-seperator {
    border-color: var(--special-separator);
  }

  .bg-explore-menu-btn-wo-transition {
    background-color: var(--primary-red-500);
  }

  .bg-explore-menu-btn {
    background-color: var(--primary-red-500);
    transition: background-color 0.3s ease-in-out;
  }

  .bg-explore-menu-btn:hover {
    background-color: #cf0f0f;
  }

  .bg-explore-menu-btn > span {
    transition: transform 700ms ease-in-out;
  }

  .bg-explore-menu-btn:hover > span {
    transform: translateX(10px);
  }

  .gallery-menu-button {
    background-color: var(--background-50);
    border-color: var(--background-300);
    color: var(--background-900);
  }

  .gallery-menu-button:hover {
    background-color: var(--background-300);
  }

  .parallax-video-header {
    color: var(--secondary-yellow-300);
  }

  .parallax-video-title {
    color: var(--background-900);
  }

  .bg-parallax-video-btn {
    background-color: #FFFFFF80;
  }

  .bg-parallax-video-btn:hover {
    background-color: var(--light-background-600);
  }


  .parallax-video-btn {
    color: var(--background-900);
  }

  .testimonial-star-color {
    color: var(--secondary-yellow-500);
  }

  #testimonials .slick-dots li.slick-active button {
    background-color: var(--background-700);
  }

  .bg-odd-item-opening-hours {
    background-color: var(--background-100);
  }

  #google-map-iframe-container > iframe {
    height: 240px;
    width: 100%;
  }

  @media (min-width: 768px) {
    #google-map-iframe-container > iframe {
      height: 280px;
      width: 100%;
    }
  }

  @media (min-width: 1280px) {
    #google-map-iframe-container > iframe {
      height: 320px;
      width: 100%;
    }
  }

  .bg-gallery-item {
    background-color: var(--background-50);
  }

  #google-map-iframe-container > iframe {
    filter: invert(100%) contrast(70%);
  }

  .nav-bar-position-default {
    top: 0px;
  }

  .nav-bar-position-w-sticky-message {
    top: 80px;
  }

  @media (min-width: 768px) {
    .nav-bar-position-w-sticky-message {
      top: 56px;
    }
  }

  .btn-continue-reservation,
  .btn-book-reservation,
  .btn-close-reservation {
    background-color: var(--background-900);
  }

  .bg-pop-message {
    background-color: var(--background-0);
  }

  .btn-pop-reserve-table {
    background-color: var(--secondary-yellow-600);
  }

  .btn-pop-reserve-table:hover {
    background-color: var(--secondary-yellow-300);
  }

  .btn-pop-close {
    border: 1.5px solid;
    border-color: var(--secondary-yellow-600);
  }

  .outline-color-palette-button {
    outline-color: var(--background-900);
  }

  .outline-color-palette-bottom-button {
    outline: 0px;
  }

  .bg-color-palette-bottom-button {
    background-color: var(--background-900);
    color: var(--background-0);
  }

  .text-color-palette-qty {
    color: var(--background-700);
  }

  body.dark.red .bg-about-us,
  body.dark.red .bg-gallery,
  body.dark.red .bg-popular-dishes,
  body.dark.red .bg-testimonials,
  body.dark.red .bg-opening-hours,
  body.dark.red .bg-contact-us,
  body.dark.red .bg-pop-message,
  .bg-body-red {
    background-color: var(--primary-dark-red-0);
  }

  body.dark.red .bg-gallery-item,
  body.dark.red .bg-odd-item-opening-hours,
  body.dark.red .bg-video-close {
    background-color: var(--primary-dark-red-50);
  }

  body.dark.red .gallery-menu-button {
    background-color: var(--primary-dark-red-50);
    border-color: var(--primary-dark-red-100);
  }

  body.dark.red .gallery-menu-button:hover {
    background-color: var(--primary-dark-red-100);
  }

  body.dark.red .bg-nav-bar-scrolled {
    background-color: var(--primary-red-700);
  }

  body.dark.red .outline-color-palette-button {
    outline-color: var(--primary-dark-red-300);
  }

  body.dark.red .bg-color-palette-bottom-button {
    background-color: var(--primary-dark-red-200);
    color: var(--background-700);
  }

  body.dark.red [type='checkbox']:checked,
  body.dark.red [type='checkbox']:checked:focus,
  body.dark.red [type='checkbox']:checked:hover {
    background-color: var(--primary-dark-red-100);
  }

  body.dark #datepicker-parent-container .datepicker .datepicker-cell.selected,
  body.dark #datepicker-parent-container .datepicker-cell.selected:hover {
    background-color: var(--background-800);
    color: var(--text-c-0);
    font-weight: 600;
  }

  body.dark.red .special-seperator {
    border-color: var(--primary-red-600);
  }

  .amenity-icons > svg {
    width: 22px !important;
    height: 22px !important;
  }

  @media (min-width: 1280px) {
    .amenity-icons > svg {
      width: 24px !important;
      height: 24px !important;
    }
  }

  .btn-reservation-show-more {
    border-color: var(--background-900);
    color: var(--background-900);
  }

  .datepicker-cell.focused:not(.selected), .datepicker-cell:not(.disabled):hover {
    background-color: var(--background-300);
    color: var(--text-c-800);
  }

  .section-header,
  .pop-message-title {
    color: var(--background-900);
  }

  .amenity-label,
  .footer-links {
    color: var(--text-dark-800);
  }

  .special-content-title,
  .highlight-content-title,
  .reviews-content-review,
  .opening-content,
  .contact-content-contact {
    color: var(--text-gray-800);
  }

  .reviews-content-author {
    color: var(--text-gray-600);
  }

  .welcome-content-description,
  .footer-heading,
  .text-footer-powered-by {
    color: var(--text-dark-700);
  }

  .special-content-description,
  .highlight-content-description,
  .pop-message-description,
  .social-media-icons {
    color: var(--text-gray-700);
  }

  .reviews-content-timestamp,
  .contact-content-icon {
    color: var(--text-gray-500);
  }

  .bg-footer {
    background-color: var(--light-background-950);
    color: var(--background-900);
  }

  .border-footer-separator {
    border-color: var(--background-100);
  }

  .youtube-iframe {
    width: 343px !important;
    height: 216px !important;
  }

  @media (min-width: 768px) {
    .youtube-iframe {
      width: 672px !important;
      height: 440px !important;
    }
  }

  @media (min-width: 1280px) {
    .youtube-iframe {
      width: 768px !important;
      height: 27rem !important;
    }
  }

  .bg-btn-hero-section-nav {
    background: var(--background-0-30);
  }

  .color-btn-hero-section-nav {
    color: var(--background-700);
  }

  .wl-standard-separator {
    inline-size: var(--wl-std-separator-thickness);
    block-size:  var(--wl-std-separator-length);
    background:  var(--wl-std-separator-color);
    margin-inline: auto;
    margin-block: 2rem;
  }

}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 5px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--background-500);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--background-700);
}

#restaurant-highlights-desktop.slick-initialized .slick-track,
#restaurant-highlights-tablet.slick-initialized .slick-track,
#restaurant-highlights-mobile.slick-initialized .slick-track {
  display: flex;
  align-items: stretch;
}

#restaurant-highlights-desktop .slick-slide {
  margin-right: 40px;
}

#restaurant-highlights-desktop.slick-initialized .slick-track {
  margin-right: -40px;
}

#restaurant-highlights-tablet .slick-slide,
#restaurant-highlights-mobile .slick-slide {
  margin-right: 32px;;
}

#restaurant-highlights-tablet.slick-initialized .slick-track,
#restaurant-highlights-mobile.slick-initialized .slick-track {
  margin-right: -32px;
}

#restaurant-highlights-desktop .slick-slide > div,
#restaurant-highlights-tablet .slick-slide > div,
#restaurant-highlights-mobile .slick-slide > div
{ padding: 0; }