@charset "UTF-8";
/* Fonts */
@font-face {
  font-family: Main;
  src: url("./fonts/Helvetica.otf");
}
@font-face {
  font-family: DMSans;
  src: url("./fonts/DMSans-Regular.ttf");
}
/* No Select */
.noselect,
img,
* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
}

input,
textarea,
button,
select,
a,
svg,
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*::-moz-selection {
  background-color: #eb5f28;
  color: #fdfdfd;
  text-shadow: none;
}

*::selection {
  background-color: #eb5f28;
  color: #fdfdfd;
  text-shadow: none;
}

/* width */
::-webkit-scrollbar {
  width: 0;
  -webkit-user-select: auto;
  user-select: auto;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fdfdfd;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to top, #eb5f28, #eb9472);
}

/* Loading Page */
.loadingPage {
  position: fixed;
  background-color: #fdfdfd;
  width: 100vw;
  height: 100vh;
  z-index: 9999999999;
  pointer-events: none;
}

.cursorFollowerContainer {
  position: fixed;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 200;
}

.cursorFollower {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #eb5f28;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #eb5f28;
}

.cursorText {
  position: absolute;
  transform: translateY(-3rem);
  color: #fdfdfd;
  background-color: #eb5f28;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  font-size: 1.6rem;
  border-radius: 100rem;
}

.cursorSVGContainer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursorSVG {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
}

.cursorSVGPath {
  fill: #eb5f28;
}

.cursorSVGSlide {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateZ(90deg);
}

/* Defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #fdfdfd;
  font-size: 10px;
  color: #878787;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /* cursor: none; */
}

body {
  background-color: #fdfdfd;
  box-sizing: border-box;
  z-index: 100;
  font-size: 10px;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  font-family: DMSans;
  background-color: #eb9472;
}

.canvasOverlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* z-index: 100000000; */
  z-index: 0;
  pointer-events: none;
}

.webgl {
  position: fixed;
  outline: none;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  /* z-index: 100000000; */
  pointer-events: none;
}

main {
  background-color: #fdfdfd;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 5rem 1rem rgba(0, 0, 0, 0.1647058824);
  border-radius: 0 0 5rem 5rem;
}

