
.blog .productShowcaseSection {
  display: flex;
  flex-direction: column;
  background: var(--src) center center/cover no-repeat;
}
.blog .flexColContainer {
  display: flex;
  flex-direction: column;
  gap: 7px 0;
  margin: 152px 0 101px 5%;
  width: 790px;
  max-width: 85%;
}
@media (max-width: 991px) {
  .blog .flexColContainer {
    margin: 150px 0 101px 5%;
  }
}
@media (max-width: 575px) {
  .blog .flexColContainer {
    margin: 80px 0 80px 5%;
  }
}
@media (max-width: 383px) {
  .blog .flexColContainer {
    margin: 50px 0 50px 5%;
  }
}
.blog .flexColContent {
  display: flex;
  flex-direction: column;
  gap: 4px 0;
}
.blog .heroTitle {
  display: flex;
  align-items: center;
  font: 400 44px/1.35 Prata, Helvetica, Arial, serif;
  color: #6f8369;
  max-width: 75%;
}
@media (max-width: 991px) {
  .blog .heroTitle {
    font-size: 32px;
  }
}
@media (max-width: 479px) {
  .blog .heroTitle {
    font-size: 32px;
  }
}
.blog .subTitle {
  display: flex;
  align-items: center;
  width: 563.96875px;
  max-width: 85%;
  font: 300 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
}
@media (max-width: 991px) {
  .blog .subTitle {
    font-size: 14px;
  }
}
@media (max-width: 479px) {
  .blog .subTitle {
    font-size: 12px;
  }
}
.blog .readMoreBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 187px;
  max-width: 100%;
  font: 400 16px/1.5 Poppins, Helvetica, Arial, serif;
  color: #6f8369;
  text-align: center;
  background-color: white;
  border-radius: 27px;
  padding: 9px 28px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.blog .lifestyleSection {
  display: flex;
  flex-direction: column;
}
.blog .flexColumnDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 174px auto 181px;
  width: 89.86%;
  max-width: 1293.96875px;
}
@media (max-width: 991px) {
  .blog .flexColumnDiv {
    margin: 150px auto;
  }
}
@media (max-width: 575px) {
  .blog .flexColumnDiv {
    margin: 80px auto;
  }
}
@media (max-width: 383px) {
  .blog .flexColumnDiv {
    margin: 50px auto;
  }
}
.blog .heroTitleH1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 400 44px/1.35 Prata, Helvetica, Arial, serif;
  color: #6f8369;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .heroTitleH1 {
    font-size: 32px;
  }
}
@media (max-width: 479px) {
  .blog .heroTitleH1 {
    font-size: 16px;
  }
}
.blog .subTitleH2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 0;
  font: 300 24px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .subTitleH2 {
    font-size: 22px;
  }
}
@media (max-width: 479px) {
  .blog .subTitleH2 {
    font-size: 20px;
  }
}
.blog .flexRowDiv {
  display: flex;
  gap: 0 17px;
  margin: 120px 0 0;
  width: 100%;
}
@media (max-width: 991px) {
  .blog .flexRowDiv {
    flex-direction: column;
    align-items: center;
    gap: 30px 17px;
  }
}
@media (max-width: 575px) {
  .blog .flexRowDiv {
    margin: 80px 0 0;
  }
}
@media (max-width: 383px) {
  .blog .flexRowDiv {
    margin: 50px 0 0;
  }
}
.blog .productGroupDiv {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 702px;
  min-width: 0;
}
@media (max-width: 991px) {
  .blog .productGroupDiv {
    width: 100%;
    min-width: unset;
  }
}
.blog .productImage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.13;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog .productButton {
  position: absolute;
  bottom: -33px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 177px;
  height: 67px;
  font: 700 20px/1.31 "Red Hat Display", Helvetica, Arial, serif;
  color: white;
  text-align: center;
  background-color: #6f8369;
  padding: 12.5px 18px;
  transform: translate(-50%, 0);
}
.blog .flexColumn1Div {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
  width: 575px;
  min-width: 0;
}
@media (max-width: 991px) {
  .blog .flexColumn1Div {
    width: 100%;
    min-width: unset;
  }
}
.blog .flexRow1Div {
  display: flex;
  gap: 0 17px;
}
@media (max-width: 575px) {
  .blog .flexRow1Div {
    -moz-column-gap: 16px;
    column-gap: 16px;
  }
}
@media (max-width: 479px) {
  .blog .flexRow1Div {
    flex-direction: column;
    align-items: center;
    gap: 30px 16px;
  }
}
.blog .skincareContentBox {
  display: flex;
  flex-direction: column;
  width: 270px;
  min-width: 0;
  background: var(--src) center center/cover no-repeat;
  border-radius: 10px;
  outline: 1px solid black;
  outline-offset: -1px;
}
@media (max-width: 479px) {
  .blog .skincareContentBox {
    width: 100%;
    min-width: unset;
  }
}
.blog .skincareButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 213px auto 28px;
  width: 121px;
  font: 700 20px/1.3 "Red Hat Display", Helvetica, Arial, serif;
  color: white;
  text-align: center;
  background-color: #6f8369;
  padding: 4px 0;
}
@media (max-width: 479px) {
  .blog .skincareButton {
    width: 85%;
  }
}
.blog .naturalIngredientsContentBox {
  display: flex;
  flex-direction: column;
  width: 288px;
  min-width: 0;
  background: var(--src) center center/cover no-repeat;
  border-radius: 10px;
  outline: 1px solid black;
  outline-offset: -1px;
}
@media (max-width: 479px) {
  .blog .naturalIngredientsContentBox {
    width: 100%;
    min-width: unset;
  }
}
.blog .naturalIngredientsButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 213px auto 29px;
  width: 171px;
  font: 700 20px/1.3 "Red Hat Display", Helvetica, Arial, serif;
  color: white;
  text-align: center;
  background-color: #6f8369;
  padding: 3.5px 14px;
}
@media (max-width: 479px) {
  .blog .naturalIngredientsButton {
    width: 85%;
  }
}
.blog .beautyGroupDiv {
  position: relative;
  display: flex;
  flex-direction: column;
}

