@media screen and (max-width: 990px) {
    .mobile-first {
        display: flex;
        visibility: hidden;
    }
    .video {
        display: none;
    }
    /* .overlay-welcome,
    .overlay-welcome--content {
        display: none;
    } */
    .header {
        display: none;
    }
    .advantages-item {
        max-width: 50%;
        padding: 0 15px;
    }
    .advantages-header--info {
        max-width: 50%;
        padding: 0 15px;
    }
    .advantages-body {
        margin: 0 -15px;
    }
    .protocol,
    .protocol-container {
        min-height: 40vw;
    }
}

@media screen and (max-width: 768px) {
    .advantages-header--title,
    .readings-title,
    .education-title,
    .contacts-title {
        font-size: 46px;
    }
    .advantages-header--info {
        max-width: fit-content;
        font-size: 14px;
    }
    .advantages-item--title {
        font-size: 20px;
    }
    .advantages-item--description {
        font-size: 14px;
    }
    .advantages-btn a {
        font-size: 14px;
    }
    .advantages-box--item-title {
        font-size: 20px;
    }
    .advantages-box--item-description {
        font-size: 14px;
    }
    .readings-item {
        font-size: 14px;
    }
    .protocol-text {
        font-size: 24px;
    }
    .protocol-btn a {
        font-size: 14px;
    }
    .product-text--title {
        font-size: 40px;
    }
    .product-text--description {
        font-size: 20px;
    }
    .product-order--text {
        font-size: 20px;
    }
    .product-advantages {
        gap: 30px;
    }
    .product-advantages--item {
        font-size: 14px;
    }
    .education-description {
        font-size: 20px;
        max-width: unset;
    }
    .education-item--title {
        font-size: 32px;
    }
    .education-item--description {
        font-size: 18px;
        margin-top: 25px;
    }
    .education-item--text {
        font-size: 16px;
        margin-top: 10px;
    }
    .education-item--btn a {
        font-size: 14px;
    }
    .education-item--back-title {
        font-size: 20px;
    }
    .education-item--back-name {
        font-size: 16px;
    }
    .education-item--back-description {
        font-size: 12px;
    }
    .education-item--back-btn a {
        font-size: 14px;
    }
    .contacts-info--description {
        font-size: 18px;
    }
    .contacts-info--text {
        font-size: 20px;
    }
    .contacts-form--input input,
    .contacts-form--input input::placeholder {
        font-size: 14px;
    }
    .contacts-form form input[type="submit"] {
        font-size: 14px;
    }
    .footer-container--about {
        font-size: 12px;
    }
    .advantages-header {
        flex-wrap: wrap;
    }
    .protocol-container {
        max-height: 350px;
    }

}

@media screen and (max-width: 575px) {

    .btn-animate:hover .btn-circle-animate {
        width: 1000px;
        height: 1000px;
    }
    .product-container {
        background-size: 90%;
        background-position: top center;
        padding: 70vw 25px 30px;
    }
    .product-text {
        max-width: 100%;
    }
    .product-order {
        order: 1;
        max-width: 100%;
        margin-top: 30px;
    }
    .product-advantages {
        gap: 15px;
        margin-top: 30px;
        flex-direction: column;
        max-width: 100%;
    }
    .product-order--btn {
        margin-top: 30px;
    }
    .product-order--btn a {
        font-size: 18px;
        width: 100%; 
        text-align: center;
    }
    .product-advantages--item {
        max-width: 100%;
        font-size: 20px;
    }
    .advantages-header--title, 
    .readings-title, 
    .education-title, 
    .contacts-title {
        text-align: center;
        line-height: 48px;
        font-size: 42px;
    }
    .advantages-header {
        flex-direction: column;
    }
    .advantages-header--info {
        text-align: center;
    }
    .advantages-footer {
        flex-direction: column;
    }
    .advantages-box--item {
        padding: 20px;
    }
    .mobile-first--container--scroll-text {
        width: 80px;
        height: 80px;
    }
    .mobile-first--container--scroll-arrow {
        width: 15px;
        height: 27px;
    }
    .education-container {
        grid: 1fr / 1fr;
        grid-gap: 25px;
    }
    .education-item {
        min-height: 300px;
    }
    .education-item--front,
    .education-item--back {
        padding: 15px;
    }
    .contacts-container {
        grid: 1fr / 1fr;
    }
    .contacts-form--input input, .contacts-form--input input::placeholder {
        padding: 15px 10px;
    }
    .contacts-form form input[type="submit"] {
        width: 100%;
        text-align: center;
        padding: 15px;
        margin-top: 20px;
    }
    .footer-container--menu {
        flex-direction: column;
    }
    .footer-container--menu-phone {
        margin-top: 30px;
    }
    .footer-container--menu-phone a {
        font-size: 16px;
    }
    .footer-container--menu ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-container--menu ul a {
        font-size: 16px;
    }
    .footer-container--menu ul a::after {
        width: 18px;
        height: 18px;
    }
    .footer-container--row {
        justify-content: center;
        margin-bottom: 30px;
    }
    .readings-item {
        padding: 15px;
    }
    .readings-container {
        grid: 1fr 1fr / 1fr 1fr;
    }
    .readings-item.transparent {
        display: none;
    }
    .protocol-container {
        transform: translateY(-50%) scale(0.2);
        top: 0;
    }
    .protocol-text {
        max-width: unset;
    }
    .protocol-container {
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        flex-direction: column;
        max-height: 350px;
    }
    .protocol-btn a {
        font-size: 16px;
        width: 100%;
        text-align: center;
        padding: 15px;
    }
    .protocol-btn {
        margin-top: auto;
    }
}

