/*.produk.main {
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow: hidden;
}*/

.produk.main {
  display: flex;
  flex-direction: column;
  background-color: white;

}

@media (max-width: 575px) {
	.produk.main {
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow-x: hidden;
}
}

.produk .imageSourceSection {
  min-height: 932px;
  background: var(--src) center center/cover no-repeat;
}
.produk .productOverviewSection {
  display: flex;
  flex-direction: column;
}
.produk .flex_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 122px 0;
  margin: 73px 0 0 3px;
  max-width: 1920px;
}
@media (max-width: 575px) {
  .produk .flex_col {
    gap: 80px 0;
  }
}
@media (max-width: 383px) {
  .produk .flex_col {
    gap: 50px 0;
    margin: 50px 0 0 3px;
  }
}
.produk .productHeaderColumn {
  display: flex;
  flex-direction: column;
  gap: 181px 0;
  width: 1205.921875px;
  max-width: 85%;
}
@media (max-width: 991px) {
  .produk .productHeaderColumn {
    gap: 150px 0;
  }
}
@media (max-width: 575px) {
  .produk .productHeaderColumn {
    gap: 80px 0;
  }
}
@media (max-width: 383px) {
  .produk .productHeaderColumn {
    gap: 50px 0;
  }
}
.produk .imageGroupRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  margin: 0 15px 0 auto;
  width: 91.96%;
}
@media (max-width: 1199px) {
  .produk .imageGroupRow {
    flex-direction: column;
    align-items: center;
    gap: 30px 10px;
  }
}
@media (max-width: 479px) {
  .produk .imageGroupRow {
    margin: 0 auto;
  }
  

  
}
.produk .imageGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 20px;
  width: 463px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .imageGroup {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
.produk .productImage1 {
  position: absolute;
  top: 67px;
  left: -101px;
  width: 382px;
}
.produk .productImage2 {
  position: relative;
  width: 100%;
  z-index:1;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .productImage3 {
  position: absolute;
  top: 237px;
  right: -79px;
  width: 382px;
}

@media (max-width: 479px) {

.produk .productImage1 {
  position: absolute;
  top: 47px;
  left: -15px;
  width: 200px;
}
.produk .productImage2 {
  position: relative;
  width: 75%;
   align-items: center;
   left: 40px;
  z-index:1;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .productImage3 {
  position: absolute;
  top: 117px;
  right: -29px;
  width: 200px;
}
}

.produk .productInfoColumn {
  display: flex;
  flex-direction: column;
  gap: 55px 0;
  margin: 50px 0 0;
  width: 525px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .productInfoColumn {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
@media (max-width: 383px) {
  .produk .productInfoColumn {
    gap: 50px 0;
  }
}
.produk .productTitlesColumn {
  display: flex;
  flex-direction: column;
  gap: 2px 0;
  margin: 0 32px 0 0;
}
@media (max-width: 575px) {
  .produk .productTitlesColumn {
    margin: 0 16px 0 0;
  }
}
@media (max-width: 383px) {
  .produk .productTitlesColumn {
    margin: 0 8px 0 0;
  }
}
.produk .mainProductTitle {
  display: flex;
  align-items: center;
  font: 400 96px/1.35 Prata, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .mainProductTitle {
    font-size: 52px;
  }
}
@media (max-width: 479px) {
  .produk .mainProductTitle {
    font-size: 36px;
	

  }
}
.produk .productSubtitle {
  display: flex;
  align-items: center;
  margin: 0 18px 0 0;
  font: 275 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .productSubtitle {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .produk .productSubtitle {
    margin: 0 16px 0 0;
  }
}
@media (max-width: 479px) {
  .produk .productSubtitle {
    font-size: 32px;
  }
}
@media (max-width: 383px) {
  .produk .productSubtitle {
    margin: 0 8px 0 0;
  }
}
.produk .productDescriptionSubtitle {
  display: flex;
  align-items: center;
  margin: 0 0 0 9px;
  font: 300 22px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -0.7px;
}
@media (max-width: 991px) {
  .produk .productDescriptionSubtitle {
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  .produk .productDescriptionSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 383px) {
  .produk .productDescriptionSubtitle {
    margin: 0 0 0 8px;
  }
}
.produk .mainIngredientsColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px 0;
}
.produk .flex_col1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px 0;
  width: 786.984375px;
  max-width: 85%;
}
.produk .mainIngredientsTitle {
  display: flex;
  align-items: center;
  font: 400 48px/1.35 Prata, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .mainIngredientsTitle {
    font-size: 44px;
  }
}
@media (max-width: 479px) {
  .produk .mainIngredientsTitle {
    font-size: 36px;
  }
}
.produk .mainIngredientsDetails {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 300 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .mainIngredientsDetails {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .mainIngredientsDetails {
    font-size: 20px;
  }
}
.produk .ingredientImagesRow {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  width: 100%;
}
@media (max-width: 1199px) {
  .produk .ingredientImagesRow {
    flex-direction: column;
    align-items: center;
    gap: 30px 10px;
  }
}
.produk .ingredientImageGroup {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 3px;
  width: 463px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .ingredientImageGroup {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
.produk .ingredientImage1 {
  position: absolute;
  top: 67px;
  left: -98px;
  width: 379px;
}
.produk .ingredientImage2 {
  position: relative;
  width: 100%;
  z-index:1;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .ingredientImage3 {
  position: absolute;
  top: 237px;
  right: -76px;
  width: 379px;
}

@media (max-width: 479px) {
.produk .ingredientImage1 {
  position: absolute;
  top: 67px;
  left: -18px;
  width: 200px;
}
.produk .ingredientImage2 {
  position: relative;
  width: 75%;
  left:40px;
  z-index:1;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .ingredientImage3 {
  position: absolute;
  top: 137px;
  right: -26px;
  width: 200px;
}
}
.produk .ingredientBenefitsColumn {
  display: flex;
  flex-direction: column;
  margin: 113px 0 0;
  width: 667px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .ingredientBenefitsColumn {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
.produk .ingredientEffectRow {
  display: flex;
  align-items: center;
  gap: 0 27px;
}
@media (max-width: 575px) {
  .produk .ingredientEffectRow {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 383px) {
  .produk .ingredientEffectRow {
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
.produk .color {
  width: 4px;
  height: 105px;
  min-height: 105px;
  background-color: #640d14;
}
.produk .ingredientHighlightColumn {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  width: 636px;
  min-width: 0;
}
.produk .effectiveSkinBrighteningTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .effectiveSkinBrighteningTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .effectiveSkinBrighteningTitle {
    font-size: 20px;
  }
}
.produk .skinBrighteningDescription {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
}
.produk .deepMoistureRow {
  display: flex;
  gap: 0 27px;
  margin: 16px 0 0;
}
@media (max-width: 575px) {
  .produk .deepMoistureRow {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 383px) {
  .produk .deepMoistureRow {
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
.produk .color1 {
  margin: 5px 0 0;
  width: 4px;
  min-height: 105px;
  background-color: #640d14;
}
.produk .deepMoistureDescriptionColumn {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin: 0 0 21px;
  width: 636px;
  min-width: 0;
}
.produk .deepMoistureTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .deepMoistureTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .deepMoistureTitle {
    font-size: 20px;
  }
}
.produk .deepMoistureParagraph {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -2.01px;
}
.produk .antiAgingRow {
  display: flex;
  gap: 0 27px;
  margin: 19px 0 0;
}
@media (max-width: 575px) {
  .produk .antiAgingRow {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 383px) {
  .produk .antiAgingRow {
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
.produk .antiAgingDescriptionColumn {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin: 0 0 21px;
  width: 636px;
  min-width: 0;
}
.produk .antiAgingTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .antiAgingTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .antiAgingTitle {
    font-size: 20px;
  }
}
.produk .antiAgingParagraph {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -1.91px;
}
.produk .glowingSkinRow {
  display: flex;
  gap: 0 27px;
  margin: 19px 0 0;
}
@media (max-width: 575px) {
  .produk .glowingSkinRow {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 383px) {
  .produk .glowingSkinRow {
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
.produk .glowingSkinDescriptionColumn {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin: 0 0 21px;
  width: 636px;
  min-width: 0;
}
.produk .glowingSkinTitle {
  display: flex;
  align-items: center;
  margin: 0 27px 0 0;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .glowingSkinTitle {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .produk .glowingSkinTitle {
    margin: 0 16px 0 0;
  }
}
@media (max-width: 479px) {
  .produk .glowingSkinTitle {
    font-size: 20px;
  }
}
@media (max-width: 383px) {
  .produk .glowingSkinTitle {
    margin: 0 8px 0 0;
  }
}
.produk .glowingSkinParagraph {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -2.31px;
}
.produk .exclusiveOfferBox {
  /*display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--src) center center/cover no-repeat;
}*/
 display: flex;
  flex-direction: column;
  margin: 106px auto 0;
  width: 100%;
  max-width: 1920px;
  background: var(--src) center center/cover no-repeat;
  }
@media (max-width: 1199px) {
  .produk .exclusiveOfferBox {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
.produk .exclusiveOfferTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 67px auto 51px;
  font: italic 300 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: #ffdada;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .exclusiveOfferTitle {
    font-size: 36px;
  }
}
@media (max-width: 479px) {
  .produk .exclusiveOfferTitle {
    font-size: 32px;
  }
}
@media (max-width: 383px) {
  .produk .exclusiveOfferTitle {
    margin: 50px auto;
  }
}

.produk .beautyProductSection {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.produk .flex_col2 {
  display: flex;
  flex-direction: column;
  gap: 120px 0;
  margin: 178px auto 0;
  width: 1920px;
  max-width: 85%;
  

}
}
@media (max-width: 991px) {
  .produk .flex_col2 {
    margin: 150px auto 0;
  }
}
@media (max-width: 575px) {
  .produk .flex_col2 {
    gap: 80px 0;
    margin: 80px auto 0;
  }
}
@media (max-width: 383px) {
  .produk .flex_col2 {
    gap: 50px 0;
    margin: 50px auto 0;
  }
}
.produk .flex_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 10px;
  width: 95.05%;
}
@media (max-width: 1199px) {
  .produk .flex_row {
    flex-direction: column;
    gap: 30px 10px;
  }
}
.produk .flex_col3 {
  display: flex;
  flex-direction: column;
  gap: 9px 0;
  width: 525px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .flex_col3 {
    width: 100%;
    min-width: unset;
  }
}
.produk .flex_col4 {
  display: flex;
  flex-direction: column;
  gap: 2px 0;
  margin: 0 16px 0 0;
}
@media (max-width: 383px) {
  .produk .flex_col4 {
    margin: 0 8px 0 0;
  }
}
.produk .productHeroTitle {
  display: flex;
  align-items: center;
  margin: 0 16px 0 0;
  font: 400 96px/1.35 Prata, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .productHeroTitle {
    font-size: 52px;
  }
}
@media (max-width: 479px) {
  .produk .productHeroTitle {
    font-size: 36px;
  }
}
@media (max-width: 383px) {
  .produk .productHeroTitle {
    margin: 0 8px 0 0;
  }
}
.produk .productSubtitleTitle {
  display: flex;
  align-items: center;
  font: 275 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .productSubtitleTitle {
    font-size: 36px;
  }
}
@media (max-width: 479px) {
  .produk .productSubtitleTitle {
    font-size: 32px;
  }
}
.produk .productDescription {
  margin: 0 0 0 9px;
  font: 300 22px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
}
@media (max-width: 991px) {
  .produk .productDescription {
    align-items: flex-start;
    font-size: 20px;
  }
}
@media (max-width: 479px) {
  .produk .productDescription {
    font-size: 18px;
  }
}
@media (max-width: 383px) {
  .produk .productDescription {
    margin: 0 0 0 8px;
  }
}
.produk .group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 441px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .group {
    width: 100%;
    min-width: unset;
  }
}

.produk .productImage11 {
  position: absolute;
  top: -76px;
  left: -42px;
  width: 364px;
}
.produk .productImage31 {
  position: absolute;
  top: 78px;
  left: 119px;
  width: 365px;
}

@media (max-width: 575px) {
.produk .productImage11 {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 200px;
}
.produk .productImage31 {
  position: absolute;
  top: 68px;
  left: 119px;
  width: 200px;
}
}


.produk .flex_col5 {
  display: flex;
  flex-direction: column;
  gap: 90px 0;
  margin: 0 0 0 9px;
}
@media (max-width: 575px) {
  .produk .flex_col5 {
    gap: 80px 0;
  }
}
@media (max-width: 383px) {
  .produk .flex_col5 {
    gap: 50px 0;
    margin: 0 0 0 8px;
  }
}
.produk .flex_col6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 0 14.7%;
  width: 787px;
  max-width: 85%;
}
@media (max-width: 1399px) {
  .produk .flex_col6 {
    margin: 0 auto;
  }
}
.produk .ingredientsTitle {
  display: flex;
  align-items: center;
  font: 400 48px/1.35 Prata, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .ingredientsTitle {
    font-size: 44px;
  }
}
@media (max-width: 479px) {
  .produk .ingredientsTitle {
    font-size: 36px;
  }
}
.produk .ingredientsListTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 300 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .ingredientsListTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .ingredientsListTitle {
    font-size: 20px;
  }
}
.produk .flex_row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 10px;
}
@media (max-width: 1199px) {
  .produk .flex_row1 {
    flex-direction: column;
    gap: 30px 10px;
  }
}
.produk .flex_col7 {
  display: flex;
  flex-direction: column;
  gap: 19px 0;
  width: 667px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .flex_col7 {
    width: 100%;
    min-width: unset;
  }
}
.produk .flex_row2 {
  display: flex;
  gap: 0 27px;
}
@media (max-width: 575px) {
  .produk .flex_row2 {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 383px) {
  .produk .flex_row2 {
    -moz-column-gap: 8px;
    column-gap: 8px;
  }
}
.produk .flex_col8 {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin: 0 0 21px;
  width: 636px;
  min-width: 0;
}
.produk .nightCareTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .nightCareTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .nightCareTitle {
    font-size: 20px;
  }
}
.produk .nightCareDescription {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -1.91px;
}
.produk .brighteningTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .brighteningTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .brighteningTitle {
    font-size: 20px;
  }
}
.produk .brighteningDescription {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -1px;
}
.produk .hydrationTitle {
  display: flex;
  align-items: center;
  font: 500 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .hydrationTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .hydrationTitle {
    font-size: 20px;
  }
}
.produk .hydrationDescription {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -2.11px;
}
.produk .antiAgingDescription {
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: black;
  letter-spacing: -0.7px;
}
.produk .group1 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 449px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .produk .group1 {
    width: 100%;
    min-width: unset;
  }
}

.produk .productImage4 {
  position: absolute;
  top: -55px;
  left: -42px;
  width: 364px;
}
.produk .productImage5 {
  position: relative;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .productImage6 {
  position: absolute;
  top: 99px;
  left: 119px;
  width: 365px;
}

@media (max-width: 575px) {
.produk .productImage4 {
  position: absolute;
  top: -25px;
  left: -22px;
  width: 200px;
}
.produk .productImage5 {
 /* position: relative;
  width: 75%;
  -o-object-fit: cover;
  object-fit: cover;*/
  
  position: relative;
    width: 75%;
    align-items: center;
    left: 40px;
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover;
}
.produk .productImage6 {
  position: absolute;
  top: 80px;
  left: 110px;
  width: 200px;
}
}
.produk .content_box {
  display: flex;
  flex-direction: column;
  margin: 106px auto 0;
  width: 100%;
  max-width: 1440px;
  background: var(--src) center center/cover no-repeat;
}
@media (max-width: 575px) {
  .produk .content_box {
    margin: 80px auto 0;
  }
}
@media (max-width: 383px) {
  .produk .content_box {
    margin: 50px auto 0;
  }
}
.produk .endUserHeroTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 67px auto 51px;
  font: italic 300 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: #ffdada;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .endUserHeroTitle {
    font-size: 36px;
  }
}
@media (max-width: 479px) {
  .produk .endUserHeroTitle {
    font-size: 32px;
  }
}
@media (max-width: 383px) {
  .produk .endUserHeroTitle {
    margin: 50px auto;
  }
}



.produk .beautyProductOverviewSection {
  display: flex;
  flex-direction: column;
}
.produk .flexColumn {
  display: flex;
  flex-direction: column;
  gap: 84px 0;
  margin: 79px auto 118px;
  width: 1183.953125px;
  max-width: 85%;
}
@media (max-width: 575px) {
  .produk .flexColumn {
    gap: 80px 0;
    margin: 79px auto 80px;
  }
}
@media (max-width: 383px) {
  .produk .flexColumn {
    gap: 50px 0;
    margin: 50px auto;
  }
}
.produk .descriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px 0;
  margin: 0 14px 0 0;
}
@media (max-width: 383px) {
  .produk .descriptionColumn {
    margin: 0 8px 0 0;
  }
}
.produk .heroTitle {
  display: flex;
  align-items: center;
  font: 400 60px/1.35 Prata, Helvetica, Arial, serif;
  color: #640d14;
}
@media (max-width: 991px) {
  .produk .heroTitle {
    font-size: 52px;
  }
}
@media (max-width: 479px) {
  .produk .heroTitle {
    font-size: 36px;
  }
}
.produk .productDescription1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 30px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .productDescription1 {
    font-size: 28px;
  }
}
@media (max-width: 479px) {
  .produk .productDescription1 {
    font-size: 24px;
  }
}
.produk .benefitGrid {
  display: grid;
  align-content: start;
  gap: 51px 24px;
  margin: 0 0 0 25px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1199px) {
  .produk .benefitGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .produk .benefitGrid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .produk .benefitGrid {
    margin: 0 0 0 16px;
  }
}
@media (max-width: 383px) {
  .produk .benefitGrid {
    margin: 0 0 0 8px;
  }
}
.produk .benefitItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .benefitImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .benefitDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px 0;
  width: 100%;
}
.produk .bpomTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .bpomTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .bpomTitle {
    font-size: 20px;
  }
}
.produk .bpomSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .bpomSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .bpomSubtitle {
    font-size: 16px;
  }
}
.produk .qualityItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .qualityImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .qualityDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .qualityTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .qualityTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .qualityTitle {
    font-size: 20px;
  }
}
.produk .qualitySubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .qualitySubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .qualitySubtitle {
    font-size: 16px;
  }
}
.produk .benefitsItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .benefitsImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .benefitsDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .benefitsTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .benefitsTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .benefitsTitle {
    font-size: 20px;
  }
}
.produk .benefitsSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .benefitsSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .benefitsSubtitle {
    font-size: 16px;
  }
}
.produk .noParabenItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .noParabenImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .noParabenDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .noParabenTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noParabenTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .noParabenTitle {
    font-size: 20px;
  }
}
.produk .noParabenSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noParabenSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .noParabenSubtitle {
    font-size: 16px;
  }
}
.produk .noParafirinItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .noParafirinImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .noParafirinDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .noParafirinTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noParafirinTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .noParafirinTitle {
    font-size: 20px;
  }
}
.produk .noParafirinSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noParafirinSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .noParafirinSubtitle {
    font-size: 16px;
  }
}
.produk .noAlcoholItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .noAlcoholImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .noAlcoholDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .noAlcoholTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noAlcoholTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .noAlcoholTitle {
    font-size: 20px;
  }
}
.produk .noAlcoholSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noAlcoholSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .noAlcoholSubtitle {
    font-size: 16px;
  }
}
.produk .noPetroleumItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .noPetroleumImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .noPetroleumDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .noPetroleumTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noPetroleumTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .noPetroleumTitle {
    font-size: 20px;
  }
}
.produk .noPetroleumSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .noPetroleumSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .noPetroleumSubtitle {
    font-size: 16px;
  }
}
.produk .waterBasedItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .waterBasedImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .waterBasedDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .waterBasedTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .waterBasedTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .waterBasedTitle {
    font-size: 20px;
  }
}
.produk .waterBasedSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .waterBasedSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .waterBasedSubtitle {
    font-size: 16px;
  }
}
.produk .bestActiveIngredientsItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  grid-row: span 1;
  grid-column: span 1;
}
.produk .bestActiveIngredientsImage {
  width: 150px;
  max-width: 85%;
  -o-object-fit: cover;
  object-fit: cover;
}
.produk .bestActiveIngredientsDescriptionColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px 0;
  width: 100%;
}
.produk .bestActiveIngredientsTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #640d14;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .bestActiveIngredientsTitle {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .produk .bestActiveIngredientsTitle {
    font-size: 20px;
  }
}
.produk .bestActiveIngredientsSubtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .bestActiveIngredientsSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .produk .bestActiveIngredientsSubtitle {
    font-size: 16px;
  }
}

.produk .beautyShowcaseSection {
  display: flex;
  flex-direction: column;
  gap: 56px 0;
  margin: 0 0 23px;
}
@media (max-width: 383px) {
  .produk .beautyShowcaseSection {
    gap: 50px 0;
  }
}

.produk .contentBox {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  background: var(--src) center center/cover no-repeat;
}
.produk .heroTitle1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 140px auto 146px;
  font: 400 64px/1.35 Prata, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .produk .heroTitle1 {
    font-size: 52px;
  }
}
@media (max-width: 575px) {
  .produk .heroTitle1 {
    margin: 80px auto;
  }
}
@media (max-width: 479px) {
  .produk .heroTitle1 {
    font-size: 36px;
  }
}
@media (max-width: 383px) {
  .produk .heroTitle1 {
    margin: 50px auto;
  }
}