/* Responsive */
/* Max-Width 1080px */
@media screen and (max-width: 1800px) {
  html {
    font-size: 8px;
  }
  /* Responsive Common */
}
@media screen and (max-width: 1800px) and (orientation: Portrait) {
  /* Portrait */
}
@media screen and (max-width: 1800px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 1550px) {
  html {
    font-size: 7px;
  }
  /* Responsive Common */
}
@media screen and (max-width: 1550px) and (orientation: Portrait) {
  /* Portrait */
}
@media screen and (max-width: 1550px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 1350px) {
  html {
    font-size: 6px;
  }
  /* Responsive Common */
}
@media screen and (max-width: 1350px) and (orientation: Portrait) {
  /* Portrait */
}
@media screen and (max-width: 1350px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 1150px) {
  html {
    font-size: 5px;
  }
  /* Responsive Common */
}
@media screen and (max-width: 1150px) and (orientation: Portrait) {
  /* Portrait */
}
@media screen and (max-width: 1150px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 950px) {
  html {
    font-size: 4px;
  }
  /* Responsive Common */
}
@media screen and (max-width: 950px) and (orientation: Portrait) {
  /* Portrait */
}
@media screen and (max-width: 950px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 900px) {
  /* Responsive Common */
}
@media screen and (max-width: 900px) and (orientation: Portrait) {
  /* Portrait */
  .productSection {
    flex-direction: column;
  }
  .productChoice {
    gap: 10rem !important;
    width: calc(100vw - 20rem) !important;
    height: 35vh !important;
  }
  .productImage {
    height: auto !important;
    width: calc(100% + 10rem) !important;
  }
  .versusPointButton {
    width: 12rem !important;
    height: 12rem !important;
  }
  .versusPointOuter {
    width: 16rem !important;
    height: 16rem !important;
  }
  .versusPointInner {
    width: 10rem !important;
    height: 10rem !important;
  }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
  /* Landscape */
}
@media screen and (max-width: 900px) {
  ::-webkit-scrollbar {
    width: 0px;
  }
}
@media screen and (max-width: 900px) {
  .cursorFollowerContainer {
    opacity: 0;
  }
}
@media screen and (max-width: 900px) {
  .textAnimationClass {
    padding-top: 5rem;
    margin-bottom: 5rem;
  }
}
@media screen and (max-width: 900px) {
  .navSection {
    font-size: 6px !important;
  }
}
@media screen and (max-width: 900px) {
  nav {
    height: auto !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}
@media screen and (max-width: 900px) {
  .navToggle {
    align-items: flex-start !important;
  }
}
@media screen and (max-width: 900px) {
  .navChoice {
    padding-inline: 1.5em !important;
    padding-block: 1.5em !important;
  }
}
@media screen and (max-width: 900px) {
  .modalClose {
    position: fixed;
    top: 2.5rem;
    right: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7.2em !important;
    height: 7.2em !important;
    border-radius: 50%;
    box-shadow: 1px 1px 5px 0px #878787;
    background-image: linear-gradient(to top left, #eb5f28, #eb9472);
    pointer-events: auto;
    transform: scale(0);
    cursor: pointer;
  }
}
@media screen and (max-width: 900px) {
  .modalCloseInner {
    position: absolute;
    width: 6.2em !important;
    height: 6.2em !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom right, #eb5f28, #eb9472);
  }
}
@media screen and (max-width: 900px) {
  .closeSVG {
    transform: scale(0.6) !important;
  }
}
@media screen and (max-width: 700px) {
  /* Responsive Common */
}
@media screen and (max-width: 700px) and (orientation: Portrait) {
  /* Portrait */
  .scrollCTAContainer {
    position: absolute;
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    bottom: 30rem !important;
    right: 10rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .versusOverlay {
    flex-direction: column !important;
    gap: 30rem !important;
  }
  .versusPointContainer {
    position: relative !important;
  }
  #versusPoint1 {
    transform: none !important;
  }
  #versusPoint2 {
    transform: none !important;
  }
  #versusPoint3 {
    transform: none !important;
  }
  .historyBanner1 {
    justify-content: center !important;
  }
  .historyTextContainer {
    padding: 1rem;
  }
  .history2Extra {
    transform: translateX(20rem) translateY(-20%) !important;
  }
  .historySectionExtraOrangeBorder {
    opacity: 0 !important;
  }
  .historySectionExtraImageContainer1 {
    opacity: 0 !important;
  }
  .historySectionExtraImageContainer2 {
    margin-right: 5rem;
  }
  .history2 {
    margin-top: 15rem !important;
  }
  .history3 {
    justify-content: flex-end !important;
    margin-top: 15rem !important;
    margin-inline: 0rem !important;
    padding-left: 5rem !important;
    padding-right: 15rem !important;
  }
  .historySectionExtraOrange {
    width: 15rem !important;
    height: 15rem !important;
  }
  .purchaseOverlayContainer {
    opacity: 0 !important;
  }
  .purchaseSection {
    padding-top: 12.5rem !important;
    padding-bottom: 0 !important;
  }
  .purchaseText {
    font-size: 4rem !important;
    gap: 0rem !important;
  }
  .purchaseDrugStores {
    width: 100% !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    padding-inline: 2.5rem !important;
  }
  .purchaseSupermarkets {
    width: 100% !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    padding-inline: 2.5rem !important;
  }
  .purchaseDSLogo {
    height: 4rem !important;
  }
  .purchaseSMLogo {
    height: 4rem !important;
  }
  .purchaseOLLogo {
    height: 4rem !important;
  }
  .photoSection {
    flex-direction: column-reverse !important;
  }
  .photoSectionText {
    padding-inline: 10rem !important;
    width: 100% !important;
  }
  .photoCardSection {
    width: 100% !important;
  }
  .photoCard {
    width: 63rem !important;
    height: 77rem !important;
  }
  .photoFrame {
    width: 57.4rem !important;
    height: 57.4rem !important;
  }
  .followLinkContainer {
    font-size: 4rem !important;
  }
  .footerContent {
    max-width: 100% !important;
  }
  .footerBottomText {
    font-size: 28rem !important;
    bottom: 12rem !important;
  }
  .footerTMText {
    font-size: 2.5rem !important;
  }
  .footerLegalLinks {
    font-size: 2rem !important;
  }
  .footerPlugText {
    font-size: 2rem !important;
  }
  .footerPlug {
    width: 20% !important;
  }
  .modalContentApproval {
    padding-top: 5rem !important;
    flex-direction: column-reverse !important;
  }
  .modalContentApprovalTextContainer {
    width: 100% !important;
  }
  .modalContentApprovalImageContainer {
    width: calc(100% + 5rem) !important;
    transform: translateX(2.5rem) !important;
  }
  .modalContentCharts {
    align-items: center !important;
    padding-block: 5rem !important;
    flex-direction: column !important;
    gap: 5rem !important;
  }
  .modalContentChartsCard {
    width: 100% !important;
  }
  .modalContentApplyList {
    flex-direction: column !important;
  }
  .modalContentApplyListLeft,
  .modalContentApplyListRight {
    width: 100% !important;
  }
  .modalContentFeatures {
    width: 100% !important;
    position: relative !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-block: 2.5rem !important;
    gap: 2.5rem !important;
  }
  .modalContentExtra {
    padding-top: 2.5rem !important;
  }
}
@media screen and (max-width: 700px) and (orientation: landscape) {
  /* Landscape */
}
.modalSection {
  position: fixed;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  justify-content: center;
  align-items: flex-start;
  padding-left: 10rem;
  padding-right: 9rem;
  padding-top: 11.5rem;
  padding-bottom: 10rem;
  overflow-x: hidden;
  display: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modalClose {
  position: fixed;
  top: 2.5rem;
  right: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  box-shadow: 1px 1px 5px 0px #878787;
  background-image: linear-gradient(to top left, #eb5f28, #eb9472);
  pointer-events: auto;
  transform: scale(0);
  cursor: pointer;
}

.modalCloseInner {
  position: absolute;
  width: 9em;
  height: 9em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom right, #eb5f28, #eb9472);
}

.closeSVG {
  position: absolute;
}

.closeSVGPath {
  fill: #fdfdfd;
}

.modalPopup {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 5rem;
  box-shadow: 0px 0px 10px 0px #878787;
  background-color: #fefefe;
  overscroll-behavior: contain;
}

.modalContent {
  z-index: 1;
  width: 100%;
  min-height: calc(100vh - 21.5rem);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 5rem;
  pointer-events: none;
  position: relative;
}

.modalContentHeader {
  position: relative;
  width: min(75rem, 100%);
  text-align: left;
  font-size: 13rem;
  line-height: 13rem;
  border-bottom: 1px solid #878787;
  padding-bottom: 2rem;
}

.modalContentDescription {
  width: min(75rem, 100%);
  text-align: left;
  font-size: 2.5rem;
  line-height: 5rem;
  margin-top: 2.5rem;
}

.modalContentSizes {
  width: 100%;
  text-align: right;
  font-size: 2.2rem;
  line-height: 2.5rem;
  margin-top: 2.5rem;
}

.modalContentFeatures {
  width: 35%;
  right: 0;
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
  padding-top: 7.5rem;
  padding-right: 5rem;
  gap: 10rem;
  font-size: 2.2rem;
  line-height: 2.5rem;
}

.modalContentExtra {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10rem;
  text-align: center;
  width: 100%;
  font-size: 2.5rem;
  line-height: 5rem;
  padding-top: 20rem;
  z-index: 1;
}

.modalContentExtraDiv {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: 100%;
}

.modalContentExtraOverlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 10rem);
  height: 200%;
  z-index: 1;
  overflow: hidden;
}