@media screen and (max-width: 480px) {
    .overlay-welcome,
    .overlay-welcome--content {
        display: none;
    }
    .mobile-first {
        display: none;
    }
    .product {
        margin-top: 0;
    }
    .product-container {
        border-radius: 0;
        background: url('../img/mobile-product.png') no-repeat;
        background-size:contain;
        padding: 0 20px 40px;
        background-position: left 70px;
    }
    .product-text--description {
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 100vw;
    }
    .wrapper {
        padding: 0;
    }
    body {
        background: #000;
    }
    .product-text--title {
        font-size: 60px;
        font-weight: 600;
    }
    .product-text {
        order: 1;
    }
    .product-order {
        order: 2;
    }
    .product-advantages {
        order: 3;
    }
    .product-order--text {
        font-size: 28px;
        font-weight: 600;
    }
    .product-order--btn {
        margin-top: 26px;
    }
    .product-order--btn a {
        padding: 15px 40px;
        display: inline-block;
        width: auto;
        background: #9765ED;
        border: none;
        font-size: 26px;
        font-weight: 500;
    }
    .product-order--btn {
        text-align: center;
    }
    .product-advantages {
        margin-top: 40px;
    }
    .product-advantages--item {
        font-size: 18px;
        font-weight: 400;
    }
    .product-advantages {
        gap: 41px;
    }
    .product-advantages .product-advantages--item:not(:last-of-type)::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: url("../img/product-line.png") center center no-repeat;
        left: 0;
        right: 0;
        bottom: -20px;
    }
    .advantages {
        border-radius: 34px 34px 0 0;
    }
    .advantages-header--title {
        font-size: 30px;
        font-weight: 600;
        text-align: left;
        line-height: normal;
    }
    .advantages {
        padding-top: 30px;
    }
    .advantages-header {
        align-items: flex-start;
    }
    .advantages-header--info {
        text-align: left;
        padding: 0;
        margin-top: 16px;
    }
    .advantages-body {
        display: block;
        margin: 30px 0 0;
    }
    .advantages-item {
        margin: 0;
        max-width: 100%;
    }
    .advantages-item--title {
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }
    .advantages-item--description {
        font-size: 16px;
        font-weight: 400;
        margin-top: 16px;
        padding-bottom: 30px;
        text-align: center;
    }
    .advantages-body .slick-dots li,
    .advantages-body .slick-dots li button,
    .after-before .slick-dots li,
    .after-before .slick-dots li button {
        width: auto;
        height: auto;
    }
    .advantages-body .slick-dots li,
    .after-before .slick-dots li {
        margin: 0 2px;
    }
    .advantages-body .slick-dots li button:before,
    .after-before .slick-dots li button:before {
        width: auto;
        height: auto;
        line-height: normal;
        font-size: 9px;
        position: relative;
    }
    .advantages-body .slick-dots li button,
    .after-before .slick-dots li button {
        padding: 0;
    }
    .advantages-btn {
        padding-top: 30px;
        margin-top: 0;
        text-align: center;
    }
    .advantages-btn a {
        padding: 15px 40px;
        display: inline-block;
        width: auto;
        background: #9765ED;
        border: none;
        font-size: 26px;
        font-weight: 500;
    }
    .advantages-btn a span {
        color: #FFF;
    }
    .advantages-footer {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto auto; 
        padding: 0 20px;
        margin-top: 46px;
        gap: 20px;
    }
    .advantages-footer .advantages-box--item:nth-child(2) {
        grid-column: 1 / 3;
        order: 3;
    }
    .advantages-footer .advantages-box--item:nth-child(1) {
        order: 1;
    }
    .advantages-footer .advantages-box--item:nth-child(3) {
        order: 2;
    }
    .wrapper.without-block {
        padding: 0 20px;
    }
    .advantages-box--item {
        padding: 15px 5px;
        text-align: center;
        border-width: 1px;
    }
    .advantages-box--item-title {
        font-size: 24px;
    }
    .advantages-box--item-description {
        margin-top: 9px;
        font-size: 16px;
        font-weight: 400;
    }
    .readings {
        padding-top: 30px;
    }
    .readings-title {
        font-weight: 600;
        font-size: 30px;
        text-align: left;
    }
    .readings-container {
        padding: 0 20px;
    }
    .readings-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .readings-item {
        font-size: 16px;
        font-weight: 400;
        border: none;
        padding: 0;
        padding-left: 22px;
    }
    .readings-item::before {
        content: '';
        width: 2px;
        height: 2px;
        background: #000;
        position: absolute;
        border-radius: 50%;
        left: 10px;
        top: 8px;
    }
    .readings-br {
        display: none;
    }
    .protocol {
        padding-top: 24px;
    }
    .protocol-container {
        padding: 34px 20px 56px 20px;
        max-height: none;
        border-radius: 34px;
        transform: none;
        background: #9765ED;
    }
    .protocol-container > div {
        opacity: 1;
    }
    .protocol-btn {
        margin-top: 46px;
        padding: 0 36px 0 25px;
    }
    .protocol-btn a {
        padding: 10px 20px;
        border: none;
        background: #FFF;
    }
    .protocol-btn a span {
        color: #9765ED;
        font-size: 26px;
        font-weight: 500;
    }
    .education {
        padding: 0;
    }
    .education-title {
        text-align: left;
        font-size: 30px;
        font-weight: 600;
        padding-top: 30px;
    }
    .education-description {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 500;
    }
    .education-container {
        margin-top: 32px;
        padding: 0 20px;
    }
    .education-item--title {
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }
    .education-item--front {
        padding: 30px 10px;
        border-width: 1px;
    }
    .contacts-form--input input {
        border-width: 1px;
    }
    .form-body--input input {
        border-width: 1px;
    }
    .menu-bar {
        display: none;
    }
    .education-item--description {
        font-size: 20px;
        font-weight: 400;
        margin-top: 10px;
        text-align: center;
    }
    .education-item--text {
        font-size: 16px;
        font-weight: 400;
        text-align: center;
    }
    .education-item--speaker {
        display: block;
        margin-top: 28px;
        font-size: 13px;
        font-weight: 400;
        text-align: center;
    }
    .education-item:hover .education-item--back {
        display: none;
        transform: perspective(90vw) rotateY(-180deg);
    }
    .education-item:hover .education-item--front,
    .education-item--front {
        transform: none;
    }
    .education-item--btn {
        margin-top: 20px;
    }
    .education-item {
        min-height: auto;
    }
    .education-item--btn {
        text-align: center;
    }
    .education-item--btn a {
        padding: 13px 20px;
        display: inline-block;
        width: auto;
        background: #9765ED;
        border: none;
        font-size: 26px;
        font-weight: 500;
        color: #FFF;
    }
    .contacts {
        padding: 30px 0 44px;
        border-radius: 0 0 34px 34px;
    }
    .contacts-title {
        font-size: 24px;
        font-weight: 600;
        text-align: left;
        line-height: normal;
    }
    .contacts-info--description {
        font-size: 16px;
        font-weight: 500;
        margin-top: 20px;
    }
    .contacts-info--text {
        font-size: 20px;
        font-weight: 600;
        margin-top: 15px;
    }
    .contacts-form form input[type="submit"] {
        padding: 13px 20px;
        display: inline-block;
        width: auto;
        background: #9765ED;
        border: none;
        font-size: 26px;
        font-weight: 500;
        color: #FFF;
        margin: 20px auto 0;
    }
    .footer-container--logo {
        max-width: 65px;
    }
    .footer-container--row {
        gap: 20px;
        align-items: flex-end;
    }
    .footer-container--about {
        font-size: 10px;
        font-weight: 500;
    }
    .footer-container--about span {
        font-size: 15px;
    }
    .footer-container--menu {
        display: flex;
        flex-direction: row-reverse;
    }
    .footer-container--menu ul a {
        font-size: 0;
        width: 30px;
        height: 30px;
        background: #9765ED;
        border-radius: 50%;
    }
    .footer-container--menu ul a::after {
        display: none;
    }
    .footer-container--menu ul li a::before {
        content: '';
        width: 20px;
        height: 20px;
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    .footer-container--menu ul li.snabeauty a::before {
        background: url('../img/sna.svg') no-repeat center center;
        background-size: contain;
    }
    .footer-container--menu ul li.vk a::before {
        background: url('../img/vk-2.svg') no-repeat center center;
        background-size: contain;
    }
    .footer-container--menu ul li.inst a::before {
        background: url('../img/inst.svg') no-repeat center center;
        background-size: contain;
        width: 30px;
        height: 30px;
    }
    .footer-container--menu ul li.tg a::before {
        background: url('../img/tg-2.svg') no-repeat center center;
        background-size: contain;
    }
    .footer {
        padding: 30px 0px 37px;
    }
    .header {
        display: flex;
    }
    .footer-container--menu-phone {
        margin-top: 0;
    }
    .footer-container--row {
        margin-bottom: 0;
    }
    .footer-container--menu {
        margin-top: 20px;
    }
    .footer-container--menu ul {
        gap: 10px;
    }
    .protocol-container {
        min-height: auto;
    }
    .protocol {
        min-height: auto;
    }
    .header {
        position: sticky;
        top: 0;
        z-index: 35;
        width: 100%;
    }
    .header > .wrapper {
        display: none;
    }
    .header-mobile {
        background: #000;
        display: flex;
        justify-content: flex-end;
        padding: 0px 20px;
        width: 100%;
        z-index: 3;
    }
    .top-header--burger {
        display: flex;
        flex-direction: column;
        width: 27px;
        gap: 4px;
        padding: 40px 0;
    }
    .top-header--burger span {
        display: block;
        background: #FFF;
        width: 100%;
        height: 2px;
        border-radius: 6px;
        transition: .3s ease-in-out;
    }
    .header.active .top-header--burger span:first-of-type {
        transform: rotate(-45deg) translateY(4px);
    }
    .header.active .top-header--burger span:last-of-type {
        transform: rotate(45deg) translateY(-5px);
    }
    .header.active > .wrapper {
        display: flex;
        position: sticky;
        background: #000;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
    }
    .header {
        display: flex;
        flex-direction: column;
    }
    .top-header--logo {
        display: none;
    }
    .top-header {
        padding: 0 20px;
        height: 100%;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top-header--menu ul {
        display: flex;
        flex-direction: column;
        gap: 17px;
    }
    .top-header--menu ul .current a, 
    .top-header--menu ul a:hover,
    .top-header--menu ul a {
        border: none;
        color: #FFF;
        font-size: 25px;
        font-weight: 400;
    }
    .top-header--menu ul {
        padding: 0;
    }
    .mobile-first--container {
        display: flex;
        height: auto;
        color: #FFF;
    }
    .mobile-first--img {
        font-size: 0;
    }
    .mobile-first--letter, .mobile-first--img-bracket {
        font-size: 70px;
    }
    .top-header {
        justify-content: flex-start;
        padding-top: 100px;
    }
    .top-header--menu nav {
        margin-top: 30px;
    }
    .form-container {
        top: 100px;
        left: 30px;
        right: 30px;
        transform: none;
        padding: 0;
    }
    .form-title {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .form-subtitle {
        font-size: 16px;
        font-weight: 400;
    }
    .form-body--input input {
        padding: 10px 15px;
    }
    .form-body--input {
        margin: 10px 0;
    }
    .form-body input[type="submit"] {
        padding: 13px 20px;
        display: inline-block;
        width: auto;
        background: #9765ED;
        border: none;
        font-size: 26px;
        font-weight: 500;
        color: #FFF;
        margin: 20px auto 0;
    }
    .form-body form {
        display: flex;
        flex-direction: column;
    }
    .form-footer {
        margin-top: 40px;
        color: #5C5C5C;
        font-size: 14px;
        font-weight: 400;
    }
    .education-item--back {
        display: none;
    }
    .ab-title {
        text-align: left;
        font-size: 30px;
        font-weight: 600;
        padding-top: 30px;
    }
    .ab-item img {
        max-width: 100%;
    }
    .ab-item {
        padding: 0;
    }
    .ab-arrows--item {
        width: 30px;
        height: 30px;
    }
    .after-before {
        padding-bottom: 0;
    }
    .ab-slider {
        margin-top: 15px;
    }
}

/* @media screen and (max-width: 420px) {
    .readings-container {
        grid: 1fr / 1fr;
    }
    .advantages-body {
        flex-direction: column;
    }
    .advantages-item {
        max-width: 100%;
    }
    .education-item--btn a {
        padding: 15px;
        width: 100%;
        text-align: center;
    }
    .education-item--back-btn a {
        display: none;
    }
} */