/*-------------------- begin reset styles --------------------*/

* {
    font-size: 100%;
	margin: 0;
	padding: 0;
	border: none;
    box-sizing: border-box;
}

ol {
    list-style: decimal;
}

ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

label {
	user-select: none;
}

img {
    display: block;
}

/*-------------------- end reset styles --------------------*/


/*-------------------- begin require fonts --------------------*/

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Caveat';
	src: url('../fonts/Caveat.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

/*-------------------- end require fonts --------------------*/


/*-------------------- begin basic styles --------------------*/

html,
body,
button,
a {
	font: 24px/1.4 'Inter', Arial;
	font-weight: 400;
	color: #333;
}

html,
body{
    background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
    line-height: 1.2;
    color: #111;
}

h1,
h2,
.h1,
.h2 {
    font-weight: 900;
}

h3,
h4,
h5,
.h3,
.h4,
.h5 {
    font-weight: 600;
}

h1,
.h1 {
    font-size: 80px;
}

h2,
.h2 {
    font-size: 56px;
}

h3,
.h3 {
    font-size: 32px;
}

.italic {
    font-style: italic;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

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

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-uppercase {
	text-transform: uppercase;
}

.wrap {
	display: block;
}

.d-none {
    display: none;
}

.flex {
	display: flex;
}

.flex-row-wrap {
    flex-flow: row wrap;
}

.flex-row-nowrap {
    flex-flow: row nowrap;
}

.flex-column-wrap {
    flex-flow: column wrap;
}

.flex-column-nowrap {
    flex-flow: column nowrap;
}

.flex-justify-start {
	justify-content: flex-start;
}

.flex-justify-end {
	justify-content: flex-end;
}

.flex-justify-between {
	justify-content: space-between;
}

.flex-justify-center {
	justify-content: center;
}

.flex-align-start {
	align-items: flex-start;
}

.flex-align-center {
	align-items: center;
}

.flex-align-end {
	align-items: flex-end;
}

.overflow-hidden {
    overflow: hidden;
}

.text-green {
    color: #00A667;
}

.text-wavy {
    padding-bottom: 6px;
    position: relative;
}

.text-wavy::before {
    display: block;
    content: '';
    width: 100%;
    height: 4px;
    background: url('../img/border-bottom.svg') no-repeat center / 100%;
    transform: matrix(1, 0, 0, -1, 0, 0);
    position: absolute;
    left: 0;
    bottom: 0;
}

.d-flex-mobile {
    display: none;
}

/*-------------------- end basic styles --------------------*/


/*-------------------- begin ui kit styles --------------------*/

.btn {
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    padding: 16px 40px;
    border-radius: 68px;
}

.btn:hover,
.link:hover {
    cursor: pointer;
}

.btn.btn-big {
    padding-top: 24px;
    padding-bottom: 24px;
}

.btn.btn-green {
    background-color: #00A667;
}

.btn.btn-green:hover {
    background-color: #0BD488;
}

.btn.btn-green:focus {
    background-color: #11E595;
}

.btn.btn-black {
    background-color: #021C12;
}

.btn.btn-black:hover {
    background-color: #03452C;
}

.btn.btn-black:focus {
    background-color: #066642;
}

.link {
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
    background-color: transparent;
}

.link:hover,
.link:focus {
    border-bottom: 1px solid #fff;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    padding: 24px;
    border-radius: 16px;
    filter: drop-shadow(0px 0px 56px rgba(94, 119, 107, 0.25));
    position: absolute;
    bottom: 114px;
    z-index: 10;
    user-select: none;
    transition: visibility .2s, opacity .2s;
}

.tooltip::before {
    display: block;
    content: '';
    width: 51px;
    height: 51px;
    background: url('../img/arrow.svg') no-repeat center / 100%;
    position: absolute;
    bottom: -30px;
}

.tooltip__title {
    font-size: 24px;
    margin-bottom: 8px;
}

.tooltip__list {
    padding-left: 20px;
}

.tooltip-list__item {
    font-size: 16px;
    list-style: disc;
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/*-------------------- end ui kit styles --------------------*/


/*-------------------- begin main styles --------------------*/

.modal-container {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: visibility .3s, opacity .3s;
}

.modal-container.active {
    visibility: visible;
    opacity: 1;
}

.modal {
    flex: 0 1 1091px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 40px;
    background-color: #fff;
    border-radius: 48px;
    position: relative;
}

.modal__content {
    max-width: 610px;
}

.modal__btn-close {
    font-size: 20px;
    color: #111;
    background-color: transparent;
    margin-bottom: 8px;
    padding-left: 28px;
    position: relative;
}

.modal__btn-close:hover {
    cursor: pointer;
}

.modal__btn-close::before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('../img/close.svg') no-repeat center / 100%;
    position: absolute;
    top: 2px;
    left: 0;
}

.modal__title {
    margin-bottom: 16px;
}

.modal__text {
    font-size: 20px;
    margin-bottom: 32px;
}

.modal-form__input {
    font-size: 16px;
    width: 100%;
    padding: 18px 16px;
    background-color: #F5F5F5;
    border: 1px solid #021C12;
    border-radius: 12px;
}

.modal-form__input:focus {
    outline: none;
    border-color: #00A667;
}

.modal-form__input::placeholder {
    color: #000000;
}

.modal__btn {
    width: 100%;
}

.modal__img {
    max-width: 470px;
    height: auto;
    position: absolute;
    right: -55px;
    bottom: 0;
}

.btn.btn-absolute {
    padding-top: 36px;
    padding-bottom: 36px;
    max-width: 480px;
    width: 100%;
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    transition: max-width .5s, background-color .5s;
    z-index: 90;
}

.btn.btn-absolute:hover {
    max-width: calc(100% - 16px);
    background-color: #00A667;
}

.header {
    width: 100%;
    padding-top: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.header__logo {
    display: inline-block;
}

.header-logo__img {
    max-width: 203px;
    height: auto;
}

.intro__container {
    padding-top: 148px;
    padding-bottom: 250px;
    position: relative;
}

.intro__title,
.intro__content {
    position: relative;
    z-index: 2;
}

.intro__img {
    position: absolute;
    right: -50px;
    bottom: 64px;
}

.intro__content {
    max-width: 469px;
    margin-top: 128px;
}

.intro-content__title {
    display: inline-block;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 16px;
}

.intro__star {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    z-index: 1;
}

.intro__star.intro__star--icon-1 {
    background-image: url('../img/star-1.svg');
}

.intro__star.intro__star--icon-2 {
    background-image: url('../img/star-2.svg');
}

.intro__star.intro__star--size-1 {
    width: 24px;
    height: 24px;
}

.intro__star.intro__star--size-2 {
    width: 29px;
    height: 29px;
}

.intro__star.intro__star--size-3 {
    width: 42px;
    height: 42px;
}

.intro__star.intro__star--size-4 {
    width: 54px;
    height: 54px;
}

.intro__star.intro__star--size-5 {
    width: 70px;
    height: 70px;
}

.intro__star.intro__star--icon-number-1 {
    left: 1%;
    bottom: 12%;
}

.intro__star.intro__star--icon-number-2 {
    top: 40%;
    left: 10%;
}

.intro__star.intro__star--icon-number-3 {
    top: 47%;
    left: 28%;
}

.intro__star.intro__star--icon-number-4 {
    left: 27%;
    bottom: 15%;
}

.intro__star.intro__star--icon-number-5 {
    top: 7%;
    left: 49%;
}

.intro__star.intro__star--icon-number-6 {
    top: 6%;
    left: 72%;
}

.intro__star.intro__star--icon-number-7 {
    top: 2%;
    right: 4%;
}

.intro__star.intro__star--icon-number-8 {
    top: 35%;
    right: 0;
}

.directions {
    padding: 64px 0;
    background: url('../img/sphere-1.png') no-repeat 100% 100% / auto #00A667;
    border-radius: 80px;
    position: relative;
}

.directions__title,
.directions__text {
    color: #fff;
}

.directions__title {
    margin-bottom: 16px;
}

.directions__text {
    margin-bottom: 40px;
}

.directions__link {
    display: inline-block;
    margin-top: 24px;
}

.directions__tags {
    max-width: 900px;
    margin: -8px;
}

.directions-tags__item {
    margin: 8px;
    position: relative;
}

.directions-tags-item__text {
    font-size: 28px;
    font-weight: 600;
    background-color: #fff;
    padding: 22px 40px 22px 100px;
    border-radius: 20px;
    user-select: none;
}

.directions-tags-item__text::before {
    display: block;
    content: '';
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
}

.directions-tags__item.directions-tags__item--icon-dollars .directions-tags-item__text::before {
    background-image: url('../img/emoji-1.svg');
}

.directions-tags__item.directions-tags__item--icon-it .directions-tags-item__text::before {
    background-image: url('../img/emoji-2.svg');
}

.directions-tags__item.directions-tags__item--icon-avocado .directions-tags-item__text::before {
    background-image: url('../img/emoji-3.svg');
}

.directions-tags__item.directions-tags__item--icon-guitar .directions-tags-item__text::before {
    background-image: url('../img/emoji-4.svg');
}

.directions-tags__item.directions-tags__item--icon-palette .directions-tags-item__text::before {
    background-image: url('../img/emoji-5.svg');
}

.directions-tags__item.directions-tags__item--icon-brain .directions-tags-item__text::before {
    background-image: url('../img/emoji-6.svg');
}

.directions-tags__item:hover .directions-tags-item__tooltip {
    visibility: visible;
    opacity: 1;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-1 {
    width: 478px;
    left: 70px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-2 {
    width: 390px;
    left: -85px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-3 {
    width: 480px;
    left: -45px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-4 {
    width: 399px;
    left: 75px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-5 {
    width: 537px;
    left: -115px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-6 {
    width: 339px;
    left: -10px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-1::before,
.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-4::before {
    left: 35px;
}

.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-2::before,
.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-3::before,
.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-5::before,
.directions-tags-item__tooltip.directions-tags-item__tooltip--tooltip-6::before {
    left: 50%;
    transform: translateX(-50%);
}

.about {
    margin-top: -80px;
    padding-top: 200px;
    padding-bottom: 120px;
    background-color: #2E2E2E;
}

.about-content {
    flex: 0 1 820px;
    margin-right: 37px;
}

.about-content__title,
.about-content__text {
    color: #fff;
}

.about-content__title {
    margin-bottom: 24px;
}

.about-content__text {
    max-width: 595px;
    margin-bottom: 10px;
}

.about-content__text:last-of-type {
    margin-bottom: 0;
}

.about__img {
    max-width: 494px;
    width: 100%;
    height: auto;
}

.benefit {
    background-color: #2E2E2E;
    padding-bottom: 120px;
}

.benefit__title,
.benefit-cards-item__title,
.benefit-cards-item__text {
    color: #fff;
}

.benefit__title {
    margin-bottom: 40px;
}

.benefit__cards {
    margin-bottom: 20px;
}

.benefit__cards:last-of-type {
    margin-bottom: 0;
}

.benefit-cards__item {
    margin-right: 20px;
    padding: 40px;
    background-repeat: no-repeat;
    background-color: #434343;
    border-radius: 32px;
}

.benefit-cards__item:last-child {
    margin-right: 0;
}

.benefit-cards__item.benefit-cards__item--item-1 {
    flex: 0 1 45%;
    background-image: url('../img/service-benefit-1.png');
    background-position: calc(100% - 10px) 30px;
    background-size: 258px auto;
}

.benefit-cards__item.benefit-cards__item--item-2 {
    flex: 1 1 52%;
    background-image: url('../img/service-benefit-2.png');
    background-position: right bottom;
    background-size: 199px auto;
}

.benefit-cards__item.benefit-cards__item--item-3 {
    flex: 0 1 53%;
    background-image: url('../img/service-benefit-3.png');
    background-position: right 2px;
    background-size: 278px auto;
}

.benefit-cards__item.benefit-cards__item--item-4 {
    flex: 1 1 44%;
    background-image: url('../img/service-benefit-4.png');
    background-position: right bottom;
    background-size: 269px auto;
}

.benefit-cards-item__title {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.benefit-cards-item__text {
    font-size: 20px;
}

.benefit-cards__item.benefit-cards__item--item-1 .benefit-cards-item__text {
    max-width: 300px;
}

.benefit-cards__item.benefit-cards__item--item-2 .benefit-cards-item__text,
.benefit-cards__item.benefit-cards__item--item-4 .benefit-cards-item__text {
    max-width: 400px;
}

.benefit-cards__item.benefit-cards__item--item-3 .benefit-cards-item__text {
    max-width: 376px;
}

.how-work {
    background-color: #2E2E2E;
}

.how-work__inner-container {
    background-color: #fff;
    padding: 64px 0 0;
    border-radius: 80px 80px 0 0;
}

.how-work__title,
.how-work__list {
    flex: 0 1 50%;
}

.how-work__title {
    position: sticky;
    top: 45%;
}

.how-work__list {
    counter-reset: list;
}

.how-work-list__item {
    margin-bottom: 20px;
    padding: 24px;
    background-color: #F5F5F5;
    border-radius: 32px;
}

.how-work-list__item::before {
    display: block;
    counter-increment: list;
    content: counter(list);
    font-size: 28px;
    font-weight: 600;
    line-height: 52px;
    text-align: center;
    color: #00A667;
    background-color: #fff;
    width: 52px;
    height: 52px;
    margin-bottom: 32px;
    border-radius: 50%;
}

.how-work-list__item:last-child {
    margin-bottom: 0;
}

.how-work-list-item__title {
    line-height: 1.4;
    margin-bottom: 8px;
}

.app-info__content {
    max-width: 630px;
}

.app-info__wrapper {
    background-color: #F5F5F5;
    padding: 48px 40px;
    border-radius: 32px;
    position: relative;
}

.app-info__title {
    margin-bottom: 16px;
}

.app-info__text {
    margin-bottom: 40px;
}

.app-info__text-small {
    font-size: 16px;
    margin-bottom: 16px;
}

.app-info__btn {
    width: 100%;
}

.app-info__img {
    max-width: 657px;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}

.rates {
    padding: 180px 0;
}

.rates__title {
    margin-bottom: 16px;
}

.rates__text {
    margin-bottom: 48px;
}

.rates-row__item {
    flex: 0 1 50%;
    margin-right: 20px;
    padding: 48px;
    border-radius: 40px;
}

.rates-row__item:last-child {
    margin-right: 0;
}

.rates-row__item.rates-row__item--item-1 {
    background: url('../img/label-1.svg') no-repeat right top / auto #00A667;
}

.rates-row__item.rates-row__item--item-2 {
    background: url('../img/label-2.svg') no-repeat right top / auto,
                url('../img/sphere-3.png') no-repeat center / cover #021C12;
}

.rates-row-item__price,
.rates-row-item__text {
    color: #fff;
}

.rates-row-item__price {
    margin-bottom: 8px;
}

.rates-row-item-price__big-price,
.rates-row-item-price__small-price {
    display: inline-block;
}

.rates-row-item-price__big-price {
    font-size: 56px;
    font-weight: 900;
}

.rates-row-item-price__small-price {
    font-size: 32px;
    font-weight: 500;
    text-decoration: line-through;
    color: rgba(255, 255, 255, .5);
    margin-left: 15px;
}

.rates-row-item__text {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
}

.rates-row-item__btn {
    width: 100%;
}

.why-profitable__main {
    flex: 0 1 30%;
}

.why-profitable__title {
    margin-bottom: 32px;
}

.why-profitable__scheme {
    width: 330px;
    height: 327px;
    background: url('../img/money-2.svg') no-repeat left top / auto 100%;
}

.why-profitable-scheme__text {
    font-family: 'Caveat';
    font-size: 24px;
    color: #00A667;
    max-width: 150px;
}

.why-profitable-scheme__text:last-child {
    margin-left: auto;
}

.why-profitable__content {
    flex: 0 1 65%;
}

.why-profitable-content__text {
    margin-bottom: 10px;
}

.why-profitable-content__text:last-child {
    margin-bottom: 0;
}

.support {
    padding: 92px 0 180px;
}

.support__content {
    flex: 0 1 888px;
}

.support-content__title {
    margin-bottom: 24px;
}

.support__link {
    border-radius: 50%;
}

.support-link__img {
    max-width: 256px;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.mentor__wrapper {
    padding: 40px;
    background: url('../img/sphere-2.png') no-repeat right top / auto #00A667;
    border-radius: 32px;
}

.mentor__content {
    flex: 0 1 55%;
}

.mentor-content__title,
.mentor-content__text {
    color: #fff;
}

.mentor-content__title {
    margin-bottom: 24px;
}

.mentor-content__text {
    font-size: 20px;
}

.mentor__btn {
    flex: 0 1 400px;
}

.community {
    margin: 180px 0 44px;
}

.community__img {
    margin: 0 auto 24px;
}

.community__title {
    max-width: 1300px;
    margin: 0 auto 44px;
}

.community__btn {
    width: 100%;
}

.footer {
    padding-bottom: 24px;
}

.footer__copyright,
.footer__text,
.footer-creator__text {
    font-size: 16px;
}

.footer__copyright {
    margin-right: 40px;
}

.footer__creator {
    margin-left: auto;
}

.footer-creator__text {
    margin-right: 8px;
}

/*-------------------- end main styles --------------------*/


/*-------------------- begin responsive styles --------------------*/

@media screen and (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }

    .intro__img {
        width: 70%;
        height: auto;
    }

    .about-content {
        flex-basis: 640px;
    }

    .about__img {
        max-width: 400px;
    }

    .benefit-cards__item.benefit-cards__item--item-1 {
        background-size: 158px auto;
        background-position: calc(100% - 10px) 78px;
    }

    .benefit-cards__item.benefit-cards__item--item-2 {
        background-size: 170px auto;
    }

    .benefit-cards__item.benefit-cards__item--item-3 {
        background-position: right 50px;
        background-size: 180px auto;
    }

    .benefit-cards__item.benefit-cards__item--item-4 {
        background-size: 190px auto;
    }

    .app-info__img {
        max-width: 480px;
    }

    .mentor__content {
        flex-basis: 63%;
    }

    .mentor__btn {
        flex-basis: 350px;
    }

    .why-profitable__main {
        flex-basis: 35%;
    }

    .why-profitable__content {
        flex-basis: 60%;
    }

    .support__content {
        flex-basis: 60%;
    }

    .footer__text {
        flex-basis: 350px;
    }
}

@media screen and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .intro__container {
        padding-bottom: 90px;
    }

    .intro__img {
        width: 60%;
    }

    .intro__star.intro__star--icon-number-4 {
        display: none;
    }

    .about__content {
        flex-basis: 550px;
    }

    .about__img {
        max-width: 360px;
    }

    .benefit-cards__item.benefit-cards__item--item-1 {
        background-position: calc(100% - 10px) 100px;
    }

    .benefit-cards__item.benefit-cards__item--item-1 .benefit-cards-item__text {
        max-width: 250px;
    }

    .benefit-cards__item.benefit-cards__item--item-2 .benefit-cards-item__text,
    .benefit-cards__item.benefit-cards__item--item-4 .benefit-cards-item__text {
        max-width: 315px;
    }

    .benefit-cards__item.benefit-cards__item--item-3 .benefit-cards-item__text {
        max-width: 285px;
    }

    .benefit-cards__item.benefit-cards__item--item-3 {
        background-position: right 80px;
    }

    .rates__row {
        flex-flow: row wrap;
    }

    .rates-row__item {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 16px;
    }

    .rates-row__item:last-child {
        margin-bottom: 0;
    }

    .app-info__content {
        max-width: 430px;
    }

    .mentor__wrapper {
        background-image: url('../img/sphere-mobile-2.png');
        background-position: right bottom;
    }

    .mentor__content {
        flex-basis: 100%;
        margin-bottom: 65px;
    }

    .mentor__btn {
        flex: 0 1 100%;
    }

    .modal__img {
        max-width: 420px;
        right: 0;
    }

    .footer__copyright {
        margin-right: 20px;
    }

    .footer__text {
        max-width: 280px;
    }

    .modal__img {
        max-width: 310px;
    }
}

@media screen and (max-width: 991px) {
    html,
    body,
    button,
    a {
        font-size: 18px;
    }

    h1,
    .h1 {
        font-size: 32px;
    }

    h2,
    .h2 {
        font-size: 24px;
    }

    h3,
    .h3 {
        font-size: 20px;
    }

    .container {
        max-width: 720px;
    }

    .btn {
        font-size: 16px;
        padding: 13px 24px;
    }
    
    .btn.btn-big {
        padding: 19px 32px;
    }

    .btn.btn-absolute {
        max-width: calc(100% - 16px);
        padding-top: 26px;
        padding-bottom: 26px;
        bottom: 32px;
    }

    .d-flex-mobile {
        display: flex;
    }

    .d-none-mobile {
        display: none;
    }

    .header {
        padding-top: 24px;
    }

    .header-logo__img {
        max-width: 134px;
    }

    .intro__container {
        padding-top: 80px;
        padding-bottom: 88px;
    }

    .intro__star.intro__star--size-2 {
        width: 24px;
        height: 24px;
    }

    .intro__star.intro__star--size-4 {
        width: 32px;
        height: 32px;
    }

    .intro__img {
        max-width: 375px;
        width: 100%;
        margin: 0 auto;
        position: static;
    }

    .intro__content {
        margin-top: 32px;
        max-width: 100%;
    }

    .intro-content__title {
        font-size: 24px;
    }

    .intro__star.intro__star--icon-number-5,
    .intro__star.intro__star--icon-number-6,
    .intro__star.intro__star--icon-number-7 {
        display: none;
    }

    .intro__star.intro__star--icon-number-1 {
        left: unset;
        right: 5%;
        bottom: 29%;
    }

    .intro__star.intro__star--icon-number-2 {
        top: 27%;
        left: 25%;
    }

    .intro__star.intro__star--icon-number-3 {
        top: 59%;
        left: 28%;
    }

    .intro__star.intro__star--icon-number-8 {
        top: 24%;
        right: 8%;
    }

    .directions {
        background-image: url('../img/sphere-mobile-1.png');
        padding-top: 40px;
        padding-bottom: 48px;
        border-radius: 32px;
    }

    .directions__title {
        margin-bottom: 8px;
    }

    .directions__text {
        margin-bottom: 24px;
    }

    .directions__link {
        font-size: 16px;
        text-align: left;
        max-width: 146px;
        margin-top: 32px;
    }

    .link {
        line-height: 1.4;
    }

    .link:hover {
        text-decoration: underline;
        border: none;
    }

    .directions__tags {
        margin: -2px;
    }

    .directions-tags__item {
        margin: 2px;
    }

    .directions-tags-item__text {
        font-size: 16px;
        font-weight: 500;
        padding: 19px 24px 19px 68px;
    }

    .directions-tags-item__text::before {
        width: 36px;
        height: 36px;
        left: 24px;
    }

    .directions-tags__item .directions-tags-item__tooltip,
    .directions-tags__item:hover .directions-tags-item__tooltip {
        display: none;
    }

    .about {
        margin-top: -40px;
        padding-top: 128px;
        padding-bottom: 87px;
    }

    .about__content {
        flex-basis: 100%;
        margin-right: 0;
        margin-bottom: 32px;
    }

    .about-content__text {
        max-width: 100%;
    }

    .about__img {
        max-width: 375px;
        width: 100%;
        margin: 0 auto;
    }

    .benefit {
        padding-bottom: 88px;
    }

    .benefit__title {
        margin-bottom: 32px;
    }

    .benefit__cards {
        flex-flow: row wrap;
        margin-bottom: 16px;
    }

    .benefit-cards__item {
        min-height: 400px;
        margin-right: 0;
        margin-bottom: 16px;
        padding: 24px 16px;
        border-radius: 16px;
    }

    .benefit-cards__item:last-child {
        margin-bottom: 0;
    }

    .benefit-cards__item.benefit-cards__item--item-1,
    .benefit-cards__item.benefit-cards__item--item-2,
    .benefit-cards__item.benefit-cards__item--item-3,
    .benefit-cards__item.benefit-cards__item--item-4 {
        flex-basis: 100%;
        background-position: right bottom;
    }

    .benefit-cards__item.benefit-cards__item--item-1 {
        background-image: url('../img/service-benefit-mobile-1.png');
        background-size: 328px auto;
        background-position: left bottom;
    }

    .benefit-cards__item.benefit-cards__item--item-2 {
        background-image: url('../img/service-benefit-mobile-2.png');
        background-size: 216px auto;
    }

    .benefit-cards__item.benefit-cards__item--item-3 {
        background-image: url('../img/service-benefit-mobile-3.png');
        background-size: 327px auto;
    }

    .benefit-cards__item.benefit-cards__item--item-4 {
        background-size: 250px auto;
    }

    .benefit-cards-item__title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .benefit-cards-item__text {
        font-size: 16px;
    }

    .benefit-cards__item.benefit-cards__item--item-1 .benefit-cards-item__text,
    .benefit-cards__item.benefit-cards__item--item-2 .benefit-cards-item__text,
    .benefit-cards__item.benefit-cards__item--item-3 .benefit-cards-item__text,
    .benefit-cards__item.benefit-cards__item--item-4 .benefit-cards-item__text {
        max-width: 100%;
    }

    .how-work__inner-container {
        padding-top: 40px;
        padding-bottom: 88px;
        border-radius: 32px 32px 0 0;
    }

    .how-work__wrapper {
        flex-flow: row wrap;
    }

    .how-work__title,
    .how-work__list {
        flex-basis: 100%;
    }

    .how-work__title {
        margin-bottom: 24px;
        position: static;
    }

    .how-work-list__item {
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 16px;
    }

    .how-work-list__item::before {
        line-height: 40px;
        width: 40px;
        height: 40px;
    }

    .app-info__wrapper {
        padding: 24px 16px;
        padding-bottom: 0;
    }

    .app-info__content {
        max-width: 100%;
        margin-bottom: 12px;
    }

    .app-info__text {
        margin-bottom: 32px;
    }

    .app-info__img {
        width: 100vw;
        margin-left: -32px;
        position: static;
    }

    .rates {
        padding: 32px 0 88px;
    }

    .rates__text {
        margin-bottom: 32px;
    }

    .rates-row__item {
        padding: 40px 24px 24px;
        border-radius: 32px;
    }

    .rates-row__item.rates-row__item--item-1 {
        background-image: url('../img/label-mobile-1.svg');
    }

    .rates-row__item.rates-row__item--item-2 {
        /* background-image: url('../img/label-mobile-2.svg'); */
        background-image: url('../img/label-mobile-2.svg'),
                          url('../img/sphere-mobile-3.png');
    }

    .rates-row-item-price__big-price {
        font-size: 32px;
    }

    .rates-row-item-price__small-price {
        font-size: 20px;
        margin-left: 2px;
    }

    .rates-row-item__text {
        font-size: 20px;
    }

    .why-profitable__title {
        margin-bottom: 16px;
    }

    .why-profitable__main,
    .why-profitable__content {
        flex-basis: 100%;
    }

    .why-profitable__content {
        margin-bottom: 32px;
    }

    .support {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .support__content {
        flex-basis: 100%;
        margin-bottom: 32px;
    }

    .support-content__title {
        margin-bottom: 16px;
    }

    .support__link {
        margin-left: auto;
        margin-right: auto;
    }

    .mentor__wrapper {
        padding: 24px 16px;
    }

    .mentor-content__title {
        margin-bottom: 16px;
    }

    .mentor-content__text {
        font-size: 16px;
    }

    .community {
        margin-top: 88px;
    }

    .community__title {
        word-wrap: break-word;
        hyphens: auto;
    }

    .community__img {
        width: 151px;
        height: auto;
    }

    .footer__copyright,
    .footer__text,
    .footer__creator {
        flex: 0 1 100%;
    }

    .footer__copyright,
    .footer__text {
        text-align: center;
        color: rgba(0, 0, 0, .6);
    }

    .footer__copyright {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .footer__text {
        max-width: 100%;
        margin-bottom: 16px;
    }

    .footer__creator {
        justify-content: center;
        margin-left: 0;
    }

    .footer-creator-link__img {
        max-width: 180px;
        height: auto;
    }

    .modal {
        padding: 24px 16px;
        border-radius: 32px;
    }

    .modal__content {
        max-width: 100%;
    }

    .modal__btn-close {
        font-size: 16px;
        margin-bottom: 16px;
        padding-left: 22px;
    }

    .modal__btn-close::before {
        width: 20px;
        height: 20px;
        top: 1px;
    }

    .modal__text {
        font-size: 16px;
    }

    .modal__img {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .container {
        max-width: 540px;
    }
}

@media screen and (max-width: 575px) {
    .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/*-------------------- end responsive styles --------------------*/