#modalContentExtraOverlayFlip {
  transform: scaleX(-1);
}

.modalContentExtraPhotoDiv {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: auto;
}

#modalContentPhotoLavender {
  position: absolute;
  left: -1rem;
  width: 12%;
  transform: rotateZ(45deg);
  margin-bottom: 15%;
}

#modalContentPhotoChamomile {
  position: absolute;
  left: -1rem;
  width: 14%;
  transform: rotateZ(45deg);
  margin-top: 15%;
}

#modalContentPhotoCalendula {
  position: absolute;
  right: -1rem;
  width: 12%;
  transform: scaleX(-1) scaleY(1) rotateZ(45deg);
  margin-bottom: 15%;
}

#modalContentPhotoRosemary {
  position: absolute;
  right: -5rem;
  width: 20%;
  transform: scaleX(-1) scaleY(1) rotateZ(-60deg);
  margin-top: 15%;
}

.modalContentApproval {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  width: 100%;
  font-size: 2.5rem;
  line-height: 5rem;
  padding-top: 15rem;
}

.modalContentApprovalTextContainer {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 5rem;
}

.modalContentApprovalText1 {
  width: 100%;
  text-align: left;
}

.modalContentApprovalText2 {
  width: 100%;
  text-align: right;
}

.modalContentApprovalImageContainer {
  width: calc(50% + 5rem);
  height: 50rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  transform: translateX(5rem);
  border-radius: 100rem 0 0 100rem;
  box-shadow: inset 10px 10px 10px 0 red;
}

