* {
    padding: 0;
    margin: 0;
    border: 0
}
/*.recipe__body-main-user-section-commetns:last-child .recipe__body-main-user-section-commetns-item{*/
/*    border-bottom: none;*/
/*    padding-bottom: 0 !important;*/
/*}*/
.fixed{
    position: fixed !important;
    background: var(--beige);
    top: 0;
    left: 0;
}
.header-main.fixed .first{
    display: none !important;
}
.header-main.fixed .second{
    display: flex !important;
}
.header__body-action a:hover svg path{
    stroke: var(--yellow);
}
.product-item:hover .woocommerce-loop-product__title{
    color: var(--yellow) !important;
}
.product-item:hover img{
    scale: 1.1;
}
#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 !important;
}
.recipe__body-main-user-section-commetns .children{
    display: none !important;
}
.aws-container{
    max-width: max-content !important;
}
.aws_result_title{
    font-family: var(--rubik);
}
.aws_result_excerpt{
    font-family: var(--rubik);
}
#reply-title{
    display: none;
}
/*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(../../cocktails/images/dist/face/1.svg) no-repeat center;
        background-size: 0% 0%;
}.stars span a:nth-child(2)::before{
    content: '2' !important;
    background: url(../../cocktails/images/dist/face/2.svg) no-repeat center;
        background-size: 0% 0%;
}.stars span a:nth-child(3)::before{
    content: '3' !important;
    background: url(../../cocktails/images/dist/face/3.svg) no-repeat center;
        background-size: 0% 0%;
}.stars span a:nth-child(4)::before{
    content: '4' !important;
    background: url(../../cocktails/images/dist/face/4.svg) no-repeat center ;
        background-size: 0% 0%;
}.stars span a:nth-child(5)::before{
    content: '5' !important;
    background: url(../../cocktails/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*/




.wpcr3_respond_2{
    display: block !important;
}
.glsr-field[data-field="title"] {
    display: none !important;
}
.container-ratio{
    width: 100%;
}
.lotos-likes.active svg path{
    fill: var(--green-dark);
    stroke: var(--green-dark);
}
.glsr-field-choice{
    display: none !important;
}
div.wpcr3_rating_style1_score{
    background: transparent;
    width: auto;
    overflow: visible;
    height: auto;
    display: flex;
    align-items: center;
}
.glsr-field-rating{
    width: 100%;
}
.glsr-field-textarea{
    width: 100%;
}
.glsr-field-textarea textarea{
    resize: none !important;
}
.wpcr3_respond_3{
    display: none;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

:focus, :active {
    outline: none
}
.pvc_stats{
    padding: 0 !important;
}
body .pvc_stats .pvc-stats-icon{
    display: none;
}
a:focus, a:active {
    outline: none
}

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

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

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

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

button {
    cursor: pointer
}

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

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

a:hover {
    text-decoration: none
}

ul li {
    list-style: none
}

img {
    vertical-align: top
}

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

a {
    color: inherit
}

html {
    scroll-behavior: smooth
}

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

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

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

.hidden {
    overflow: hidden
}

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

.mob {
    display: none !important
}

.none {
    display: none !important
}
.comments{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.errors__page{
    width: 100%;
    margin-top: 23px;
}
.errors__page-body{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.errors__page-body img{
    width: 773px;
    height: 502px;
}
.errors__page-body h1{
    color: var(--black);
    margin-top: -70px;
}
.errors__page-body p{
    color: var(--black);
    margin-top: 8px;
}
.errors__page-body a{
    padding: 16px 32px;
    background: var(--yellow);
    border-radius: 100px;
    color: var(--black);
    margin-top: 32px;
}
.develop{
    width: 100%;
    margin-top: 60px;

}
.develop__body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.develop__body.central{
    align-items: center !important;
    gap: 48px;
}
.develop__body h1{
    text-transform: uppercase;
    color: var(--black);
}
.develop__body .back{
    padding: 12px 24px;
    background: var(--yellow);
    border-radius: 100px;
}
.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: 16px;
}
.filter__modal-buttons a, .filter__modal-buttons button{
    width: 350px;
    height: 39px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 14px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;

}
.filter__modal-buttons a{
    background: var(--white);
    border: 1px solid #0784BA;
    color: var(--black);
}
.filter__modal-buttons button{
    background: #0784BA;
    color: var(--white);
}

.filter__modal-close svg path{
    stroke: var(--red);
}
.filter__modal-wrap.active{
    scale: 1;
}
.filter__modal-wrap{
    width: 100%;
    height: 100vh;
    background: #00000030;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0;
    transition: all 0.5s ease;
    z-index: 100;
    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 32px 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;
}

.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;
    border: 1px solid #E9E8E8;
}
.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(--black);
}
.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: var(--med-grey);
    transition: all 0.3s ease;

    color: var(--black);
    max-width: max-content;
    border-radius: 1000px;
    margin-bottom: 0 !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(--black);
    white-space: nowrap;
    text-transform: capitalize;
}

