* {
    padding: 0;
    margin: 0;
    border: 0
}



.favorites-list .catalog__body-main-block-item {
    max-height: max-content;
}

.recipe__body-main-user-section-commetns .children {
    display: none !important;
}

/**/
.comment-list .blog-comment-item:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--med-grey);
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}

.star-rating::before {
    content: "\73\73\73\73\73";
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: "\53\53\53\53\53";
    color: #F9C000;
    top: 0;
    position: absolute;
    left: 0;
}





/* */



/*Account*/


.user {
    width: 100%;
    margin-top: 24px;
}

.user__body {
    width: 100%;
    display: flex;
    gap: 24px;
}

.user__body-navigation {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 282px;
    max-width: 282px;
}

.user__body-navigation-top {
    padding: 24px;
    background: var(--white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}

.user__body-navigation-top-profile {
    display: flex;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--black);
}

.user__body-navigation-top-profile .image {
    width: 45px;
    height: 45px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.user__body-navigation-top-profile .image img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.user__body-navigation-top-profile .image img:nth-child(1) {
    z-index: 0;
}

.user__body-navigation-top-profile .image img:nth-child(2) {
    z-index: 1;
}

.user__body-navigation-top-profile .wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.user__body-navigation-top-profile .wrap p {
    color: var(--grey);
}

.user__body-navigation-top-menu {
    display: flex;
    flex-direction: column;
}

.user__body-navigation-top-menu button.current {
    color: var(--yellow);
}

.user__body-navigation-top-menu button:hover {
    color: var(--yellow);
}

.user__body-navigation-top-menu button {
    color: var(--yellow);
}

.user__body-navigation-top-menu button,
.user__body-navigation-top-menu a {
    padding: 14px 0;
    display: flex;
    gap: 8px;
    background: transparent;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    color: var(--black);
    white-space: nowrap;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.user__body-navigation-ingredients {
    background: #fff;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
    width: 100%
}

.user__body-navigation-ingredients span {
    color: var(--black)
}

.user__body-navigation-ingredients div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px
}

.user__body-navigation-ingredients div a {
    padding: 4px 12px;
    background: var(--green-dark);
    color: var(--white);
    border-radius: 1000px
}

.profile {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile__wrap {
    display: flex;
    gap: 24px;
}

.profile__wrap-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 486px;
}

.profile__wrap-info-user {
    padding: 16px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
}

.profile__wrap-info-user form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile__wrap-info-user form .input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile__wrap-info-user form .input p {
    color: var(--grey);
}

.profile__wrap-info-user form .input p span {
    color: var(--red);
}

.profile__wrap-info-user form .input input {
    width: 454px;
    padding: 16.5px 16px;
    color: var(--black);
    border-radius: 24px;
    border: 1px solid var(--grey);
}

.profile__wrap-info-user form .submit {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile__wrap-info-user form .submit button {
    padding: 16px 32px;
    background: var(--yellow);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
    border-radius: 100px;
}

.profile__wrap-info-user form .submit .saved.active {
    opacity: 1;
}

.profile__wrap-info-user form .submit .saved {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--green);
    transition: all 0.3s ease;
    opacity: 0;
}

.profile__wrap-info-user form .submit .saved svg {
    width: 16px;
    height: 16px;
}

.profile__wrap-plan {
    width: 100%;
    padding: 32px;
    position: relative;
    border-radius: 24px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    max-width: 384px;
}

.profile__wrap-plan .text {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.profile__wrap-plan .text p {
    color: var(--black);
}

.profile__wrap-plan .text span {
    color: var(--yellow);
}

.profile__wrap-plan .img {
    position: absolute;
    top: 0;
    right: 0;
    width: 172px;
    height: 103px;
    z-index: 0;
    opacity: .5;
}

.profile__wrap-plan .list {
    display: flex;
    gap: 8px;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin-top: 8px;
}

.profile__wrap-plan .list p {
    color: var(--grey);
}

.profile__wrap-plan .list ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile__wrap-plan .list ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile__wrap-plan .list ul li img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.profile__wrap-plan .info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile__wrap-plan .info .item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile__wrap-plan .info .item p {
    color: var(--grey);
}

.profile__wrap-plan .action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.profile__wrap-plan .action button {
    padding-bottom: 2px;
    color: var(--green-dark);
    border-bottom: 1px dashed var(--yellow);
    max-width: max-content;
    background: transparent;
}

.profile__wrap-plan .action button:last-child {
    border: none;
    color: var(--red);
    padding-bottom: 0;
}

.books-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.book-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 435px;
}

.book-item img {
    width: 282px;
    height: 188px;
}

.book-item-wrap {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    gap: 16px;
}

.book-item-wrap .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.book-item-wrap .text h3 {
    color: var(--black);
}

.book-item-wrap .text .action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.book-item-wrap .text .action span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
}

.book-item-wrap .text .action span svg {
    width: 24px;
    height: 24px;
}

.book-item-wrap .buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-item-wrap .buttons button,
.book-item-wrap .buttons a {
    width: 189.5px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

.book-item-wrap .buttons button {
    background: transparent;
    border: 1px solid var(--green-dark);
}

.book-item-wrap .buttons a {
    background: var(--yellow);
    color: var(--black);
}

.books__page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.books__page .back {
    background: transparent;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--black);
}

.books__page .back svg {
    width: 24px;
    height: 24px;
}

.books__page .item__book {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.books__page .item__book .wrap {
    display: flex;
    gap: 8px;
}

.books__page .item__book iframe {
    width: 100%;
    height: 400px;
}

.books__page .item__book .wrap img {
    width: 138px;
    height: 92px;
}

.books__page .item__book .wrap .text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.books__page .item__book .wrap .text h3 {
    color: var(--black);
}

.books__page .item__book .wrap .text .action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.books__page .item__book .wrap .text .action span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
}

.books__page .item__book .wrap .text .action span svg {
    width: 24px;
    height: 24px;
}

.user-comments-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    border-radius: 24px;
    background: var(--white);
    padding: 32px;
}

.user-comments-list .comment-item {
    display: flex;
    gap: 24px;
}

.user-comments-list .comment-item img {
    width: 170px;
    height: 110px;
    border-radius: 24px;
    min-width: 170px;
    min-height: 110px;
}

.user-comments-list .comment-item .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.user__body-sections {
    width: 100%;
}

.user-comments-list .comment-item .info .wrap {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.user-comments-list .comment-item .info .wrap .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-comments-list .comment-item .info .wrap .text p {
    color: var(--grey);
}

.user-comments-list .comment-item .info .wrap .attr {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-comments-list .comment-item .info .wrap .attr .wc-review-rating img {
    height: 24px;
    width: 24px;
    min-height: auto;
    min-width: auto;
}

.user-comments-list .comment-item .info .wrap .attr .wc-review-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.user-comments-list .comment-item .info .wrap .attr span {
    color: var(--grey);
}

.user-comments-list .comment-item .info .action {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-comments-list .comment-item .info .action a,
.user-comments-list .comment-item .info .action button {
    color: var(--green-dark);
    padding-bottom: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
}

.user-comments-list .comment-item .info .action a:before {
    content: '';
    width: 100%;
    height: 0px;
    border-bottom: 1px dashed var(--yellow);
    position: absolute;
    bottom: -2px;
}

.user-comments-list .comment-item .info .action button:before {
    content: '';
    width: 100%;
    height: 0px;
    border-bottom: 1px dashed var(--yellow);
    position: absolute;
    bottom: -2px;
}

.user-comments-list .comment-item .info .admin-reply {
    padding: 0px 24px;
    background: var(--beige);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 24px;
}

.user-comments-list .comment-item .info .admin-reply.show {
    max-height: 1000px;
    padding: 16px 24px;
}

.user-comments-list .comment-item .info .admin-reply .admin {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    background-color: var(--white);
}

.user-comments-list .comment-item .info .admin-reply .admin img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    min-height: auto;
    min-width: auto;
}

.user-comments-list .comment-item .info .admin-reply .admin span {
    color: var(--black);
}

.user-comments-list .comment-item .info .admin-reply .comment-date {
    color: var(--grey);
}

/*Reels*/


.auth {
    width: 100%;
    height: 100vh;
    background: #1D1D1B50;
    backdrop-filter: blur(10px);
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
}

.auth_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.auth_wrap-close {
    position: absolute;
    top: 16px;
    right: 64px;
    background: var(--yellow);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth_wrap-close svg {
    width: 24px;
    height: 24px;
}

.auth__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
    background: var(--white);
    border-radius: 24px;
}

.auth__body-tabs {
    display: flex;
    align-items: center;
    background: var(--beige);
    padding: 4px;
    border-radius: 100px;
}

.auth__body-tabs button {
    width: 183px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 100px;
    transition: all 0.3s ease;
    color: var(--black);
}

.auth__body-tabs button.current {
    background: var(--green-dark);
    color: var(--white);
}

.auth__body-register {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.auth__body-register form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 374px;
}

.auth__body-register form .input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth__body-register form .input p {
    color: var(--grey);
}

.auth__body-register form .input p span {
    color: var(--red);
}

.auth__body-register form .input input {
    width: 100%;
    height: 50px;
    padding-left: 24px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--med-grey);
    display: flex;
    align-items: center;
}

.auth__body-register form .input:nth-child(1) {
    width: 181px;
}

.auth__body-register form .input:nth-child(2) {
    width: 181px;
}

.auth__body-register form .input:nth-child(3) {
    width: 100%;
    min-width: 100%;
}

.auth__body-register form .password {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.auth__body-register form .password p {
    color: var(--grey);
}

.auth__body-register form .password p a {
    color: var(--red);
}

.auth__body-register form .password .input__wrap {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--med-grey);
    border-radius: 100px;
    padding-left: 24px;
}

.auth__body-register form .password .input__wrap svg {
    width: 24px;
    height: 24px;
}

.auth__body-register form .password .input__wrap input {
    width: 100%;
}

.auth__body-register form .password .input__wrap button {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 24px;
    background: transparent;
}

.auth__body-register form .password .mistakes_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth__body-register form .password .mistakes_list li.good {
    color: var(--green);
}

.auth__body-register form .password .mistakes_list li.good svg path {
    stroke: var(--green);
}

.auth__body-register form .password .mistakes_list li {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
}

.auth__body-register form .password .mistakes_list li svg {
    width: 24px;
    height: 24px;
}

.auth__body-register form .create-account,
.auth__body-register form .sign-in {
    width: 100%;
    height: 50px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
}

.auth__body-register .other {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.auth__body-register .other .line {
    width: 100%;
    height: 1px;
    background: var(--grey);
}

.auth__body-register .other span {
    color: var(--grey);
}

.auth__body-register .buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth__body-register .buttons button,
.auth__body-register .buttons a {
    width: 119.33px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 8px;
    border: 1px solid var(--med-grey);
}

.auth__body-register .buttons button svg,
.auth__body-register .buttons a svg {
    width: 24px;
    height: 24px;
}

.auth__body-register .policy {
    color: var(--grey);
    max-width: 259px;
    text-align: center;
}

.auth__body-register .policy a {
    color: var(--green-dark);
}


.reels {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 111px;
    height: 111px;
    border-radius: 50%;
    background: var(--beige-dark);
    position: fixed;
    bottom: 40px;
    right: 40px;
    cursor: pointer;
}

.reels svg {
    position: absolute;
    width: 103px;
    height: 102px;
    animation: wheel 10s linear infinite;
    transform-origin: 50% 50%;
}

.reels img {
    width: 64px;
    height: 64px;
}


.guide {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #1D1D1B50;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0;
    transition: all 0.5s ease;
}

.guide.active {
    scale: 1;
}

.guide-close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 16px;
}

.guide-close svg {
    width: 24px;
    height: 24px;
}

.guide__body {
    width: 638px;
    background: var(--white);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.guide__body img {
    width: 335px;
    height: 349px;
    position: absolute;
    top: -32px;
    right: -96px;
}

.guide__body h3 {
    color: var(--green-dark);
}

.guide__body p {
    color: var(--black);
}

.guide__body p span {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
}

.guide__body a {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 24px;
    color: var(--black);
    max-width: max-content;
}

/*
Wheel
*/


.wheel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 111px;
    height: 111px;
    border-radius: 50%;
    background: var(--beige-dark);
    position: fixed;
    bottom: 40px;
    right: 40px;
    cursor: pointer;
    z-index: 10;
}

.wheel svg {
    position: absolute;
    width: 103px;
    height: 102px;
    animation: wheel 10s linear infinite;
    transform-origin: 50% 50%;
}

.wheel img {
    width: 64px;
    height: 64px;
}

@keyframes wheel {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 720deg;
    }
}

.modal__wheel {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #1D1D1B50;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0;
    transition: all 0.5s ease;
}

.modal__wheel.active {
    scale: 1;
}

.modal__wheel-close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modal__wheel-close svg {
    width: 24px;
    height: 24px;
}

.modal__wheel-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.modal__wheel-block-main {
    position: relative;
    width: 201px;
    height: 107px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 1s ease;
}

.modal__wheel-block-main.active {
    opacity: 1;
}

.modal__wheel-block-main .ellipse {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.modal__wheel-block-main .text {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 174px;
    height: 72px;
}

.modal__wheel-block-main .icon {
    position: absolute;
    z-index: 1;
    width: 39px;
    height: 43px;
}

.modal__wheel-block-items {
    width: 810px;
    height: 435px;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: -108px;
    transform-origin: bottom;
    rotate: -180deg;
    transition: all 1s ease;
}

.modal__wheel-block-items.active {
    rotate: 0deg;
    margin-bottom: -102px;
}

.modal__wheel-block-items-item {
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    transform-origin: left center;
}

.modal__wheel-block-items-item a {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.modal__wheel-block-items-item svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.modal__wheel-block-items-item:nth-child(1) {
    width: 393px;
    height: 220px;
}

.modal__wheel-block-items-item:nth-child(1) a {
    rotate: 23.75deg;
    margin-top: -35px;
    margin-left: 23px;
}

.modal__wheel-block-items-item:nth-child(2) a {
    rotate: 38.75deg;
    margin-top: -80px;
    margin-left: 20px;
}

.modal__wheel-block-items-item:nth-child(2) {
    width: 349px;
    height: 300px;
    left: 45px;
}

.modal__wheel-block-items-item:nth-child(3) a {
    rotate: 54deg;
    margin-top: -100px;
    margin-left: 28px;
}

.modal__wheel-block-items-item:nth-child(3) {
    width: 285px;
    height: 364px;
    left: 110.1px;
}

.modal__wheel-block-items-item:nth-child(4) a {
    rotate: 70deg;
    margin-top: -143px;
    margin-left: 25px;
    color: var(--white);
}

.modal__wheel-block-items-item:nth-child(4) {
    width: 203px;
    height: 405px;
    left: 193.3px;
}

.modal__wheel-block-items-item:nth-child(5) a {
    rotate: 82.6deg;
    margin-top: -134px;
    margin-left: -10px;
}

.modal__wheel-block-items-item:nth-child(5) {
    width: 106px;
    height: 431px;
    left: 292.2px;
}

.modal__wheel-block-items-item:nth-child(6) a {
    rotate: -83.6deg;
    margin-top: -150px;
    margin-left: -40px;
}

.modal__wheel-block-items-item:nth-child(6) {
    width: 105px;
    height: 428px;
    left: 395.4px;
}

.modal__wheel-block-items-item:nth-child(7) a {
    rotate: -68.6deg;
    margin-top: -144px;
    margin-left: 25px;
}

.modal__wheel-block-items-item:nth-child(7) {
    width: 199px;
    height: 404px;
    left: 399.5px;
}

.modal__wheel-block-items-item:nth-child(8) a {
    rotate: -53.6deg;
    margin-top: -120px;
    margin-left: 83px;
    color: var(--white);
}

.modal__wheel-block-items-item:nth-child(8) {
    width: 281px;
    height: 363.5px;
    left: 402px;
}

.modal__wheel-block-items-item:nth-child(9) a {
    rotate: -39.18deg;
    margin-top: -82px;
    margin-left: 150px;
    color: var(--white);
}

.modal__wheel-block-items-item:nth-child(9) {
    width: 349px;
    height: 303px;
    left: 402px
}

.modal__wheel-block-items-item:nth-child(10) a {
    rotate: -25.6deg;
    margin-left: 170px;
    margin-top: -35px;
    color: var(--white);
}

.modal__wheel-block-items-item:nth-child(10) {
    width: 391px;
    height: 222px;
    left: 405px;
}



.recipe__body-main-present-attr-do a:has(.simplefavorite-button.active) span {
    color: var(--red);
}

.mt-0 {
    margin-top: 0 !important;
}

#reply-title {
    display: none;
}

.recipe__body-main-present-attr-do a:has(.simplefavorite-button.active) svg {
    fill: var(--red);
}

.recipe__body-main-present-attr-do a:has(.simplefavorite-button.active) svg path {
    stroke: var(--red);
}

#review-success-modal div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}


.hidden-product {
    display: none;
}

.wpcr3_respond_2 {
    display: block !important;
}

.glsr-field[data-field="title"] {
    display: none !important;
}

.container-ratio {
    width: 100%;
}

.youtube-link {
    width: 64px;
    height: 64px;
    box-shadow: 0px 10px 26.3px 0px #00000040;
    display: flex;
    position: absolute;
    border-radius: 50%;

}

.youtube-link img {
    width: 100%;
    height: 100%;
}

.lotos-likes.active svg path {
    fill: var(--green-dark);
}

.glsr-field-choice {
    display: none !important;
}

div.wpcr3_rating_style1_score {
    background: transparent;
    width: auto;
    overflow: visible;
    height: auto;
    display: flex;
    align-items: center;
}

.glsr-field-rating {
    width: 100%;
}

.glsr-field-textarea {
    width: 100%;
}

.glsr-field-textarea textarea {
    resize: none !important;
}

.wpcr3_respond_3 {
    display: none;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

:focus,
:active {
    outline: none
}

.pvc_stats {
    padding: 0 !important;
}

body .pvc_stats .pvc-stats-icon {
    display: none;
}

a:focus,
a:active {
    outline: none
}

nav,
footer,
header,
aside {
    display: block
}

html,
body {
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

input,
button,
textarea {
    font-family: inherit
}

input::-ms-clear {
    display: none
}

button {
    cursor: pointer
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

a,
a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

ul li {
    list-style: none
}

img {
    vertical-align: top
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit
}

html {
    scroll-behavior: smooth
}

body {
    max-width: 1440px;
    background: var(--beige);
    margin: 0 auto;
}

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

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

.hidden {
    overflow: hidden
}

.desk {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.mob {
    display: none !important
}

.none {
    display: none !important
}

.develop {
    width: 100%;
    margin-top: 60px;

}

.develop__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.develop__body a {
    text-decoration: none;
    width: fit-content;
}

.develop__body h1 {
    text-transform: uppercase;
    color: var(--black);
}

.filter__modal-close {
    position: absolute;
    top: 25px;
    right: 50px;
    width: 24px;
    height: 24px;
    background: transparent;
}

.filter__modal-buttons {
    position: absolute;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #F5DAC7;
    border-radius: 1000px;
}

.filter__modal-buttons a,
.filter__modal-buttons button {
    width: 188px;
    height: 41px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 120.00000000000001%;
    letter-spacing: 0px;
    text-align: center;

}

.filter__modal-buttons a {
    background: transparent;
    color: var(--green-dark);
    border: 1px solid var(--green-dark);
}

.filter__modal-buttons button {
    background: var(--green-dark);
    color: var(--white);
}

.filter__modal-close svg path {
    stroke: var(--red);
}

.filter__modal-wrap.active {
    transform: translateX(0%);
}

.filter__modal-wrap {
    transform: translateX(100%);
    scale: 1;
}

.filter__modal-wrap {
    width: 100%;
    height: 100vh;
    background: #00000030;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 1;
    transition: all 0.5s ease;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
}

.filter__modal-search .aws-search-btn {
    background: var(--green-dark) !important;
}

.filter__modal-search .aws-search-btn:before {
    color: var(--white);
}

.wpfClearButton:hover {
    background: var(--yellow);
}

.filter__modal {
    background: var(--beige);
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scale: 0.9;
    border-radius: 20px;
    position: relative;
}

.filter__modal h2 {
    text-transform: uppercase;
}

.filter__modal-search {
    margin-top: 20px;
    max-width: 1362px;
    width: 100%;
}

.filter__modal-search input {
    width: 1258px !important;
}

.wpfFilterButtons:after {
    display: none !important;
}

.wpfFilterButtons {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.wpfFilterButtons button {
    width: 673px;
    height: 39px;
    transition: all 0.3s ease;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wpfFilterButton {
    background: transparent;
    background: var(--green-dark);
    color: var(--white);
}

.wpfClearButton {
    background: transparent;
    border: 1px solid var(--green-dark);
    order: -1;
}

.filter__modal-body {
    margin-top: 8px;
}

.filter__modal-body .wpfMainWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1362px;
}

.wpfFilterWrapper {
    padding: 16px;
    border-radius: 20px;
    background: var(--white);
}

.wpfFilterWrapper .wpfFilterContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpfFilterWrapper .wpfFilterContent .wfpDescription {
    font-family: var(--rubik);
    font-weight: 600;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    color: var(--black);
}

.wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li {
    position: relative;
    padding: 8px 16px;
    transition: all 0.3s ease;
    background: transparent;
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
    border: 1px solid var(--yellow);
    max-width: max-content;
    border-radius: 1000px;
}

.wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:hover {
    background: var(--yellow);
}

.wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:has(> .wpfLiLabel .wpfDisplay.selected) {
    background: var(--yellow);
}

.wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li .wpfCheckbox {
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    cursor: pointer;
}

.wpfFilterVerScroll {
    max-height: 100px !important;
    overflow-y: auto;
}

.wpfFilterVerScroll::-webkit-scrollbar-thumb {
    background-color: var(--black);
}

.wpfFilterVerScroll::-webkit-scrollbar-track {
    background: var(--med-grey);
    border-radius: 2px;
}

.wpfFilterVerScroll::-webkit-scrollbar {
    width: 2px !important;
    height: auto;
}

.wpfFilterWrapper:nth-child(-n+4) {
    width: 334.5px !important;
}

.wpfFilterWrapper:nth-child(n+4):nth-child(-n+8) {
    width: 334.5px !important;
}

.wpfFilterWrapper:nth-child(n+9):nth-child(-n+15) {
    width: 266px !important;
}

.filter__modal-body {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter__modal-body .widget_wpc_filters_widget:nth-child(-n+4) .wpc-filters-section {
    width: 334.5px;
    height: 102px;
    overflow: hidden;
}

.filter__modal-body .widget_wpc_filters_widget:nth-child(n+5):nth-child(-n+8) .wpc-filters-section {
    width: 334.5px;
    height: 272px;
    overflow: hidden;
}

.filter__modal-body .widget_wpc_filters_widget:nth-child(n+9):nth-child(-n+13) .wpc-filters-section {
    width: 266px;
    height: 341px;
    overflow: hidden;
}

.wpc-filters-section {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0 !important;
    border-radius: 24px;
    background: var(--white);
}

.wpc-filters-section .wpc-filter-title {
    margin-bottom: 0;
    font-family: var(--rubik);
    font-weight: 600;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    color: var(--green-dark);
}

.wpc-filters-ul-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 !important;
    max-height: 100px !important;
}

.wpc-filters-ul-list::-webkit-scrollbar-thumb {
    background-color: var(--black);
}

.wpc-filters-ul-list::-webkit-scrollbar-track {
    background: var(--med-grey);
    border-radius: 2px;
}

.wpc-filters-ul-list::-webkit-scrollbar {
    width: 2px !important;
    height: auto;
}

.wpc-filters-ul-list li {
    position: relative;
    padding: 8px 16px !important;
    background: transparent;
    transition: all 0.3s ease;
    color: var(--black);
    max-width: max-content;
    border-radius: 1000px;
    margin-bottom: 0 !important;
    border: 1px solid var(--yellow) !important;
    font-family: var(--rubik);
    font-size: 14rem;
    line-height: 120%;
    letter-spacing: 0rem;
}

.wpc-filters-ul-list li label a {
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: center;
}

.wpc-filters-ul-list li:hover {
    background: var(--yellow);
}

.wpc-filters-ul-list li.wpc-term-selected {
    background: var(--yellow);
}

.wpc-filters-ul-list li .wpc-term-item-content-wrapper input {
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    cursor: pointer;
}

.bread {
    width: 100%;
    margin-top: 16px
}

.bread__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    overflow: hidden
}

.bread__body-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.bread__body-top a {
    color: var(--grey);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    white-space: nowrap
}

.bread__body-top a:hover {
    color: var(--green-dark)
}

.bread__body-top p {
    color: var(--grey)
}

.bread__body-top span {
    color: var(--green-dark);
    white-space: nowrap
}

.bread__body-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.bread__body-main.stroke {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    flex-direction: row !important;
    width: 100%;
}


.bread__body-main h1 {
    color: var(--green-dark);
    text-transform: uppercase
}

.bread__body-main p {
    color: var(--black);
    max-width: 588px
}

.catalog {
    width: 100%;
    margin-top: 24px
}

.catalog__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

.catalog__body-filter {
    width: 282px;
    min-width: 282px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.catalog__body-filter-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.catalog__body-filter-top h2 {
    color: var(--black)
}

.catalog__body-filter-top button {
    color: var(--red);
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.catalog__body-filter-top button:hover {
    color: var(--green-dark)
}

.catalog__body-filter-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.catalog__body-filter-block-category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.catalog__body-filter-block-category-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--green-dark)
}

.catalog__body-filter-block-category-item h3 {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--green-dark)
}

.catalog__body-filter-block-category-item div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px
}

.catalog__body-filter-block-category-item div a {
    padding: 8px 16px;
    background: var(--white);
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid var(--yellow);
    border-radius: 1000px;
    text-transform: capitalize;
}

.catalog__body-filter-block-category-item div a.active {
    background: var(--yellow)
}

.catalog__body-filter-block-category-item div a:hover {
    background: var(--yellow)
}

.catalog__body-filter-block-advanced {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px
}

.catalog__body-filter-block-advanced span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--green-dark)
}

.catalog__body-filter-block-advanced span svg {
    width: 24px;
    height: 24px
}

.catalog__body-filter-block-advanced div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    background: var(--white);
    padding: 16px;
    border-radius: 24px
}

.catalog__body-filter-block-advanced div p {
    color: var(--black)
}

.catalog__body-filter-block-advanced div .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 8px
}

.catalog__body-filter-block-advanced div .wrap a {
    padding: 4px 12px;
    background: var(--green-dark);
    border-radius: 1000px;
    color: var(--white);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}

.catalog__body-filter-block-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 120px 16px;
    border-radius: 24px;
    position: relative;
    background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
    background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
}

.catalog__body-filter-block-banner img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 183px;
    height: 185px;
    z-index: 0
}

.catalog__body-filter-block-banner h3 {
    color: var(--white)
}

.catalog__body-filter-block-banner p {
    color: var(--white)
}

.catalog__body-filter-block-banner button {
    background: var(--yellow);
    padding: 16px 32px;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 10000px;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    position: relative;
    z-index: 1
}

.catalog__body-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.catalog__body-main-search {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    position: relative
}

.catalog__body-main-search-wrap {
    width: 790px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border-radius: 1000px;
    padding: 0 16px
}

.catalog__body-main-search-wrap svg {
    width: 24px;
    height: 24px
}

.catalog__body-main-search-wrap input {
    background: rgba(0, 0, 0, 0);
    width: 100%;
    color: var(--black)
}

.catalog__body-main-search button {
    padding: 12px 24px;
    color: var(--black);
    background: var(--yellow);
    border-radius: 1000px
}

.catalog__body-main-search-block {
    width: 894px;
    position: absolute;
    top: calc(100% + 4px);
    background: var(--white);
    border-radius: 24px;
    padding: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10
}

.catalog__body-main-search-block button {
    padding: 4px 12px;
    background: var(--med-grey);
    color: var(--grey);
    border-radius: 1000px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.catalog__body-main-search-block button:hover {
    background: var(--green-dark);
    color: var(--white)
}

.catalog__body-main-search .aws-search-form {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    position: relative
}

.aws-wrapper {
    position: relative;
}

.catalog__body-main-search input {
    width: 790px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding: 0 16rem;
    background: var(--white);
    border-radius: 1000px;
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    color: var(--black);
}

.catalog__body-main-search-wrap svg {
    width: 24px;
    height: 24px
}

.aws-search-form input {
    background: rgba(0, 0, 0, 0);
    width: 100%;
    color: var(--black)
}

.catalog__body-main-search .aws-search-btn {
    width: 96px;
    height: 41px;
    color: var(--black);
    background: var(--yellow);
    border-radius: 1000px;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rubik);
    cursor: pointer;
}

.catalog__body-main-search .aws-search-btn:before {
    content: 'Search';
    position: absolute;
}

.catalog__body-main-search-block {
    width: 894px;
    position: absolute;
    top: calc(100% + 4px);
    background: var(--white);
    border-radius: 20px;
    padding: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10
}

/*.aws-search-form .aws-search-btn {*/
/*    padding: 4px 12px;*/
/*    background: var(--med-grey);*/
/*    color: var(--grey);*/
/*    border-radius: 1000px;*/
/*    -webkit-transition: all .3s ease;*/
/*    transition: all .3s ease*/
/*}*/

.catalog__body-main-search-block button:hover {
    background: var(--green-dark);
    color: var(--white)
}

.catalog__body-main-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px
}

.catalog__body-main-block-item {
    width: 310px;
    background: var(--white);
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    height: 100%;
}

.catalog__body-main-block-item-top {
    width: 100%;
    height: 200px;
    position: relative;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 24px;
}

.catalog__body-main-block-item-top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.catalog__body-main-block-item-top-attr {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

span.cold {
    background: var(--blue) !important;
}

span.hot {
    background: var(--red) !important;
}

span.vega {
    background: var(--green) !important;
}

span.alc {
    background: var(--black) !important;
}

.catalog__body-main-block-item-top-attr span {
    padding: 4px 8px;
    border-radius: 1000px;
    color: var(--white);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}


.catalog__body-main-block-item-top-like {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%
}

.catalog__body-main-block-item-top-like svg {
    width: 24px;
    height: 24px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.catalog__body-main-block-item-top-like svg path {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.catalog__body-main-block-item-bot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    gap: 12px;
    padding: 0 16px 16px 16px
}

.catalog__body-main-block-item-bot-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.catalog__body-main-block-item-bot-text span {
    color: var(--grey)
}

.catalog__body-main-block-item-bot-text h2 {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    min-height: 36px;
}

.catalog__body-main-block-item-bot-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.catalog__body-main-block-item-bot-action-el {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.catalog__body-main-block-item-bot-action-el span {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0px;
    color: var(--black)
}

.catalog__body-main-block-item-bot-action-el svg {
    width: 24px;
    height: 24px
}

.catalog__body-main-block-item:hover .catalog__body-main-block-item-bot .catalog__body-main-block-item-bot-text h2 {
    color: var(--yellow)
}

.catalog__body-main-block .banner__full {
    width: 100%;
    height: 150px;
    background: var(--grey);
    border-radius: 24px
}

.catalog__body-main-block .banner__soft {
    width: 310px;
    height: auto;
    background: var(--grey);
    border-radius: 24px
}

.banner__full {
    width: 100%;
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    padding: 17px 44px 24px 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.banner__full h3 {
    color: var(--white);
}

.banner__full a {
    color: var(--black);
    background: var(--yellow);
    padding: 13.5px 22.5px;
    border-radius: 100px;
    max-width: max-content;
}

.catalog__body-main-block .banner__soft {
    width: 310px;
    height: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 28px 0px 22px;
}

.catalog__body-main-block .banner__soft h3 {
    color: var(--white);
    max-width: 333px;
}

.catalog__body-main-block .banner__soft a {
    color: var(--black);
    background: var(--yellow);
    padding: 13.5px 22.5px;
    border-radius: 100px;
    max-width: max-content;
}

.catalog__body-main .load-more {
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--green-dark);
    color: var(--green-dark);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 1000px;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    -ms-flex-item-align: center;
    align-self: center
}

.footer {
    width: 100%;
    margin-top: 116px;
    background: var(--green-dark)
}

.footer__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

.footer__body-top {
    padding: 24px 64px;
    border-bottom: 1px solid var(--grey);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.footer__body-top-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.footer__body-top-text h5 {
    color: var(--yellow);
    max-width: 225px
}

.footer__body-top-text p {
    color: var(--white);
    max-width: 215px
}

.footer__body-top-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 59.25px
}

.footer__body-top-items-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.footer__body-top-items-item .circle {
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white-so);
    border-radius: 50%
}

.footer__body-top-items-item .circle img {
    width: 32px;
    height: 32px
}

.footer__body-top-items-item span {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--white)
}

.footer__body-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding: 40px 64px 8px 64px
}

.footer__body-main-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid var(--grey);
    padding-bottom: 32px
}

.footer__body-main-start-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px
}

.footer__body-main-start-left-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px
}

.footer__body-main-start-left-logo a {
    width: 115px;
    height: 61px
}

.footer__body-main-start-left-logo a img {
    width: 100%;
    height: 100%
}

.footer__body-main-start-left-logo-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.footer__body-main-start-left-logo-action p {
    color: var(--white);
    max-width: 352px
}

