@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html, body {
  margin: 0px;
  min-height: 100%;
}
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

@font-face {
    font-family: "KNMaiyuan-Regular";
    src: url("./KNMaiyuan-Regular.ttf") format("woff2"),
         url("./KNMaiyuan-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Vividly-Regular";
    src: url("./Vividly-Regular.otf") format("woff2"),
         url("./Vividly-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Dreamy Notes Script";
    src: url("./Dreamy\ Notes\ Script.otf") format("woff2"),
         url("./Dreamy\ Notes\ Script.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "Dreamy Notes Script-Regular";
  src: local("Dreamy Notes Script-Regular");
}
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
@font-face {
  font-family: "Single Day-Regular";
  src: local("Single Day-Regular");
}
@font-face {
  font-family: "KN Maiyuan-Regular";
  src: local("KN Maiyuan-Regular");
}

.kerastase {
  background-color: #fff5fa;
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  min-height: 2586.9px;
  position: relative;
}

.kerastase .vector {
  position: absolute;
  top: 0;
  left: 267px;
  width: 123px;
  height: 204px;
}
.kerastase .ellipse {
  position: absolute;
  top: 1317px;
  left: calc(50.00% - 41px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}
.kerastase .div {
  position: absolute;
  top: 574px;
  left: calc(50.00% - 231px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}
.kerastase .ellipse-2 {
  position: absolute;
  top: -68px;
  left: calc(50.00% - 137px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}
.kerastase .img {
  position: absolute;
  top: 0;
  left: 267px;
  width: 123px;
  height: 195px;
}
.kerastase .vector-2 {
  position: absolute;
  top: 592px;
  left: 292px;
  width: 98px;
  height: 209px;
}
.kerastase .vector-3 {
  position: absolute;
  top: 892px;
  left: 0;
  width: 99px;
  height: 209px;
}
.kerastase .vector-4 {
  position: absolute;
  top: 888px;
  left: 0;
  width: 101px;
  height: 209px;
}
.kerastase .vector-5 {
  position: absolute;
  top: 1354px;
  left: 0;
  width: 56px;
  height: 188px;
}
.kerastase .vector-6 {
  position: absolute;
  top: 1346px;
  left: 0;
  width: 58px;
  height: 195px;
}
.kerastase .vector-7 {
  position: absolute;
  top: 1525px;
  left: 323px;
  width: 67px;
  height: 209px;
}
.kerastase .vector-8 {
  position: absolute;
  top: 2362px;
  left: 316px;
  width: 74px;
  height: 208px;
}
.kerastase .vector-9 {
  position: absolute;
  top: 2381px;
  left: 319px;
  width: 71px;
  height: 194px;
}
.kerastase .vector-10 {
  position: absolute;
  top: 1533px;
  left: 325px;
  width: 65px;
  height: 209px;
}
.kerastase .vector-11 {
  position: absolute;
  top: 605px;
  left: 293px;
  width: 97px;
  height: 206px;
}
.kerastase .strong-hair-soft {
  top: 109px;
  left: 42px;
  width: 240px;
  font-family: "Dreamy Notes Script";
  font-size: 28.3px;
  line-height: 41.7px;
  position: absolute;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}
.kerastase .text-wrapper {
  position: absolute;
  top: 273px;
  left: 42px;
  width: 172px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 18.9px;
  letter-spacing: 0;
  line-height: 41.7px;
  white-space: nowrap;
}
.kerastase .ellipse-3 {
  position: absolute;
  top: 289px;
  left: 286px;
  width: 26px;
  height: 26px;
  background-color: #ffe8f3;
  border-radius: 12.97px;
}
.kerastase .curve-text {
  position: absolute;
  top: 263px;
  left: 262px;
  width: 166px;
  height: 77px;
}
.kerastase .text-wrapper-2 {
  top: 1px;
  left: 37px;
  transform: rotate(4.3deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-3 {
  top: 1px;
  left: 42px;
  transform: rotate(12.43deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-4 {
  top: 2px;
  left: 47px;
  transform: rotate(20.38deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-5 {
  top: 5px;
  left: 51px;
  transform: rotate(29.91deg);
  position: absolute;
  width: 6px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-6 {
  top: 7px;
  left: 56px;
  transform: rotate(38.45deg);
  position: absolute;
  width: 3px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-7 {
  top: 10px;
  left: 59px;
  transform: rotate(45.71deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-8 {
  top: 15px;
  left: 62px;
  transform: rotate(55.19deg);
  position: absolute;
  width: 6px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-9 {
  top: 19px;
  left: 66px;
  width: 4px;
  transform: rotate(63.63deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-10 {
  top: 24px;
  left: 67px;
  transform: rotate(71.24deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-11 {
  top: 29px;
  left: 68px;
  transform: rotate(79.81deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-12 {
  top: 33px;
  left: 70px;
  transform: rotate(86.8deg);
  position: absolute;
  width: 3px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-13 {
  top: 38px;
  left: 69px;
  transform: rotate(93.39deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-14 {
  top: 42px;
  left: 69px;
  width: 4px;
  transform: rotate(100.08deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-15 {
  top: 46px;
  left: 67px;
  transform: rotate(107.56deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-16 {
  top: 51px;
  left: 65px;
  transform: rotate(116.02deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-17 {
  top: 56px;
  left: 63px;
  transform: rotate(123.83deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-18 {
  top: 59px;
  left: 60px;
  transform: rotate(131.38deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-19 {
  top: 62px;
  left: 58px;
  width: 4px;
  transform: rotate(138.44deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-20 {
  top: 65px;
  left: 53px;
  transform: rotate(146.11deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-21 {
  top: 67px;
  left: 49px;
  transform: rotate(154.46deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-22 {
  top: 69px;
  left: 45px;
  transform: rotate(162.64deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-23 {
  position: absolute;
  top: 70px;
  left: 40px;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  transform: rotate(171.1deg);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-24 {
  top: 71px;
  left: 36px;
  width: 4px;
  transform: rotate(179.16deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-25 {
  top: 70px;
  left: 31px;
  transform: rotate(-172.85deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-26 {
  position: absolute;
  top: 70px;
  left: 26px;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  transform: rotate(-164.43deg);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-27 {
  top: 68px;
  left: 22px;
  width: 3px;
  transform: rotate(-156.75deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-28 {
  top: 66px;
  left: 18px;
  width: 5px;
  transform: rotate(-148.97deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-29 {
  top: 63px;
  left: 14px;
  transform: rotate(-140.34deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-30 {
  top: 60px;
  left: 11px;
  width: 4px;
  transform: rotate(-132.98deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-31 {
  top: 56px;
  left: 7px;
  transform: rotate(-125.44deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-32 {
  top: 52px;
  left: 5px;
  transform: rotate(-116.97deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-33 {
  top: 47px;
  left: 3px;
  transform: rotate(-108.74deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-34 {
  top: 42px;
  left: 2px;
  transform: rotate(-100.93deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-35 {
  top: 38px;
  left: 1px;
  transform: rotate(-94.37deg);
  position: absolute;
  width: 3px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-36 {
  position: absolute;
  top: 34px;
  left: 1px;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  transform: rotate(-87.76deg);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-37 {
  top: 29px;
  left: 1px;
  transform: rotate(-79.99deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-38 {
  top: 25px;
  left: 3px;
  width: 3px;
  height: 6px;
  display: flex;
  align-items: center;
  transform: rotate(-72.87deg);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 10.8px;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}
.kerastase .text-wrapper-39 {
  top: 21px;
  left: 4px;
  width: 4px;
  transform: rotate(-66.82deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-40 {
  top: 17px;
  left: 6px;
  transform: rotate(-59.67deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-41 {
  top: 13px;
  left: 9px;
  width: 4px;
  transform: rotate(-51.88deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-42 {
  top: 10px;
  left: 12px;
  transform: rotate(-44.35deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-43 {
  top: 7px;
  left: 15px;
  transform: rotate(-36.7deg);
  position: absolute;
  width: 4px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-44 {
  top: 4px;
  left: 19px;
  transform: rotate(-28.49deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-45 {
  position: absolute;
  top: 2px;
  left: 24px;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  transform: rotate(-19.89deg);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-46 {
  top: 1px;
  left: 28px;
  width: 4px;
  transform: rotate(-11.56deg);
  position: absolute;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .text-wrapper-47 {
  top: 1px;
  left: 33px;
  transform: rotate(-3.21deg);
  position: absolute;
  width: 5px;
  height: 6px;
  display: flex;
  align-items: center;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}
.kerastase .vector-12 {
  position: absolute;
  top: 330px;
  left: 22px;
  width: 257px;
  height: 204px;
}
.kerastase .vector-13 {
  position: absolute;
  top: 324px;
  left: 16px;
  width: 264px;
  height: 213px;
}
.kerastase .the-art-of-healthy {
  position: absolute;
  top: 370px;
  left: 43px;
  width: 267px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 7.9px;
  letter-spacing: 0;
  line-height: 41.7px;
  white-space: nowrap;
}
.kerastase .text-wrapper-48 {
  position: absolute;
  top: 578px;
  left: calc(50.00% - 133px);
  width: 267px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 14.2px;
  text-align: center;
  letter-spacing: 0;
  line-height: 41.7px;
  white-space: nowrap;
}
.kerastase .everyday-care {
  position: absolute;
  top: 988px;
  left: calc(50.00% - 118px);
  width: 267px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 20.4px;
  text-align: right;
  letter-spacing: 0;
  line-height: 30.7px;
}
.kerastase .text-wrapper-49 {
  position: absolute;
  top: 1329px;
  left: calc(50.00% - 118px);
  width: 267px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 20.4px;
  text-align: right;
  letter-spacing: 0;
  line-height: 30.7px;
}
.kerastase .text-wrapper-50 {
  position: absolute;
  top: 1536px;
  left: calc(50.00% - 143px);
  width: 286px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 18.9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24.4px;
  white-space: nowrap;
}
.kerastase .text-wrapper-51 {
  top: 821px;
  left: calc(50.00% - 141px);
  width: 71px;
  font-family: "Single Day";
  font-size: 14.9px;
  text-align: center;
  line-height: 17.3px;
  position: absolute;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
  z-index: 9999999;
}
.kerastase .carefully-selected {
  position: absolute;
  top: 1079px;
  left: calc(50.00% - 141px);
  width: 205px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 14.9px;
  letter-spacing: 0;
  line-height: 17.3px;
}
.kerastase .every-product-is {
  position: absolute;
  top: 1403px;
  left: calc(50.00% - 76px);
  width: 225px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 14.9px;
  text-align: right;
  letter-spacing: 0;
  line-height: 17.3px;
}
.kerastase .healthy-hair-begins {
  position: absolute;
  top: 410px;
  left: 65px;
  width: 197px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 11.8px;
}
.kerastase .vector-14 {
  position: absolute;
  top: 1916px;
  left: 62px;
  width: 257px;
  height: 204px;
}
.kerastase .vector-15 {
  position: absolute;
  top: 1909px;
  left: 55px;
  width: 264px;
  height: 213px;
}
.kerastase .text-wrapper-52 {
  position: absolute;
  top: 1963px;
  left: 101px;
  width: 161px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 18.9px;
  letter-spacing: 0;
  line-height: 41.7px;
  white-space: nowrap;
}
.kerastase .FAQ {
  position: absolute;
  top: 2148px;
  left: calc(50.00% - 80px);
  width: 161px;
  -webkit-text-stroke: 0.08px #5b1133;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 18.9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 41.7px;
  white-space: nowrap;
}
.kerastase .have-questions-about {
  position: absolute;
  top: 2012px;
  left: 100px;
  width: 197px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 12.6px;
}
.kerastase .we-re-here-to-help {
  position: absolute;
  top: 2206px;
  left: calc(50.00% - 125px);
  width: 250px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 13.4px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12.6px;
}

/* ========================================================== */
/* 🌟 UPDATED CIRCLE IMAGE CSS (CHANGED TO #B23C3C) 🌟 */
/* ========================================================== */
.kerastase .ellipse-4, 
.kerastase .ellipse-5, 
.kerastase .ellipse-6 {
    background-color: #B23C3C; /* Updated to your requested color */
    border-radius: 53.55px; /* Keeps it a circle */
    border: 1.26px solid #ffadd6;
    overflow: hidden; /* Hides parts of image outside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Keeps original positioning */
}

/* Specific positions for each circle */
.kerastase .ellipse-4 {
  top: 639px;
  left: 60px;
  width: 107px;
  height: 107px;
}
.kerastase .ellipse-5 {
  top: 712px;
  left: 165px;
  width: 107px;
  height: 107px;
}
.kerastase .ellipse-6 {
  top: 840px;
  left: 157px;
  width: 107px;
  height: 107px;
}

/* This makes the user's image perfectly fit the circle! */
.kerastase .ellipse-4 img,
.kerastase .ellipse-5 img,
.kerastase .ellipse-6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Fills the circle without squishing */
    border-radius: 50%;  /* Ensures image is round */
    display: block;
}
/* ========================================================== */

.kerastase .ellipse-7 {
  position: absolute;
  top: 787px;
  left: 36px;
  width: 107px;
  height: 107px;
  border-radius: 53.55px;
  border: 1.26px solid;
  border-color: #ffadd6;
}
.kerastase .ellipse-8 {
  position: absolute;
  top: 1225px;
  left: 54px;
  width: 78px;
  height: 78px;
  background-color: #ffffff;
  border-radius: 38.92px;
}
.kerastase .text-wrapper-53 {
  top: 1249px;
  left: calc(50.00% - 132px);
  width: 61px;
  font-family: "Single Day";
  font-size: 15.7px;
  text-align: center;
  line-height: 17.3px;
  position: absolute;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}
/* THE NEW IMAGE CONTAINER (replace the old .vector-16) */
.kerastase .vector-16 {
  position: absolute;
  top: 1094px;
  left: 255px;
  width: 135px;
  height: 179px;
  
  /* THE MAGIC: This creates the shape */
  -webkit-mask-image: url('Vector16.png'); /* Put your transparent PNG name here */
  mask-image: url('Vector16.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Make sure the image inside fits perfectly */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* This is the actual user image inside the shape */
.kerastase .vector-16 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills the wavy shape without stretching */
  display: block;
}
.kerastase .vector-17 {
  position: absolute;
  top: 1085px;
  left: 250px;
  width: 140px;
  height: 194px;
}
.kerastase .rectangle {
  top: 1611px;
  left: 36px;
  width: 228px;
  height: 76px;
  background-color: #ffffff;
  border-radius: 29.09px;
  position: absolute;
  border: 1.57px solid;
  border-color: #ffadd6;
}
.kerastase .strong-hair-starts {
  top: 1629px;
  left: calc(50.00% - 148px);
  width: 207px;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 11.8px;
  text-align: center;
  line-height: 14.2px;
  position: absolute;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}
.kerastase .rectangle-2 {
  top: 1710px;
  left: 117px;
  width: 228px;
  height: 76px;
  border-radius: 29.09px;
  position: absolute;
  border: 1.57px solid;
  border-color: #ffadd6;
}
.kerastase .lightweight {
  position: absolute;
  top: 1729px;
  left: calc(50.00% - 67px);
  width: 207px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}
.kerastase .rectangle-3 {
  top: 1810px;
  left: 36px;
  width: 228px;
  height: 76px;
  border-radius: 29.09px;
  position: absolute;
  border: 1.57px solid;
  border-color: #ffadd6;
}
.kerastase .enhance-your-natural {
  position: absolute;
  top: 1829px;
  left: calc(50.00% - 141px);
  width: 193px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}
.kerastase .ellipse-9 {
  position: absolute;
  top: 2312px;
  left: calc(50.00% - 287px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}
.kerastase .p {
  position: absolute;
  top: 2386px;
  left: calc(50.00% - 101px);
  width: 202px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}
.kerastase .rectangle-4 {
  top: 2268px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border-radius: 34.6px;
  position: absolute;
  border: 1.57px solid;
  border-color: #ffadd6;
}
.kerastase .rectangle-5 {
  top: 2321px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border-radius: 34.6px;
  position: absolute;
  border: 1.57px solid;
  border-color: #ffadd6;
}
.kerastase .how-often-should-i {
  position: absolute;
  top: 2283px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}
.kerastase .span {
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  letter-spacing: 0;
  line-height: 14.2px;
}
.kerastase .text-wrapper-54 {
  font-size: 14.2px;
}
.kerastase .text-wrapper-55 {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 13.4px;
}
.kerastase .these-products {
  position: absolute;
  top: 2337px;
  left: calc(50.00% - 121px);
  width: 243px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}
/* ========================================================== */
/* 🌟 FIXED MAIN PAGE FOOTER (Centered Beautifully) 🌟 */
/* ========================================================== */

.kerastase .ellipse-10 {
    position: absolute;
    top: 2442px; 
    left: calc(50% - 45px); /* Changed to 45px to perfectly center 90px width */
    width: 90px;  /* Made it slightly wider to fit text better */
    height: 90px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1.57px solid #ffadd6;
    
    /* THE MAGIC FIX: Flexbox centers everything inside! */
    display: flex;
    flex-direction: column; /* Stacks text in 2 lines */
    justify-content: center; /* Centers vertically */
    align-items: center;     /* Centers horizontally */
    text-align: center;      /* Ensures text aligns center */
    transition: all 0.5s ease;
    cursor: pointer;
}

/* Hover effect for the circle */
.kerastase .ellipse-10:hover {
    transform: scale(1.05);
    background: #fff0f5;
}

/* The text inside - Now perfectly centered */
.kerastase .text-wrapper-56 {
    font-family: "Dreamy Notes Script", cursive;
    color: #5b1133;
    font-size: 18px; /* Smaller so "Stay" and "Beautiful" fit in 2 lines */
    line-height: 1.4; /* Gives it nice breathing room */
    width: auto;      /* Let the text decide its own width */
    
    /* Remove the old broken positioning */
    position: relative; 
    top: 2462px;       
    left: auto;      
    margin: 0;       
    padding: 0 5px;  
    text-align: center;
}
.kerastase .play {
  position: absolute;
  top: 294px;
  left: 292px;
  width: 16px;
  height: 17px;
}

/* ========================================================== */
/* 🌟 7 UNIQUE SOFT ANIMATIONS (NO POPPING) 🌟 */
/* ========================================================== */

/* 1. Page Load - Gentle like a cloud */
.kerastase {
    animation: pageLoad 2s ease-out forwards;
}
@keyframes pageLoad {
    from { opacity: 0; transform: scale(0.99); }
    to { opacity: 1; transform: scale(1); }
}


/* ========================================================== */
/* 🌟 EACH SECTION GETS ITS OWN UNIQUE ANIMATION 🌟 */
/* ========================================================== */

/* ANIMATION 1: "SKY FLOAT" - For main Headings (Slowly drifts up from deep down) */
.reveal-sky {
    opacity: 0;
    transform: translateY(70px);
    filter: blur(2px);
    transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-sky.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ANIMATION 2: "WATER RIPPLE" - For paragraphs (Fades in from the sides, wavy) */
.reveal-ripple {
    opacity: 0;
    transform: translateX(-20px);
    letter-spacing: -1px;
    transition: all 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-ripple.revealed {
    opacity: 1;
    transform: translateX(0);
    letter-spacing: normal;
}

/* ANIMATION 3: "PEARL DROP" - For the red circles (Slowly grows bigger from the center) */
.reveal-pearl {
    opacity: 0;
    transform: scale(0.7);
    transition: all 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-pearl.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ANIMATION 4: "SWAY" - For the wavy shape (Sways in gently from the right) */
.reveal-sway {
    opacity: 0;
    transform: translateX(100px) rotate(3deg);
    transition: all 2.5s ease-in-out;
}
.reveal-sway.revealed {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

/* ANIMATION 5: "CLOUD LIFT" - For the contact title (Floats up and loses blur) */
.reveal-cloud {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
    transition: all 2.4s ease;
}
.reveal-cloud.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ANIMATION 6: "GENTLE RISE" - For FAQ buttons (Slowly rises with a slight tilt) */
.reveal-rise {
    opacity: 0;
    transform: translateY(40px) rotate(-1deg);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-rise.revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* ANIMATION 7: "WIND GLIDE" - For Stay Beautiful circle (Drifts in from the left) */
.reveal-wind {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 2.6s ease-out;
}
.reveal-wind.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================================== */
/* 🌟 SUBTLE HOVERS (Don't pop, just gently lift) 🌟 */
/* ========================================================== */
.kerastase .ellipse-4, .kerastase .ellipse-5, .kerastase .ellipse-6 {
    transition: transform 1s ease, box-shadow 1s ease;
    cursor: pointer;
}
.kerastase .ellipse-4:hover, .kerastase .ellipse-5:hover, .kerastase .ellipse-6:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(178, 60, 60, 0.2);
}

.kerastase .rectangle-4, .kerastase .rectangle-5 {
    transition: all 0.8s ease;
    cursor: pointer;
}
.kerastase .rectangle-4:hover, .kerastase .rectangle-5:hover {
    transform: translateY(-2px);
    background-color: #ffdae9;
}

.kerastase .vector-16 {
    transition: transform 1s ease, filter 1s ease;
    cursor: pointer;
}
.kerastase .vector-16:hover {
    transform: scale(1.01);
    filter: drop-shadow(0 8px 15px rgba(178, 60, 60, 0.15));
}

.kerastase .ellipse-10 {
    transition: all 0.8s ease;
    cursor: pointer;
}
.kerastase .ellipse-10:hover {
    transform: scale(1.03);
    background-color: #fff0f5;
}