.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 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-wrap{
    background: var(--green-dark);
    padding: 24px 16px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 27px;
}
.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(--white)
}

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

.catalog__body-filter-top a:hover {
    color: var(--red)
}

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

.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: 16px;
    padding-bottom: 0px;
    /*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(--white)
}

.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.hidden-category{
    display: none;
}
.catalog__body-filter-block-category-item div a.hidden-category.show{
    display: block;
}
.catalog__body-filter-block-category-item div .open__category{
    color: var(--white);
    background: transparent;
}
.catalog__body-filter-block-category-item div a {
    padding: 8px 16px;
    background: transparent;
    color: var(--white);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid var(--white);
    border-radius: 1000px
}

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

.catalog__body-filter-block-category-item div a:hover {
    background: var(--yellow);
    color: var(--black);
    border-color: var(--yellow);
}
.banner__filter{
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--green-dark);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    position: relative;
    padding-bottom: 78px;
}
.banner__filter-img{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 187px;
    height: 170px;
}
.banner__filter a{
    width: 90px;
    height: 26px;
}
.banner__filter a img{
    width: 100%;
    height: 100%;
}
.banner__filter h3{
    font-family: var(--adieu);
    font-weight: 700;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0px;
    color: var(--black);
}
.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(--white)
}

.catalog__body-filter-block-advanced span svg {
    width: 24px;
    height: 24px
}
.catalog__body-filter-block-advanced span svg path{
    stroke: var(--white);
}

.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: 8px;
    background: transparent;
    padding: 0px;
    border-radius: 0px
}

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

.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(--white);
    border-radius: 1000px;
    color: var(--black);
    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: 20px;
    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 .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: 282px;
    background: var(--green-dark);
    border-radius: 20px;
    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: 282px;
    min-height: 282px;
    position: relative;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

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

.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;
    padding: 0 16px 16px 16px;
    height: 100%;
    justify-content: space-between;
}

.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(--white) !important;
    -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(--white)
}

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

.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);
    max-width: 333px;
}
.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: 36px 120px 29px 120px
}
.footer__body-main-social{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--white);
}
.footer__body-main-social-yo{
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--white);
}
.footer__body-main-social-yo svg{
    width: 24px;
    height: 24px;
}
.footer__body-main-social-more{
    display: flex;
    align-items: flex-end;
    gap: 36px;
}
.footer__body-main-social-more-download{
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer__body-main-social-more-download a{
    width: 90px;
    height: 26px;
}
.footer__body-main-social-more-download a img{
    width: 100%;
    height: 100%;
}
.footer__body-main-social-more-email{
    color: var(--white);
    text-decoration: underline;
}
.footer__body-main-social-more p{
    color: var(--white);
}
.footer__body-main-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    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: 33px
}

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

.footer__body-main-start-left-logo .logo {
    width: 50px;
    height: 50px
}

.footer__body-main-start-left-logo .logo 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);
    border-radius: 1000px;
    padding-left: 16px;
    color: var(--black)
}

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

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

.footer__body-main-end p {
    color: var(--white)
}

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

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

.main__wrap {
    position: relative;
}
.main__wrap .grad{
    background: #00000040;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.wrap__img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.main {
    position: relative
}

.main__body {
    padding: 70px 0 72px 0px
}

.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;
    font-family: var(--abieu);
    font-weight: 800;
    font-size: 96px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-transform: uppercase;

}

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

.main .main__text-search .aws-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-wrapper {
    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;
    position: relative;
    overflow: hidden;
}
.main .main__text-search .aws-wrapper input{
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0px;
    color: var(--black);
    width: 100%;
    height: 100%;
}

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

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

.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__img {
    height: 714px;
    width: 966px;
    position: absolute;
    bottom: 70px;
    right: 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 {
    background: var(--beige-dark)
}

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

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

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

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

.header {
    width: 100%;
    position: relative;
    z-index: 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: 16px 0;
    border-bottom: 1px solid var(--grey)
}

.header__body-logo {
    width: 145px;
    height: 50px
}

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

.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{
    
}
.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: 20px;
    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;
    text-transform: lowercase;
}

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

.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 button svg {
    width: 24px;
    height: 24px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.ingredients__body-filter-rec {
    background: var(--green-dark);
    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: 20px;
    width: 100%
}

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

.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(--white);
    color: var(--black);
    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: 20px;
    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: 20px;
    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;
    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: 282px
}

.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;
    max-width: 700px;
}

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

.program__body-wrap-item {
    width: 282px;
    background: var(--green-dark);
    border-radius: 20px;
    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: 282px;
    position: relative;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    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;
    width: 100%;
    height: 100%;
    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: 600;
    font-size: 16px;
    line-height: 17.6px;
    letter-spacing: 0px;
    color: var(--white);
    -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 span{
    color: var(--white);
}
.program__body-wrap-item-bot-action-el svg {
    width: 24px;
    height: 24px;
}
.program__body-wrap-item-bot-action-el:nth-child(1) svg path{
    stroke: var(--white);
}
.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: 20px;
    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: 384px;
    height: 320px;
    position: relative;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    border-radius: 20px;
    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: 20px;
    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;
    min-width: 40px;
    min-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 .program__body-wrap-item{
    background: var(--white) !important;
}
.popular__body-block .program__body-wrap-item p{
    color: var(--black);
}
.popular__body-block .program__body-wrap-item span{
    color: var(--black);
}
.popular__body-block .program__body-wrap-item-top{
    border-radius: 20px;
}
.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: 20px;
    overflow: hidden;
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.daily__body-wrap-item {
    width: 310px;
    height: 301px;
    background: var(--white);
    border-radius: 20px;
    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: 20px;
    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: 20px;
    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 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
}
.mix{
    width: 100%;
    margin-top: 120px;
}
.mix__body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.mix__body-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.mix__body-top h2{
    color: var(--green-dark);
    text-transform: uppercase;
}

.mix__body-block{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.mix__body-block-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mix__body-block-wrap a{
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--med-grey);
    transition: all 0.3s ease;
}
.mix__body-block-wrap a:hover{
    background: var(--yellow);
}
.mix__body-block-link{
    padding: 16px 24px;
    background: var(--yellow);
    border-radius: 100px;
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -2%;

}
@font-face {
    font-family: "Adieu";
    src: url(../fonts/adieu.woff)
}

:root {
    --adieu: "Playfair Display";
    --rubik: "Inter";
    --black: #1D1D1B;
    --grey: #878787;
    --med-grey: #E9E8E8;
    --white: #FFFFFF;
    --white-so: #FFFFFF26;
    --yellow: #FFEF00;
    --yellow-dark: #E5A71A;
    --green-dark: #0784BA;
    --beige: #FFFFFF;
    --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: 700;
    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: 700;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0px
}

.h4-medium {
    font-family: var(--rubik);
    font-weight: 500;
    font-size: 18px;
    line-height: 110%;
    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: 20px;
    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: 20px;
    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;
}
.recipe__body-main-present .wrap_img{
    width: 100%;
    height: 448px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.youtube-link{
    position: absolute;
    width: 64px;
    height: 64px;
}
.recipe__body-main-present 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:has(.simplefavorite-button.active) svg path{
    fill: var(--red);
    stroke: var(--red);
}
.recipe__body-main-present-attr-do a:has(.simplefavorite-button.active) span{
    color: var(--red);
}

.recipe__body-main-present-attr-do a {
    padding: 8px 16px;
    background: var(--med-grey);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    color: var(--black);
    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: 20px;
    padding: 24px 32px;
    width: 384px
}

.recipe__body-main-way-method span {
    color: var(--black)
}

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

.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: 20px;
    width: 384px
}

.recipe__body-main-way-ingredients .title {
    color: var(--black)
}

.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 solid var(--black)
}

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

.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: 20px;
    overflow: hidden;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid var(--green-dark);
}
.recipe__body-main-banner-buttons{
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.recipe__body-main-banner-buttons a img{
    width: 100%;
    height: 100%;
}

.recipe__body-main-banner-buttons a svg{
    width: 151px;
    height: 44px;
}
.recipe__body-main-banner span {
    color: var(--black);
    max-width: 367px;
    font-weight: 700;
}

.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-direction: row;
    gap: 8px
}

.recipe__body-main-user-section-block-form .comment-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;
    order: -1;
    width: 100%;
}

.recipe__body-main-user-section-block-form .comment-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)
}

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

/*.stars:hover {*/
/*    border-color: var(--yellow)*/
/*}*/