.footer__body-main-social-more-download {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__body-main-social-more-download a {
    width: 90px;
    height: 26px;
}

.footer__body-main-social-more-download a img {
    width: 100%;
    height: 100%;
}

.footer__body-main-start-left-logo-action-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.footer__body-main-start-left-logo-action-form input {
    width: 261px;
    height: 40px;
    background: var(--white-so);
    border-radius: 1000px;
    padding-left: 16px;
    color: var(--white)
}

.footer__body-main-start-left-logo-action-form input:placeholder {
    color: var(--grey)
}

.footer__body-main-start-left-logo-action-form button {
    padding: 12.5px 24px;
    border-radius: 1000px;
    background: var(--yellow);
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 15.4px;
    letter-spacing: 0px;
    text-align: center
}

/* .footer__body-main-start-left-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px
}

.footer__body-main-start-left-social .social-links,
.footer__body-main-start-left-social a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
} */

/* .footer__body-main-start-left-social div:nth-child(1) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.footer__body-main-start-left-social div:nth-child(1) a {
    width: 24px;
    height: 24px
}

.footer__body-main-start-left-social div:nth-child(1) a img {
    width: 100%;
    height: 100%
}

.footer__body-main-start-left-social div:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.footer__body-main-start-left-social div:nth-child(2) a {
    width: 90px;
    height: 26px
}

.footer__body-main-start-left-social div:nth-child(2) a img {
    width: 100%;
    height: 100%
} */

.footer__body-main-start-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.footer__body-main-start-menu ul li:hover {
    color: var(--yellow);
}

.footer__body-main-start-menu h4 {
    color: var(--white)
}

.footer__body-main-start-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s ease;
}

.footer__body-main-start-menu ul li {
    color: var(--white)
}

.footer__body-main-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer__body-main-end P {
    color: var(--grey)
}

.footer__body-main-end P a {
    color: var(--yellow)
}

.footer__body-main-end button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--yellow);
    background: rgba(0, 0, 0, 0)
}

.footer__body-main-end button svg {
    width: 24px;
    height: 24px
}


.cl_club {
    width: 100%;
    margin-top: 200px;
}

.cl_club-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cl_club-body-text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.cl_club-body-text h3 {
    color: var(--green-dark);
    max-width: 688px;
}

.cl_club-body-text h3 span {
    color: var(--yellow);
}

.cl_club-body-text a {
    padding: 16px 32px;
    background: var(--yellow);
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    border-radius: 100px;
}

.cl_club-body-block {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.cl_club-body-block img {
    width: 383px;
    height: 350px;
    border-radius: 24px;
}

.books {
    width: 100%;
    margin-top: 120px;
}

.books__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.books__body-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.books__body-text h2 {
    color: var(--green-dark);
    text-transform: uppercase;
}

.books__body-text p {
    color: var(--black);
    max-width: 700px;
    text-align: center;
}

.books__body-block {
    display: flex;
    gap: 24px;
}

.books__body-block-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 282px;
}

.books__body-block-item img {
    width: 100%;
    height: 188px;
}

.books__body-block-item-info {
    background: var(--white);
    padding: 24px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.books__body-block-item-info h3 {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    color: var(--black);
}

.books__body-block-item-info .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.books__body-block-item-info div .item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.books__body-block-item-info div .item svg {
    width: 24px;
    height: 24px;
}

.books__body-block-item-info div .item span {
    color: var(--grey);
}

.cl_banner {
    width: 100%;
    margin-top: 120px;
}

.cl_banner-body {
    display: flex;
    justify-content: space-between;
    padding: 48px;
    position: relative;
}

.cl_banner-body-img {
    width: 723px;
    height: 409px;
    position: absolute;
    bottom: 0;
    left: 305px;
}

.cl_banner-body-info {
    display: flex;
    flex-direction: column;
    gap: 84px;
}

.cl_banner-body-info-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl_banner-body-info-text h2 {
    text-transform: uppercase;
    color: var(--green-dark);
    max-width: 517px;
}

.cl_banner-body-info-text p {
    color: var(--black);
    max-width: 400px;
}

.cl_banner-body-info a {
    padding: 16px 32px;
    border-radius: 100px;
    background: var(--yellow);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    max-width: max-content;
}

.cl_banner-body-our {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    max-height: max-content;
}

.cl_banner-body-our .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cl_banner-body-our .text span {
    color: var(--black);
}

.cl_banner-body-our .text p {
    color: var(--grey);
}

.cl_banner-body-our .images {
    display: flex;
    align-items: center;
}

.cl_banner-body-our .images img {
    width: 40px;
    height: 40px;
}

.cl_banner-body-our .images img:not(:first-child) {
    margin-left: -13px;
}

.advantages {
    width: 100%;
    margin-top: 120px;
}

.advantages__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.advantages__body-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.advantages__body-text h2 {
    text-transform: uppercase;
    color: var(--green-dark);
}

.advantages__body-text p {
    color: var(--black);
    max-width: 700px;
    text-align: center;
}

.advantages__body-block {
    display: flex;
    gap: 24px;
}

.advantages__body-block-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 282px;
}

.advantages__body-block-item img {
    width: 80px;
    height: 80px;
}

.advantages__body-block-item .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.advantages__body-block-item .info span {
    color: var(--black);
}

.advantages__body-block-item .info p {
    color: var(--black);
    text-align: center;
}

.plans {
    width: 100%;
    margin-top: 120px;
}

.plans__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.plans__body-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.plans__body-text h2 {
    text-transform: uppercase;
    color: var(--green-dark);
}

.plans__body-text p {
    max-width: 700px;
    text-align: center;
    color: var(--black);
}

.plans__body-block {
    display: flex;
    gap: 24px;
}

.plans__body-block-item {
    background: var(--white);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 567px;
}

.plans__body-block-item .wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.plans__body-block-item h3 {
    color: var(--black);
}

.plans__body-block-item .img {
    width: 284px;
    height: 170px;
    position: absolute;
    right: -16px;
    top: -16px;
    z-index: 0;
    opacity: 0.5;
}

.plans__body-block-item .list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plans__body-block-item .list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
}

.plans__body-block-item .list li svg {
    width: 40px;
    height: 40px;
}

.plans__body-block-item a {
    width: 100%;
    height: 50px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq {
    width: 100%;
    margin-top: 120px;
    background: var(--green-dark);
    padding: 80px 0;
    border-bottom: 1px solid var(--grey);
}

.faq__body {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.faq__body-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.faq__body-text h2 {
    text-transform: uppercase;
    color: var(--white);
}

.faq__body-text p {
    color: var(--white);
    text-align: center;
}

.faq__body-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq__body-block-item.open {
    background: var(--yellow);
}

.faq__body-block-item.open .faq__body-block-item-top {
    padding-bottom: 16px;
}

.faq__body-block-item.open h4 {
    color: rgba(42, 50, 77, 1);
}

.faq__body-block-item.open button {
    background: var(--green-dark);
    rotate: 180deg;
}

.faq__body-block-item.open svg path {
    stroke: var(--yellow);
}

.faq__body-block-item.open .faq__body-block-item-bot {
    color: var(--black);
}

.faq__body-block-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: rgba(13, 47, 38, 1);
    transition: all 0.3s ease;
    padding: 32px 40px;
    border-radius: 24px;
    cursor: pointer;
}

.faq__body-block-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: all 0.3s ease;
}

.faq__body-block-item-top h4 {
    color: var(--white);
    transition: all 0.3s ease;
}

.faq__body-block-item-top button {
    width: 40px;
    height: 40px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.faq__body-block-item-top button svg {
    width: 24px;
    height: 24px;
}

.faq__body-block-item-top button svg path {
    transition: all 0.3s ease;
}

.faq__body-block-item-bot {
    color: var(--white);
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}


.blog {
    width: 100%;
    margin-top: 24px;
}

.blog__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog__body-top {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.blog__body-top-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.blog__body-top-item .grad {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.blog__body-top-item img:nth-child(1) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.blog__body-top-item:hover h3 {
    color: var(--yellow);
}

.blog__body-top-item {
    padding: 32px;
    width: 792px;
    height: 400px;
}

.blog__body-top-item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.blog__body-top-item-info h3 {
    color: var(--white);
    transition: all 0.3s ease;
}

.blog__body-top-item-info .category {
    padding: 4px 12px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    max-width: max-content;
}

.blog__body-top-item-info .soft {
    display: flex;
    align-items: center;
    gap: 24px;
}

.blog__body-top-item-info .soft .soft-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
}

.blog__body-top-item-info .soft .soft-item img {
    position: static;
    width: 16px;
    height: 16px;
}

.blog__body-top .wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog__body-top .wrap .blog__body-top-item {
    padding: 16px;
    width: 384px;
    height: 192px;
}

.blog__body-popular {
    display: flex;
    gap: 24px;
}

.blog__body-popular-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog__body-popular-section-block {
    width: 792px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.blog__body-popular-section-block .daily__body-wrap-item {
    width: 248px;
    height: 261px;
}

.blog__body-popular-section-block .daily__body-wrap-item-top {
    height: 160px;
}

.blog__body-popular-section h3 {
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog__body-popular-section h3 .line {
    width: 520px;
    height: 1px;
    background: var(--med-grey);
}

.blog__body-popular-section #blog {
    width: 792px;
}

.blog__body-popular-section #blog .splide__slide {
    margin-right: 24px !important;
    width: 248px !important;
    height: 261px;
}

.blog__body-popular-section #blog .splide__slide .h5-medium {
    transition: all 0.3s ease;
}

.blog__body-popular-section #blog .splide__slide:hover .h5-medium {
    color: var(--yellow);
}

.blog__body-popular-section #blog .splide__arrows {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    top: -44px;
    right: 0;
}

.blog__body-popular-section #blog .splide__arrow {
    position: static;
    width: 40px;
    height: 40px;
    background: var(--beige-dark);
    opacity: 1 !important;
}

.blog__body-popular-section #blog .splide__arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
}

.blog__body-popular-section #blog .splide__slide .daily__body-wrap-item-top {
    height: 160px;
}

.blog__body-popular-category {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.blog__body-popular-category h3 {
    color: var(--green-dark);
}

.blog-categories-list {
    display: flex;
    flex-direction: column;
}

.blog__body-popular-category-wrap {
    width: 100%;
}

.blog-category-name {
    transition: all 0.3s ease;
    color: var(--black);
}

.blog-category-item:hover .blog-category-name {
    color: var(--yellow);
}

.blog-category-item:first-child {
    padding: 0px 0px 17px 0px;
}

.blog-category-item {
    padding: 17px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px dashed var(--green-dark);
}

.blog-category-count {
    color: var(--grey);
    display: flex;
    align-items: center;
}

.blog-category-count svg {
    width: 24px;
    height: 24px;
}

.blog__body-news {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.blog__body-news h2 {
    color: var(--green-dark);
}

.blog__body-news-block {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 32px;
    width: 100%;
}

.blog__body-news-block .daily__body-wrap-item {
    width: 282px;
    height: 283px;
}

.blog__body-news-block .daily__body-wrap-item .daily__body-wrap-item-top {
    height: 182px;
}

.bread__body-main-search .aws-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bread__body-main-search .aws-search-field {
    width: 280px;
    height: 40px;
    background: var(--white);
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    color: var(--black);
    padding-left: 16px;
    border: 1px solid var(--med-grey);
    border-radius: 100px;
}

.bread__body-main-search .aws-search-btn {
    width: 96px;
    height: 41px;
    background: var(--yellow);
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    color: var(--black);
    border-radius: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bread__body-main-search .aws-search-btn:before {
    content: 'Search';
    position: absolute;
}

.article {
    width: 100%;
    margin-top: 24px;
}

.article__body {
    display: flex;
    flex-direction: column;
    gap: 54px;
}

.article__body-main {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 40px;
    justify-content: flex-end;
}

.article__body-main .grad {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
}

.article__body-main .wp-post-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.article__body-main h1 {
    color: var(--white);
    position: relative;
    z-index: 2;
}

.article__body-main-items {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.article__body-main-items div {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
}

.article__body-main-items div img {
    width: 16px;
    height: 16px;
}

.article__body-info {
    display: flex;
    gap: 25px;
}


.article__body-info-content-article {
    display: flex;
    align-items: center;
    width: 100%;
}

.article__body-info-content-article .article__body-info-content-article-item:nth-child(1) {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

.article__body-info-content-article .article__body-info-content-article-item:nth-child(2) {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.article__body-info-content-article .article__body-info-content-article-item:nth-child(2) span {
    justify-content: flex-start;
}

.article__body-info-content-article .article__body-info-content-article-item:nth-child(2) h3 {
    text-align: start;
}

.article__body-info-content-article .article__body-info-content-article-item {
    width: 50%;
    height: 132px;
    background: var(--white);
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.article__body-info-content-article .article__body-info-content-article-item img {
    position: absolute;
    width: auto;
    height: auto;
    scale: 0.5;
    z-index: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.article__body-info-content-article .article__body-info-content-article-item:hover span {
    color: var(--white);
}

.article__body-info-content-article .article__body-info-content-article-item:hover h3 {
    color: var(--white);
}

.article__body-info-content-article .article__body-info-content-article-item:hover span svg path {
    stroke: var(--white);
}

.article__body-info-content-article .article__body-info-content-article-item:hover img {
    opacity: 1;
}

.article__body-info-content-article .article__body-info-content-article-item span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--grey);
    position: relative;
    z-index: 1;
    width: 100%;
    justify-content: flex-end;
    transition: all 0.3s ease;
}

.article__body-info-content-article .article__body-info-content-article-item span svg {
    width: 24px;
    height: 24px;
}

.article__body-info-content-article .article__body-info-content-article-item span svg path {
    transition: all 0.3s ease;
}

.article__body-info-content-article .article__body-info-content-article-item h3 {
    width: 100%;
    text-align: end;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.article__body-info-navigation {
    width: 383px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.article__body-info-navigation h3 {
    color: var(--green-dark);
}

.article__body-info-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

.article__body-info-content .main-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article__body-info-content-photo {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.article__body-info-content-photo .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article__body-info-content-photo .text h2 {
    color: var(--green-dark);
}

.article__body-info-content-photo .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.article__body-info-content-photo .wrap img {
    width: 100%;
    height: 350px;
}

.article__body-info-content-photo .wrap p {
    color: var(--grey);
    font-style: italic;
}

.article__body-info-content-slider {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.article__body-info-content-slider .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article__body-info-content-slider .text h2 {
    color: var(--green-dark);
}

.article__body-info-content-slider .splide {
    width: 792px;
}

.article__body-info-content-slider .splide .splide__arrow {
    width: 40px;
    height: 40px;
    opacity: 1 !important;
    background: var(--beige-dark);
    bottom: -56px;
    top: auto;
    transform: translateY(0%);
}

.article__body-info-content-slider .splide .splide__arrow svg {
    fill: none;
    width: 24px;
    height: 24px;
}

.article__body-info-content-slider .splide .splide__slide {
    width: 464px !important;
    height: 325px;
    margin-right: 24px !important;
}

.article__body-info-content-slider .splide .splide__slide img {
    width: 100%;
    height: 100%;
}

.article__body-info-content-quote {
    margin-top: 56px;
    padding: 24px;
    border-top: 1px dashed var(--green-dark);
    border-bottom: 1px dashed var(--green-dark);
    display: flex;
    gap: 16px;
    color: var(--black);
    font-style: italic;
}

.article__body-info-content-quote img {
    width: 30px;
    height: 30px;
}

.table {
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
    border-spacing: 0;
    border-collapse: collapse;
    background: var(--white);
}

.table thead {
    background: var(--beige-dark);
    height: 51px;
}

.table thead th {
    text-align: left;
    padding-left: 16px;
}

.table tr:not(:last-child) {
    border-bottom: 1px solid var(--med-grey);
    border-spacing: 1px;
}

.table tr td {
    padding: 16px;

}

.article__body-info-content-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.article__body-info-content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 32px 24px 0px 24px;
    border-top: 1px dashed var(--green-dark);
    margin-top: 24px;
}

.article__body-info-content-tags span {
    color: var(--black);
}

.article__body-info-content-tags p {
    color: var(--white);
    background: var(--green-dark);
    padding: 4px 12px;
    border-radius: 100px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.article__body-info-content-tags p:hover {
    background: var(--yellow);
    color: var(--black);
}

.main__wrap {
    background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);
}

.main {
    position: relative;
}

.club .main__body {
    padding: 48px 0 335px 0;
}

.main__body {
    display: flex;
    flex-direction: column;
    padding: 109px 0 138px 0px;
    gap: 40px;
}

.main__body .yellow-btn {
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 100px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
    max-width: max-content;
}

.main__body .bread {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main__body .bread span {
    color: var(--white);
}

.main__body .bread p,
.main__body .bread a {
    color: var(--grey);
}

.main .main__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1
}

.main .main__text h1 {
    color: #fff;
    text-transform: uppercase
}

.main .main__text p {
    max-width: 566px;
    color: var(--white)
}

.main__text-search {
    max-width: max-content;
}

.is-ajax-search-result img {
    border-radius: 20px;
}

.main .main__text-search form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px
}

.main .main__text-search .aws-form-btn {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
    background: var(--yellow);
    width: 119px;
    height: 49px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 1000px;
    position: relative;
    cursor: pointer;
}

.main .main__text-search .aws-form-btn:before {
    content: 'Search';
    position: absolute;
}

.main .main__text-search input {
    width: 350px;
    height: 49px;
    border-radius: 100px;
    background: var(--white);
    border: 1px solid var(--med-grey);
    padding-left: 16px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: 0px
}

.main .main__text-search input:hover {
    border-color: var(--yellow)
}

.main .main__text-search input:placeholder {
    color: var(--grey)
}

.main .main__text-search button {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black);
    background: var(--yellow);
    width: 119px;
    height: 49px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 1000px;
    position: relative;
}

.main .main__text-search button:before {
    content: 'Search';
    position: absolute;
}

.main .main__img {
    height: 737px;
    width: 885px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.main .cl_img {
    height: 589px;
    width: 653px;
    position: absolute;
    bottom: 90px;
    right: 120px;
    z-index: 0;
}

.main .main__coffee {
    position: absolute;
    bottom: 94px;
    left: 64px;
    width: 347px;
    height: 204px
}

.main .main__stroke {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -110px
}

.main .main__stroke-body:nth-child(1) {
    width: 1519px;
    height: 80px;
    background: var(--yellow-dark);
    rotate: 3deg;
    position: absolute;
    left: -40px;
    top: 50px
}

.main .main__stroke-body:nth-child(2) {
    width: 1490px;
    height: 80px;
    background: var(--yellow);
    rotate: -3deg;
    position: absolute;
    left: -19px;
    top: 50px
}

.main .main__stroke-body:nth-child(2) .main__stroke-body-wrap {
    -webkit-animation: tickerTwo 10s linear infinite;
    animation: tickerTwo 10s linear infinite
}

.main .main__stroke-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.main .main__stroke-body-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 38.43px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-animation: ticker 10s linear infinite;
    animation: ticker 10s linear infinite;
    -webkit-transform-style: preserve-3d;
    position: absolute
}

.main .main__stroke-body-wrap img {
    width: 32px;
    height: 32px
}

.main .main__stroke-body-wrap span {
    color: var(--black)
}

@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-50.5%);
        transform: translateX(-50.5%)
    }
}

@keyframes ticker {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-50.5%);
        transform: translateX(-50.5%)
    }
}

@-webkit-keyframes tickerTwo {
    0% {
        -webkit-transform: translateX(-50.5%);
        transform: translateX(-50.5%)
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes tickerTwo {
    0% {
        -webkit-transform: translateX(-50.5%);
        transform: translateX(-50.5%)
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

.header-soft .header__body {
    border-bottom-color: var(--white)
}

.header-soft li a {
    color: var(--black) !important
}

.header-soft li svg path {
    stroke: var(--black)
}

.header-soft .header__body-action a {
    background: var(--beige-dark)
}

.header-soft .header__body-action a svg path {
    stroke: var(--black)
}

.full-input {
    width: 100%;
    min-width: 100%;
}

.header-soft .header__body-action button {
    background: var(--black)
}

.header__body-action .auth-button {
    padding: 0 !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-soft .header__body-action button span {
    color: var(--white)
}

.header-soft .header__body-action button svg path {
    stroke: var(--white)
}

.header-soft .second {
    opacity: 1 !important;
    height: 100%;
}

.header-soft .hamburger svg path {
    stroke: var(--black)
}

.header {
    width: 100%;
    position: relative;
    z-index: 2;
}

.header__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--white)
}

.header__body-logo {
    width: 115px;
    height: 61px
}

.header__body-logo img {
    width: auto;
    height: 100%
}

.header__body-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}

.header__body-menu ul li a {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.header-soft li a {
    color: var(--black);
}

.header__body-menu ul li a svg {
    width: 16px;
    height: 16px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.header__body-menu ul li a svg path {
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.header__body-menu ul li a {
    position: relative
}

.menu-item-has-children {
    position: relative;
}

.menu-item-has-children a:before {
    display: none !important;
}

.header__body-menu ul li a::before {
    content: "";
    position: absolute;
    background: var(--yellow);
    border-radius: 50%;
    bottom: -4px;
    left: 50%;
    min-width: 5px;
    min-height: 4px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0
}

.header__body-menu ul li .sub-menu {
    width: 200px;
    max-height: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    border-radius: 24px;
    background: var(--white);
    position: absolute;
    top: 21px;
    z-index: 100;
    padding: 0 8px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    left: 0;
    overflow: hidden
}

.header__body-menu ul li .sub-menu li:hover a {
    background: var(--yellow) !important;
}

.header__body-menu ul li .sub-menu li {
    width: 100%
}

.header__body-menu ul li .sub-menu li a {
    width: 100%;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0);
    color: var(--black) !important
}

.header__body-menu ul li .sub-menu li a:before {
    display: none
}

.header__body-menu ul li .sub-menu.active {
    max-height: 800px;
    padding: 8px
}

.header__body-menu ul li.current_page_item a::before {
    opacity: 1
}

.header__body-menu ul li:hover a {
    color: var(--yellow) !important;
}

.header__body-menu ul li:hover a::before {
    opacity: 1
}

.header__body-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.header__body-action a {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

.header__body-action a svg {
    width: 24px;
    height: 24px
}

.header__body-action a .circle {
    background: var(--yellow);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    position: absolute;
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 10px;
    line-height: 11.85px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--black);
    top: 0;
    right: 0
}

.header__body-action button {
    padding: 8px 16px;
    background: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    color: var(--black);
    border-radius: 100px
}

.header__body-action .auth-button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.header__body-action button svg {
    width: 24px;
    height: 24px
}

.ingredients {
    width: 100%;
    margin-top: 24px
}

.ingredients__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

.ingredients__body-filter {
    width: 282px;
    min-width: 282px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.ingredients__body-filter-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.ingredients__body-filter-top h2 {
    color: var(--black)
}

.ingredients__body-filter-top button {
    color: var(--red);
    background: rgba(0, 0, 0, 0)
}

.ingredients__body-filter-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.ingredients__body-filter-wrap a {
    padding: 17px 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px dashed var(--green-dark)
}

.ingredients__body-filter-wrap a p {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.ingredients__body-filter-wrap a span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--grey);
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 12px;
    line-height: 14.4px;
    letter-spacing: 0px
}

.ingredients__body-filter-wrap a span svg {
    width: 20px;
    height: 20px
}

.ingredients__body-filter-wrap a:hover p {
    color: var(--yellow)
}

.ingredients__body-filter-wrap a.active p {
    color: var(--yellow)
}

.ingredients__body-filter-rec {
    background: #fff;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
    width: 100%
}

.ingredients__body-filter-rec span {
    color: var(--black)
}

.ingredients__body-filter-rec div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px
}

.ingredients__body-filter-rec div a {
    padding: 4px 12px;
    background: var(--green-dark);
    color: var(--white);
    border-radius: 1000px
}

.ingredients__body-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.ingredients__body-main-search {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    position: relative
}

.ingredients__body-main-search-wrap {
    width: 790px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border-radius: 1000px;
    padding: 0 16px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.ingredients__body-main-search-wrap svg {
    width: 24px;
    height: 24px
}

.ingredients__body-main-search-wrap input {
    background: rgba(0, 0, 0, 0);
    width: 100%;
    color: var(--black)
}

.ingredients__body-main-search-wrap:hover {
    border-color: var(--yellow)
}

.ingredients__body-main-search button {
    padding: 12px 24px;
    color: var(--black);
    background: var(--yellow);
    border-radius: 1000px
}

.ingredients__body-main-search-block {
    width: 894px;
    position: absolute;
    top: calc(100% + 4px);
    background: var(--white);
    border-radius: 24px;
    padding: 0 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10;
    max-height: 0;
    overflow: hidden
}

.ingredients__body-main-search-block button {
    padding: 4px 12px;
    background: var(--med-grey);
    color: var(--grey);
    border-radius: 1000px
}

.ingredients__body-main-word {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ingredients__body-main-word a {
    width: 30px;
    height: 24px;
    background: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--green-dark);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: 6px
}

.ingredients__body-main-word a:hover {
    background: var(--yellow);
    color: var(--black)
}

.ingredients__body-main-word a:nth-child(1) {
    width: 34px
}

.ingredients__body-main-word a.active {
    background: var(--yellow);
    color: var(--black)
}

.ingredients__body-main-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px
}

.ingredients__body-main-wrap-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.ingredients__body-main-wrap-item span {
    color: var(--green-dark)
}

.ingredients__body-main-wrap-item div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px
}

.ingredients__body-main-wrap-item div a {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0);
    border-radius: 1000px;
    border: 1px solid var(--yellow);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.ingredients__body-main-wrap-item div a:hover {
    background: var(--yellow)
}

.ingredients__body-main .load-more {
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--green-dark);
    border-radius: 1000px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--green-dark);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    -ms-flex-item-align: center;
    align-self: center
}

.ingredients__body-main .banner {
    width: 100%;
    background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
    background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    border-radius: 24px;
    padding: 24px 24px 43px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.ingredients__body-main .banner img {
    position: absolute;
    z-index: 1;
    right: 32px;
    width: 385px;
    height: 100%;
    bottom: 0
}

.ingredients__body-main .banner span {
    color: var(--white)
}

.ingredients__body-main .banner p {
    color: var(--white)
}

.ingredients__body-main .banner button {
    padding: 16px 32px;
    border-radius: 1000px;
    background: var(--yellow);
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}

.attribute {
    padding-top: 92px;
    width: 100%
}

.attribute__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px
}

/* .attribute__body-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 18px
} */

/* .attribute__body-wrap-item:nth-child(1) {
    width: 262px;
} */

.attribute__body-wrap-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    width: calc(100% / 4 - 18px * 3 / 4);
    /* width: 292px */
}

.attribute__body-wrap-item .circle {
    width: 154px;
    height: 154px;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.attribute__body-wrap-item .circle img {
    max-width: 154px;
    max-height: 154px;
    width: auto;
    height: auto;
}

.attribute__body-wrap-item .circle .number {
    font-size: 62px;
    line-height: 110%;
    font-family: var(--adieu);
    color: var(--green-dark);
    position: absolute;
    bottom: 0;
    left: 0;
}

.attribute__body-wrap-item span {
    color: var(--black);
    margin-top: 8px
}

.attribute__body-wrap-item p {
    color: var(--black);
    max-width: 292px
}

.attribute__body-img {
    width: 214px;
    height: 220px
}

.program {
    margin-top: 120px;
    width: 100%
}

.program__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.program__body h2 {
    color: var(--green-dark);
    text-transform: uppercase;
}

.program__body .description {
    color: var(--black);
    text-align: center;
}

.program__body-wrap {
    margin-top: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

.program__body-wrap-item {
    width: 384px;
    background: var(--white);
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 0;
}

.program__body-wrap-item-top {
    width: 100%;
    height: 222px;
    position: relative;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 24px;
    overflow: hidden;
}

.program__body-wrap-item-top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.program__body-wrap-item-top-attr {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.program__body-wrap-item-top-attr span {
    padding: 4px 8px;
    border-radius: 1000px;
    color: var(--white);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}

.simplefavorite-button.active {
    opacity: 0 !important;
}

.program__body-wrap-item-top-like {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.heart-wrap {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heart-wrap img {
    position: absolute !important;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.heart-wrap img:nth-child(1) {
    opacity: 1;
}

.heart-wrap img:nth-child(2) {
    opacity: 0;
}

.simplefavorite-button.active+div img:nth-child(1) {
    opacity: 0;
}

.simplefavorite-button.active+div img:nth-child(2) {
    opacity: 1;
}

.like-btn:hover .heart-wrap img:nth-child(1) {
    opacity: 0;
}

.like-btn:hover .heart-wrap img:nth-child(2) {
    opacity: 1;
}

.program__body-wrap-item-top-like .simplefavorite-button {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
}

.program__body-wrap-item-bot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px 16px
}

.program__body-wrap-item-bot-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.program__body-wrap-item-bot-text span {
    color: var(--grey)
}

.program__body-wrap-item-bot-text p {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    min-height: 36px;
}

.program__body-wrap-item-bot-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.program__body-wrap-item-bot-action-el {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.program__body-wrap-item-bot-action-el svg {
    width: 24px;
    height: 24px
}

.program__body-wrap-item:hover .program__body-wrap-item-bot .program__body-wrap-item-bot-text p {
    color: var(--yellow)
}

.try {
    width: 100%;
    margin-top: 120px
}

.try__body {
    padding: 50px 52px 36px 350px;
    background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);
    position: relative;
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    min-height: 345px;
}

.try__body-img {
    width: 516px;
    height: 345px;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.try__body-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    order: 1;
    max-width: 356px;
}

.try__body-text h2 {
    color: var(--white);
    text-transform: uppercase
}

.try__body-text p {
    color: var(--white);
    max-width: 644px
}

.try__body-ingredients {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    width: 429px;
    position: relative;
    z-index: 1;

}

.try__body-ingredients-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 204px;
    overflow: hidden;
}

.try__body-ingredients-wrap a {
    padding: 12px 24px;
    border-radius: 1000px;
    background: var(--white);
    border: 1px solid var(--green-dark)
}

.try__body-ingredients-btn {
    color: var(--black);
    padding: 15px 25px;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    background: rgba(0, 0, 0, 0);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    border-radius: 1000px;
}

.experiment {
    width: 100%;
    margin-top: 120px
}

.experiment__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px
}

.experiment__body-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.experiment__body-text h2 {
    color: var(--green-dark);
    text-transform: uppercase;
    text-align: center
}

.experiment__body-text p {
    color: var(--black)
}

.experiment__body-categories {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px
}

.experiment__body-categories-item {
    width: 384px;
    height: 320px;
    position: relative;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    border-radius: 24px;
    overflow: hidden
}

.experiment__body-categories-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0
}

.experiment__body-categories-item-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--white);
    padding: 16px 24px;
    opacity: 0.9;
}

.experiment__body-categories-item-wrap div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.experiment__body-categories-item-wrap div span {
    color: var(--black)
}

.experiment__body-categories-item-wrap div p {
    color: var(--black)
}

.experiment__body-categories-item-wrap a {
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--yellow)
}

.experiment__body-categories-item-wrap a svg {
    width: 24px;
    height: 24px
}

.popular {
    width: 100%;
    margin-top: 120px
}

.popular__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px
}

.popular__body-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.popular__body-text h2 {
    color: var(--green-dark);
    text-transform: uppercase
}

.popular__body-text p {
    color: var(--black);
    max-width: 700px;
    text-align: center
}

.popular__body-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

.popular__body-block-item {
    width: 310px;
    height: 350px;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.popular__body-block-item-hot {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 8px;
    background: var(--red);
    color: var(--white);
    z-index: 1;
    border-radius: 1000px
}

.popular__body-block-item img {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

.popular__body-block-item-grad {
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 29, 27, 0)), to(#1D1D1B));
    background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.popular__body-block-item-wrap {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.popular__body-block-item-wrap span {
    color: var(--white);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px
}

.popular__body-block-item-wrap p {
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.popular__body-block-item-wrap a {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--yellow);
    color: var(--black);
    border-radius: 24px
}

.popular__body-block-item-wrap a svg {
    width: 24px;
    height: 24px
}

.popular__body-btn {
    padding: 16px 32px;
    border-radius: 1000px;
    border: 1px solid var(--green-dark);
    background: rgba(0, 0, 0, 0);
    color: var(--green-dark);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center
}

.daily {
    width: 100%;
    margin-top: 120px
}

.daily__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px
}

.daily__body-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.daily__body-text h2 {
    color: var(--green-dark);
    text-transform: uppercase
}

.daily__body-text p {
    color: var(--black);
    max-width: 700px;
    text-align: center
}

.daily__body-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

.daily__body-wrap-item {
    width: 310px;
    height: 301px;
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.daily__body-wrap-item-top {
    width: 100%;
    height: 200px;
    position: relative;
    padding: 12px;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daily__body-wrap-item-top img {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 0;
    border-radius: 24px;
    scale: 0.5;
}

.daily__body-wrap-item-top span {
    color: var(--black);
    padding: 4px 12px;
    border-radius: 1000px;
    background: var(--yellow);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

.daily__body-wrap-item-bot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px
}

.daily__body-wrap-item-bot-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.daily__body-wrap-item-bot-action div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.daily__body-wrap-item-bot-action div img {
    width: 16px;
    height: 16px
}

.daily__body-wrap-item-bot-action div svg {
    width: 16px;
    height: 16px
}

.daily__body-wrap-item-bot-action div span {
    color: var(--grey)
}

.daily__body-btn {
    padding: 16px 32px;
    border-radius: 1000px;
    border: 1px solid var(--green-dark);
    background: rgba(0, 0, 0, 0);
    color: var(--green-dark);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center
}

@font-face {
    font-family: "Adieu";
    src: url(../fonts/adieu.woff)
}

:root {
    --adieu: "Cabin", sans-serif;
    --rubik: "Rubik";
    --black: #1D1D1B;
    --grey: #878787;
    --med-grey: #E9E8E8;
    --white: #FFFFFF;
    --white-so: #FFFFFF26;
    --yellow: #F9C000;
    --yellow-dark: #E5A71A;
    --green-dark: #253561;
    --beige: #FFF6F0;
    --beige-dark: #F5DAC7;
    --blue: #3B6FE7;
    --green: #15CF74;
    --red: #C14965;
    --red-dark: #9A3A51
}

.h1 {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 96px;
    line-height: 110%;
    letter-spacing: 0%
}

.h2 {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 48px;
    line-height: 52.8px;
    letter-spacing: 0%
}

.h3-regular {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 32px;
    line-height: 35.2px;
    letter-spacing: 0px
}

.h3-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 32px;
    line-height: 35.2px;
    letter-spacing: 0px
}

.h4-regular {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0px
}

.h4-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0px
}

.h5-regular {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0px
}

.h5-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0px
}

.desc-regular {
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0%
}

.desc-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0%
}

