* {
  font-family: kanit;
}

body {
  overflow-x: hidden;
}

.container {
  max-width: 1140px;
}

.bg-homepage {
  background-color: #000;
  background-image: url("../img/png/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 600vh;
}

.banner-bg {
  background-image: url("../img/png/BGHomeNew.png") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 120vh;
  z-index: 100;
  animation: puff-in-center 3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__show {
  margin-top: -100px;
  z-index: 200;
}

.gift__bg {
  background-image: url("../img/png/giftCardBG copy.png");
  min-height: 100vh;
  background-size: contain;
  background-position-y: 100px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  animation: puff-in-center 5s ease;
}

.img__gift {
  animation: puff-in-center 3s ease;
}

@keyframes shake-tr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

.img__give {
  animation: roll-in-right 3s ease;
}

@keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.gift__inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text__gift {
  position: absolute;
  top: 50px;
  right: 500px;
  animation: slide-in-left 3s ease;
}

.bg-footer {
  background-color: #7a0084;
  padding: 30px;
}

.red-baitong {
  background-color: #000;
  background-image: url("../img/png/Asset 14 copy.png");
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 70vh;
  object-fit: cover;
  padding-top: 0;
}

.all-time {
  background-color: #000;
  background-image: url("../img/png/Asset 15 copy.png");
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  object-fit: cover;
  padding-top: -200px;
}

.thai-food {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.bg-menu {
  background-color: #000;
  object-fit: cover;
}

.logo {
  margin-top: 50px;
}

.menu-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes puff-in-center {
  0% {
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

.thai-made-inside {
  position: absolute;
  z-index: 99;
  animation: slide-in-left 5s ease;
  top: 42.5%;
  left: 20%;
  width: 60%;
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.thai-made {
  width: 25%;
  animation: puff-in-center 7s ease;
}

.deliver {
  padding: 100px 0;
  position: fixed;
  top: 10%;
  left: 10%;
  max-width: 75%;
  max-height: 100%;
  height: auto;
  width: 150px;
  background-image: url("../img/png/Asset 1.png");
  background-repeat: no-repeat;
  background-size: 150px;
  z-index: 999;
  cursor: pointer;
  opacity: 1;
}

.deliver:hover {
  animation: slide-in-elliptic-right-fwd 2s;
  opacity: 1;
}

@keyframes slide-in-elliptic-right-fwd {
  0% {
    -webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
    transform: translateX(800px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -1800px 50%;
    transform-origin: -1800px 50%;
  }
}

.reason {
  padding: 150px 50px 50px 50px;
  position: fixed;
  top: 55%;
  left: 12%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 225px;
  background-image: url("../img/png/Asset 7.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px;
  z-index: 999;
  cursor: pointer;
}

.reason:hover {
  animation: wobble-hor-bottom 2s ease;
}

.pickup {
  padding: 65px 40px;
  position: fixed;
  top: 35%;
  right: 10%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 175px;
  background-image: url("../img/png/Asset 6.png");
  background-repeat: no-repeat;
  background-size: 150px;
  z-index: 999;
  cursor: pointer;
}

.pickup:hover {
  animation: wobble-hor-bottom 2s ease;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

.icon-menu {
  width: 50%;
  margin-top: -400px;
  z-index: 20;
}

.menu {
  width: 10%;
  position: absolute;
  top: 160%;
  right: 23%;
}

.baitoong {
  position: absolute;
}

.hand-position {
  background-image: url("../img/png/Asset 8.png");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position-x: 510px;
  background-position-y: 730px;
  background-size: 450px;
  z-index: 100;
}

.hand {
  animation: wobble-ver-right 5s infinite;
  position: absolute;
  right: -50px;
}

@keyframes wobble-ver-right {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateY(-30px) rotate(6deg);
    transform: translateY(-30px) rotate(6deg);
  }
  30% {
    -webkit-transform: translateY(15px) rotate(-6deg);
    transform: translateY(15px) rotate(-6deg);
  }
  45% {
    -webkit-transform: translateY(-15px) rotate(3.6deg);
    transform: translateY(-15px) rotate(3.6deg);
  }
  60% {
    -webkit-transform: translateY(9px) rotate(-2.4deg);
    transform: translateY(9px) rotate(-2.4deg);
  }
  75% {
    -webkit-transform: translateY(-6px) rotate(1.2deg);
    transform: translateY(-6px) rotate(1.2deg);
  }
}

.ho__right {
  animation: wobble-ver-right 5s infinite;
  position: absolute;
  width: 400px;
  right: -175px;
}

.ho__left {
  animation: shake-left 5s infinite;
  position: absolute;
  left: -350px;
}

@keyframes shake-left {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

.so__yum {
  position: absolute;
  margin-top: 100px;
  width: 400px;
  right: 200px;
  animation: shake-vertical 5s infinite;
}

@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}

swiper-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
}

swiper-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

swiper-slide {
  width: 100%;
  text-align: center;
  font-size: 18px;
  transition: transform 0.5s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.8) !important;
  filter: grayscale(0.5);
}

swiper-slide::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
}

.swiper-slide-active {
  transform: scale(1) !important;
  transition: transform 0.5s ease-out;
  z-index: 100;
  filter: grayscale(0);
}

swiper-slide-active::after {
  background: none;
}

swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.peak {
  position: absolute;
  left: 50px;
  width: 200px;
}

.baitong {
  position: absolute;
  top: -160px;
  left: -50px;
  width: 400px;
}

.mySwiper .swiper-pagination {
  display: none;
}

.alltime {
  width: 100%;
}

.arrow {
  position: absolute;
  animation: slide-bl 2s infinite;
  right: 200px;
  top: -100px;
  width: 400px;
}

@keyframes slide-bl {
  0% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  50% {
    -webkit-transform: translateY(100px) translateX(-100px);
    transform: translateY(50px) translateX(-50px);
  }
}

.heart {
  animation: heartbeat 2s infinite;
  position: absolute;
  right: 100px;
  top: -130px;
  width: 500px;
}

.heart__give {
  position: absolute;
  right: 450px;
  width: 100px;
  animation: heartbeat 2s infinite;
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.gift {
  width: 75%;
}

.footer {
  width: 100%;
  height: 500px;
  margin-top: -50px;
  object-fit: cover;
  object-position: top;
}

.ribbon {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 45%;
  top: -50px;
}

.tong {
  position: relative;
  bottom: 250px;
  left: 200px;
}

.animate {
  animation: puff-in-center 3s ease;
}

.sun__flower {
  position: absolute;
  animation: spin 5s infinite;
  right: 24%;
  top: 90px;
  width: 80px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.photo__graph {
  width: 200px;
  position: absolute;
  left: 50%;
  animation: shake-vertical 5s infinite;
}

.text-cartering {
  position: absolute;
  top: 35%;
  left: 26%;
  font-family: "Mohave", sans-serif !important;
  color: #ffe200;
  font-size: 2em;
  font-weight: 600;
  text-align: start;
  letter-spacing: 3px;
}

.text-sub-cartering {
  position: absolute;
  top: 55%;
  left: 26%;
  font-family: "Mohave", sans-serif !important;
  color: #ffe200;
  font-size: 1em;
  text-align: start;
  letter-spacing: 1px;
}

.text-contact {
  position: absolute;
  top: 75%;
  left: 26%;
  font-family: "Mohave", sans-serif !important;
  color: #ffe200;
  font-size: 1em;
  text-align: start;
  letter-spacing: 1px;
}

.cart__ing {
  margin-top: 0px;
}

@media only screen and (max-width: 1440px) {
  .bg-homepage {
    background-color: #000;
    background-image: url("../img/png/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    object-fit: cover;
  }

  .thai-made-inside {
    position: absolute;
    z-index: 99;
    top: 44%;
    left: 20%;
  }

  .banner-bg {
    background-image: url("../img/png/BGHomeNew.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    z-index: 5;
  }

  .so__yum {
    right: 200px;
  }

  .red-baitong {
    background-color: #000;
    background-image: url("../img/png/Asset 14 copy.png");
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 70vh;
    object-fit: cover;
    margin-top: -200px;
  }

  .tong {
    position: relative;
    bottom: 250px;
    left: 200px;
  }

  .thai-food {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
  }

  .deliver {
    padding: 100px 0;
    position: absolute;
    top: 30%;
    left: 20%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
  }

  .heart__give {
    position: absolute;
    right: 400px;
    width: 100px;
    animation: heartbeat 2s infinite;
    padding-top: 50px;
  }

  .reason {
    padding: 100px 0;
    position: absolute;
    top: 25%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
  }

  .pickup {
    padding: 100px 0;
    position: absolute;
    top: 20%;
    right: 25%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
  }

  .icon-menu {
    width: 50%;
    margin-top: -300px;
  }

  .ribbon {
    position: absolute;
    width: 45%;
    left: -10px;
    z-index: 1;
    top: -50px;
  }

  .deliver {
    padding: 100px 0;
    position: fixed;
    top: 10%;
    left: 10%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 1.png");
    background-repeat: no-repeat;
    z-index: 100;
  }
  .reason {
    padding: 150px 50px 50px 50px;
    position: fixed;
    top: 55%;
    left: 12%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 7.png");
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 100;
  }
  .pickup {
    padding: 75px 40px;
    position: fixed;
    top: 30%;
    right: 10%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 6.png");
    background-repeat: no-repeat;
    z-index: 100;
  }

  .deliver:hover {
    filter: blur(0);
    transition: 0.5s;
  }

  .reason {
    padding: 150px 50px 50px 50px;
    position: fixed;
    top: 55%;
    left: 12%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: 225px;
    background-image: url("../img/png/Asset 7.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 150px;
    z-index: 100;
  }

  .reason:hover {
    filter: blur(0);
    transition: 0.5s;
  }

  .pickup {
    padding: 65px 40px;
    position: fixed;
    top: 35%;
    right: 10%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: 175px;
    background-image: url("../img/png/Asset 6.png");
    background-repeat: no-repeat;
    background-size: 150px;
    z-index: 100;
  }

  .pickup:hover {
    filter: blur(0);
    transition: 0.5s;
  }

  .hand-position {
    background-image: url("../img/png/Asset 8.png");
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position-x: 475px;
    background-position-y: 740px;
    background-size: 400px;
  }

  .arrow {
    position: absolute;
    animation: slide-bl 2s infinite;
    right: 150px;
    top: -100px;
    width: 400px;
  }
  .heart {
    animation: heartbeat 2s infinite;
    position: absolute;
    right: 0px;
    top: -130px;
    width: 500px;
  }

  .gift__bg {
    background-image: url("../img/png/giftCardBG copy.png");
    min-height: 100vh;
    background-size: contain;
    background-position-y: 200px;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    animation: puff-in-center 3s ease;
  }

  .cart__ing {
    margin-top: -100px;
  }
}

@media only screen and (min-width: 1920px) {
  .container {
    max-width: 1360px;
  }

  .bg-homepage {
    background-color: #000;
    background-image: url("../img/png/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 110vh;
    object-fit: cover;
  }

  .banner-bg {
    background-image: url("../img/png/BGHomeNew.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 130vh;
    z-index: 5;
  }

  .deliver {
    padding: 100px 0;
    position: fixed;
    top: 10%;
    left: 10%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 1.png");
    background-repeat: no-repeat;
    z-index: 100;
  }
  .reason {
    padding: 150px 50px 50px 50px;
    position: fixed;
    top: 55%;
    left: 12%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 7.png");
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 100;
  }
  .pickup {
    padding: 75px 40px;
    position: fixed;
    top: 30%;
    right: 10%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background-image: url("../img/png/Asset 6.png");
    background-repeat: no-repeat;
    z-index: 100;
  }

  .heart__give {
    position: absolute;
    right: 600px;
    width: 100px;
    animation: heartbeat 2s infinite;
    padding-top: 50px;
  }

  .deliver:hover {
    filter: blur(0);
    transition: 0.5s;
  }

  .ribbon {
    position: absolute;
    width: 45%;
    z-index: 1;
    top: -50px;
  }

  .thai-made-inside {
    position: absolute;
    z-index: 99;
    animation: puff-in-center 5s ease;
    top: 45%;
    left: 20%;
  }

  .small {
    width: 25%;
  }

  .hand-position {
    background-image: url("../img/png/Asset 8.png");
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position-x: 550px;
    background-position-y: 1050px;
    background-size: 600px;
  }

  .gift__bg {
    background-image: url("../img/png/giftCardBG copy.png");
    min-height: 110vh;
    background-size: contain;
    background-position-y: 200px;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }

  swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 50px;
  }

  .arrow {
    position: absolute;
    animation: slide-bl 2s infinite;
    right: 300px;
    top: -100px;
    width: 400px;
  }
  .heart {
    animation: heartbeat 2s infinite;
    position: absolute;
    right: 150px;
    top: -130px;
    width: 500px;
  }

  .menu__show {
    margin-top: -100px;
    z-index: 100;
  }

  .cart__ing {
    margin-top: 0;
  }

  .text__gift {
    position: absolute;
    top: 50px;
    right: 700px;
    animation: slide-in-left 3s ease;
  }

  .sun__flower {
    position: absolute;
    animation: spin 5s infinite;
    right: 28%;
    top: 90px;
    width: 80px;
  }
}