.container {
  max-width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.hero-content,
.hero-content-wrapper {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.hero-content-wrapper {
  background: var(--Gradient);
  align-self: stretch;
  justify-content: center;
  padding: 165px var(--padding-20) var(--padding-80);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-18);
  color: var(--Dark-White);
  font-family: var(--font-poppins);
}
.hero-content {
  flex-direction: column;
  gap: 80px;
}
.hero-content-inner {
  align-self: stretch;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 100px;
  max-width: 100%;
}
.hero-content-logo,
.hero-content-inner-left {
  box-sizing: border-box;
  max-width: 100%;
}

.hero-content-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content-logo-img-mobile {
  display: none;
}

.hero-content-inner-left {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 0.6px;
}
.hero-content-logo {
  padding: var(--padding-0) var(--padding-1) var(--padding-0) var(--padding-24);
  position: relative;
}
.hero-intro-wrapper {
  position: absolute;
  top: 100px;
  right: 165px;
}

.hero-intro {
  position: relative;
}

.hero-intro-img-mobile {
  display: none;
}

.hero-intro-video {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 33px);
  left: 3px;
  top: 15px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.hero-content-inner-right {
  width: 597px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-20) var(--padding-0);
  box-sizing: border-box;
  gap: 32px;
  max-width: 100%;
  text-align: left;
  font-size: 64px;
  color: var(--Dark-White);
  font-family: var(--font-poppins);
}
.sell-live-start-free-wrapper,
.sell-live-start-free-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
}
.sell-live-start-free-parent {
  gap: var(--gap-4);
}
.built-for-singapore,
.sell-live-start {
  margin: 0;
  align-self: stretch;
  position: relative;
  letter-spacing: -0.03em;
  font-family: inherit;
}
.sell-live-start {
  font-size: inherit;
  line-height: var(--lh-72);
  font-weight: 600;
}
.built-for-singapore {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
}
.moolah-is-singapores {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-16);
}
.ideal-for-sellers-in-categorie-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-24);
}
.ideal-for-sellers {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.ideal-for-sellers-category-items {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
  font-size: var(--fs-16);
}
.ideal-for-sellers-category-items-image-parent {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--gap-8);
}

.ideal-for-sellers-category-items-image {
  position: relative;
  width: var(--width-20);
  max-height: 100%;
  object-fit: cover;
}

.start-selling-free-button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-01);
  background-color: transparent;
  display: flex;
  align-items: center;
}
.start-selling-free-parent {
  border-radius: var(--br-99);
  background-color: var(--Yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-12) var(--padding-24);
  gap: var(--gap-10);
}
.start-selling-free {
  position: relative;
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-poppins);
  color: var(--Light-Dark);
  text-align: left;
  line-height: 24px;
}
.heroicons-miniarrow-right {
  height: var(--height-20);
  width: var(--width-20);
  position: relative;
}
.benefit-card,
.benefit-statement {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 139px;
  box-sizing: border-box;
  max-width: 100%;
}
.benefit-card {
  align-self: stretch;
  flex: 1;
  background: var(--gradient-1);
  flex-direction: column;
  align-items: center;
  padding: var(--padding-16) var(--padding-80);
  gap: var(--gap-8);
  border-radius: 15px;
  mix-blend-mode: hard-light;
}

.benefit-card-title {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.no-listing-fees,
.singapore-focused-marketplace {
  align-self: stretch;
  position: relative;
  font-weight: 500;
}
.singapore-focused-marketplace {
  text-align: left;
}
.seller-highlights {
  width: 100%;
  background-color: var(--Yellow);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding: 109px var(--padding-80) 47px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-52);
  color: var(--Light-Dark);
  font-family: var(--font-poppins);
}
.testimonial-intro,
.testimonial-intro-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonial-intro-parent {
  flex: 1;
  max-width: 100%;
  gap: var(--gap-40);
}

.testimonial-intro-container {
  flex: 1;
  gap: var(--gap-40);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-intro {
  gap: var(--gap-24);
}
.testimonial-intro-title {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: -0.03em;
  line-height: var(--lh-72);
  font-weight: 600;
  font-family: inherit;
  text-align: center;
}
.testimonial-intro-description {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-16);
  text-align: center;
  margin: 0;
  line-height: 24px;
}
.categories-already-joining-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-16);
  text-align: center;
  font-size: var(--fs-18);
}
.category-highlight-title {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.category-highlight-repeated {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-16);
}
.category-highlight-item-parent {
  cursor: pointer;
  border: 0;
  padding: var(--padding-4) var(--padding-24);
  background-color: transparent;
  border-radius: var(--br-99);
  background: var(--gradient-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  flex-shrink: 0;
}

.category-highlight-item-img {
  position: relative;
  width: var(--width-20);
  max-height: 100%;
  object-fit: cover;
}

.category-highlight-item-text {
  position: relative;
  font-size: var(--fs-16);
  font-family: var(--font-poppins);
  color: var(--Light-Dark);
  text-align: left;
}
.action-container {
  border-radius: var(--br-99);
  background-color: var(--Dark-White);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-12) var(--padding-24);
  gap: var(--gap-10);
}