.low-regular {
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: 0px
}

.low-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: 0%
}

.caption-regular {
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 12px;
    line-height: 14.4px;
    letter-spacing: 0px
}

.caption-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 12px;
    line-height: 14.4px;
    letter-spacing: 0px
}

.btn-black {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.btn-black:hover {
    background: var(--yellow) !important;
    border-color: rgba(0, 0, 0, 0);
    color: var(--black) !important
}

.btn-black:hover svg path {
    stroke: var(--black) !important
}

.btn-black:hover span {
    color: var(--black) !important
}

.btn-yellow {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.btn-yellow:hover {
    background: var(--yellow-dark) !important
}

.links-white {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.links-white:hover {
    color: var(--yellow) !important
}

.links-white:hover svg path {
    stroke: var(--yellow)
}

.links-yellow {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.links-yellow:hover {
    color: var(--white) !important
}

.links-yellow:hover svg path {
    stroke: var(--white)
}

.li-active .sub-menu li a {
    color: var(--black) !important;
}

.li-active a {
    color: var(--yellow) !important
}

.li-active svg {
    rotate: 180deg
}

.li-active svg path {
    stroke: var(--yellow)
}

.recommendation {
    width: 100%;
    margin-top: 120px
}

.recommendation__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}

.recommendation__body .h2 {
    text-transform: uppercase;
    color: var(--green-dark)
}

.recommendation__body-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px
}

.recommendation__body-block-item {
    width: 310px;
    background: var(--white);
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.recommendation__body-block-item-top {
    width: 100%;
    height: 200px;
    position: relative;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.recommendation__body-block-item-top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.recommendation__body-block-item-top-attr {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.recommendation__body-block-item-top-attr span {
    padding: 4px 8px;
    border-radius: 1000px;
    color: var(--white);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}

.recommendation__body-block-item-top-attr span:nth-child(1) {
    background: var(--red)
}

.recommendation__body-block-item-top-attr span:nth-child(2) {
    background: var(--green)
}

.recommendation__body-block-item-top-attr span:nth-child(3) {
    background: var(--black)
}

.recommendation__body-block-item-top-like {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%
}

.recommendation__body-block-item-top-like svg {
    width: 24px;
    height: 24px
}

.recommendation__body-block-item-top-like svg path {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recommendation__body-block-item-top-like:hover svg path {
    fill: var(--red);
    stroke: var(--red)
}

.recommendation__body-block-item-bot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px 16px
}

.recommendation__body-block-item-bot-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.recommendation__body-block-item-bot-text span {
    color: var(--grey)
}

.recommendation__body-block-item-bot-text p {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    min-height: 36px;
}

.recommendation__body-block-item-bot-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recommendation__body-block-item-bot-action-el {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.recommendation__body-block-item-bot-action-el svg {
    width: 24px;
    height: 24px
}

.recommendation__body-block-item:hover .recommendation__body-block-item-bot .recommendation__body-block-item-bot-text p {
    color: var(--yellow)
}

.recommendation__body .more {
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0);
    color: var(--green-dark);
    border: 1px solid var(--green-dark);
    border-radius: 1000px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center
}

.recipe {
    width: 100%;
    margin-top: 24px
}

.recipe__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    position: relative
}

.recipe__body-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-info h1 {
    color: var(--green-dark);
    text-transform: uppercase
}

.recipe__body-main-info p {
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0%;
}

.recipe__body-main-info p span {
    color: inherit;
    font-family: inherit;
}

.recipe__body-main-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border-radius: 24px;
    padding: 16px 24px
}

.recipe__body-main-tags-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    gap: 16px
}

.recipe__body-main-tags-item span {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--black)
}

.recipe__body-main-tags-item div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 690px;
}

.recipe__body-main-tags-item div div {
    padding: 4px 12px;
    background: var(--green-dark);
    color: var(--white);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    border-radius: 1000px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-tags-item div div:hover {
    background: var(--yellow);
    color: var(--black)
}

.recipe__body-main-tags-item div button {
    background: rgba(0, 0, 0, 0);
    color: var(--yellow);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-tags-item div button:hover {
    color: var(--green-dark)
}

.recipe__body-main-present {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
}

.wrap_img {
    width: 100%;
    height: 448px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.youtube-link img {
    width: 100%;
    height: 100%;
}

.wrap_img img {
    width: 100%;
    height: inherit
}

.recipe__body-main-present-attr {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.recipe__body-main-present-attr-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}

.recipe__body-main-present-attr-action-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    background: var(--green-dark);
    border-radius: 1000px;
    padding: 4px 12px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0px;
    color: var(--white)
}

.recipe__body-main-present-attr-action-rating svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-present-attr-action div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: var(--grey)
}

.recipe__body-main-present-attr-action div img {
    width: 24px;
    height: 24px
}

.recipe__body-main-present-attr-do {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.recipe__body-main-present-attr-do a {
    padding: 8px 16px;
    background: var(--beige-dark);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: var(--green-dark);
    border-radius: 1000px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
}

.recipe__body-main-present-attr-do a svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-present-attr-do button svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-present-attr-do a svg path {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-present-attr-do a:nth-child(1):hover svg path {
    stroke: var(--yellow-dark)
}

.recipe__body-main-present-attr-do a:nth-child(2):hover svg path {
    stroke: var(--yellow-dark)
}

.recipe__body-main-present-attr-do button:nth-child(3):hover svg path {
    fill: var(--yellow-dark)
}

.recipe__body-main-present-attr-do a:nth-child(4):hover {
    color: var(--red)
}

.recipe__body-main-present-attr-do a:nth-child(4):hover svg path {
    stroke: var(--red)
}

.recipe__body-main-way {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.recipe__body-main-way-method {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    background: var(--white);
    border-radius: 24px;
    padding: 24px 32px;
    width: 384px
}

.recipe__body-main-way-method span {
    color: var(--green-dark)
}

.recipe__body-main-way-method ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-way-method ol li {
    list-style: decimal;
    list-style-position: inside;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0%;
}

.recipe__body-main-way-method ol li::marker {
    color: var(--yellow)
}

.recipe__body-main-way-ingredients {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding: 24px 32px;
    background: var(--white);
    border-radius: 24px;
    width: 384px
}

.recipe__body-main-way-ingredients .title {
    color: var(--green-dark)
}

.recipe__body-main-way-ingredients-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-way-ingredients-block-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.recipe__body-main-way-ingredients-block-top-size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.recipe__body-main-way-ingredients-block-top-size div {
    background: var(--white);
    border-radius: 100px;
    padding: 8px 16px;
    border: 1px solid var(--yellow);
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    cursor: pointer;
}

.recipe__body-main-way-ingredients-block-top-size div:hover {
    background: var(--yellow)
}

.recipe__body-main-way-ingredients-block-top-size div.active {
    background: var(--yellow)
}

.recipe__body-main-way-ingredients-block-top-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    padding: 2.5px 4px;
    background: var(--beige);
    border-radius: 100px
}

.recipe__body-main-way-ingredients-block-top-col button {
    width: 24px;
    height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-way-ingredients-block-top-col button svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.recipe__body-main-way-ingredients-block-top-col button:nth-child(1) {
    background: var(--beige-dark)
}

.recipe__body-main-way-ingredients-block-top-col button:nth-child(2) {
    background: var(--med-grey)
}

.recipe__body-main-way-ingredients-block-top-col button:hover {
    background: var(--yellow-dark) !important
}

.recipe__body-main-way-ingredients-block-top-col span {
    min-width: 34px;
    height: 27px;
    color: var(--black);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.recipe__body-main-way-ingredients-block-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-way-ingredients-block-table-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 8px
}

.recipe__body-main-way-ingredients-block-table-item span {
    color: var(--black);
    white-space: nowrap
}

.recipe__body-main-way-ingredients-block-table-item .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed var(--med-grey)
}

.recipe__body-main-way-ingredients-block-table-item div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.recipe__body-main-way-ingredients-block-table-item div p {
    color: var(--black);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox-label {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--med-grey);
    border-radius: 4px;
    background: #fff;
    -webkit-transition: .3s;
    transition: .3s
}

.recipe__body-main-way-ingredients-block-table-item div svg {
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox:hover+.checkbox-view {
    border-color: var(--yellow)
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view {
    background-color: var(--yellow)
}

.recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view svg {
    opacity: 1
}

.recipe__body-main-banner {
    width: 100%;
    height: 190px;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-banner img {
    width: 100%;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.recipe__body-main-banner span {
    color: var(--white)
}

.recipe__body-main-banner p {
    color: var(--white);
    max-width: 367px
}

.recipe__body-main-banner button {
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    text-align: center;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content
}

.recipe__body-main-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    background: var(--white);
    padding: 24px 32px;
    border-radius: 24px
}

.recipe__body-main-user-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.recipe__body-main-user-top button {
    background: var(--beige-dark);
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    width: 100%;
    height: 41px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 100px
}

.recipe__body-main-user-top button.active {
    background: var(--green-dark);
    color: var(--white)
}

.recipe__body-main-user-top button:hover {
    background: var(--green-dark);
    color: var(--white)
}

.recipe__body-main-user-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px
}

.recipe__body-main-user-section-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.recipe__body-main-user-section-title span {
    color: var(--black)
}

.recipe__body-main-user-section-title p {
    color: var(--black)
}

.recipe__body-main-user-section-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-main-user-section-block-save {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.recipe__body-main-user-section-block-save p {
    color: var(--grey);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px
}

.recipe__body-main-user-section-block-save div {
    padding: 12px 24px;
    border: 1px solid var(--med-grey);
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    color: var(--black);
    border-radius: 100px;
    position: relative;
}

.simplefavorite-button {
    position: absolute !important;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0 !important;
}

.recipe__body-main-user-section-block-save div .line {
    width: 1px;
    height: 20px;
    background: var(--med-grey);
    padding: 0;
    border-radius: 0%;
}

.recipe__body-main-user-section-block-save div:has(.simplefavorite-button.active) {
    border-color: var(--yellow);
    color: var(--yellow);
}

.recipe__body-main-user-section-block-save div svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-user-section-block-save div span {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-block-save div:hover span {
    color: var(--yellow)
}

.recipe__body-main-user-section-block-form .comment-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.recipe__body-main-user-section-block-form .comment-form .form-submit input {
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    text-align: center;
    width: auto !important;
}

.recipe__body-main-user-section-block-form .comment-form textarea {
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0);
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--med-grey);
    border-radius: 20px;
    color: var(--black);
    resize: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-block-form .comment-form input {
    width: 360px;
    height: 49px;
    background: rgba(0, 0, 0, 0);
    padding-left: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--med-grey);
    border-radius: 20px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-block-form .comment-form textarea:hover {
    border-color: var(--yellow)
}

.recipe__body-main-user-section-block-form .comment-form input:hover {
    border-color: var(--yellow)
}

.recipe__body-main-user-section-block-form-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    order: -1;
}

.recipe__body-main-user-section-block-form-rating p:nth-child(1) {
    color: var(--grey);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px
}

.recipe__body-main-user-section-block-form-rating-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px
}

.recipe__body-main-user-section-block-form-rating-info .line {
    width: 1px;
    height: 44px;
    background: var(--med-grey)
}

/*Stars*/
.stars span a:hover {
    border-color: var(--yellow);
}

.stars span a.active {
    border-color: var(--yellow);
}

.stars span a::before {
    width: 24px;
    height: 24px;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: 0%;
    color: var(--black);
}

.stars span a:nth-child(1)::before {
    content: '1' !important;
    background: url(../../new/images/dist/face/1.svg) no-repeat center;
    background-size: 0% 0%;
}

.stars span a:nth-child(2)::before {
    content: '2' !important;
    background: url(../../new/images/dist/face/2.svg) no-repeat center;
    background-size: 0% 0%;
}

.stars span a:nth-child(3)::before {
    content: '3' !important;
    background: url(../../new/images/dist/face/3.svg) no-repeat center;
    background-size: 0% 0%;
}

.stars span a:nth-child(4)::before {
    content: '4' !important;
    background: url(../../new/images/dist/face/4.svg) no-repeat center;
    background-size: 0% 0%;
}

.stars span a:nth-child(5)::before {
    content: '5' !important;
    background: url(../../new/images/dist/face/5.svg) no-repeat center;
    background-size: 0% 0%;
}

.stars span a.active::before {
    content: '' !important;
    background-size: 100% 100%;
}

.stars span a:hover::before {
    content: '' !important;
    background-size: 100% 100%;
}

/*Stars*/
.recipe__body-main-user-section-block-form-rating-info .stars span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.stars span a {
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid var(--med-grey);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0px;
}

.stars span a span {
    position: absolute;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.stars span a img {
    width: 24px;
    height: 24px;
    opacity: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.stars.active {
    border-color: var(--yellow)
}

.stars.active img {
    opacity: 1
}

.stars.active span {
    opacity: 0
}

.wpcr3_rating_style1_score {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}



.recipe__body-main-user-section-block-form-rating-info .col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.recipe__body-main-user-section-block-form-rating-info .col span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: var(--black)
}

.recipe__body-main-user-section-block-form-rating-info .col span svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-user-section-block-form-rating-info .col p {
    color: var(--grey)
}

.recipe__body-main-user-section-block-form-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.recipe__body-main-user-section-block-form-main input {
    width: 360px;
    height: 49px;
    background: rgba(0, 0, 0, 0);
    padding-left: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--med-grey);
    border-radius: 24px;
    color: var(--black);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-block-form-main textarea {
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0);
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--med-grey);
    border-radius: 24px;
    color: var(--black);
    resize: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-block-form-main input:hover {
    border-color: var(--yellow)
}

.recipe__body-main-user-section-block-form-main textarea:hover {
    border-color: var(--yellow)
}

.recipe__body-main-user-section-block-form-main button {
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    text-align: center
}

.recipe__body-main-user-section-type {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recipe__body-main-user-section-type .line {
    width: 100%;
    height: 1px;
    background: var(--med-grey)
}

.recipe__body-main-user-section-type h3 {
    color: var(--green-dark);
    white-space: nowrap
}

.recipe__body-main-user-section-commetns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px
}



.recipe__body-main-user-section-commetns-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.recipe__body-main-user-section-commetns-item-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.recipe__body-main-user-section-commetns-item-top .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.recipe__body-main-user-section-commetns-item-top .wrap img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name .text {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    color: var(--green-dark)
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div svg {
    width: 16px;
    height: 16px
}

.recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info p {
    color: var(--grey)
}

.recipe__body-main-user-section-commetns-item-top .marks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.recipe__body-main-user-section-commetns-item-top .marks button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0)
}

.recipe__body-main-user-section-commetns-item-top .marks button svg {
    width: 20px;
    height: 20px
}

.recipe__body-main-user-section-commetns-item-top .marks button:nth-child(1) {
    color: var(--red)
}

.recipe__body-main-user-section-commetns-item-top .marks button:nth-child(2) {
    color: var(--green)
}

.recipe__body-main-user-section-commetns-item .comment {
    margin-top: 4px;
    color: var(--black);
    max-width: 617px
}

.recipe__body-main-user-section-commetns-item .show__more {
    color: var(--yellow);
    background: rgba(0, 0, 0, 0);
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-main-user-section-commetns-item .show__more:hover {
    color: var(--green-dark)
}

.recipe__body-main-user-section-commetns-item .answer {
    margin-top: 4px;
    width: 100%;
    padding: 16px 24px;
    background: var(--beige);
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px
}

.recipe__body-main-user-section-commetns-item .answer .answer__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.recipe__body-main-user-section-commetns-item .answer .answer__top img {
    width: 40px;
    height: 40px
}

.recipe__body-main-user-section-commetns-item .answer .answer__top span {
    color: var(--green-dark);
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px
}

.recipe__body-main-user-section-commetns-item .answer p {
    color: var(--black)
}

.recipe__body-main-user-section-commetns-item .answer .date {
    color: var(--grey)
}

.recipe__body-main-user-section .load__more {
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--green-dark);
    border-radius: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
    text-align: center;
    color: var(--green-dark)
}

.recipe__body-user {
    width: 384px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 0;
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content
}

.recipe__body-user-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    background: var(--white);
    padding: 16px 24px;
    border-radius: 24px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recipe__body-user-top span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--green-dark);
    white-space: nowrap
}

.recipe__body-user-top span .line {
    width: 79.5px;
    height: 1px;
    background: var(--med-grey)
}

.recipe__body-user-top img {
    width: 170px;
    height: 150px
}

.recipe__body-user-top div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recipe__body-user-top div p {
    color: var(--black);
    text-align: center
}

.recipe__body-user-top div button {
    width: 100%;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--yellow);
    border-radius: 1000px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center;
    color: var(--black)
}

.recipe__body-user-form {
    padding: 16px 24px;
    background: var(--white);
    border-radius: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px
}

.recipe__body-user-form span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: var(--green-dark);
    white-space: nowrap
}

.recipe__body-user-form span .line {
    width: 79.5px;
    height: 1px;
    background: var(--med-grey)
}

.recipe__body-user-form p {
    color: var(--black);
    text-align: center
}

.recipe__body-user-form div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.recipe__body-user-form div input {
    width: 224px;
    height: 49px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid var(--med-grey);
    border-radius: 1000px;
    color: var(--black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 16px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.recipe__body-user-form div input:hover {
    border-color: var(--yellow)
}

.recipe__body-user-form div button {
    width: 104px;
    height: 49px;
    background: var(--yellow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--black);
    border-radius: 1000px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    text-align: center
}

.recipe__body-user-share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px 24px;
    border-radius: 24px;
    background: var(--white)
}

.recipe__body-user-share span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--green-dark);
    white-space: nowrap
}

.recipe__body-user-share span .line {
    width: 79.5px;
    height: 1px;
    background: var(--med-grey)
}

.recipe__body-user-share div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.recipe__body-user-share div a {
    width: 40px;
    height: 40px
}

.recipe__body-user-share div a img {
    width: 100%;
    height: 100%
}



