html {
  scroll-behavior: smooth;
}
.landing-section .box {
  background-color: rgb(229 46 24 / 8%);
  height: 626px;
}
.landing-section .landing-reveal {
  width: 48%;
}
.landing-section .landing-reveal img {
  width: 100%;
  height: 100%;
}
.landing-section .text-container {
  width: 39%;
  padding-right: 27px;
}
.logo-path {
  transition: 0.5s;
}
.logo-path#Path_2 {
  transition-delay: 0.1s;
}
.logo-path#Path_3 {
  transition-delay: 0.2s;
}
.logo-path#Path_4 {
  transition-delay: 0.3s;
}
.logo:hover .logo-path {
  fill: #e52e18;
}
.arrow-down-ease {
  animation: down 0.5s infinite ease alternate;
}
@keyframes down {
  to {
    transform: translateY(5px);
  }
}
.down-arrow {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0px;
  left: -6%;
  right: 0;
  margin: auto;
}
.down-arrow svg {
  width: 120px;
  height: 120px;
}
.order-pay-section {
  background: url(../images/food-left-side.png) no-repeat;
  background-size: auto 100%;
  height: 629px;
}
.left-side-abs-box {
  width: 47%;
  height: 642px;
  position: absolute;
  left: 0;
  top: 0;
}

.order-pay-section .text-container {
  width: 48%;
}
.gallery-section .text-container {
  width: 35%;
}
.gallery-section .buffer {
  height: 642px;
}
.gallery-slider-box {
  width: 47%;
  height: 642px;
  position: absolute;
  right: 0;
  top: 0;
}
.skip-queue-section {
  background: url(../images/your-food.png), url(../images/skip-queue.png);
  background-repeat: no-repeat, no-repeat;
  background-size: auto 75%, auto 100%;
  height: 567px;
  background-position: 8% bottom, left center;
}
.about-us-section,
.section-pattern {
  background: url(../images/red-pattern.svg) no-repeat center;
  height: 621px;
  background-size: cover;
  background-position: top;
}

.pickup-food-section .text-container {
  width: 41%;
}
.pickup-food-section .--title {
  letter-spacing: -0.66px;
}
.pickup-food-section .--imgs {
  width: 45%;
}

