* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}

body {font-family: "Noto Sans", sans-serif;line-height: 1.4; padding-top: 100px !important; font-size: 14px; -webkit-text-size-adjust: none; font-weight: 400; color: #1C1C1C; background-color: #E6E6E6;}
.max {margin: 0px auto; max-width: 1680px; padding: 0 120px}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
.button {background: red; display: flex; align-items: center; border: none}
h1 {margin-bottom: 40px}
h1 span {color: red}
h2 {margin-bottom: 20px}
h2 span {color: red}

/* BASIC */
main {min-height: calc(100vh - 200px); padding-bottom: 80px}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}
.flex {display: flex; flex-wrap: wrap}
.flex.column {flex-direction: column}
.flex.nowrap {flex-wrap: nowrap}
.flex.align-center {align-items: center}
.flex.center {justify-content: center}
.flex.space-between {justify-content: space-between}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.tablet-show {display: none}
.mobile-flex {display: none}
.relative{position: relative;}
.absolute{position: absolute;}
ul {list-style-type: none}
.mobile-show {display: none !important}

/* BASIC */

/* HEADER */
header {background: #fff; border-bottom: 1px solid #CECECE; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: 100px}
header > .max {height: 100%; gap: 40px; padding: 0 80px}
header .logo-block {gap: 20px;}
header .logo {width: 111px; height: 60px}
 .email,
 .phone {transition: all 0.3s ease;font-size: 18px; font-weight: 500; flex-direction: column;}
 .email span,
 .phone span{font-size: 14px; font-weight: 400;}
 header .logo {width: 111px; height: 60px}
 .email img,
 .phone img{width: 25px;height: 25px;}
 .phone .sub{gap: 6px;}
 .phone span::before {display: block; content: ' '; border-radius: 50%; background-color: #42A638; width: 6px;height: 6px;}
header .back-ring{transition: all 0.3s ease; padding: 15px 24px; border-radius: 3px; border: 1px solid #42A638; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
header .contact-block{gap: 30px;}
/* HEADER END*/

/* FIRST SECTION */
.first {overflow: hidden; padding-top: 123px; padding-bottom: 123px; background-color: #E6E6E6; position: relative;}
.first .left-part {width: 100%; position: relative; z-index: 1;}
.first .right-part {width: calc(50% - 20px); height: 100%; right: 0; top: 0; background: #42A638; position: absolute;}
.first .title {margin-bottom: 40px; font-size: 76px; line-height: 1.2; font-weight: 700;}
.first .ellipse{position: absolute; left: 23%; bottom: 0;}
.first .firs-img{position: absolute; right: 15%; bottom: 28px; max-width: 987px;}
.first .profit-delivery-block{gap: 33.5px; margin-bottom: 60px;}
.first .profit-delivery__separator{height: 80px; width: 1px; background-color: #CECECE;}
.first .profit, .first  .delivery{font-size: 22px; color: #383737;}
.first .profit span, .first  .delivery span{font-size: 32px; color: #42A638;}
.first .button {position: relative; overflow: hidden; transition: all .3s ease; margin-bottom: 15px; border: 1px solid #42A638; border-radius: 3px; width: max-content; flex-direction: column; background: radial-gradient(118.47% 118.47% at -7.95% 18.67%, #42A638 0%, #337F2C 100%); padding: 14px 34px; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 18px; letter-spacing: 0.5px;}
.first .button span{text-transform: lowercase; color: #C0EABC; font-size: 16px; letter-spacing: 0.7px;}
.first .button:after{
  pointer-events: none;
content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

.first .text{max-width: 352px;}
.first .bonus{gap: 10px;}
.first .bonus p{font-size: 18px; font-weight: 500;}
.first .bonus p span {color: #42A638;}
.first .bonus img {width: 40px}
/* FIRST SECTION END */

/* ADVANTAGE */

.advantages-block {box-shadow: 0px 4px 34px 0px #0000001A;position: relative; background-color: #fff; padding-top: 14px; padding-bottom: 14px; gap: 40px;}
.advantages-block .advantage {font-weight: 500; text-align: center; font-size: 16px; color: #383737; flex-direction: column; gap: 14px;}
.advantages-block .advantage img {width: 40px;height: 40px;}
.arrow-down-wrapper {background-color: #FFFFFF4D; width: 80px;height: 80px; position: absolute; left: 20px; top: -50px; border-radius: 50%; box-shadow: 0px 4px 24px 0px #00000014;}
.arrow-down-wrapper .arrow-down{background-color: #fff; border-radius: 50%;width: 60px;height: 60px;}
.advantages-block__wrapper{gap: 20px;}
/* ADVANTAGE END */

/* SECOND */

.second{padding-top: 100px; padding-bottom: 100px;}
.second .quiz-wrapper{padding: 50px 80px; background-color: #F8F8F8;}
.second h2{font-weight: 900; font-size: 52px; line-height: 1.3; text-align: center;}
.second h2 span{color: #3AAA35;}

/* SECOND END */





footer {background: #222222; color: #222222;}
footer .top-part {padding-top: 50px; padding-bottom: 40px; color: #fff;}
footer .top-part__wrapper {gap: 20px;}
footer .logo-block {font-size: 14px; flex-direction: column; gap: 24px; align-items: baseline; max-width: 253px;}
footer .policy{color: #7A7A7A;}
footer .top-part b{letter-spacing: 0.5px; display: block; color: #7A7A7A; font-weight: 700; margin-bottom: 18px; text-transform: uppercase;}

footer .top-part ul{flex-direction: column; gap: 16px;}

footer .top-part li{display: flex; flex-direction: column; font-size: 16px; font-weight: 500;}
footer .top-part li .sub{font-size: 14px; font-weight: 400; color: #7A7A7A;}

footer .bottom-part {color: #7A7A7A; border-top: 1px solid #FFFFFF14; padding-top: 30px; padding-bottom: 30px;}
.privacy{transition: all 0.3s ease;}

@media (hover: hover) {
header .back-ring:hover{cursor: pointer; background-color: #42A638; color: #fff;}
.email:hover,
 .phone:hover{color: #42A638; cursor: pointer;}
header .logo:hover{cursor: pointer;}
.first .button:hover{scale: 1.05;}
.privacy:hover{color: #42A638;}
.arrow-down-wrapper:hover {cursor: pointer; scale: 1.05; background-color: #337F2C;}

/*This activates the sheen once the button has been hovered*/
.first .button:hover::after, .first .button:focus::after {
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(10em, -20em);
  }
}
}
  .first .button::before, .first .button::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -110%;
    left: -110%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, 7.5em);
    z-index: 1;
  }

  .first .button::before {
    z-index: 0;
    animation: sheen-loop 3s infinite;
  }

  .first .button::after {
    z-index: 2;
  }

  @keyframes sheen-loop {
    0%, 20%, 100% {
      transform: rotateZ(60deg) translate(-5em, 7.5em);
    }
    40%, 60% {
      transform: rotateZ(60deg) translate(10em, -20em);
    }
  }

  .first .button:hover::after, .first .button:focus::after {
    animation: sheen 1s forwards;
  }

  @keyframes sheen {
    100% {
      transform: rotateZ(60deg) translate(10em, -20em);
    }
  }

  @media (hover: hover) {
    .first .button:hover {
      scale: 1.05;
    }
    .first .button:hover::after {
      animation: sheen 1s forwards;
    }
  }

@media screen and (max-width: 1919px){
  .first .title{font-size: 52px;}
  .first, .second {padding-top: 80px;padding-bottom: 80px;}
  .first .firs-img{width: 55%; right: 10%;}
  .second h2 {font-size: 30px;}
}
@media screen and (max-width: 1560px){
  .max{padding-left: 60px; padding-right: 60px;}
  header > .max{padding-left: 40px; padding-right: 40px;}
  .first .firs-img{width: 60%; right: 5%;}
  .first .title {font-size: 3.6vw;}
}
@media screen and (max-width: 1439px){
  main {padding-bottom: 0px;}
  .max{padding-left: 40px; padding-right: 40px;}
  .logo-block .desc{display: none;}
  .email, .phone {font-size: 16px;}
  header .back-ring {padding: 12px 16px;}
  .first .title {font-size: 3.7vw;}
  .first .ellipse {width: 70%;}
  .first .firs-img {width: 54%;bottom: 10%;}
  .first, .second {padding-top: 60px;padding-bottom: 60px;}
  .first .profit span, .first .delivery span {font-size: 26px;}
  .first .profit, .first .delivery {font-size: 20px;}
  .advantages-block__wrapper{justify-content: center;}
  .first .button {font-size: 16px;}
  .first .button span {font-size: 14px;}
  .first .profit-delivery-block {margin-bottom: 50px;}
  .advantages-block__wrapper {gap: 15px;}
  .advantages-block .advantage {font-size: 14px;}
  .arrow-down-wrapper {left: 10px;}
  .second h2 {font-size: 24px;}
}

@media screen and (max-width: 1023px){
  body {padding-top: 80px !important;}
  header > .max, .max{padding-left: 20px; padding-right: 20px;}
  header .sub{display: none;}
  header {height: 80px;}
  header .logo {width: 100px;height: auto;}
  header .back-ring {padding: 7px 12px;font-size: 13px;}
  .first, .second {padding-top: 40px;padding-bottom: 40px;}
  .first .title br{display: none;}
  .first .firs-img {width: 50%;}
  .first .title{margin-bottom: 30px;}
  .first .profit-delivery-block {margin-bottom: 40px;}
  .first .button {padding: 10px 25px; font-size: 15px;}
  .first .profit span, .first .delivery span {font-size: 22px;}
  .first .profit, .first .delivery {font-size: 18px;}
  .first .profit-delivery__separator{height: 60px;}
  .arrow-down-wrapper {width: 55px;height: 55px;top: -40px;}
  .arrow-down-wrapper .arrow-down {width: 40px;height: 40px;}
  .arrow-down-wrapper .arrow-down img{width: 25px;height: 25px;}
  .advantages-block__wrapper.flex{justify-content: space-around;}
  .second h2 {font-size: 20px;}
  .second .quiz-wrapper {padding: 40px;}
  footer .bottom-part {font-size: 13px;}
}

@media screen and (max-width: 767px){
  body {padding-top: 70px !important;}
  .mobile-show {display: block !important}

  .first .title{font-size: 22px;}
  .first .title br{display: block;}
  .mobile-hide {display: none !important}
  header{height: 70px;}
  header .logo {width: 80px;}
  header .back-ring {padding: 5px 10px;}
  header .contact-block {gap: 10px;}
  header .back-ring {padding: 5px 8px; font-size: 12px;}
  .first{display: flex; flex-direction: column; gap: 30px; align-items: center;}
  .first .firs-img{position: relative; order: -1; bottom: 0; left: inherit; right: inherit;}
  .first .ellipse {width: 80%;left: 50%;transform: translateX(-50%);}
  .first .left-part{text-align: center;}
  .first .button {margin: auto;margin-bottom: 10px;}
  .first .bonus{justify-content: center;}
  .first .title {margin-bottom: 20px;}
  .first .profit-delivery-block {margin-bottom: 20px;}
  .first .text {max-width: 100%}
  .first .firs-img {width: 65%;}
  .advantages-block__wrapper.flex {justify-content: flex-start;}
  .advantages-block .advantage {flex-wrap: nowrap; text-align: start; font-size: 13px;flex-direction: row;width: 100%;padding-bottom: 20px;border-bottom: 1px solid #42A638;}
  .advantages-block .advantage img {width: 30px;height: 30px;}
  .advantages-block .advantage br{display: none;}
  .arrow-down-wrapper {left: inherit;right: 10px;}
  .first .profit-delivery-block {flex-direction: column; gap: 10px;}
  .first .profit-delivery__separator {height: 1px;width: 100%;}
  .second .quiz-wrapper {padding: 20px;}
  footer .top-part__wrapper{flex-direction: column;}
  footer .email, footer .phone {font-size: 14px;}
  footer .top-part li {font-size: 14px;}
  footer .top-part b{font-size: 15px;}
  footer .bottom-part{font-size: 12px; padding-top: 10px; padding-bottom: 10px;}
  footer .top-part {padding-top: 40px;padding-bottom: 30px;}
}