@font-face {
  font-family: "MOON GET!";
  src: url("fonts/MoonGet.woff2") format("woff2"),
       url("fonts/MoonGet.woff") format("woff"),
       url("fonts/MoonGet.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.desktop {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  min-width: 1440px;
  min-height: 4233px;
  position: relative;
}

.desktop .rectangle {
  position: absolute;
  top: -185px;
  left: -3px;
  width: 1440px;
  height: 2615px;
  background-color: #fffcee;
  box-shadow: 0px 4px 30px #00000040;
}

.desktop .div {
  position: absolute;
  top: 2430px;
  left: -1px;
  width: 1440px;
  height: 794px;
  background-color: #f2d33d;
  box-shadow: 0px 4px 30px #00000040;
}

.desktop .FREQUENTLY-ASKED {
  position: absolute;
  top: 2484px;
  left: calc(50.00% - 538px);
  width: 1072px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MoonGet', Helvetica;
  font-weight: 400;
  color: #03604d;
  font-size: 64px;
  text-align: center;
  letter-spacing: 4.48px;
  line-height: 90px;
  white-space: nowrap;
}

.desktop .text-wrapper {
  letter-spacing: 2.87px;
}

.desktop .span {
  font-size: 48px;
  letter-spacing: 1.61px;
}

.desktop .rectangle-2 {
  position: absolute;
  top: 3443px;
  left: -11px;
  width: 1458px;
  height: 588px;
  background-color: #fffcee;
  box-shadow: 10px 0px 30px #00000040;
}

.desktop .rectangle-3 {
  position: absolute;
  top: 3224px;
  left: -13px;
  width: 1460px;
  height: 219px;
  background-color: #03604d;
}

.desktop .text-wrapper-2 {
  position: absolute;
  top: 3243px;
  left: calc(50.00% - 336px);
  width: 667px;
  height: 179px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #f2d33d;
  font-size: 72px;
  text-align: center;
  letter-spacing: 5.04px;
  line-height: 90px;
}

.desktop .rectangle-4 {
  position: absolute;
  top: 3963px;
  left: -9px;
  width: 1458px;
  height: 270px;
  background-color: #2c2c2c;
}

.desktop .text-wrapper-3 {
  position: absolute;
  top: 4097px;
  left: calc(50.00% - 675px);
  width: 144px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-4 {
  position: absolute;
  top: 4087px;
  left: calc(50.00% - 245px);
  width: 153px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-5 {
  position: absolute;
  top: 4045px;
  left: calc(50.00% - 245px);
  width: 153px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-6 {
  position: absolute;
  top: 4048px;
  left: calc(50.00% + 67px);
  width: 153px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-7 {
  top: 4050px;
  left: calc(50.00% + 359px);
  width: 152px;
  height: 39px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-8 {
  position: absolute;
  top: 4087px;
  left: calc(50.00% + 122px);
  width: 43px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-9 {
  position: absolute;
  top: 4087px;
  left: calc(50.00% + 412px);
  width: 49px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-10 {
  position: absolute;
  top: 4127px;
  left: calc(50.00% - 245px);
  width: 153px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-11 {
  top: 4127px;
  left: calc(50.00% + 353px);
  width: 164px;
  height: 23px;
  opacity: 0.5;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-12 {
  position: absolute;
  top: 4064px;
  left: calc(50.00% - 675px);
  width: 125px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .group {
  position: absolute;
  top: 3489px;
  left: calc(50.00% - 382px);
  width: 763px;
  height: 408px;
}

.desktop .we-re-open-order {
  position: absolute;
  top: 0;
  left: calc(50.00% - 382px);
  width: 761px;
  height: 87px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #03604d;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .lean {
  position: absolute;
  top: 79px;
  left: calc(50.00% - 142px);
  width: 284px;
  height: 271px;
  object-fit: cover;
}

.desktop .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 261px;
  height: 58px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  padding: var(--size-space-300);
  position: absolute;
  top: 350px;
  left: calc(50.00% - 130px);
  background-color: #03604d;
  border-radius: 25px;
  overflow: hidden;
    text-decoration: none;
  border: 1px solid;
}

.desktop .button-2 {
  position: relative;
  width: fit-content;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--color-text-brand-on-brand);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28.0px;
  text-decoration: none;
  white-space: nowrap;
}

.desktop .ellipse {
  left: 45px;
  width: 36px;
  border-radius: 18px / 17.5px;
  position: absolute;
  top: 4143px;
  height: 35px;
  background-color: #d9d9d9;
}

.desktop .ellipse-2 {
  left: 99px;
  width: 35px;
  border-radius: 17.5px;
  position: absolute;
  top: 4143px;
  height: 35px;
  background-color: #d9d9d9;
}

.desktop .ellipse-3 {
  left: 152px;
  width: 36px;
  border-radius: 18px / 17.5px;
  position: absolute;
  top: 4143px;
  height: 35px;
  background-color: #d9d9d9;
}

.desktop .rectangle-5 {
  position: absolute;
  top: 1176px;
  left: -7px;
  width: 1448px;
  height: 103px;
  background-color: #f2d33d;
  box-shadow: 0px 4px 30px #00000040;
}

.desktop .healthy-chocolate {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 537px;
}

.desktop .rectangle-6 {
  position: absolute;
  top: 0;
  left: -7px;
  width: 1447px;
  height: 99px;
  background-color: #fffcee;
  box-shadow: 30px 6px 50px #00000040;
}

.desktop .LEANTREATS {
  position: absolute;
  top: 15px;
  left: 54px;
  width: 293px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MoonGet', Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-13 {
  color: #03604d;
}

.desktop .text-wrapper-14 {
  color: #e4c011;
}

.desktop .group-2 {
  position: absolute;
  top: 30px;
  left: 632px;
  width: 748px;
  height: 38px;
  display: flex;
}

.desktop .text-wrapper-15 {
  width: 126px;
  height: 38px;
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  font-size: 25px;
  color: #03604d;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-16 {
  width: 52px;
  height: 38px;
  margin-left: 237px;
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: #03604d;
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-17 {
  width: 125px;
  height: 38px;
  margin-left: 202px;
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: #03604d;
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-18 {
  position: absolute;
  top: 662px;
  left: 629px;
  width: 95px;
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 20px;
  color: #03604d;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .low-calorie-snacks {
  position: absolute;
  top: 642px;
  left: 629px;
  width: 735px;
  height: 257px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MoonGet', Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .p {
  position: absolute;
  top: 814px;
  left: 629px;
  width: 644px;
  height: 257px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .group-3 {
  position: absolute;
  top: 1203px;
  left: 95px;
  width: 1265px;
  height: 58px;
  display: flex;
}

.desktop .star {
  margin-top: 11px;
  width: 29px;
  height: 29px;
}

.desktop .text-wrapper-19 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  height: 58px;
  margin-left: 64px;
  font-family: "Poppins-ExtraBold", Helvetica;
  font-weight: 800;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .img {
  margin-top: 14px;
  margin-left: 37px;
  width: 29px;
  height: 29px;
}

.desktop .text-wrapper-20 {
  margin-left: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  height: 58px;
  font-family: "Poppins-ExtraBold", Helvetica;
  font-weight: 800;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .star-2 {
  margin-top: 14px;
  margin-left: 41px;
  width: 29px;
  height: 29px;
}

.desktop .text-wrapper-21 {
  margin-left: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  height: 58px;
  font-family: "Poppins-ExtraBold", Helvetica;
  font-weight: 800;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .star-3 {
  margin-top: 14px;
  margin-left: 48px;
  width: 29px;
  height: 29px;
}

.desktop .text-wrapper-22 {
  margin-left: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  height: 58px;
  font-family: "Poppins-ExtraBold", Helvetica;
  font-weight: 800;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .star-4 {
  margin-top: 14px;
  margin-left: 52px;
  width: 29px;
  height: 29px;
}

.desktop .text-wrapper-23 {
  position: absolute;
  top: 349px;
  left: 54px;
  width: 537px;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #03604d;
  font-size: 48px;
  letter-spacing: 3.36px;
  line-height: 60px;
  white-space: nowrap;
}

.desktop .button-3 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 135px;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-200);
  padding: var(--size-space-300);
  position: absolute;
  top: 464px;
  left: 54px;
  background-color: #03604d;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 2px 7px 10px #00000040;
}

.desktop .button-4 {
  position: relative;
  width: fit-content;
  margin-top: -19.00px;
  margin-bottom: -17.00px;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: #f2d33d;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.desktop .chevron-right {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: -8.00px;
  margin-bottom: -8.00px;
}

.desktop .group-4 {
  position: absolute;
  top: 1363px;
  left: 399px;
  width: 647px;
  height: 144px;
}

.desktop .text-wrapper-24 {
  position: absolute;
  top: 10px;
  left: 558px;
  width: 83px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #e4c011;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-25 {
  position: absolute;
  top: 84px;
  left: 2px;
  width: 363px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: #03604d;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-26 {
  position: absolute;
  top: 0;
  left: 0;
  width: 439px;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 2.24px;
  line-height: 120px;
  white-space: nowrap;
}

.desktop .line {
  position: absolute;
  top: 76px;
  left: 2px;
  width: 639px;
  height: 2px;
}

.desktop .group-5 {
  position: absolute;
  top: 1561px;
  left: 399px;
  width: 647px;
  height: 144px;
}

.desktop .text-wrapper-27 {
  position: absolute;
  top: 0;
  left: 0;
  width: 517px;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 2.24px;
  line-height: 120px;
  white-space: nowrap;
}

.desktop .group-6 {
  position: absolute;
  top: 1759px;
  left: 399px;
  width: 647px;
  height: 144px;
}

.desktop .group-7 {
  position: absolute;
  top: 1951px;
  left: 399px;
  width: 647px;
  height: 144px;
}

.desktop .group-8 {
  position: absolute;
  top: 2149px;
  left: 399px;
  width: 647px;
  height: 144px;
}

.desktop .text-wrapper-28 {
  position: absolute;
  top: 0;
  left: 0;
  width: 517px;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "MOON GET!-Heavy", Helvetica;
  font-weight: 400;
  color: #03604d;
  font-size: 32px;
  letter-spacing: 2.24px;
  line-height: 120px;
  white-space: nowrap;
}

.desktop .kaka {
  top: 1353px;
  left: 0;
  width: 155px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-2 {
  top: 1391px;
  left: 1165px;
  width: 275px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-3 {
  top: 2034px;
  left: 0;
  width: 267px;
  height: 241px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-4 {
  top: 1986px;
  left: 1297px;
  width: 143px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-5 {
  top: 2506px;
  left: 1291px;
  width: 149px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-6 {
  top: 2541px;
  left: 0;
  width: 249px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-7 {
  top: 2960px;
  left: 1182px;
  width: 258px;
  height: 241px;
  position: absolute;
  object-fit: cover;
}

.desktop .kaka-8 {
  top: 2902px;
  left: 0;
  width: 163px;
  height: 275px;
  position: absolute;
  object-fit: cover;
}

.desktop .the-best-chewy {
  position: absolute;
  top: 341px;
  left: 0;
  width: 678px;
  height: 1068px;
  object-fit: cover;
}

.desktop .accordion {
  display: flex;
  flex-direction: column;
  width: 834px;
  height: 453px;
  align-items: flex-start;
  gap: var(--size-space-400);
  position: absolute;
  top: 2646px;
  left: 303px;
  box-shadow: 0px 4px 4px #00000040;
}

.desktop .accordion-item {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-200);
  flex: 0 0 auto;
  background-color: var(--color-background-default-default);
  display: flex;
  padding: var(--size-padding-lg);
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: var(--size-radius-200);
  border: 1px solid;
  border-color: var(--color-border-default-default);
}

.desktop .accordion-title {
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
}

.desktop .title {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: #03604d;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 33.6px;
}

.desktop .img-2 {
  position: relative;
  width: 20px;
  height: 20px;
}

.desktop .accordion-content {
  justify-content: center;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--color-text-default-default);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28.0px;
}

.desktop .accordion-title-wrapper {
  padding: var(--size-padding-lg);
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--color-background-default-secondary);
  border-radius: var(--size-radius-200);
  border: 1px solid;
  border-color: var(--color-border-default-default);
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .accordion-title-2 {
  gap: var(--size-space-200);
  flex: 1;
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.desktop .div-wrapper {
  align-items: center;
  flex: 1;
  flex-grow: 1;
  background-color: var(--color-background-default-secondary);
  display: flex;
  padding: var(--size-padding-lg);
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: var(--size-radius-200);
  border: 1px solid;
  border-color: var(--color-border-default-default);
}

.desktop .accordion-title-3 {
  flex: 1;
  flex-grow: 1;
  margin-top: -2.50px;
  margin-bottom: -2.50px;
  display: flex;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
}

.desktop .LEANTREATS-2 {
  position: absolute;
  top: 3996px;
  left: 45px;
  width: 293px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'MoonGet', Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
}

.frequently-asked {
  font-family: 'MoonGet';
  font-size: 64px;
  word-spacing: 10px; /* atur sesuai kebutuhan */
}

.low-calorie-snacks {
  font-family: 'MoonGet', sans-serif;
  font-size: 48px;          /* samakan dengan Figma */
  line-height: 1.2;         /* biar rapi ke bawah */
  margin-left: 50px;        /* posisi horizontal */
}

.low-calorie-snacks .green {
  color: #03604D;
  display: block;
}

.low-calorie-snacks .yellow {
  color: #E6BC0A;
  display: block;
}