.reviews-slider .swiper-slide {
  width: 374px;
  box-shadow: 0px 10px 35px #00000008;
  border-radius: 8px;
  height: 361px;
  padding: 39px 28px 24px 28px;
  background: #ffffff;
}
.reviews-slider .swiper-slide .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}
.contact-us-section {
  background: url(../images/red-pattern.svg) no-repeat center;
  height: 572px;
  background-size: cover;
  background-position: top;
}
.contact-us-form {
  width: 960px;
  background-color: #fff;
  padding: 66px 60px 46px 60px;
  box-shadow: 0px 10px 35px #00000008;
  border-radius: 8px;
}
.form-group label {
  margin-bottom: 8px;
  display: block;
}
.form-group input,
.form-group select,
.form-group textarea {
  height: 56px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #c3cad9;
  border-radius: 8px;
  color: #183b56;
  font-size: 16px;
  width: 100%;
  font-family: var(--main-font-regular);
  padding: 19px 20px;
}
.form-group .mobile-number {
  padding-left: 96px;
}
.form-group > .iti {
  width: 100%;
}
.form-group input.error {
  border-color: #ffc9c9;
  background-color: #fffbfb;
  background-image: url(../images/error-icon.svg);
  background-repeat: no-repeat;
  background-size: 19px;
  background-position: right 14px center;
}
.form-group label.error {
  margin: 0;
  color: #dc3232;
  font-size: 14px;
}
.form-group .iti label.error {
  position: absolute;
  bottom: -18px;
}
.iti__selected-flag {
  border-right: 1px solid #c3cad9;
  width: 80px;
  justify-content: center;
}
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
  background-image: url(../images/select-arrow.svg);
  background-repeat: no-repeat;
  background-size: 12px 6px;
  background-position: calc(100% - 12px) center;
}
.form-group textarea {
  height: auto;
  min-height: 137px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #959ead;
}
.form-section {
  margin-top: -160px;
}
.submit-form {
  width: 157px;
  height: 42px;
}
.gradiant-bg {
  background: transparent linear-gradient(180deg, #fafbfb00 0%, #fdfdfd 100%) 0%
    0% no-repeat padding-box;
}
.call-us-section .item {
  padding: 16px 16px 3px 16px;
  transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.call-us-section .item:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 40px 70px -30px rgba(19, 33, 54, 16%),
    0 20px 70px -30px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border-radius: 8px;
}
.reviews-slider {
  padding-left: 15px;
}
.boxes-section .box {
  box-shadow: 0px 10px 35px #00000008;
  overflow: hidden;
  transition: 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.boxes-section .box:hover {
  box-shadow: 0 40px 70px -30px rgb(19 33 54 / 16%),
    0 20px 70px -30px rgb(0 0 0 / 30%);
}
.boxes-section .box img,
.boxes-section .box .title {
  transition: 0.5s;
}
.boxes-section .box:hover img {
  transform: translateY(-20px);
}
.boxes-section .box:hover .title {
  color: var(--main-color);
}
.boxes-section .box:before {
  content: "";
  top: -70px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fcfcfc;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: scale(0.1);
  transition: 0.5s;
  position: absolute;
  border-radius: 8px;
  border-radius: 50%;
}
.boxes-section .box:hover:before {
  transform: scale(1);
  top: 0;
  border-radius: 0%;
}
.footer-social-links svg path,
.footer-social-links svg {
  transition: 0.5s;
}
.footer-social-links a:hover svg {
  transform: scale(1.2);
}
.footer-social-links a:hover path {
  fill: #293542;
}
.group-hover .box-shape-hover,
.fill-white path {
  transition: 0.5s;
}
.group-hover:hover .box-shape-hover {
  transform: scale(-1, 1) translateX(-136px);
  opacity: 1;
  fill: var(--main-color);
}
.group-hover:hover .fill-white path {
  fill: #fff;
}
@media (max-width: 767px) {
  .mobile-menu {
    position: absolute;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: left;
    height: 100%;
    flex-direction: column;
  }
  .mobile-menu li {
    margin: 20px 0;
    z-index: 2;
  }
  .mobile-menu li a {
    text-decoration: none;
    color: white;
    transition: 2s;
    font-size: 38px;
    text-transform: uppercase;
    font-weight: 500;
    mix-blend-mode: difference;
  }
  .mobile-menu-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #293542;
    transform: translateX(-100%);
    z-index: 10;
  }
  .landing-section .box {
    height: auto;
  }
  .order-pay-section {
    background: none;
    height: auto;
  }
  .order-pay-section .text-container {
    width: 100%;
  }
  .order-pay-section .text-container > div {
    padding-top: 50px;
    text-align: center;
  }
  .gallery-slider-box {
    width: 100%;
    height: 300px;
    position: relative;
  }
  .gallery-section {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 50px;
  }
  .gallery-slider-box img {
    height: 100%;
  }
  .gallery-section .text-container {
    width: 100%;
    padding-top: 50px;
    text-align: center;
  }
  .gallery-section .buffer {
    height: auto;
  }
  .skip-queue-section {
    background-image: url(../images/your-food.png);
    background-color: #fcfcfc;
    height: auto;
    padding-top: 50px;
    padding-bottom: 40px;
    background-size: 110px auto, auto 100%;
    background-position: bottom right;
  }
  .skip-queue-section span.flex-1 {
    display: none;
  }
  .skip-queue-section .text-container {
    width: 92%;
    justify-content: flex-start;
  }
  .skip-queue-section .text-container .gap-10 {
    flex-direction: column;
    align-items: self-start;
  }
  .footer-links-box {
    gap: 15px;
    margin: 25px 0 0 0;
  }
  .footer-links {
    flex-direction: column;
  }
  .footer-social-links {
    margin-top: 25px;
    justify-content: space-evenly;
    width: 100%;
  }
  .footer .box {
    padding: 26px 2px 15px 2px;
    flex-direction: column;
  }
  .open-mobile-icon {
    background-color: transparent;
    border: 0;
    margin-left: 8px;
    display: flex;
    padding: 0;
  }
  .close-menu-icon {
    width: 65px;
    fill: var(--main-color);
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .logo svg {
    width: 115px;
  }
  .header-btn {
    width: 135px;
    height: 36px;
    font-size: 14px;
  }
  header {
    padding: 15px 0;
  }
  .form-group.flex-1 {
    flex: auto;
  }
  form .landing-form-box.mb-25,
  form .form-group.mb-25 {
    margin-bottom: 15px;
  }
  .modal.form-modal {
    padding: 0;
  }
  .form-modal .modal-body {
    padding: 30px;
    width: 100%;
    height: 100%;
    max-height: initial;
    border-radius: 0;
  }
  .contact-us-form {
    width: 100%;
  }
  .order-pay-mo-img {
    margin-left: calc(-5% - 15px);
  }
  .dont-wait-section .list {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 7px;
  }
  .about-us-section,
  .section-pattern,
  .contact-us-section {
    height: auto;
    background-size: contain;
    background-position: bottom;
    background-color: #e62f18;
    padding-top: 60px;
    padding-bottom: 110px;
  }
  .pickup-food-section,
  .section-under-pattern {
    background-color: #fff;
    margin-top: 30px;
    position: relative;
  }
  .reviews-section {
    padding-top: 60px;
  }
  .reviews-slider .swiper-slide {
    width: 85%;
    padding: 39px 15px 24px 15px;
  }
  .reviews-slider {
    padding-right: 15px;
  }
  .form-section {
    margin-top: -70px;
  }
  .contact-us-form {
    padding: 25px 30px 25px 25px;
  }
}