*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html,
body {
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

:focus,
:active {
    outline: none
}

a:focus,
a:active {
    outline: none
}

nav,
footer,
header,
aside {
    display: block
}

s input,
button,
textarea {
    font-family: inherit
}

input::-ms-clear {
    display: none
}

button {
    cursor: pointer
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

a,
a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

ul li {
    list-style: none
}

img {
    vertical-align: top
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit
}

.hidden-item {
    display: none !important;
}

.hidden-item.show {
    display: block !important;
}

@media (max-width: 1920px) {
    html {
        font-size: .0694444444vw
    }

    body {
        max-width: 1440rem;
        background: var(--beige);
        margin: 0 auto
    }

    .comment-list .blog-comment-item:not(:last-child) {
        padding-bottom: 24rem;
        border-bottom: 1rem solid var(--med-grey);
    }

    .comment-list {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .container {
        max-width: 1200rem;
        width: 100%;
        margin: 0 auto
    }

    .container-soft {
        max-width: 1200rem;
        width: 100%;
        margin: 0 auto
    }

    @font-face {
        font-family: "Adieu";
        src: url(../fonts/adieu.woff)
    }

    :root {
        --adieu: "Cabin", sans-serif;
        --rubik: "Rubik";
        --black: #1D1D1B;
        --grey: #878787;
        --med-grey: #E9E8E8;
        --white: #FFFFFF;
        --white-so: #FFFFFF26;
        --yellow: #FFAE00;
        --yellow-dark: #E5A71A;
        --green-dark: #253561;
        --beige: #FFF6F0;
        --beige-dark: #F5DAC7;
        --blue: #3B6FE7;
        --green: #15CF74;
        --red: #C14965;
        --red-dark: #9A3A51
    }

    .h1 {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 96rem;
        line-height: 110%;
        letter-spacing: 0%
    }

    .h2 {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 48rem;
        line-height: 52.8rem;
        letter-spacing: 0%
    }

    .h3-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 32rem;
        line-height: 35.2rem;
        letter-spacing: 0rem
    }

    .h3-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 32rem;
        line-height: 35.2rem;
        letter-spacing: 0rem
    }

    .h4-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0rem
    }

    .h4-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0rem
    }

    .h5-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 20rem;
        line-height: 22rem;
        letter-spacing: 0rem
    }

    .h5-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 20rem;
        line-height: 22rem;
        letter-spacing: 0rem
    }

    .desc-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 16rem;
        line-height: 19.2rem;
        letter-spacing: 0%
    }

    .desc-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 19.2rem;
        letter-spacing: 0%
    }

    .low-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem
    }

    .low-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0%
    }

    .caption-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 12rem;
        line-height: 14.4rem;
        letter-spacing: 0rem
    }

    .caption-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 12rem;
        line-height: 14.4rem;
        letter-spacing: 0rem
    }

    .btn-black {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .btn-black:hover {
        background: var(--yellow) !important;
        border-color: rgba(0, 0, 0, 0) !important
    }

    .find:hover {
        background: var(--yellow);
        color: var(--black) !important
    }

    .btn-yellow {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .btn-yellow:hover {
        background: var(--yellow-dark) !important
    }

    .links-white {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .links-white:hover {
        color: var(--yellow) !important
    }

    .links-white:hover svg path {
        stroke: var(--yellow)
    }

    .links-yellow {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .links-yellow:hover {
        color: var(--white) !important
    }

    .links-yellow:hover svg path {
        stroke: var(--white)
    }

    .li-active a {
        color: var(--yellow) !important
    }

    .li-active svg {
        rotate: 180deg
    }

    .li-active svg path {
        stroke: var(--yellow)
    }




    .user {
        width: 100%;
        margin-top: 24rem;
    }

    .user__body {
        width: 100%;
        display: flex;
        gap: 24rem;
    }

    .user__body-navigation {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        min-width: 282rem;
        max-width: 282rem;
    }

    .user__body-navigation-top {
        padding: 24rem;
        background: var(--white);
        border-radius: 24rem;
        display: flex;
        flex-direction: column;
    }

    .user__body-navigation-top-profile {
        display: flex;
        gap: 8rem;
        padding-bottom: 13rem;
        border-bottom: 1rem dashed var(--black);
    }

    .user__body-navigation-top-profile .image {
        width: 45rem;
        height: 45rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .user__body-navigation-top-profile .image img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 24rem;
    }

    .user__body-navigation-top-profile .image img:nth-child(1) {
        z-index: 0;
    }

    .user__body-navigation-top-profile .image img:nth-child(2) {
        z-index: 1;
    }

    .user__body-navigation-top-profile .wrap {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

    .user__body-navigation-top-profile .wrap p {
        color: var(--grey);
    }

    .user__body-navigation-top-menu {
        display: flex;
        flex-direction: column;
    }

    .user__body-navigation-top-menu button.current {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button:hover {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button,
    .user__body-navigation-top-menu a {
        padding: 14rem 0;
        display: flex;
        gap: 8rem;
        background: transparent;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        color: var(--black);
        white-space: nowrap;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    .user__body-navigation-ingredients {
        background: #fff;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
        width: 100%
    }

    .user__body-navigation-ingredients span {
        color: var(--black)
    }

    .user__body-navigation-ingredients div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .user__body-navigation-ingredients div a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        border-radius: 1000rem
    }

    .profile {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .profile__wrap {
        display: flex;
        gap: 24rem;
    }

    .profile__wrap-info {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        min-width: 486rem;
    }

    .profile__wrap-info-user {
        padding: 16rem;
        background: var(--white);
        display: flex;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
    }

    .profile__wrap-info-user form {
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .profile__wrap-info-user form .input {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .profile__wrap-info-user form .input p {
        color: var(--grey);
    }

    .profile__wrap-info-user form .input p span {
        color: var(--red);
    }

    .profile__wrap-info-user form .input input {
        width: 454rem;
        padding: 16.5rem 16rem;
        color: var(--black);
        border-radius: 24rem;
        border: 1rem solid var(--grey);
    }

    .profile__wrap-info-user form .submit {
        display: flex;
        align-items: center;
        gap: 12rem;
    }

    .profile__wrap-info-user form .submit button {
        padding: 16rem 32rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        border-radius: 100rem;
    }

    .profile__wrap-info-user form .submit .saved.active {
        opacity: 1;
    }

    .profile__wrap-info-user form .submit .saved {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--green);
        transition: all 0.3s ease;
        opacity: 0;
    }

    .profile__wrap-info-user form .submit .saved svg {
        width: 16rem;
        height: 16rem;
    }

    .profile__wrap-plan {
        width: 100%;
        padding: 32rem;
        position: relative;
        border-radius: 24rem;
        background: var(--white);
        display: flex;
        flex-direction: column;
        gap: 16rem;
        overflow: hidden;
        max-width: 384rem;
    }

    .profile__wrap-plan .text {
        display: flex;
        align-items: center;
        gap: 8rem;
        position: relative;
        z-index: 1;
    }

    .profile__wrap-plan .text p {
        color: var(--black);
    }

    .profile__wrap-plan .text span {
        color: var(--yellow);
    }

    .profile__wrap-plan .img {
        position: absolute;
        top: 0;
        right: 0;
        width: 172rem;
        height: 103rem;
        z-index: 0;
        opacity: .5;
    }

    .profile__wrap-plan .list {
        display: flex;
        gap: 8rem;
        flex-direction: column;
        position: relative;
        z-index: 1;
        margin-top: 8rem;
    }

    .profile__wrap-plan .list p {
        color: var(--grey);
    }

    .profile__wrap-plan .list ul {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .profile__wrap-plan .list ul li {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .profile__wrap-plan .list ul li img {
        width: 24rem;
        height: 24rem;
        min-width: 24rem;
        min-height: 24rem;
    }

    .profile__wrap-plan .info {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .profile__wrap-plan .info .item {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .profile__wrap-plan .info .item p {
        color: var(--grey);
    }

    .profile__wrap-plan .action {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        margin-top: 16rem;
    }

    .profile__wrap-plan .action button {
        padding-bottom: 2rem;
        color: var(--green-dark);
        border-bottom: 1rem dashed var(--yellow);
        max-width: max-content;
        background: transparent;
    }

    .profile__wrap-plan .action button:last-child {
        border: none;
        color: var(--red);
        padding-bottom: 0;
    }

    .books-list {
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .book-item {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        align-items: center;
        width: 435rem;
    }

    .book-item img {
        width: 282rem;
        height: 188rem;
    }

    .book-item-wrap {
        display: flex;
        flex-direction: column;
        background: var(--white);
        border-radius: 24rem;
        padding: 24rem;
        gap: 16rem;
    }

    .book-item-wrap .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .book-item-wrap .text h3 {
        color: var(--black);
    }

    .book-item-wrap .text .action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .book-item-wrap .text .action span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .book-item-wrap .text .action span svg {
        width: 24rem;
        height: 24rem;
    }

    .book-item-wrap .buttons {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .book-item-wrap .buttons button,
    .book-item-wrap .buttons a {
        width: 189.5rem;
        height: 41rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rem;
    }

    .book-item-wrap .buttons button {
        background: transparent;
        border: 1rem solid var(--green-dark);
    }

    .book-item-wrap .buttons a {
        background: var(--yellow);
        color: var(--black);
    }

    .books__page {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .books__page .back {
        background: transparent;
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--black);
    }

    .books__page .back svg {
        width: 24rem;
        height: 24rem;
    }

    .books__page .item__book {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        width: 100%;
    }

    .books__page .item__book .wrap {
        display: flex;
        gap: 8rem;
    }

    .books__page .item__book iframe {
        width: 100%;
        height: 400rem;
    }

    .books__page .item__book .wrap img {
        width: 138rem;
        height: 92rem;
    }

    .books__page .item__book .wrap .text {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .books__page .item__book .wrap .text h3 {
        color: var(--black);
    }

    .books__page .item__book .wrap .text .action {
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .books__page .item__book .wrap .text .action span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .books__page .item__book .wrap .text .action span svg {
        width: 24rem;
        height: 24rem;
    }


    .user-comments-list {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
        border-radius: 24rem;
        background: var(--white);
        padding: 32rem;
    }

    .user-comments-list .comment-item {
        display: flex;
        gap: 24rem;
    }

    .user-comments-list .comment-item img {
        width: 170rem;
        height: 110rem;
        border-radius: 24rem;
        min-width: 170rem;
        min-height: 110rem;
    }

    .user-comments-list .comment-item .info {
        display: flex;
        flex-direction: column;
        gap: 12rem;
        width: 100%;
    }

    .user__body-sections {
        width: 100%;
    }

    .user-comments-list .comment-item .info .wrap {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .user-comments-list .comment-item .info .wrap .text {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .user-comments-list .comment-item .info .wrap .text p {
        color: var(--grey);
    }

    .user-comments-list .comment-item .info .wrap .attr {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .user-comments-list .comment-item .info .wrap .attr .wc-review-rating {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .user-comments-list .comment-item .info .wrap .attr .wc-review-rating img {
        height: 24rem;
        width: 24rem;
        min-height: auto;
        min-width: auto;
    }

    .user-comments-list .comment-item .info .wrap .attr span {
        color: var(--grey);
    }

    .user-comments-list .comment-item .info .action {
        display: flex;
        align-items: center;
        gap: 12rem;
    }

    .user-comments-list .comment-item .info .action a,
    .user-comments-list .comment-item .info .action button {
        color: var(--green-dark);
        padding-bottom: 2rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: transparent;
    }

    .user-comments-list .comment-item .info .action a:before {
        content: '';
        width: 100%;
        height: 0px;
        border-bottom: 1rem dashed var(--yellow);
        position: absolute;
        bottom: -2rem;
    }

    .user-comments-list .comment-item .info .action button:before {
        content: '';
        width: 100%;
        height: 0px;
        border-bottom: 1rem dashed var(--yellow);
        position: absolute;
        bottom: -2rem;
    }

    .user-comments-list .comment-item .info .admin-reply {
        padding: 0rem 24rem;
        background: var(--beige);
        display: flex;
        flex-direction: column;
        gap: 8rem;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        border-radius: 24rem;
    }

    .user-comments-list .comment-item .info .admin-reply.show {
        max-height: 1000px;
        padding: 16rem 24rem;
    }

    .user-comments-list .comment-item .info .admin-reply .admin {
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .user-comments-list .comment-item .info .admin-reply .admin img {
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        min-height: auto;
        min-width: auto;
    }

    .user-comments-list .comment-item .info .admin-reply .admin span {
        color: var(--black);
    }

    .user-comments-list .comment-item .info .admin-reply .comment-date {
        color: var(--grey);
    }

    .auth {
        width: 100%;
        height: 100vh;
        background: #1D1D1B50;
        backdrop-filter: blur(10rem);
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
    }

    .auth_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth_wrap-close {
        position: absolute;
        top: 16rem;
        right: 64rem;
        background: var(--yellow);
        border-radius: 50%;
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth_wrap-close svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        padding: 40rem;
        background: var(--white);
        border-radius: 24rem;
    }

    .auth__body-tabs {
        display: flex;
        align-items: center;
        background: var(--beige);
        padding: 4rem;
        border-radius: 100rem;
    }

    .auth__body-tabs button {
        width: 183rem;
        height: 33rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 100rem;
        transition: all 0.3s ease;
        color: var(--black);
    }

    .auth__body-tabs button.current {
        background: var(--green-dark);
        color: var(--white);
    }

    .auth__body-register {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        align-items: center;
    }

    .auth__body-register form {
        display: flex;
        flex-wrap: wrap;
        gap: 12rem;
        max-width: 374rem;
    }

    .auth__body-register form .input {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .auth__body-register form .input p {
        color: var(--grey);
    }

    .auth__body-register form .input p span {
        color: var(--red);
    }

    .auth__body-register form .input input {
        width: 100%;
        height: 50rem;
        padding-left: 24rem;
        border-radius: 100rem;
        background: transparent;
        border: 1rem solid var(--med-grey);
        display: flex;
        align-items: center;
    }

    .auth__body-register form .input:nth-child(1) {
        width: 181rem;
    }

    .auth__body-register form .input:nth-child(2) {
        width: 181rem;
    }

    .auth__body-register form .input:nth-child(3) {
        width: 100%;
        min-width: 100%;
    }

    .auth__body-register form .password {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        width: 100%;
    }

    .auth__body-register form .password p {
        color: var(--grey);
    }

    .auth__body-register form .password p a {
        color: var(--red);
    }

    .auth__body-register form .password .input__wrap {
        width: 100%;
        height: 50rem;
        display: flex;
        align-items: center;
        position: relative;
        border: 1rem solid var(--med-grey);
        border-radius: 100rem;
        padding-left: 24rem;
    }

    .auth__body-register form .password .input__wrap svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register form .password .input__wrap input {
        width: 100%;
    }

    .auth__body-register form .password .input__wrap button {
        width: 24rem;
        height: 24rem;
        position: absolute;
        right: 24rem;
        background: transparent;
    }

    .auth__body-register form .password .mistakes_list {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .auth__body-register form .password .mistakes_list li.good {
        color: var(--green);
    }

    .auth__body-register form .password .mistakes_list li.good svg path {
        stroke: var(--green);
    }

    .auth__body-register form .password .mistakes_list li {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .auth__body-register form .password .mistakes_list li svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register form .create-account,
    .auth__body-register form .sign-in {
        width: 100%;
        height: 50rem;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
    }

    .auth__body-register .other {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 5rem;
    }

    .auth__body-register .other .line {
        width: 100%;
        height: 1rem;
        background: var(--grey);
    }

    .auth__body-register .other span {
        color: var(--grey);
    }

    .auth__body-register .buttons {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .auth__body-register .buttons button,
    .auth__body-register .buttons a {
        width: 119.33rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 8rem;
        border: 1rem solid var(--med-grey);
    }

    .auth__body-register .buttons button svg,
    .auth__body-register .buttons a svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register .policy {
        color: var(--grey);
        max-width: 259rem;
        text-align: center;
    }

    .auth__body-register .policy a {
        color: var(--green-dark);
    }

    .reels {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 111rem;
        height: 111rem;
        border-radius: 50%;
        background: var(--beige-dark);
        position: fixed;
        bottom: 40rem;
        right: 40rem;
        cursor: pointer;
    }

    .reels svg {
        position: absolute;
        width: 103rem;
        height: 102rem;
        animation: wheel 10s linear infinite;
        transform-origin: 50% 50%;
    }

    .reels img {
        width: 64rem;
        height: 64rem;
    }



    .guide {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #1D1D1B50;
        display: flex;
        align-items: center;
        justify-content: center;
        scale: 0;
        transition: all 0.5s ease;
    }

    .guide.active {
        scale: 1;
    }

    .guide-close {
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 50%;
        position: absolute;
        top: 16rem;
        right: 16rem;
    }

    .guide-close svg {
        width: 24rem;
        height: 24rem;
    }

    .guide__body {
        width: 638rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 40rem;
        display: flex;
        flex-direction: column;
        gap: 16rem;
        position: relative;
    }

    .guide__body img {
        width: 335rem;
        height: 349rem;
        position: absolute;
        top: -32rem;
        right: -96rem;
    }

    .guide__body h3 {
        color: var(--green-dark);
    }

    .guide__body p {
        color: var(--black);
    }

    .guide__body p span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
    }

    .guide__body a {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 24rem;
        color: var(--black);
        max-width: max-content;
    }


    .wheel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 111rem;
        height: 111rem;
        border-radius: 50%;
        background: var(--beige-dark);
        position: fixed;
        bottom: 40rem;
        right: 40rem;
        cursor: pointer;
    }

    .wheel svg {
        position: absolute;
        width: 103rem;
        height: 102rem;
        animation: wheel 10s linear infinite;
        transform-origin: 50% 50%;
    }

    .wheel img {
        width: 64rem;
        height: 64rem;
    }

    .modal__wheel {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #1D1D1B50;
        display: flex;
        align-items: center;
        justify-content: center;
        scale: 0;
        transition: all 0.5s ease;
    }

    .modal__wheel.active {
        scale: 1;
    }

    .modal__wheel-close {
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 50%;
        position: absolute;
        top: 16rem;
        right: 16rem;
    }

    .modal__wheel-close svg {
        width: 24rem;
        height: 24rem;
    }

    .modal__wheel-block {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }

    .modal__wheel-block-main {
        position: relative;
        width: 201rem;
        height: 107rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 1s ease;
    }

    .modal__wheel-block-main.active {
        opacity: 1;
    }

    .modal__wheel-block-main .ellipse {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .modal__wheel-block-main .text {
        position: absolute;
        z-index: 1;
        top: 0;
        width: 174rem;
        height: 72rem;
    }

    .modal__wheel-block-main .icon {
        position: absolute;
        z-index: 1;
        width: 39rem;
        height: 43rem;
    }

    .modal__wheel-block-items {
        width: 810rem;
        height: 435rem;
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-bottom: -108rem;
        transform-origin: bottom;
        rotate: -180deg;
        transition: all 1s ease;
    }

    .modal__wheel-block-items.active {
        rotate: 0deg;
        margin-bottom: -102rem;
    }

    .modal__wheel-block-items-item {
        display: flex;
        position: absolute;
        bottom: 0;
        align-items: center;
        transform-origin: left center;
    }

    .modal__wheel-block-items-item a {
        position: relative;
        z-index: 1;
    }

    .modal__wheel-block-items-item svg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .modal__wheel-block-items-item:nth-child(1) {
        width: 393rem;
        height: 220rem;
    }

    .modal__wheel-block-items-item:nth-child(1) a {
        rotate: 23.75deg;
        margin-top: -35rem;
        margin-left: 23rem;
    }

    .modal__wheel-block-items-item:nth-child(2) a {
        rotate: 38.75deg;
        margin-top: -80rem;
        margin-left: 20rem;
    }

    .modal__wheel-block-items-item:nth-child(2) {
        width: 349rem;
        height: 300rem;
        left: 45rem;
    }

    .modal__wheel-block-items-item:nth-child(3) a {
        rotate: 54deg;
        margin-top: -100rem;
        margin-left: 28rem;
    }

    .modal__wheel-block-items-item:nth-child(3) {
        width: 285rem;
        height: 364rem;
        left: 110.1rem;
    }

    .modal__wheel-block-items-item:nth-child(4) a {
        rotate: 70deg;
        margin-top: -143rem;
        margin-left: 25rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(4) {
        width: 203rem;
        height: 405rem;
        left: 193.3rem;
    }

    .modal__wheel-block-items-item:nth-child(5) a {
        rotate: 82.6deg;
        margin-top: -134rem;
        margin-left: -10rem;
    }

    .modal__wheel-block-items-item:nth-child(5) {
        width: 106rem;
        height: 431rem;
        left: 292.2rem;
    }

    .modal__wheel-block-items-item:nth-child(6) a {
        rotate: -83.6deg;
        margin-top: -150rem;
        margin-left: -40rem;
    }

    .modal__wheel-block-items-item:nth-child(6) {
        width: 105rem;
        height: 428rem;
        left: 395.4rem;
    }

    .modal__wheel-block-items-item:nth-child(7) a {
        rotate: -68.6deg;
        margin-top: -144rem;
        margin-left: 25rem;
    }

    .modal__wheel-block-items-item:nth-child(7) {
        width: 199rem;
        height: 404rem;
        left: 399.5rem;
    }

    .modal__wheel-block-items-item:nth-child(8) a {
        rotate: -53.6deg;
        margin-top: -120rem;
        margin-left: 83rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(8) {
        width: 281rem;
        height: 363.5rem;
        left: 402rem;
    }

    .modal__wheel-block-items-item:nth-child(9) a {
        rotate: -39.18deg;
        margin-top: -82rem;
        margin-left: 150rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(9) {
        width: 349rem;
        height: 303rem;
        left: 402rem
    }

    .modal__wheel-block-items-item:nth-child(10) a {
        rotate: -25.6deg;
        margin-left: 170rem;
        margin-top: -35rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(10) {
        width: 391rem;
        height: 222rem;
        left: 405rem;
    }



    .footer {
        width: 100%;
        margin-top: 116rem;
        background: var(--green-dark)
    }

    .footer__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%
    }

    .footer__body-top {
        padding: 24rem 64rem;
        border-bottom: 1rem solid var(--grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .footer__body-top-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .footer__body-top-text h5 {
        color: var(--yellow);
        max-width: 225rem
    }

    .footer__body-top-text p {
        color: var(--white);
        max-width: 215rem
    }

    .footer__body-top-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        gap: 59.25rem
    }

    .footer__body-top-items-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .footer__body-top-items-item .circle {
        width: 48rem;
        height: 48rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white-so);
        border-radius: 50%
    }

    .footer__body-top-items-item .circle img {
        width: 32rem;
        height: 32rem
    }

    .footer__body-top-items-item span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--white)
    }

    .footer__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 40rem 64rem 8rem 64rem
    }

    .footer__body-main-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-bottom: 1rem solid var(--grey);
        padding-bottom: 32rem
    }

    .footer__body-main-start-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .footer__body-main-start-left-logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .footer__body-main-start-left-logo a {
        width: 115rem;
        height: 61rem
    }

    .footer__body-main-start-left-logo a img {
        width: 100%;
        height: 100%
    }

    .footer__body-main-start-left-logo-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .footer__body-main-start-left-logo-action p {
        color: var(--white);
        max-width: 352rem
    }

    .footer__body-main-start-left-logo-action-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .footer__body-main-start-left-logo-action-form input {
        width: 261rem;
        height: 40rem;
        background: var(--white-so);
        border-radius: 1000rem;
        padding-left: 16rem;
        color: var(--white)
    }

    .footer__body-main-start-left-logo-action-form input:placeholder {
        color: var(--grey)
    }

    .footer__body-main-start-left-logo-action-form button {
        padding: 12.5rem 24rem;
        border-radius: 1000rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 15.4rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .footer__body-main-start-left-social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-left-social .social-links,
    .footer__body-main-start-left-social a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem;
        font-weight: 400;
        font-size: 16rem;
        line-height: 19.2rem;
        color: var(--white);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer__body-main-start-left-social .social-links:hover,
    .footer__body-main-start-left-social .social-links:focus-visible,
    .footer__body-main-start-left-social a:hover,
    .footer__body-main-start-left-social a:focus-visible {
        color: var(--yellow-dark);
    }

    .footer__body-main-start-left-social a img {
        width: 24rem;
        height: 24rem
    }

    /* .footer__body-main-start-left-social div:nth-child(1) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .footer__body-main-start-left-social div:nth-child(1) a {
        width: 24rem;
        height: 24rem
    }

    .footer__body-main-start-left-social div:nth-child(1) a img {
        width: 100%;
        height: 100%
    }

    .footer__body-main-start-left-social div:nth-child(2) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .footer__body-main-start-left-social div:nth-child(2) a {
        width: 90rem;
        height: 26rem
    }

    .footer__body-main-start-left-social div:nth-child(2) a img {
        width: 100%;
        height: 100%
    } */

    .footer__body-main-start-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-menu h4 {
        color: var(--white)
    }

    .footer__body-main-start-menu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-menu ul li {
        color: var(--white)
    }

    .footer__body-main-end {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .footer__body-main-end P {
        color: var(--grey)
    }

    .footer__body-main-end P a {
        color: var(--yellow)
    }

    .footer__body-main-end button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--yellow);
        background: rgba(0, 0, 0, 0)
    }

    .footer__body-main-end button svg {
        width: 24rem;
        height: 24rem
    }

    .cl_club {
        width: 100%;
        margin-top: 200rem;
    }

    .cl_club-body {
        display: flex;
        flex-direction: column;
        gap: 40rem;
    }

    .cl_club-body-text {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }

    .cl_club-body-text h3 {
        color: var(--green-dark);
        max-width: 688rem;
    }

    .cl_club-body-text h3 span {
        color: var(--yellow);
    }

    .cl_club-body-text a {
        padding: 16rem 32rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        text-align: center;
        border-radius: 100rem;
    }

    .cl_club-body-block {
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .cl_club-body-block img {
        width: 383rem;
        height: 350rem;
        border-radius: 24rem;
    }

    .books {
        width: 100%;
        margin-top: 120rem;
    }

    .books__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40rem;
    }

    .books__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .books__body-text h2 {
        color: var(--green-dark);
    }

    .books__body-text p {
        color: var(--black);
        max-width: 700rem;
    }

    .books__body-block {
        display: flex;
        gap: 24rem;
    }

    .books__body-block-item {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        width: 282rem;
    }

    .books__body-block-item img {
        width: 100%;
        height: 188rem;
    }

    .books__body-block-item-info {
        background: var(--white);
        padding: 24rem;
        border-radius: 24rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .books__body-block-item-info h3 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        color: var(--black);
    }

    .books__body-block-item-info .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .books__body-block-item-info div .item {
        display: flex;
        align-items: center;
        gap: 4rem;
    }

    .books__body-block-item-info div .item svg {
        width: 24rem;
        height: 24rem;
    }

    .books__body-block-item-info div .item span {
        color: var(--grey);
    }

    .cl_banner {
        width: 100%;
        margin-top: 120rem;
    }

    .cl_banner-body {
        display: flex;
        justify-content: space-between;
        padding: 48rem;
        position: relative;
    }

    .cl_banner-body-img {
        width: 723rem;
        height: 409rem;
        position: absolute;
        bottom: 0;
        left: 305rem;
    }

    .cl_banner-body-info {
        display: flex;
        flex-direction: column;
        gap: 84rem;
    }

    .cl_banner-body-info-text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .cl_banner-body-info-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
        max-width: 517rem;
    }

    .cl_banner-body-info-text p {
        color: var(--black);
        max-width: 400rem;
    }

    .cl_banner-body-info a {
        padding: 16rem 32rem;
        border-radius: 100rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        max-width: max-content;
    }

    .cl_banner-body-our {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 24rem;
        max-height: max-content;
    }

    .cl_banner-body-our .text {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .cl_banner-body-our .text span {
        color: var(--black);
    }

    .cl_banner-body-our .text p {
        color: var(--grey);
    }

    .cl_banner-body-our .images {
        display: flex;
        align-items: center;
    }

    .cl_banner-body-our .images img {
        width: 40rem;
        height: 40rem;
    }

    .cl_banner-body-our .images img:not(:first-child) {
        margin-left: -13rem;
    }

    .advantages {
        width: 100%;
        margin-top: 120rem;
    }

    .advantages__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40rem;
    }

    .advantages__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .advantages__body-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
    }

    .advantages__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center;
    }

    .advantages__body-block {
        display: flex;
        gap: 24rem;
    }

    .advantages__body-block-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24rem;
        width: 282rem;
    }

    .advantages__body-block-item img {
        width: 80rem;
        height: 80rem;
    }

    .advantages__body-block-item .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .advantages__body-block-item .info span {
        color: var(--black);
    }

    .advantages__body-block-item .info p {
        color: var(--black);
        text-align: center;
    }

    .plans {
        width: 100%;
        margin-top: 120rem;
    }

    .plans__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40rem;
    }

    .plans__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .plans__body-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
    }

    .plans__body-text p {
        max-width: 700rem;
        text-align: center;
        color: var(--black);
    }

    .plans__body-block {
        display: flex;
        gap: 24rem;
    }

    .plans__body-block-item {
        background: var(--white);
        border-radius: 24rem;
        padding: 32rem;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        min-height: 567rem;
    }

    .plans__body-block-item .wrap {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        position: relative;
        z-index: 1;
    }

    .plans__body-block-item h3 {
        color: var(--black);
    }

    .plans__body-block-item .img {
        width: 284rem;
        height: 170rem;
        position: absolute;
        right: -16rem;
        top: -16rem;
        z-index: 0;
        opacity: 0.5;
    }

    .plans__body-block-item .list {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .plans__body-block-item .list li {
        display: flex;
        align-items: center;
        gap: 8rem;
        color: var(--black);
    }

    .plans__body-block-item .list li svg {
        width: 40rem;
        height: 40rem;
    }

    .plans__body-block-item a {
        width: 100%;
        height: 50rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .faq {
        width: 100%;
        margin-top: 120rem;
        background: var(--green-dark);
        padding: 80rem 0;
        border-bottom: 1rem solid var(--grey);
    }

    .faq__body {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 40rem;
    }

    .faq__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .faq__body-text h2 {
        text-transform: uppercase;
        color: var(--white);
    }

    .faq__body-text p {
        color: var(--white);
        text-align: center;
    }

    .faq__body-block {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .faq__body-block-item.open {
        background: var(--yellow);
    }

    .faq__body-block-item.open .faq__body-block-item-top {
        padding-bottom: 16rem;
    }

    .faq__body-block-item.open h4 {
        color: rgba(42, 50, 77, 1);
    }

    .faq__body-block-item.open button {
        background: var(--green-dark);
        rotate: 180deg;
    }

    .faq__body-block-item.open svg path {
        stroke: var(--yellow);
    }

    .faq__body-block-item.open .faq__body-block-item-bot {
        color: var(--black);
    }

    .faq__body-block-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: rgba(13, 47, 38, 1);
        transition: all 0.3s ease;
        padding: 32rem 40rem;
        border-radius: 24rem;
        cursor: pointer;
    }

    .faq__body-block-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top h4 {
        color: var(--white);
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top button {
        width: 40rem;
        height: 40rem;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top button svg {
        width: 24rem;
        height: 24rem;
    }

    .faq__body-block-item-top button svg path {
        transition: all 0.3s ease;
    }

    .faq__body-block-item-bot {
        color: var(--white);
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    .blog {
        width: 100%;
        margin-top: 24rem;
    }

    .blog__body {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .blog__body-top {
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .blog__body-top-item {
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .blog__body-top-item .grad {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    }

    .blog__body-top-item img:nth-child(1) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .blog__body-top-item:hover h3 {
        color: var(--yellow);
    }

    .blog__body-top-item {
        padding: 32rem;
        width: 792rem;
        height: 535rem;
    }

    .blog__body-top-item-info {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        position: relative;
        z-index: 1;
    }

    .blog__body-top-item-info h3 {
        color: var(--white);
        transition: all 0.3s ease;
    }

    .blog__body-top-item-info .category {
        padding: 4rem 12rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        max-width: max-content;
    }

    .blog__body-top-item-info .soft {
        display: flex;
        align-items: center;
        gap: 24rem;
    }

    .blog__body-top-item-info .soft .soft-item {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .blog__body-top-item-info .soft .soft-item img {
        position: static;
        width: 16rem;
        height: 16rem;
    }

    .blog__body-top .wrap {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .blog__body-top .wrap .blog__body-top-item {
        padding: 16rem;
        width: 384rem;
        height: 100%;
    }

    .blog__body-popular {
        display: flex;
        gap: 24rem;
    }

    .blog__body-popular-section {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .blog__body-popular-section-block {
        width: 792rem;
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .blog__body-popular-section-block .daily__body-wrap-item {
        width: 248rem;
        height: 261rem;
    }

    .blog__body-popular-section-block .daily__body-wrap-item-top {
        height: 160rem;
    }

    .blog__body-popular-section h3 {
        color: var(--green-dark);
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .blog__body-popular-section h3 .line {
        width: 520rem;
        height: 1rem;
        background: var(--med-grey);
    }

    .blog__body-popular-section #blog {
        width: 792rem;
    }

    .blog__body-popular-section #blog .splide__slide {
        margin-right: 24rem !important;
        width: 248rem !important;
        height: 261rem;
    }

    .blog__body-popular-section #blog .splide__arrows {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 16rem;
        top: -44rem;
        right: 0;
    }

    .blog__body-popular-section #blog .splide__arrow {
        position: static;
        width: 40rem;
        height: 40rem;
        background: var(--beige-dark);
        opacity: 1 !important;
    }

    .blog__body-popular-section #blog .splide__arrow svg {
        width: 24rem;
        height: 24rem;
        fill: none;
    }

    .blog__body-popular-section #blog .splide__slide {
        margin-right: 24rem !important;
        width: 248rem !important;
        height: 261rem;
    }

    .blog__body-popular-section #blog .splide__slide .daily__body-wrap-item-top {
        height: 160rem;
    }

    .blog__body-popular-category {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
    }

    .blog__body-popular-category h3 {
        color: var(--green-dark);
    }

    .blog-categories-list {
        display: flex;
        flex-direction: column;
    }

    .blog__body-popular-category-wrap {
        width: 100%;
    }

    .blog-category-name {
        transition: all 0.3s ease;
        color: var(--black);
    }

    .blog-category-item:hover .blog-category-name {
        color: var(--yellow);
    }

    .blog-category-item:first-child {
        padding: 0px 0px 17rem 0px;
    }

    .blog-category-item {
        padding: 17rem 0rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1rem dashed var(--green-dark);
    }

    .blog-category-count {
        color: var(--grey);
        display: flex;
        align-items: center;
    }

    .blog-category-count svg {
        width: 24rem;
        height: 24rem;
    }

    .blog__body-news {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32rem;
    }

    .blog__body-news h2 {
        color: var(--green-dark);
    }

    .blog__body-news-block {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24rem;
        row-gap: 32rem;
        width: 100%;
    }

    .blog__body-news-block .daily__body-wrap-item {
        width: 282rem;
        height: 283rem;
    }

    .blog__body-news-block .daily__body-wrap-item .daily__body-wrap-item-top {
        height: 182rem;
    }

    .bread__body-main-search .aws-search-form {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .bread__body-main-search .aws-search-field {
        width: 280rem;
        height: 40rem;
        background: var(--white);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
        padding-left: 16rem;
        border: 1px solid var(--med-grey);
        border-radius: 100rem;
    }

    .bread__body-main-search .aws-search-btn {
        width: 96rem;
        height: 41rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
        border-radius: 100rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .article {
        width: 100%;
        margin-top: 24rem;
    }

    .article__body {
        display: flex;
        flex-direction: column;
        gap: 54rem;
    }

    .article__body-main {
        width: 100%;
        height: 400rem;
        position: relative;
        overflow: hidden;
        border-radius: 24rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
        padding: 40rem;
        justify-content: flex-end;
    }

    .article__body-main .grad {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
    }

    .article__body-main .wp-post-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .article__body-main h1 {
        color: var(--white);
        position: relative;
        z-index: 2;
    }

    .article__body-main-items {
        display: flex;
        align-items: center;
        gap: 24rem;
        position: relative;
        z-index: 2;
    }

    .article__body-main-items div {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .article__body-main-items div img {
        width: 16rem;
        height: 16rem;
    }


    .article__body-info-content-article {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(1) {
        border-top-left-radius: 24rem;
        border-bottom-left-radius: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) {
        border-top-right-radius: 24rem;
        border-bottom-right-radius: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) span {
        justify-content: flex-start;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) h3 {
        text-align: start;
    }

    .article__body-info-content-article .article__body-info-content-article-item {
        width: 50%;
        height: 132rem;
        background: var(--white);
        padding: 24rem 40rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
        position: relative;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .article__body-info-content-article .article__body-info-content-article-item img {
        position: absolute;
        width: auto;
        height: auto;
        scale: 0.5;
        z-index: 0;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover span {
        color: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover h3 {
        color: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover span svg path {
        stroke: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover img {
        opacity: 1;
    }

    .article__body-info-content-article .article__body-info-content-article-item span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
        position: relative;
        z-index: 1;
        width: 100%;
        justify-content: flex-end;
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item span svg {
        width: 24rem;
        height: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item span svg path {
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item h3 {
        width: 100%;
        text-align: end;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
    }



    .article__body-info {
        display: flex;
        gap: 25rem;
    }

    .article__body-info-navigation {
        max-height: max-content;
        position: sticky;
        width: 383rem;
        display: flex;
        flex-direction: column;
        gap: 24rem;
        top: 0;
        right: 0;
    }

    .article__body-info-navigation h3 {
        color: var(--green-dark);
    }

    .article__body-info-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 40rem;
    }

    .article__body-info-content .main-content {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .article__body-info-content-photo {
        display: flex;
        flex-direction: column;
        gap: 40rem;
    }

    .article__body-info-content-photo .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .article__body-info-content-photo .text h2 {
        color: var(--green-dark);
    }

    .article__body-info-content-photo .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .article__body-info-content-photo .wrap img {
        width: 100%;
        height: 350rem;
    }

    .article__body-info-content-photo .wrap p {
        color: var(--grey);
        font-style: italic;
    }

    .article__body-info-content-slider {
        display: flex;
        flex-direction: column;
        gap: 40rem;
    }

    .article__body-info-content-slider .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .article__body-info-content-slider .text h2 {
        color: var(--green-dark);
    }

    .article__body-info-content-slider .splide {
        width: 792rem;
    }

    .article__body-info-content-slider .splide .splide__arrow {
        width: 40rem;
        height: 40rem;
        opacity: 1 !important;
        background: var(--beige-dark);
        bottom: -56rem;
        top: auto;
        transform: translateY(0%);
    }

    .article__body-info-content-slider .splide .splide__arrow svg {
        fill: none;
        width: 24rem;
        height: 24rem;
    }

    .article__body-info-content-slider .splide .splide__slide {
        width: 464rem !important;
        height: 325rem;
        margin-right: 24rem !important;
    }

    .article__body-info-content-slider .splide .splide__slide img {
        width: 100%;
        height: 100%;
    }


    .article__body-info-content-quote {
        margin-top: 56rem;
        padding: 24rem;
        border-top: 1rem dashed var(--green-dark);
        border-bottom: 1rem dashed var(--green-dark);
        display: flex;
        gap: 16rem;
        color: var(--black);
        font-style: italic;
    }

    .article__body-info-content-quote img {
        width: 30rem;
        height: 30rem;
    }

    .table {
        width: 100%;
        overflow: hidden;
        border-radius: 24rem;
        border-spacing: 0;
        border-collapse: collapse;
        background: var(--white);
    }

    .table thead {
        background: var(--beige-dark);
        height: 51rem;
    }

    .table thead th {
        text-align: left;
        padding-left: 16rem;
    }

    .table tr:not(:last-child) {
        border-bottom: 1rem solid var(--med-grey);
        border-spacing: 1rem;
    }

    .table tr td {
        padding: 16rem;

    }

    .article__body-info-content-video {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .article__body-info-content-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        align-items: center;
        padding: 32rem 24rem 0px 24rem;
        border-top: 1rem dashed var(--green-dark);
        margin-top: 24rem;
    }

    .article__body-info-content-tags span {
        color: var(--black);
    }

    .article__body-info-content-tags p {
        color: var(--white);
        background: var(--green-dark);
        padding: 4rem 12rem;
        border-radius: 100rem;
        transition: all 0.3s ease;
    }

    .article__body-info-content-tags p:hover {
        background: var(--yellow);
        color: var(--black);
    }


    .main__wrap {
        background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);
    }

    .main {
        position: relative
    }

    .club .main__body {
        padding: 48rem 0 335rem 0;
    }

    .main__body {
        padding: 109rem 0 138rem 0rem;
        gap: 40rem;
    }

    .main__body .yellow-btn {
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        text-align: center;
        color: var(--black);
    }

    .main__body .bread {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .main__body .bread span {
        color: var(--white);
    }

    .main__body .bread p,
    .main__body .bread a {
        color: var(--grey);
    }

    .main .main__text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .main .main__text h1 {
        color: #fff;
        text-transform: uppercase
    }

    .main .main__text p {
        max-width: 566rem;
        color: var(--white)
    }

    .main .main__text-search form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        margin-top: 16rem
    }

    .main .main__text-search .aws-form-btn {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        background: var(--yellow);
        width: 119rem;
        height: 49rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 1000rem
    }

    .main .main__text-search input {
        width: 350rem;
        height: 49rem;
        border-radius: 100rem;
        background: var(--white);
        border: 1rem solid var(--med-grey);
        padding-left: 16rem;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0px
    }

    .main .main__text-search input:placeholder {
        color: var(--grey)
    }

    .main .main__text-search button {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        background: var(--yellow);
        width: 119rem;
        height: 49rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 1000rem
    }

    .main .main__img {
        height: 737rem;
        width: 885rem;
        position: absolute;
        bottom: 0rem;
        right: 0
    }

    .main .cl_img {
        height: 589rem;
        width: 653rem;
        position: absolute;
        bottom: 90rem;
        right: 120rem;
        z-index: 0;
    }

    .main .main__coffee {
        position: absolute;
        bottom: 94rem;
        left: 64rem;
        width: 347rem;
        height: 204rem
    }

    .main .main__stroke {
        width: 100%;
        height: 220rem;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: -110rem
    }

    .main .main__stroke-body:nth-child(1) {
        width: 1519rem;
        height: 80rem;
        background: var(--yellow-dark);
        rotate: 3deg;
        position: absolute;
        left: -40rem;
        top: 50rem
    }

    .main .main__stroke-body:nth-child(2) {
        width: 1490rem;
        height: 80rem;
        background: var(--yellow);
        rotate: -3deg;
        position: absolute;
        left: -19rem;
        top: 50rem
    }

    .main .main__stroke-body:nth-child(2) .main__stroke-body-wrap {
        -webkit-animation: tickerTwo 10s linear infinite;
        animation: tickerTwo 10s linear infinite
    }

    .main .main__stroke-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden
    }

    .main .main__stroke-body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 38.43rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-animation: ticker 10s linear infinite;
        animation: ticker 10s linear infinite;
        -webkit-transform-style: preserve-3d;
        position: absolute
    }

    .main .main__stroke-body-wrap img {
        width: 32rem;
        height: 32rem
    }

    .main .main__stroke-body-wrap span {
        color: var(--black)
    }

    @-webkit-keyframes ticker {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }

        100% {
            -webkit-transform: translateX(-50.5%);
            transform: translateX(-50.5%)
        }
    }

    @keyframes ticker {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }

        100% {
            -webkit-transform: translateX(-50.5%);
            transform: translateX(-50.5%)
        }
    }

    @-webkit-keyframes tickerTwo {
        0% {
            -webkit-transform: translateX(-50.5%);
            transform: translateX(-50.5%)
        }

        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

    @keyframes tickerTwo {
        0% {
            -webkit-transform: translateX(-50.5%);
            transform: translateX(-50.5%)
        }

        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

    .header {
        width: 100%
    }

    .header__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding: 16rem 0;
        border-bottom: 1rem solid var(--white)
    }

    .header__body-logo {
        width: 155rem;
        height: 61rem
    }

    .header__body-logo img {
        width: auto;
        height: 100%
    }

    .header__body-menu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .header__body-menu ul li a {
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
        cursor: pointer;
        position: relative;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .header-soft li a {
        color: var(--black);
    }

    .header__body-menu ul li a svg {
        width: 16rem;
        height: 16rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .header__body-menu ul li a svg path {
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .header__body-menu ul li a {
        position: relative
    }

    .header__body-menu ul li a::before {
        content: "";
        position: absolute;
        background: var(--yellow);
        border-radius: 50%;
        bottom: -4rem;
        left: 50%;
        min-width: 5rem;
        min-height: 4rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        opacity: 0
    }

    .header__body-menu ul li .sub-menu {
        width: 200rem;
        max-height: 0rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        border-radius: 24rem;
        background: var(--white);
        position: absolute;
        top: 21rem;
        z-index: 100;
        padding: 0 8rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        left: 0;
        overflow: hidden
    }

    .header__body-menu ul li .sub-menu li {
        width: 100%
    }

    .header__body-menu ul li .sub-menu li a {
        width: 100%;
        padding: 8rem 16rem;
        border-radius: 100rem;
        background: rgba(0, 0, 0, 0);
        color: var(--black)
    }

    .header__body-menu ul li .sub-menu li a:before {
        display: none
    }

    .header__body-menu ul li .sub-menu.active {
        max-height: 800rem;
        padding: 8rem
    }

    .header__body-menu ul li.current_page_item a::before {
        opacity: 1
    }

    .header__body-menu ul li:hover a::before {
        opacity: 1
    }

    .header__body-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .header__body-action a {
        width: 40rem;
        height: 40rem;
        background: var(--white);
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative
    }

    .header__body-action a svg {
        width: 24rem;
        height: 24rem
    }

    .header__body-action a .circle {
        background: var(--yellow);
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 14rem;
        height: 14rem;
        position: absolute;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 10rem;
        line-height: 11.85rem;
        letter-spacing: 0%;
        text-align: center;
        color: var(--black);
        top: 0;
        right: 0
    }

    .header__body-action button {
        padding: 8rem 16rem;
        background: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem;
        color: var(--black);
        border-radius: 100rem
    }

    .header__body-action .auth-button {
        border-radius: 50%;
        width: 40rem;
        height: 40rem;
    }

    .header__body-action button svg {
        width: 24rem;
        height: 24rem
    }

    .header-soft li a {
        color: var(--black);
    }

    .header__body-action button:hover {
        color: var(--black)
    }

    .attribute {
        padding-top: 92rem;
        width: 100%
    }

    .attribute__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: flex-start;
        justify-content: space-between;
    }

    .attribute__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8rem
    }

    .attribute__body-wrap-item:nth-child(1) {
        width: 262rem;
    }

    .attribute__body-wrap-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 18rem;
        width: 292rem
    }

    .attribute__body-wrap-item .circle {
        width: 154rem;
        height: 154rem;
        background: transparent;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .attribute__body-wrap-item .circle img {
        width: auto;
        height: auto;
        max-width: 154rem;
        max-height: 154rem;
        position: relative;
        z-index: 0;
    }

    .attribute__body-wrap-item .circle .number {
        font-size: 62rem;
        line-height: 110%;
        font-family: var(--adieu);
        color: var(--green-dark);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .attribute__body-wrap-item span {
        color: var(--black);
        margin-top: 8rem
    }

    .attribute__body-wrap-item p {
        color: var(--black);
        max-width: 292rem
    }

    .attribute__body-img {
        width: 214rem;
        height: 220rem
    }

    .program {
        margin-top: 120rem;
        width: 100%
    }

    .program__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .program__body h2 {
        color: var(--green-dark)
    }

    .program__body .description {
        color: var(--black)
    }

    .program__body-wrap {
        margin-top: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .program__body-wrap-item {
        width: 382rem;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .program__body-wrap-item-top {
        width: 100%;
        height: 356rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-radius: 24rem;
    }

    .program__body-wrap-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .program__body-wrap-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .program__body-wrap-item-top-attr span {
        padding: 4rem 8rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }


    .program__body-wrap-item-top-like {
        position: relative;
        z-index: 1;
        width: 40rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .heart-wrap {
        width: 24rem;
        height: 24rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .heart-wrap img {
        position: absolute !important;
        transition: all 0.3s ease;
        width: 100%;
        height: 100%;
    }

    .heart-wrap img:nth-child(1) {
        opacity: 1;
    }

    .heart-wrap img:nth-child(2) {
        opacity: 0;
    }

    .simplefavorite-button.active+div img:nth-child(1) {
        opacity: 0;
    }

    .simplefavorite-button.active+div img:nth-child(2) {
        opacity: 1;
    }

    .like-btn:hover .heart-wrap img:nth-child(1) {
        opacity: 0;
    }

    .like-btn:hover .heart-wrap img:nth-child(2) {
        opacity: 1;
    }

    .program__body-wrap-item-top-like .simplefavorite-button {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
    }

    .program__body-wrap-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12rem;
        padding: 0 16rem 16rem 16rem
    }

    .program__body-wrap-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .program__body-wrap-item-bot-text span {
        color: var(--grey)
    }

    .program__body-wrap-item-bot-text p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: 36rem;
    }

    .program__body-wrap-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .program__body-wrap-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .program__body-wrap-item-bot-action-el svg {
        width: 24rem;
        height: 24rem
    }

    .program__body-wrap-item:hover .program__body-wrap-item-bot .program__body-wrap-item-bot-text p {
        color: var(--yellow)
    }

    .try {
        width: 100%;
        margin-top: 120rem
    }

    .try__body {
        padding: 50rem 52rem 36rem 350rem;
        background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);
        position: relative;
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        overflow: hidden;
        min-height: 345rem;
    }

    .try__body-img {
        width: 516rem;
        height: 345rem;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0
    }

    .try__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative;
        z-index: 1;
        order: 1;
        max-width: 356rem;
    }

    .try__body-text h2 {
        color: var(--white);
        text-transform: uppercase
    }

    .try__body-text p {
        color: var(--white);
        max-width: 345rem
    }

    .try__body-ingredients {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        width: 429rem;
        position: relative;
        z-index: 1;

    }

    .try__body-ingredients-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        max-height: 205rem;
        overflow: hidden;
    }

    .try__body-ingredients-wrap a {
        padding: 12rem 24rem;
        border-radius: 1000rem;
        background: var(--white);
        border: 1rem solid var(--green-dark)
    }

    .try__body-ingredients-btn {
        color: var(--black);
        padding: 15rem 25rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        background: rgba(0, 0, 0, 0);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        height: 50rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--yellow);

    }

    .experiment {
        width: 100%;
        margin-top: 120rem
    }

    .experiment__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 40rem
    }

    .experiment__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .experiment__body-text h2 {
        color: var(--green-dark);
        text-transform: uppercase;
        text-align: center
    }

    .experiment__body-text p {
        color: var(--black)
    }

    .experiment__body-categories {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 24rem
    }

    .experiment__body-categories-item {
        width: 384rem;
        height: 320rem;
        position: relative;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        border-radius: 24rem;
        overflow: hidden
    }

    .experiment__body-categories-item img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    .experiment__body-categories-item-wrap {
        position: relative;
        z-index: 1;
        width: 100%;
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: var(--white);
        padding: 16rem 24rem
    }

    .experiment__body-categories-item-wrap div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .experiment__body-categories-item-wrap div span {
        color: var(--black)
    }

    .experiment__body-categories-item-wrap div p {
        color: var(--black)
    }

    .experiment__body-categories-item-wrap a {
        width: 40rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--yellow)
    }

    .experiment__body-categories-item-wrap a svg {
        width: 24rem;
        height: 24rem
    }

    .popular {
        width: 100%;
        margin-top: 120rem
    }

    .popular__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 40rem
    }

    .popular__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .popular__body-text h2 {
        color: var(--green-dark);
        text-transform: uppercase
    }

    .popular__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center
    }

    .popular__body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .popular__body-block-item {
        width: 310rem;
        height: 350rem;
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .popular__body-block-item-hot {
        position: absolute;
        top: 16rem;
        left: 16rem;
        padding: 4rem 8rem;
        background: var(--red);
        color: var(--white);
        z-index: 1;
        border-radius: 1000rem
    }

    .popular__body-block-item img {
        width: auto;
        height: auto;
        position: absolute;
        z-index: 0;
        top: 0
    }

    .popular__body-block-item-grad {
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 29, 27, 0)), to(#1D1D1B));
        background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .popular__body-block-item-wrap {
        position: relative;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .popular__body-block-item-wrap span {
        color: var(--white);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem
    }

    .popular__body-block-item-wrap p {
        color: var(--white);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .popular__body-block-item-wrap a {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 8rem 16rem;
        background: var(--yellow);
        color: var(--black);
        border-radius: 24rem
    }

    .popular__body-block-item-wrap a svg {
        width: 24rem;
        height: 24rem
    }

    .popular__body-btn {
        padding: 16rem 32rem;
        border-radius: 1000rem;
        border: 1rem solid var(--green-dark);
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .daily {
        width: 100%;
        margin-top: 120rem
    }

    .daily__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 40rem
    }

    .daily__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .daily__body-text h2 {
        color: var(--green-dark);
        text-transform: uppercase
    }

    .daily__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center
    }

    .daily__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .daily__body-wrap-item {
        width: 310rem;
        height: 301rem;
        background: var(--white);
        border-radius: 24rem;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .daily__body-wrap-item-top {
        width: 100%;
        height: 200rem;
        position: relative;
        padding: 12rem;
        border-radius: 24rem;
    }

    .daily__body-wrap-item-top img {
        width: auto;
        height: auto;
        position: absolute;
        z-index: 0;
        border-radius: 24rem;
    }

    .daily__body-wrap-item-top span {
        color: var(--black);
        padding: 4rem 12rem;
        border-radius: 1000rem;
        background: var(--yellow);
        position: absolute;
        top: 12rem;
        left: 12rem;
        z-index: 1
    }

    .daily__body-wrap-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 0 16rem
    }

    .daily__body-wrap-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .daily__body-wrap-item-bot-action div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .daily__body-wrap-item-bot-action div img {
        width: 16rem;
        height: 16rem
    }

    .daily__body-wrap-item-bot-action div svg {
        width: 16rem;
        height: 16rem
    }

    .daily__body-wrap-item-bot-action div span {
        color: var(--grey)
    }

    .daily__body-btn {
        padding: 16rem 32rem;
        border-radius: 1000rem;
        border: 1rem solid var(--green-dark);
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .develop {
        width: 100%;
        margin-top: 60rem;

    }

    .develop__body {
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .develop__body h1 {
        text-transform: uppercase;
        color: var(--black);
    }

    .filter__modal {
        background: var(--beige);
        padding: 16rem 32rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scale: 0.9;
        border-radius: 20rem;
        position: relative;
    }

    .filter__modal-close {
        position: absolute;
        top: 25rem;
        right: 50rem;
        width: 24rem;
        height: 24rem;
        background: transparent;
    }

    .filter__modal-buttons {
        position: absolute;
        bottom: 16rem;
        display: flex;
        align-items: center;
        gap: 8rem;
        padding: 8rem;
        border-radius: 1000rem;
    }

    .filter__modal-buttons a,
    .filter__modal-buttons button {
        width: 188rem;
        height: 41rem;
        border-radius: 100rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 120.00000000000001%;
        letter-spacing: 0px;
        text-align: center;

    }

    .filter__modal-buttons a {
        background: transparent;
        color: var(--green-dark);
        border: 1rem solid var(--green-dark);
    }

    .filter__modal-buttons button {
        background: var(--green-dark);
        color: var(--white);
    }

    .filter__modal-close svg path {
        stroke: var(--red);
    }

    .filter__modal h2 {
        text-transform: uppercase;
    }

    .filter__modal-search {
        margin-top: 20rem;
        max-width: 1362rem;
        width: 100%;
    }

    .filter__modal-search input {
        width: 1258rem !important;
    }

    .wpfFilterButtons:after {
        display: none !important;
    }

    .wpfFilterButtons {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16rem;
    }

    .wpfFilterButtons button {
        width: 673rem;
        height: 39rem;
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 1000rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wpfFilterButton {
        background: transparent;
        background: var(--green-dark);
        color: var(--white);
    }

    .wpfClearButton {
        background: transparent;
        border: 1rem solid var(--green-dark);
        order: -1;
    }

    .filter__modal-body {
        margin-top: 8rem;
    }

    .filter__modal-body .wpfMainWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        max-width: 1362rem;
    }

    .wpfFilterWrapper {
        padding: 16rem;
        border-radius: 20rem;
    }

    .wpfFilterWrapper .wpfFilterContent {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wfpDescription {
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--black);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li {
        position: relative;
        padding: 8rem 16rem;
        transition: all 0.3s ease;
        border: 1rem solid var(--yellow);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:hover {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:has(> .wpfLiLabel .wpfDisplay.selected) {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li .wpfCheckbox {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .wpfFilterVerScroll {
        max-height: 100rem !important;
        overflow-y: auto;
    }

    .wpfFilterWrapper:nth-child(-n+4) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+4):nth-child(-n+8) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+9):nth-child(-n+15) {
        width: 266rem !important;
    }

    .filter__modal-body {
        margin-top: 8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(-n+4) .wpc-filters-section {
        width: 334.5rem;
        height: 102rem;
        overflow: hidden;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(n+5):nth-child(-n+8) .wpc-filters-section {
        width: 334.5rem;
        height: 242rem;
        overflow: hidden;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(n+9):nth-child(-n+13) .wpc-filters-section {
        width: 266rem;
        height: 242rem;
        overflow: hidden;
    }

    .wpc-filters-section {
        padding: 16rem;
        display: flex;
        flex-direction: column;
        gap: 16rem;
        margin-bottom: 0 !important;
        border-radius: 24rem;
        background: var(--white);
    }

    .wpc-filters-section .wpc-filter-title {
        margin-bottom: 0;
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--green-dark);
    }

    .wpc-filters-ul-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        padding: 0 !important;
        max-height: 150rem !important;
    }

    .wpc-filters-ul-list::-webkit-scrollbar-thumb {
        background-color: var(--black);
    }

    .wpc-filters-ul-list::-webkit-scrollbar-track {
        background: var(--med-grey);
        border-radius: 2rem;
    }

    .wpc-filters-ul-list::-webkit-scrollbar {
        width: 2rem !important;
        height: auto;
    }

    .wpc-filters-ul-list li {
        position: relative;
        padding: 8rem 16rem !important;
        transition: all 0.3s ease;
        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
        margin-bottom: 0 !important;
        border: 1rem solid var(--yellow) !important;
    }

    .wpc-filters-ul-list li label a {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
    }

    .wpc-filters-ul-list li:hover {
        background: var(--yellow);
    }

    .wpc-filters-ul-list li.wpc-term-selected {
        background: var(--yellow);
    }

    .wpc-filters-ul-list li .wpc-term-item-content-wrapper input {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .filter__modal-body .wpfMainWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        max-width: 1362rem;
    }

    .wpfFilterWrapper {
        padding: 16rem;
        border-radius: 20rem;
        border: 1rem solid var(--med-grey);
    }

    .wpfFilterWrapper .wpfFilterContent {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wfpDescription {
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--black);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li {
        position: relative;
        padding: 8rem 16rem;
        background: var(--med-grey);
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:hover {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:has(> .wpfLiLabel .wpfDisplay.selected) {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li .wpfCheckbox {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .wpfFilterVerScroll {
        max-height: 100rem !important;
        overflow-y: auto;
    }

    .wpfFilterWrapper:nth-child(-n+4) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+4):nth-child(-n+8) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+9):nth-child(-n+15) {
        width: 266rem !important;
    }

    .bread {
        width: 100%;
        margin-top: 16rem
    }

    .bread__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .bread__body-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .bread__body-top a {
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .bread__body-top a:hover {
        color: var(--green-dark)
    }

    .bread__body-top p {
        color: var(--grey)
    }

    .bread__body-top span {
        color: var(--green-dark)
    }

    .bread__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .bread__body-main h1 {
        color: var(--green-dark)
    }

    .bread__body-main p {
        color: var(--black);
        max-width: 588rem
    }

    .catalog {
        width: 100%;
        margin-top: 24rem
    }

    .catalog__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem;
        position: relative
    }

    .catalog__body-filter {
        width: 282rem;
        min-width: 282rem;
        position: sticky;
        top: 105rem;
        max-height: -webkit-max-content;
        max-height: -moz-max-content;
        max-height: max-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .catalog__body-filter-top h2 {
        color: var(--black)
    }

    .catalog__body-filter-top button {
        color: var(--red);
        background: rgba(0, 0, 0, 0)
    }

    .catalog__body-filter-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-block-category {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-block-category-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding-bottom: 16rem;
        border-bottom: 1rem dashed var(--green-dark)
    }

    .catalog__body-filter-block-category-item h3 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--green-dark)
    }

    .catalog__body-filter-block-category-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .catalog__body-filter-block-category-item div a {
        padding: 8rem 16rem;
        background: var(--white);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border: 1rem solid var(--yellow);
        border-radius: 1000rem
    }

    .catalog__body-filter-block-category-item div a.active {
        background: var(--yellow)
    }

    .catalog__body-filter-block-category-item div a:hover {
        background: var(--yellow)
    }

    .catalog__body-filter-block-advanced {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .catalog__body-filter-block-advanced span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--green-dark);
        cursor: pointer;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-filter-block-advanced span svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-filter-block-advanced span svg path {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-filter-block-advanced span:hover {
        color: var(--yellow)
    }

    .catalog__body-filter-block-advanced span:hover svg path {
        stroke: var(--yellow)
    }

    .catalog__body-filter-block-advanced div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        padding: 16rem;
        border-radius: 24rem
    }

    .catalog__body-filter-block-advanced div p {
        color: var(--black)
    }

    .catalog__body-filter-block-advanced div .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 8rem;
        padding: 0
    }

    .catalog__body-filter-block-advanced div .wrap a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-filter-block-advanced div .wrap a:hover {
        background: var(--yellow);
        color: var(--black)
    }

    .catalog__body-filter-block-banner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        padding: 16rem 16rem 120rem 16rem;
        border-radius: 24rem;
        position: relative;
        background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
        background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
    }

    .catalog__body-filter-block-banner img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 183rem;
        height: 185rem;
        z-index: 0
    }

    .catalog__body-filter-block-banner h3 {
        color: var(--white)
    }

    .catalog__body-filter-block-banner p {
        color: var(--white)
    }

    .catalog__body-filter-block-banner button {
        background: var(--yellow);
        padding: 16rem 32rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 10000rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        position: relative;
        z-index: 1
    }

    .catalog__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-main-search {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: relative
    }

    .catalog__body-main-search-wrap {
        width: 790rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        padding: 0 16rem;
        border: 1rem solid var(--med-grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-main-search-wrap input {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        color: var(--black)
    }

    .catalog__body-main-search-wrap .reset__button {
        width: 24rem;
        height: 24rem;
        padding: 0;
        background: rgba(0, 0, 0, 0);
        display: none
    }

    .catalog__body-main-search-wrap .reset__button.active {
        display: block
    }

    .catalog__body-main-search-wrap:hover {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus svg path {
        stroke: var(--yellow)
    }

    .catalog__body-main-search button {
        padding: 12rem 24rem;
        color: var(--black);
        background: var(--yellow);
        border-radius: 1000rem
    }

    .catalog__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 24rem;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10;
        border: 1rem solid var(--med-grey)
    }

    .catalog__body-main-search-block button {
        padding: 4rem 12rem;
        background: var(--med-grey);
        color: var(--grey);
        border-radius: 1000rem
    }

    .catalog__body-main-search .aws-search-form {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: relative
    }

    .catalog__body-main-search input {
        width: 790rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
    }

    .catalog__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    /*.aws-search-form input {*/
    /*    background: rgba(0, 0, 0, 0);*/
    /*    width: 100%;*/
    /*    color: var(--black)*/
    /*}*/

    .catalog__body-main-search-wrap .reset__button {
        width: 24rem;
        height: 24rem;
        padding: 0;
        background: rgba(0, 0, 0, 0);
        display: none
    }

    .catalog__body-main-search-wrap .reset__button.active {
        display: block
    }

    .catalog__body-main-search-wrap:hover {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus svg path {
        stroke: var(--yellow)
    }

    .catalog__body-main-search .aws-search-btn {
        color: var(--black);
        background: var(--yellow);
        border-radius: 1000rem;
        width: 96rem;
        height: 41rem;
        font-weight: 600;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        color: var(--black);
    }

    .catalog__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 20rem;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10;
        border: 1rem solid var(--med-grey)
    }

    .catalog__body-main-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 24rem
    }

    .catalog__body-main-block-item {
        width: 282rem;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-main-block-item-top {
        width: 100%;
        height: 200rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-radius: 24rem;
    }

    .catalog__body-main-block-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .catalog__body-main-block-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .catalog__body-main-block-item-top-attr span {
        padding: 4rem 8rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }


    .catalog__body-main-block-item-top-like {
        position: relative;
        z-index: 1;
        width: 40rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .catalog__body-main-block-item-top-like svg {
        width: 24rem;
        height: 24rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-main-block-item-top-like svg path {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-main-block-item-top-like:hover svg path {
        fill: var(--red);
        stroke: var(--red)
    }

    .catalog__body-main-block-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12rem;
        padding: 0 16rem 16rem 16rem
    }

    .catalog__body-main-block-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .catalog__body-main-block-item-bot-text span {
        color: var(--grey)
    }

    .catalog__body-main-block-item-bot-text h2 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: 36rem;
    }

    .catalog__body-main-block-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .catalog__body-main-block-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .catalog__body-main-block-item-bot-action-el span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0px;
        color: var(--black)
    }

    .catalog__body-main-block-item-bot-action-el svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-main-block-item:hover .catalog__body-main-block-item-bot .catalog__body-main-block-item-bot-text h2 {
        color: var(--yellow)
    }

    .catalog__body-main-block .banner__full {
        width: 100%;
        height: 150rem;
        background: var(--grey);
        border-radius: 24rem
    }

    .catalog__body-main-block .banner__soft {
        width: 282rem;
        height: auto;
        background: var(--grey);
        border-radius: 24rem
    }

    .banner__full {
        width: 100%;
        height: 150rem;
        border-radius: 20rem;
        overflow: hidden;
        padding: 17rem 44rem 24rem 44rem;
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .banner__full h3 {
        color: var(--white);
    }

    .banner__full a {
        color: var(--black);
        background: var(--yellow);
        padding: 13.5rem 22.5rem;
        border-radius: 100rem;
        max-width: max-content;
    }

    .catalog__body-main-block .banner__soft {
        width: 282rem;
        height: auto;
        border-radius: 20rem;
        display: flex;
        flex-direction: column;
        gap: 24rem;
        padding: 28rem 28rem 0px 22rem;
    }

    .catalog__body-main-block .banner__soft h3 {
        color: var(--white);
        max-width: 333rem;
    }

    .catalog__body-main-block .banner__soft a {
        color: var(--black);
        background: var(--yellow);
        padding: 13.5rem 22.5rem;
        border-radius: 100rem;
        max-width: max-content;
    }

    .catalog__body-main .load-more {
        padding: 16rem 32rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 1000rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        -ms-flex-item-align: center;
        align-self: center
    }

    .recommendation {
        width: 100%;
        margin-top: 120rem
    }

    .recommendation__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .recommendation__body .h2 {
        text-transform: uppercase;
        color: var(--green-dark)
    }

    .recommendation__body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 24rem
    }

    .recommendation__body-block-item {
        width: 282rem;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recommendation__body-block-item-top {
        width: 100%;
        height: 200rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recommendation__body-block-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .recommendation__body-block-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recommendation__body-block-item-top-attr span {
        padding: 4rem 8rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recommendation__body-block-item-top-attr span:nth-child(1) {
        background: var(--red)
    }

    .recommendation__body-block-item-top-attr span:nth-child(2) {
        background: var(--green)
    }

    .recommendation__body-block-item-top-attr span:nth-child(3) {
        background: var(--black)
    }

    .recommendation__body-block-item-top-like {
        position: relative;
        z-index: 1;
        width: 40rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .recommendation__body-block-item-top-like svg {
        width: 24rem;
        height: 24rem
    }

    .recommendation__body-block-item-top-like svg path {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .recommendation__body-block-item-top-like:hover svg path {
        fill: var(--red);
        stroke: var(--red)
    }

    .recommendation__body-block-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12rem;
        padding: 0 16rem 16rem 16rem
    }

    .recommendation__body-block-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recommendation__body-block-item-bot-text span {
        color: var(--grey)
    }

    .recommendation__body-block-item-bot-text p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: 36rem;
    }

    .recommendation__body-block-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recommendation__body-block-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recommendation__body-block-item-bot-action-el span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0px;
        color: var(--black)
    }

    .recommendation__body-block-item-bot-action-el svg {
        width: 24rem;
        height: 24rem
    }

    .recommendation__body-block-item:hover .recommendation__body-block-item-bot .recommendation__body-block-item-bot-text p {
        color: var(--yellow)
    }

    .recommendation__body .more {
        padding: 16rem 32rem;
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        border: 1rem solid var(--green-dark);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .ingredients {
        width: 100%;
        margin-top: 24rem
    }

    .ingredients__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem;
        position: relative
    }

    .ingredients__body-filter {
        width: 282rem;
        min-width: 282rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: sticky;
        top: 8rem;
        max-height: -webkit-max-content;
        max-height: -moz-max-content;
        max-height: max-content
    }

    .ingredients__body-filter-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .ingredients__body-filter-top h2 {
        color: var(--black)
    }

    .ingredients__body-filter-top button {
        color: var(--red);
        background: rgba(0, 0, 0, 0)
    }

    .ingredients__body-filter-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ingredients__body-filter-wrap a {
        padding: 17rem 0;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-bottom: 1rem dashed var(--green-dark)
    }

    .ingredients__body-filter-wrap a p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .ingredients__body-filter-wrap a span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 12rem;
        line-height: 14.4rem;
        letter-spacing: 0rem
    }

    .ingredients__body-filter-wrap a span svg {
        width: 20rem;
        height: 20rem
    }

    .ingredients__body-filter-wrap a:hover p {
        color: var(--yellow)
    }

    .ingredients__body-filter-wrap a.active p {
        color: var(--yellow)
    }

    .ingredients__body-filter-rec {
        background: #fff;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
        width: 100%
    }

    .ingredients__body-filter-rec span {
        color: var(--black)
    }

    .ingredients__body-filter-rec div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .ingredients__body-filter-rec div a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        border-radius: 1000rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .ingredients__body-filter-rec div a:hover {
        background: var(--yellow);
        color: var(--black)
    }

    .ingredients__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .ingredients__body-main-search {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: relative
    }

    .ingredients__body-main-search-wrap {
        width: 790rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        padding: 0 16rem;
        border: 1rem solid var(--med-grey)
    }

    .ingredients__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    .ingredients__body-main-search-wrap input {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        color: var(--black)
    }

    .ingredients__body-main-search button {
        padding: 12rem 24rem;
        color: var(--black);
        background: var(--yellow);
        border-radius: 1000rem
    }

    .ingredients__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 24rem;
        padding: 0 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10;
        max-height: 0;
        overflow: hidden
    }

    .ingredients__body-main-search-block button {
        padding: 4rem 12rem;
        background: var(--med-grey);
        color: var(--grey);
        border-radius: 1000rem
    }

    .ingredients__body-main-word {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .ingredients__body-main-word a {
        width: 30rem;
        height: 24rem;
        background: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border-radius: 6rem
    }

    .ingredients__body-main-word a:nth-child(1) {
        width: 34rem
    }

    .ingredients__body-main-word a:hover {
        background: var(--yellow);
        color: var(--black)
    }

    .ingredients__body-main-word a.active {
        background: var(--yellow);
        color: var(--black)
    }

    .ingredients__body-main-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 32rem
    }

    .ingredients__body-main-wrap-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .ingredients__body-main-wrap-item span {
        color: var(--green-dark)
    }

    .ingredients__body-main-wrap-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .ingredients__body-main-wrap-item div a {
        padding: 8rem 16rem;
        background: rgba(0, 0, 0, 0);
        border-radius: 1000rem;
        border: 1rem solid var(--yellow);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .ingredients__body-main-wrap-item div a:hover {
        background: var(--yellow)
    }

    .ingredients__body-main .load-more {
        padding: 16rem 32rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        -ms-flex-item-align: center;
        align-self: center;
        margin-top: 16rem
    }

    .ingredients__body-main .banner {
        width: 100%;
        background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
        background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
        border-radius: 24rem;
        padding: 24rem 24rem 43rem 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative;
        overflow: hidden;
        margin-top: 16rem
    }

    .ingredients__body-main .banner img {
        position: absolute;
        right: 0rem;
        width: 100%;
        height: 100%;
        bottom: 0;
        z-index: 0
    }

    .ingredients__body-main .banner span {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .ingredients__body-main .banner p {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .ingredients__body-main .banner button {
        padding: 16rem 32rem;
        border-radius: 1000rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        position: relative;
        z-index: 1
    }

    .recipe {
        width: 100%;
        margin-top: 24rem
    }

    .recipe__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .recipe__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-info h1 {
        color: var(--green-dark)
    }

    .recipe__body-main-info p {
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 16rem;
        line-height: 19.2rem;
        letter-spacing: 0%;
    }

    .recipe__body-main-tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 16rem 24rem
    }

    .recipe__body-main-tags-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: flex-start;
        gap: 16rem
    }

    .recipe__body-main-tags-item span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black)
    }

    .recipe__body-main-tags-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        max-width: 690rem;
    }

    .recipe__body-main-tags-item div div {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        border-radius: 1000rem
    }

    .recipe__body-main-tags-item div button {
        background: rgba(0, 0, 0, 0);
        color: var(--yellow)
    }

    .recipe__body-main-present {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
    }

    .wrap_img {
        width: 100%;
        height: 448rem;
        position: relative;
        border-radius: 24rem;
    }

    .youtube-link {
        width: 64rem;
        height: 64rem;
        box-shadow: 0px 10rem 26.3rem 0px #00000040;
    }

    .wrap_img img {
        width: 100%;
        height: inherit
    }

    .recipe__body-main-present-attr {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-present-attr-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .recipe__body-main-present-attr-action-rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        background: var(--green-dark);
        border-radius: 1000rem;
        padding: 4rem 12rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0rem;
        color: var(--white)
    }

    .recipe__body-main-present-attr-action-rating svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-present-attr-action div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--grey)
    }

    .recipe__body-main-present-attr-action div img {
        width: 24rem;
        height: 24rem
    }

    .recipe__body-main-present-attr-do {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-present-attr-do a {
        padding: 8rem 16rem;
        background: var(--beige-dark);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--green-dark);
        border-radius: 1000rem
    }

    .recipe__body-main-present-attr-do a svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-present-attr-do button svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-way {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-way-method {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 24rem 32rem;
        width: 384rem
    }

    .recipe__body-main-way-method span {
        color: var(--green-dark)
    }

    .recipe__body-main-way-method ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-method ol li {
        list-style: decimal;
        list-style-position: inside;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 16rem;
        line-height: 19.2rem;
        letter-spacing: 0%;
    }

    .recipe__body-main-way-method ol li::marker {
        color: var(--yellow)
    }

    .recipe__body-main-way-ingredients {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 24rem 32rem;
        background: var(--white);
        border-radius: 24rem;
        width: 384rem
    }

    .recipe__body-main-way-ingredients .title {
        color: var(--green-dark)
    }

    .recipe__body-main-way-ingredients-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-way-ingredients-block-top-size {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-way-ingredients-block-top-size div {
        background: var(--white);
        border-radius: 100rem;
        padding: 8rem 16rem;
        border: 1rem solid var(--yellow);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .recipe__body-main-way-ingredients-block-top-size div:hover {
        background: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-top-size div.active {
        background: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-top-col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        padding: 2.5rem 4rem;
        background: var(--beige);
        border-radius: 100rem
    }

    .recipe__body-main-way-ingredients-block-top-col button {
        width: 24rem;
        height: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%
    }

    .recipe__body-main-way-ingredients-block-top-col button svg {
        width: 16rem;
        height: 16rem;
        min-width: 16rem;
        min-height: 16rem;
    }

    .recipe__body-main-way-ingredients-block-top-col button:nth-child(1) {
        background: var(--beige-dark)
    }

    .recipe__body-main-way-ingredients-block-top-col button:nth-child(2) {
        background: var(--med-grey)
    }

    .recipe__body-main-way-ingredients-block-top-col span {
        min-width: 34rem;
        height: 27rem;
        color: var(--black);
        text-align: center
    }

    .recipe__body-main-way-ingredients-block-table {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-table-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        gap: 8rem
    }

    .recipe__body-main-way-ingredients-block-table-item span {
        color: var(--black);
        white-space: nowrap
    }

    .recipe__body-main-way-ingredients-block-table-item .line {
        width: 100%;
        height: 1rem;
        border-bottom: 1rem dashed var(--med-grey)
    }

    .recipe__body-main-way-ingredients-block-table-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-table-item div p {
        color: var(--black);
        white-space: nowrap;
        max-width: 150rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox {
        position: absolute;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox-label {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 18rem
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox-view {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
        border: 1rem solid var(--med-grey);
        border-radius: 4rem;
        background: #fff;
        -webkit-transition: .3s;
        transition: .3s
    }

    .recipe__body-main-way-ingredients-block-table-item div svg {
        opacity: 0;
        -webkit-transition: .3s;
        transition: .3s
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view {
        background-color: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view svg {
        opacity: 1
    }

    .recipe__body-main-banner {
        width: 100%;
        height: 190rem;
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        padding: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-banner img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1
    }

    .recipe__body-main-banner span {
        color: var(--white)
    }

    .recipe__body-main-banner p {
        color: var(--white);
        max-width: 367rem
    }

    .recipe__body-main-banner button {
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recipe__body-main-user {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
        background: var(--white);
        padding: 24rem 32rem;
        border-radius: 24rem
    }

    .recipe__body-main-user-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-user-top button {
        background: var(--beige-dark);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        width: 100%;
        height: 41rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 100rem
    }

    .recipe__body-main-user-top button.active {
        background: var(--green-dark);
        color: var(--white)
    }

    .recipe__body-main-user-top button:hover {
        background: var(--green-dark);
        color: var(--white)
    }

    .recipe__body-main-user-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .recipe__body-main-user-section-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-title span {
        color: var(--black)
    }

    .recipe__body-main-user-section-title p {
        color: var(--black)
    }

    .recipe__body-main-user-section-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-user-section-block-save {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-save p {
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-block-save div {
        padding: 12rem 24rem;
        border: 1rem solid var(--med-grey);
        background: rgba(0, 0, 0, 0);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        color: var(--black);
        border-radius: 100rem
    }

    .recipe__body-main-user-section-block-save div .line {
        width: 1rem;
        height: 20rem;
        background: var(--med-grey)
    }

    .recipe__body-main-user-section-block-save div svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-block-form .comment-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form .comment-form .form-submit input {
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-main-user-section-block-form .comment-form textarea {
        width: 100%;
        height: 100rem;
        background: rgba(0, 0, 0, 0);
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 20rem;
        color: var(--black);
        resize: none
    }

    .recipe__body-main-user-section-block-form .comment-form input {
        width: 360rem;
        height: 49rem;
        background: rgba(0, 0, 0, 0);
        padding-left: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 20rem;
        color: var(--black)
    }

    .recipe__body-main-user-section-block-form-rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form-rating p:nth-child(1) {
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-block-form-rating-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .recipe__body-main-user-section-block-form-rating-info .line {
        width: 1rem;
        height: 44rem;
        background: var(--med-grey)
    }

    .stars span a::before {
        width: 24rem;
        height: 24rem;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0%;
        color: var(--black);
    }

    .recipe__body-main-user-section-block-form-rating-info .stars span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .stars span a {
        width: 44rem;
        height: 44rem;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border: 1rem solid var(--med-grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: relative;
        background: rgba(0, 0, 0, 0)
    }

    .stars span aspan {
        position: absolute;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .stars span a img {
        width: 24rem;
        height: 24rem;
        opacity: 0;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .stars.active {
        border-color: var(--yellow)
    }

    .stars.active img {
        opacity: 1
    }

    .stars.active span {
        opacity: 0
    }

    .wpcr3_rating_style1_score {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }



    .recipe__body-main-user-section-block-form-rating-info .col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-main-user-section-block-form-rating-info .col span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--black)
    }

    .recipe__body-main-user-section-block-form-rating-info .col span svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-block-form-rating-info .col p {
        color: var(--grey)
    }

    .recipe__body-main-user-section-block-form-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .recipe__body-main-user-section-block-form-main input {
        width: 360rem;
        height: 49rem;
        background: rgba(0, 0, 0, 0);
        padding-left: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 24rem;
        color: var(--black)
    }

    .recipe__body-main-user-section-block-form-main textarea {
        width: 100%;
        height: 100rem;
        background: rgba(0, 0, 0, 0);
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 24rem;
        color: var(--black);
        resize: none
    }

    .recipe__body-main-user-section-block-form-main button {
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-main-user-section-type {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-main-user-section-type .line {
        width: 100%;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-main-user-section-type h3 {
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-main-user-section-commetns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }



    .recipe__body-main-user-section-commetns-item {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-user-section-commetns-item-top .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap img {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name .text {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--green-dark)
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div svg {
        width: 16rem;
        height: 16rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info p {
        color: var(--grey)
    }

    .recipe__body-main-user-section-commetns-item-top .marks {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-user-section-commetns-item-top .marks button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        background: rgba(0, 0, 0, 0)
    }

    .recipe__body-main-user-section-commetns-item-top .marks button svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-commetns-item-top .marks button:nth-child(1) {
        color: var(--red)
    }

    .recipe__body-main-user-section-commetns-item-top .marks button:nth-child(2) {
        color: var(--green)
    }

    .recipe__body-main-user-section-commetns-item .comment {
        margin-top: 4rem;
        color: var(--black);
        max-width: 617rem
    }

    .recipe__body-main-user-section-commetns-item .show__more {
        color: var(--yellow);
        background: rgba(0, 0, 0, 0);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recipe__body-main-user-section-commetns-item .answer {
        margin-top: 4rem;
        width: 100%;
        padding: 16rem 24rem;
        background: var(--beige);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top img {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top span {
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-commetns-item .answer p {
        color: var(--black)
    }

    .recipe__body-main-user-section-commetns-item .answer .date {
        color: var(--grey)
    }

    .recipe__body-main-user-section .load__more {
        width: 100%;
        height: 50rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        border-radius: 100rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark)
    }

    .recipe__body-user {
        width: 384rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-user-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        background: var(--white);
        padding: 16rem 24rem;
        border-radius: 24rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-user-top span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-top span .line {
        width: 79.5rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-top img {
        width: 170rem;
        height: 150rem
    }

    .recipe__body-user-top div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-user-top div p {
        color: var(--black);
        text-align: center
    }

    .recipe__body-user-top div button {
        width: 100%;
        height: 50rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black)
    }

    .recipe__body-user-form {
        padding: 16rem 24rem;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-user-form span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        justify-content: center;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-form span .line {
        width: 79.5rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-form p {
        color: var(--black);
        text-align: center
    }

    .recipe__body-user-form div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-user-form div input {
        width: 224rem;
        height: 49rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--med-grey);
        border-radius: 1000rem;
        color: var(--black);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 16rem
    }

    .recipe__body-user-form div button {
        width: 104rem;
        height: 49rem;
        background: var(--yellow);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: var(--black);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-user-share {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 16rem 24rem;
        border-radius: 24rem;
        background: var(--white)
    }

    .recipe__body-user-share span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-share span .line {
        width: 79.5rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-share div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recipe__body-user-share div a {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-user-share div a img {
        width: 100%;
        height: 100%
    }
}

@media (max-width: 750px) {
    html {
        font-size: .2666666667vw
    }

    .comment-list .blog-comment-item:not(:last-child) {
        padding-bottom: 16rem;
        border-bottom: 1rem solid var(--med-grey);
    }

    .comment-list {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .desk {
        display: none !important
    }

    .mob {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    body {
        max-width: 375rem;
        background: var(--beige);
        margin: 0 auto
    }

    .container {
        max-width: 343rem;
        width: 100%;
        margin: 0 auto
    }

    .container-soft {
        max-width: 343rem;
        width: 100%;
        margin: 0 auto
    }

    .h1 {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 32rem;
        line-height: 35rem;
        letter-spacing: 0%
    }

    .h2 {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 32rem;
        line-height: 35rem;
        letter-spacing: 0%
    }

    .h3-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 32rem;
        line-height: 35.2rem;
        letter-spacing: 0rem
    }

    .h3-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 32rem;
        line-height: 35.2rem;
        letter-spacing: 0rem
    }

    .h4-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 14.77rem;
        line-height: 16.25rem;
        letter-spacing: 0rem
    }

    .h4-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem
    }

    .h5-regular {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 20rem;
        line-height: 22rem;
        letter-spacing: 0rem
    }

    .h5-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem
    }

    .desc-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0%
    }

    .desc-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 19.2rem;
        letter-spacing: 0%
    }

    .low-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem
    }

    .low-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0%
    }

    .caption-regular {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 12rem;
        line-height: 14.4rem;
        letter-spacing: 0rem
    }

    .caption-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 8rem;
        line-height: 10rem;
        letter-spacing: 0rem
    }

    .btn-black {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .btn-black:hover {
        background: var(--yellow) !important;
        border-color: rgba(0, 0, 0, 0)
    }

    .btn-yellow {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .btn-yellow:hover {
        background: var(--yellow-dark) !important
    }

    .links-white {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .links-white:hover {
        color: var(--yellow) !important
    }

    .links-white:hover svg path {
        stroke: var(--yellow)
    }

    .links-yellow {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .links-yellow:hover {
        color: var(--white) !important
    }

    .links-yellow:hover svg path {
        stroke: var(--white)
    }

    .li-active a {
        color: var(--yellow) !important;
        gap: 17rem !important;
        border-color: transparent !important;
    }

    .li-active svg {
        rotate: 180deg
    }

    .li-active svg path {
        stroke: var(--yellow) !important
    }



    .user {
        width: 100%;
        margin-top: 24rem;
    }

    .user__body {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }

    .user__body-navigation {
        display: flex;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--beige);
        flex-direction: column;
        gap: 24rem;
        min-width: auto;
        max-width: none;
        padding: 16rem;
        z-index: 1000;
        transform: translateX(-100%);
        transition: all 0.3s ease;
    }

    .user__body-navigation.open {
        transform: translateX(0%);
    }

    .user__body-navigation-back {
        position: absolute;
        top: 16rem;
        right: 16rem;
        background: var(--yellow);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48rem;
        height: 48rem;
    }

    .user__body-navigation-back svg {
        width: 24rem;
        height: 24rem;
    }

    .user__body-navigation-top {
        padding: 0rem;
        background: transparent;
        border-radius: 0rem;
        display: flex;
        flex-direction: column;
    }

    .user__body-navigation-top-profile {
        display: flex;
        gap: 8rem;
        padding-bottom: 13rem;
        border-bottom: 1rem dashed var(--black);
    }

    .user__body-navigation-top-profile .image {
        width: 45rem;
        height: 45rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .user__body-navigation-top-profile .image img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 24rem;
    }

    .user__body-navigation-top-profile .image img:nth-child(1) {
        z-index: 0;
    }

    .user__body-navigation-top-profile .image img:nth-child(2) {
        z-index: 1;
    }

    .user__body-navigation-top-profile .wrap {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

    .user__body-navigation-top-profile .wrap p {
        color: var(--grey);
    }

    .user__body-navigation-top-menu {
        display: flex;
        flex-direction: column;
    }

    .user__body-navigation-top-menu button.current {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button:hover {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button {
        color: var(--yellow);
    }

    .user__body-navigation-top-menu button,
    .user__body-navigation-top-menu a {
        padding: 14rem 0;
        display: flex;
        gap: 8rem;
        background: transparent;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        color: var(--black);
        white-space: nowrap;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    .user__body-navigation-ingredients {
        background: #fff;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
        width: 100%
    }

    .user__body-navigation-ingredients span {
        color: var(--black)
    }

    .user__body-navigation-ingredients div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .user__body-navigation-ingredients div a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        border-radius: 1000rem
    }

    .profile {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .profile__wrap {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .profile__wrap-info {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        min-width: auto;
    }

    .profile__wrap-info-user {
        padding: 16rem;
        background: var(--white);
        display: flex;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
    }

    .profile__wrap-info-user form {
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .profile__wrap-info-user form .input {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .profile__wrap-info-user form .input p {
        color: var(--grey);
    }

    .profile__wrap-info-user form .input p span {
        color: var(--red);
    }

    .profile__wrap-info-user form .input input {
        width: 100%;
        padding: 16.5rem 16rem;
        color: var(--black);
        border-radius: 24rem;
        border: 1rem solid var(--grey);
    }

    .profile__wrap-info-user form .submit {
        display: flex;
        align-items: center;
        gap: 12rem;
    }

    .profile__wrap-info-user form .submit button {
        padding: 16rem 32rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        border-radius: 100rem;
    }

    .profile__wrap-info-user form .submit .saved.active {
        opacity: 1;
    }

    .profile__wrap-info-user form .submit .saved {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--green);
        transition: all 0.3s ease;
        opacity: 0;
    }

    .profile__wrap-info-user form .submit .saved svg {
        width: 16rem;
        height: 16rem;
    }

    .profile__wrap-plan {
        width: 100%;
        padding: 32rem;
        position: relative;
        border-radius: 24rem;
        background: var(--white);
        display: flex;
        flex-direction: column;
        gap: 16rem;
        overflow: hidden;
        max-width: 384rem;
    }

    .profile__wrap-plan .text {
        display: flex;
        align-items: center;
        gap: 8rem;
        position: relative;
        z-index: 1;
    }

    .profile__wrap-plan .text p {
        color: var(--black);
    }

    .profile__wrap-plan .text span {
        color: var(--yellow);
    }

    .profile__wrap-plan .img {
        position: absolute;
        top: 0;
        right: 0;
        width: 172rem;
        height: 103rem;
        z-index: 0;
        opacity: .5;
    }

    .profile__wrap-plan .list {
        display: flex;
        gap: 8rem;
        flex-direction: column;
        position: relative;
        z-index: 1;
        margin-top: 8rem;
    }

    .profile__wrap-plan .list p {
        color: var(--grey);
    }

    .profile__wrap-plan .list ul {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .profile__wrap-plan .list ul li {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .profile__wrap-plan .list ul li img {
        width: 24rem;
        height: 24rem;
        min-width: 24rem;
        min-height: 24rem;
    }

    .profile__wrap-plan .info {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .profile__wrap-plan .info .item {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .profile__wrap-plan .info .item p {
        color: var(--grey);
    }

    .profile__wrap-plan .action {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        margin-top: 16rem;
    }

    .profile__wrap-plan .action button {
        padding-bottom: 2rem;
        color: var(--green-dark);
        border-bottom: 1rem dashed var(--yellow);
        max-width: max-content;
        background: transparent;
    }

    .profile__wrap-plan .action button:last-child {
        border: none;
        color: var(--red);
        padding-bottom: 0;
    }

    .books-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .book-item {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        align-items: center;
        width: 167.5rem;
    }

    .book-item img {
        width: 100%;
        height: 120rem;
    }

    .book-item-wrap {
        display: flex;
        flex-direction: column;
        background: var(--white);
        border-radius: 24rem;
        padding: 12rem;
        gap: 8rem;
    }

    .book-item-wrap .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .book-item-wrap .text h3 {
        color: var(--black);
    }

    .book-item-wrap .text .action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .book-item-wrap .text .action span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .book-item-wrap .text .action span svg {
        width: 16rem;
        height: 16rem;
    }

    .book-item-wrap .buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .book-item-wrap .buttons button,
    .book-item-wrap .buttons a {
        width: 100%;
        height: 41rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rem;
    }

    .book-item-wrap .buttons button {
        background: transparent;
        border: 1rem solid var(--green-dark);
    }

    .book-item-wrap .buttons a {
        background: var(--yellow);
        color: var(--black);
    }

    .books__page {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .books__page .back {
        background: transparent;
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--black);
    }

    .books__page .back svg {
        width: 24rem;
        height: 24rem;
    }

    .books__page .item__book {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        width: 100%;
    }

    .books__page .item__book .wrap {
        display: flex;
        gap: 8rem;
    }

    .books__page .item__book iframe {
        width: 100%;
        height: 400rem;
    }

    .books__page .item__book .wrap img {
        width: 138rem;
        height: 92rem;
    }

    .books__page .item__book .wrap .text {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .books__page .item__book .wrap .text h3 {
        color: var(--black);
    }

    .books__page .item__book .wrap .text .action {
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .books__page .item__book .wrap .text .action span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .books__page .item__book .wrap .text .action span svg {
        width: 24rem;
        height: 24rem;
    }


    .user-comments-list {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
        border-radius: 24rem;
        background: var(--white);
        padding: 32rem;
    }

    .user-comments-list .comment-item {
        display: flex;
        gap: 24rem;
    }

    .user-comments-list .comment-item img {
        width: 170rem;
        height: 110rem;
        border-radius: 24rem;
        min-width: 170rem;
        min-height: 110rem;
    }

    .user-comments-list .comment-item .info {
        display: flex;
        flex-direction: column;
        gap: 12rem;
        width: 100%;
    }

    .user__body-sections {
        width: 100%;
    }

    .user-comments-list .comment-item .info .wrap {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .user-comments-list .comment-item .info .wrap .text {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .user-comments-list .comment-item .info .wrap .text p {
        color: var(--grey);
    }

    .user-comments-list .comment-item .info .wrap .attr {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .user-comments-list .comment-item .info .wrap .attr .wc-review-rating {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .user-comments-list .comment-item .info .wrap .attr .wc-review-rating img {
        height: 24rem;
        width: 24rem;
        min-height: auto;
        min-width: auto;
    }

    .user-comments-list .comment-item .info .wrap .attr span {
        color: var(--grey);
    }

    .user-comments-list .comment-item .info .action {
        display: flex;
        align-items: center;
        gap: 12rem;
    }

    .user-comments-list .comment-item .info .action a,
    .user-comments-list .comment-item .info .action button {
        color: var(--green-dark);
        padding-bottom: 2rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: transparent;
    }

    .user-comments-list .comment-item .info .action a:before {
        content: '';
        width: 100%;
        height: 0px;
        border-bottom: 1rem dashed var(--yellow);
        position: absolute;
        bottom: -2rem;
    }

    .user-comments-list .comment-item .info .action button:before {
        content: '';
        width: 100%;
        height: 0px;
        border-bottom: 1rem dashed var(--yellow);
        position: absolute;
        bottom: -2rem;
    }

    .user-comments-list .comment-item .info .admin-reply {
        padding: 0rem 24rem;
        background: var(--beige);
        display: flex;
        flex-direction: column;
        gap: 8rem;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        border-radius: 24rem;
    }

    .user-comments-list .comment-item .info .admin-reply.show {
        max-height: 1000px;
        padding: 16rem 24rem;
    }

    .user-comments-list .comment-item .info .admin-reply .admin {
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .user-comments-list .comment-item .info .admin-reply .admin img {
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        min-height: auto;
        min-width: auto;
    }

    .user-comments-list .comment-item .info .admin-reply .admin span {
        color: var(--black);
    }

    .user-comments-list .comment-item .info .admin-reply .comment-date {
        color: var(--grey);
    }

    .auth {
        width: 100%;
        height: 100vh;
        background: #1D1D1B50;
        backdrop-filter: blur(10rem);
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
    }

    .auth_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth_wrap-close {
        position: absolute;
        top: 16rem;
        right: 64rem;
        background: var(--yellow);
        border-radius: 50%;
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth_wrap-close svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        padding: 40rem;
        background: var(--white);
        border-radius: 24rem;
    }

    .auth__body-tabs {
        display: flex;
        align-items: center;
        background: var(--beige);
        padding: 4rem;
        border-radius: 100rem;
    }

    .auth__body-tabs button {
        width: 183rem;
        height: 33rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 100rem;
        transition: all 0.3s ease;
        color: var(--black);
    }

    .auth__body-tabs button.current {
        background: var(--green-dark);
        color: var(--white);
    }

    .auth__body-register {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        align-items: center;
    }

    .auth__body-register form {
        display: flex;
        flex-wrap: wrap;
        gap: 12rem;
        max-width: 374rem;
    }

    .auth__body-register form .input {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .auth__body-register form .input p {
        color: var(--grey);
    }

    .auth__body-register form .input p span {
        color: var(--red);
    }

    .auth__body-register form .input input {
        width: 100%;
        height: 50rem;
        padding-left: 24rem;
        border-radius: 100rem;
        background: transparent;
        border: 1rem solid var(--med-grey);
        display: flex;
        align-items: center;
    }

    .auth__body-register form .input:nth-child(1) {
        width: 181rem;
    }

    .auth__body-register form .input:nth-child(2) {
        width: 181rem;
    }

    .auth__body-register form .input:nth-child(3) {
        width: 100%;
        min-width: 100%;
    }

    .auth__body-register form .password {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        width: 100%;
    }

    .auth__body-register form .password p {
        color: var(--grey);
    }

    .auth__body-register form .password p a {
        color: var(--red);
    }

    .auth__body-register form .password .input__wrap {
        width: 100%;
        height: 50rem;
        display: flex;
        align-items: center;
        position: relative;
        border: 1rem solid var(--med-grey);
        border-radius: 100rem;
        padding-left: 24rem;
    }

    .auth__body-register form .password .input__wrap svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register form .password .input__wrap input {
        width: 100%;
    }

    .auth__body-register form .password .input__wrap button {
        width: 24rem;
        height: 24rem;
        position: absolute;
        right: 24rem;
        background: transparent;
    }

    .auth__body-register form .password .mistakes_list {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .auth__body-register form .password .mistakes_list li.good {
        color: var(--green);
    }

    .auth__body-register form .password .mistakes_list li.good svg path {
        stroke: var(--green);
    }

    .auth__body-register form .password .mistakes_list li {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .auth__body-register form .password .mistakes_list li svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register form .create-account,
    .auth__body-register form .sign-in {
        width: 100%;
        height: 50rem;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
    }

    .auth__body-register .other {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 5rem;
    }

    .auth__body-register .other .line {
        width: 100%;
        height: 1rem;
        background: var(--grey);
    }

    .auth__body-register .other span {
        color: var(--grey);
    }

    .auth__body-register .buttons {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .auth__body-register .buttons button,
    .auth__body-register .buttons a {
        width: 119.33rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 8rem;
        border: 1rem solid var(--med-grey);
    }

    .auth__body-register .buttons button svg,
    .auth__body-register .buttons a svg {
        width: 24rem;
        height: 24rem;
    }

    .auth__body-register .policy {
        color: var(--grey);
        max-width: 259rem;
        text-align: center;
    }

    .auth__body-register .policy a {
        color: var(--green-dark);
    }




    .reels {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64rem;
        height: 64rem;
        border-radius: 50%;
        background: var(--beige-dark);
        position: fixed;
        bottom: 96rem;
        right: 8rem;
        cursor: pointer;
    }

    .reels svg {
        position: absolute;
        width: 59rem;
        height: 59rem;
        animation: wheel 10s linear infinite;
        transform-origin: 50% 50%;
    }

    .reels img {
        width: 36.9rem;
        height: 36.9rem;
    }


    .guide {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #1D1D1B50;
        display: flex;
        align-items: center;
        justify-content: center;
        scale: 0;
        transition: all 0.5s ease;
    }

    .guide.active {
        scale: 1;
    }

    .guide-close {
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 50%;
        position: absolute;
        top: 16rem;
        right: 16rem;
    }

    .guide-close svg {
        width: 24rem;
        height: 24rem;
    }

    .guide__body {
        width: 300rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 16rem;
        display: flex;
        flex-direction: column;
        gap: 16rem;
        position: relative;
    }

    .guide__body img {
        width: 100%;
        height: 250rem;
        position: relative;
        top: auto;
        right: auto;
    }

    .guide__body h3 {
        color: var(--green-dark);
        text-align: center;
    }

    .guide__body h3 br {
        display: none;
    }

    .guide__body p br {
        display: none;
    }

    .guide__body p {
        color: var(--black);
    }

    .guide__body p span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
    }

    .guide__body a {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 24rem;
        color: var(--black);
        max-width: none;
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .wheel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64rem;
        height: 64rem;
        border-radius: 50%;
        background: var(--beige-dark);
        position: fixed;
        bottom: 96rem;
        right: 8rem;
        cursor: pointer;
    }

    .wheel svg {
        position: absolute;
        width: 59rem;
        height: 59rem;
        animation: wheel 10s linear infinite;
        transform-origin: 50% 50%;
    }

    .wheel img {
        width: 36.9rem;
        height: 36.9rem;
    }

    .modal__wheel {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #1D1D1B50;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        scale: 0;
        transition: all 0.5s ease;
    }

    .modal__wheel.active {
        scale: 1;
    }

    .modal__wheel-close {
        width: 48rem;
        height: 48rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 50%;
        position: absolute;
        top: 16rem;
        right: 16rem;
    }

    .modal__wheel-close svg {
        width: 24rem;
        height: 24rem;
    }

    .modal__wheel-block {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: visible;
        scale: 0.7;
        rotate: 90deg;
        width: 447rem;
    }

    .modal__wheel-block-main {
        position: relative;
        width: 201rem;
        height: 107rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 1s ease;
    }

    .modal__wheel-block-main.active {
        opacity: 1;
    }

    .modal__wheel-block-main .ellipse {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .modal__wheel-block-main .text {
        position: absolute;
        z-index: 1;
        top: 0;
        width: 174rem;
        height: 72rem;
    }

    .modal__wheel-block-main .icon {
        position: absolute;
        z-index: 1;
        width: 39rem;
        height: 43rem;
    }

    .modal__wheel-block-items {
        width: 810rem;
        height: 435rem;
        position: relative;
        display: flex;
        align-items: flex-end;
        margin-bottom: -108rem;
        transform-origin: bottom;
        rotate: -180deg;
        transition: all 1s ease;
        opacity: 0;
    }

    .modal__wheel-block-items.active {
        rotate: 0deg;
        margin-bottom: -102rem;
        opacity: 1;
    }

    .modal__wheel-block-items-item {
        display: flex;
        position: absolute;
        bottom: 0;
        align-items: center;
        transform-origin: left center;
    }

    .modal__wheel-block-items-item a {
        position: relative;
        z-index: 1;
    }

    .modal__wheel-block-items-item svg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .modal__wheel-block-items-item:nth-child(1) {
        width: 393rem;
        height: 220rem;
    }

    .modal__wheel-block-items-item:nth-child(1) a {
        rotate: 23.75deg;
        margin-top: -35rem;
        margin-left: 23rem;
    }

    .modal__wheel-block-items-item:nth-child(2) a {
        rotate: 38.75deg;
        margin-top: -80rem;
        margin-left: 20rem;
    }

    .modal__wheel-block-items-item:nth-child(2) {
        width: 349rem;
        height: 300rem;
        left: 45rem;
    }

    .modal__wheel-block-items-item:nth-child(3) a {
        rotate: 54deg;
        margin-top: -100rem;
        margin-left: 28rem;
    }

    .modal__wheel-block-items-item:nth-child(3) {
        width: 285rem;
        height: 364rem;
        left: 110.1rem;
    }

    .modal__wheel-block-items-item:nth-child(4) a {
        rotate: 70deg;
        margin-top: -143rem;
        margin-left: 25rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(4) {
        width: 203rem;
        height: 405rem;
        left: 193.3rem;
    }

    .modal__wheel-block-items-item:nth-child(5) a {
        rotate: 82.6deg;
        margin-top: -134rem;
        margin-left: -10rem;
    }

    .modal__wheel-block-items-item:nth-child(5) {
        width: 106rem;
        height: 431rem;
        left: 292.2rem;
    }

    .modal__wheel-block-items-item:nth-child(6) a {
        rotate: -83.6deg;
        margin-top: -150rem;
        margin-left: -40rem;
    }

    .modal__wheel-block-items-item:nth-child(6) {
        width: 105rem;
        height: 428rem;
        left: 395.4rem;
    }

    .modal__wheel-block-items-item:nth-child(7) a {
        rotate: -68.6deg;
        margin-top: -144rem;
        margin-left: 25rem;
    }

    .modal__wheel-block-items-item:nth-child(7) {
        width: 199rem;
        height: 404rem;
        left: 399.5rem;
    }

    .modal__wheel-block-items-item:nth-child(8) a {
        rotate: -53.6deg;
        margin-top: -120rem;
        margin-left: 83rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(8) {
        width: 281rem;
        height: 363.5rem;
        left: 402rem;
    }

    .modal__wheel-block-items-item:nth-child(9) a {
        rotate: -39.18deg;
        margin-top: -82rem;
        margin-left: 150rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(9) {
        width: 349rem;
        height: 303rem;
        left: 402rem
    }

    .modal__wheel-block-items-item:nth-child(10) a {
        rotate: -25.6deg;
        margin-left: 170rem;
        margin-top: -35rem;
        color: var(--white);
    }

    .modal__wheel-block-items-item:nth-child(10) {
        width: 391rem;
        height: 222rem;
        left: 405rem;
    }









    .cl_club {
        width: 100%;
        margin-top: 100rem;
    }

    .cl_club-body {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .cl_club-body-text {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16rem;
        justify-content: flex-start;
        width: 100%;
    }

    .cl_club-body-text h3 {
        color: var(--green-dark);
        max-width: 688rem;
        font-size: 23rem;
        line-height: 110%;
        text-align: center;
    }

    .cl_club-body-text h3 span {
        color: var(--yellow);
    }

    .cl_club-body-text a {
        padding: 16rem 32rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        text-align: center;
        border-radius: 100rem;
    }

    .cl_club-body-block {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .cl_club-body-block img {
        width: 167rem;
        height: 152rem;
        border-radius: 24rem;
    }

    .books {
        width: 100%;
        margin-top: 80rem;
    }

    .books__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24rem;
    }

    .books__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .books__body-text h2 {
        color: var(--green-dark);
        text-align: center;
    }

    .books__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center;
    }

    .books__body-block {
        display: flex;
        gap: 8rem;
        flex-wrap: wrap;
    }

    .books__body-block-item {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        width: 167.5rem;
    }

    .books__body-block-item img {
        width: 100%;
        height: 111rem;
    }

    .books__body-block-item-info {
        background: var(--white);
        padding: 16rem;
        border-radius: 24rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
        height: 100%;
    }

    .books__body-block-item-info h3 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 120.00000000000001%;
        letter-spacing: 0px;
        color: var(--black);
    }

    .books__body-block-item-info .wrap {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 4rem;
    }

    .books__body-block-item-info div .item {
        display: flex;
        align-items: center;
        gap: 4rem;
    }

    .books__body-block-item-info div .item svg {
        width: 24rem;
        height: 24rem;
    }

    .books__body-block-item-info div .item span {
        color: var(--grey);
    }

    .advantages {
        width: 100%;
        margin-top: 80rem;
    }

    .advantages__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24rem;
    }

    .advantages__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .advantages__body-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
        text-align: center;
    }

    .advantages__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center;
    }

    .advantages__body-block {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .advantages__body-block-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
        width: 167.5rem;
    }

    .advantages__body-block-item img {
        width: 64rem;
        height: 64rem;
    }

    .advantages__body-block-item .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .advantages__body-block-item .info span {
        color: var(--black);
    }

    .advantages__body-block-item .info p {
        color: var(--black);
        text-align: center;
    }

    .plans {
        width: 100%;
        margin-top: 80rem;
    }

    .plans__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24rem;
    }

    .plans__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .plans__body-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
        text-align: center;
    }

    .plans__body-text p {
        max-width: 700rem;
        text-align: center;
        color: var(--black);
    }

    .plans__body-block {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .plans__body-block-item {
        background: var(--white);
        border-radius: 24rem;
        padding: 32rem;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        min-height: auto;
        gap: 24rem;
        width: 100%;
    }

    .plans__body-block-item .wrap {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        position: relative;
        z-index: 1;
    }

    .plans__body-block-item h3 {
        color: var(--black);
    }

    .plans__body-block-item .img {
        width: 284rem;
        height: 170rem;
        position: absolute;
        right: -16rem;
        top: -16rem;
        z-index: 0;
        opacity: 0.5;
    }

    .plans__body-block-item .list {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .plans__body-block-item .list li {
        display: flex;
        align-items: center;
        gap: 8rem;
        color: var(--black);
    }

    .plans__body-block-item .list li svg {
        width: 40rem;
        height: 40rem;
    }

    .plans__body-block-item a {
        width: 100%;
        height: 50rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .faq {
        width: 100%;
        margin-top: 80rem;
        background: var(--green-dark);
        padding: 64rem 0;
        border-bottom: 1rem solid var(--grey);
    }

    .faq__body {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 24rem;
    }

    .faq__body-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }

    .faq__body-text h2 {
        text-transform: uppercase;
        color: var(--white);
        text-align: center;
    }

    .faq__body-text p {
        color: var(--white);
        text-align: center;
    }

    .faq__body-block {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .faq__body-block-item.open {
        background: var(--yellow);
    }

    .faq__body-block-item.open .faq__body-block-item-top {
        padding-bottom: 8rem;
    }

    .faq__body-block-item.open h4 {
        color: rgba(42, 50, 77, 1);
    }

    .faq__body-block-item.open button {
        background: var(--green-dark);
        rotate: 180deg;
    }

    .faq__body-block-item.open svg path {
        stroke: var(--yellow);
    }

    .faq__body-block-item.open .faq__body-block-item-bot {
        color: var(--black);
    }

    .faq__body-block-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: rgba(13, 47, 38, 1);
        transition: all 0.3s ease;
        padding: 16rem 16rem;
        border-radius: 24rem;
        cursor: pointer;
    }

    .faq__body-block-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top h4 {
        color: var(--white);
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top button {
        width: 40rem;
        height: 40rem;
        min-width: 40rem;
        min-height: 40rem;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .faq__body-block-item-top button svg {
        width: 24rem;
        height: 24rem;
    }

    .faq__body-block-item-top button svg path {
        transition: all 0.3s ease;
    }

    .faq__body-block-item-bot {
        color: var(--white);
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }


    .cl_banner {
        width: 100%;
        margin-top: 80rem;
    }

    .cl_banner-body {
        display: flex;
        justify-content: flex-start;
        gap: 40rem;
        padding: 24rem;
        position: relative;
        flex-direction: column;
        border-radius: 24rem;
        overflow: hidden;
    }

    .cl_banner-body-img {
        width: 210rem;
        height: 249rem;
        position: absolute;
        bottom: 0;
        left: auto;
        right: 0;
    }

    .cl_banner-body-info {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .cl_banner-body-info-text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .cl_banner-body-info-text h2 {
        text-transform: uppercase;
        color: var(--green-dark);
        max-width: 517rem;
        font-size: 24rem;
        line-height: 110%;
    }

    .cl_banner-body-info-text p {
        color: var(--black);
        max-width: 400rem;
    }

    .cl_banner-body-info a {
        padding: 12rem 24rem;
        border-radius: 100rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        max-width: max-content;
    }

    .cl_banner-body-our {
        display: flex;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 24rem;
        max-height: max-content;
        max-width: max-content;
    }

    .cl_banner-body-our .text {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .cl_banner-body-our .text span {
        color: var(--black);
    }

    .cl_banner-body-our .text p {
        color: var(--grey);
    }

    .cl_banner-body-our .images {
        display: flex;
        align-items: center;
    }

    .cl_banner-body-our .images img {
        width: 40rem;
        height: 40rem;
    }

    .cl_banner-body-our .images img:not(:first-child) {
        margin-left: -13rem;
    }


    .blog {
        width: 100%;
        margin-top: 24rem;
    }

    .blog__body {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .blog__body-top {
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .blog__body-top-item {
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .blog__body-top-item .grad {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    }

    .blog__body-top-item img:nth-child(1) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .blog__body-top-item:hover h3 {
        color: var(--yellow);
    }

    .blog__body-top-item {
        padding: 16rem;
        width: 100%;
        height: 192rem;
    }

    .blog__body-top-item-info {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        position: relative;
        z-index: 1;
    }

    .blog__body-top-item-info h3 {
        color: var(--white);
        transition: all 0.3s ease;
        font-size: 16rem;
        line-height: 17.3rem;
    }

    .blog__body-top-item-info .category {
        padding: 4rem 12rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        max-width: max-content;
    }

    .blog__body-top-item-info .soft {
        display: flex;
        align-items: center;
        gap: 24rem;
    }

    .blog__body-top-item-info .soft .soft-item {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .blog__body-top-item-info .soft .soft-item img {
        position: static;
        width: 16rem;
        height: 16rem;
    }

    .blog__body-top .wrap {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .blog__body-top .wrap .blog__body-top-item {
        padding: 16rem;
        width: 100%;
        height: 192rem;
    }

    .blog__body-popular {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .blog__body-popular-section {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .blog__body-popular-section-block {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }

    .blog__body-popular-section-block .daily__body-wrap-item img {
        scale: 1;
    }

    .blog__body-popular-section-block .daily__body-wrap-item {
        width: 248rem;
        height: 261rem;
    }

    .blog__body-popular-section-block .daily__body-wrap-item-top {
        height: 160rem;
    }

    .blog__body-popular-section h3 {
        color: var(--green-dark);
        display: flex;
        align-items: center;
        gap: 16rem;
    }

    .blog__body-popular-section h3 .line {
        width: 100rem;
        height: 1rem;
        background: var(--med-grey);
        display: none;
    }

    .blog__body-popular-section #blog {
        width: 100%;
    }

    .blog__body-popular-section #blog .splide__slide {
        margin-right: 24rem !important;
        width: 248rem !important;
        height: 261rem !important;
    }

    .blog__body-popular-section #blog .splide__slide img {
        scale: 1;
    }

    .blog__body-popular-section #blog .splide__arrows {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 16rem;
        top: -40rem;
        right: 0;
    }

    .blog__body-popular-section #blog .splide__arrow {
        position: static;
        width: 40rem;
        height: 40rem;
        background: var(--beige-dark);
        opacity: 1 !important;
    }

    .blog__body-popular-section #blog .splide__arrow svg {
        width: 24rem;
        height: 24rem;
        fill: none;
    }

    .blog__body-popular-section #blog .splide__slide {
        margin-right: 24rem !important;
        width: 248rem !important;
        height: 261rem;
    }

    .blog__body-popular-section #blog .splide__slide .daily__body-wrap-item-top {
        height: 160rem;
    }

    .blog__body-popular-category {
        display: flex;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
    }

    .blog__body-popular-category h3 {
        color: var(--green-dark);
    }

    .blog-categories-list {
        display: flex;
        flex-direction: column;
    }

    .blog__body-popular-category-wrap {
        width: 100%;
    }

    .blog-category-name {
        transition: all 0.3s ease;
        color: var(--black);
    }

    .blog-category-item:hover .blog-category-name {
        color: var(--yellow);
    }

    .blog-category-item:first-child {
        padding: 0px 0px 17rem 0px;
    }

    .blog-category-item {
        padding: 17rem 0rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1rem dashed var(--green-dark);
    }

    .blog-category-count {
        color: var(--grey);
        display: flex;
        align-items: center;
    }

    .blog-category-count svg {
        width: 24rem;
        height: 24rem;
    }

    .blog__body-news {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32rem;
    }

    .blog__body-news h2 {
        color: var(--green-dark);
    }

    .blog__body-news-block {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24rem;
        row-gap: 32rem;
        width: 100%;
    }

    .blog__body-news-block .daily__body-wrap-item {
        width: 282rem;
        height: 283rem;
    }

    .blog__body-news-block .daily__body-wrap-item img {
        scale: 1;
    }

    .blog__body-news-block .daily__body-wrap-item .daily__body-wrap-item-top {
        height: 182rem;
    }

    .bread__body-main {
        display: flex;
        flex-direction: column !important;
        gap: 16rem !important;
    }

    .bread__body-main-search .aws-search-form {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .bread__body-main-search .aws-search-field {
        width: 280rem;
        height: 40rem;
        background: var(--white);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
        padding-left: 16rem;
        border: 1px solid var(--med-grey);
        border-radius: 100rem;
    }

    .bread__body-main-search .aws-search-btn {
        width: 96rem;
        height: 41rem;
        background: var(--yellow);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
        border-radius: 100rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .article {
        width: 100%;
        margin-top: 24rem;
    }

    .article__body {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .article__body-main {
        width: 100%;
        height: 200rem;
        position: relative;
        overflow: hidden;
        border-radius: 24rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
        padding: 24rem;
        justify-content: flex-end;
    }

    .article__body-main .grad {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
    }

    .article__body-main .wp-post-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .article__body-main h1 {
        color: var(--white);
        position: relative;
        z-index: 2;
        font-size: 16rem;
        line-height: 17.3rem;
    }

    .article__body-main-items {
        display: flex;
        align-items: center;
        gap: 24rem;
        position: relative;
        z-index: 2;
    }

    .article__body-main-items div {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
    }

    .article__body-main-items div img {
        width: 16rem;
        height: 16rem;
    }



    .article__body-info-content-article {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(1) {
        border-top-left-radius: 24rem;
        border-bottom-left-radius: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) {
        border-top-right-radius: 24rem;
        border-bottom-right-radius: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) span {
        justify-content: flex-start;
    }

    .article__body-info-content-article .article__body-info-content-article-item:nth-child(2) h3 {
        text-align: start;
    }

    .article__body-info-content-article .article__body-info-content-article-item {
        width: 50%;
        height: 132rem;
        background: var(--white);
        padding: 8rem 16rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;
        position: relative;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .article__body-info-content-article .article__body-info-content-article-item img {
        position: absolute;
        width: auto;
        height: auto;
        scale: 0.7;
        z-index: 0;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover span {
        color: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover h3 {
        color: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover span svg path {
        stroke: var(--white);
    }

    .article__body-info-content-article .article__body-info-content-article-item:hover img {
        opacity: 1;
    }

    .article__body-info-content-article .article__body-info-content-article-item span {
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--grey);
        position: relative;
        z-index: 1;
        width: 100%;
        justify-content: flex-end;
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item span svg {
        width: 24rem;
        height: 24rem;
    }

    .article__body-info-content-article .article__body-info-content-article-item span svg path {
        transition: all 0.3s ease;
    }

    .article__body-info-content-article .article__body-info-content-article-item h3 {
        width: 100%;
        text-align: end;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
    }





    .article__body-info {
        display: flex;
        flex-direction: column;
        gap: 25rem;
    }

    .article__body-info-navigation {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .article__body-info-navigation h3 {
        color: var(--green-dark);

    }

    .article__body-info-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 24rem;
    }

    .article__body-info-content .main-content {
        display: flex;
        flex-direction: column;
        gap: 16rem;
    }

    .article__body-info-content-photo {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .article__body-info-content-photo .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .article__body-info-content-photo .text h2 {
        color: var(--green-dark);
    }

    .article__body-info-content-photo .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .article__body-info-content-photo .wrap img {
        width: 100%;
        height: 175rem;
    }

    .article__body-info-content-photo .wrap p {
        color: var(--grey);
        font-style: italic;
    }

    .article__body-info-content-slider {
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }

    .article__body-info-content-slider .text {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .article__body-info-content-slider .text h2 {
        color: var(--green-dark);
    }

    .article__body-info-content-slider .splide {
        width: 100%;
    }

    .article__body-info-content-slider .splide .splide__arrow {
        width: 40rem;
        height: 40rem;
        opacity: 1 !important;
        background: var(--beige-dark);
        bottom: -56rem;
        top: auto;
        transform: translateY(0%);
    }

    .article__body-info-content-slider .splide .splide__arrow svg {
        fill: none;
        width: 24rem;
        height: 24rem;
    }

    .article__body-info-content-slider .splide .splide__slide {
        width: 100% !important;
        height: 225rem;
        margin-right: 24rem !important;
    }

    .article__body-info-content-slider .splide .splide__slide img {
        width: 100%;
        height: 100%;
    }


    .article__body-info-content-quote {
        margin-top: 56rem;
        padding: 16rem;
        border-top: 1rem dashed var(--green-dark);
        border-bottom: 1rem dashed var(--green-dark);
        display: flex;
        gap: 8rem;
        color: var(--black);
        font-style: italic;
    }

    .article__body-info-content-quote img {
        width: 24rem;
        height: 24rem;
    }

    .table {
        width: 100%;
        overflow: hidden;
        border-radius: 24rem;
        border-spacing: 0;
        border-collapse: collapse;
        background: var(--white);
    }

    .table thead {
        background: var(--beige-dark);
        height: 51rem;
    }

    .table thead th {
        text-align: left;
        padding-left: 16rem;
    }

    .table tr:not(:last-child) {
        border-bottom: 1rem solid var(--med-grey);
        border-spacing: 1rem;
    }

    .table tr td {
        padding: 16rem;

    }

    .article__body-info-content-video {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .article__body-info-content-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        align-items: center;
        padding: 16rem 16rem 0px 16rem;
        border-top: 1rem dashed var(--green-dark);
        margin-top: 16rem;
    }

    .article__body-info-content-tags span {
        color: var(--black);
    }

    .article__body-info-content-tags p {
        color: var(--white);
        background: var(--green-dark);
        padding: 4rem 12rem;
        border-radius: 100rem;
        transition: all 0.3s ease;
    }

    .article__body-info-content-tags p:hover {
        background: var(--yellow);
        color: var(--black);
    }

    .main__wrap {
        background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);

    }

    .main {
        position: relative;
    }

    .club .main__body {
        padding: 24rem 0 380rem 0;
    }

    .main__body {
        padding: 24rem 0 452rem 0rem;
        gap: 24rem;
    }

    .main__body .yellow-btn {
        padding: 12rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 120.00000000000001%;
        letter-spacing: 0px;
        text-align: center;
        color: var(--black);
    }

    .main__body .bread {
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .main__body .bread span {
        color: var(--white);
    }

    .main__body .bread p,
    .main__body .bread a {
        color: var(--grey);
    }

    .main .main__text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .main .main__text h1 {
        color: #fff;
        text-transform: inherit
    }

    .main .main__text h1 br {
        display: none
    }

    .main .main__text p {
        max-width: 566rem;
        color: var(--white)
    }

    .main .main__text-search form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        margin-top: 16rem
    }

    .main .main__text-search .aws-form-btn {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        background: var(--yellow);
        width: 96rem;
        height: 41rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 1000rem
    }

    .main .main__text-search input {
        width: 239rem;
        height: 41rem;
        border-radius: 100rem;
        background: var(--white);
        border: 1rem solid var(--med-grey);
        padding-left: 16rem;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0px
    }

    .main .main__text-search input:placeholder {
        color: var(--grey)
    }

    .main .main__text-search button {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        background: var(--yellow);
        width: 96rem;
        height: 41rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 1000rem
    }

    .main .main__img {
        height: 474rem;
        width: 100%;
        position: absolute;
        bottom: 0rem;
        right: 50rem;
    }

    .main .cl_img {
        height: 309rem;
        width: 343rem;
        position: absolute;
        bottom: 30rem;
        right: 16rem;
        z-index: 0;
    }

    .main .main__coffee {
        position: absolute;
        bottom: 94rem;
        left: 16rem;
        width: 347rem;
        height: 204rem
    }

    .main .main__stroke {
        width: 100%;
        height: 220rem;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: -150rem
    }

    .main .main__stroke-body:nth-child(1) {
        width: 935rem;
        height: 49rem;
        background: var(--yellow-dark);
        rotate: 3deg;
        position: absolute;
        left: -280rem;
        top: 50rem
    }

    .main .main__stroke-body:nth-child(2) {
        width: 917rem;
        height: 49rem;
        background: var(--yellow);
        rotate: -3deg;
        position: absolute;
        left: -267rem;
        top: 50rem
    }

    .main .main__stroke-body:nth-child(2) .main__stroke-body-wrap {
        -webkit-animation: tickerTwo 10s linear infinite;
        animation: tickerTwo 10s linear infinite
    }

    .main .main__stroke-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden
    }

    .main .main__stroke-body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 38.43rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-animation: ticker 10s linear infinite;
        animation: ticker 10s linear infinite;
        -webkit-transform-style: preserve-3d;
        position: absolute
    }

    .main .main__stroke-body-wrap img {
        width: 19.7rem;
        height: 19.7rem
    }

    .main .main__stroke-body-wrap span {
        color: var(--black)
    }

    @-webkit-keyframes ticker {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }

        100% {
            -webkit-transform: translateX(-51%);
            transform: translateX(-51%)
        }
    }

    @keyframes ticker {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }

        100% {
            -webkit-transform: translateX(-51%);
            transform: translateX(-51%)
        }
    }

    @-webkit-keyframes tickerTwo {
        0% {
            -webkit-transform: translateX(-51%);
            transform: translateX(-51%)
        }

        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

    @keyframes tickerTwo {
        0% {
            -webkit-transform: translateX(-51%);
            transform: translateX(-51%)
        }

        100% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

    .header.active {
        background: var(--beige)
    }

    .header.active .first {
        opacity: 0
    }

    .header.active .second {
        opacity: 1
    }

    .header.active .find {
        background: var(--black)
    }

    .header.active .find span {
        color: var(--white)
    }

    .header.active .find svg path {
        stroke: var(--white)
    }

    .header {
        width: 100%;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        z-index: 1000;
    }

    .header .header__menu {
        width: 100%;
        position: fixed;
        bottom: 0rem;
        background: var(--beige);
        height: calc(100vh - 73rem);
        z-index: 100;
        padding: 16rem;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        z-index: 100;
    }

    .header .header__menu.active {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }

    .header__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        padding: 8rem 0;
        border-bottom: 1rem solid var(--white)
    }

    .header__body-logo {
        width: 115rem;
        height: 61rem;
        position: relative
    }

    .header__body-logo .first {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        opacity: 1
    }

    .header__body-logo .second {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        opacity: 0
    }

    .header__body-logo img {
        position: absolute;
        width: auto;
        height: 100%
    }

    .header__body .hamburger {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .header__body .hamburger input {
        display: none
    }

    .header__body .hamburger svg {
        height: 32rem;
        width: 32rem;
        -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1)
    }

    .header__body .line {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1;
        -webkit-transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1)
    }

    .header__body .line-top-bottom {
        stroke-dasharray: 12 63
    }

    .header__body .hamburger input:checked+svg {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .header__body .hamburger input:checked+svg .line-top-bottom {
        stroke-dasharray: 20 300;
        stroke-dashoffset: -32.42;
        stroke: var(--red)
    }

    .header__body .hamburger input:checked+svg .line {
        stroke: var(--red)
    }

    .header__body-menu {
        width: 100%
    }

    .header__body-menu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0rem
    }

    .header__body-menu ul li:hover a {
        color: var(--black) !important;
    }

    .header__body-menu ul li a {
        width: 100%;
        color: var(--black);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 2rem;
        cursor: pointer;
        position: relative;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 16rem 0;
        border-bottom: 1rem var(--black);
        border-style: dashed
    }

    .header-soft li a {
        color: var(--black);
    }

    .header__body-menu ul li span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .header__body-menu ul li a svg {
        width: 16rem;
        height: 16rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        rotate: -90deg
    }

    .header__body-menu ul li a svg path {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        stroke: var(--black)
    }

    .header__body-menu ul li {
        width: 100%;
    }

    .header__body-menu ul li a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }

    .header__body-menu ul li a::before {
        content: "";
        position: absolute;
        background: var(--yellow);
        border-radius: 50%;
        bottom: -4rem;
        left: 50%;
        width: 4rem;
        height: 4rem;
        min-width: 5rem;
        min-height: 4rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        opacity: 0;
        display: none
    }

    .header__body-menu ul li .sub-menu {
        width: 100%;
        max-height: 0rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        border-radius: 24rem;
        background: var(--white);
        position: static;
        z-index: 100;
        padding: 0 8rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        left: 0;
        overflow: hidden
    }

    .header__body-menu ul li .sub-menu li {
        width: 100%;
        padding: 0;
        border: none
    }

    .header__body-menu ul li .sub-menu li a {
        width: 100%;
        padding: 8rem 16rem;
        border-radius: 100rem;
        background: rgba(0, 0, 0, 0);
        color: var(--black) !important;
        border: none !important;
    }

    .header__body-menu ul li .sub-menu li a:before {
        display: none
    }

    .header__body-menu ul li .sub-menu.active {
        max-height: 800rem;
        padding: 8rem
    }

    .header__body-menu ul li.current_page_item {
        color: var(--yellow)
    }

    .header__body-menu ul li.current_page_item a::before {
        opacity: 1
    }

    .header__body-menu ul li:hover a::before {
        opacity: 1
    }

    .header__body-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .header__body-action a {
        width: 40rem;
        height: 40rem;
        background: var(--white);
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative
    }

    .header__body-action a svg {
        width: 24rem;
        height: 24rem
    }

    .header__body-action a .circle {
        background: var(--yellow);
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 14rem;
        height: 14rem;
        position: absolute;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 10rem;
        line-height: 11.85rem;
        letter-spacing: 0%;
        text-align: center;
        color: var(--black);
        top: 0;
        right: 0
    }

    .header__body-action button {
        padding: 8rem 16rem;
        background: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem;
        color: var(--black);
        border-radius: 100rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .header__body-action .auth-button {
        border-radius: 50%;
        width: 40rem;
        height: 40rem;
    }

    .header__body-action button span {
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .header__body-action button svg {
        width: 24rem;
        height: 24rem
    }

    .header-soft li a {
        color: var(--black);
    }

    .header__body-action button svg path {
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .footer {
        width: 100%;
        margin-top: 73rem;
        background: var(--green-dark);
        padding-bottom: 72rem
    }

    .footer__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%
    }

    .footer__body-top {
        padding: 16rem;
        border-bottom: 1rem solid var(--grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        width: 100%
    }

    .footer__body-top-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .footer__body-top-text h5 {
        color: var(--yellow);
        max-width: none
    }

    .footer__body-top-text p {
        color: var(--white);
        max-width: 215rem
    }

    .footer__body-top-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        row-gap: 24rem;
        -webkit-column-gap: 48rem;
        -moz-column-gap: 48rem;
        column-gap: 48rem
    }

    .footer__body-top-items-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .footer__body-top-items-item .circle {
        width: 48rem;
        height: 48rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white-so);
        border-radius: 50%
    }

    .footer__body-top-items-item .circle img {
        width: 32rem;
        height: 32rem
    }

    .footer__body-top-items-item span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--white)
    }

    .footer__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 32rem 16rem 8rem 16rem
    }

    .footer__body-main-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-bottom: 1rem solid var(--grey);
        padding-bottom: 32rem;
        row-gap: 16rem
    }

    .footer__body-main-start-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .footer__body-main-start-left-logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .footer__body-main-start-left-logo a {
        width: 115rem;
        height: 61rem
    }

    .footer__body-main-start-left-logo a img {
        width: 100%;
        height: 100%
    }

    .footer__body-main-start-left-logo-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .footer__body-main-start-left-logo-action p {
        color: var(--white);
        max-width: 352rem
    }

    .footer__body-main-start-left-logo-action-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .footer__body-main-start-left-logo-action-form input {
        width: 252rem;
        height: 40rem;
        background: var(--white-so);
        border-radius: 1000rem;
        padding-left: 16rem;
        color: var(--white)
    }

    .footer__body-main-start-left-logo-action-form input:placeholder {
        color: var(--grey)
    }

    .footer__body-main-start-left-logo-action-form button {
        padding: 12.5rem 24rem;
        border-radius: 1000rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 15.4rem;
        letter-spacing: 0rem;
        text-align: center
    }

    /* .footer__body-main-start-left-social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-left-social div:nth-child(1) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .footer__body-main-start-left-social div:nth-child(1) a {
        width: 24rem;
        height: 24rem
    }

    .footer__body-main-start-left-social div:nth-child(1) a img {
        width: 100%;
        height: 100%
    }

    .footer__body-main-start-left-social div:nth-child(2) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .footer__body-main-start-left-social div:nth-child(2) a {
        width: 90rem;
        height: 26rem
    }

    .footer__body-main-start-left-social div:nth-child(2) a img {
        width: 100%;
        height: 100%
    } */

    .footer__body-main-start-menu:nth-child(2) {
        margin-right: 65rem
    }

    .footer__body-main-start-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-menu h4 {
        color: var(--white)
    }

    .footer__body-main-start-menu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .footer__body-main-start-menu ul li {
        color: var(--white)
    }

    .footer__body-main-end {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .footer__body-main-end P {
        text-align: center;
        color: var(--grey)
    }

    .footer__body-main-end P a {
        color: var(--yellow)
    }

    .footer__body-main-end button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--yellow);
        background: rgba(0, 0, 0, 0)
    }

    .footer__body-main-end button svg {
        width: 24rem;
        height: 24rem
    }

    .attribute {
        padding-top: 92rem;
        width: 100%
    }

    .attribute__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 16rem
    }

    .attribute__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        justify-content: space-between !important;
    }

    .attribute__body-wrap-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        width: 163.5rem !important
    }

    .attribute__body-wrap-item .circle {
        width: 154rem;
        height: 154rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .attribute__body-wrap-item .circle img {
        width: auto;
        height: auto;
        max-width: 154rem;
        max-height: 154rem;
    }

    .attribute__body-wrap-item .circle .number {
        font-size: 62rem;
        line-height: 110%;
        font-family: var(--adieu);
        color: var(--green-dark);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .attribute__body-wrap-item span {
        color: var(--black);
        margin-top: 8rem;
        min-height: 39rem;
    }

    .attribute__body-wrap-item p {
        color: var(--black);
        max-width: 266rem;
        font-size: 13rem;
    }

    .attribute__body-wrap-item p br {
        display: none !important;
    }

    .attribute__body-img {
        width: 214rem;
        height: 220rem
    }

    .program {
        margin-top: 80rem;
        width: 100%
    }

    .program__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .program__body h2 {
        color: var(--green-dark);
        text-align: center
    }

    .program__body .description {
        color: var(--black);
        text-align: center
    }

    .program__body-wrap {
        margin-top: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .program__body-wrap-item {
        width: 333rem !important;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        margin-right: 8rem !important
    }

    .program__body-wrap-item-top {
        width: 100%;
        height: 216rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-radius: 24rem;
    }

    .program__body-wrap-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .program__body-wrap-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .program__body-wrap-item-top-attr span {
        padding: 4rem 8rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }


    .program__body-wrap-item-top-like {
        position: relative;
        z-index: 1;
        width: 40rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .heart-wrap {
        width: 24rem;
        height: 24rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .heart-wrap img {
        position: absolute !important;
        transition: all 0.3s ease;
        width: 100%;
        height: 100%;
    }

    .heart-wrap img:nth-child(1) {
        opacity: 1;
    }

    .heart-wrap img:nth-child(2) {
        opacity: 0;
    }

    .simplefavorite-button.active+div img:nth-child(1) {
        opacity: 0;
    }

    .simplefavorite-button.active+div img:nth-child(2) {
        opacity: 1;
    }

    .like-btn:hover .heart-wrap img:nth-child(1) {
        opacity: 0;
    }

    .like-btn:hover .heart-wrap img:nth-child(2) {
        opacity: 1;
    }

    .program__body-wrap-item-top-like .simplefavorite-button {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
    }

    .program__body-wrap-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12rem;
        padding: 0 16rem 16rem 16rem
    }

    .program__body-wrap-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .program__body-wrap-item-bot-text span {
        color: var(--grey);
        font-size: 12rem;
        line-height: 14rem
    }

    .program__body-wrap-item-bot-text p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: none;
    }

    .program__body-wrap-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .program__body-wrap-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .program__body-wrap-item-bot-action-el svg {
        width: 24rem;
        height: 24rem
    }

    .program__body-wrap-item:hover .program__body-wrap-item-bot .program__body-wrap-item-bot-text p {
        color: var(--yellow)
    }

    .program .splide {
        width: 359rem;
        margin-left: 16rem;
        margin-top: 24rem
    }

    .program .splide .splide__pagination {
        bottom: -2em
    }

    .program .splide .splide__pagination .splide__pagination__page {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        min-height: 4rem;
        background: var(--green-dark);
        margin: 8rem;
        opacity: 1;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .program .splide .splide__pagination .splide__pagination__page.is-active {
        background: var(--yellow) !important;
        scale: 2 !important
    }

    .program .splide .splide__pagination .splide__pagination__page.medium {
        scale: 1.5
    }

    .try {
        width: 100%;
        margin-top: 80rem
    }

    .try__body {
        padding: 16rem;
        background: linear-gradient(180deg, #EC5C73 0%, #F29FA5 100%);
        position: relative;
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        min-height: 342rem;
    }

    .try__body-img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0
    }

    .try__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative;
        z-index: 1;
        order: -1;
    }

    .try__body-text h2 {
        color: var(--white);
        text-transform: initial
    }

    .try__body-text p {
        color: var(--white);
        max-width: 644rem
    }

    .try__body-ingredients {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        width: 100%;
        position: relative;
        z-index: 1
    }

    .try__body-ingredients-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 6rem;
        max-height: none;
        overflow: visible;
    }

    .try__body-ingredients-wrap a {
        padding: 8rem 16rem;
        border-radius: 1000rem;
        background: var(--white);
        border: 1rem solid var(--green-dark)
    }

    .try__body-ingredients-btn {
        color: var(--black);
        height: 50rem;
        padding: 15rem 25rem;
        display: flex;
        background: var(--yellow);
        align-items: center;
        justify-content: center;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        border-radius: 100rem;
    }

    .experiment {
        width: 100%;
        margin-top: 80rem
    }

    .experiment__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .experiment__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .experiment__body-text h2 {
        color: var(--green-dark);
        text-transform: inherit;
        text-align: center
    }

    .experiment__body-text p {
        color: var(--black);
        text-align: center
    }

    .experiment__body-categories {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        row-gap: 16rem;
        -webkit-column-gap: 8rem;
        -moz-column-gap: 8rem;
        column-gap: 8rem
    }

    .experiment__body-categories-item {
        width: 167.5rem;
        height: auto;
        position: relative;
        padding: 0rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        border-radius: 24rem;
        overflow: hidden;
        background: var(--white)
    }

    .experiment__body-categories-item img {
        width: 100%;
        min-height: 120rem;
        height: 120rem;
        position: static;
        top: 0;
        left: 0;
        z-index: 0;
        border-radius: 24rem
    }

    .experiment__body-categories-item-wrap {
        position: relative;
        z-index: 1;
        width: 100%;
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: rgba(0, 0, 0, 0);
        padding: 8rem 8rem
    }

    .experiment__body-categories-item-wrap div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .experiment__body-categories-item-wrap div h4 {
        color: var(--black);
        max-width: 100rem
    }

    .experiment__body-categories-item-wrap div p {
        color: var(--black);
        font-size: 12rem;
        line-height: 14rem
    }

    .experiment__body-categories-item-wrap a {
        width: 32rem;
        height: 32rem;
        min-width: 32rem;
        min-height: 32rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--yellow)
    }

    .experiment__body-categories-item-wrap a svg {
        width: 24rem;
        height: 24rem
    }

    .popular {
        width: 100%;
        margin-top: 80rem
    }

    .popular__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .popular__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .popular__body-text h2 {
        color: var(--green-dark);
        text-transform: inherit;
        text-align: center
    }

    .popular__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center
    }

    .popular__body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .popular__body-block-item {
        width: 300rem !important;
        height: 300rem;
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 8rem !important
    }

    .popular__body-block-item-hot {
        position: absolute;
        top: 16rem;
        left: 16rem;
        padding: 4rem 8rem;
        background: var(--red);
        color: var(--white);
        z-index: 1;
        border-radius: 1000rem
    }

    .popular__body-block-item img {
        width: auto;
        height: auto;
        position: absolute;
        z-index: 0;
        top: 0
    }

    .popular__body-block-item-grad {
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 29, 27, 0)), to(#1D1D1B));
        background: linear-gradient(180deg, rgba(29, 29, 27, 0) 0%, #1D1D1B 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .popular__body-block-item-wrap {
        position: relative;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .popular__body-block-item-wrap span {
        color: var(--white);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem
    }

    .popular__body-block-item-wrap p {
        color: var(--white);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .popular__body-block-item-wrap a {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 8rem 16rem;
        background: var(--yellow);
        color: var(--black);
        border-radius: 24rem
    }

    .popular__body-block-item-wrap a svg {
        width: 24rem;
        height: 24rem
    }

    .popular__body .splide {
        width: 359rem;
        margin-left: 16rem
    }

    .popular__body .splide .splide__pagination {
        bottom: -2em
    }

    .popular__body .splide .splide__pagination .splide__pagination__page {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        min-height: 4rem;
        background: var(--green-dark);
        margin: 8rem;
        opacity: 1;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .popular__body .splide .splide__pagination .splide__pagination__page.is-active {
        background: var(--yellow) !important;
        scale: 2 !important
    }

    .popular__body .splide .splide__pagination .splide__pagination__page.medium {
        scale: 1.5
    }

    .popular__body-btn {
        padding: 12rem 32rem;
        border-radius: 1000rem;
        border: 1rem solid var(--green-dark);
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16rem;
        letter-spacing: 0rem;
        text-align: center;
        width: 100%;
        margin-top: 24rem
    }

    .daily {
        width: 100%;
        margin-top: 80rem
    }

    .daily__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 24rem
    }

    .daily__body-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .daily__body-text h2 {
        color: var(--green-dark);
        text-transform: inherit;
        text-align: center
    }

    .daily__body-text p {
        color: var(--black);
        max-width: 700rem;
        text-align: center
    }

    .daily__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .daily__body-wrap-item {
        width: 334rem !important;
        height: 275rem !important;
        background: var(--white);
        border-radius: 24rem;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        margin-right: 8rem !important
    }

    .daily__body-wrap-item-top {
        width: 100%;
        height: 200rem;
        position: relative;
        padding: 12rem
    }

    .daily__body-wrap-item-top img {
        width: auto;
        height: auto;
        position: absolute;
        z-index: 0
    }

    .daily__body-wrap-item-top span {
        color: var(--black);
        padding: 4rem 12rem;
        border-radius: 1000rem;
        background: var(--yellow);
        position: absolute;
        top: 12rem;
        left: 12rem;
        z-index: 1
    }

    .daily__body-wrap-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 0 16rem
    }

    .daily__body-wrap-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .daily__body-wrap-item-bot-action div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .daily__body-wrap-item-bot-action div img {
        width: 16rem;
        height: 16rem
    }

    .daily__body-wrap-item-bot-action div svg {
        width: 16rem;
        height: 16rem
    }

    .daily__body-wrap-item-bot-action div span {
        color: var(--grey)
    }

    .daily__body .splide {
        width: 359rem;
        margin-left: 16rem
    }

    .daily__body .splide .splide__pagination {
        bottom: -2em
    }

    .daily__body .splide .splide__pagination .splide__pagination__page {
        width: 4rem;
        height: 4rem;
        min-width: 4rem;
        min-height: 4rem;
        background: var(--green-dark);
        margin: 8rem;
        opacity: 1;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .daily__body .splide .splide__pagination .splide__pagination__page.is-active {
        background: var(--yellow) !important;
        scale: 2 !important
    }

    .daily__body .splide .splide__pagination .splide__pagination__page.medium {
        scale: 1.5
    }

    .daily__body-btn {
        padding: 12rem 32rem;
        width: 100%;
        border-radius: 1000rem;
        border: 1rem solid var(--green-dark);
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16rem;
        letter-spacing: 0rem;
        text-align: center;
        margin-top: 24rem
    }

    .tabs {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 16rem;
        background: var(--white);
        border-top-left-radius: 24rem;
        border-top-right-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        z-index: 10
    }

    .tabs a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 3rem
    }

    .tabs a svg {
        width: 24rem;
        height: 24rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .tabs a span {
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .tabs a.active svg path {
        stroke: var(--yellow);
        fill: var(--yellow)
    }

    .tabs a.active span {
        color: var(--yellow)
    }

    .develop {
        width: 100%;
        margin-top: 60rem;

    }

    .develop__body {
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .develop__body h1 {
        text-transform: uppercase;
        color: var(--black);
        text-align: center;
    }

    .filter__modal {
        background: var(--beige);
        padding: 16rem 32rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scale: 0.9;
        border-radius: 20rem;
        position: relative;
    }

    .filter__modal-close {
        position: absolute;
        top: 25rem;
        right: 50rem;
        width: 24rem;
        height: 24rem;
        background: transparent;
    }

    .filter__modal-close svg path {
        stroke: var(--red);
    }

    .filter__modal h2 {
        text-transform: uppercase;
    }

    .filter__modal-search {
        margin-top: 20rem;
        max-width: 1362rem;
        width: 100%;
    }

    .filter__modal-search input {
        width: 1258rem !important;
    }

    .wpfFilterButtons:after {
        display: none !important;
    }

    .wpfFilterButtons {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16rem;
    }

    .wpfFilterButtons button {
        width: 673rem;
        height: 39rem;
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 1000rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wpfFilterButton {
        background: transparent;
        background: var(--green-dark);
        color: var(--white);
    }

    .wpfClearButton {
        background: transparent;
        border: 1rem solid var(--green-dark);
        order: -1;
    }

    .filter__modal-body {
        margin-top: 8rem;
    }

    .filter__modal-body .wpfMainWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        max-width: 1362rem;
    }

    .wpfFilterWrapper {
        padding: 16rem;
        border-radius: 20rem;
    }

    .wpfFilterWrapper .wpfFilterContent {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wfpDescription {
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--black);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li {
        position: relative;
        padding: 8rem 16rem;
        transition: all 0.3s ease;
        border: 1rem solid var(--yellow);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:hover {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:has(> .wpfLiLabel .wpfDisplay.selected) {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li .wpfCheckbox {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .wpfFilterVerScroll {
        max-height: 100rem !important;
        overflow-y: auto;
    }

    .wpfFilterWrapper:nth-child(-n+4) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+4):nth-child(-n+8) {
        width: 334.5rem !important;
    }

    .wpfFilterWrapper:nth-child(n+9):nth-child(-n+15) {
        width: 266rem !important;
    }


    .filter__modal {
        background: var(--beige);
        padding: 16rem 0rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scale: 1;
        border-radius: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10000;
    }

    .filter__modal-close {
        position: absolute;
        top: 25rem;
        right: 25rem;
        width: 24rem;
        height: 24rem;
        background: transparent;
    }

    .filter__modal-buttons {
        position: absolute;
        bottom: 16rem;
        display: flex;
        align-items: center;
        gap: 8rem;
    }

    .filter__modal-buttons a,
    .filter__modal-buttons button {
        width: 150rem;
        height: 39rem;
        border-radius: 100rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 12rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        text-align: center;

    }

    .filter__modal-buttons a {
        border: 1rem solid var(--green-dark);
        color: var(--green-dark);
    }

    .filter__modal-buttons button {
        background: var(--green-dark);
        color: var(--white);
    }

    .filter__modal-close svg path {
        stroke: var(--red);
    }

    .filter__modal h2 {
        text-transform: uppercase;
    }

    .filter__modal-search {
        margin-top: 40rem;
        max-width: 343rem;
        width: 100%;
    }

    .filter__modal-search input {
        width: 240rem !important;
    }

    .wpfFilterButtons:after {
        display: none !important;
    }

    .wpfFilterButtons {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16rem;
        position: fixed;
        bottom: 72rem;
        left: 0;
    }

    .wpfFilterButtons button {
        width: 343rem;
        height: 39rem;
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 1000rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wpfFilterButton {
        background: transparent;
        background: var(--green-dark);
        color: var(--white);
    }

    .wpfClearButton {
        background: var(--beige);
        border: 1rem solid var(--green-dark);
        order: -1;
    }

    .filter__modal-body {
        margin-top: 8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        padding: 24rem 16rem;
        max-height: 600rem;
        overflow-y: auto;
    }

    .widget_wpc_filters_widget {
        width: 100%;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(-n+4) .wpc-filters-section {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(n+5):nth-child(-n+8) .wpc-filters-section {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .filter__modal-body .widget_wpc_filters_widget:nth-child(n+9):nth-child(-n+13) .wpc-filters-section {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .wpc-filters-section {
        padding: 16rem;
        display: flex;
        flex-direction: column;
        gap: 16rem;
        margin-bottom: 0 !important;
        border-radius: 24rem;
        border: 1rem solid #E9E8E8;
    }

    .wpc-filters-section .wpc-filter-title {
        margin-bottom: 0;
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--black);
    }

    .wpc-filters-ul-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        padding: 0 !important;
        max-height: 100rem !important;
    }

    .wpc-filters-ul-list::-webkit-scrollbar-thumb {
        background-color: var(--black);
    }

    .wpc-filters-ul-list::-webkit-scrollbar-track {
        background: var(--med-grey);
        border-radius: 2rem;
    }

    .wpc-filters-ul-list::-webkit-scrollbar {
        width: 2rem !important;
        height: auto;
    }

    .wpc-filters-ul-list li {
        position: relative;
        padding: 8rem 16rem !important;
        transition: all 0.3s ease;

        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
        margin-bottom: 0 !important;
    }

    .wpc-filters-ul-list li label a {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
    }

    .wpc-filters-ul-list li:hover {
        background: var(--yellow);
    }

    .wpc-filters-ul-list li.wpc-term-selected {
        background: var(--yellow);
    }

    .wpc-filters-ul-list li .wpc-term-item-content-wrapper input {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .filter__modal-body .wpfMainWrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
        max-width: 343rem;
        max-height: 550rem;
        overflow: auto;
        padding-bottom: 150rem;
    }

    .wpfFilterWrapper {
        padding: 16rem;
        border-radius: 20rem;
        border: 1rem solid var(--med-grey);
    }

    .wpfFilterWrapper .wpfFilterContent {
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wfpDescription {
        font-family: var(--rubik);
        font-weight: 600;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--black);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll {
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li {
        position: relative;
        padding: 4rem 8rem;
        background: var(--med-grey);
        transition: all 0.3s ease;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black);
        max-width: max-content;
        border-radius: 1000rem;
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:hover {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li:has(> .wpfLiLabel .wpfDisplay.selected) {
        background: var(--yellow);
    }

    .wpfFilterWrapper .wpfFilterContent .wpfFilterVerScroll li .wpfCheckbox {
        position: absolute;
        opacity: 0;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        cursor: pointer;
    }

    .wpfFilterVerScroll {
        max-height: 100rem !important;
        overflow-y: auto;
    }

    .wpfFilterWrapper:nth-child(-n+4) {
        width: 343rem !important;
    }

    .wpfFilterWrapper:nth-child(n+4):nth-child(-n+8) {
        width: 343rem !important;
    }

    .wpfFilterWrapper:nth-child(n+9):nth-child(-n+15) {
        width: 343rem !important;
    }


    .bread {
        width: 100%;
        margin-top: 16rem
    }

    .bread__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .bread__body-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem
    }

    .bread__body-top a {
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .bread__body-top a:hover {
        color: var(--green-dark)
    }

    .bread__body-top p {
        color: var(--grey)
    }

    .bread__body-top span {
        color: var(--green-dark)
    }

    .bread__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .bread__body-main.stroke .open_account {
        width: 32rem;
        height: 32rem;
        background: var(--yellow);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bread__body-main.stroke .open_account svg {
        width: 18rem;
        height: 18rem;
    }

    .bread__body-main h1 {
        color: var(--green-dark);
        font-size: 24rem;
        line-height: 24rem;
    }

    .bread__body-main p {
        color: var(--black);
        max-width: 588rem
    }

    .catalog {
        width: 100%;
        margin-top: 24rem
    }

    .catalog__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative
    }

    .catalog__body-filter {
        width: 100%;
        min-width: auto;
        position: static;
        top: 8rem;
        max-height: -webkit-max-content;
        max-height: -moz-max-content;
        max-height: max-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .catalog__body-filter-top h2 {
        color: var(--black)
    }

    .catalog__body-filter-top button {
        color: var(--red);
        background: rgba(0, 0, 0, 0)
    }

    .catalog__body-filter-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-block-category {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .catalog__body-filter-block-category-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding-bottom: 16rem;
        border-bottom: 1rem dashed var(--green-dark)
    }

    .catalog__body-filter-block-category-item h3 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--green-dark)
    }

    .catalog__body-filter-block-category-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .catalog__body-filter-block-category-item div a {
        padding: 8rem 16rem;
        background: var(--white);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border: 1rem solid var(--yellow);
        border-radius: 1000rem
    }

    .catalog__body-filter-block-category-item div a.active {
        background: var(--yellow)
    }

    .catalog__body-filter-block-category-item div a:hover {
        background: var(--yellow)
    }

    .catalog__body-filter-block-advanced {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .catalog__body-filter-block-advanced span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--green-dark)
    }

    .catalog__body-filter-block-advanced span svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-filter-block-advanced div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        padding: 16rem;
        border-radius: 24rem
    }

    .catalog__body-filter-block-advanced div p {
        color: var(--black)
    }

    .catalog__body-filter-block-advanced div .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 8rem;
        padding: 0
    }

    .catalog__body-filter-block-advanced div .wrap a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-filter-block-advanced div .wrap a:hover {
        background: var(--yellow);
        color: var(--black)
    }

    .catalog__body-filter-block-buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        position: sticky;
        top: 8rem
    }

    .catalog__body-filter-block-buttons button {
        width: 167.5rem;
        height: 41rem;
        background: var(--yellow);
        color: var(--black);
        border-radius: 1000rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .catalog__body-filter-block-banner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        padding: 16rem 16rem 76rem 16rem;
        border-radius: 24rem;
        position: relative;
        background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
        background: radial-gradient(75.53% 298.59% at 75.53% 51.42%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
    }

    .catalog__body-filter-block-banner img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .catalog__body-filter-block-banner h3 {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .catalog__body-filter-block-banner p {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .catalog__body-filter-block-banner button {
        background: var(--yellow);
        padding: 16rem 32rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 10000rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        position: relative;
        z-index: 1
    }

    .catalog__body-filter-block-mobile.active {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }

    .catalog__body-filter-block-mobile {
        width: 100%;
        position: fixed;
        top: 0;
        background: var(--beige);
        height: 100vh;
        left: 0;
        z-index: 1000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%)
    }

    .catalog__body-filter-block-mobile .catalog__body-filter-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem;
        padding: 8rem 16rem;
        border-bottom: 1rem solid var(--beige-dark)
    }

    .catalog__body-filter-block-mobile .catalog__body-filter-top button {
        width: 24rem;
        height: 24rem;
        background: rgba(0, 0, 0, 0)
    }

    .catalog__body-filter-block-mobile .catalog__body-filter-top button svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-filter-block-mobile .catalog__body-filter-block-category {
        padding: 0 16rem
    }

    .catalog__body-filter-block-mobile-btns {
        position: absolute;
        bottom: 16rem;
        width: 100%;
        padding: 0 16rem;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .catalog__body-filter-block-mobile-btns button {
        width: 167.5rem;
        height: 41rem;
        border-radius: 1000rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .catalog__body-filter-block-mobile-btns button:nth-child(1) {
        background: var(--red);
        color: var(--white)
    }

    .catalog__body-filter-block-mobile-btns button:nth-child(2) {
        background: var(--yellow);
        color: var(--black)
    }

    .catalog__body-filter-block-search.active {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }

    .catalog__body-filter-block-search {
        width: 100%;
        position: fixed;
        top: 0;
        background: var(--beige);
        height: 100vh;
        left: 0;
        z-index: 1000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%)
    }

    .catalog__body-filter-block-search-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem;
        padding: 8rem 16rem;
        border-bottom: 1rem solid var(--beige-dark)
    }

    .catalog__body-filter-block-search-top button {
        width: 24rem;
        height: 24rem;
        background: rgba(0, 0, 0, 0)
    }

    .catalog__body-filter-block-search-top button svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-filter-block-search-tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        padding: 0 16rem
    }

    .catalog__body-filter-block-search-tags button {
        background: var(--med-grey);
        padding: 4rem 12rem;
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border-radius: 100rem
    }

    .catalog__body-filter-block-search-tags button:hover {
        background: var(--green-dark);
        color: var(--white)
    }

    .catalog__body-filter-block-search .catalog__body-main-block {
        padding: 0 16rem;
        overflow: scroll;
        padding-bottom: 50rem
    }

    .catalog__body-filter-block-search .catalog__body-main-block::-webkit-scrollbar {
        width: 0;
        height: 0
    }

    .catalog__body-filter-block-search .see__all {
        width: 343rem;
        height: 41rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--yellow);
        color: var(--black);
        border-radius: 1000px;
        position: absolute;
        bottom: 16rem;
        left: 16rem;
        z-index: 10
    }

    .catalog__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative
    }

    .catalog__body-main-buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        position: sticky;
        top: 8rem;
        z-index: 10
    }

    .catalog__body-main-buttons button {
        width: 167.5rem;
        height: 41rem;
        background: var(--yellow);
        color: var(--black);
        border-radius: 1000rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .catalog__body-main-search {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: relative
    }

    .catalog__body-main-search-wrap {
        width: 790rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        padding: 0 16rem;
        border: 1rem solid var(--med-grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-main-search-wrap input {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        color: var(--black)
    }

    .catalog__body-main-search-wrap:hover {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus svg path {
        stroke: var(--yellow)
    }

    .catalog__body-main-search button {
        padding: 12rem 24rem;
        color: var(--black);
        background: var(--yellow);
        border-radius: 1000rem
    }

    .catalog__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 24rem;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10
    }

    .catalog__body-main-search-block button {
        padding: 4rem 12rem;
        background: var(--med-grey);
        color: var(--grey);
        border-radius: 1000rem
    }

    .catalog__body-main-search .aws-search-form {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: relative
    }

    .ingredients__body-main-search input {
        width: 295rem !important;
        background: var(--white) !important;
    }

    .catalog__body-main-search input {
        width: 790rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        padding: 0 16rem;
        border: 1rem solid var(--med-grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
    }

    .catalog__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    .aws-search-form input {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        color: var(--black)
    }

    .catalog__body-main-search-wrap:hover {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus {
        border-color: var(--yellow)
    }

    .catalog__body-main-search-wrap:focus svg path {
        stroke: var(--yellow)
    }

    .catalog__body-main-search .aws-search-btn {
        color: var(--black);
        background: var(--yellow);
        border-radius: 1000rem;
        width: 96rem;
        height: 41rem;
        font-weight: 600;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        color: var(--black);
    }

    .catalog__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 20rem;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10
    }

    .catalog__body-main-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 7rem
    }

    .catalog__body-main-block-item {
        width: 168rem;
        background: var(--white);
        border-radius: 14rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .catalog__body-main-block-item-top {
        width: 100%;
        height: 107rem;
        position: relative;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-radius: 14rem;
    }

    .catalog__body-main-block-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .catalog__body-main-block-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 2rem
    }

    .catalog__body-main-block-item-top-attr span {
        padding: 2rem 4rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }


    .catalog__body-main-block-item-top-like {
        position: relative;
        z-index: 1;
        width: 32rem;
        height: 32rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .catalog__body-main-block-item-top-like svg {
        width: 24rem;
        height: 24rem
    }

    .catalog__body-main-block-item-top-like svg path {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .catalog__body-main-block-item-top-like:hover svg path {
        fill: var(--red);
        stroke: var(--red)
    }

    .catalog__body-main-block-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 0 8rem 8rem 8rem
    }

    .catalog__body-main-block-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 2rem
    }

    .catalog__body-main-block-item-bot-text span {
        color: var(--grey)
    }

    .catalog__body-main-block-item-bot-text h2 {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: auto;
    }

    .catalog__body-main-block-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .catalog__body-main-block-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem
    }

    .catalog__body-main-block-item-bot-action-el span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.4rem;
        letter-spacing: 0px;
        color: var(--black)
    }

    .catalog__body-main-block-item-bot-action-el svg {
        width: 14rem;
        height: 14rem
    }

    .catalog__body-main-block-item:hover .catalog__body-main-block-item-bot .catalog__body-main-block-item-bot-text h2 {
        color: var(--yellow)
    }

    .catalog__body-main-block .banner__full {
        width: 100%;
        height: 150rem;
        background: var(--grey);
        border-radius: 24rem
    }

    .catalog__body-main-block .banner__soft {
        width: 168rem;
        height: auto;
        background: var(--grey);
        border-radius: 24rem
    }

    .banner__full {
        width: 100%;
        height: 150rem;
        border-radius: 10rem;
        overflow: hidden;
        padding: 12rem 12rem 12rem 12rem;
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .banner__full h3 {
        color: var(--white);
        font-size: 20rem;
        line-height: 100%;
    }

    .banner__full a {
        color: var(--black);
        background: var(--yellow);
        padding: 8rem 16rem;
        border-radius: 100rem;
        max-width: max-content;
    }

    .catalog__body-main-block .banner__soft {
        width: 168rem;
        height: auto;
        border-radius: 10rem;
        overflow: hidden;
        padding: 12rem 12rem 12rem 12rem;
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }

    .catalog__body-main-block .banner__soft h3 {
        color: var(--white);
        max-width: 333rem;
        font-size: 18rem;
        line-height: 100%;
    }

    .catalog__body-main-block .banner__soft a {
        color: var(--black);
        background: var(--yellow);
        padding: 4rem 8rem;
        border-radius: 100rem;
        max-width: max-content;
        font-size: 12rem;
    }

    .catalog__body-main .load-more {
        padding: 12rem 32rem;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        border-radius: 1000rem;
        max-width: none;
        -ms-flex-item-align: center;
        align-self: center
    }

    .recommendation {
        width: 100%;
        margin-top: 80rem
    }

    .recommendation__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recommendation__body .h2 {
        text-transform: uppercase;
        color: var(--green-dark);
        text-align: center
    }

    .recommendation__body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 7rem
    }

    .recommendation__body-block-item {
        width: 168rem;
        background: var(--white);
        border-radius: 14rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recommendation__body-block-item-top {
        width: 100%;
        height: 107rem;
        position: relative;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recommendation__body-block-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }

    .recommendation__body-block-item-top-attr {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 2rem
    }

    .recommendation__body-block-item-top-attr span {
        padding: 2rem 4rem;
        border-radius: 1000rem;
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recommendation__body-block-item-top-attr span:nth-child(1) {
        background: var(--red)
    }

    .recommendation__body-block-item-top-attr span:nth-child(2) {
        background: var(--green)
    }

    .recommendation__body-block-item-top-attr span:nth-child(3) {
        background: var(--black)
    }

    .recommendation__body-block-item-top-like {
        position: relative;
        z-index: 1;
        width: 32rem;
        height: 32rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--white);
        border-radius: 50%
    }

    .recommendation__body-block-item-top-like svg {
        width: 24rem;
        height: 24rem
    }

    .recommendation__body-block-item-top-like svg path {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .recommendation__body-block-item-top-like:hover svg path {
        fill: var(--red);
        stroke: var(--red)
    }

    .recommendation__body-block-item-bot {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 0 8rem 8rem 8rem
    }

    .recommendation__body-block-item-bot-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 2rem
    }

    .recommendation__body-block-item-bot-text span {
        color: var(--grey)
    }

    .recommendation__body-block-item-bot-text p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: auto;
    }

    .recommendation__body-block-item-bot-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recommendation__body-block-item-bot-action-el {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem
    }

    .recommendation__body-block-item-bot-action-el span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.4rem;
        letter-spacing: 0px;
        color: var(--black)
    }

    .recommendation__body-block-item-bot-action-el svg {
        width: 14rem;
        height: 14rem
    }

    .recommendation__body-block-item:hover .recommendation__body-block-item-bot .recommendation__body-block-item-bot-text p {
        color: var(--yellow)
    }

    .recommendation__body .more {
        padding: 12rem 32rem;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        color: var(--green-dark);
        border: 1rem solid var(--green-dark);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        margin-top: 8rem
    }

    .ingredients {
        width: 100%;
        margin-top: 16rem
    }

    .ingredients__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative
    }

    .ingredients__body-filter {
        width: 100%;
        min-width: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: static;
        top: 8rem;
        max-height: -webkit-max-content;
        max-height: -moz-max-content;
        max-height: max-content
    }

    .ingredients__body-filter-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        display: none
    }

    .ingredients__body-filter-top h2 {
        color: var(--black)
    }

    .ingredients__body-filter-top button {
        color: var(--red);
        background: rgba(0, 0, 0, 0)
    }

    .ingredients__body-filter-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 16rem
    }

    .ingredients__body-filter-wrap a {
        padding: 17rem 0;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-bottom: 1rem dashed var(--green-dark)
    }

    .ingredients__body-filter-wrap a p {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .ingredients__body-filter-wrap a span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 12rem;
        line-height: 14.4rem;
        letter-spacing: 0rem
    }

    .ingredients__body-filter-wrap a span svg {
        width: 20rem;
        height: 20rem
    }

    .ingredients__body-filter-wrap a:hover p {
        color: var(--yellow)
    }

    .ingredients__body-filter-wrap a.active p {
        color: var(--yellow)
    }

    .ingredients__body-filter-rec {
        background: #fff;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        border-radius: 24rem;
        width: 100%
    }

    .ingredients__body-filter-rec span {
        color: var(--black)
    }

    .ingredients__body-filter-rec div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .ingredients__body-filter-rec div a {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        border-radius: 1000rem
    }

    .ingredients__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        position: relative
    }

    .ingredients__body-main-search .aws-search-btn {
        display: none !important;
    }

    .ingredients__body-main-search {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        position: sticky;
        top: 8rem
    }

    .ingredients__body-main-search-wrap {
        width: 295rem;
        height: 40rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        background: var(--white);
        border-radius: 1000rem;
        padding: 0 16rem;
        border: 1rem solid var(--med-grey)
    }

    .ingredients__body-main-search-wrap svg {
        width: 24rem;
        height: 24rem
    }

    .ingredients__body-main-search-wrap input {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        color: var(--black)
    }

    .ingredients__body-main-search button {
        padding: 0;
        width: 40rem;
        height: 40rem;
        color: var(--black);
        background: var(--green-dark);
        border-radius: 1000rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .ingredients__body-main-search-block {
        width: 894rem;
        position: absolute;
        top: calc(100% + 4rem);
        background: var(--white);
        border-radius: 24rem;
        padding: 0 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
        z-index: 10;
        max-height: 0;
        overflow: hidden
    }

    .ingredients__body-main-search-block button {
        padding: 4rem 12rem;
        background: var(--med-grey);
        color: var(--grey);
        border-radius: 1000rem
    }

    .ingredients__body-main-word {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 16rem
    }

    .ingredients__body-main-word a {
        width: 30rem;
        height: 24rem;
        background: var(--white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border-radius: 6rem
    }

    .ingredients__body-main-word a:nth-child(1) {
        width: 30rem
    }

    .ingredients__body-main-word a:hover {
        background: var(--yellow);
        color: var(--black)
    }

    .ingredients__body-main-word a.active {
        background: var(--yellow);
        color: var(--black)
    }

    .ingredients__body-main-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 32rem
    }

    .ingredients__body-main-wrap-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .ingredients__body-main-wrap-item span {
        color: var(--green-dark);
        font-size: 20rem;
        line-height: 22rem
    }

    .ingredients__body-main-wrap-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .ingredients__body-main-wrap-item div a {
        padding: 8rem 16rem;
        background: rgba(0, 0, 0, 0);
        border-radius: 1000rem;
        border: 1rem solid var(--yellow);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .ingredients__body-main-wrap-item div a:hover {
        background: var(--yellow)
    }

    .ingredients__body-main .load-more {
        padding: 16rem 32rem;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark);
        max-width: none;
        -ms-flex-item-align: center;
        align-self: center;
        margin-top: 16rem
    }

    .ingredients__body-main .banner {
        width: 100%;
        background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
        background: radial-gradient(74.08% 287.26% at 74.08% 55.8%, #EEC6A2 0%, #866350 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
        border-radius: 24rem;
        padding: 24rem 24rem 123rem 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        position: relative;
        overflow: hidden
    }

    .ingredients__body-main .banner img {
        position: absolute;
        right: 0rem;
        width: 100%;
        height: 100%;
        bottom: 0;
        z-index: 0
    }

    .ingredients__body-main .banner span {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .ingredients__body-main .banner p {
        color: var(--white);
        position: relative;
        z-index: 1
    }

    .ingredients__body-main .banner button {
        padding: 12rem 24rem;
        border-radius: 1000rem;
        background: var(--yellow);
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 16.6rem;
        letter-spacing: 0rem;
        text-align: center;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        position: relative;
        z-index: 1
    }

    .recipe {
        width: 100%;
        margin-top: 24rem
    }

    .recipe__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-info h1 {
        color: var(--green-dark);
        font-size: 24rem;
        line-height: 110%
    }

    .recipe__body-main-info p {
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.2rem;
        letter-spacing: 0%;
    }

    .recipe__body-main-tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 16rem
    }

    .recipe__body-main-tags-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-tags-item span {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--black)
    }

    .recipe__body-main-tags-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem
    }

    .recipe__body-main-tags-item div div {
        padding: 4rem 12rem;
        background: var(--green-dark);
        color: var(--white);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        border-radius: 1000rem
    }

    .recipe__body-main-tags-item div button {
        background: rgba(0, 0, 0, 0);
        color: var(--yellow)
    }

    .recipe__body-main-present {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
    }

    .wrap_img {
        width: 100%;
        height: 194rem;
        position: relative;
    }

    .youtube-link {
        width: 32rem;
        height: 32rem;
        box-shadow: 0px 10rem 26.3rem 0px #00000040;
    }

    .wrap_img img {
        width: 100%;
        height: inherit
    }

    .recipe__body-main-present-attr {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-present-attr-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0;
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        width: 100%
    }

    .recipe__body-main-present-attr-action-rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        background: var(--green-dark);
        border-radius: 1000rem;
        padding: 4rem 12rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0rem;
        color: var(--white)
    }

    .recipe__body-main-present-attr-action-rating svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-present-attr-action div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--grey)
    }

    .recipe__body-main-present-attr-action div img {
        width: 24rem;
        height: 24rem
    }

    .recipe__body-main-present-attr-do {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-present-attr-do a {
        padding: 0;
        width: 79.75rem;
        height: 36rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--beige-dark);
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--green-dark);
        border-radius: 1000rem
    }

    .recipe__body-main-present-attr-do a svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-present-attr-do button svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-present-attr-do button:nth-child(3) span {
        display: none
    }

    .recipe__body-main-present-attr-do a:nth-child(4) span {
        display: none
    }

    .recipe__body-main-way {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-way-method {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem;
        background: var(--white);
        border-radius: 24rem;
        padding: 16rem;
        width: 100%
    }

    .recipe__body-main-way-method span {
        color: var(--green-dark)
    }

    .recipe__body-main-way-method ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-method ol li {
        list-style: decimal;
        list-style-position: inside;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 16.8rem;
        letter-spacing: 0%;
    }

    .recipe__body-main-way-method ol li::marker {
        color: var(--yellow)
    }

    .recipe__body-main-way-ingredients {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        padding: 16rem;
        background: var(--white);
        border-radius: 24rem;
        width: 100%
    }

    .recipe__body-main-way-ingredients .title {
        color: var(--green-dark)
    }

    .recipe__body-main-way-ingredients-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-way-ingredients-block-top-size {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-way-ingredients-block-top-size div {
        background: var(--white);
        border-radius: 100rem;
        padding: 8rem 16rem;
        border: 1rem solid var(--yellow);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .recipe__body-main-way-ingredients-block-top-size div:hover {
        background: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-top-size div.active {
        background: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-top-col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        padding: 2.5rem 4rem;
        background: var(--beige);
        border-radius: 100rem
    }

    .recipe__body-main-way-ingredients-block-top-col button {
        width: 24rem;
        height: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%
    }

    .recipe__body-main-way-ingredients-block-top-col button svg {
        width: 16rem;
        height: 16rem;
        min-width: 16rem;
        min-height: 16rem
    }

    .recipe__body-main-way-ingredients-block-top-col button:nth-child(1) {
        background: var(--beige-dark)
    }

    .recipe__body-main-way-ingredients-block-top-col button:nth-child(2) {
        background: var(--med-grey)
    }

    .recipe__body-main-way-ingredients-block-top-col span {
        min-width: 34rem;
        height: 27rem;
        color: var(--black);
        text-align: center
    }

    .recipe__body-main-way-ingredients-block-table {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-table-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        gap: 8rem
    }

    .recipe__body-main-way-ingredients-block-table-item span {
        color: var(--black);
        white-space: nowrap
    }

    .recipe__body-main-way-ingredients-block-table-item .line {
        width: 100%;
        height: 1rem;
        border-bottom: 1rem dashed var(--med-grey)
    }

    .recipe__body-main-way-ingredients-block-table-item div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-way-ingredients-block-table-item div p {
        color: var(--black);
        white-space: nowrap
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox {
        position: absolute;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox-label {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 18rem
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox-view {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
        border: 1rem solid var(--med-grey);
        border-radius: 4rem;
        background: #fff;
        -webkit-transition: .3s;
        transition: .3s
    }

    .recipe__body-main-way-ingredients-block-table-item div svg {
        opacity: 0;
        -webkit-transition: .3s;
        transition: .3s
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view {
        background-color: var(--yellow)
    }

    .recipe__body-main-way-ingredients-block-table-item div .checkbox:checked+.checkbox-view svg {
        opacity: 1
    }

    .recipe__body-main-banner {
        width: 100%;
        height: 280rem;
        position: relative;
        border-radius: 24rem;
        overflow: hidden;
        padding: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-banner img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1
    }

    .recipe__body-main-banner span {
        color: var(--white)
    }

    .recipe__body-main-banner p {
        color: var(--white);
        max-width: 367rem
    }

    .recipe__body-main-banner button {
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recipe__body-main-user {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        width: 100%;
        background: var(--white);
        padding: 16rem;
        border-radius: 24rem
    }

    .recipe__body-main-user-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-user-top button {
        background: var(--beige-dark);
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        width: 100%;
        height: 58rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 100rem
    }

    .recipe__body-main-user-top button span {
        max-width: 103.5rem
    }

    .recipe__body-main-user-top button.active {
        background: var(--green-dark);
        color: var(--white)
    }

    .recipe__body-main-user-top button:hover {
        background: var(--green-dark);
        color: var(--white)
    }

    .recipe__body-main-user-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }

    .recipe__body-main-user-section-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-title span {
        color: var(--black);
        font-size: 20rem;
        line-height: 110%
    }

    .recipe__body-main-user-section-title p {
        color: var(--black)
    }

    .recipe__body-main-user-section-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-main-user-section-block-save {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-save p {
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-block-save div {
        padding: 12rem 24rem;
        border: 1rem solid var(--med-grey);
        background: rgba(0, 0, 0, 0);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        color: var(--black);
        border-radius: 100rem
    }

    .recipe__body-main-user-section-block-save div .line {
        width: 1rem;
        height: 20rem;
        background: var(--med-grey)
    }

    .recipe__body-main-user-section-block-save div svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-block-form .comment-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form .comment-form .form-submit input {
        padding: 12rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-main-user-section-block-form .comment-form textarea {
        width: 100%;
        height: 100rem;
        background: rgba(0, 0, 0, 0);
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 20rem;
        color: var(--black);
        resize: none
    }

    .recipe__body-main-user-section-block-form .comment-form input {
        width: 151.5rem;
        height: 41rem;
        background: rgba(0, 0, 0, 0);
        padding-left: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 20rem;
        color: var(--black)
    }

    .recipe__body-main-user-section-block-form-rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form-rating p:nth-child(1) {
        color: var(--grey);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-block-form-rating-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form-rating-info .line {
        width: 252rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-main-user-section-block-form-rating-info .stars span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .stars span a {
        width: 44rem;
        height: 44rem;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border: 1rem solid var(--med-grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: relative;
        background: rgba(0, 0, 0, 0)
    }

    .stars span aspan {
        position: absolute;
        color: var(--black);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .stars span a img {
        width: 24rem;
        height: 24rem;
        opacity: 0;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .stars.active {
        border-color: var(--yellow)
    }

    .stars.active img {
        opacity: 1
    }

    .stars.active span {
        opacity: 0
    }

    .wpcr3_rating_style1_score {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }


    .recipe__body-main-user-section-block-form-rating-info .col {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-main-user-section-block-form-rating-info .col span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--black);
        font-size: 20rem
    }

    .recipe__body-main-user-section-block-form-rating-info .col span svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-block-form-rating-info .col p {
        color: var(--grey)
    }

    .recipe__body-main-user-section-block-form-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .recipe__body-main-user-section-block-form-main input {
        width: 151.5rem;
        height: 41rem;
        background: rgba(0, 0, 0, 0);
        padding-left: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 24rem;
        color: var(--black)
    }

    .recipe__body-main-user-section-block-form-main textarea {
        width: 100%;
        height: 100rem;
        background: rgba(0, 0, 0, 0);
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1rem solid var(--med-grey);
        border-radius: 24rem;
        color: var(--black);
        resize: none
    }

    .recipe__body-main-user-section-block-form-main button {
        padding: 12rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
        color: var(--black);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110%;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-main-user-section-type {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-main-user-section-type .line {
        width: 100%;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-main-user-section-type h3 {
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-main-user-section-commetns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem
    }



    .recipe__body-main-user-section-commetns-item {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem;
        position: relative
    }

    .recipe__body-main-user-section-commetns-item-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .recipe__body-main-user-section-commetns-item-top .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap img {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name .text {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem;
        color: var(--green-dark)
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info .name div svg {
        width: 16rem;
        height: 16rem
    }

    .recipe__body-main-user-section-commetns-item-top .wrap .recipe__body-main-user-section-commetns-item-top-info p {
        color: var(--grey)
    }

    .recipe__body-main-user-section-commetns-item-top .marks {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-main-user-section-commetns-item-top .marks button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        background: rgba(0, 0, 0, 0)
    }

    .recipe__body-main-user-section-commetns-item-top .marks button svg {
        width: 20rem;
        height: 20rem
    }

    .recipe__body-main-user-section-commetns-item-top .marks button:nth-child(1) {
        color: var(--red)
    }

    .recipe__body-main-user-section-commetns-item-top .marks button:nth-child(2) {
        color: var(--green)
    }

    .recipe__body-main-user-section-commetns-item .comment {
        margin-top: 4rem;
        color: var(--black);
        max-width: 617rem
    }

    .recipe__body-main-user-section-commetns-item .show__more {
        color: var(--yellow);
        background: rgba(0, 0, 0, 0);
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content
    }

    .recipe__body-main-user-section-commetns-item .answer {
        margin-top: 4rem;
        width: 100%;
        padding: 16rem 24rem;
        background: var(--beige);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top img {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-main-user-section-commetns-item .answer .answer__top span {
        color: var(--green-dark);
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 110%;
        letter-spacing: 0rem
    }

    .recipe__body-main-user-section-commetns-item .answer p {
        color: var(--black)
    }

    .recipe__body-main-user-section-commetns-item .answer .date {
        color: var(--grey)
    }

    .recipe__body-main-user-section .load__more {
        width: 100%;
        height: 41rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--green-dark);
        border-radius: 100rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--green-dark)
    }

    .recipe__body-user {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem
    }

    .recipe__body-user-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24rem;
        background: var(--white);
        padding: 16rem;
        border-radius: 24rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-user-top span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-top span .line {
        width: 67rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-top img {
        width: 170rem;
        height: 150rem
    }

    .recipe__body-user-top div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .recipe__body-user-top div p {
        color: var(--black);
        text-align: center
    }

    .recipe__body-user-top div button {
        width: 100%;
        height: 41rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: var(--yellow);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center;
        color: var(--black)
    }

    .recipe__body-user-form {
        padding: 16rem;
        background: var(--white);
        border-radius: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16rem
    }

    .recipe__body-user-form span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-form span .line {
        width: 89.5rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-form p {
        color: var(--black);
        text-align: center
    }

    .recipe__body-user-form div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem
    }

    .recipe__body-user-form div input {
        width: 220rem;
        height: 41rem;
        background: rgba(0, 0, 0, 0);
        border: 1rem solid var(--med-grey);
        border-radius: 1000rem;
        color: var(--black);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 16rem
    }

    .recipe__body-user-form div button {
        width: 83rem;
        height: 41rem;
        background: var(--yellow);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: var(--black);
        border-radius: 1000rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        text-align: center
    }

    .recipe__body-user-share {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 9rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
        border-radius: 24rem;
        background: var(--white);
        position: fixed;
        right: 0;
        top: 277rem;
        background: rgba(0, 0, 0, 0);
        z-index: 10
    }

    .recipe__body-user-share span {
        display: none !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8rem;
        width: 100%;
        color: var(--green-dark);
        white-space: nowrap
    }

    .recipe__body-user-share span .line {
        width: 79.5rem;
        height: 1rem;
        background: var(--med-grey)
    }

    .recipe__body-user-share div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4rem
    }

    .recipe__body-user-share div a {
        width: 40rem;
        height: 40rem
    }

    .recipe__body-user-share div a img {
        width: 100%;
        height: 100%
    }
}