/*
Template: Webix
Developer: Konakchiev
*/







/* GENERAL */
@font-face {
    font-family: KlavikaRegular;
    src: url('./fonts/klavika-regular.otf');
}
@font-face {
    font-family: KlavikaBold;
    src: url('./fonts/klavika-bold.otf');
}
@font-face {
    font-family: KlavikaMedium;
    src: url('./fonts/klavika-medium.otf');
}
@font-face {
    font-family: KlavikaLight;
    src: url('./fonts/klavika-light.otf');
}
@font-face {
    font-family: Aller;
    src: url('./fonts/Aller_Bd.ttf');
}
body {
    margin: 0;
    padding: 0;
}
a:hover, a:focus {
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
}
.clearfix {
    clear: both;
}
nav {
    text-align: right;
}
.mlr {
    margin-left: 30px;
    margin-right: 15px;
}
.mfix {
    margin-right: -15px;
}
.no-bullet {
    list-style: none;
    padding: 0;
    margin: 0;
}

header {
    position: absolute;
    width: 100%;
    z-index: 100;
    padding: 0 0 20px;
}

nav ul li {
    display: inline-block;
    font-family: KlavikaRegular;
    text-transform: uppercase;
    margin-right: 25px;
}

nav li.current_page_item {
    font-family:KlavikaBold ;
}

nav ul li:last-child {
    margin-right: 0px;
}

nav li a:hover {
    color: #c74a1b!important;
}

nav li a {
    color: #fff;
    font-size: 18px;
}



.addmefont h2 {
    font-family: KlavikaBold!important;
}

.top-header {
    background: #c74a1b;
    padding: 10px 0;
}

.top-header h6 a {
    color: #fff!important;
}

strong {
    font-family: KlavikaBold!important;
}

.top-header h6 {
    color: #fff;
    padding: 0;
    margin: 5px 0;
    font-size: 14px;
    font-family: KlavikaMedium;
    text-transform: uppercase;
}

.top-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.top-header li {
    display: inline-block;
    margin-right: 10px;
}

.top-header li:first-child {
    margin-right: 30px;
    font-family: KlavikaMedium;
    color: #fff;
    font-size: 14px;
}

.top-header li:last-child {
    margin-right: 0;
}

.top-header li i {
    color: #fff;
}

.addfont h2, .home-title h2 {
    font-family: KlavikaBold!important;
}

.addfont h6, .home-title p, .addfont p {
    font-family: KlavikaLight!important;
}

.home-image img {
    height: 308px!important;
    object-fit: cover;
}

.home-para p {
    font-family: KlavikaLight!important;
}

footer {
    background: #231f20;
    padding: 50px 0;
    border-top: 14px solid #b94418;
}

.module_heading {
    font-family: KlavikaBold;
    color: #fff;
    font-size: 20px;
}

.textwidget p {
    font-family: KlavikaRegular;
    color: #808080;
    font-size: 16px;
}

#menu-footer{
   list-style: none;
    margin: 0;
    padding: 0;
}

#menu-footer li {
    background: #c74a1b;
    padding: 10px 20px;
    font-weight: bold;
    width: 250px;
    text-align: center;
    font-family: KlavikaBold;
    margin: 30px 0 0 0;
}

#menu-footer a {
    color: #fff;
}



#gallery-1 .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 30%!important;
    margin-right: 10px;
}

#gallery-1 img {
    border: none!important;
    width: 70px;
}

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

.contact-footer li {
    color: #808080;
    font-family: KlavikaRegular;
    margin: 5px 0;
}

.contact-footer li a {
    color: #808080;
}

.contact-footer i {
    margin-right: 10px;
}

.social-footer {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
}

.social-footer li {
    display: inline-block;
    margin-right: 10px;
}

.social-footer i {
    color: #c74a1b;
    font-size: 24px;
}

.gform_title {
    display: none;
}

.gfield_label {
    font-family: KlavikaBold;
    color: #c74a1b;
}

#gform_submit_button_1 {
    border: none!important;
    width: 120px;
    font-family: KlavikaBold;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 20px;
}

.elementor-testimonial__text {
    font-family: KlavikaBold!important;
    font-style: normal!important;

}

.elementor-widget-testimonial-carousel .elementor-testimonial__name {
    font-family: KlavikaLight!important;
}

input, textarea {
    border: 1px solid #bbb!important;
    outline: 0!important;
    font-family: KlavikaBold!important;
    padding: 20px;
}

.gform_wrapper.gf_browser_chrome .gfield_checkbox li input, .gform_wrapper.gf_browser_chrome .gfield_checkbox li input[type=checkbox], .gform_wrapper.gf_browser_chrome .gfield_radio li input[type=radio] {
    margin: 0!important;
    font-family: KlavikaRegular!important;
    text-transform: uppercase;
}

