@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;800&display=swap');

@font-face {
  font-family: 'Rounded Mplus 1c';
  font-weight: 400;
  src: url('../fonts/RoundedMplus1c-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  font-weight: 800;
  src: url('../fonts/RoundedMplus1c-ExtraBold.woff2') format('woff2');
}

:root {
  --trans-bg: 100ms;
  --width-product: 170px
}

.red-btn {
  font-weight: 800;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  background-image: url(../img/button.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 8px 27px 16px 29px;
}

.red-btn:active {
  background-image: url(../img/buttonclick.svg);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

body {
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #FFFFFF;
}

.header {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  width: 20%;
  margin-top: -2px;
  animation: logoScale 5s ease-in-out infinite;
}

.header-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
}

.header-item {
  border: 2px solid transparent;
  border-radius: 30px;
  padding: 3px 13px;
  transition: border-color .3s;
}

.header-item:hover {
  border-color: #FFFFFF;
  transition: border-color .3s;
}

.section-1 {
  position: relative;
  /* background: linear-gradient(0deg, #FFFFFF 16.96%, rgba(255, 255, 255, 0) 65.18%), #44D6FF; */
  background: linear-gradient(0deg, #0090ff8a 16.96%, rgba(255, 255, 255, 0) 65.18%), #44D6FF;
  overflow-x: hidden;

}

.info {
  max-width: 500px;
  margin-top: 240px;
  margin-bottom: 500px;
  position: relative;
  z-index: 55;

}

.info-title {
  font-weight: 800;
  font-size: 52px;
  line-height: 60px;

}

.info-text {
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  margin: 13px 0 22px;
}


.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.grass-bg {
  position: relative;
  z-index: 10;
}

.grass-bg img {
  width: 100%;
}

.grass {
  position: absolute;
  z-index: -2;
  top: 30%;
  left: -25px;
  right: -45px;
  transform: translateY(-100%);
  animation: grassMov 10s ease-in-out infinite;
}

.grass img {
  width: 100%;
}

.tree-1 {
  position: absolute;
  width: 23%;
  max-width: 338px;
  top: 7%;
  left: 5%;
  transform: translateY(-100%) rotate(-3deg);
  transform-origin: bottom center;
  z-index: -3;
  animation: treesMov 7s ease-in-out infinite;
}

.tree-2 {
  position: absolute;
  width: 25%;
  max-width: 398px;
  top: 20%;
  right: 5%;
  transform: translateY(-100%) rotate(-3deg);
  transform-origin: bottom center;
  z-index: -1;
  animation: treesMov 6s ease-in-out infinite;
}

.cloud-1 {
  position: absolute;
  width: 34%;
  top: -400px;
  left: 5%;
  transform: translateY(-100%);
  animation: cloudMov-1 100s ease-in-out infinite;
}

.cloud-2 {
  position: absolute;
  width: 45%;
  top: -200px;
  right: 15%;
  transform: translateY(-100%);
  animation: cloudMov-2 100s ease-in-out infinite;
}

.heroes {
  position: absolute;
  z-index: 11;
  bottom: 50%;
  right: 9%;
  left: 40%;
}

.heroes-img {
  max-width: 900px;
  width: 100%;
}

.heroes-elements {
  position: relative;
  max-width: 900px;
}

.baloon {
  position: absolute;
  width: 17%;
  right: -13.5%;
  top: 15%;
  transform-origin: 10% 98%;
  animation: baloonMov 3s ease-in-out infinite;
}

.winder {
  position: absolute;
  top: 38%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 11%;
  animation: winderRotate 10s linear infinite;
}

/* ---------------section-2---------------------- */

.section-2 {
  position: relative;
  padding-top: 15px;
  padding-bottom: 100px;
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 94.22%), #FFF6EE;
  overflow-x: clip;
}

.sect-2-up {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transform: translateY(-75%);
}

.sect-2-down {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transform: translateY(35%);
}

.sect-2-title {
  position: relative;
  z-index: 14;
  max-width: 620px;
  margin: 0 auto;
  padding: 17px 42px 115px;
  font-weight: 800;
  font-size: 46px;
  line-height: 56px;
  text-align: center;
  color: #D07CC6;
  background-image: url(../img/sect-2-header.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.sect-2-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sect-2-wrap-block {
  z-index: 13;
  transition: 500ms
}

.sect-2-wrap-block:not(.active) {
  transform: translateY(20%);
  opacity: 0;
}

.sect-2-wrap-block:nth-child(2) {
  transition-delay: 200ms;
}

.sect-2-wrap-block:nth-child(3) {
  transition-delay: 400ms;
}

.sect-2-wrap-block:first-child,
.sect-2-wrap-block:nth-child(3) {
  max-width: 300px;
}

.sect-2-wrap-block:nth-child(2) {
  max-width: 370px;
}

.sect-2-wrap-block-title {
  margin: 18px 0;
  font-weight: 800;
  font-size: 26px;
  line-height: 28px;
  text-align: center;
  color: #D07CC6;
}

.sect-2-wrap-block-text {
  text-align: center;
  color: #D07CC6;
}

/* ---------------section-2-bg------------------- */
/* ---------------top-left-bg-------------------- */

.top-left-bg {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 50%;
  max-width: 500px;
  height: 300px;
  z-index: 12;
  opacity: 0.5;
}

.heart-block {
  position: absolute;
  left: 25%;
  top: -7%;
  width: 21%;
  transition: var(--trans-bg)
}

.heart {
  position: absolute;
  animation: heartScale 0.8s ease-in-out infinite;
}

.heart-lines {
  position: absolute;
  animation: heartLinesScale 2s ease-in-out infinite;
}

.lightning {
  position: absolute;
  left: 65%;
  top: 15%;
  width: 5%;
  transition: var(--trans-bg)
}

.lightning img {
  position: absolute;
  animation: elmShake 3s linear infinite;
}

.spiral {
  position: absolute;
  left: 60%;
  top: 50%;
  width: 10%;
  transition: var(--trans-bg)
}

.spiral img {
  position: absolute;
  animation: elmRotate 30s linear infinite;
}

.star {
  position: absolute;
  left: 20%;
  top: 47%;
  width: 70px;
  height: 70px;
  transition: var(--trans-bg)
}

.star img {
  position: absolute;
  animation: elmRotate 10s linear infinite;
}

/* ---------------section-2-bg------------------- */
/* ---------------top-right-bg------------------- */

.top-right-bg {
  position: absolute;
  top: -30%;
  right: 0;
  width: 50%;
  max-width: 350px;
  height: 200px;
  z-index: 12;
  opacity: 0.5;
}

.sun {
  position: absolute;
  top: 15%;
  left: 30%;
  transition: var(--trans-bg)
}

.sun img {
  animation: elmShake 3s linear infinite;
}

.triangle {
  position: absolute;
  top: 0;
  left: 70%;
  transition: var(--trans-bg)
}

.triangle img {
  animation: elmRotate 10s linear infinite;
}

.star-red {
  position: absolute;
  top: 65%;
  left: 85%;
  transition: var(--trans-bg)
}

.star-red img {
  animation: elmRotate 10s linear infinite;
}

.spiral-left {
  position: absolute;
  top: 60%;
  left: 10%;
  transition: var(--trans-bg)
}

.spiral-left img {
  animation: elmRotate 30s linear infinite;
}

/* ---------------section-2-bg------------------- */
/* ---------------bottom-right-bg---------------- */

.bottom-right-bg {
  position: absolute;
  bottom: -30%;
  right: 0%;
  width: 50%;
  max-width: 400px;
  height: 250px;
  z-index: 12;
  opacity: 0.5;
  transform: scale(-1);
}

/* ---------------section-2-bg------------------- */
/* ---------------bottom-left-bg----------------- */

.bottom-left-bg {
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 50%;
  max-width: 350px;
  height: 200px;
  z-index: 12;
  opacity: 0.5;
  transform: scale(-1);
}

/* ---------------section-3---------------------- */

.section-3 {
  position: relative;
  background: radial-gradient(49.37% 91.53% at 50% 83.82%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #E6FBFF;
  padding-top: 330px;
  padding-bottom: 150px;
  overflow-x: clip;
}

.section-3-bg {
  position: absolute;
  bottom: -7%;
  right: 0;
  left: 0;
  width: 100%;
}

.sect-3-product-list {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}

.sect-3-product-btn {
  position: relative;
  z-index: 1;
  width: 200px;
  transition: 300ms;
}

.btn-active {
  transform: scale(1.5);
  transition: 500ms;
  z-index: 3;
}

.btn-active .product-hero-messege {
  opacity: 1;
  transition-delay: 700ms;
}

.product-hero-messege {
  position: absolute;
  top: -20%;
  left: -12%;
  width: var(--width-product);
  padding-top: 25px;
  opacity: 0;
}

.product-hero-messege img {
  position: absolute;
  top: 0;
}

.product-hero-messege p {
  position: absolute;
  width: var(--width-product);
  font-weight: 800;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  color: #D07CC6;
}

.product-hero-img {
  position: absolute;
  width: 60%;
  opacity: 0;
  top: 0;
  z-index: 1;
  transition: 400ms cubic-bezier(.335, .655, .05, 1.23);
}

.btn-active .product-hero-img {
  opacity: 1;
  transform: translate(80%, -60%);
  transition: 400ms cubic-bezier(.335, .655, .05, 1.23);
}

.sect-3-product-img {
  position: relative;
  z-index: 2;
}

.sect-3-product-title {
  font-weight: 800;
  font-size: 26px;
  line-height: 28px;
  text-align: center;
  color: #D07CC6;
}

.btn-active .sect-3-product-title {
  color: #FF5F4E;
}


/* ---------------section-4---------------------- */

.section-4 {
  background: #FFEBDA;
  padding-bottom: 200px;
}

.slider-control {
  position: relative;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
}

.sec-4-slider-mask {
  position: absolute;
  top: -1px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100.2%;
}

.slider-button {
  position: absolute;
  width: 60px;
  height: 60px;
  padding: 7px 21px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFF8F2 0%, rgba(255, 255, 255, 0) 100%), #FFF0E3;
  box-shadow: 0px 9px 10px rgba(247, 213, 187, 0.51);
  top: 50%;
  z-index: 5;
}

.slider-button-prev {
  left: -1%;
}

.slider-button-next {
  right: -1%;
}

.slider-line {
  display: flex;
  position: relative;
  left: 0;
  transition: all ease 1s;
}

.slide {
  display: flex;
  height: auto;
}

.inner-block-1 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 7.73%, rgba(255, 255, 255, 0) 62.96%), #44D6FF;
  position: relative;
  overflow-x: clip;
  width: 45%;
  padding: 70px 20px;
}

.sect-4-cloud-1 {
  position: absolute;
  width: 34%;
  top: 10%;
  left: 5%;
  animation: cloudMov-1 20s ease-in-out infinite;
}

.sect-4-cloud-2 {
  position: absolute;
  width: 45%;
  right: 15%;
  bottom: 15%;
  animation: cloudMov-2 20s ease-in-out infinite;
}

img.product {
  position: absolute;
  width: 75%;
  top: 40%;
  left: 15%;
  transform: translateY(-50%);
  animation: productMove 3s ease-in-out infinite alternate;
}

.inner-block-2 {
  background: #FFFFFF;
  width: 55%;
  padding: 50px 65px 60px 70px;
}

.in-bl-2-title {
  font-weight: 800;
  font-size: 52px;
  line-height: 60px;
  color: #FF5F4E;
  margin-bottom: 7px;
}

.in-bl-2-subtitle {
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #D07CC6;

}

.in-bl-2-title mark {
  background: #ff5f4e;
  display: inline-block;
  color: #fff;
  border-radius: 26px;
  padding: 5px;
}

.in-bl-2-btn {
  font-weight: 800;
  font-size: 24px;
  line-height: 56px;
  color: #D07CC6;
  margin: 0 10px;
}

.in-bl-2-btn-active {
  text-decoration-line: underline;
  color: #FF5F4E;
}

.in-bl-2-wrapper-content-1 {
  margin-top: 15px;
  height: 400px;
}

.con-1-description {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #D07CC6;
  margin-bottom: 20px;
}

.sect-4-btn-buy {
  display: block;
  margin-left: 20%;
}

/* ---------------section-5---------------------- */

.section-5 {
  background: linear-gradient(0deg, rgba(255, 240, 227, 0.3) -25%, rgba(255, 255, 255, 0) 56.58%), #9058C5;
  position: relative;
  z-index: 15;
  padding: 30px 0 70px;
  overflow-x: clip;
}

.section-5-img-up {
  position: absolute;
  width: 100%;
  top: 0%;
  left: 0;
  right: 0px;
  z-index: -1;
  transform: translateY(-50%);
}

.section-5-img-back {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}

.sect-5-wrapper {
  max-width: 540px;
  position: relative;
  z-index: 11;
}

.sect-5-wrapper-title {
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  color: #FFFFFF;
  margin-bottom: 25px;
}

.sect-5-item-title {
  font-weight: 800;
  font-size: 26px;
  line-height: 32px;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.sect-5-item-text {
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.sect-5-pear-wrapper {
  position: absolute;
  width: 40%;
  max-width: 675px;
  right: 10%;
  bottom: 0%;
  transform: translateY(10%);
}

.sect-5-pear-block {
  position: relative;
  width: 100%;
}

.sect-5-pear {
  position: relative;
  width: 100%;
  z-index: 10;
}

.sect-5-pear-sheet {
  position: absolute;
  width: 37%;
  max-width: 288px;
  left: 56%;
  top: 0.5%;
  transform-origin: 0% 0%;
  transform: rotate(0deg);
  z-index: 9;
  animation: pearRotate 3s ease-in-out infinite alternate;
}

.sect-5-pear-eye {
  position: absolute;
  width: 5%;
  left: 25%;
  top: 42%;
  z-index: 10;
  animation: move-in-circle 5s ease-in-out infinite alternate;
}

.sect-5-pear-eye-2 {
  position: absolute;
  width: 5%;
  left: 64%;
  top: 45%;
  z-index: 10;
  animation: move-in-circle 5s ease-in-out infinite alternate;
}

.sect-5-pear-mouth {
  position: absolute;
  width: 13%;
  left: 41%;
  top: 54%;
  z-index: 9;
  animation: mouthScale 3s ease-in-out infinite alternate;
}

.sect-5-pear-r-hand {
  position: absolute;
  width: 8%;
  left: 10%;
  top: 58%;
  z-index: 9;
  transform-origin: 100% 5%;
  animation: handMov 2s ease-in-out infinite alternate-reverse;
}

.sect-5-pear-l-hand {
  position: absolute;
  width: 8%;
  left: 78%;
  top: 61%;
  z-index: 9;
  transform-origin: 0% 5%;
  animation: handMov 2s ease-in-out infinite alternate;
}


/* ---------------section-6---------------------- */

.section-6 {
  position: relative;
  height: 20vh;
  background: #FFF6EE;
  z-index: 20;
}

.sect-6-up {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transform: translateY(-46%);
}

@keyframes logoScale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes grassMov {
  0% {
    left: -25px;
    right: -45px;
  }

  50% {
    left: -40px;
    right: -40px;
  }

  100% {
    left: -25px;
    right: -45px;
  }
}

@keyframes treesMov {
  0% {
    transform: translateY(-100%) rotate(-3deg);
  }

  50% {
    transform: translateY(-100%) rotate(3deg);
  }

  100% {
    transform: translateY(-100%) rotate(-3deg);
  }
}


@keyframes cloudMov-1 {
  0% {
    left: 5%;
  }

  50% {
    left: 60%;
  }

  100% {
    left: 5%;
  }
}


@keyframes cloudMov-2 {
  0% {
    right: 15%;
  }

  35% {
    right: -15%;
  }

  75% {
    right: 45%;
  }

  100% {
    right: 15%;
  }
}


@keyframes winderRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  40% {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes baloonMov {
  0% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

/* ---------------section-2---------------------- */

@keyframes heartLinesScale {
  0% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1.1);
  }
}

@keyframes heartScale {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes elmRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes elmShake {
  0% {
    transform: rotate(-3deg);
  }

  30% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

/* ---------------section-3---------------------- */

@keyframes productMove {
  0% {
    top: 40%;
  }

  100% {
    top: 60%;
  }
}

@keyframes productMoveGorizont {
  0% {
    top: 40%;
    left: 15%
  }

  100% {
    top: 60%;
    left: 80%
  }
}

/* ---------------section-5---------------------- */



@keyframes pearRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(90deg);
  }
}




@keyframes mouthScale {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-in-circle {
  from {
    transform: rotate(0deg) translateX(50%) rotate(0deg);
  }

  to {
    transform: rotate(200deg) translateX(50%) rotate(-200deg);
  }
}


@keyframes handMov {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(-1);
  }
}