/* ============================================================
   Seluruh nilai px di file ini adalah px DESAIN Figma (frame
   lebar 1920px) yang sudah dikonversi menjadi
   calc(N * var(--u)), dengan --u = 1px desain
   (lihat ../responsive.css). Dengan cara ini seluruh halaman
   menskalakan proporsional mengikuti resolusi layar: isi tidak
   terpotong dan tidak ada scroll samping.
   ============================================================ */

.review,
.review * {
  box-sizing: border-box;
}
.review {
  background: #ffffff;
  width: var(--page-width);
  height: calc(1528 * var(--u));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.bg-review {
  width: calc(2095 * var(--u));
  height: calc(1538 * var(--u));
  position: absolute;
  left: calc(-70 * var(--u));
  top: calc(-46 * var(--u));
  overflow: hidden;
}
.vector {
  width: 92.74%;
  height: 97.57%;
  position: absolute;
  right: 4.67%;
  left: 2.59%;
  bottom: 0%;
  top: 2.43%;
  overflow: visible;
}
.vector2 {
  width: 33.98%;
  height: 31.3%;
  position: absolute;
  right: 51.19%;
  left: 14.83%;
  bottom: 57.3%;
  top: 11.4%;
  overflow: visible;
}
.vector3 {
  width: 18.75%;
  height: 17.27%;
  position: absolute;
  right: 15.31%;
  left: 65.93%;
  bottom: 71.32%;
  top: 11.4%;
  overflow: visible;
}
.group {
  width: 16.53%;
  height: 22.03%;
  position: absolute;
  right: 82.72%;
  left: 0.75%;
  bottom: 77.97%;
  top: 0%;
  overflow: visible;
}
.vector4 {
  width: 12.85%;
  height: 25.21%;
  position: absolute;
  right: 84.46%;
  left: 2.69%;
  bottom: 14.7%;
  top: 60.08%;
  overflow: visible;
}
.vector5 {
  width: 24.47%;
  height: 48.02%;
  position: absolute;
  right: 4.82%;
  left: 70.71%;
  bottom: 18.21%;
  top: 33.76%;
  overflow: visible;
}
.group2 {
  width: 11.07%;
  height: 14.76%;
  position: absolute;
  right: 88.93%;
  left: 0%;
  bottom: 40.34%;
  top: 44.91%;
  overflow: visible;
}
.group3 {
  width: 14.43%;
  height: 19.23%;
  position: absolute;
  right: 1.19%;
  left: 84.38%;
  bottom: 66.12%;
  top: 14.66%;
  overflow: visible;
}
.group4 {
  width: 23.48%;
  height: 31.29%;
  position: absolute;
  right: 0%;
  left: 76.52%;
  bottom: 16.73%;
  top: 51.98%;
  overflow: visible;
}
.vector6 {
  width: 23.69%;
  height: 39.98%;
  position: absolute;
  right: 66.42%;
  left: 9.89%;
  bottom: 27.82%;
  top: 32.2%;
  overflow: visible;
  transform-origin: center;
  transition: transform 220ms ease, filter 220ms ease;
}
.vector7 {
  width: 23.69%;
  height: 39.98%;
  position: absolute;
  right: 39.34%;
  left: 36.97%;
  bottom: 27.82%;
  top: 32.2%;
  overflow: visible;
  transform-origin: center;
  transition: transform 220ms ease, filter 220ms ease;
}
.vector8 {
  width: 23.69%;
  height: 39.98%;
  position: absolute;
  right: 11.93%;
  left: 64.38%;
  bottom: 27.82%;
  top: 32.2%;
  overflow: visible;
  transform-origin: center;
  transition: transform 220ms ease, filter 220ms ease;
}
.group5 {
  width: 13.57%;
  height: 2.99%;
  position: absolute;
  right: 71.47%;
  left: 14.96%;
  bottom: 46.29%;
  top: 50.72%;
  overflow: visible;
}
.group6 {
  width: 5.54%;
  height: 8.65%;
  position: absolute;
  right: 75.49%;
  left: 18.96%;
  bottom: 52.58%;
  top: 38.77%;
  overflow: visible;
  animation: reviewCardFloat 4.6s ease-in-out infinite;
}
.group7 {
  width: 13.57%;
  height: 2.99%;
  position: absolute;
  right: 44.4%;
  left: 42.03%;
  bottom: 46.29%;
  top: 50.72%;
  overflow: visible;
  animation: reviewCardFloat 4.6s ease-in-out -1.15s infinite;
}
.group8 {
  width: 5.54%;
  height: 8.65%;
  position: absolute;
  right: 48.42%;
  left: 46.04%;
  bottom: 52.58%;
  top: 38.77%;
  overflow: visible;
  animation: reviewCardFloat 4.6s ease-in-out -2.3s infinite;
}
.group9 {
  width: 13.57%;
  height: 2.99%;
  position: absolute;
  right: 16.6%;
  left: 69.83%;
  bottom: 46.29%;
  top: 50.72%;
  overflow: visible;
}
.group10 {
  width: 5.54%;
  height: 8.65%;
  position: absolute;
  right: 20.62%;
  left: 73.84%;
  bottom: 52.58%;
  top: 38.77%;
  overflow: visible;
  animation: reviewCardFloat 4.6s ease-in-out -3.45s infinite;
}

@keyframes reviewCardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-6 * var(--u)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .group6,
  .group7,
  .group8,
  .group10 {
    animation: none;
  }
}

.review-pelanggan {
  color: #7f3814;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(122 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 28.93%;
  left: 28.97%;
  width: 42.1%;
  bottom: 72.82%;
  top: 19.77%;
  height: 7.41%;
  animation: reviewHeadlineFloat 3.2s ease-in-out infinite;
}

