body, html {
  background-color: #2B2B2B; /* Match your theme-color */
}

.ExplainerFont, .title.ExplainerFont{
  font-family: 'Oswald', sans-serif !important;
}

.explainer .MainBrandColor{
  color: #ff5816 !important;
}

.reveal .logo{
  background-color: #ffffffb5;
  padding: 1%;
}

.iconoir-menu{
  color: #000;
  background-color: #ffffffb5;
}

.column .head{
  background-color: #fff;
}

.block.bottom-left{
  padding-left: 3%;
  padding-right: 3%;

}

.slide-menu-items{
  display: none;
}

.slide-menu-footer{
    padding-top: 25% !important;
    border-top: transparent !important;
}

figure img{
    margin-top: -20% !important;
}

.reveal img, .reveal video, .reveal iframe {
    max-width: 100% !important;
    max-height: 100% !important;
}

.mobunblock{
  display: block;
}

.explainer .intro-info {
    width: 100% !important;
}

.explainer .brandlog {
    width: 51%;
}

.explainer > div > div:nth-child(1) > div > span > h2, .explainer > div > div:nth-child(2) > div > span > h2{
  margin-top: -12px;
}

.button.cta{
  background-color: #FF5816 !important;
  border-color: #FF5816 !important;
}

.explainer .intro-info.tour{
  width: 30% !important;
}

.explainer .button.is-link.is-outlined{
  color: #fff !important;
  border-color: #fff !important;
}

@media screen and (max-width: 932px) {

  .top-left, .bottom-left, .top-right, .bottom-right {
        height: auto;
  }
}

.slides[hidden] { display: none !important; }
.full-height-section[data-menu-image] { background-position: top center; background-repeat: no-repeat; background-size: cover; }
.menu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0; }
.menu-video.is-playing { opacity: 1; }
.social-label { float: left; color: #fff; font-size: 2rem; line-height: 1; margin-right: .55rem; }
.social-label img { display: block; width: 2rem; height: 2rem !important; margin: 0 !important; filter: invert(1); }
.menu-arrow { color: #fff; font-size: 2rem; line-height: 1; }

/* Style for the preloader */
    .preloader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2B2B2B; /* semi-transparent background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      pointer-events: none; /* Allows interaction with underlying elements */
      transition: opacity 180ms ease;
    }

    .preloader-overlay.is-dismissed { opacity: 0; visibility: hidden; }

    .preloader-content {
      pointer-events: auto; /* Allows interaction with preloader content */
      background: url(https://mslide.cc/assets/MSlidebrand/MSlideBW.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 70%;   /* MSlide standard (MSlide2/3): logo 70% of a 100px spinner */
    }

    .spinner {
      border: 2px solid #f2f2f2;
      border-top: 2px solid #666;
      border-radius: 50%;
      width: 100px;
      height:100px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

/* V2: slides never scroll inside themselves (MSlide rule: no vertical movement within a slide).
   V1 custom.css makes every .full-height-section a scroll box on phones and on any >=1.5x screen
   (Retina Macs too), and only halves the two stacked columns up to 430px. Bulma stacks columns up
   to 768px, so between 431 and 768px each slide held 200% content: a trackpad/wheel scrolled the
   text inside the slide while its background photo/video stayed put. */
@media screen and (max-width: 768px) {
  .full-height-section.two-page .column { height: 50%; }
}
.reveal .slides section.full-height-section { overflow: hidden; }

/* V2: section pills carry the full section names from the sheet (e.g. "Chicken & Family Meals").
   When they do not fit next to the logo (and the Admin pill), the bottom bar scrolls sideways;
   when they fit it stays centred as in V1. Horizontal only: slides never scroll vertically. */
.navbar.is-fixed-bottom .navbar-menu {
  display: block !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.navbar.is-fixed-bottom .navbar-menu::-webkit-scrollbar { display: none; }
.navbar.is-fixed-bottom .navbar-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  margin-inline: auto !important;
  padding-inline: 6px !important;
}
.navbar.is-fixed-bottom .navbar-end > * { float: none !important; flex: 0 0 auto; }

/* V2: restaurant logo in the bottom bar keeps its proportions inside the 48x48 square. */
.navbar.is-fixed-bottom .navbar-brand .image img { object-fit: contain; }

/* V2: bottom bar alignment (Figma bar: logo 46px, pills 34px, 6px apart, one centre line).
   V1 sizes the pills from reveal's 40px base font (68px-tall items, pills at the top), the
   Admin pill is centred, and QRMenu1's figure img { margin-top: -20% } lifts the logo. */
.navbar.is-fixed-bottom .navbar-end {
  height: 50px;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1;
}
.navbar.is-fixed-bottom .navbar-end > a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
}
.navbar.is-fixed-bottom .navbar-brand .image { width: 46px; height: 46px; }
.navbar.is-fixed-bottom .navbar-brand .image img { margin: 0 !important; width: 100%; height: 100% !important; }
.navbar.is-fixed-bottom .navbar-item .button {
  height: 34px;
  padding: 0 16px;
  font-size: 13px !important;
  line-height: 1;
}