@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Light.eot"); src: local("Gilroy Light"), local("Gilroy-Light"), url("../fonts/Gilroy-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Light.woff") format("woff"), url("../fonts/Gilroy-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Regular.eot"); src: local("Gilroy Regular"), local("Gilroy-Regular"), url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Regular.woff") format("woff"), url("../fonts/Gilroy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-RegularItalic.eot"); src: local("Gilroy Regular Italic"), local("Gilroy-RegularItalic"), url("../fonts/Gilroy-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-RegularItalic.woff") format("woff"), url("../fonts/Gilroy-RegularItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Medium.eot"); src: local("Gilroy Medium"), local("Gilroy-Medium"), url("../fonts/Gilroy-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Medium.woff") format("woff"), url("../fonts/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-SemiBold.eot"); src: local("Gilroy SemiBold"), local("Gilroy-SemiBold"), url("../fonts/Gilroy-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-SemiBold.woff") format("woff"), url("../fonts/Gilroy-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Bold.eot"); src: local("Gilroy Bold"), local("Gilroy-Bold"), url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Bold.woff") format("woff"), url("../fonts/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } html { font-size: 16px; font-family: "Gilroy", sans-serif; font-weight: 400; font-style: normal; scroll-behavior: smooth; } body { position: relative; margin: 0; overflow-y: scroll; color: #2d2d2d; background-color: #ededed; } a, button, input, textarea { font-family: "Gilroy", sans-serif; text-decoration: none; } a { transition: all ease-in-out 0.1s; } a:hover { color: #609eff; } a:active { color: #3081ff; } figure { margin: 0; } img { max-width: 100%; height: auto; } h2 { margin: 0; font-weight: 700; font-size: 55px; line-height: 122%; letter-spacing: 0.01em; color: #4d4d4d; text-align: center; } h2 > span { color: #609eff; } @media (max-width: 992px) { h2 { font-size: 40px; } } @media (max-width: 768px) { h2 { font-size: 36px; } } @media (max-width: 576px) { h2 { font-size: 28px; } } h3 { margin: 0; font-weight: 600; font-size: 23px; line-height: 127%; color: #878787; } @media (max-width: 576px) { h3 { font-size: 20px; } } .container { max-width: 1236px; width: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .logo { flex: 0 0 auto; } .logo__link { display: flex; align-items: center; gap: 22px; } @media (max-width: 1240px) { .logo__link { gap: 16px; } } .logo__figure { display: flex; align-items: center; justify-content: center; } .logo__figure-image { display: block; max-width: 100%; width: 35px; height: auto; } @media (max-width: 992px) { .logo__figure-image { width: 25px; } } .logo__text { display: flex; flex-direction: column; gap: 5px; } .logo__text-name { font-weight: 600; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: #2d2d2d; } @media (max-width: 992px) { .logo__text-name { font-weight: 600; font-size: 19px; } } .logo__text-slogan { font-weight: 400; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #878787; } @media (max-width: 992px) { .logo__text-slogan { font-weight: 400; font-size: 7px; } } .social-link { display: inline-block; height: 29px; width: 29px; border-radius: 32px; background-position: center; background-repeat: no-repeat; } @media (max-width: 992px) { .social-link { height: 23px; width: 23px; } } .social-link--whatsapp { background-image: url(../img/icons/whatsapp.svg); background-color: #2aa81a; } .social-link--whatsapp:active { background-color: #42d030; } .social-link--tg { background-image: url(../img/icons/telegram.svg); background-color: #178ec9; } .social-link--tg:active { background-color: #45b3ea; } .social-link--phone { width: auto; height: auto; font-weight: 600; font-size: 24px; color: #2d2d2d; } @media (max-width: 1240px) { .social-link--phone { font-size: 20px; } } @media (max-width: 992px) { .social-link--phone { background-color: #609eff; background-image: url(../img/icons/phone.svg); height: 23px; width: 23px; } } @media (max-width: 992px) { .social-link--phone:active { background-color: #3081ff; } } @media (max-width: 992px) { .social-link--phone > * { display: none; } } .button { box-sizing: border-box; border-radius: 100px; background-color: rgba(255, 255, 255, 0); transition: all ease-in-out 0.1s; cursor: pointer; } .button--lg { display: flex; align-items: center; gap: 24px; padding: 24px 58px 26px; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600; font-size: 22px; line-height: 140%; text-align: center; } @media (max-width: 768px) { .button--lg { justify-content: center; gap: 20px; max-width: 480px; padding: 21px 30px; font-size: 18px; } } .button--lg::before { transition: all ease-in-out 0.1s; } .button--lg--consult::before { content: ""; display: inline-block; height: 22px; width: 22px; background: url(../img/icons/consultation.svg) center no-repeat; } .button--lg--coin::before { content: ""; display: inline-block; height: 22px; width: 22px; background: url(../img/icons/ruble.svg) center no-repeat; } .button--light { color: #2d2d2d; background-color: #ffffff; } .button--light:hover { color: #609eff; } .button--light:active { color: #3081ff; } .button--dark { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); } .button--dark:hover { color: #609eff; background-color: #ffffff; } .button--dark:active { color: #3081ff; } .button--dark::before { filter: brightness(10); } .button--dark:hover::before, .button--dark:active::before { filter: brightness(1); } .button--order { display: inline-block; padding: 14px 29px; color: #878787; font-weight: 500; font-size: 14px; letter-spacing: 0.01em; border: 1px solid #cacaca; } .button--order:hover { color: #ffffff; border-color: #609eff; background-color: #609eff; } .button--order:active { border-color: #3081ff; background-color: #3081ff; } .button--prev, .button--next { height: 60px; width: 60px; border: none; border-radius: 30px; background: url(../img/icons/prev.svg) center no-repeat; background-color: #609eff; transition: background-color ease-in-out 0.1s; cursor: pointer; } @media (max-width: 992px) { .button--prev, .button--next { height: 42px; width: 42px; background-size: 8px; } } .button--prev:active, .button--next:active { background-color: #3081ff; } .button--next { transform: rotate(180deg); } .tag { display: flex; align-items: center; gap: 22px; width: -moz-fit-content; width: fit-content; padding: 19px 46px; margin: 0 auto; font-weight: 400; font-size: 18px; line-height: 122%; color: #878787; border: 1px solid rgba(135, 135, 135, 0.2); border-radius: 240px; } @media (max-width: 768px) { .tag { gap: 10px; padding: 13px 26px; font-size: 14px; } } .tag::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 7px; background-color: #609eff; } .tag--light { color: #ffffff; border-color: rgba(255, 255, 255, 0.2); } .tag--light::before { background-color: white; } .header { padding: 26px 0 29px; } @media (max-width: 992px) { .header { padding: 17px 0 20px; } } .header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } @media (max-width: 992px) { .header .container { gap: 16px; } } .header__nav { display: flex; align-items: center; gap: 36px; padding: 0 30px 0 35px; } @media (max-width: 1240px) { .header__nav { flex: 1 1 auto; justify-content: space-around; gap: 16px; padding: 0; } } @media (max-width: 992px) { .header__nav { display: none; } } .header__nav-link { font-weight: 400; font-size: 15px; } @media (max-width: 1240px) { .header__nav-link { font-size: 14px; } } .header__social { display: flex; align-items: center; gap: 17px; } @media (max-width: 992px) { .header__social { gap: 13px; } } .header__social .social-link--phone { margin-left: 17px; } @media (max-width: 1240px) { .header__social .social-link--phone { margin-left: 0; } } .header__buttons { display: flex; align-items: center; gap: 13px; } @media (max-width: 576px) { .header__buttons .button--order { display: none; } } .header__burger { display: none; height: 30px; width: 30px; border: none; border-radius: 30px; background: url(../img/icons/burger.svg) center no-repeat; background-color: #609eff; transition: all ease-in-out 0.1s; cursor: pointer; } @media (max-width: 992px) { .header__burger { display: inline-block; background-color: #609eff; } } .header__burger:active { background-color: #3081ff; } @media (max-width: 1240px) { .first-screen .container { padding: 0; } } .first-screen__wrapper { padding: 43px 26px 55px; border-radius: 80px 12px; background: url(../img/grid.svg) center no-repeat; background-color: #609eff; } @media (max-width: 992px) { .first-screen__wrapper { border-radius: 40px 7px; } } .first-screen__wrapper > * { max-width: 996px; margin: 0 auto; } @media (max-width: 576px) { .first-screen__wrapper > .tag { margin: 0 32px; } } .first-screen__title { margin-bottom: 28px; margin-top: 13px; font-weight: 500; font-size: 80px; line-height: 114%; letter-spacing: 0.01em; text-align: center; color: #ffffff; } @media (max-width: 1240px) { .first-screen__title { font-size: 72px; } } @media (max-width: 992px) { .first-screen__title { font-size: 56px; } } @media (max-width: 768px) { .first-screen__title { margin-bottom: 23px; font-size: 39px; } } .first-screen__title > b { font-weight: 700; } .first-screen__advantages { display: flex; margin-bottom: 34px; } @media (max-width: 768px) { .first-screen__advantages { flex-direction: column; gap: 24px; padding: 0 32px; margin-bottom: 24px; } } .first-screen__advantages-item { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 0 60px; box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 992px) { .first-screen__advantages-item { gap: 10px; padding: 0 32px; } } @media (max-width: 768px) { .first-screen__advantages-item { padding: 0; border: none; } } .first-screen__advantages-item:last-child { border: none; } .first-screen__advantages-item-figure { display: flex; justify-content: center; align-items: flex-start; height: 60px; } @media (max-width: 992px) { .first-screen__advantages-item-figure { height: 50px; } } .first-screen__advantages-item-figure-image { display: block; max-width: 100%; height: auto; } @media (max-width: 992px) { .first-screen__advantages-item-figure-image { max-height: 48px; } } .first-screen__advantages-item-text { font-weight: 500; font-size: 21px; line-height: 138%; text-align: center; color: #fff; } @media (max-width: 992px) { .first-screen__advantages-item-text { font-size: 18px; line-height: 161%; } } .first-screen__advantages-item-text > b { font-weight: 700; } .first-screen__buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 32px; } @media (max-width: 768px) { .first-screen__buttons > .button { width: 100%; } } .advantages { margin: 51px 0 116px; } @media (max-width: 768px) { .advantages { margin: 15px 0 90px; } } .advantages .container { display: flex; flex-wrap: wrap; gap: 39px 34px; } @media (max-width: 1240px) { .advantages .container { gap: 24px; } } .advantages__item { padding: 36px 36px 28px; box-sizing: border-box; border-radius: 22px 40px; background-color: #ffffff; } @media (max-width: 768px) { .advantages__item { display: flex; flex-direction: column; align-items: center; padding: 30px 24px; } } @media (max-width: 576px) { .advantages__item { padding: 30px 19px; } } .advantages__item--counter { flex: 1 1 440px; display: flex; flex-direction: column; gap: 20px; padding: 0; background-color: rgba(255, 255, 255, 0); } @media (max-width: 1240px) { .advantages__item--counter { flex: 1 1 100%; align-items: center; } } @media (max-width: 576px) { .advantages__item--counter { gap: 8px; } } .advantages__item--conditions { flex: 0 1 666px; } .advantages__item--detox { flex: 0 1 454px; } .advantages__item--center, .advantages__item--support { flex: 1 1 20%; } @media (max-width: 1240px) { .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support { flex: 1 1 calc(50% - 12px); } } @media (max-width: 768px) { .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support { flex: 1 1 100%; } } .advantages__item-figure { display: flex; align-items: center; justify-content: center; height: 66px; width: 66px; margin: 0 0 20px; border-radius: 80px; background-color: #609eff; } @media (max-width: 768px) { .advantages__item-figure { height: 55px; width: 55px; } } .advantages__item-figure-image { display: block; max-width: 100%; height: auto; } @media (max-width: 768px) { .advantages__item-figure-image { width: 28px; } } .advantages__item-text { font-weight: 500; font-size: 19px; line-height: 146%; color: #878787; } @media (max-width: 768px) { .advantages__item-text { font-size: 18px; line-height: 141%; text-align: center; } } .advantages__item-text--counter { font-weight: 500; font-size: 17px; line-height: 122%; color: #878787; } @media (max-width: 576px) { .advantages__item-text--counter { font-size: 15px; } } .advantages__item-text b { font-weight: 700; } .advantages__item-counter { font-weight: 700; font-size: 174px; line-height: 94%; letter-spacing: 0.06em; text-transform: uppercase; color: #609eff; } @media (max-width: 576px) { .advantages__item-counter { font-size: 120px; } } .facts { margin: 116px 0 100px; } @media (max-width: 768px) { .facts { margin: 90px 0 77px; } } .facts .container { position: relative; } .facts__title { max-width: 702px; margin: 21px auto 27px; } .facts__figure { position: absolute; top: 664px; right: 15px; left: 15px; border-radius: 80px 12px; overflow: hidden; } @media (max-width: 1240px) { .facts__figure { position: static; margin: 0 0 33px; border-radius: 35px 10px; } } .facts__figure-image { display: block; max-height: 546px; max-width: none; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .facts__slider .swiper { overflow: visible; } @media (max-width: 992px) { .facts__slider .swiper { overflow: hidden; } } .facts__slider .swiper-wrapper { position: static; flex-wrap: wrap; } @media screen and (min-width: 992.1px) { .facts__slider .swiper-wrapper { gap: 36px 42px; } } @media (max-width: 992px) { .facts__slider .swiper-wrapper { position: relative; flex-wrap: nowrap; } } .facts__slider .swiper-slide { position: static; height: auto; } @media screen and (min-width: 992.1px) { .facts__slider .swiper-slide { flex: 0 0 calc(33.3333333333% - 28px); } } @media (max-width: 992px) { .facts__slider .swiper-slide { position: relative; } } .facts__slider .swiper-slide:nth-child(-n+3) { margin-bottom: 590px; } @media (max-width: 1240px) { .facts__slider .swiper-slide:nth-child(-n+3) { margin: 0; } } .facts__slide { height: 100%; padding: 24px 36px 34px; box-sizing: border-box; border-radius: 22px 40px; background-color: #ffffff; } @media (max-width: 1240px) { .facts__slide { padding: 24px 20px 36px; } } @media (max-width: 992px) { .facts__slide { padding: 24px 14px 36px; } } .facts__slide-count { margin: 0 0 6px; font-weight: 700; font-size: 59px; line-height: 127%; letter-spacing: 0.05em; color: #ffffff; -webkit-text-stroke: 1px #609eff; } @media (max-width: 992px) { .facts__slide-count { text-align: center; } } @media (max-width: 576px) { .facts__slide-count { font-size: 50px; } } .facts__slide-title { margin: 0 0 9px; } @media (max-width: 992px) { .facts__slide-title { text-align: center; } } .facts__slide-text { margin: 0; font-weight: 400; font-size: 17px; line-height: 146%; color: #878787; } .facts__slide-text > b { font-weight: 600; } @media (max-width: 992px) { .facts__slide-text { font-size: 15px; text-align: center; } } .facts__slider-controls { display: none; justify-content: center; align-items: center; gap: 24px; margin: 35px 0 0; } @media (max-width: 992px) { .facts__slider-controls { display: flex; } } .reviews { margin: 100px 0 98px; } @media (max-width: 768px) { .reviews { margin: 77px 0 92px; } } .reviews__title { margin: 18px 0 21px; } @media (max-width: 768px) { .reviews__title { margin: 21px 0 23px; } } .reviews__slider-controls { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 61px 0 0; }