.modalContentApprovalImage {
  width: 100%;
}

.modalContentCharts {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-block: 10rem;
}

.modalContentChartsContainer {
  position: relative;
  background-color: rgba(235, 95, 40, 0.3137254902);
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  perspective: 1000px;
}

.modalContentChartsFill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3529411765);
}

.modalContentChartsCenter {
  position: absolute;
  z-index: 1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: #fdfdfd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  color: #eb5f28;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3529411765);
}

.modalContentChartsCard {
  width: 33.3333333333%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 2.5rem;
}

.modalContentChartsText {
  width: 100%;
  padding-inline: 10rem;
  text-align: center;
  font-size: 2.2rem;
}

.modalContentApply {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.modalContentApplyHeader {
  font-size: 7rem;
  font-family: Main;
  color: #eb5f28;
  margin-bottom: 2.5rem;
}

.modalContentApplyList {
  position: relative;
  width: 100%;
  font-size: 2.5rem;
  line-height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modalContentApplyListLeft,
.modalContentApplyListRight {
  position: relative;
  width: 50%;
}

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "•"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #eb5f28; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 2rem; /* Also needed for space (tweak if needed) */
  margin-left: 0.5rem; /* Also needed for space (tweak if needed) */
}

.orbitCanvas {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 56.0165975104vw;
}

.scrollCTAContainer {
  position: absolute;
  height: 15rem;
  width: 15rem;
  border-radius: 50%;
  bottom: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollCTA {
  position: absolute;
  height: 15rem;
  width: 15rem;
  border-radius: 50%;
  background-image: linear-gradient(
    to top,
    rgba(135, 135, 135, 0),
    90%,
    rgba(135, 135, 135, 0.062745098)
  );
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2274509804);
  color: #eb5f28;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 1rem;
  line-height: 2rem;
  padding-left: 1rem;
}

.scrollCTAText1,
.scrollCTAText2 {
  position: absolute;
}

.scrollCTAArrow {
  position: absolute;
  height: 25rem;
  width: 1px;
  background-color: #eb5f28;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.scrollCTACircle {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #eb5f28;
}

.navSection {
  position: fixed;
  z-index: 100;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  top: 0;
  padding-block: 2rem;
  padding-left: 10rem;
  pointer-events: none;
  font-size: 10px;
}

.navToggle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(to right, #eb5f28, #eb9472);
  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.1254901961);
  border-radius: 3.65em;
  overflow: hidden;
  cursor: pointer;
  padding: 0.4em;
  pointer-events: auto;
}

