@media (max-width: 575.98px) {
}

@media (max-width: 767.98px) {
  .heading {
    font-size: 30px;
  }

  /* ============= HERO SECTION OPEN  ============= */
  .heroWrapper::after {
    top: unset;
    bottom: -20px;
    width: 100%;
    height: calc(100% - 80%);
  }

  .heroWrapper .heroWrapper-right .heroJs .slick-dots {
    justify-content: center;
  }
  /* ============= HERO SECTION CLOSE  ============= */

  /*  =========================== ABOUT US SECTION OPEN ========================  */
  .aboutWrapper .fancyCircle {
    display: none;
  }
  .aboutWrapper .aboutWrapper-right {
    padding-left: unset;
  }
  /*  =========================== ABOUT US SECTION CLOSE ========================  */
  /*  =========================== WYE EAT HERE SECTION OPEN ========================  */
  .whyChooseWrapper .fancyVideoDesign {
    display: none;
  }
  /*  =========================== WYE EAT HERE SECTION CLOSE ========================  */
}

@media (max-width: 991.98px) {
  /* ============= Logo Nav Section Open ============= */
  .headerWrapper .headerWrapper--topbar {
    justify-content: space-between;
  }
  .headerWrapper .headerWrapper__center {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 350px;
    height: 100%;
    z-index: 9999;
    background-color: var(--color-main);
    display: flex;
    transform: translateX(-100%);
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    opacity: 0;
  }

  .headerWrapper .headerWrapper__center.show {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    overflow: auto;
  }

  .headerWrapper .headerWrapper__center .menu--main {
    display: flex;
    flex-direction: column;
  }

  .headerWrapper .headerWrapper__center .menu--main > li > a:hover {
    color: var(--color-white);
  }
  .headerWrapper
    .headerWrapper__center
    .menu--main
    > li
    .single-column-menu
    ul
    li {
    line-height: 2.2;
  }
  .headerWrapper .headerWrapper__center .menu--main > li .single-column-menu {
    visibility: visible;
    opacity: 1;
    min-width: 100%;
    max-width: 100%;
  }

  .headerWrapper .headerWrapper__center .menu--main > li .sub-menu {
    position: relative;
    background-color: transparent;
    box-shadow: unset;
    padding: unset;
    display: none;
    transition: all 0.5s ease;
  }

  .headerWrapper .headerWrapper__center .menu--main > li .sub-menu.active {
    display: block;
    transition: all 0.5s ease;
  }

  .headerWrapper
    .headerWrapper__center
    .menu--main
    > li
    .sub-menu
    ul
    li
    a:hover {
    color: var(--color-white);
  }

  .headerWrapper .headerWrapper__center .menu--main > li .sub-menu.active i {
    transform: rotate(90deg);
  }
  .headerWrapper .headerWrapper__center {
    padding-top: 60px;
  }
  .headerWrapper--item .closeMenu {
    background-color: white;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .headerWrapper--item .closeMenu:hover i {
    transform: rotate(360deg);
    transition: all 0.5s;
  }
  .headerWrapper .burgurMenu {
    cursor: pointer;
  }

  .headerWrapper .burgurMenu i {
    color: var(--color-black);
    font-size: 22px;
  }

  /* ============= Logo Nav Section Close ============= */
  /* ============= HERO SECTION OPEN  ============= */
  .hero-text {
    font-size: 45px;
  }

  .heroWrapper .heroWrapper-right .heroWrapper-item img {
    min-height: 210px;
    max-height: 210px;
  }

  .heroWrapper-right .fancyDesign {
    display: none;
  }

  .heroWrapper .heroWrapper-left {
    margin-top: 100px;
  }

  /* ============= HERO SECTION CLOSE  ============= */

  /*  =========================== ABOUT US SECTION OPEN ========================  */
  .aboutWrapper {
    margin-top: 60px;
  }
  .aboutWrapper .aboutWrapper-right p {
    margin-top: 20px;
  }
  /*  =========================== ABOUT US SECTION CLOSE ========================  */
  /*  =========================== MENU SECTION OPEN ========================  */
  .menuWrapper {
    margin-top: 40px;
  }
  .menuWrapper .menuWrapper-foodCard {
    margin-top: 20px;
  }
  .menuWrapper .menuWrapper-item .menuWrapper-rawmaterial ul {
    flex-wrap: wrap;
  }
  /*  =========================== MENU SECTION CLOSE ========================  */
  /*  =========================== WYE EAT HERE SECTION OPEN ========================  */
  .whyChooseWrapper {
    margin-top: 40px;
  }
  .whyChooseWrapper .whyChooseWrapper-right {
    margin-top: 50px;
  }
  .whyChooseWrapper .whyChooseWrapper-right {
    padding-left: unset;
    padding-right: unset;
  }

  .whyChooseWrapper .whyChooseWrapper-right .icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.48);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
  }

  .whyChooseWrapper .whyChooseWrapper-right .icon-box .icon {
    margin-bottom: 20px;
  }
  /*  =========================== WYE EAT HERE SECTION CLOSE ========================  */
  /*   =========================== MENU SLIDER SECTION OPEN ========================   */
  .menuSlider {
    margin-top: 40px;
  }

  .menuSlider .menuSlider__menu {
    margin-top: 20px;
  }
  /*   =========================== MENU SLIDER SECTION CLOSE ========================   */

  /*   =========================== PHOTO GALLERY SECTION OPEN ========================   */
  .gallery {
    margin-top: 40px;
  }
  /*   =========================== PHOTO GALLERY SECTION CLOSE ========================   */

  /*   =========================== FOOTER CTA SECTION OPEN ========================   */
  .footerCta {
    margin-top: 40px;
  }
  .footerCta {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  /*   =========================== FOOTER CTA SECTION CLOSE ========================   */
}

@media (max-width: 1199.98px) {
}

@media (max-width: 1399.98px) {
}