.start-selling-free-img-parent {
  position: relative;
  flex: 1;
  flex-shrink: 0;
  height: 100%;
  width: 100%;
}
.start-selling-free-img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: var(--br-16);
  object-fit: cover;
}
.works-container-wrapper {
  align-self: stretch;
  background-color: var(--Dark-White);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-52);
  color: var(--Light-Dark);
  font-family: var(--font-poppins);
}
.works-container,
.works-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.works-container {
  flex: 1;
  gap: var(--gap-40);
  max-width: 100%;
}
.works-details {
  padding: var(--padding-0) var(--padding-20);
  gap: var(--gap-24);
}
.section-title {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: -0.03em;
  line-height: var(--lh-64);
  font-weight: 600;
  font-family: inherit;
  text-align: center;
}
.role-pair,
.roles {
  display: flex;
  align-items: center;
}
.roles {
  border-radius: var(--br-10);
  background: var(--Gradient);
  padding: var(--padding-6);
  gap: var(--gap-8);
  font-size: var(--fs-20);
}
.role-pair.active {
  border-radius: var(--br-8);
  background-color: var(--Dark-White);
  justify-content: center;
  padding: var(--padding-8) var(--padding-40);
  cursor: pointer;
}
.seller {
  position: relative;
  line-height: var(--lh-28);
  font-weight: 600;
}
.role-pair {
  border-radius: var(--br-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-8) var(--padding-40);
  color: var(--Dark-White);
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: none;
  transition: all 0.5s ease-in-out;
}

.role-pair span {
  color: var(--Light-White, #fff);
  font-family: var(--font-poppins);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
}

.role-pair.active span {
  color: var(--Light-Dark, #22342f);
  font-family: var(--font-poppins);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 140% */
}

.buyer {
  position: relative;
  line-height: var(--lh-28);
}
.step-pair,
.work-steps {
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-steps-container {
  position: relative;
}

.work-steps {
  align-self: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: center;
  padding: var(--padding-0) var(--padding-80);
  gap: var(--gap-24);
  text-align: center;
  font-size: var(--fs-18);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  transform: scale(0.9);
  position: absolute;
  top: 0;
}

.work-steps.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  position: relative;
}

.step-pair {
  height: var(--height-190);
  width: calc(100% / 3 - 24px);
  border-radius: var(--br-16);
  background: var(--gradient-3);
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  padding: var(--padding-16);
  box-sizing: border-box;
  gap: var(--gap-8);
}
.step-icon {
  width: var(--width-52);
  height: var(--height-52);
  border-radius: var(--br-99);
}

.step-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.loves-and-bonus-container-wrapper {
  display: flex;
  flex-direction: column;
}
.loves-container,
.loves-container-wrapper {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.loves-container-wrapper {
  align-self: stretch;
  padding: 0px var(--padding-80);
  background-color: var(--Yellow);
  display: flex;
  align-items: center;
}
.loves-container {
  flex: 1;
}
.loves-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  text-align: left;
  font-size: var(--fs-52);
  color: var(--Light-Dark);
  font-family: var(--font-poppins);
}
.product-showcase,
.showcase-details {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}

.showcase-icon {
  width: var(--width-52);
  height: var(--height-52);
  border-radius: var(--br-99);
}

.showcase-title {
  color: var(--Light-Dark, #22342f);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.showcase-description {
  color: var(--Light-Dark, #22342f);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.product-showcase-container {
  position: relative;
}

.product-showcase {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-40);
  text-align: left;
  font-size: var(--fs-18);
  color: var(--Light-Dark);
  font-family: var(--font-poppins);

  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  transform: scale(0.9);
  position: absolute;
  top: 0;
}

.product-showcase.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  position: relative;
}

.showcase-details {
  flex: 1;
  border-radius: var(--br-12);
  flex-direction: column;
  gap: var(--gap-8);
  min-width: 169px;
}
.showcase-divider {
  align-self: stretch;
  width: var(--width-1);
  position: relative;
  background: var(--gradient-4);
  box-sizing: border-box;
}
.bonus-container-wrapper {
  background: var(--Gradient);
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: 1;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-52);
  color: var(--Dark-White);
  font-family: var(--font-poppins);
}
.bonus-details,
.sparkles {
  display: flex;
  gap: var(--gap-24);
  max-width: 100%;
}
.bonus-details {
  flex-direction: column;
  align-items: center;
}
.sparkles {
  background: var(--gradient-1);
  align-items: center;
  justify-content: center;
  padding: var(--padding-16) var(--padding-80);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-24);
  border-radius: 15px;
}
.heroicons-koinz {
  width: 34px;
  height: 34px;
  object-fit: cover;
  position: relative;
  max-height: 100%;
}
.bonus-title {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  position: relative;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.bonus-claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--fs-16);
}
.supportmoolahcomsg {
  color: inherit;
}
.supportmoolahcomsg3 {
  text-decoration: underline;
  font-weight: 500;
}