.navLogo {
  width: 6.5em;
  height: 6.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfdfd;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1254901961);
  pointer-events: auto;
}

.logoImage {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: scale(0.55);
}

.logoBar {
  width: 2.5em;
  height: 0.5em;
  border-radius: 0.5em;
  background-color: #eb5f28;
  margin-block: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: left;
}

#logoBar1 {
  width: 1em;
  transform: translateX(0.45em);
}

#logoBar2 {
  width: 1.5em;
}

#logoBar3 {
  width: 2.3em;
  transform: translateX(-0.3em);
}

#logoBar4 {
  width: 3.2em;
  transform: translateX(-0.3em);
}

#logoBar5 {
  width: 4.6em;
  transform: translateX(-0.2em);
}

#logoBar6 {
  width: 5.6em;
}

#logoBar7 {
  width: 6.1em;
}

#logoBar8 {
  width: 6.1em;
}

#logoBar9 {
  width: 5.9em;
  transform: translateX(0.06em);
}

#logoBar10 {
  width: 5.4em;
  transform: translateX(0.06em);
}

#logoBar11 {
  width: 4em;
  transform: translateX(0.06em);
}

#logoBar12 {
  width: 1.9em;
  transform: translateX(0.06em);
}

.navName {
  height: 2.5em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #fdfdfd;
  font-size: 2.5em;
  font-family: Main;
}

.navNameText {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding-left: 0.5em;
  padding-right: 0.25em;
  text-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1254901961);
}

nav {
  height: 6.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fdfdfd;
  font-size: 1.5em;
  overflow: hidden;
}

.navChoice {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1em;
  padding-block: 3em;
  position: relative;
  letter-spacing: 0.15em;
}

.navChoiceDot {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background-color: #fdfdfd;
  transform: translateY(1.4em);
}

.heroSection {
  position: relative;
  z-index: 3;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.heroHeaderText {
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #eb5f28;
  font-size: 23rem;
  padding-left: 10rem;
  font-weight: 1000;
  letter-spacing: 0.7rem;
}

#heroHeaderText1 {
  transform: translateY(8rem);
}

#heroHeaderText3 {
  transform: translateY(-5rem);
}

.heroSubHeaderText {
  position: absolute;
  bottom: 7.5rem;
  right: 10rem;
  font-size: 4rem;
  text-align: right;
}

.productSection {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 10rem;
  padding-bottom: 10rem;
  padding-top: 11.25rem;
  z-index: 2;
  overflow: hidden;
  perspective: 1000px;
}

.productChoice {
  position: relative;
  width: calc((100vw - 20rem - 40rem) / 2);
  height: calc(100vh - 21.25rem);
  border-radius: 5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 2.5rem;
  overflow: hidden;
  perspective: 1000px;
}

.productChoiceFilter {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3137254902),
    1%,
    rgba(0, 0, 0, 0)
  );
  top: 0;
}

.productImage {
  position: absolute;
  z-index: -2;
  height: calc(100% + 10rem);
  top: 0;
}

#skincareChoice {
  box-shadow: 1px -1px 3px 0px rgba(0, 0, 0, 0.1647058824);
}

#dryskinChoice {
  box-shadow: -1px -1px 3px 0px rgba(0, 0, 0, 0.1647058824);
}

.productName {
  font-size: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  color: #fdfdfd;
  text-shadow: 0 0 4px #000000;
}

.productQuestion {
  font-size: 4rem;
  font-weight: 900;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: #fdfdfd;
  text-shadow: 0 0 4px #000000;
}

.versusSection {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding-inline: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.versusHeader {
  position: relative;
  width: 100%;
  text-align: left;
  color: #eb5f28;
  opacity: 0;
  font-size: 23rem;
  line-height: 20rem;
}

.ofText {
  margin-right: 2.6rem;
}

.versusOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.versusPointContainer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 100;
}