.nav-hidden {
    position: absolute;
    z-index: 10;
    color: #fff;
    display: none;
    right: 30px;
    top: 10px;
    font-size: 27px;
}

.navi-mobile li a:hover {
	color: #000!important;
}

.nav-hidden i {
    color: #fff;
}

.navi-mobile {
    display: none;
}

.navi-mobile {
    position: absolute;
    width: 100%;
    top: 80px;
    color: #fff!important;
    background-color: #d76028;
}

.navi-mobile ul {
    padding: 10px 30px!important;
}

.navi-mobile a {
    color: #f5f5f5!important;
}

.navi-mobile li {
    border-bottom: 1px solid #eee!important;
}

.navi-mobile {
    display: none;
}

.navi-mobile ul {
    padding: 10px 30px!important;
    position: relative;
    z-index: 10;
}

.mobile-menu li {
    display: block;
    text-align: left;
    font-size: 18px;
}

.navi-mobile .open-modal {
    border-bottom: 1px solid #000!important;
    border-radius: 0!important;
    padding: 10px 0!important;
}

@media screen and (max-width: 992px) {
    .top-header h6 {
        text-align: right;
        font-size: 12px;
    }

    .top-header li:first-child, .top-header ul {
        font-size: 12px;
    }

    nav {
        display: none;
    }

    .mb-mobile {
        margin-bottom: 50px;
    }

    .mobile-menu {
        background: linear-gradient(190deg, #444ba9, #143c50);
        padding: 0 30px;
    }

    .mobile-menu li {
    display: block;
    text-align: left;
    font-size: 18px;
}

.navi-mobile li {
    border-bottom: 1px solid #eee!important;
        display: block;
    width: 100%;
    text-align: left;
    margin: 20px 0;
}

.mobile-menu {
    background: linear-gradient(190deg, #444ba9, #143c50);
    padding: 0 30px;
}

.navi-mobile a {
    color: #f5f5f5!important;
}

    .mobile-menu li {
        display: block;
        text-align: left;
        font-size: 18px;
    }

    .navi-mobile ul {
        padding: 10px 30px!important;
        position: relative;
        z-index: 10;
    }

    .mobile-menu li:last-child {
        border-bottom: 0!important;
    }

    nav li {
        margin: 0;
        font-weight: 300;
    }

    .nav-hidden {
        display: block;
    }
}

/* --- Clone fix: mobile header + hero layout ---------------------------------
   1. Orange bar was unnecessarily deep on phones (10px padding on both columns,
      ~20px of dead space between the address and FOLLOW US). Tightened to 4px.
      Below 390px the address wrapped to two lines, deepening the bar to 99px
      and shoving the logo down to y=181, so it is scaled to hold one line.
   2. The header is position:absolute and overlays the hero by design, but the
      hero content had no top offset, so headings collided with the logo and
      burger. The padding goes on the widget-wrap that CARRIES THE BACKGROUND
      IMAGE, not the section -- padding the section pushes the photo down and
      leaves a white sliver under the orange bar.
   3. Homepage hero is exactly one screen (100svh) at any device size, with the
      awards row pinned to the bottom, so it is always the last thing visible
      and the circular image in the next section never peeks above the fold.
      svh, not vh: iOS reports vh as the URL-bar-HIDDEN height, which is what
      pushed the awards off screen. Type and spacing scale with svh so the
      block fits short phones (667px) as well as tall ones (932px) instead of
      being a fixed 492px stack that only fitted large screens.
   Scoped with an adjacent-sibling on the header, so pages that render without
   one (e.g. /food-bar-menu/) are deliberately untouched. */
@media (max-width: 767px) {

  /* 1. tighter orange bar */
  .elementor-1009 .elementor-element.elementor-element-b60d20a > .elementor-widget-wrap,
  .elementor-1009 .elementor-element.elementor-element-cdfde0c > .elementor-widget-wrap {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* 2. hero content clears the floating header, photo still starts at y=0 */
  header.elementor-location-header + .bialty-container
    .elementor-top-section:first-of-type
    > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-top: 55px;
  }

  /* 3. homepage hero == exactly one screen */
  body.home header.elementor-location-header + .bialty-container
    .elementor-top-section:first-of-type
    > .elementor-container > .elementor-column > .elementor-widget-wrap {
    box-sizing: border-box;
    /* one screen PLUS the 70px the next section overlaps upward, so the circle
       starts exactly ON the fold: overlap preserved, but nothing of it shows
       until you scroll. */
    min-height: calc(100vh + 70px);
    min-height: calc(100svh + 70px);
    padding-top: 120px;                        /* clears logo bottom (~156px) */
    padding-bottom: 202px;                     /* fallback */
    padding-bottom: clamp(184px, calc(10svh + 112px), 222px);
  }

  /* 3a. hero type scales with screen height so it fits short phones too */
  body.home .elementor-element.elementor-element-ef904cf .elementor-heading-title {
    font-size: 56px;
    font-size: clamp(34px, min(8svh, 16.5vw), 66px);
  }
  body.home .elementor-element.elementor-element-f65cdce .elementor-heading-title,
  body.home .elementor-element.elementor-element-54b4327 .elementor-heading-title {
    font-size: 25px;
    font-size: clamp(19px, min(3.5svh, 6.6vw), 29px);
  }

  /* 3b. awards row pinned to the bottom of that screen, scaled to match */
  body.home .elementor-element.elementor-element-57c4275 {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 108px;  /* 70px overlap zone + 38px gap, so it sits above the fold */
    margin-top: 0;
    width: auto;
  }
  /* the widget carries a 104px top padding that spaced it off the buttons in
     the original flow layout; dead weight now that it is pinned to the bottom */
  body.home .elementor-element.elementor-element-57c4275 > .elementor-widget-container {
    padding-top: 0;
  }
  body.home .elementor-element.elementor-element-57c4275 img {
    max-height: 130px;
    max-height: 17svh;
    width: auto;
    margin: 0 auto;
  }

  /* 3e. iOS Safari paints the page BEHIND and BELOW its floating translucent
     bottom toolbar, AND (with viewport-fit=cover) into the home-indicator safe
     area, so the painted screen is taller than the small viewport (svh).
     Chrome's toolbar is opaque and sits outside the painted area, which is why
     svh lines up there but leaked the next section on Safari.

     Budget note: the circle section does NOT start at heroBottom - 70. An empty
     21px spacer section sits between it and the hero, and the circle's own
     margin-top is -70px, so it starts at heroBottom - 49. The hero therefore
     needs 49px of headroom plus the toolbar plus the safe area, not 70px.

     --hero-extra is added to the height AND to both the bottom padding and the
     awards offset, so the additions cancel exactly: nothing moves in either
     browser, only the photo extends to cover Safari's strip.
     Deliberately NOT dvh: it tracks the toolbar and resizes mid-scroll. */
  @supports (height: 100lvh) {
    body.home {
      /* NOTE: env(safe-area-inset-bottom) is DYNAMIC on iOS Safari -- 0 while the
         toolbar is shown, ~34px once it retracts on scroll. Having it inside a
         height calc made the hero grow mid-scroll, and because the photo is
         background-size:cover that rescaled the image: the "auto-zoom" glitch.
         Kept static instead. The 30px buffer still clears the safe area in the
         retracted state (margin ~17px) without any resize. */
      /* Buffer must cover the home-indicator strip STATICALLY. Measured from
         Jay's device: Safari paints ~34px below 100lvh, but env() still reports
         0 at load, so env() cannot be used to detect it -- and it must not be
         used in a height anyway (see note above). 65px puts the circle ~31px
         clear of that strip with no dynamic input. */
      --hero-extra: calc((100lvh - 100svh) + 65px);
    }
    body.home header.elementor-location-header + .bialty-container
      .elementor-top-section:first-of-type
      > .elementor-container > .elementor-column > .elementor-widget-wrap {
      min-height: calc(100svh + 49px + var(--hero-extra));
      padding-bottom: calc(clamp(184px, calc(10svh + 112px), 222px) + var(--hero-extra) - 21px);
    }
    body.home .elementor-element.elementor-element-57c4275 {
      bottom: calc(87px + var(--hero-extra));
    }
  }

  /* 3c. the old trailing spacer would push the hero past one screen */
  body.home .elementor-element.elementor-element-9fd998c {
    display: none;
  }

  /* 3d. the section below keeps its margin-top:-70px overlap on mobile too;
     the hero is sized 100svh + 70px above so that overlap lands entirely below
     the fold. Circle is invisible on first load, revealed on scroll. */
}

/* keep the address on ONE line on narrow phones, so the orange bar stays 74px
   and the logo stays at y=156 (below 390px it wrapped and pushed it to 181) */
@media (max-width: 389px) {
  .elementor-1009 .elementor-element.elementor-element-1856db3,
  .elementor-1009 .elementor-element.elementor-element-1856db3 p,
  .elementor-1009 .elementor-element.elementor-element-1856db3 span,
  .elementor-1009 .elementor-element.elementor-element-1856db3 font {
    font-size: 12.5px;
    white-space: nowrap;
  }
}