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

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



/*404*/

.error__page{
    width: 100%;
    padding-top: 76px;
}
.error__page-body{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.error__page-body img{
    width: 696px;
    height: 490px;
}
.error__page-body .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.error__page-body .text 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;
    color: #1e1e1e;
}
.error__page-body .text .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.error__page-body .text .wrap h1{
    color: #1e1e1e;
}
.error__page-body .text .wrap p{
    color: #878787;
}




/*Books Modal*/

.modal__books{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: #1D1D1B50;
    backdrop-filter: blur(5px);
    display: none;
}
.modal__books-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.books__body{
    padding: 24px 32px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    position: relative;
    border-radius: 24px;
    background: var(--white);
}
.modal__books-close{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 48px;
    right: 48px;
    z-index: 101;
}
.modal__books-close svg{
    width: 24px;
    height: 24px;
}
.books__body h3{
    color: var(--green-dark);
}
.books-iframe iframe{
    width: 800px;
    height: 400px;
}


.recipe__body-main-user-section-commetns .children {
    display: none !important;
}
.wpc-filters-main-wrap li.wpc-term-item label{
    padding-left: 0 !important;
}
.wpc-filters-ul-list li {
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0rem;
    text-align: center;
}
/**/
.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;
}
.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: 1001;
    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 , .guide__body button{
    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: 1312px;
    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;
    align-items: center;
}
.develop__body h1{
    text-transform: uppercase;
    color: var(--black);
}
.develop__body a{
    padding: 16px 32px;
    background: var(--yellow);
    color: var(--black);
    border-radius: 1000px;
    max-width: max-content;
}

.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;
}
.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:disabled{
    opacity: 0.5;
}

.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;
    background: var(--white);
    border-radius: 1000px;
    padding: 0 16px;
    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;
    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: 127px;
    height: 36px
}

.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-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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    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, .cl_club-body-text button{
    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;
    cursor: pointer;
}
.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, .cl_banner-body-info button{
    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 , .plans__body-block-item button{
    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);
    width: 100%;
}
.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: var(--green-dark)
}

.main {
    position: relative
}
.club .main__body{
    padding: 48px 0 335px 0;
}
.main__body {
    display: flex;
    flex-direction: column;
    padding: 85px 0 335px 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: 714px;
    width: 966px;
    position: absolute;
    bottom: 70px;
    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(--beige-dark)
}

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

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

.header-soft .header__body-action a,  .header-soft .header__body-action .auth-button{
    background: var(--beige-dark) !important
}

.header-soft .header__body-action a svg path ,  .header-soft .header__body-action .auth-button 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{
    background: var(--white-so) !important;
    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: 1;
}

.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(--grey)
}

.header__body-logo {
    width: 240px;
    height: 36px
}

.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-so);
    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{
    background: var(--white-so) !important;
    padding: 0 !important;
    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-top button:disabled{
    opacity: 0.5;
}
.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: center;
    gap: 24px
}

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

.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: 242px
}

.attribute__body-wrap-item .circle {
    width: 48px;
    height: 48px;
    background: var(--green-dark);
    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
}

.attribute__body-wrap-item .circle img {
    width: 24px;
    height: 24px
}

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

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

.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: 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;
    position: relative;
    z-index: 0;
}

.program__body-wrap-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;
    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: 40px 40px 64px 40px;
    background: var(--green-dark);
    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: 385px;
}

.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: 16px;
    position: relative;
    z-index: 1
}

.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: 644px;
    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
}

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

.try__body-ingredients-btn {
    color: var(--yellow);
    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
}

.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: 421px;
    height: 350px;
    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
}

.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: center;
    align-items: center;
}
.program__body-wrap-item-top-attr{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.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: auto;
    left: auto;
    scale: 0.87;
}

.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;
    height: 100%;
    justify-content: flex-end;
}

.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.1;
}
.blog__body-news-block .daily__body-wrap-item .daily__body-wrap-item-top img{
    scale: 0.5;
}
.daily__body-wrap-item.splide__slide .daily__body-wrap-item-top img{
    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: "Adieu";
    --rubik: "Rubik";
    --black: #1D1D1B;
    --grey: #878787;
    --med-grey: #E9E8E8;
    --white: #FFFFFF;
    --white-so: #FFFFFF26;
    --yellow: #F9C000;
    --yellow-dark: #E5A71A;
    --green-dark: #14463A;
    --beige: #FFF6F0;
    --beige-dark: #F5DAC7;
    --blue: #3B6FE7;
    --green: #15CF74;
    --red: #C14965;
    --red-dark: #9A3A51
}