.after-completing-your,
.questions-container-wrapper {
  font-family: var(--font-poppins);
}
.questions-container-wrapper {
  align-self: stretch;
  background-color: var(--Dark-White);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-52);
  color: var(--Light-Dark);
}
.questions-container {
  width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-40);
  max-width: 100%;
}
.questions-details {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12);
  text-align: left;
  font-size: var(--fs-20);
  color: var(--Light-Dark);
  font-family: var(--font-poppins);
}
.question-data,
.question-rows,
.questions-details {
  align-self: stretch;
  display: flex;
}
.question-rows {
  border-radius: var(--br-8);
  background: var(--gradient-5);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-12) var(--padding-16);
  cursor: pointer;
}
.question-data {
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
}

.question-title {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 140% */
  font-family: inherit;
}

.start-selling-on-moolah-container,
.start-selling-on-moolah-parent {
  align-self: stretch;
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.start-selling-on-moolah-container {
  overflow: hidden;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-52);
  color: var(--Dark-White);
  font-family: var(--font-poppins);
}
.start-selling-on-moolah-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.start-selling-on-moolah-parent {
  flex-direction: column;
  align-items: center;
  gap: var(--gap-40);
  z-index: 100;
}
.start-selling-title {
  margin: 0;
  position: relative;
  letter-spacing: -0.03em;
  font-family: inherit;
  text-align: center;
  font-size: 52px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
}
.start-selling-description {
  position: relative;
  font-size: var(--fs-18);
  font-weight: 500;
}
.start-selling-quote {
  position: relative;
  font-size: var(--fs-14);
}

@media screen and (min-width: 1024px) {
  .container {
    scroll-snap-type: none;
  }
}

@media screen and (max-width: 576px) {
  .hero-content-wrapper {
    padding: 80px 16px 24px;
    justify-content: flex-start;
  }

  .hero-content-inner-left {
    height: 287px;
  }

  .hero-content-logo {
    padding: 0;
  }

  .hero-intro-wrapper {
    top: 50px;
    right: 84px;
  }

  .hero-content-inner {
    flex-direction: column;
    gap: 24px;
  }

  .hero-content-logo-img {
    display: none;
  }

  .hero-content-logo-img-mobile {
    display: block;
  }

  .hero-intro-img {
    display: none;
  }

  .hero-intro-img-mobile {
    display: block;
  }

  .hero-intro-video {
    position: absolute;
    width: calc(100% - 4px);
    height: calc(100% - 14px);
    left: 2px;
    top: 7px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
  }

  .hero-content-inner-right {
    gap: 24px;
    align-items: center;
  }

  .sell-live-start {
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
  }

  .built-for-singapore {
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
  }

  .moolah-is-singapores {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .ideal-for-sellers {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
  }

  .ideal-for-sellers-category-items {
    width: 100%;
    align-self: center;
    align-items: center;
  }

  .ideal-for-sellers-category-items-image-parent {
    align-self: auto;
  }

  .ideal-for-sellers-category-items-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .benefit-statement {
    display: none;
  }

  .seller-highlights {
    padding: 125px 0 24px;
  }

  .testimonial-intro-container {
    padding: 0 16px;
    gap: 24px;
  }

  .testimonial-intro-title {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
  }

  .testimonial-intro-description {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .category-highlight-repeated {
    flex-wrap: wrap;
    justify-content: center;
  }

  .category-highlight-item-parent {
    padding: var(--padding-4) var(--padding-16);
  }

  .category-highlight-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .category-highlight-item-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .start-selling-free-img {
    border-radius: 0px;
  }

  .works-details {
    padding: 0 16px;
  }

  .section-title {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
  }

  .work-steps {
    padding: 0 16px;
    gap: 16px;
    justify-content: flex-start;
  }

  .role-pair span {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
  }

  .role-pair.active span {
    font-size: 14px;
    line-height: 20px;
  }

  .step-pair {
    width: calc(100% / 2 - 8px);
    height: auto;
  }

  .step-icon {
    width: 44px;
    height: 44px;
  }

  .step-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .loves-container-wrapper {
    padding: 0 16px;
  }

  .product-showcase {
    gap: 24px;
  }

  .showcase-details {
    align-items: center;
  }

  .showcase-icon {
    width: 44px;
    height: 44px;
  }

  .showcase-description {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .showcase-divider {
    display: none;
  }

  .sparkles {
    padding: 8px 0;
    gap: 8px;
  }

  .heroicons-koinz {
    width: 24px;
    height: 24px;
    object-fit: cover;
  }

  .bonus-title {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .bonus-claim-details {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    padding: 0 16px;
  }

  .questions-container-wrapper {
    padding: 0 16px;
  }

  .questions-container {
    gap: 24px;
  }

  .question-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }

  .start-selling-on-moolah-container {
    padding: 0 16px;
  }

  .start-selling-on-moolah-parent {
    gap: 24px;
  }

  .start-selling-title {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
  }

  .start-selling-description {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .start-selling-quote {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
  }
}