.versusPointButton {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  box-shadow: -0.2rem 0.2rem 0.5rem 0.2rem rgba(0, 0, 0, 0.1647058824);
  background-image: linear-gradient(to bottom left, #fdfdfd, 90%, #878787);
  cursor: pointer;
  pointer-events: auto;
}

.versusPointOuter {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 1px solid #eb5f28;
}

.versusPointInner {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-image: linear-gradient(to top right, #fdfdfd, 90%, #878787);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eb5f28;
}

.versusPointBody {
  font-size: 2.5rem;
  max-width: 50rem;
  padding: 2.5rem;
  box-shadow: -0.2rem 0.2rem 0.5rem 0.2rem rgba(0, 0, 0, 0.1647058824);
  border-radius: 2.5rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6274509804);
  margin-inline: 2.5rem;
  position: relative;
  z-index: 1;
  color: #878787;
  text-shadow: 0 0 10px #fdfdfd;
}

#versusPoint1 {
  transform: translateX(40rem) translateY(-17.5rem);
}

#versusPoint2 {
  transform: translateX(-61rem) translateY(-10rem);
  flex-direction: row-reverse;
}

#versusPoint3 {
  transform: translateX(30rem) translateY(35rem);
}

#versusBody1 {
  transform-origin: left;
}

#versusBody2 {
  transform-origin: right;
}

#versusBody3 {
  transform-origin: left;
}

.versusImageContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.versusImageParallaxDiv {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.versusImageDiv {
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.versusImageW {
  height: calc(100% + 20px);
}

.versusImageH {
  width: calc(100% + 20px);
}

#versusImageDiv1 {
  width: 45rem;
  height: 45rem;
  transform: translateX(-35vw) translateY(20vh);
}

#versusImageDiv2 {
  width: 70rem;
  height: 70rem;
  transform: translateX(40vw) translateY(20vh);
}

#versusImageDiv3 {
  width: 25rem;
  height: 25rem;
  transform: translateX(-25vw) translateY(-30vh);
}

#versusImageDiv4 {
  width: 32rem;
  height: 32rem;
  transform: translateX(20vw) translateY(-42.5vh);
}

.historySection {
  position: relative;
  z-index: 2;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding-top: 11.25rem;
  padding-bottom: 10rem;
}

.historyBanner1 {
  width: 45vw;
  height: 50rem;
  margin-right: 10rem;
  border-radius: 0 100rem 100rem 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.historyBannerPhoto {
  height: calc(100% + 10rem);
}

.history1 {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
}

.history2 {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  margin-top: 10rem;
  margin-inline: 10rem;
}

.history3 {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
  margin-top: 10rem;
  margin-inline: 10rem;
  padding-left: 15vw;
}

.history4 {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1rem;
}

.historyTextContainer {
  width: max(40vw, 40%);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.historyYear {
  font-size: 4em;
}

.historyTitle {
  font-size: 5em;
  font-family: Main;
  color: #eb5f28;
}

.historyBody {
  font-size: 2.5rem;
  padding-top: 1em;
  font-size: 2.5em;
}

.historySectionOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: -1;
}

.history2Extra {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.historySectionExtraOrangeBorder {
  position: absolute;
  width: 100rem;
  height: 100rem;
  border-radius: 50%;
  border: 1px solid #eb5f28;
  opacity: 0.5;
  transform: translateX(10rem) translateY(5rem);
}

.historySectionExtraImageContainer1 {
  position: absolute;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: translateX(-30vw) translateY(-70%);
  z-index: 2;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2274509804);
}

.historySectionExtraImageContainer2 {
  position: absolute;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: translateX(10rem) translateY(-60%);
  z-index: 0;
}

.historySectionExtraImageContainer3 {
  position: absolute;
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: translateX(calc(-100vw + 45rem - 15rem)) translateY(10rem);
  z-index: 1;
}

.historySectionExtraImage {
  height: 100%;
}

.historySectionExtraBlur {
  position: absolute;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: inset 1px -1px 1px 0px rgba(0, 0, 0, 0.1647058824);
  transform: translateX(-20rem) translateY(-10rem);
  background-image: linear-gradient(
    to top right,
    rgba(135, 135, 135, 0),
    90%,
    rgba(135, 135, 135, 0.3137254902)
  );
  z-index: 1;
}

.historySectionExtraOrange {
  position: absolute;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background-color: #eb5f28;
  transform: translateX(-20rem) translateY(0rem);
}

.historySectionExtraOrange2 {
  position: absolute;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: #eb5f28;
  transform: translateX(calc(-100vw + 10rem + 20rem)) translateY(-25rem);
  z-index: 2;
  box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.2274509804);
}