/*.stars:hover img {*/
/*    opacity: 1*/
/*}*/

/*.stars:hover span {*/
/*    opacity: 0*/
/*}*/

.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 .comment-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.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 {
    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:hover {
    border-color: var(--yellow)
}

.recipe__body-main-user-section-block-form .comment-form textarea:hover {
    border-color: var(--yellow)
}

.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-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:not(:last-child) {
    border-bottom: 1px solid var(--med-grey);
    padding-bottom: 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-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: 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 {
    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 .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(--med-grey);
    border-radius: 20px;
    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;
    border-radius: 50%;
}

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

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

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

    @font-face {
        font-family: "Adieu";
        src: url(../fonts/adieu.woff)
    }:root {
             --adieu: "Playfair Display";
             --rubik: "Inter";
         --black: #1D1D1B;
         --grey: #878787;
         --med-grey: #E9E8E8;
         --white: #FFFFFF;
         --white-so: #FFFFFF26;
         --yellow: #FFEF00;
         --yellow-dark: #E5A71A;
         --green-dark: #0784BA;
         --beige: #FFFFFF;
         --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: 700;
        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: 700;
        font-size: 24rem;
        line-height: 26.4rem;
        letter-spacing: 0rem
    }

    .h4-medium {
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 18rem;
        line-height: 110%;
        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)
    }

    .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: 36rem 120rem 29rem 120rem
    }
    .footer__body-main-social{
        display: flex;
        flex-direction: column;
        gap: 16rem;
        padding-bottom: 18rem;
        border-bottom: 1px solid var(--white);
    }
    .footer__body-main-social-yo{
        display: flex;
        align-items: center;
        gap: 16rem;
        color: var(--white);
    }
    .footer__body-main-social-yo svg{
        width: 24rem;
        height: 24rem;
    }
    .footer__body-main-social-more{
        display: flex;
        align-items: flex-end;
        gap: 36rem;
    }
    .footer__body-main-social-more-download{
        display: flex;
        align-items: center;
        gap: 8rem;
    }
    .footer__body-main-social-more-download a{
        width: 90rem;
        height: 26rem;
    }
    .footer__body-main-social-more-download a img{
        width: 100%;
        height: 100%;
    }
    .footer__body-main-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        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: 33rem
    }

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

    .footer__body-main-start-left-logo .logo {
        width: 50rem;
        height: 50rem
    }

    .footer__body-main-start-left-logo .logo 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);
        border-radius: 1000rem;
        padding-left: 16rem;
        color: var(--black)
    }

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

    .footer__body-main-end p {
        color: var(--white)
    }

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

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

    .main__wrap {
    }

    .main {
        position: relative
    }

    .main__body {
        padding: 70rem 0 72rem 0rem
    }

    .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;
        font-family: var(--abieu);
        font-weight: 800;
        font-size: 96rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0%;
        text-transform: uppercase;
    }

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

    .main .main__text-search .aws-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-wrapper {
        width: 350rem;
        height: 49rem;
        border-radius: 100rem;
        background: var(--white);
        border: 1rem solid var(--med-grey);
        padding-left: 16rem;
    }
    .main .main__text-search .aws-wrapper input{
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
    }
    .main .main__text-search input:placeholder {
        color: var(--grey)
    }

    .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__img {
        height: 714rem;
        width: 966rem;
        position: absolute;
        bottom: 70rem;
        right: 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: 145rem;
        height: 50rem
    }

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

    .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 button svg {
        width: 24rem;
        height: 24rem
    }
    .header-soft li a{
        color: var(--black);
    }
    .header__body-action button:hover {
        color: var(--black)
    }

    .attribute {
        padding-top: 80rem;
        width: 100%
    }

    .attribute__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        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: 282rem
    }

    .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);
        max-width: 700rem;
    }

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

    .program__body-wrap-item {
        width: 282rem;
        background: var(--green-dark);
        border-radius: 20rem;
        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: 282rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-end;
        border-top-left-radius: 20rem;
        border-top-right-radius: 20rem;
    }

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

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

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


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

    .heart-wrap{
        width: 24rem;
        height: 24rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .heart-wrap img{
        position: absolute !important;
        transition: all 0.3s ease;
        width: 100%;
        height: 100%;
    }
    .heart-wrap img:nth-child(1){
        opacity: 1;
    }
    .heart-wrap img:nth-child(2){
        opacity: 0;
    }
    .simplefavorite-button.active + div img:nth-child(1){
        opacity: 0;
    }
    .simplefavorite-button.active + div img:nth-child(2){
        opacity: 1;
    }
    .like-btn:hover .heart-wrap img:nth-child(1){
        opacity: 0;
    }
    .like-btn:hover .heart-wrap img:nth-child(2){
        opacity: 1;
    }
    .program__body-wrap-item-top-like .simplefavorite-button{
        position: absolute;
        width: 100%;
        height: 100%;
        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: 600;
        font-size: 16rem;
        line-height: 17.6rem;
        letter-spacing: 0rem;
        color: var(--white);
        -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: 20rem;
        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: 384rem;
        height: 320rem;
        position: relative;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        border-radius: 20rem;
        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: 20rem;
        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;
        min-width: 40rem;
        min-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 .program__body-wrap-item-top{
        border-radius: 20rem;
    }
    .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: 20rem;
        overflow: hidden;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        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: 0
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .daily__body-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }

    .daily__body-wrap-item {
        width: 310rem;
        height: 301rem;
        background: var(--white);
        border-radius: 20rem;
        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: 20rem;
    }

    .daily__body-wrap-item-top img {
        width: auto;
        height: auto;
        position: absolute;
        z-index: 0;
        border-radius: 20rem;
    }

    .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 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
    }
    .mix{
        width: 100%;
        margin-top: 120rem;
    }
    .mix__body{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40rem;
    }
    .mix__body-top{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }
    .mix__body-top h2{
        color: var(--green-dark);
        text-transform: uppercase;
    }

    .mix__body-block{
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 24rem;
    }
    .mix__body-block-wrap{
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }
    .mix__body-block-wrap a{
        padding: 8rem 16rem;
        border-radius: 100px;
        background: var(--med-grey);
        transition: all 0.3s ease;
    }
    .mix__body-block-wrap a:hover{
        background: var(--yellow);
    }
    .mix__body-block-link{
        padding: 16rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 100%;
        letter-spacing: -2%;

    }
    .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);
    }
    .errors__page{
        width: 100%;
        margin-top: 23rem;
    }
    .errors__page-body{
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
    }
    .errors__page-body img{
        width: 773rem;
        height: 502rem;
    }
    .errors__page-body h1{
        color: var(--black);
        margin-top: -70rem;
    }
    .errors__page-body p{
        color: var(--black);
        margin-top: 8rem;
    }
    .errors__page-body a{
        padding: 16rem 32rem;
        background: var(--yellow);
        border-radius: 100px;
        color: var(--black);
        margin-top: 32rem;
    }
    .develop{
        width: 100%;
        margin-top: 60rem;

    }
    .develop__body{
        display: flex;
        flex-direction: column;
        gap: 12rem;
    }
    .develop__body.central{
        align-items: center !important;
        gap: 48rem;
    }
    .develop__body h1{
        text-transform: uppercase;
        color: var(--black);
    }
    .develop__body .back{
        padding: 12rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
    }
    .filter__modal{
        background: var(--beige);
        padding: 16rem 32rem 32rem 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: 16rem;
    }
    .filter__modal-buttons a, .filter__modal-buttons button{
        width: 350rem;
        height: 39rem;
        border-radius: 100rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 14rem;
        line-height: 110.00000000000001%;
        letter-spacing: 0px;
        text-align: center;

    }
    .filter__modal-buttons a{
        background: var(--white);
        border: 1rem solid #0784BA;
        color: var(--black);
    }
    .filter__modal-buttons button{
        background: #0784BA;
        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;
        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;
        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: 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;
        background: var(--med-grey);
        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: 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
    }
    .comments{
        display: flex;
        flex-direction: column;
        gap: 24rem;
    }
    .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(--black)
    }

    .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;
        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-wrap{
        background: var(--green-dark);
        padding: 24rem 16rem;
        border-radius: 20rem;
        display: flex;
        flex-direction: column;
        gap: 27rem;
    }
    .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(--white)
    }

    .catalog__body-filter-top a {
        color: var(--white);
        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: 24rem
    }

    .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: 16rem;
        padding-bottom: 0rem;
        /*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(--white)
    }

    .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: transparent;
        color: var(--white);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border: 1rem solid var(--white);
        border-radius: 1000rem
    }

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

    .catalog__body-filter-block-category-item div a:hover {
        background: var(--yellow);
        color: var(--black);
    }
    .banner__filter{
        width: 100%;
        border-radius: 20rem;
        border: 1rem solid var(--green-dark);
        display: flex;
        flex-direction: column;
        gap: 16rem;
        padding: 16rem;
        position: relative;
        padding-bottom: 78rem;
    }
    .banner__filter-img{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 187rem;
        height: 170rem;
    }
    .banner__filter a{
        width: 90rem;
        height: 26rem;
    }
    .banner__filter a img{
        width: 100%;
        height: 100%;
    }
    .banner__filter h3{
        font-family: var(--adieu);
        font-weight: 700;
        font-size: 20rem;
        line-height: 110%;
        letter-spacing: 0px;
        color: var(--black);
    }
    .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(--white);
        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: 8rem;
        background: transparent;
        padding: 0rem;
        border-radius: 0rem
    }

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

    .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(--white);
        border-radius: 1000rem;
        color: var(--black);
        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: 20rem;
        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 .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)
    }

    /*.aws-search-form .aws-search-btn {*/
    /*    padding: 4rem 12rem;*/
    /*    background: var(--med-grey);*/
    /*    color: var(--grey);*/
    /*    border-radius: 1000rem*/
    /*}*/

    .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(--green-dark);
        border-radius: 20rem;
        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: 282rem;
        min-height: 282rem;
        position: relative;
        padding: 12rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-end;
        border-top-left-radius: 20rem;
        border-top-right-radius: 20rem;
    }

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

    .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)
    }
    .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);
        max-width: 333rem;
    }
    .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: 20rem;
        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: var(--green-dark);
        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: 20rem;
        width: 100%
    }

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

    .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(--white);
        color: var(--black);
        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: 20rem;
        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: 20rem;
        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: 20rem;
        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;
    }
    .recipe__body-main-present .wrap_img{
        width: 100%;
        height: 448rem;
        position: relative;
        border-radius: 20rem;
    }
    .youtube-link{
        position: absolute;
        width: 64rem;
        height: 64rem;
    }
    .recipe__body-main-present 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(--med-grey);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 4rem;
        color: var(--black);
        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: 20rem;
        padding: 24rem 32rem;
        width: 384rem
    }

    .recipe__body-main-way-method span {
        color: var(--black)
    }

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

    .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: 20rem;
        width: 384rem
    }

    .recipe__body-main-way-ingredients .title {
        color: var(--black)
    }

    .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 solid var(--black)
    }

    .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: 190rem;
        position: relative;
        border-radius: 20rem;
        overflow: hidden;
        padding: 24rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        border: 1rem solid var(--green-dark);
    }
    .recipe__body-main-banner-buttons a img{
        width: 100%;
        height: 100%;
    }
    .recipe__body-main-banner-buttons{
        display: flex;
        flex-direction: column;
        gap: 26rem;
    }
    .recipe__body-main-banner-buttons a{
        width: 151rem;
        height: 44rem;
    }


    .recipe__body-main-banner span {
        color: var(--black);
        max-width: 367rem;
    }

    .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;
        flex-direction: row;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form .comment-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 .comment-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)
    }

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

    /*.stars:hover {*/
    /*    border-color: var(--yellow)*/
    /*}*/

    /*.stars:hover img {*/
    /*    opacity: 1*/
    /*}*/

    /*.stars:hover span {*/
    /*    opacity: 0*/
    /*}*/

    .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 .comment-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8rem;
    }

    .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 .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 .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-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:not(:last-child) {
        border-bottom: 1rem solid var(--med-grey);
        padding-bottom: 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-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: 16rem
    }
    .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(--med-grey);
        border-radius: 20rem;
        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: 20rem;
        -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: 20rem;
        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: 20rem;
        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
    }

    .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: 700;
        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: 700;
        font-size: 24rem;
        line-height: 110%;
        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
    }

    .main__wrap {
    }

    .main {
        position: relative
    }

    .main__body {
        padding: 231rem 0 78rem 0rem
    }

    .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;
        font-family: var(--abieu);
        font-weight: 700;
        font-size: 40px;
        line-height: 110.00000000000001%;
        letter-spacing: 0%;
        text-transform: uppercase;
    }

    .main .main__text h1 br {
        display: none
    }

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

    .main .main__text-search .aws-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-wrapper {
        width: 239rem;
        height: 41rem;
        border-radius: 100rem;
        background: var(--white);
        border: 1rem solid var(--med-grey);
        padding-left: 16rem
    }
    .main .main__text-search .aws-wrapper input{
        font-weight: 400;
        font-size: 14rem;
        line-height: 120%;
        letter-spacing: 0px;
        color: var(--black);
    }
    .main .main__text-search input:placeholder {
        color: var(--grey)
    }

    .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__img {
        height: 343rem;
        width: 374rem;
        position: absolute;
        bottom: 54rem;
        right: 0rem
    }

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

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

    .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: 46rem;
        height: 46rem;
        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 {
        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: 20rem;
        background: var(--green-dark);
        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(--white) !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 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: 80rem;
        background: var(--green-dark);
        padding-bottom: 0rem
    }

    .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: 28rem 16rem 80rem 16rem
    }
    .footer__body-main-social{
        display: flex;
        flex-direction: column;
        gap: 16rem;
        padding-bottom: 18rem;
        border-bottom: none;
    }
    .footer__body-main-social-yo{
        display: flex;
        align-items: center;
        gap: 14rem;
        color: var(--white);
    }
    .footer__body-main-social-yo svg{
        width: 24rem;
        height: 24rem;
    }
    .footer__body-main-social-more{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16rem;
    }
    .footer__body-main-social-more-download{
        display: flex;
        align-items: center;
        gap: 8rem;
    }
    .footer__body-main-social-more-download a{
        width: 90rem;
        height: 26rem;
    }
    .footer__body-main-social-more-download a img{
        width: 100%;
        height: 100%;
    }
    .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;
        padding-bottom: 32rem;
        row-gap: 0rem;
        justify-content: space-between !important;
    }
    .footer__body-main-start.mob{
        border-bottom: 1rem solid var(--white);
    }
    .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: 25rem
    }

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

    .footer__body-main-start-left-logo .logo {
        width: 46rem;
        height: 46rem
    }

    .footer__body-main-start-left-logo .logo 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);
        border-radius: 1000rem;
        padding-left: 16rem;
        color: var(--black)
    }

    .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: start;
        -ms-flex-pack: start;
        justify-content:  center;
        -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(--white)
    }

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

    .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: 80rem;
        width: 100%
    }

    .attribute__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: flex-start;
        -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: 282rem !important;
        background: var(--green-dark);
        border-radius: 20rem;
        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: flex-end;
        border-top-left-radius: 20rem;
        border-top-right-radius: 20rem;
    }

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

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

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


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

    .heart-wrap{
        width: 24rem;
        height: 24rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .heart-wrap img{
        position: absolute !important;
        transition: all 0.3s ease;
        width: 100%;
        height: 100%;
    }
    .heart-wrap img:nth-child(1){
        opacity: 1;
    }
    .heart-wrap img:nth-child(2){
        opacity: 0;
    }
    .simplefavorite-button.active + div img:nth-child(1){
        opacity: 0;
    }
    .simplefavorite-button.active + div img:nth-child(2){
        opacity: 1;
    }
    .like-btn:hover .heart-wrap img:nth-child(1){
        opacity: 0;
    }
    .like-btn:hover .heart-wrap img:nth-child(2){
        opacity: 1;
    }
    .program__body-wrap-item-top-like .simplefavorite-button{
        position: absolute;
        width: 100%;
        height: 100%;
        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: 600;
        font-size: 14rem;
        line-height: 16rem;
        letter-spacing: 0rem;
        color: var(--white);
        -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: -3em
    }

    .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: 20rem;
        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: 20rem;
        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: 20rem;
        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 .program__body-wrap-item-top{
        border-radius: 20rem;
    }
    .popular__body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 24rem
    }
    .popular__body-block .program__body-wrap-item-top{
        border-radius: 24rem !important;
    }
    .popular__body-block-item {
        width: 300rem !important;
        height: 300rem;
        position: relative;
        border-radius: 20rem;
        overflow: hidden;
        padding: 16rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        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: -3em
    }

    .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: 20rem;
        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 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
    }
    .mix{
        width: 100%;
        margin-top: 80rem;
    }
    .mix__body{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40rem;
    }
    .mix__body-top{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
    }
    .mix__body-top h2{
        color: var(--green-dark);
        text-transform: uppercase;
        text-align: center;
    }
    .mix__body-top p{
        text-align: center;
    }
    .mix__body-block{
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 24rem;
    }
    .mix__body-block-wrap{
        display: flex;
        flex-wrap: wrap;
        gap: 8rem;
    }
    .mix__body-block-wrap a{
        padding: 8rem 16rem;
        border-radius: 100px;
        background: var(--med-grey);
        transition: all 0.3s ease;
    }
    .mix__body-block-wrap a:hover{
        background: var(--yellow);
    }
    .mix__body-block-link{
        padding: 16rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
        font-family: var(--rubik);
        font-weight: 500;
        font-size: 16rem;
        line-height: 100%;
        letter-spacing: -2%;

    }
    .tabs {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 16rem;
        background: var(--white);
        border-top-left-radius: 20rem;
        border-top-right-radius: 20rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        z-index: 10
    }

    .tabs a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 3rem;
    }

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

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

    .tabs a.active svg path {
        stroke: var(--green-dark);
    }

    .tabs a.active span {
        color: var(--green-dark)
    }
    .errors__page{
        width: 100%;
        margin-top: 23rem;
    }
    .errors__page-body{
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
    }
    .errors__page-body img{
        width: 257rem;
        height: 167rem;
    }
    .errors__page-body h1{
        color: var(--black);
        margin-top: -35rem;
    }
    .errors__page-body p{
        color: var(--black);
        margin-top: 4rem;
    }
    .errors__page-body a{
        padding: 8rem 16rem;
        background: var(--yellow);
        border-radius: 100px;
        color: var(--black);
        margin-top: 16rem;
    }
    .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.central{
        align-items: center !important;
        gap: 24rem;
    }
    .develop__body .back{
        padding: 12rem 24rem;
        background: var(--yellow);
        border-radius: 100rem;
    }
    .filter__modal-wrap.active{
        transform: translateX(0%);
    }
    .filter__modal-wrap{
        transform: translateX(100%);
        scale: 1;
    }
    .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%;
    }
    .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{
        background: var(--white);
        border: 1rem solid #0784BA;
        color: var(--black);
    }
    .filter__modal-buttons button{
        background: #0784BA;
        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;
        background: var(--med-grey);
        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
    }
    .comments{
        display: flex;
        flex-direction: column;
        gap: 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;
        flex-wrap: wrap;
    }

    .bread__body-top a {
        color: var(--grey);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        text-transform: capitalize;
    }

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

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

    .bread__body-top span {
        color: var(--black);
        text-transform: capitalize;
    }

    .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;
        -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 a {
        color: var(--white);
        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: 20rem;
        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 a {
        width: 24rem;
        height: 24rem;
        background: rgba(0, 0, 0, 0)
    }

    .catalog__body-filter-block-mobile .catalog__body-filter-top a 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 .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
    }

    /*.aws-search-form .aws-search-btn {*/
    /*    padding: 4rem 12rem;*/
    /*    background: var(--med-grey);*/
    /*    color: var(--grey);*/
    /*    border-radius: 1000rem*/
    /*}*/

    .catalog__body-main-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 7rem
    }
    .product-item .catalog__body-main-block-item{
        height: 100% !important;
    }
    .catalog__body-main-block-item {
        width: 168rem;
        background: var(--green-dark);
        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;
        height: auto;
    }

    .catalog__body-main-block-item-top {
        width: 100%;
        height: 130rem;
        min-height: 130rem;
        position: relative;
        padding: 8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-end;
        border-top-left-radius: 14rem;
        border-top-right-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;
        padding: 0 8rem 8rem 8rem;
        height: 100%;
    }

    .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(--white);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        min-height: auto;
        min-height: 40rem;
    }

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

    .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)
    }
    
    .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);
        max-width: 333rem;
        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: var(--green-dark);
        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: 20rem;
        width: 100%
    }

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

    .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(--white);
        color: var(--black);
        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: 20rem;
        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: 20rem;
        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: 20.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: 20rem;
        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;
    }
    .recipe__body-main-present .wrap_img{
        width: 100%;
        height: 194rem;
        position: relative;
    }
    .recipe__body-main-present img {
        width: 100%;
        height: inherit
    }
    .youtube-link{
        position: absolute;
        width: 32rem;
        height: 32rem;
    }
    .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(--med-grey);
        display: flex;
        align-items: center;
        gap: 4rem;
        color: var(--black);
        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: 20rem;
        padding: 16rem;
        width: 100%
    }

    .recipe__body-main-way-method span {
        color: var(--black)
    }

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

    .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: 20rem;
        width: 100%
    }

    .recipe__body-main-way-ingredients .title {
        color: var(--black)
    }

    .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 solid var(--black)
    }

    .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: 244rem;
        position: relative;
        border-radius: 20rem;
        overflow: hidden;
        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;
        align-items: flex-start;
        gap: 16rem;
        justify-content: flex-start;
    }

    .recipe__body-main-banner-buttons a img{
        width: 100%;
        height: 100%;
    }
    .recipe__body-main-banner-buttons{
        display: flex;
        flex-direction: column;
        gap: 26rem;
    }
    .recipe__body-main-banner-buttons a{
        width: 124rem;
        height: 36rem;
    }

    .recipe__body-main-banner span {
        color: var(--black);
        font-size: 20rem;
        line-height: 110%;
        font-weight: 700;
    }

    .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;
        flex-direction: row;
        gap: 8rem
    }

    .recipe__body-main-user-section-block-form .comment-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 .comment-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
    }

    /*.stars:hover {*/
    /*    border-color: var(--yellow)*/
    /*}*/

    /*.stars:hover img {*/
    /*    opacity: 1*/
    /*}*/

    /*.stars:hover span {*/
    /*    opacity: 0*/
    /*}*/

    .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 .comment-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 .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 .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 .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-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:not(:last-child) {
        border-bottom: 1rem solid var(--med-grey);
        padding-bottom: 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-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
    }
    .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: 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(--med-grey);
        border-radius: 20rem;
        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: 20rem;
        -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: 20rem;
        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: 20rem;
        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;
}