.h1 {
    font-family: var(--adieu);
    font-weight: 400;
    font-size: 56px;
    line-height: 61.6px;
    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-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%
}

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

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

:focus, :active {
    outline: 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
}

@media (max-width: 1920px) {
    html {
        font-size: .0694444444vw
    }

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


    .error__page-body{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .error__page-body img{
        width: 696rem;
        height: 490rem;
    }
    .error__page-body .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32rem;
    }
    .error__page-body .text 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;
        color: #1e1e1e;
    }
    .error__page-body .text .wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }
    .error__page-body .text .wrap h1{
        color: #1e1e1e;
    }
    .error__page-body .text .wrap p{
        color: #878787;
    }


    .modal__books{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        background: #1D1D1B50;
        backdrop-filter: blur(5rem);
        display: none;
    }
    .modal__books-wrap{
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .books__body{
        padding: 24rem 32rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 24rem;
        position: relative;
        border-radius: 24rem;
        background: var(--white);
    }
    .modal__books-close{
        width: 48rem;
        height: 48rem;
        border-radius: 50%;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 48rem;
        right: 48rem;
    }
    .modal__books-close svg{
        width: 24rem;
        height: 24rem;
    }
    .books__body h3{
        color: var(--green-dark);
    }
    .books-iframe iframe{
        width: 800rem;
        height: 400rem;
    }


    .comment-list .blog-comment-item:not(:last-child){
        padding-bottom: 24rem;
        border-bottom: 1rem solid var(--med-grey);
    }
    .wpc-filters-ul-list li {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
    }
    .comment-list{
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }
    .container {
        max-width: 1312rem;
        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: "Adieu";
         --rubik: "Rubik";
         --black: #1D1D1B;
         --grey: #878787;
         --med-grey: #E9E8E8;
         --white: #FFFFFF;
         --white-so: #FFFFFF26;
         --yellow: #F9C000;
         --yellow-dark: #E5A71A;
         --green-dark: #14463A;
         --beige: #FFF6F0;
         --beige-dark: #F5DAC7;
         --blue: #3B6FE7;
         --green: #15CF74;
         --red: #C14965;
         --red-dark: #9A3A51
     }

    .h1 {
        font-family: var(--adieu);
        font-weight: 400;
        font-size: 56rem;
        line-height: 61.6rem;
        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: 1001;
        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, .guide__body button{
        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: 127rem;
        height: 36rem
    }

    .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 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, .cl_club-body-text button{
        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, .cl_banner-body-info button{
        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 , .plans__body-block-item button{
        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: 400rem;
    }
    .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: 192rem;
    }
    .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: var(--green-dark)
    }

    .main {
        position: relative
    }
    .club .main__body{
        padding: 48rem 0 335rem 0;
    }
    .main__body {
        padding: 85rem 0 335rem 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: 714rem;
        width: 966rem;
        position: absolute;
        bottom: 70rem;
        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(--grey)
    }

    .header__body-logo {
        width: 240rem;
        height: 36rem
    }

    .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-so);
        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{
        background: var(--white-so) !important;
        padding: 0 !important;
        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: center;
        gap: 24rem
    }

    .attribute__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 40rem
    }

    .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: 8rem;
        width: 242rem
    }

    .attribute__body-wrap-item .circle {
        width: 48rem;
        height: 48rem;
        background: var(--green-dark);
        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
    }

    .attribute__body-wrap-item .circle img {
        width: 24rem;
        height: 24rem
    }

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

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

    .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: 310rem;
        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: 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;
    }

    .program__body-wrap-item-top img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0
    }
    .popular__body-block-item .program__body-wrap-item-top-attr{
        width: 100%;
        align-items: flex-start;
    }
    .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: 40rem 40rem 64rem 40rem;
        background: var(--green-dark);
        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: 385rem;
    }

    .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
    }

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

    .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: 644rem;
        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
    }

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

    .try__body-ingredients-btn {
        color: var(--yellow);
        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
    }

    .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: 421rem;
        height: 350rem;
        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: center;
    }

    .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: auto;
    }

    .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;
        height: 100%;
        justify-content: flex-end;
    }

    .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);
    }
    .develop__body a{
        padding: 16rem 32rem;
        background: var(--yellow);
        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: 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);
        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;
        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 .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
    }



    .error__page-body{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .error__page-body img{
        width: 348rem;
        height: 245rem;
    }
    .error__page-body .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }
    .error__page-body .text a{
        padding: 16rem 32rem;
        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;
        color: #1e1e1e;
    }
    .error__page-body .text .wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }
    .error__page-body .text .wrap h1{
        font-size: 24rem;
        line-height: 28rem;
        color: #1e1e1e;
    }
    .error__page-body .text .wrap p{
        color: #878787;
    }



    .modal__books{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        background: #1D1D1B50;
        backdrop-filter: blur(5rem);
        display: none;
    }
    .modal__books-wrap{
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .books__body{
        padding: 24rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16rem;
        position: relative;
        border-radius: 24rem;
        background: var(--white);
    }
    .modal__books-close{
        width: 32rem;
        height: 32rem;
        border-radius: 50%;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 24rem;
        right: 24rem;
    }
    .modal__books-close svg{
        width: 24rem;
        height: 24rem;
    }
    .books__body h3{
        color: var(--green-dark);
    }
    .books-iframe iframe{
        width: 320rem;
        height: 160rem;
    }


    .comment-list .blog-comment-item:not(:last-child){
        padding-bottom: 16rem;
        border-bottom: 1rem solid var(--med-grey);
    }
    .wpc-filters-ul-list li {
        font-family: var(--rubik);
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0rem;
        text-align: center;
    }
    .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: 1001;
        top: 0;
        left: 0;
    }
    .auth_wrap{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .auth_wrap-close{
        position: absolute;
        top: 24rem;
        right: 24rem;
        background: var(--yellow);
        border-radius: 50%;
        width: 32rem;
        height: 32rem;
        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;
        scale: 0.7;
    }
    .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, .guide__body button{
        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: -156.75deg;
        margin-top: -28rem;
        margin-left: 39rem;
    }
    .modal__wheel-block-items-item:nth-child(2) a{
        rotate: -139.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: -125deg;
        margin-top: -130rem;
        margin-left: 22rem;
    }
    .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: -110deg;
        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: -95.6deg;
        margin-top: -153rem;
        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, .cl_club-body-text button{
        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 , .plans__body-block-item button{
        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, .cl_banner-body-info button{
        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: var(--green-dark)
    }

    .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: 374rem;
        width: 343rem;
        position: absolute;
        bottom: 54rem;
        right: 0rem
    }
    .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;
        top: 56rem;
        background: var(--beige);
        height: calc(100vh - 56rem);
        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(--grey)
    }

    .header__body-logo {
        width: 127rem;
        height: 36rem;
        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-so);
        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{
        background: var(--white-so) !important;
        padding: 0 !important;
        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: 127rem;
        height: 36rem
    }

    .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);
        font-size: 18rem;
        line-height: 22rem;
    }

    .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;
        row-gap: 24rem;
        -webkit-column-gap: 16rem;
        -moz-column-gap: 16rem;
        column-gap: 16rem
    }

    .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
    }

    .attribute__body-wrap-item .circle {
        width: 48rem;
        height: 48rem;
        background: var(--green-dark);
        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
    }

    .attribute__body-wrap-item .circle img {
        width: 24rem;
        height: 24rem
    }

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

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

    .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: 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;
        background: var(--white);
        border-radius: 50%
    }

    .heart-wrap{
        width: 18rem;
        height: 18rem;
        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: var(--green-dark);
        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
    }

    .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
    }

    .try__body-ingredients-wrap a {
        padding: 8rem 16rem;
        border-radius: 1000rem;
        background: var(--white);
        border: 1rem solid var(--yellow)
    }

    .try__body-ingredients-btn {
        color: var(--yellow);
        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
    }

    .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 , .tabs button {
        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;
        background: transparent
    }

    .tabs a svg , .tabs button svg{
        width: 24rem;
        height: 24rem;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .tabs a span , .tabs button span{
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .tabs a.active svg path, .tabs button.active svg path {
        stroke: var(--yellow);
        fill: var(--yellow)
    }

    .tabs a.active span , .tabs button.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;
    }
    .develop__body a{
        padding: 16rem 32rem;
        background: var(--yellow);
        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-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%
    }
}

.hidden-item {
    display: none !important;
}
.hidden-item.show{
    display: block !important;
}