.historySectionExtraOrangeBorder2 {
  position: absolute;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  border: 1px solid #eb5f28;
  opacity: 0.5;
  transform: translateX(calc(-100vw + 40rem)) translateY(15rem);
}

.historySectionExtraOrangeBorderBanner {
  position: absolute;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  border: 1px solid #eb5f28;
  opacity: 0.5;
  transform: translateX(calc(-30rem + 45vw - 25rem));
  z-index: -2;
}

.historySectionExtraBlurBanner {
  position: absolute;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.1647058824);
  transform: translateX(calc(-18rem + 45vw - 25rem + 5rem)) translateY(20rem);
  background-image: linear-gradient(
    to top left,
    rgba(135, 135, 135, 0),
    90%,
    rgba(135, 135, 135, 0.3137254902)
  );
  z-index: 1;
}

.historySectionExtraOrangeBanner {
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #eb5f28;
  transform: translateX(calc(-3rem + 45vw - 25rem + 20rem)) translateY(30rem);
  z-index: -3;
}

.hpbbanner {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  z-index: 2;
}

.hpobanner {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  z-index: -2;
}

.heblur {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  z-index: 2;
}

.heo1 {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  z-index: -2;
}

.heo2 {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  z-index: 2;
}

.purchaseSection {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 5rem;
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  z-index: 2;
}

.purchaseText {
  position: relative;
  font-size: 5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2.5rem;
}

.purchaseTextLine {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.purchaseDrugStores {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.purchaseSupermarkets {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
  padding-bottom: 5rem;
}

.purchaseDSLogo {
  height: 5rem;
}

.purchaseSMLogo {
  height: 5rem;
}

.purchaseOLLogo {
  height: 5rem;
}

.purchaseLinkButton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 2rem;
  padding-inline: 4rem;
  border-radius: 100rem;
  background-color: #fdfdfd;
  box-shadow: inset 1px -1px 5px 0 rgba(0, 0, 0, 0.1019607843),
    -1px 1px 3px 0 rgba(0, 0, 0, 0.2274509804);
}

.purchaseLogo {
  cursor: pointer;
}

.purchaseOverlayContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  perspective: 1000px;
  z-index: -1;
}

#photoCardP1 {
  transform: rotateY(5deg) rotateZ(10deg) translateX(-28rem) translateY(10rem)
    translateZ(-40rem);
  background-image: linear-gradient(to right, #eb5f28, #eb9472);
}

#photoCardP2 {
  transform: rotateY(-5deg) rotateZ(-10deg) translateX(30rem) translateY(-30rem)
    translateZ(-35rem);
  background-image: linear-gradient(to left, #eb5f28, #eb9472);
}

.photoCardP {
  width: 49rem;
  height: 63rem;
  border-radius: 2.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 2.8rem;
  pointer-events: none;
  gap: 3rem;
  z-index: -1;
}