@keyframes reviewHeadlineFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-8 * var(--u))) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-pelanggan {
    animation: none;
  }
}

.sotongnya-renyah-dan-gurih-selalu-jadi-pilihan-kalo-lagi-pengen-ngemil {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 70.17%;
  left: 13.75%;
  width: 16.09%;
  bottom: 34.59%;
  top: 56.76%;
  height: 8.65%;
}
.tahu-nya-renyah-diluar-dan-lembut-di-dalam-sotongnya-juga-renyah-enak-banget {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 41.91%;
  left: 39.33%;
  width: 18.76%;
  bottom: 31.6%;
  top: 56.76%;
  height: 11.64%;
}
.sothu-selalu-konsisten-mau-itu-rasa-ataupun-kualitasnya-recomended-banget {
  color: #71340f;
  text-align: center;
  font-family: "Poppins-Medium", sans-serif;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  position: absolute;
  right: 15.08%;
  left: 68.26%;
  width: 16.66%;
  bottom: 31.6%;
  top: 56.76%;
  height: 11.64%;
}

.vector6:hover,
.vector7:hover,
.vector8:hover,
.bg-review:has(.sotongnya-renyah-dan-gurih-selalu-jadi-pilihan-kalo-lagi-pengen-ngemil:hover) .vector6,
.bg-review:has(.tahu-nya-renyah-diluar-dan-lembut-di-dalam-sotongnya-juga-renyah-enak-banget:hover) .vector7,
.bg-review:has(.sothu-selalu-konsisten-mau-itu-rasa-ataupun-kualitasnya-recomended-banget:hover) .vector8 {
  transform: translateY(calc(-6 * var(--u))) scale(1.012);
  filter: drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgb(113 52 15 / 20%));
}

.sotongnya-renyah-dan-gurih-selalu-jadi-pilihan-kalo-lagi-pengen-ngemil,
.tahu-nya-renyah-diluar-dan-lembut-di-dalam-sotongnya-juga-renyah-enak-banget,
.sothu-selalu-konsisten-mau-itu-rasa-ataupun-kualitasnya-recomended-banget {
  transition: transform 220ms ease, color 220ms ease;
}

.sotongnya-renyah-dan-gurih-selalu-jadi-pilihan-kalo-lagi-pengen-ngemil:hover,
.tahu-nya-renyah-diluar-dan-lembut-di-dalam-sotongnya-juga-renyah-enak-banget:hover,
.sothu-selalu-konsisten-mau-itu-rasa-ataupun-kualitasnya-recomended-banget:hover {
  color: #a64d19;
  transform: translateY(calc(-4 * var(--u)));
}
.bar-bawah-review {
  width: calc(1921.98 * var(--u));
  height: calc(371.46 * var(--u));
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(1157 * var(--u));
  overflow: hidden;
}
.vector9 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.vector10 {
  width: 19.82%;
  height: 70.27%;
  position: absolute;
  right: 79.27%;
  left: 0.91%;
  bottom: 0.54%;
  top: 29.19%;
  overflow: visible;
}
.vector11 {
  width: 15.95%;
  height: 56.53%;
  position: absolute;
  right: 1.53%;
  left: 82.52%;
  bottom: 0.54%;
  top: 42.93%;
  overflow: visible;
}
.logo-putih {
  width: 11.03%;
  height: 53.14%;
  position: absolute;
  right: 83.32%;
  left: 5.64%;
  bottom: 15.32%;
  top: 31.55%;
  overflow: visible;
}
.vector12 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 62.6%;
  left: 26.15%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.vector13 {
  width: 17.62%;
  height: 51.42%;
  position: absolute;
  right: 38.97%;
  left: 43.42%;
  bottom: 0.27%;
  top: 48.31%;
  overflow: visible;
}
.vector14 {
  width: 11.25%;
  height: 24.5%;
  position: absolute;
  right: 21.92%;
  left: 66.83%;
  bottom: 0.26%;
  top: 75.24%;
  overflow: visible;
}
.gurihnya-nyatu {
  color: #ffffff;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(60 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 4.94%;
  left: 74.3%;
  width: 20.76%;
  bottom: 29.74%;
  top: 55.19%;
  height: 15.08%;
}
.bar-review {
  width: calc(1919.96 * var(--u));
  height: calc(150.46 * var(--u));
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.vector15 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.logo-warna {
  width: 5.44%;
  height: 64.56%;
  position: absolute;
  right: 90.19%;
  left: 4.38%;
  bottom: 18.16%;
  top: 17.28%;
  overflow: hidden;
}
.group11 {
  width: 99.99%;
  height: 99.98%;
  position: absolute;
  right: 0.01%;
  left: 0%;
  bottom: 0.01%;
  top: 0.01%;
  overflow: visible;
}
.home {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 56.72%;
  left: 37.71%;
  width: 5.57%;
  bottom: 34.2%;
  top: 34.56%;
  height: 31.24%;
}
.about-us {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 42.03%;
  left: 47.97%;
  width: 10%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.product {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 28.33%;
  left: 62.66%;
  width: 9.01%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.review2 {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 16.51%;
  left: 76.36%;
  width: 7.14%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.contact {
  color: #78310b;
  text-align: left;
  font-family: "WashYourHand-Regular", sans-serif;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  position: absolute;
  right: 3.23%;
  left: 88.18%;
  width: 8.59%;
  bottom: 32.87%;
  top: 35.89%;
  height: 31.24%;
}
.vector16 {
  width: 8.49%;
  height: 5.98%;
  position: absolute;
  right: 15.83%;
  left: 75.68%;
  bottom: 19.58%;
  top: 74.44%;
  overflow: visible;
}