/*-------------------------------------------------
 =  Table of Css

 1.Import google fonts & basic style of template
 2.Header
 3.Isotope filtering
 4.Kenburn slider basic
 5.General
 6.popular menu
 7.today menu
 8.menu section
 9.Reservation banner section
 10.Reservation section
 11.Teams sections
 12.news section
 13.Statistic section
 14.About sections
 14.Single Post 
 15.clients section
 16.Contact
 17.Footer
 18.Responsive part
-------------------------------------------------*/


/* import google fonts & basic style in template */
@import url("https://fonts.googleapis.com/css?family=Mr+Dafoe|Merriweather:300,300i,400,400i,700,700i,900,900i|Poppins:300,400,500,600,700");
.reset-elem, .navbar-nav li.drop ul.dropdown, section.menu-section .menu-box ul.menu-list-items, section.blog-section .blog-box .blog-post ul.post-meta, section.blog-section .blog-box .blog-post ul.share-post, .pagination-box ul.page-list, .comment-area-box > ul, footer .instagram-widget ul, footer .last-line ul.social-icons {
  margin: 0;
  padding: 0; }

@font-face {
  font-family: 'Copperplate Gothic Bold';
  src: url('fonts/copperplategothic_bold.woff2') format('woff2'),
       url('fonts/copperplategothic_bold.woff') format('woff'),
       url('fonts/copperplategothic_bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

.paragraph, p {
  font-size: 13px;
  color: #d8c2b7;
  font-family: "Merriweather", serif;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 10px; }

.heading1, h1, section.blog-section .blog-box .blog-post h2 {
  color: #fff;
  font-size: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 40px;
  margin: 0 0 30px;
  letter-spacing: 2.5px;
  text-transform: uppercase; }

.heading2, h2, section.popular-menu-section .menu-box .item .menu-post .menu-post-content span, section.today-menu-section .menu-box .item .menu-post .menu-post-content .inner-menu span, section.menu-section .menu-box ul.menu-list-items li span.price {
  color: #d8c2b7;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 0 15px;
  line-height: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase; }

.heading3, h3, section.blog-section .blog-box .blog-post ul.post-meta li {
  color: #ffffff;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 0 15px;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase; }

.back-cover, section.popular-menu-section {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important; }

.anchor, .navbar-nav li.drop ul.dropdown li a, a {
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

/*------------------------------------------------- */
/* =  Header
 *------------------------------------------------- */
.navbar-default {
  background: transparent;
  border: none;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin: 50px 0 0; }
  .navbar-default .inner-navbar {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9) ;
    border: 2px solid #fff;
    padding: 0 70px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out; }

header.active .navbar-default {
  margin-top: 0; }
  header.active .navbar-default .inner-navbar {
    background: #863a20;
    border: 2px solid transparent; }

.navbar-brand {
  height: auto;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  padding: 40px 40px 30px;
  letter-spacing: 2.5px;
  color: #fff !important;
  font-size: 22px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase; }

.navbar-header {
  z-index: 2;
  position: relative; }

.navbar-nav {
  padding-right: 40px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }
  .navbar-nav > li > a {
    color: #fff !important;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    padding: 40px 0px 36px;
    letter-spacing: 1px;
    margin: 0 25px;
    position: relative;
    cursor: pointer; }
  .navbar-nav > li > a:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent; }
  .navbar-nav > li > a:hover:after,
  .navbar-nav > li > a.active:after {
    background: #c7ad88; }
  .navbar-nav > li:last-child > a {
    margin-right: 0; }
  .navbar-nav li.drop {
    position: relative; }
    .navbar-nav li.drop ul.dropdown {
      position: absolute;
      top: 100%;
      margin-top: -1px;
      left: 0;
      width: 220px;
      background: #ffffff;
      border-top: 2px solid #c7ad88;
      padding: 10px 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
      .navbar-nav li.drop ul.dropdown li {
        display: block; }
        .navbar-nav li.drop ul.dropdown li a {
          display: block;
          color: #777777;
          font-size: 11px;
          font-family: "Poppins", sans-serif;
          font-weight: 600;
          text-transform: uppercase;
          padding: 10px 20px; }
        .navbar-nav li.drop ul.dropdown li a:hover {
          color: #999999; }
      .navbar-nav li.drop ul.dropdown li:first-child {
        border-top: none; }
  .navbar-nav li.drop:hover ul.dropdown {
    opacity: 1;
    visibility: visible; }

.navbar-nav.active > li > a {
  opacity: 0;
  visibility: hidden; }

.navbar-nav.active > li > a.open-menu {
  opacity: 1;
  visibility: visible; }

.navbar-collapse {
  position: relative; }

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
/*-------------------------------------------------- */
/* 1. Isotope filtering */
/*------------------------------------------------- */
.isotope-item {
  z-index: 2; }

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1; }

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity; }

/*-----------------------------------------------------------------------------
 *
 *KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
 *
 *Screen Stylesheet
 *
 *version:    1.0
 *date:       07/27/11
 *author:     themepunch
 *email:      support@themepunch.com
 *website:    http://www.themepunch.com */
/*----------------------------------------------------------------------------- */
.boxedcontainer {
  max-width: 1170px;
  margin: auto;
  padding: 0px 30px; }

/*********************************************
 *    -   SETTINGS FOR BANNER CONTAINERS  -
 ********************************************* */
.tp-banner-container {
  width: 100%;
  position: relative;
  padding: 0; }

.tp-banner {
  width: 100%;
  position: relative; }

.tp-banner-fullscreen-container {
  width: 100%;
  position: relative;
  padding: 0; }

/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
.title-section {
  text-align: center;
  margin-bottom: 30px;
  position: relative; }
  .title-section h1 {
    color: #222222;
    position: relative;
    padding-bottom: 25px; }
  .title-section h1:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 5px;
    bottom: 0;
    left: 50%;
    margin-left: -35px;
    /*
   * Set a counter and get the length of the image path.
   */
    /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
    /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
    /*
     * Set a base background for 1x environments.
     */
    background: transparent url("../images/divider.png") center center no-repeat;
    background-size: cover;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .title-section h1:after {
        background: transparent url("../images/divider@2x.png") center center no-repeat;
        background-size: cover; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .title-section h1:after {
        background: transparent url("../images/divider@2x.png") center center no-repeat;
        background-size: cover; } }

.title-section.white-style h1 {
  color: #ffffff; }

#home-section {
  overflow: hidden;
  min-height: 700px;
  background: #111111; }
  #home-section .tp-caption.Concept-Title {
  font-family: "Copperplate Gothic Bold", sans-serif;
  font-weight: bold !important; }
  #home-section .tp-caption.Concept-SubTitle {
    font-family: "Poppins", sans-serif;
    font-style: normal !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff; }

a.button-one {
  color: #c7ad88;
  font-size: 16px !important;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  padding: 14px 36px;
  letter-spacing: 1px;
  background: transparent;
  font-weight: 600;
  border: 2px solid #c7ad88 !important; }

a.button-one:hover {
  color: #fff;
  background: #c7ad88; }

.center-button {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #fff;
  text-align: center; }
  .center-button a {
    color: #999999;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    padding: 13px 20px 10px;
    text-transform: uppercase;
    border: 2px solid #999999;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px; }
  .center-button a:hover {
    background: #999999;
    color: #fff; }

a.button-two {
  color: #999999;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 13px 20px 10px;
  text-transform: uppercase;
  border: 2px solid #999999;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 25px; }

a.button-two:hover {
  background: #999999;
  color: #fff; }

button.mfp-close, button.mfp-arrow, a.zoom {
  outline: none; }

section.page-banner-section {
  padding: 175px 0 105px;
  text-align: center; }
  section.page-banner-section h1 {
    font-size: 50px;
    line-height: 100px;
    font-family: "Copperplate Gothic Bold", cursive;
    font-weight: 400;
    text-transform: initial;
    color: #863c21;
    margin: 0; }
  section.page-banner-section h3 {
    color: #c7ad88; }

section.page-banner-section.contact {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban2.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.contact {
      background: #111 url("../upload/banners/ban2@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.contact {
      background: #111 url("../upload/banners/ban2@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.reservation {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban3.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.reservation {
      background: #111 url("../upload/banners/ban3@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.reservation {
      background: #111 url("../upload/banners/ban3@2x.jpg") center center no-repeat;
      background-size: cover; } }
	  
	  section.page-banner-section.gallery {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban4.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.gallery {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.gallery {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.blog {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban4.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.blog {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.blog {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.menu {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban5.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.menu {
      background: #111 url("../upload/banners/ban5@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.menu {
      background: #111 url("../upload/banners/ban5@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.about {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban6.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.about {
      background: #111 url("../upload/banners/ban6@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.about {
      background: #111 url("../upload/banners/ban6@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.blog.single h1 {
  font-size: 30px;
  line-height: 38px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 10px; }

/*------------------------------------------------- */
/* =  popular menu
 *------------------------------------------------- */
section.popular-menu-section {
  padding: 60px 0 60px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/background.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.popular-menu-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.popular-menu-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.popular-menu-section .menu-box .item {
    padding: 0;
    margin: 0; }
    section.popular-menu-section .menu-box .item .menu-post {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      background: #873b21; }
      section.popular-menu-section .menu-box .item .menu-post img {
        width: 50%;
        height: auto; }
      section.popular-menu-section .menu-box .item .menu-post .menu-post-content {
        width: 50%;
        float: right;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center; }
        section.popular-menu-section .menu-box .item .menu-post .menu-post-content p {
          font-style: italic;
          margin-bottom: 15px; }
        section.popular-menu-section .menu-box .item .menu-post .menu-post-content span {
          display: inline-block;
          font-size: 24px;
          margin-bottom: 0; }
    section.popular-menu-section .menu-box .item .menu-post:nth-child(2n) {
      flex-direction: row-reverse; }
    section.popular-menu-section .menu-box .item .menu-post.right-image img {
      float: right; }
    section.popular-menu-section .menu-box .item .menu-post.right-image .menu-post-content {
      float: left; }
    section.popular-menu-section .menu-box .item .menu-post:after {
      content: '';
      position: absolute;
      top: 18px;
      bottom: 18px;
      right: 18px;
      left: 18px;
      border: 2px solid transparent;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.popular-menu-section .menu-box .item .menu-post:hover:after {
      border-color: #c7ad88; }

.owl-theme .owl-controls {
  margin-top: 40px; }

.owl-theme .owl-controls .owl-buttons {
  display: none; }

/*------------------------------------------------- */
/* =  today menu
 *------------------------------------------------- */
section.today-menu-section {
  padding: 50px 0 50px; }
  section.today-menu-section .center-area h2 {
	color: #833a1f;
    margin-bottom: 20px;
    font-weight: 400; }
  section.today-menu-section .menu-box {
    margin-left: -15px;
    margin-right: -15px; }
    section.today-menu-section .menu-box .item {
      padding: 0 15px;
      margin: 0; }
      section.today-menu-section .menu-box .item .menu-post {
        position: relative; }
        section.today-menu-section .menu-box .item .menu-post img {
          width: 100%;
          height: auto; }
        section.today-menu-section .menu-box .item .menu-post .menu-post-content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          padding: 0 65px;
          display: flex;
          align-items: center; }
          section.today-menu-section .menu-box .item .menu-post .menu-post-content .inner-menu {
            position: relative;
            z-index: 2; }
            section.today-menu-section .menu-box .item .menu-post .menu-post-content .inner-menu h2 {
              color: #fff;
              font-weight: 400;
              letter-spacing: 1.6px;
              padding-bottom: 25px;
              margin-bottom: 25px;
              position: relative; }
            section.today-menu-section .menu-box .item .menu-post .menu-post-content .inner-menu h2:after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 36px;
              height: 2px;
              background: #c7ad88; }
            section.today-menu-section .menu-box .item .menu-post .menu-post-content .inner-menu span {
              display: inline-block;
              color: #fff;
              font-weight: 400;
              letter-spacing: 1.8px;
              margin-bottom: 0; }
        section.today-menu-section .menu-box .item .menu-post .menu-post-content:after {
          content: '';
          position: absolute;
          top: 20px;
          left: 20px;
          right: 20px;
          bottom: 20px;
          border: 2px solid transparent;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out; }
      section.today-menu-section .menu-box .item .menu-post:hover .menu-post-content {
        background: rgba(0, 0, 0, 0.3); }
      section.today-menu-section .menu-box .item .menu-post:hover .menu-post-content:after {
        border-color: #c7ad88; }

/*------------------------------------------------- */
/* =  menu section
 *------------------------------------------------- */
section.menu-section {
  padding: 130px 0 110px;
  position: relative; }
  section.menu-section .background-items {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex; }
    section.menu-section .background-items div.table-back {
      flex: 2;
      height: 100%;
      /*
   * Set a counter and get the length of the image path.
   */
      /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
      /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
      /*
     * Set a base background for 1x environments.
     */
      background: #111 url("../upload/banners/background.jpg") center center no-repeat;
      background-size: cover;
      /*
     * Create an @2x-ish media query.
     */
      /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
      /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        section.menu-section .background-items div.table-back {
          background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
          background-size: cover; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        section.menu-section .background-items div.table-back {
          background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
          background-size: cover; } }
    section.menu-section .background-items div.image-back {
      flex: 1;
      height: 100%;
      overflow: hidden; }
      section.menu-section .background-items div.image-back img {
        height: 100%;
        width: auto; }
  section.menu-section .menu-box {
    position: relative;
    z-index: 2; }
    section.menu-section .menu-box .title-section {
      text-align: left; }
      section.menu-section .menu-box .title-section h1:after {
        left: 0;
        margin-left: 0; }
    section.menu-section .menu-box ul.menu-list-items li {
      display: block;
      margin-bottom: 40px;
      position: relative; }
      section.menu-section .menu-box ul.menu-list-items li .list-content {
        max-width: 550px;
        padding-right: 80px; }
        section.menu-section .menu-box ul.menu-list-items li .list-content p {
          margin-bottom: 0; }
      section.menu-section .menu-box ul.menu-list-items li span.price {
        position: absolute;
        margin-bottom: 0;
        top: 0;
        right: 0; }

section.menu-section.right-content .background-items {
  flex-direction: row-reverse;
}
section.menu-section.right-content .background-items div.table-back {
  background: #111 url("../upload/banners/background2.jpg") center center no-repeat;
  background-size: cover;
}
section.menu-section .title-section h1 {
  margin-top: 0;        /* فاصله از بالا حذف بشه */
  margin-bottom: 15px;  /* فاصله پایین رو هر عددی خواستی بذار */
}
@media (min-width: 992px){
  section.menu-section .background-items .image-back img[src*="b7"]{
    height:110%;   /* از 105% تا 120% امتحان کن */
    width:auto;    /* نسبت حفظ می‌شود؛ بالا/پایین کمی کراپ می‌شود */
    display:block;
  }
}
/*------------------------------------------------- */
/* =  Reservation banner section
 *------------------------------------------------- */
section.reservation-banner-section {
  padding: 20px 0;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban1.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  height: 800px;
  display: flex;
  align-items: center; }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.reservation-banner-section {
      background: #111 url("../upload/banners/ban1@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.reservation-banner-section {
      background: #111 url("../upload/banners/ban1@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.reservation-banner-section .container {
    text-align: center; }
    section.reservation-banner-section .container h1 {
      font-family: "Copperplate Gothic Bold", cursive;
      font-size: 70px;
      text-transform: capitalize;
      font-weight: 400;
      line-height: 100px;
      margin-bottom: 10px; }
    section.reservation-banner-section .container h3 {
      color: #fffff;
      margin-bottom: 30px; }

/*------------------------------------------------- */
/* =  Reservation section
 *------------------------------------------------- */
section.reservation-section {
  padding: 50px 0 50px; }
  section.reservation-section #reservation-form {
    margin: 0 auto;
    max-width: 770px; }
    section.reservation-section #reservation-form h3 {
      text-align: center;
      color: #c7ad88;
      margin-bottom: 40px; }
    section.reservation-section #reservation-form input[type="text"] {
      display: block;
      width: 100%;
      padding: 10px 20px;
      background: transparent;
      color: #999999;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      outline: none;
      border: 2px solid #eeeeee;
      margin: 0 0 30px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.reservation-section #reservation-form .center-area {
      text-align: center; }
    section.reservation-section #reservation-form input[type="submit"] {
      color: #c7ad88;
      font-size: 13px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      padding: 10px 35px 8px;
      text-transform: uppercase;
      border: 2px solid #c7ad88;
      background: transparent;
      outline: none;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      letter-spacing: 2px;
      margin-bottom: 10px; }
    section.reservation-section #reservation-form input[type="submit"]:hover {
      background: #c7ad88;
      color: #ffffff; }

.ui-datepicker {
  width: 370px; }
  
/*------------------------------------------------- */
/* =  Gallery section
 *------------------------------------------------- */
/* ===================== Luxan Gallery (FINAL, no-scrollbar) ===================== */

/* 1) ظرف هم‌عرض سایت و وسط‌چین */
section.gallery-section > .container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

/* 2) فاصله‌ی سکشن از بعدی */
section.gallery-section {
  margin-bottom: 60px;
}

/* 3) هسته‌ی گالری (متغیرها) */
.luxan-gallery {
  --lxg-gap: 1.5rem;           /* فاصله کارت‌ها */
  --lxg-radius: 10px;
  --lxg-shadow: 0 2px 8px rgba(0,0,0,.06);
  --lx-nav: 100px;             /* fallback ارتفاع ناوبار؛ JS مقدار دقیق را ست می‌کند */
  width: 100%;
}

/* 4) نوار فیلتر: تک‌سطر، اسکرول افقی، استیکی — با اسکرول‌بار مخفی */
.luxan-gallery .lxg-filters {
  position: sticky;
  top: calc(var(--lx-nav) + 6px);
  z-index: 102;

  display: block;
  max-width: 100%;
  white-space: nowrap;         /* تک‌سطر قطعی */
  overflow-x: auto;            /* اسکرول افقی (برای شیفت برنامه‌نویسی) */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  margin: 24px 0 16px;
  padding: 8px 0;
  background: transparent;

  /* مخفی‌سازی نوار اسکرول در همه مرورگرها */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}
.luxan-gallery .lxg-filters::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;               /* Chrome/Safari/Edge */
  background: transparent;
}

/* دکمه‌های فیلتر */
.luxan-gallery .lxg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;

  margin-inline-end: 10px;
  flex: 0 0 auto;              /* نشکند؛ عرض ثابت بماند */

  color: #c7ad88;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  padding: 10px 25px 8px;
  letter-spacing: 1px;
  background: transparent;
  font-weight: 500;
  border: 2px solid #c7ad88;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.luxan-gallery .lxg-btn:hover,
.luxan-gallery .lxg-btn.is-active,
.luxan-gallery .lxg-btn.active {
  background: #c7ad88;
  color: #fff;
  outline: none;
}

/* 5) گرید کارت‌ها: حداقل دو ستونه روی موبایل */
.luxan-gallery .lxg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lxg-gap);
  justify-content: center;
}
@media (min-width: 768px) {
  .luxan-gallery .lxg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .luxan-gallery .lxg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 6) کارت‌ها */
.luxan-gallery .lxg-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--lxg-radius);
  overflow: hidden;
  box-shadow: var(--lxg-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.luxan-gallery .lxg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.luxan-gallery .lxg-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* بدنه کارت */
.luxan-gallery .lxg-body  { padding: 10px 12px; }
.luxan-gallery .lxg-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.luxan-gallery .lxg-text  { margin: 0; font-size: 13px; color: #666; }

/* 7) منطق فیلتر (مخفی‌سازی) */
.luxan-gallery .lxg-card.hide { display: none !important; }

/* 8) Lazy image (افکت blur هنگام لود) */
.luxan-gallery .lxg-card img {
  filter: none;
  transform: translateZ(0);
  transition: filter .35s ease;
}
.luxan-gallery .lxg-card img.lazy:not(.is-loaded) { filter: blur(8px); }
.luxan-gallery .lxg-card img.lazy.is-loaded      { filter: blur(0); }

/* 9) ریسپانسیو اندازه دکمه‌ها */
@media (max-width: 768px){
  .luxan-gallery .lxg-filters .lxg-btn{ font-size: 12px; padding: 8px 14px; }
}
@media (max-width: 576px){
  .luxan-gallery .lxg-filters .lxg-btn{ font-size: 11px; padding: 8px 12px; letter-spacing: .5px; }
}
/* ===== Simple Centered Modal (shared) ===== */
.sm-overlay{position:fixed;inset:0;background: rgba(24,32,36,0.78);backdrop-filter:blur(2px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;z-index:9999}
.sm-overlay.show{opacity:1;visibility:visible}
.sm-modal{width:min(92vw,880px);max-height:90vh;background:#fbfaf7;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:20px;display:grid;place-items:center;transform:scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease;overflow:visible}
.sm-overlay.show .sm-modal{transform:scale(1);opacity:1}
.sm-figure{margin:0;width:100%;display:grid;place-items:center}
.sm-figure img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:14px}
.sm-close{position:absolute;top:-18px;right:-18px;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);background:#2f3a40;color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.sm-close span{font-size:20px;line-height:1}
@media (max-width:767px){
  .sm-modal{width:min(94vw,560px);padding:12px;border-radius:16px}
  .sm-figure img{max-height:64vh;border-radius:12px}
  .sm-close{top:-14px;right:-14px;width:40px;height:40px}
  .sm-close span{font-size:18px}
}

/*------------------------------------------------- */
/* =  Team Sections */
/*------------------------------------------------- */
section.team-section {
  padding: 50px 50px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/background.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.team-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.team-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.team-section .team-box {
    display: flex; }
    section.team-section .team-box .team-post {
      flex: 1;
      margin-bottom: 30px;
      text-align: center; }
	section.team-section .team-box .team-post img {
	  width: 100%;
      height: 400px;   /* ارتفاع ثابت دلخواه */
      margin-bottom: 45px;
      object-fit: cover;}
      section.team-section .team-box .team-post h2 {
        font-weight: 400; }
      section.team-section .team-box .team-post span {
        display: inline-block;
        color: #cccccc;
        font-size: 12px;
        font-family: "Poppins", sans-serif;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        margin: 0 0 20px; }
      section.team-section .team-box .team-post p {
        max-width: 225px;
        margin: 0 auto;
        font-style: italic; }

/*------------------------------------------------- */
/* =  News section */
/*------------------------------------------------- */
section.blog-section {
  padding: 100px 0; }
  section.blog-section .blog-box {
    max-width: 780px;
    margin: 0 auto;
    text-align: center; }
    section.blog-section .blog-box .blog-post {
      margin-bottom: 70px;
      border-bottom: 1px solid #eeeeee; }
      section.blog-section .blog-box .blog-post img, section.blog-section .blog-box .blog-post iframe {
        width: 100%;
        height: auto;
        margin-bottom: 40px; }
      section.blog-section .blog-box .blog-post .flexslider {
        margin-bottom: 40px !important; }
        section.blog-section .blog-box .blog-post .flexslider img {
          margin-bottom: 0; }
      section.blog-section .blog-box .blog-post iframe {
        height: 370px;
        border: none; }
      section.blog-section .blog-box .blog-post h2 a {
        color: #222222; }
      section.blog-section .blog-box .blog-post h2 a:hover {
        text-decoration: underline !important; }
      section.blog-section .blog-box .blog-post ul.post-meta {
        margin-bottom: 30px; }
        section.blog-section .blog-box .blog-post ul.post-meta li {
          display: inline-block;
          font-size: 12px;
          margin: 0 9px; }
          section.blog-section .blog-box .blog-post ul.post-meta li a {
            color: #c7ad88; }
          section.blog-section .blog-box .blog-post ul.post-meta li a:hover {
            text-decoration: underline !important; }
        section.blog-section .blog-box .blog-post ul.post-meta li:after {
          content: '/';
          margin-left: 16px;
          color: #c7ad88;
          font-family: "Poppins", sans-serif; }
        section.blog-section .blog-box .blog-post ul.post-meta li:last-child:after {
          display: none;
          margin-left: 0; }
      section.blog-section .blog-box .blog-post p {
        max-width: 720px;
        margin: 0 auto 30px; }
        section.blog-section .blog-box .blog-post p a {
          color: #c7ad88;
          text-decoration: underline !important; }
      section.blog-section .blog-box .blog-post ul.share-post {
        max-width: 200px;
        margin: 50px auto -11px;
        background: #fff; }
        section.blog-section .blog-box .blog-post ul.share-post li {
          display: inline-block;
          margin: 0 13px; }
          section.blog-section .blog-box .blog-post ul.share-post li a {
            font-size: 14px;
            color: #999999; }
          section.blog-section .blog-box .blog-post ul.share-post li a:hover {
            color: #c7ad88; }

.pagination-box {
  padding-top: 30px;
  overflow: hidden; }
  .pagination-box ul.page-list {
    text-align: center; }
    .pagination-box ul.page-list li {
      display: inline-block; }
      .pagination-box ul.page-list li a {
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid transparent;
        text-align: center;
        color: #999999;
        font-size: 12px;
        font-family: "Poppins", sans-serif;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        line-height: 30px; }
      .pagination-box ul.page-list li a:hover,
      .pagination-box ul.page-list li a.active {
        color: #c7ad88;
        border: 2px solid #c7ad88; }
      .pagination-box ul.page-list li a.prev {
        width: auto;
        margin-right: 50px; }
        .pagination-box ul.page-list li a.prev i {
          margin-right: 10px; }
      .pagination-box ul.page-list li a.next {
        width: auto;
        margin-left: 50px; }
        .pagination-box ul.page-list li a.next i {
          margin-left: 10px; }
      .pagination-box ul.page-list li a.prev, .pagination-box ul.page-list li a.next {
        border: 2px solid transparent; }

/*------------------------------------------------- */
/* =  Statistic sections*/
/*------------------------------------------------- */
section.statistic-section {
  padding: 60px 0 90px; }
  section.statistic-section .statistic-post {
    text-align: center; }
    section.statistic-section .statistic-post span, section.statistic-section .statistic-post i {
      display: inline-block;
      text-align: center;
      color: #666666;
      font-size: 36px;
      margin: 0; }
    section.statistic-section .statistic-post h3 {
      color: #c7ad88;
      margin: 20px 0 17px; }
    section.statistic-section .statistic-post span.counter {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      letter-spacing: 2px; }

/*------------------------------------------------- */
/* =  About sections */
/*------------------------------------------------- */
section.about-section {
  padding: 50px 0; }
  section.about-section .about-content {
    padding: 0px 0; }
    section.about-section .about-content h2 {
	  color: #853b22;
      font-weight: 400;
      margin-bottom: 45px; }
    section.about-section .about-content p {
      max-width: 450px;
      font-family: "Poppins", sans-serif;
      margin-bottom: 25px; }
    section.about-section .about-content p:last-child {
      margin-bottom: 0; }
  section.about-section .about-images {
    position: relative; }
    section.about-section .about-images img {
      width: 100%;
      height: auto; }
  section.about-section .about-images:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid #c7ad88; }

/*------------------------------------------------- */
/* =  Single Post */
/*------------------------------------------------- */
section.blog-section.single-post .blog-box {
  text-align: left; }
  section.blog-section.single-post .blog-box .blog-post .article-cont {
    padding-top: 30px; }
    section.blog-section.single-post .blog-box .blog-post .article-cont p span {
      color: #666666; }

.center-area {
  text-align: center; }

div.related-posts {
  margin-bottom: 50px; }
  div.related-posts .center-area h2 {
    margin-bottom: 40px; }
  div.related-posts .news-post {
    position: relative;
    margin-bottom: 30px; }
    div.related-posts .news-post img {
      width: 100%;
      height: auto;
      margin: 0; }
    div.related-posts .news-post .hover-box {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      border: 2px solid transparent;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
      div.related-posts .news-post .hover-box div.inner-hover {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0 20px 20px; }
        div.related-posts .news-post .hover-box div.inner-hover span {
          display: inline-block;
          color: #c7ad88;
          font-family: "Poppins", sans-serif;
          text-transform: uppercase;
          letter-spacing: 1.3px;
          margin-bottom: 5px; }
        div.related-posts .news-post .hover-box div.inner-hover h2 {
          margin-bottom: 0; }
          div.related-posts .news-post .hover-box div.inner-hover h2 a {
            color: #fff; }
          div.related-posts .news-post .hover-box div.inner-hover h2 a:hover {
            text-decoration: underline !important; }
  div.related-posts .news-post:hover .hover-box {
    border: 2px solid #c7ad88; }

.comment-area-box {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eeeeee; }
  .comment-area-box h2 {
    margin-bottom: 50px; }
  .comment-area-box > ul {
    padding-top: 10px; }
    .comment-area-box > ul li {
      list-style: none; }
      .comment-area-box > ul li .comment-box {
        overflow: hidden;
        margin-bottom: 55px; }
        .comment-area-box > ul li .comment-box img {
          max-width: 70px;
          float: left;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%; }
        .comment-area-box > ul li .comment-box .comment-content {
          margin-left: 100px; }
          .comment-area-box > ul li .comment-box .comment-content h3 {
            color: #c7ad88;
            margin-bottom: 10px; }
            .comment-area-box > ul li .comment-box .comment-content h3 span {
              float: right;
              font-size: 12px;
              color: #999999; }
          .comment-area-box > ul li .comment-box .comment-content a {
            font-size: 12px;
            color: #222222;
            font-family: "Poppins", sans-serif;
            display: inline-block;
            text-transform: uppercase;
            margin: 0; }
          .comment-area-box > ul li .comment-box .comment-content a:hover {
            color: #c7ad88; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 100px; }

.contact-form-box .center-area {
  text-align: center; }
  .contact-form-box .center-area > span {
    display: block;
    font-size: 12px;
    color: #d8c2b7;
    font-family: "Poppins", sans-serif;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0 0 30px; }

.contact-form-box #comment-form {
  margin: 0; }
  .contact-form-box #comment-form input[type="text"],
  .contact-form-box #comment-form textarea {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    color: #222222;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    outline: none;
    border: 2px solid #eeeeee;
    margin: 0 0 30px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out; }
  .contact-form-box #comment-form textarea {
    height: 130px; }
  .contact-form-box #comment-form input[type="submit"] {
    color: #c7ad88;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    padding: 12px 30px 9px;
    text-transform: uppercase;
    border: 2px solid #c7ad88;
    background: transparent;
    letter-spacing: 1.8px;
    outline: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out; }
  .contact-form-box #comment-form input[type="submit"]:hover {
    background: #c7ad88;
    color: #ffffff; }

/*------------------------------------------------- */
/* =  clients section
 *------------------------------------------------- */
section.clients-section {
  padding: 140px 0 140px; }
  section.clients-section .clients-box .client-review {
    position: relative;
    padding: 0 100px; }
    section.clients-section .clients-box .client-review .inner-client-review {
      display: flex;
      align-items: center; }
      section.clients-section .clients-box .client-review .inner-client-review .image-holder {
        flex: 1; }
        section.clients-section .clients-box .client-review .inner-client-review .image-holder img {
          width: 100%;
          height: auto !important; }
      section.clients-section .clients-box .client-review .inner-client-review .client-content {
        flex: 2;
        padding: 0 50px 0 30px; }
        section.clients-section .clients-box .client-review .inner-client-review .client-content h2 {
          color: #666666;
          position: relative;
          padding-bottom: 25px;
          margin-bottom: 25px; }
        section.clients-section .clients-box .client-review .inner-client-review .client-content h2:after {
          content: '';
          position: absolute;
          bottom: 0px;
          left: 0px;
          width: 36px;
          height: 2px;
          background: #c7ad88; }
        section.clients-section .clients-box .client-review .inner-client-review .client-content p {
          font-size: 14px;
          font-style: italic; }
  section.clients-section .clients-box .client-review:after {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 200px;
    right: 100px;
    border: 2px solid #c7ad88; }
  section.clients-section .clients-box .flex-direction-nav .flex-prev,
  section.clients-section .clients-box .flex-direction-nav .flex-next {
    background: transparent; }
  section.clients-section .clients-box .flex-direction-nav .flex-prev:after,
  section.clients-section .clients-box .flex-direction-nav .flex-next:after {
    font-size: 36px;
    color: #999999; }
  section.clients-section .clients-box .flex-direction-nav .flex-prev:hover:after,
  section.clients-section .clients-box .flex-direction-nav .flex-next:hover:after {
    color: #c7ad88; }
  section.clients-section .clients-box .flex-control-nav {
    bottom: -70px; }
  section.clients-section .clients-box .flex-control-paging li a {
    border: 1px solid #999999; }
  section.clients-section .clients-box .flex-control-paging li a.flex-active {
    border: 1px solid #c7ad88;
    background: #c7ad88; }

/*------------------------------------------------- */
/* =  Contact */
/*------------------------------------------------- */
#map {
  width: 100%;
  height: 640px; }

section.contact-section {
  padding: 50px 0 0;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/background.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.contact-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.contact-section {
      background: #111 url("../upload/banners/background@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.contact-section #contact-form {
    margin: 0 auto;
    max-width: 770px; }
    section.contact-section #contact-form input[type="text"]::placeholder,
    section.contact-section #contact-form textarea::placeholder {
    color: #a89a93;
    opacity: 1; }
    section.contact-section #contact-form input[type="text"],
    section.contact-section #contact-form textarea {
      display: block;
      width: 100%;
      padding: 10px 20px;
      background: transparent;
      color: #d8c2b7;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      outline: none;
      border: 2px solid #d8c2b7;
      margin: 0 0 30px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.contact-section #contact-form textarea {
      height: 130px; }
    section.contact-section #contact-form .center-area {
      text-align: center; }
    section.contact-section #contact-form input[type="submit"] {
      color: #c7ad88;
      font-size: 13px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      padding: 10px 25px 7px;
      text-transform: uppercase;
      border: 2px solid #c7ad88;
      background: transparent;
      outline: none;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      margin-bottom: 10px; }
    section.contact-section #contact-form input[type="submit"]:hover {
      background: #c7ad88;
      color: #ffffff; }
	  section.contact-section div.contact-info2 {
    padding-top: 20px;
    max-width: 1000px;
    margin: 0 auto; }
  section.contact-section div.contact-info {
    padding-top: 10px;
    max-width: 1000px;
    margin: 0 auto; }
    section.contact-section div.contact-info .info-box {
      margin-bottom: 20px;
      overflow: hidden; }
      section.contact-section div.contact-info .info-box span, section.contact-section div.contact-info .info-box i {
        float: left;
        font-size: 46px;
        color: #c7ad88; }
      section.contact-section div.contact-info .info-box h2, section.contact-section div.contact-info .info-box p {
        margin-left: 80px; }
      section.contact-section div.contact-info .info-box h2 {
        color: #ffffff; }
      section.contact-section div.contact-info .info-box p {
        margin-bottom: 0; }

#map {
  height: 610px; }

/*------------------------------------------------- */
/* =  Footer */
/*------------------------------------------------- */
footer {
  background: #111111;
}
footer .instagram-widget {
  padding-top: 30px;
  background: #111 url("../upload/banners/background.jpg") left bottom no-repeat;
  background-size: cover;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3/2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  footer .instagram-widget {
    background: #111 url("../upload/banners/background@2x.jpg") left bottom no-repeat;
    background-size: cover;
  }
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  footer .instagram-widget {
    background: #111 url("../upload/banners/background@2x.jpg") left bottom no-repeat;
    background-size: cover;
  }
}

footer .instagram-widget h3 {
  text-align: center;
  color: #c7ad88;
  margin-bottom: 25px;
  text-decoration: underline;
}

footer .instagram-widget ul {
  overflow: hidden;
}
footer .instagram-widget ul li {
  display: block;
  float: left;
  width: 12.5%;
  position: relative;
}
footer .instagram-widget ul li img {
  width: 100%;
  height: auto;
}

/* --- Overlay centered --- */
footer .instagram-widget ul li .hover-box{
  position: absolute;
  inset: 0;                            /* top:0; right:0; bottom:0; left:0 */
  background: rgba(34,34,34,.5);
  opacity: 0;
  transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  display: flex;
  align-items: center;                  /* عمودی وسط */
  justify-content: center;              /* افقی وسط */
  z-index: 2;
}

footer .instagram-widget ul li .hover-box a{
  /* محتوا (آیکن + عدد) وسطِ دقیق */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0;                           /* قبلاً 0 40px بود */
  color: #fff;
  text-decoration: none;
  text-align: center;
}
footer .instagram-widget ul li .hover-box a span{
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  font-family: "Poppins", sans-serif;
  letter-spacing: 2px;
  line-height: 1;
}
footer .instagram-widget ul li .hover-box a i{
  color: #fff;
  font-size: 14px;
  margin-right: 7px;
  line-height: 1;
}
/* حذف رفتارهای قبلیِ float تا سنتر خراب نشه */
footer .instagram-widget ul li .hover-box a i,
footer .instagram-widget ul li .hover-box a span{ float:none; }

footer .instagram-widget ul li:hover .hover-box{
  opacity: 1;
}

footer .last-line {
  padding: 40px 0 37px;
}
footer .last-line p {
  color: #666;
  margin-bottom: 0;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
footer .last-line ul.social-icons {
  text-align: right;
}
footer .last-line ul.social-icons li {
  display: inline-block;
  margin-left: 20px;
}
footer .last-line ul.social-icons li a {
  color: #666;
  margin-bottom: 0;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
footer .last-line ul.social-icons li a:hover {
  color: #c7ad88;
  text-decoration: line-through !important;
}

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1380px) {
  footer .instagram-widget ul li {
    width: 16.66666%; } }

@media (max-width: 1199px) {
  .navbar-nav > li > a {
    margin: 0 20px; }
  section.popular-menu-section .menu-box .item .menu-post:after {
    display: none; }
  section.popular-menu-section .menu-box .item .menu-post .menu-post-content {
    padding: 0 15px; }
  section.reservation-banner-section .container h1 {
    font-size: 80px; }
  section.reservation-banner-section {
    height: 700px; }
  footer .instagram-widget ul li {
    width: 25%; }
  section.clients-section .clients-box .client-review {
    padding: 0; }
  .flex-direction-nav {
    display: none; }
  section.clients-section .clients-box .client-review:after {
    left: 30px;
    right: 30px; }
  section.page-banner-section h1 {
    font-size: 80px; }
  #map {
    height: 500px; } }

@media (max-width: 991px) {
  .navbar-default .inner-navbar {
    padding: 0; }
  .navbar-nav > li > a {
    margin: 0 14px; }
  section.reservation-banner-section .container h1 {
    font-size: 70px;
    line-height: 78px; }
  section.reservation-banner-section {
    height: 500px; }
  section.contact-section div.contact-info .info-box {
    max-width: 280px;
    margin: 0 auto 30px; }
  footer .last-line {
    text-align: center; }
    footer .last-line p {
      margin-bottom: 30px; }
  footer .last-line ul.social-icons {
    text-align: center; }
    footer .last-line ul.social-icons li {
      margin: 0 5px; }
  section.statistic-section .statistic-post {
    margin-bottom: 30px; }
  section.clients-section .clients-box .client-review:after {
    display: none; }
  section.page-banner-section h1 {
    font-size: 60px; }
  #map {
    height: 400px; } }



@media (max-width: 500px) {
  section.popular-menu-section .menu-box .item .menu-post {
    flex-wrap: wrap; }
  section.popular-menu-section .menu-box .item .menu-post img {
    width: 100%;
    flex-basis: 100%; }
  section.popular-menu-section .menu-box .item .menu-post-content {
    padding: 30px !important;
    flex-basis: 100%; }
  section.reservation-banner-section .container h1 {
    font-size: 36px;
    line-height: 42px; }
  footer .instagram-widget ul li {
    width: 50%; }
  #map {
    height: 240px; } }


/* === Custom Timepicker (non-native, consistent across devices) === */
section.reservation-section #reservation-form .timepicker-popover {
  position: absolute;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  width: 280px;
  background: #fff;
  border: 2px solid #eeeeee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

section.reservation-section #reservation-form .timepicker-popover ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

section.reservation-section #reservation-form .timepicker-popover li {
  padding: 10px 16px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}

section.reservation-section #reservation-form .timepicker-popover li[aria-selected="true"],
section.reservation-section #reservation-form .timepicker-popover li:hover {
  background: #c7ad88;
  color: #fff;
}

/* Keep popover aligned with the input */
section.reservation-section #reservation-form .timepicker-popover[data-align="left"] { left: 0; }
section.reservation-section #reservation-form .timepicker-popover[data-align="right"] { right: 0; }

/* iOS/Safari: ensure inputs inherit styling like others */
section.reservation-section #reservation-form input,
section.reservation-section #reservation-form select,
section.reservation-section #reservation-form textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

section.reservation-section #reservation-form input::placeholder {
  color: #999999;
  opacity: 1;
}


/* === Custom Timepicker (consistent across devices) === */
section.reservation-section #reservation-form .timepicker-popover {
  position: absolute;
  z-index: 1000;
  max-height: 260px;
  overflow-y: auto;
  width: 280px;
  background: #fff;
  border: 2px solid #eeeeee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
section.reservation-section #reservation-form .timepicker-popover ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
section.reservation-section #reservation-form .timepicker-popover li {
  padding: 10px 16px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}
section.reservation-section #reservation-form .timepicker-popover li[aria-selected="true"],
section.reservation-section #reservation-form .timepicker-popover li:hover {
  background: #c7ad88;
  color: #fff;
}
section.reservation-section #reservation-form .timepicker-popover[data-align="left"] { left: 0; }
section.reservation-section #reservation-form .timepicker-popover[data-align="right"] { right: 0; }

/* iOS/Safari: normalize inputs to inherit theme */
section.reservation-section #reservation-form input,
section.reservation-section #reservation-form select,
section.reservation-section #reservation-form textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
section.reservation-section #reservation-form input::placeholder {
  color: #999999;
  opacity: 1;
}
/* Timepicker popover visibility */
.timepicker-popover {
  position: absolute;
  z-index: 99999;      /* بالاتر از همه */
  max-height: 260px;
  overflow-y: auto;
  width: 280px;
  background: #fff;
  border: 2px solid #eee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.timepicker-popover ul { list-style: none; margin: 0; padding: 6px 0; }
.timepicker-popover li { padding: 10px 16px; font-size: 12px; cursor: pointer; }
.timepicker-popover li:hover,
.timepicker-popover li[aria-selected="true"] { background: #c7ad88; color: #fff; }
/* === MOBILE: b1 بین سکشن‌ها + بک‌گراند فقط زیر متن سکشن === */

/* === MOBILE: remove vertical gaps around b1 so it touches background edges === */

/* === MOBILE: remove bottom gap between sections (left/right) === */


/* ==============================
   =  Responsive part › Menu section (organized)
   =  Grouped without changing order or rules
   =============================== */
@media (max-width: 767px) {
  .navbar-default {
    margin-top: 10px; }
  .navbar-brand {
    padding: 30px 15px 22px; }
  .navbar-toggle {
    margin-top: 20px; }
  .navbar-nav > li > a {
    padding: 5px 0; }
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a.active {
    color: #c7ad88 !important; }
  .navbar-nav > li > a:after {
    display: none; }
  section.reservation-banner-section .container h1 {
    font-size: 48px;
    line-height: 60px; }
  section.reservation-banner-section {
    height: auto;
    min-height: 300px; }
  footer .instagram-widget ul li {
    width: 33.333333%; }
  section.team-section .team-box {
    flex-wrap: wrap; }
    section.team-section .team-box .team-post {
      flex-basis: 100%;
      margin-bottom: 50px !important; }
  section.clients-section .clients-box .client-review .inner-client-review .client-content {
    padding-right: 0; }
  section.page-banner-section h1 {
    font-size: 40px;
    line-height: 50px; }
  section.page-banner-section {
    padding: 120px 0 60px; }
  section.menu-section .background-items div.image-back {
    display: none; }
  section.menu-section .background-items div.table-back {
    width: 100%; }
  #map {
    height: 300px; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 0; } }
@media (max-width: 767px) {

  /* بک‌گراندِ سراسریِ سکشن را غیرفعال کن (تا روی b1 نیفتد) */
  section.menu-section::before {
    content: none !important;
  }

  /* بک‌گراند را فقط زیر متن سکشن بگذار (پس b1 روی آن نمی‌افتد) */
  section.menu-section .menu-box {
    position: relative;
    z-index: 1; /* متن روی بک‌گراند خودش باشد */
  }
  section.menu-section .menu-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../upload/banners/background.jpg") center/cover no-repeat;
    z-index: 0; /* پشت محتوا ولی فقط داخل menu-box */
  }
  /* سکشن‌های راست از background2.jpg استفاده کنند */
  section.menu-section.right-content .menu-box::before {
    background-image: url("../upload/banners/background2.jpg");
  }

  /* تصویر b1: full-bleed بالای تیتر بماند (بین سکشن‌ها دیده شود) */
  section.menu-section .background-items {
    position: static !important;
    display: block !important;
    width: 100%;
    height: auto !important;
  }
  section.menu-section .background-items .table-back {
    display: none !important; /* دوبل نشود */
  }
  section.menu-section .background-items .image-back {
    display: block !important;
    position: relative !important;
    z-index: 2;                 /* بیرون از لایه‌ی بک‌گراند منوباکس */
    width: 100vw !important;    /* لب‌به‌لب موبایل */
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 0 40px !important;/* فاصله‌ی مناسب تا تیتر */
    height: auto !important;
  }
  section.menu-section .background-items .image-back img {
    width: 100% !important;
    height: auto !important;    /* نمایش کامل و متناسب */
    display: block;
    object-fit: contain;
  }
}
@media (max-width: 767px) {
  /* خود سکشن در بالا فاصله نداشته باشد */
  section.menu-section {
    padding-top: 0 !important;
  }

  /* ظرف تصویر b1: هیچ فاصله‌ای بالا/پایین نداشته باشد */
  section.menu-section .background-items .image-back {
    margin-top: 0 !important;
    margin-bottom: 0 !important;   /* قبلاً 40px بود؛ صفر شود تا به بک‌گراند بچسبد */
  }

  /* باکس متن: از بالا فاصله نگیرد تا بک‌گراندش دقیقاً بعد از b1 شروع شود */
  section.menu-section .menu-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* اگر اولین المان داخل منوباکس (مثل عنوان) margin دارد، صفرش کن */
  section.menu-section .menu-box > *:first-child {
    margin-top: 0 !important;
  }
  /* ته منوباکس هم جلوی فاصله‌های ناخواسته را بگیریم (در صورت نیاز) */
  section.menu-section .menu-box > *:last-child {
    margin-bottom: 0 !important;
  }

  /* بک‌گراند فقط زیر متن است؛ بالاترین لایه‌ی متن هم روی آن بماند */
  section.menu-section .menu-box { position: relative; z-index: 1; }
  section.menu-section .background-items .image-back { position: relative; z-index: 2; }
}
@media (max-width: 767px) {
  /* خود سکشن هیچ فاصله عمودی نداشته باشد */
  section.menu-section {
    padding-bottom: 0 !important;   /* قبلاً 110px بود */
    margin-bottom: 0 !important;
  }

  /* داخل سکشن هم فاصله‌ی ته را صفر کنیم */
  section.menu-section .menu-box {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* اگر عنوان یا لیست‌ها در انتها margin دارند، صفرشان کن */
  section.menu-section .menu-box > *:last-child,
  section.menu-section .menu-box .title-section:last-child,
  section.menu-section .menu-box ul.menu-list-items:last-child {
    margin-bottom: 0 !important;
  }

  /* آخرین آیتم منو هم فاصله‌ی ته نداشته باشد */
  section.menu-section .menu-box ul.menu-list-items li:last-child {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767px) {
  /* فاصله‌ی عمودی داخل متن هر سکشن */
  section.menu-section .menu-box {
    padding-top: 24px !important;   /* اگر بیشتر می‌خوای 32px کن */
    padding-bottom: 28px !important;
  }

  /* ترجیحی: کمی فاصله زیر عنوان‌ها */
  section.menu-section .menu-box .title-section {
    margin-bottom: 14px !important;
  }

  /* ترجیحی: هوای هر آیتم منو هم کمی بازتر شود */
  section.menu-section .menu-box ul.menu-list-items li {
    padding: 10px 0 !important;   /* فقط عمودی */
  }
}
/* === Simple Modal: perfect centering + no-stretch image (all sizes) === */
.sm-overlay{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  /* ارتفاع واقعیِ viewport روی موبایل (حل چسبیدن زیر نوار آدرس) */
  height: 100dvh;
  padding: 16px;
  /* safe-area برای آیفون‌ها */
  padding-top: calc(env(safe-area-inset-top) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  padding-left: calc(env(safe-area-inset-left) + 16px);
  padding-right: calc(env(safe-area-inset-right) + 16px);
}
@supports not (height: 100dvh) {
  .sm-overlay{ height: 100vh; }      /* فallback برای مرورگرهای قدیمی */
}

/* خود کارت در مرکز بماند و از حدِ صفحه بزرگ‌تر نشود */
.sm-modal{
  position: relative;                 /* برای جای‌گیری X داخل کارت */
  overflow: hidden;
  width: min(92vw, 880px);
  max-height: calc(100dvh - 32px);    /* با احتساب padding بالا/پایین overlay */
  transform: none;                    /* از انیمیشن قبلی اثری نماند که بالا ببرد */
  opacity: 1;
}

/* تصویر: نسبت‌ها حفظ شود، بدون کشیدگی/بُرش و متناسب با پنجره */
.sm-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;                /* بدون برش/کشیدگی */
  max-height: calc(100dvh - 32px - 48px); /* ارتفاع کارت - padding - فضای دکمه */
}

/* موبایل کمی جمع‌وجورتر */
@media (max-width: 767px){
  .sm-modal{ width: min(94vw, 560px); }
  .sm-figure img{ max-height: calc(100dvh - 32px - 56px); }
}
/* Menu item hover/touch highlight */
section.menu-section .menu-box ul.menu-list-items li{
  position: relative;
  border-radius: 12px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .04s ease;
}
/* Desktop hover */
@media (hover:hover){
  section.menu-section .menu-box ul.menu-list-items li:hover{
    background-color: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.14) inset;
  }
}
/* Keyboard focus */
section.menu-section .menu-box ul.menu-list-items li:focus-within{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22) inset;
}
/* Touch active (set by JS) */
section.menu-section .menu-box ul.menu-list-items li.menu-item-active{
  background-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.20) inset;
}
/* === Menu item highlight: square + slightly larger than text === */
section.menu-section .menu-box ul.menu-list-items li{
  position: relative;
  z-index: 0;                 /* برای لایه‌بندی pseudo */
  border-radius: 0 !important;/* بدون curve */
  /* (اختیاری) کمی کلیک‌اِریا را بزرگ‌تر می‌کند بدون به‌هم‌زدن چیدمان */
  padding: 8px 10px;
}

/* کادر بزرگ‌تر از متن: با pseudo-element که از همه طرف چند px بیرون می‌زند */
section.menu-section .menu-box ul.menu-list-items li::before{
  content: "";
  position: absolute;
  top: -6px; bottom: -6px;    /* ارتفاع کادر کمی بیشتر از متن */
  left: -12px; right: -12px;  /* عرض کادر کمی بیشتر از متن */
  border-radius: 0;           /* گوشه‌های تیز */
  background: transparent;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) inset;
  opacity: 0;
  transition: opacity .18s ease, background-color .18s ease, box-shadow .18s ease;
  pointer-events: none;
  z-index: -1;                /* پشتِ محتوای li بماند */
}

/* حالت فعال (Hover دسکتاپ / Focus کیبورد / Touch موبایل) */
@media (hover:hover){
  section.menu-section .menu-box ul.menu-list-items li:hover::before{
    opacity: 1;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.20) inset;
  }
}
section.menu-section .menu-box ul.menu-list-items li:focus-within::before,
section.menu-section .menu-box ul.menu-list-items li.menu-item-active::before{
  opacity: 1;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22) inset;
}

/* Override استایل قبلی hover/active تا فقط همین کادر دیده شود */
@media (hover:hover){
  section.menu-section .menu-box ul.menu-list-items li:hover{
    background: transparent !important;
    box-shadow: none !important;
  }
}
section.menu-section .menu-box ul.menu-list-items li.menu-item-active{
  background: transparent !important;
  box-shadow: none !important;
}
/* === Simple Modal: image full-bleed (no inner margins) === */
.sm-modal{
  padding: 0 !important;        /* حذف فاصله‌ی داخلی کارت */
  border-radius: 18px;           /* گردی کارت (اگر نمی‌خوای، 0 بگذار) */
  overflow: hidden;              /* لبه‌های تصویر دقیقاً با کارت یکی شود */
  background: #fbfaf7;           /* می‌تونی transparent هم کنی */
}

.sm-figure{
  margin: 0 !important;
  width: 100%;
  border-radius: inherit;        /* گردی کارت به شکل منتقل شود */
  overflow: hidden;
}

/* تصویر بدون کشیدگی/برش و چسبیده به لبه‌های کارت */
.sm-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;           /* کل تصویر کامل دیده شود */
  border-radius: 0 !important;   /* چون والد overflow: hidden دارد، نیازی به radius نیست */
  max-height: calc(100dvh - 2*16px); /* متناسب با ارتفاع پنجره */
}

/* موبایل کمی فشرده‌تر */
@media (max-width: 767px){
  .sm-figure img{
    max-height: calc(100dvh - 2*16px);
  }
}
/* === Modal size = image size (no extra frame) === */
.sm-overlay{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: 100dvh;                 /* واقعاً وسط صفحه، حتی روی موبایل */
  padding: 16px;                  /* فاصله‌ی امن از لبه‌های viewport */
}
@supports not (height: 100dvh){ .sm-overlay{ height: 100vh; } }

.sm-modal{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;         /* سایز پاپ‌آپ = سایز تصویر */
  height: auto !important;
  max-width: none; max-height: none;
  overflow: visible;
}

.sm-figure{
  position: relative;             /* لنگر برای دکمه بستن */
  margin: 0 !important;
}

.sm-figure img{
  display: block;
  width: auto;                    /* کنترل اندازه با max- ها */
  height: auto;
  max-width: calc(100vw - 32px);  /* فیت به پنجره، بدون کشیدگی */
  max-height: calc(100dvh - 32px);
  object-fit: contain;
  border-radius: 18px;            /* گوشه‌گردِ مربع؛ اگر نخواستی 0 کن */
}

/* دکمهٔ X همیشه وسطِ دایره و به گوشهٔ تصویر سنجاق */
.sm-figure{ position: relative; }  /* مرجعِ position برای دکمه */

.sm-close{
  position: absolute !important;
  top: 0; right: 0;
  transform: translate(-8px, 8px);   /* اگر بیرونِ گوشه می‌خوای: translate(50%,-50%) */
  width: 44px; height: 44px;         /* دسکتاپ */
  border-radius: 50%;
  z-index: 2 !important;
  border: 0 !important;
  padding: 0;                         /* مانع جابجایی محتوا */
  line-height: 0;                     /* baseline متن بی‌اثر شود */
  display: grid;                      /* مرکزکردن دقیق محتوا */
  place-items: center;                /* افقی/عمودی وسط */
  background: #833a1f !important;     /* رنگ پس‌زمینه */
  color: #d6c2b8 !important;          /* رنگ علامت */
  appearance: none;                   /* iOS reset */
  -webkit-appearance: none;           /* iOS reset */
}

.sm-close span{
  display: block;
  font-size: 24px;                    /* اندازهٔ علامت × */
  line-height: 1;                     /* از baseline اضافی جلوگیری می‌کند */
  transform: translateY(-1px);        /* جبران بصری فونت iOS؛ در صورت نیاز 0 یا -2px کن */
  color: inherit;                     /* از رنگ دکمه بگیرد */
}

/* موبایل: کمی کوچک‌تر */
@media (max-width: 767px){
  .sm-close{ width: 40px; height: 40px; }
  .sm-close span{ font-size: 20px; }
}

/* === Modal image title overlay (top-left) === */
.sm-figure { position: relative; } /* ensure positioned parent */
.sm-title{
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 10px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 2px #000;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px; /* match menu h2 */
  letter-spacing: 1.2px;
  line-height: 1.2;
  z-index: 2;
  background: transparent;
  pointer-events: none; /* don't block taps/clicks on image */
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 767px){
  .sm-title{ font-size: 16px; top: 10px; left: 10px; padding: 5px 8px; }
}
/* Legibility: shadow behind item title & price in Today's Special */
section.today-menu-section .menu-post .menu-post-content .inner-menu h2,
section.today-menu-section .menu-post .menu-post-content .inner-menu span{
  /* رنگشون الان هم #fff هست، فقط برای اطمینان: */
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.70), 0 0 2px rgba(0,0,0,.90);
}
section.contact-section.background2 {
  background: #111 url("../upload/banners/background2.jpg") center center no-repeat;
  background-size: cover;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3 / 2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  section.contact-section.background2 {
    background: #111 url("../upload/banners/background2@2x.jpg") center center no-repeat;
    background-size: cover;
  }
}
/* 1) تنظیم تراز کامل و شکستن صحیح کلمات انگلیسی */
section.about-section .about-content p {
  color: #873b23;
  text-align: justify;
  text-justify: inter-word;  /* مرورگرهایی که پشتیبانی می‌کنند */
  hyphens: auto;             /* برای شکستن درست واژه‌ها؛ با lang="en" کار می‌کند */
}

/* 2) فاصله‌ی اضافه بعد از آخرین پاراگراف */
section.about-section .about-content p:last-of-type {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  section.contact-section.background2 .about-content p {
    max-width: 520px; /* یا بردار: max-width: none; */
  }
}

/* 1) تیم (اینجا contact-section background2) را از حالت flex خارج می‌کنیم */
section.contact-section.background2 .team-box {
  display: block; /* override روی display:flex قبلی */
}

/* 2) تصویر: هرگز بزرگ‌تر از اندازهٔ واقعی نشود،
   ولی اگر ظرف کوچک‌تر شد، به تناسب کوچک شود (بدون کراپ) */
section.contact-section.background2 .team-box .team-post img {
  width: auto !important;   /* جلوی width:100% قبلی را می‌گیرد */
  max-width: 100%;          /* در ظرف کوچک، کوچک می‌شود */
  height: auto;             /* نسبت تصویر حفظ می‌شود */
  display: block;
  margin: 0 auto;           /* اگر از ظرف کوچک‌تر بود، وسط می‌ایستد */
}

/* 3) موبایل/تبلت: لب‌به‌لب واقعی */
@media (max-width: 991px) {
  section.contact-section.background2 {
    padding-left: 0;
    padding-right: 0;
  }
  section.contact-section.background2 .container {
    padding-left: 0;
    padding-right: 0;
  }
}