.photoFrameP {
  position: relative;
  width: 43.4rem;
  height: 43.4rem;
  border-radius: 1.4rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoP {
  width: 110%;
  pointer-events: none;
}

.photoCaptionP {
  color: #fdfdfd;
  font-size: 2rem;
  pointer-events: auto;
}

.photoSection {
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photoCardSection {
  position: relative;
  width: 60%;
  perspective: 100rem;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}

.photoCard {
  position: absolute;
  width: 49rem;
  height: 63rem;
  border-radius: 2.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(to left, #eb5f28, #eb9472);
  padding: 2.8rem;
  pointer-events: none;
  gap: 3rem;
}

.photoFrame {
  position: relative;
  width: 43.4rem;
  height: 43.4rem;
  border-radius: 1.4rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo {
  width: 110%;
  pointer-events: none;
}

.photoCaption {
  color: #fdfdfd;
  font-size: 2rem;
  pointer-events: auto;
}

.photoSectionText {
  position: relative;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 10rem;
  font-size: 7.5rem;
  z-index: 2;
  padding-top: 6rem;
  padding-bottom: 10rem;
  flex-direction: column;
  gap: 10rem;
}

.followLinkDiv {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  white-space: nowrap;
}

.followLinkOuter {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  border-radius: 100rem;
  margin-top: 2rem;
  box-shadow: inset 1px -1px 5px 0 rgba(0, 0, 0, 0.1019607843),
    -1px 1px 3px 0 rgba(0, 0, 0, 0.2274509804);
}

.followLinkContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  padding-block: 0.5rem;
  padding-left: 2.5rem;
  padding-right: 0.5rem;
  color: #eb5f28;
  font-size: 2.5rem;
  cursor: pointer;
  border-radius: 100rem;
  background-color: #fdfdfd;
}

.followLinkArrow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100rem;
  box-shadow: inset -1px 1px 5px 0 rgba(0, 0, 0, 0.0392156863);
  overflow: hidden;
  background-image: linear-gradient(to bottom left, #eb5f28, 30%, #eb9472);
}

.linkIconSVG {
  position: absolute;
  transform: scale(0.5);
  z-index: 0;
}

.linkArrowSVG {
  transform: scale(0.5);
  z-index: 0;
}

.linkArrowPath {
  fill: #fdfdfd;
}

.blankSection {
  height: min(50vh, 60rem);
  pointer-events: none;
}

footer {
  position: fixed;
  bottom: 0;
  z-index: 0;
  width: 100vw;
  height: min(50vh, 60rem);
  background-image: linear-gradient(to top, #eb5f28, 70%, #eb9472);
  pointer-events: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.footerContent {
  max-width: 50vw;
  padding-inline: 10rem;
  color: #fdfdfd;
  margin-top: 5rem;
}

.footerTMText {
  font-size: 1.6rem;
}

.footerLegalLinksContainer {
  margin-block: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

.footerLegalLinks {
  font-size: 1.4rem;
  text-decoration: underline;
  color: #fdfdfd;
  cursor: pointer;
}

.footerBottomText {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 50rem;
  line-height: 0;
  font-family: Main;
  color: #fdfdfd;
  white-space: nowrap;
  bottom: 5rem;
  pointer-events: none;
}

.mainFont {
  font-family: Main;
  color: #eb5f28;
  line-height: 100%;
}

.mainFontWhite {
  font-family: Main;
  color: #fdfdfd;
  line-height: 100%;
}

.mainFontGrey {
  font-family: Main;
  color: #878787;
  line-height: 100%;
}

.orangeFont {
  color: #eb5f28;
}

a {
  text-decoration: none;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.textAnimationClass {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 1rem;
  padding-bottom: 1rem;
}

.textAnimationClassNav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.textAnimationClassContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footerPlug {
  position: relative;
  width: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fdfdfd;
  margin-top: 5rem;
  cursor: pointer;
}

.footerPlugText {
  font-size: 1.2rem;
}

#logoSVG {
  width: 1.8rem;
  height: 1.8rem;
}

.logoSVGPath {
  stroke: #fdfdfd;
  stroke-width: 2px;
} /*# sourceMappingURL=style.css.map */