.blog .beautyImage{
  position: relative;
  width: 100%;
  border-radius: 10px;
  outline: 1px solid black;
  outline-offset: -1px;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog .beautyButton {
  position: absolute;
  bottom: -23px;
  left: 193px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 191px;
  height: 44px;
  font: 700 22px/1.33 "Red Hat Display", Helvetica, Arial, serif;
  color: white;
  text-align: center;
  background-color: #6f8369;
  padding: 6px 16px;
}
.blog .blogLatestSection {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog .heroTitle1 {
  display: flex;
  align-items: center;
  margin: 73px auto 0;
  width: 87.78%;
  max-width: 1264.03125px;
  font: 400 44px/1.35 Prata, Helvetica, Arial, serif;
  color: #6f8369;
}
@media (max-width: 991px) {
  .blog .heroTitle1 {
    font-size: 32px;
  }
}
@media (max-width: 479px) {
  .blog .heroTitle1 {
    font-size: 16px;
  }
}
@media (max-width: 383px) {
  .blog .heroTitle1 {
    margin: 50px auto 0;
  }
}
.blog .contentBox1 {
  display: flex;
  flex-direction: column;
  margin: 44px auto 0;
  width: 100%;
  max-width: 1440px;
  background: var(--src) center center/cover no-repeat;
}
.blog .flexColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 112px 0;
  margin: 286px auto 185px;
  width: 1058.96875px;
  max-width: 85%;
}
@media (max-width: 991px) {
  .blog .flexColumn {
    margin: 150px auto;
  }
}
@media (max-width: 575px) {
  .blog .flexColumn {
    gap: 80px 0;
    margin: 80px auto;
  }
}
@media (max-width: 383px) {
  .blog .flexColumn {
    gap: 50px 0;
    margin: 50px auto;
  }
}
.blog .blogPostTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font: 600 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .blogPostTitle {
    font-size: 36px;
  }
}
@media (max-width: 479px) {
  .blog .blogPostTitle {
    font-size: 32px;
  }
}
.blog .blogMoreButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 418px;
  max-width: 100%;
  font: 600 40px/1.5 Poppins, Helvetica, Arial, serif;
  color: #194e1f;
  text-align: center;
  background-color: #d9d9d9;
  padding: 8.5px 12px;
}
.blog .skincareOverviewSection {
  display: flex;
  flex-direction: column;
}
.blog .flex_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 118px 0;
  margin: 55px auto 235px;
  width: 87.5%;
  max-width: 1260px;
}
@media (max-width: 991px) {
  .blog .flex_col {
    margin: 55px auto 150px;
  }
}
@media (max-width: 575px) {
  .blog .flex_col {
    gap: 80px 0;
    margin: 55px auto 80px;
  }
}
@media (max-width: 383px) {
  .blog .flex_col {
    gap: 50px 0;
    margin: 50px auto;
  }
}
.blog .flex_col1 {
  display: flex;
  flex-direction: column;
  width: 98.17%;
}
.blog .flex_row {
  display: flex;
  gap: 0 21px;
}
@media (max-width: 1199px) {
  .blog .flex_row {
    flex-direction: column;
    align-items: center;
    gap: 30px 21px;
  }
}
.blog .content_box1 {
  display: flex;
  flex-direction: column;
  width: 647px;
  min-width: 0;
  background: var(--src) center center/cover no-repeat;
}
@media (max-width: 1199px) {
  .blog .content_box1 {
    width: 100%;
    min-width: unset;
  }
}
.blog .foamFacialWashTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 304px 0 20px;
  font: 600 26px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .foamFacialWashTitle {
    margin: 150px 0 20px;
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .blog .foamFacialWashTitle {
    margin: 80px 0 20px;
  }
}
@media (max-width: 479px) {
  .blog .foamFacialWashTitle {
    font-size: 30px;
  }
}
@media (max-width: 383px) {
  .blog .foamFacialWashTitle {
    margin: 50px 0 20px;
  }
}
.blog .content_box {
  display: flex;
  flex-direction: column;
  margin: 74px 0 0;
  width: 569px;
  min-width: 0;
  background: var(--src) center center/cover no-repeat;
}
@media (max-width: 1199px) {
  .blog .content_box {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
.blog .indonesiaBeautyTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 289px auto 21px;
  font: 600 22px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .indonesiaBeautyTitle {
    margin: 150px auto 21px;
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .blog .indonesiaBeautyTitle {
    margin: 80px auto 21px;
  }
}
@media (max-width: 479px) {
  .blog .indonesiaBeautyTitle {
    font-size: 26px;
  }
}
@media (max-width: 383px) {
  .blog .indonesiaBeautyTitle {
    margin: 50px auto 21px;
  }
}
.blog .flex_row1 {
  display: flex;
  align-items: center;
  gap: 0 14px;
}
@media (max-width: 575px) {
  .blog .flex_row1 {
    flex-direction: column;
    gap: 30px 14px;
  }
}
.blog .flex_col2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px 0;
  width: 397px;
  min-width: 0;
}
@media (max-width: 575px) {
  .blog .flex_col2 {
    width: 100%;
    min-width: unset;
  }
}
.blog .facialWashImage {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog .loremIpsumTitle1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 32px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .loremIpsumTitle1 {
    font-size: 30px;
  }
}
@media (max-width: 479px) {
  .blog .loremIpsumTitle1 {
    font-size: 26px;
  }
}
.blog .flex_col3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px 0;
  width: 436px;
  min-width: 0;
}
@media (max-width: 575px) {
  .blog .flex_col3 {
    width: 100%;
    min-width: unset;
  }
}
.blog .additionalImage1 {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog .loremIpsumTitle2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 36px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .loremIpsumTitle2 {
    font-size: 32px;
  }
}
@media (max-width: 479px) {
  .blog .loremIpsumTitle2 {
    font-size: 30px;
  }
}
.blog .flex_col4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px 0;
  width: 376px;
  min-width: 0;
}
@media (max-width: 575px) {
  .blog .flex_col4 {
    width: 100%;
    min-width: unset;
  }
}
.blog .additionalImage2 {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.blog .loremIpsumTitle3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 32px/1.5 Poppins, Helvetica, Arial, serif;
  color: white;
  text-align: center;
}
@media (max-width: 991px) {
  .blog .loremIpsumTitle3 {
    font-size: 30px;
  }
}
@media (max-width: 479px) {
  .blog .loremIpsumTitle3 {
    font-size: 26px;
  }
}
.blog .flex_row2 {
  display: flex;
  gap: 0 11px;
  width: 99.76%;
}
@media (max-width: 1199px) {
  .blog .flex_row2 {
    flex-direction: column;
    align-items: center;
    gap: 30px 11px;
  }
}
.blog .footerImage {
  width: 564px;
  min-width: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .blog .footerImage {
    width: 100%;
    min-width: unset;
    max-width: 564px;
  }
}
.blog .flex_col5 {
  display: flex;
  flex-direction: column;
  gap: 95px 0;
  margin: 54.5px 0 19px;
  width: 682px;
  min-width: 0;
}
@media (max-width: 1199px) {
  .blog .flex_col5 {
    margin: 0;
    width: 100%;
    min-width: unset;
  }
}
@media (max-width: 575px) {
  .blog .flex_col5 {
    gap: 80px 0;
  }
}
@media (max-width: 383px) {
  .blog .flex_col5 {
    gap: 50px 0;
  }
}
.blog .knowMoreAboutUsTitle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font: 400 44px/1.35 Prata, Helvetica, Arial, serif;
  color: #6f8369;
  text-align: right;
}
@media (max-width: 991px) {
  .blog .knowMoreAboutUsTitle {
    font-size: 32px;
  }
}
@media (max-width: 479px) {
  .blog .knowMoreAboutUsTitle {
    font-size: 16px;
  }
}
.blog .contactSubtitle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 8.06% 0 auto;
  width: 418px;
  max-width: 85%;
  font: 300 20px/1.5 Poppins, Helvetica, Arial, serif;
  color: #393939;
  text-align: right;
}
@media (max-width: 1199px) {
  .blog .contactSubtitle {
    margin: 0 auto;
  }
}
@media (max-width: 991px) {
  .blog .contactSubtitle {
    font-size: 18px;
  }
}
@media (max-width: 479px) {
  .blog .contactSubtitle {
    font-size: 16px;
  }
}
