.toast-container {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 10000;
}

.toast {
    display: flex;
    gap: 10px;
    cursor: pointer;
    border-radius: 12px;
    padding: 12px;
    background-color: var(--lan-2-background-5);
    color: var(--text-color);
    border: 2px solid var(--lan-2-border-color);
    animation: fadeInOut 0.3s ease-in-out;
}
.toast + .toast {
    margin-top: 15px;
}

.toast-info {
    &::before {
        display: inline-block;
        background: no-repeat 50% / cover var(--info-icon);
        content: "";
        height: 24px;
        width: 24px;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
html {
    scroll-padding-top: var(--header-height);
}
body {
    background-color: #ffffff;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
}
ul,
ol {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
}
a {
    color: inherit;
}
a:hover {
    color: initial;
}
.container-big {
    max-width: 1920px;
    padding: 0 var(--padding);
    margin: 0 auto;
}
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0;
    height: 100%;
}

.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}

.user-info {
    padding-left: var(--space-12);
    .user-info__name.user-info__name.user-info__name {
        font-size: var(--fz-base);
        line-height: var(--lh-base);
        color: var(--text-secondary);
    }
}

@font-face {
    font-family: "Tenor Sans";
    src: url("https://static.whatsbetter.me/fonts/tenor-sans/TenorSans-Normal.woff2") format("woff2"),
        url("https://static.whatsbetter.me/fonts/tenor-sans/TenorSans-Normal.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("https://static.whatsbetter.me/fonts/inter/Inter-Medium.woff2") format("woff2"),
        url("https://static.whatsbetter.me/fonts/inter/Inter-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("https://static.whatsbetter.me/fonts/inter/Inter-SemiBold.woff2") format("woff2"),
        url("https://static.whatsbetter.me/fonts/inter/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("https://static.whatsbetter.me/fonts/inter/Inter-ExtraBold.woff2") format("woff2"),
        url("https://static.whatsbetter.me/fonts/inter/Inter-ExtraBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --p-24: 24px;
    --p-16: 16px;
    --p-12: 12px;
    --p-8: 8px;
    --p-6: 6px;
    --p-4: 4px;

    --space-56: 56px;
    --space-40: 40px;
    --space-32: 32px;
    --space-28: 28px;
    --space-24: 24px;
    --space-20: 20px;
    --space-16: 16px;
    --space-12: 12px;
    --space-10: 10px;
    --space-8: 8px;
    --space-4: 4px;
}

.p-4 {
    padding: var(--p-4);
}
.p-6 {
    padding: var(--p-6);
}
.p-8 {
    padding: var(--p-8);
}
.p-12 {
    padding: var(--p-12);
}
.p-16 {
    padding: var(--p-16);
}
.px-4 {
    padding-right: var(--p-4);
    padding-left: var(--p-4);
}
.px-6 {
    padding-right: var(--p-6);
    padding-right: var(--p-6);
}
.px-8 {
    padding-right: var(--p-8);
    padding-left: var(--p-8);
}
.px-12 {
    padding-right: var(--p-12);
    padding-left: var(--p-12);
}
.px-24 {
    padding-right: var(--p-24);
    padding-left: var(--p-24);
}
.py-4 {
    padding-top: var(--p-4);
    padding-bottom: var(--p-4);
}
.py-6 {
    padding-top: var(--p-6);
    padding-bottom: var(--p-6);
}
.py-8 {
    padding-top: var(--p-8);
    padding-bottom: var(--p-8);
}
.py-12 {
    padding-top: var(--p-12);
    padding-bottom: var(--p-12);
}
.py-16 {
    padding-top: var(--p-8);
    padding-bottom: var(--p-8);
}
.py-24 {
    padding-top: var(--p-24);
    padding-bottom: var(--p-24);
}
.mx-auto {
    margin: 0 auto;
}
.mt-auto {
    margin-top: auto;
}
.mr-auto {
    margin-right: auto;
}
.ml-auto {
    margin-left: auto;
}
.mt-top {
    margin-top: auto;
}
.mb-56 {
        /* prettier-ignore */
        margin-bottom: var(--space-56);
    }
.mb-40 {
        /* prettier-ignore */
        margin-bottom: var(--space-40);
    }
.mb-32 {
        /* prettier-ignore */
        margin-bottom: var(--space-32);
    }
.mb-28 {
        /* prettier-ignore */
        margin-bottom: var(--space-28);
    }
.mb-24 {
        /* prettier-ignore */
        margin-bottom: var(--space-24);
    }
.mb-20 {
        /* prettier-ignore */
        margin-bottom: var(--space-20);
    }
.mb-16 {
        /* prettier-ignore */
        margin-bottom: var(--space-16);
    }
.mb-12 {
        /* prettier-ignore */
        margin-bottom: var(--space-12);
    }
.mb-10 {
        /* prettier-ignore */
        margin-bottom: var(--space-10);
    }
.mb-8 {
        /* prettier-ignore */
        margin-bottom: var(--space-8);
    }
.mb-4 {
        /* prettier-ignore */
        margin-bottom: var(--space-4);
    }
.ml-56 {
        /* prettier-ignore */
        margin-left: var(--space-56);
    }
.ml-40 {
        /* prettier-ignore */
        margin-left: var(--space-40);
    }
.ml-32 {
        /* prettier-ignore */
        margin-left: var(--space-32);
    }
.ml-28 {
        /* prettier-ignore */
        margin-left: var(--space-28);
    }
.ml-24 {
        /* prettier-ignore */
        margin-left: var(--space-24);
    }
.ml-20 {
        /* prettier-ignore */
        margin-left: var(--space-20);
    }
.ml-16 {
        /* prettier-ignore */
        margin-left: var(--space-16);
    }
.ml-12 {
        /* prettier-ignore */
        margin-left: var(--space-12);
    }
.ml-10 {
        /* prettier-ignore */
        margin-left: var(--space-10);
    }
.ml-8 {
        /* prettier-ignore */
        margin-left: var(--space-8);
    }
.ml-4 {
        /* prettier-ignore */
        margin-left: var(--space-4);
    }
.mt-56 {
        /* prettier-ignore */
        margin-top: var(--space-56);
    }
.mt-40 {
        /* prettier-ignore */
        margin-top: var(--space-40);
    }
.mt-32 {
        /* prettier-ignore */
        margin-top: var(--space-32);
    }
.mt-28 {
        /* prettier-ignore */
        margin-top: var(--space-28);
    }
.mt-24 {
        /* prettier-ignore */
        margin-top: var(--space-24);
    }
.mt-20 {
        /* prettier-ignore */
        margin-top: var(--space-20);
    }
.mt-16 {
        /* prettier-ignore */
        margin-top: var(--space-16);
    }
.mt-12 {
        /* prettier-ignore */
        margin-top: var(--space-12);
    }
.mt-10 {
        /* prettier-ignore */
        margin-top: var(--space-10);
    }
.mt-8 {
        /* prettier-ignore */
        margin-top: var(--space-8);
    }
.mt-4 {
        /* prettier-ignore */
        margin-top: var(--space-4);
    }
.mr-56 {
        /* prettier-ignore */
        margin-right: var(--space-56);
    }
.mr-40 {
        /* prettier-ignore */
        margin-right: var(--space-40);
    }
.mr-32 {
        /* prettier-ignore */
        margin-right: var(--space-32);
    }
.mr-28 {
        /* prettier-ignore */
        margin-right: var(--space-28);
    }
.mr-24 {
        /* prettier-ignore */
        margin-right: var(--space-24);
    }
.mr-20 {
        /* prettier-ignore */
        margin-right: var(--space-20);
    }
.mr-16 {
        /* prettier-ignore */
        margin-right: var(--space-16);
    }
.mr-12 {
        /* prettier-ignore */
        margin-right: var(--space-12);
    }
.mr-10 {
        /* prettier-ignore */
        margin-right: var(--space-10);
    }
.mr-8 {
        /* prettier-ignore */
        margin-right: var(--space-8);
    }
.mr-4 {
        /* prettier-ignore */
        margin-right: var(--space-4);
    }

:root {
    --border_radius-2xl: 24px;
    --border_radius-xl: 16px;
    --border_radius-l: 12px;
    --border_radius-m: 10px;
    --border_radius: 8px;
}

.br {
    border-radius: var(--border_radius);
}
.br-m {
    border-radius: var(--border_radius-m);
}
.br-xl {
    border-radius: var(--border_radius-xl);
}
.br-max {
    border-radius: 1000px;
}

.hideScroll {
    position: sticky;
    inset: 0;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.text-overflow {
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.text-truncate {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.text-truncate--2 {
    -webkit-line-clamp: 2;
}
.text-truncate--4 {
    -webkit-line-clamp: 4;
}
.flex {
    display: flex;
}
.flex-container {
    display: flex;
    align-items: center;
}
.flex-wrap {
    flex-wrap: wrap;
}
.justify-end {
    justify-content: flex-end;
}
.items-center {
    align-items: center;
}
.inline-flex {
    display: inline-flex;
}
.pointer {
    cursor: pointer;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.relative {
    position: relative;
}
.w-fit {
    width: fit-content;
}

:root {
    --header-height: 0px;

    --padding: clamp(16px, 6.528px + 2.785vw, 60px);

    --section-space-top: clamp(50px, 30.64px + 5.696vw, 140px);
    --section-space-bottom: clamp(16px, 6.528px + 2.785vw, 60px);
    --slider-bottom-space: clamp(126px, 104.048px + 6.456vw, 228px);

    --lan-2-base-color: 14, 14, 14; /*0e0e0e*/
    --lan-2-base-color-2: 255, 255, 255; /* #fff */
    --lan-2-base-color-3: 21, 22, 23; /* #151617 */
    --lan-2-color: #cc855f;

    --lan-2-border-color: rgba(var(--lan-2-base-color-2), 0.2);
    --lan-2-border-color-2: rgb(var(--lan-2-base-color-2));
    --lan-2-border-color-4: rgba(var(--lan-2-base-color-2), 0.09);
    --lan-2-border-color-5: rgba(var(--lan-2-base-color-2), 0.16);
    --lan-2-border-color-6: rgba(var(--lan-2-base-color-2), 0.14);
    --lan-2-border-color-7: rgba(var(--lan-2-base-color-3), 0.08);
    --lan-2-border-color-8: rgba(var(--lan-2-base-color-2), 0.12);

    --lan-2-primary: rgb(var(--lan-2-base-color));
    --lan-2-background-4: rgba(var(--lan-2-base-color), 0.96);
    --lan-2-background-6: rgb(var(--lan-2-base-color-2));
    --lan-2-background-7: rgba(var(--lan-2-base-color), 0.76);
    --lan-2-background-8: rgba(var(--lan-2-base-color), 0.04);
    --lan-2-background-9: rgb(var(--lan-2-base-color-2));
    --lan-2-background-10: rgba(var(--lan-2-base-color-2), 0.1);
    --lan-2-background-11: rgba(var(--lan-2-base-color-2), 0.04);
    --lan-2-background-12: rgba(var(--lan-2-base-color-2), 0.32);
    --lan-2-background-13: #fff;
    --lan-2-background-14: rgba(var(--lan-2-base-color), 0.1);
    --lan-2-background-15: rgba(var(--lan-2-base-color), 0.8);
    --lan-2-background-16: rgba(var(--lan-2-base-color), 0.68);

    --text-color: rgb(var(--lan-2-base-color-2));
    --lan-2-text-secondary: rgba(var(--lan-2-base-color-2), 0.64);
    --text-color-3: rgb(var(--lan-2-base-color-3));
    --text-reverse-color: var(--lan-2-base-color-3);

    --lan-2-secondary: #171717;
    --lan-2-background-5: #161616;

    --bg-image: url(https://static.whatsbetter.me/img/ui/entity-default.png);
    --gradient-1: linear-gradient(
        360deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.65) 100%
    );
    --gradient-2: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.39),
        rgba(0, 0, 0, 0.39)
    );
    --gradient-3: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));

    --gradient-4: linear-gradient(
        180deg,
        rgba(14, 14, 14, 0) 0%,
        rgba(14, 14, 14, 0) 53%,
        #0e0e0e 100%
    );
    --gradient-5: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(131, 131, 131, 0) 100%
    );
    --gradient-6: linear-gradient(90deg, #000000 0%, rgba(33, 33, 33, 0) 100%);
    --gradient-7: linear-gradient(
        270deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(131, 131, 131, 0) 100%
    );
}
:root[data-theme="light"] {
    --lan-2-base-color: 241, 241, 241;
    --lan-2-base-color-2: 0, 0, 0;
    --lan-2-color: #0066ff;

    --lan-2-secondary: #fff;

    --lan-2-primary: rgb(var(--lan-2-base-color));
    --lan-2-background-4: #f9f9f9;
    --lan-2-background-5: #fff;
    --lan-2-background-6: #fff;
    --lan-2-background-7: rgba(14, 14, 14, 0.03);

    --lan-2-background-9: rgb(var(--lan-2-base-color-3));
    --lan-2-background-10: rgba(var(--lan-2-base-color-3), 0.04);

    --text-reverse-color: #fff;
    --text-color: rgb(var(--lan-2-base-color-3));

    --box-shadow: rgba(var(--lan-2-base-color-2), 0.27);

    --gradient-4: linear-gradient(
        27.42deg,
        rgba(0, 0, 0, 0) 0.34%,
        rgba(0, 0, 0, 0.33) 98.85%
    );
}
:root {
    --arrow-down: url("https://static.whatsbetter.me/img/booking/arrow-down.svg?color=696A6A");
    --arrow-down-2: url("https://static.whatsbetter.me/img/booking/arrow-down.svg?color=fff");
    --icon-like: url("https://static.whatsbetter.me/img/booking/like.svg?color=696A6A");
    --icon-comment: url("https://static.whatsbetter.me/img/booking/comment.svg?color=696A6A");
    --icon-view: url("https://static.whatsbetter.me/img/booking/view.svg?color=696A6A");
    --arrow-back: url("https://static.whatsbetter.me/img/icons/arrow-back.svg?color=white");
    --apply-icon: url("https://static.whatsbetter.me/img/booking/check-sharp.svg?color=white");
    --map-pin: url("https://static.whatsbetter.me/img/constructor/template-2/map-pin.svg?color=white");
    --map-pin-white: url("https://static.whatsbetter.me/img/constructor/template-2/map-pin.svg?color=white");
    --arrow-down-slider: url("https://static.whatsbetter.me/img/booking/arrow-down.svg?color=151617");
    --logo-company: url("https://static.whatsbetter.me/img/booking/tt-logo-new.svg?color=white");
    /* --logo-white: url("https://static.whatsbetter.me/img/constructor/template-2/wawelberg-logo.svg?color=white");
    --logo-black: url("https://static.whatsbetter.me/img/constructor/template-2/wawelberg-logo.svg"); */
}
:root[data-theme="light"] {
    --arrow-down: url("https://static.whatsbetter.me/img/booking/arrow-down.svg?color=323232");
    --arrow-down-2: url("https://static.whatsbetter.me/img/booking/arrow-down.svg?color=323232");
    --icon-like: url("https://static.whatsbetter.me/img/booking/like.svg?color=323232");
    --icon-comment: url("https://static.whatsbetter.me/img/booking/comment.svg?color=A1A3A2");
    --icon-view: url("https://static.whatsbetter.me/img/booking/view.svg?color=A1A3A2");
    --arrow-back: url("https://static.whatsbetter.me/img/icons/arrow-back.svg?color=323232");
    --map-pin: url("https://static.whatsbetter.me/img/constructor/template-2/map-pin.svg?color=323232");
    --apply-icon: url("https://static.whatsbetter.me/img/booking/check-sharp.svg?color=323232");
    --logo-company: url("https://static.whatsbetter.me/img/booking/tt-logo-new.svg?color=323232");
}
.main-blocks {
    color: var(--text-color);
    background-color: var(--lan-2-primary);
    flex: 1;
}
.h-full {
    height: 100%;
}
.w-full {
    width: 100%;
}
.section-title--lan-2 {
    font-size: clamp(12px, 9.424px + 0.759vw, 24px);
    line-height: clamp(15.008px, 8.752px + 1.835vw, 44px);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lan-2-color);
    padding: 10px 0;
}
.section-subtitle--lan-2 {
    font-size: clamp(24px, 13.664px + 3.038vw, 72px);
    line-height: clamp(32px, 21.664px + 3.038vw, 80px);
    font-family: "Tenor Sans";
    font-weight: 400;
}
.landing-2-btn.landing-2-btn.landing-2-btn {
    --border-radius: 1000px;
    --padding: 12px 65px;
    --border-color: var(--lan-2-color);

    font-size: var(--fz-base);
    border-radius: var(--border-radius);
    color: var(--text-color);
    padding: var(--padding);
    height: auto;
    border: 2px solid var(--border-color);
    background-color: transparent;
    font-weight: 600;
    width: fit-content;
}
.landing-2-btn.landing-2-btn.landing-2-btn--secondary.landing-2-btn--secondary {
    --padding: clamp(8px, 7.136px + 0.253vw, 12px)
        clamp(12px, 10.272px + 0.506vw, 20px);
    --border-radius: 12px;
}
.landing-2-btn.landing-2-btn.landing-2-btn--default-border {
    --border-color: var(--lan-2-border-color-4);
}

.landing-2-btn--color.landing-2-btn--color.landing-2-btn--color {
    background-color: var(--lan-2-color);
    color: #fff;
    --border-radius: 12px;
}
.landing-2-btn.landing-2-btn.landing-2-btn--tertiary {
    --padding: 8px 32px;
    --border-radius: 1000px;
    font-weight: 700;
    font-size: var(--fz-xs);
    background-color: var(--lan-2-color);
}
.landing-2-hashtag {
    display: inline-block;
    border: 2px solid var(--lan-2-color);
    background-color: var(--lan-2-background-7);
    padding: clamp(6px, 5.136px + 0.253vw, 10px)
        clamp(12px, 10.496px + 0.443vw, 19.008px);
    border-radius: 1000px;
    backdrop-filter: blur(16.2px);
    line-height: 28px;
    font-size: clamp(12px, 11.568px + 0.127vw, 14px);
}
.location-icon {
    --width: clamp(18px, 15.856px + 0.633vw, 28px);
    --height: clamp(18px, 15.856px + 0.633vw, 28px);
    display: inline-flex;
    align-items: center;
    &::before {
        content: "";
        display: inline-block;
        width: var(--width);
        height: var(--height);
        margin-right: clamp(4px, 3.568px + 0.127vw, 6px);
        background: no-repeat center/cover var(--map-pin-white);
    }
}
.landing-2-container {
    max-width: calc(1120px + 2 * var(--padding));
    margin: 0 auto;
    position: relative;
    padding: 0 var(--padding);
}
.landing-2-font-0 {
    font-size: clamp(24px, 18.832px + 1.519vw, 48px);
    line-height: clamp(36px, 31.696px + 1.266vw, 56px);
}
.landing-2-font-1 {
    font-size: clamp(18px, 14.128px + 1.139vw, 36px);
    line-height: clamp(26px, 22.128px + 1.139vw, 44px);
    letter-spacing: -0.018em;
}
.landing-2-font-2 {
    font-size: 30px;
    line-height: 36px;
}
.landing-2-font-3 {
    font-size: clamp(16px, 14.272px + 0.506vw, 24px);
    line-height: clamp(24px, 22.272px + 0.506vw, 32px);
}
.landing-2-font-4 {
    font-size: clamp(12px, 10.272px + 0.506vw, 20px);
    line-height: clamp(16px, 13.424px + 0.759vw, 28px);
}

.landing-2-ellipse {
    position: relative;
    isolation: isolate;
    &::before,
    &::after {
        position: absolute;
        background: var(--lan-2-color);
        filter: blur(150px);
        opacity: 0.7;
        transform: rotate(90deg);
        z-index: -1;
    }
    &::before {
        content: "";
    }
}
.landing-2-box-shadow {
    box-shadow: 0px 157px 99.4px -72px var(--box-shadow);
}

.section-center {
    text-align: center;
}
hr {
    margin: 20px 0;
    border-color: var(--lan-2-border-color);
}
.color-accent {
    color: var(--lan-2-color);
    &:hover {
        color: var(--lan-2-color);
    }
    &:visited {
        color: var(--lan-2-color);
    }
    &:focus {
        color: var(--lan-2-color);
    }
}
.mb-64 {
    margin-bottom: clamp(32px, 25.12px + 2.025vw, 64px);
}
.mb-40 {
    margin-bottom: clamp(12px, 5.968px + 1.772vw, 40px);
}
.mb-32 {
    margin-bottom: clamp(10px, 5.264px + 1.392vw, 32px);
}
.mb-20 {
    margin-bottom: clamp(8px, 5.424px + 0.759vw, 20px);
}
.mb-10 {
    margin-bottom: clamp(6px, 5.136px + 0.253vw, 10px);
}
pre {
    font-family: inherit;
    white-space: pre-wrap;
    margin: 0;
}
.dropdown.lan-2-dropdown {
    font-size: 14px;
    line-height: 24px;
    min-width: 122px;
    background-color: var(--lan-2-background-7);
    color: var(--text-color);
    border-radius: 12px;
    border: 2px solid var(--lan-2-border-color-4);
    height: auto !important;
    padding: 10px 8px 10px 20px;
    span {
        line-height: inherit;
    }
    .dropdown-menu {
        background-color: inherit;
    }
    .dropdown-menu__item.active {
        background-color: var(--lan-2-color);
    }
    .dropdown-menu__item:not(.active):hover {
        background-color: var(--lan-2-border-color-4);
    }
    .icon {
        width: 24px;
        height: 24px;
        opacity: 1;
    }
    .icon-arrow {
        background-image: var(--arrow-down-2);
    }

    &:hover {
        box-shadow: none;
    }
}

.lan-2-modal {
    .modgallery__left {
        background-color: transparent;
    }
}
.relative {
    position: relative;
}
.pointer {
    cursor: pointer;
}

.styled-scrollbar {
    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    &::-moz-scrollbar {
        width: 10px;
        height: 10px;
    }
    &::-webkit-scrollbar-track {
        background-color: var(--lan-2-primary);
    }
    &::-moz-scrollbar-track {
        background-color: var(--lan-2-primary);
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: var(--lan-2-border-color-5);
    }
    &::-moz-scrollbar-thumb {
        border-radius: 5px;
        background: var(--lan-2-border-color-5);
    }
}
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
}
.gradient-border-before::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    background: linear-gradient(270deg, #e4002e 8.71%, #06f 95.31%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
[data-floating-ui-portal] > * {
    z-index: 1;
}

.ticket {
    --padding: var(--p-4) var(--p-12);
    text-align: center;
    width: fit-content;
    padding: var(--padding);
    border-radius: 1000px;
    background-color: var(--lan-2-background-10);
}

@keyframes opacity {
    to {
        opacity: 0;
    }
}

@keyframes moveOut {
    to {
        translate: 0 -100%;
        opacity: 0;
    }
}

@keyframes scaleDown {
    from {
        scale: 1.5;
        opacity: 0;
    }
    to {
        scale: 1;
        opacity: 1;
    }
}


@keyframes backgroundColor {
    from {
        background-color: none;
    }
    to {
        border-color: var(--lan-2-color);
        background-color: var(--lan-2-color);
    }
}

@keyframes moveUp {
    from {
        translate: 0 101%;
    }
    to {
        translate: 0 0;
    }
}

.advantages {
    padding: 10px 0 180px 0;
    background-color: var(--lan-2-primary);
    .landing-2-hashtag {
        display: inline-block;
    }
    .slider-container--lan-2 {
        margin-top: 50px;
    }
    .slider-container--lan-2 {
        margin-left: 60px;
    }
    .slick-list {
        margin-left: -20px;
    }
    .slick-slide > div > div {
        margin: 0 20px;
    }
    .slick-slider {
        padding-bottom: 108px;
    }
    .section-subtitle--lan-2 {
        max-width: 1170px;
    }
}
.advantage__slide {
    display: flex;
    flex-direction: column;
    aspect-ratio: 0.6;
    border-radius: 24px;
    padding: 40px;
    background: var(--gradient-3), var(--bg-image) no-repeat center/cover;
    color: #fff;
}

.advantage__slide-title {
    font-weight: 600;
    margin-bottom: 8px;
}
.advantage__slide-description {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.012em;
}
.btn.advantage__slide-btn.advantage__slide-btn {
    background-color: var(--lan-2-background-6);
    border-radius: 1000px;
    padding: 12px 35px;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.slider-container--lan-2 {
    .slick-track {
        display: flex !important;
    }
    .slick-slide {
        height: inherit !important;
    }
    .slick-dots {
        display: flex !important;
        left: 50%;
        width: fit-content;
        transform: translateX(-50%);
        padding: 28px;
        border-radius: 1000px;
        background-color: var(--lan-2-background-4);
        button {
            padding: 0;
            width: auto;
            height: auto;
        }
        li {
            width: auto;
            height: auto;
            margin: 0 16px;
        }
        button:before {
            content: "";
            width: 8px;
            height: 8px;
            background: var(--lan-2-background-9);
            border-radius: 30px;
            opacity: 1;
        }
        .slick-active {
            width: 68px;
            height: 8px;
        }
        .slick-active button::before {
            background-color: var(--lan-2-background-9);
            width: 68px;
            height: 8px;
            opacity: 1;
        }
    }

    .slider-arrow-1 {
        position: absolute;
        top: auto;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--lan-2-background-10) no-repeat center/15px 15px
            url(https://static.whatsbetter.me/img/icons/arrow-down.svg?color=white);
        rotate: -90deg;
        position: absolute;
        top: auto;
        bottom: 0;
        right: 60px;
        &:hover {
            background: var(--lan-2-border-color-6) no-repeat center/15px 15px
                url(https://static.whatsbetter.me/img/icons/arrow-down.svg?color=white);
        }
        &::before {
            content: "" !important;
        }
    }
    .slider-arrow-1.slick-prev {
        rotate: 90deg;
        right: 170px;
        left: auto;
        bottom: 0;
        z-index: 1;
    }

    .slider-arrow-1.center,
    .slider-arrow-1.center.slick-prev {
        right: auto;
        bottom: -80px;
    }
    .slider-arrow-1.center {
        left: 50%;
        transform: translateX(-50%);
    }
    .slider-arrow-1.center.slick-prev {
        left: calc(50% - 70px);
        transform: translateX(50%);
    }
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

:root {
    --slick-arrow-color: white;
    --slick-dot-color: black;
    --slick-dot-color-active: var(--slick-dot-color);
    --slick-prev-character: "\2190";
    --slick-next-character: "\2192";
    --slick-dot-character: "\2022";
    --slick-dot-size: 6px;
    --slick-opacity-default: 0.75;
    --slick-opacity-on-hover: 1;
    --slick-opacity-not-active: 0.25;
}

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent;
}

.slick-prev:hover:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-next:focus:before {
    opacity: var(--slick-opacity-on-hover);
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: var(--slick-opacity-not-active);
}

.slick-prev:before,
.slick-next:before {
    font-size: 20px;
    line-height: 1;
    color: var(--slick-arrow-color);
    opacity: var(--slick-opacity-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir="rtl"] .slick-prev {
    left: auto;
    right: -25px;
}

.slick-prev:before {
    content: var(--slick-prev-character);
}

[dir="rtl"] .slick-prev:before {
    content: var(--slick-next-character);
}

.slick-next {
    right: -25px;
}

[dir="rtl"] .slick-next {
    left: -25px;
    right: auto;
}

.slick-next:before {
    content: var(--slick-next-character);
}

[dir="rtl"] .slick-next:before {
    content: var(--slick-prev-character);
}

.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0;
    font-size: 0;
    color: transparent;
    padding: 5px;
    cursor: pointer;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: var(--slick-opacity-on-hover);
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: var(--slick-dot-character);
    width: 20px;
    height: 20px;
    font-size: var(--slick-dot-size);
    line-height: 20px;
    text-align: center;
    color: var(--slick-dot-color);
    opacity: var(--slick-opacity-not-active);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    color: var(--slick-dot-color-active);
    opacity: var(--slick-opacity-default);
}
.btn {
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: #f8f8f8;
    align-items: center;
    font-weight: 500;
    color: #4a4a4a;
    padding: 0 12px;
    white-space: pre-line;
    transition: 0.2;
    position: relative;

    .icon {
        margin-right: 4px;
    }
}

/*-------------------
    Colors
--------------------*/
.btn.blue {
    color: #fff;
    background-color: var(--blue);
}
.btn.grey {
    background-color: #f2f2f2;
}
.btn.darkgrey {
    background-color: #efefef;
}

.btn.white {
    background-color: #fff;
}
.btn.white:hover {
    background-color: #fafafa;
}

.btn.green {
    background-color: #21ba45;
    color: #fff;
}
.btn.green:hover {
    background-color: #16ab39;
}

.btn.yellow {
    background-color: #fee01d;
    color: #1a1a1a;
}

/*-------------------
    Link
--------------------*/
.btn.link {
    color: #2d7fd8;
    opacity: 1;
    text-decoration: none;

    &:hover {
        opacity: 0.8;
    }
}

/*-------------------
    Bordered
--------------------*/
.btn.bordered {
    box-shadow: inset 0px 0px 0px 1px #eee;
}

/*-------------------
    Disabled
--------------------*/
.btn.disabled {
    opacity: 0.3;
}

/*-------------------
    Fluid
--------------------*/
.btn.fluid {
    width: 100%;
}

/*-------------------
    Float
--------------------*/
.btn.float.left {
    float: left;
}

.btn.float.right {
    float: right;
}

/*-------------------
    Primary and Secondary 
--------------------*/
.btn.primary {
    color: #fff;
    background-color: var(--blue);
    border: 0;
}
.btn.secondary {
    color: var(--blue);
    background-color: #f4f9ff;
    border: 0;
}
/*-------------------
    Sizes
--------------------*/
.btn.size-s {
    height: 24px;
    border-radius: var(--border_radius);
    font-size: 12px;
}
.btn.size-m {
    height: 32px;
    font-size: 14px;
    border-radius: var(--border_radius);
}
.btn.rounded.size-m {
    border-radius: 16px;
}
.btn.size-xm {
    height: 40px;
    font-size: 14px;
    border-radius: var(--border_radius);
}
.btn.size-36 {
    height: 36px;
    font-size: 14px;
    border-radius: var(--border_radius);
}
.btn.size-l {
    height: 48px;
    border-radius: var(--border_radius);
    padding: 0 32px;
}
.btn.rounded.size-l {
    border-radius: 24px;
}
.btn.size-xl {
    height: 64px;
    border-radius: 12px;
}
.btn.rounded.size-xl {
    border-radius: 32px;
}
.btn.size-xxl {
    height: 96px;
}
.btn.rounded.size-xxl {
    border-radius: 48px;
}

/*-------------------
    Button BAdge
--------------------*/
.btn .badge {
    position: absolute;
    top: -4px;
    left: -4px;
}

/*-------------------
    Button Group
--------------------*/
.btn-group {
    .btn {
        margin: 0 4px;
    }

    .btn:first-child {
        margin-left: 0;
    }

    .btn:last-child {
        margin-right: 0;
    }

    @media (max-width: 480px) {
        .btn {
            width: 100%;
            margin: 8px 0 0 0;
        }
    }

    clear: fix;
}
.btn-group.float.right {
    float: right;
}
.btn-group.float.left {
    float: left;
}
.btn-group.float.center {
    text-align: center;
}

span.btn__text {
    pointer-events: none;
}

.btn.btn_spheres-select {
    border-radius: 32px;
    color: #9b9b9b;
    padding: 0 12px;
    font-size: 14px;
    margin-left: 16px;
}

.btn.btn_sidebar {
    border-top: 0.5px solid #eee;
    width: 100%;
    background-color: #fff;
    font-size: 18px;
    color: #4a4a4a;
    border-radius: 0;
}

.btn.btn_postscore {
    border-radius: 8px;
    height: 48px;
    line-height: 64px;
    background-color: #fff;
    font-size: 16px;
    color: #333;
}

.btn.btn_popuplist {
    padding: 0 32px;
    font-size: 16px;
}

.btn_clear {
    background: #fff;
    color: var(--main-color);
    padding: 0 32px;
}

.btn.btn_send-message {
    float: right;
}

.btn.btn_login {
    margin: 10px;
    padding: 0 24px;
}

.awards-lan-2 {
    position: relative;
    z-index: 0;
    background-color: var(--lan-2-primary);
    padding: var(--section-space-top) 0 var(--slider-bottom-space) 0;
    .property-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
        overflow: auto;
        flex: 1;
        width: 100%;
    }
    &.landing-2-ellipse {
        overflow: hidden;
        &::after {
            content: "";
            top: 0;
            left: 0;
            opacity: 1;
            width: 98px;
            height: 489px;
            transform: translateY(-21%) rotate(-180deg);
        }
        &::before {
            bottom: 118px;
            right: 0;
            width: 98px;
            height: 489px;
            transform: translateX(50%) rotate(-180deg);
        }
    }
    .criteria-wrapper {
        margin-bottom: clamp(32px, 25.968px + 1.772vw, 60px);
    }
}
.awards-lan-2__logo {
    width: clamp(70px, 53.216px + 4.937vw, 148px);
    aspect-ratio: 1;
    background: no-repeat center/cover
        url(https://static.whatsbetter.me/img/constructor/template-2/tt-logo.png);
    margin: 0 auto clamp(24px, 20.56px + 1.013vw, 40px) auto;
}
.awards-lan-2__title {
    margin-bottom: clamp(10px, 3.552px + 1.899vw, 40px);
}
.awards-lan-2__description {
    font-weight: 600;
    color: var(--lan-2-text-secondary);
    margin-bottom: clamp(24px, 18.832px + 1.519vw, 48px);
}
.awards-lan-2__top {
    text-align: center;
}
.awards-lan-2__awards {
    --min-height: clamp(563.008px, 538.464px + 7.215vw, 677.008px);
    min-height: var(--min-height);
    /* &:after,
    &:before {
        content: "";
        position: absolute;
        width: 148px;
        height: 90%;
        background-color: var(--lan-2-color);
        filter: blur(150px);
        top: 0;
        z-index: -1;
    }
    &:before {
        right: 0;
    }
    &::after {
        left: 0;
    } */
}
.slick-slide .award-blur-card {
    border-radius: clamp(16px, 14.272px + 0.506vw, 24px);
    width: clamp(288px, 261.968px + 7.658vw, 409.008px);
    min-height: var(--min-height);
    padding: clamp(28px, 25.2px + 0.823vw, 41.008px)
        clamp(16px, 6.528px + 2.785vw, 60px);
    margin: 0 clamp(8px, 3.696px + 1.266vw, 28px);
    .award {
        width: clamp(148px, 141.12px + 2.025vw, 180px);
    }
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    .icon {
        width: 48px;
        height: 48px;
    }
}

.icon {
    display: inline-block;
    opacity: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    text-decoration: inherit;
    text-align: center;
    flex-shrink: 0;
}
.icon--size {
    width: var(--size);
    height: var(--size);
}
i.icon.external {
    background-size: contain;
}

/*-------------------
    Sizes String
--------------------*/
i.icon.size-xxs {
    width: 12px;
    height: 12px;
}
i.icon.size-xs {
    width: 16px;
    height: 16px;
}
i.icon.size-s {
    width: 24px;
    height: 24px;
}
i.icon.size-m {
    width: 32px;
    height: 32px;
}
i.icon.size-xm {
    width: 40px;
    height: 40px;
}
i.icon.size-l {
    width: 48px;
    height: 48px;
}
i.icon.size-xl {
    width: 64px;
    height: 64px;
}

/*-------------------
    Sizes Number
--------------------*/
i.icon.size-20 {
    width: 20px;
    height: 20px;
}

/*-------------------
    Bordered
--------------------*/
i.icon.bordered {
    -webkit-box-shadow: inset 0px 0px 0px 1px #ccc;
    -moz-box-shadow: inset 0px 0px 0px 1px #ccc;
    box-shadow: inset 0px 0px 0px 1px #ccc;
    background-size: 70%;
}

/*-------------------
    Inverted
--------------------*/
i.icon.inverted {
    background-size: 60%;
}

/*-------------------
    Rounded
--------------------*/
i.icon.rounded {
    border-radius: 4px;
}

/*-------------------
    Link
--------------------*/
i.link.icon {
    cursor: pointer;
    opacity: 0.6;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
}
i.link.icon:hover {
    opacity: 1 !important;
}
i.link.active.icon {
    opacity: 1 !important;
}

/*-------------------
    Circular
--------------------*/
i.circular.icon {
    border-radius: 50%;
    background-size: 75%;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}
i.circular.inverted.icon {
    background-size: 60%;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*-------------------
    Centered
--------------------*/
i.icon.centered {
    display: block;
    margin: 0 auto;
}

/*-------------------
    Colors
--------------------*/
i.icon.inverted.grey {
    background-color: #eee;
}
i.icon.inverted.blue {
    background-color: var(--main-color);
}
i.icon.inverted.green {
    background-color: #21ba45;
}

/*-------------------
      Flip
--------------------*/

i.horizontally.flip.icon {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

i.vertically.flip.icon {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
}

/*-------------------
    Loading
--------------------*/
i.icon.loading {
    animation: icon-loading 1s linear infinite;
}
@keyframes icon-loading {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


    .icon-apply {
        background-image: url("https://static.whatsbetter.me/img/icons/apply.svg");
    }

.icon-attach {
        background-image: url("https://static.whatsbetter.me/img/icons/attach.svg");
    }

.icon-basket {
        background-image: url("https://static.whatsbetter.me/img/icons/basket.svg");
    }

.icon-battle {
        background-image: url("https://static.whatsbetter.me/img/icons/battle.svg");
    }

.icon-bell {
        background-image: url("https://static.whatsbetter.me/img/icons/bell.svg");
    }

.icon-catalog {
        background-image: url("https://static.whatsbetter.me/img/icons/catalog.svg");
    }

.icon-check {
        background-image: url("https://static.whatsbetter.me/img/icons/check.svg");
    }

.icon-close {
        background-image: url("https://static.whatsbetter.me/img/icons/close.svg");
    }

.icon-consuming {
        background-image: url("https://static.whatsbetter.me/img/icons/consuming.svg");
    }

.icon-copy-outline {
        background-image: url("https://static.whatsbetter.me/img/icons/copy-outline.svg");
    }

.icon-copy {
        background-image: url("https://static.whatsbetter.me/img/icons/copy.svg");
    }

.icon-creation {
        background-image: url("https://static.whatsbetter.me/img/icons/creation.svg");
    }

.icon-criteria-groups {
        background-image: url("https://static.whatsbetter.me/img/icons/criteria-groups.svg");
    }

.icon-criteria {
        background-image: url("https://static.whatsbetter.me/img/icons/criteria.svg");
    }

.icon-cup {
        background-image: url("https://static.whatsbetter.me/img/icons/cup.svg");
    }

.icon-dialog {
        background-image: url("https://static.whatsbetter.me/img/icons/dialog.svg");
    }

.icon-editing {
        background-image: url("https://static.whatsbetter.me/img/icons/editing.svg");
    }

.icon-entity {
        background-image: url("https://static.whatsbetter.me/img/icons/entity.svg");
    }

.icon-expand {
        background-image: url("https://static.whatsbetter.me/img/icons/expand.svg");
    }

.icon-feed {
        background-image: url("https://static.whatsbetter.me/img/icons/feed.svg");
    }

.icon-filter {
        background-image: url("https://static.whatsbetter.me/img/icons/filter.svg");
    }

.icon-filters-groups {
        background-image: url("https://static.whatsbetter.me/img/icons/filters-groups.svg");
    }

.icon-food {
        background-image: url("https://static.whatsbetter.me/img/icons/food.svg");
    }

.icon-info {
        background-image: url("https://static.whatsbetter.me/img/icons/info.svg");
    }

.icon-friends {
        background-image: url("https://static.whatsbetter.me/img/icons/friends.svg");
    }

.icon-hierarchy {
        background-image: url("https://static.whatsbetter.me/img/icons/hierarchy.svg");
    }

.icon-like {
        background-image: url("https://static.whatsbetter.me/img/icons/like.svg");
    }

.icon-linked {
        background-image: url("https://static.whatsbetter.me/img/icons/linked.svg");
    }

.icon-messages {
        background-image: url("https://static.whatsbetter.me/img/icons/messages.svg");
    }

.icon-order {
        background-image: url("https://static.whatsbetter.me/img/icons/order.svg");
    }

.icon-personal {
        background-image: url("https://static.whatsbetter.me/img/icons/personal.svg");
    }

.icon-photo {
        background-image: url("https://static.whatsbetter.me/img/icons/photo.svg");
    }

.icon-plus {
        background-image: url("https://static.whatsbetter.me/img/icons/plus.svg");
    }

.icon-popular {
        background-image: url("https://static.whatsbetter.me/img/icons/popular.svg");
    }

.icon-post {
        background-image: url("https://static.whatsbetter.me/img/icons/post.svg");
    }

.icon-preset {
        background-image: url("https://static.whatsbetter.me/img/icons/preset.svg");
    }

.icon-presets {
        background-image: url("https://static.whatsbetter.me/img/icons/presets.svg");
    }

.icon-recommended {
        background-image: url("https://static.whatsbetter.me/img/icons/recommended.svg");
    }

.icon-referrers {
        background-image: url("https://static.whatsbetter.me/img/icons/referrers.svg");
    }

.icon-reply {
        background-image: url("https://static.whatsbetter.me/img/icons/reply.svg");
    }

.icon-score {
        background-image: url("https://static.whatsbetter.me/img/icons/score.svg");
    }

.icon-search {
        background-image: url("https://static.whatsbetter.me/img/icons/search.svg");
    }

.icon-search {
        background-image: url("https://static.whatsbetter.me/img/icons/search.svg");
    }

.icon-send {
        background-image: url("https://static.whatsbetter.me/img/icons/send.svg");
    }

.icon-share {
        background-image: url("https://static.whatsbetter.me/img/icons/share.svg");
    }

.icon-sort {
        background-image: url("https://static.whatsbetter.me/img/icons/sort.svg");
    }

.icon-sphere {
        background-image: url("https://static.whatsbetter.me/img/icons/sphere.svg");
    }

.icon-sphere {
        background-image: url("https://static.whatsbetter.me/img/icons/sphere.svg");
    }

.icon-subscribers {
        background-image: url("https://static.whatsbetter.me/img/icons/subscribers.svg");
    }

.icon-subscriptions {
        background-image: url("https://static.whatsbetter.me/img/icons/subscriptions.svg");
    }

.icon-top {
        background-image: url("https://static.whatsbetter.me/img/icons/top.svg");
    }

.icon-toys {
        background-image: url("https://static.whatsbetter.me/img/icons/toys.svg");
    }

.icon-user-outline {
        background-image: url("https://static.whatsbetter.me/img/icons/user-outline.svg");
    }

.icon-user {
        background-image: url("https://static.whatsbetter.me/img/icons/user.svg");
    }

.icon-users {
        background-image: url("https://static.whatsbetter.me/img/icons/users.svg");
    }

.icon-video {
        background-image: url("https://static.whatsbetter.me/img/icons/video.svg");
    }

.icon-arrow-right-long {
        background-image: url("https://static.whatsbetter.me/img/icons/arrow-right-long.svg");
    }

.icon-question-inside-dialog {
        background-image: url("https://static.whatsbetter.me/img/icons/question-inside-dialog.svg");
    }

.icon-calendar {
        background-image: url("https://static.whatsbetter.me/img/icons/calendar.svg");
    }

.icon-search-modern-grey {
        background-image: url("https://static.whatsbetter.me/img/icons/search-modern-grey.svg");
    }

.icon-arrow-back {
        background-image: url("https://static.whatsbetter.me/img/icons/arrow-back.svg");
    }

.icon-document {
        background-image: url("https://static.whatsbetter.me/img/icons/document.svg");
    }

.icon-calendar-cancel {
        background-image: url("https://static.whatsbetter.me/img/icons/calendar-cancel.svg");
    }

.icon-calendar-change {
        background-image: url("https://static.whatsbetter.me/img/icons/calendar-change.svg");
    }

.icon-print {
        background-image: url("https://static.whatsbetter.me/img/icons/print.svg");
    }

.icon-friends-2 {
        background-image: url("https://static.whatsbetter.me/img/icons/friends-2.svg");
    }

.icon-check-grey {
        background-image: url("https://static.whatsbetter.me/img/icons/check-grey.svg");
    }

.icon-location {
        background-image: url("https://static.whatsbetter.me/img/icons/location.svg");
    }

.icon-add-guest {
        background-image: url("https://static.whatsbetter.me/img/icons/add-guest.svg");
    }

.icon-call {
        background-image: url("https://static.whatsbetter.me/img/icons/call.svg");
    }

.icon-info-blue {
        background-image: url("https://static.whatsbetter.me/img/icons/info-blue.svg");
    }

.icon-mail {
        background-image: url("https://static.whatsbetter.me/img/icons/mail.svg");
    }

.icon-batch-scores {
        background-image: url("https://static.whatsbetter.me/img/icons/batch-scores.svg");
    }

.icon-upload-cloud {
        background-image: url("https://static.whatsbetter.me/img/icons/upload-cloud.svg");
    }

.icon-calendar-event {
        background-image: url("https://static.whatsbetter.me/img/icons/calendar-event.svg");
    }

.icon-chevron {
        background-image: url("https://static.whatsbetter.me/img/icons/chevron.svg");
    }

.icon-file-info {
        background-image: url("https://static.whatsbetter.me/img/icons/file-info.svg");
    }

.icon-dots-vertical {
        background-image: url("https://static.whatsbetter.me/img/icons/dots-vertical.svg");
    }

.icon-file-excel {
        background-image: url("https://static.whatsbetter.me/img/icons/file-excel.svg");
    }

.icon-filter-3-line {
        background-image: url("https://static.whatsbetter.me/img/icons/filter-3-line.svg");
    }

.icon-map-pin-fill {
        background-image: url("https://static.whatsbetter.me/img/icons/map-pin-fill.svg");
    }

.icon-price-tag-3-fill {
        background-image: url("https://static.whatsbetter.me/img/icons/price-tag-3-fill.svg");
    }

.icon-price-tag-3-line {
        background-image: url("https://static.whatsbetter.me/img/icons/price-tag-3-line.svg");
    }

.icon-star-smile-line {
        background-image: url("https://static.whatsbetter.me/img/icons/star-smile-line.svg");
    }

.icon-user-3-line {
        background-image: url("https://static.whatsbetter.me/img/icons/user-3-line.svg");
    }

.icon-dislike-new {
        background-image: url("https://static.whatsbetter.me/img/icons/dislike-new.svg");
    }

.icon-like-new {
        background-image: url("https://static.whatsbetter.me/img/icons/like-new.svg");
    }

.icon-comment {
        background-image: url("https://static.whatsbetter.me/img/icons/comment.svg");
    }

.icon-star {
        background-image: url("https://static.whatsbetter.me/img/icons/star.svg");
    }

.icon-view {
        background-image: url("https://static.whatsbetter.me/img/icons/view.svg");
    }

/*-------------------
    WHITE
--------------------*/
.white.icon-battle {
        background-image: url("https://static.whatsbetter.me/img/icons/battle-white.svg");
    }
.white.icon-close {
        background-image: url("https://static.whatsbetter.me/img/icons/close-white.svg");
    }
.white.icon-criteria-groups {
        background-image: url("https://static.whatsbetter.me/img/icons/criteria-groups-white.svg");
    }
.white.icon-criteria {
        background-image: url("https://static.whatsbetter.me/img/icons/criteria-white.svg");
    }
.white.icon-entity {
        background-image: url("https://static.whatsbetter.me/img/icons/entity-white.svg");
    }
.white.icon-expand {
        background-image: url("https://static.whatsbetter.me/img/icons/expand-white.svg");
    }
.white.icon-filter {
        background-image: url("https://static.whatsbetter.me/img/icons/filter-white.svg");
    }
.white.icon-filters-groups {
        background-image: url("https://static.whatsbetter.me/img/icons/filters-groups-white.svg");
    }
.white.icon-hierarchy {
        background-image: url("https://static.whatsbetter.me/img/icons/hierarchy-white.svg");
    }
.white.icon-linked {
        background-image: url("https://static.whatsbetter.me/img/icons/linked-white.svg");
    }
.white.icon-photo {
        background-image: url("https://static.whatsbetter.me/img/icons/photo-white.svg");
    }
.white.icon-plus {
        background-image: url("https://static.whatsbetter.me/img/icons/plus-white.svg");
    }
.white.icon-post {
        background-image: url("https://static.whatsbetter.me/img/icons/post-white.svg");
    }
.white.icon-preset {
        background-image: url("https://static.whatsbetter.me/img/icons/preset-white.svg");
    }
.white.icon-top {
        background-image: url("https://static.whatsbetter.me/img/icons/top-white.svg");
    }

/*-------------------
    BLUE
--------------------*/
.blue.icon-editing {
        background-image: url("https://static.whatsbetter.me/img/icons/editing-blue.svg");
    }
.blue.icon-send {
        background-image: url("https://static.whatsbetter.me/img/icons/send-blue.svg");
    }
.blue.icon-video {
        background-image: url("https://static.whatsbetter.me/img/icons/video-blue.svg");
    }
.blue.icon-dropdown {
        background-image: url("https://static.whatsbetter.me/img/icons/dropdown-blue.svg");
    }
.blue.icon-apply {
        background-image: url("https://static.whatsbetter.me/img/icons/apply-blue.svg");
    }

.icon-close.red {
    background-image: url(https://static.whatsbetter.me/img/icons/close-red.svg);
}
.icon-close.blue {
    background-image: url(https://static.whatsbetter.me/img/icons/close.svg?color=4E94FC);
}

.icon-close-round {
    background-image: url(https://image.flaticon.com/icons/svg/561/561189.svg);
}

.icon-arrow {
    background-image: url(https://static.whatsbetter.me/img/icons/dropdown.svg);
}

.icon-preloader {
    background-image: url(https://static.whatsbetter.me/img/icons/preloader.png);
}

.icon-pensil {
    background-size: 90%;
    background-image: url(https://static.whatsbetter.me/img/icons/pensil.svg);
}

.icon-tag {
    background-image: url(https://static.whatsbetter.me/img/icons/tag.png);
}
.icon-tags {
    background-image: url(https://static.whatsbetter.me/img/icons/tags.svg);
}

.icon-company {
    background-image: url(https://static.whatsbetter.me/img/nav/company.png);
}

.icon-peoples {
    background-image: url(https://static.whatsbetter.me/img/nav/peoples.png);
}

.icon-social {
    background-image: url(https://static.whatsbetter.me/img/nav/social.png);
}

.icon-members {
    width: 28px !important;
    background-image: url(https://static.whatsbetter.me/img/nav/members.png);
}

.icon-service {
    background-image: url(https://static.whatsbetter.me/img/nav/service.png);
}
.icon-about {
    background-image: url(https://static.whatsbetter.me/img/nav/about.png);
}

.icon-login {
    background-image: url(https://static.whatsbetter.me/img/nav/login.png);
}

.icon-chats {
    background-image: url(https://static.whatsbetter.me/img/nav/chats.png);
}

.icon-posts {
    background-image: url(https://static.whatsbetter.me/img/nav/posts.png);
}

.icon-donate {
    background-image: url(https://static.whatsbetter.me/img/nav/donate.png);
}

.icon-partnership {
    width: 26px !important;
    background-image: url(https://static.whatsbetter.me/img/nav/partnership.png);
}

.icon-check-round {
    background-image: url(https://static.whatsbetter.me/img/icons/check-round-blue.svg);
}

.icon-rate {
    background-image: url(https://static.whatsbetter.me/img/icons/rate.png);
}

.icon-empty {
    background-image: url(https://static.whatsbetter.me/img/icons/empty.png);
}

.icon-link {
    background-image: url(https://static.whatsbetter.me/img/icons/link.png);
    opacity: 0.3;
}

.icon-top10 {
    background-image: url(https://static.whatsbetter.me/img/icons/top10.svg);
    opacity: 0.3 !important;
}

.icon-users-outlines {
    background-image: url(https://static.whatsbetter.me/img/outlines/users.png);
}

.icon-filter-outlines {
    background-image: url(https://static.whatsbetter.me/img/outlines/filter.png);
}

.icon-description-outlines {
    background-image: url(https://static.whatsbetter.me/img/outlines/description.png);
}

.icon-medal-outlines {
    background-image: url(https://static.whatsbetter.me/img/outlines/medal.png);
}

.icon-desc {
    background-image: url(https://static.whatsbetter.me/img/icons/desc.svg);
}

.icon-star-black {
    background-image: url(https://static.whatsbetter.me/img/icons/star.svg?color=black);
}

.icon-my-scores {
    background-image: url(https://static.whatsbetter.me/img/icons/apply.svg);
}

[class*="font-icon"]:before {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    font-family: "texteditor";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-italic:before {
    content: "\0041";
}
.icon-ol:before {
    font-size: 20px;
    content: "\0042";
}
.icon-h1:before,
.icon-h2:before {
    content: "\0043";
}
.icon-h2:before {
    line-height: 16px;
}
.icon-ul:before {
    font-size: 18px;
    content: "\0044";
}
.icon-quotes:before {
    content: "\0045";
}
.icon-link:before {
    content: "\0046";
}
.icon-underline:before {
    content: "\0047";
}
.icon-bold:before {
    content: "\0048";
}

.icon-check-circle {
    background-image: url(https://static.whatsbetter.me/img/icons/check-circle.svg);
}

.icon-times-circle {
    background-image: url(https://static.whatsbetter.me/img/icons/times-circle.svg);
}

.icon-vk {
    background-image: url(https://static.whatsbetter.me/img/icons/vk.png);
}
.icon-telegram {
    background-image: url(https://static.whatsbetter.me/img/icons/telegram.png);
}
.icon-facebook {
    background-image: url(https://static.whatsbetter.me/img/icons/facebook.png);
}
.icon-google {
    background-image: url(https://static.whatsbetter.me/img/icons/google.png);
}

.icon-paper {
    background-image: url(https://static.whatsbetter.me/img/icons/paper.svg);
}

.icon-dislike {
    transform: scaleY(-1);
    background-image: url(https://static.whatsbetter.me/img/icons/like.svg);
}

i.icon.icon-friends {
    background-image: url(https://static.whatsbetter.me/img/icons/friends.svg);
    width: 24px;
    height: 20px;
    margin-left: -2px;
}

.icon-user-add {
    background-image: url(https://static.whatsbetter.me/img/icons/user-add.svg);
}

i.icon.icon-frsphere {
    background-image: url(https://static.whatsbetter.me/img/icons/frsphere.svg);
    width: 22px;
    height: 20px;
}

.criteria__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 4px;
    .landing-2-hashtag {
        cursor: pointer;
        backdrop-filter: blur(11.4px);
        border: 2px solid var(--lan-2-border-color-4);
        margin: 0;
        &:hover {
            border-color: var(--lan-2-color);
        }
    }
    .landing-2-hashtag.criteria--active {
        color: var(--lan-2-color);
        border-color: var(--lan-2-color);
    }
    .criteria__add {
        align-self: center;
    }
    .criteria__add-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: var(--lan-2-color);
        width: 44px;
        height: 44px;
        margin-left: 4px;
        z-index: 1;
        cursor: pointer;
        .plus-icon {
            width: 10px;
            height: 10px;
            background-image: url("https://static.whatsbetter.me/img/icons/plus.svg?color=FFFFFF");
        }
    }
}
.criteria-wrapper {
    display: flex;
    justify-content: center;
}
.criteria__step-preference.criteria__step-preference {
    width: min(99vw, 615px);
    height: 578px;
    padding: 20px 0;
}
.criteria__preference-title {
    font-weight: 600;
    margin-bottom: 24px;
    padding: 0 20px;
}
.criteria__preference-inner {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    gap: 16px 12px;
    padding: 0 20px;
}

.criteria__preference-item {
    width: calc((100% - 24px) / 3);
    margin-bottom: 12px;
    cursor: pointer;
}
.criteria__preference-item-image {
    border-radius: 10px;
    background: no-repeat center/cover;
    aspect-ratio: 3 / 2;
}
.criteria__preference-item-title {
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: break-word;
    hyphens: auto;
}

.criteria-add {
    background-color: var(--lan-2-primary);
    padding: 20px;
    border-radius: 24px;
    width: min(87vw, 672px);
    color: var(--text-color);
}
.criteria-add__title {
    font-weight: 600;
    margin-bottom: 20px;
}
.criteria-add__list {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    gap: 10px;
    height: 240px;
    margin-bottom: 28px;
}
.criteria-add__item {
    cursor: pointer;
    border-radius: 84px;
    padding: 10px 20px;
    border: 2px solid var(--lan-2-border-color-4);
    &:hover {
        border-color: var(--lan-2-color);
    }
    &.criteria-add__item--active {
        background-color: var(--lan-2-color);
    }
}
.criteria-add__buttons {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 10px;
    justify-content: space-between;
    @media (max-width: 400px) {
        & > * {
            width: 100%;
        }
    }
}
.criteria__filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 13.424px + 0.759vw, 28px);
    margin-bottom: clamp(32px, 25.968px + 1.772vw, 60px);
    .dropdown {
        align-self: flex-start;
    }
    @media (max-width: 768px) {
        flex-direction: column;
        align-items: initial;
        .dropdown {
            width: 100%;
        }
    }
}

.criteria-wrapper--animate {
    overflow: hidden;
    .criteria__list {
        animation: moveUp var(--init-animation) ease-out var(--init-delay) both;
    }
}
.criteria__popper-box {
    padding: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    background: var(--lan-2-primary);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
}
.criteria__step-award {
    width: min(812px, 99vw);
    background-color: var(--lan-2-primary);
}
.criteria__step-award-main {
    display: flex;
    gap: 20px;
    margin: 32px 0 28px 0;
    .property-list {
        align-self: flex-start;
    }
}
.criteria__step-award-line {
    width: 1px;
    background-color: var(--lan-2-border-color-4);
}
.criteria__step-award-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.criteria__award-right-image {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 12px;
    height: 271px;
    background: no-repeat center/cover
            url(https://static.whatsbetter.me/img/constructor/template-2/wawelberg-columns.jpg),
        var(--lan-2-background-5);
}
.criteria__step-award-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.criteria__award-right-title {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 8px;
}
.criteria__award-right-address {
    display: flex;
    align-items: center;
    color: var(--lan-2-text-secondary);
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 24px;
}
.location-icon--criteria {
    --width: 16px;
    --height: 20px;
}
@media (max-width: 768px) {
    .criteria__list {
        overflow: auto;
        flex-wrap: nowrap;
        padding-bottom: 14px;
        & > * {
            flex-shrink: 0;
        }
    }
}

.award-blur-card {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.award-blur-background {
    background: linear-gradient(
            var(--lan-2-background-16),
            var(--lan-2-background-16)
        ),
        center/cover url(https://static.whatsbetter.me/img/constructor/template-2/award_blur.jpg);
}
.award-blur-card__features {
    display: flex;
    gap: clamp(8px, 7.568px + 0.127vw, 10px);
    margin-bottom: clamp(24px, 22.704px + 0.38vw, 30px);
}
.award-blur-card__title {
    margin-top: 22px;
    margin-bottom: clamp(28px, 30.576px + -0.759vw, 16px);
    font-weight: 500;
    font-size: 28px;
    line-height: clamp(30.8px, 32px + -0.354vw, 25.2px);
    text-align: center;
    &:first-letter {
        text-transform: uppercase;
    }
}

.award-blur-card__features-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 9.456px + 0.158vw, 12.496px);
    border-radius: 8px;
    background: var(--lan-2-background-5);
    border: 1px solid var(--lan-2-border-color-8);
    flex-grow: 1;
    min-width: clamp(80px, 77.856px + 0.633vw, 90px);
}
.award-blur-card__features-label {
    font-size: 12px;
    color: var(--lan-2-text-secondary);
    margin-bottom: 8px;
}
.award-blur-card__features-value {
    display: flex;
    align-items: center;
    gap: 4px;
}

.award-property-key {
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    opacity: 0.5;
}
.award-property-value {
    font-size: 18px;
}

.dropdown {
    cursor: pointer;
    display: flex;
    padding: 8px;
    padding-right: 27px;
    font-weight: 400;
    color: #444;
    align-items: center;
    border-radius: var(--border_radius);
    position: relative;
    background-color: #f8f8f8;
    font-size: 14px;

    span {
        margin: 0 4px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: calc(100% - 18px);
    }

    .placeholder {
        color: #ccc;
    }
}

/*-------------------
    Hover
--------------------*/
.dropdown:hover {
    box-shadow: 0 0 0 2px rgba(0, 158, 255, 0.27);
}

/*-------------------
    Color
--------------------*/
.dropdown.white {
    background-color: #fff;
}

/*-------------------
    Bordered
--------------------*/
.dropdown.bordered {
    border: 1px solid #eee;
}

/*-------------------
    Sizes
--------------------*/
.dropdown.size-m {
    height: 32px;
}

.dropdown.size-xm {
    height: 40px;
    font-size: 14px;
}

.dropdown.size-l {
    height: 48px;
}

.dropdown-arrow {
    opacity: 0.75;
    cursor: pointer;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    height: 100%;
    width: 32px;
    justify-content: center;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    border-radius: 4px;
    z-index: 10000;
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    max-height: 224px;
}

.dropdown-menu__item {
    min-height: 36px;
    line-height: 36px;
    width: 100%;
    overflow: hidden;
    padding: 0 12px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;

    .size-xm & {
        min-height: 36px;
        line-height: 36px;
    }

    .size-m & {
        min-height: 30px;
        line-height: 30px;
    }

    &:hover {
        background-color: #f5f5f5;
    }

    &.active {
        background-color: #e8e8e8;
    }
}
.dropdown .wui {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}
.dropdown__multienum-search {
    display: inline-flex;
    flex-grow: 1;
    appearance: none;
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.basket {
    display: flex;
}

.removable-item {
    padding: 6px 10px;
    background-color: #f4f9ff;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #0a71d8;
    
    &:hover {
        background-color: #ebf4fd
    }
    
    .icon {
        margin-left: 12px ;
        opacity: .9
    }
    
    &:hover .icon {
        opacity: 1
    }
}
.characteristics {
    padding: clamp(50px, 40.32px + 2.848vw, 95.008px) 0;
    overflow: hidden;
    &.landing-2-ellipse::before {
        height: 534px;
        left: 0;
        top: 0;
        transform: rotate(-180deg);
        width: 134px;
    }
    &.landing-2-ellipse::after{
        content:"";
        right: 0;
        bottom: 0;
        width: 261px;
        height: 489px;
        opacity: 0.6;
        transform: translateX(50%) rotate(-180deg);
    }
}
.characteristics__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1043px;
    margin: 0 auto;
}
.characteristics__expand {
    cursor: pointer;
    border-radius: 16px;
    padding: 28px;
    background-color: var(--lan-2-background-5);
}
.characteristics__expand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.characteristics__label {
    font-size: clamp(16px, 15.136px + 0.253vw, 20px);
    line-height: 28px;
    font-weight: 600;
    a{
        color:inherit
    }
}
.characteristics__tag-label {
    font-weight: normal;
    color: var(--lan-2-text-secondary);
}

.characteristics__multienum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}
.characteristics__general {
    display: flex;
    align-items: center;
    gap: clamp(12px, 8.992px + 0.886vw, 26px);
    flex-wrap: wrap;
    margin-top: clamp(30px, 27.856px + 0.633vw, 40px);
}
.characteristics__property {
    border-radius: 1000px;
    padding: 12px 20px;
    background-color: var(--lan-2-background-11);
    font-weight: 600;
}
.chevron-arrow {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    background: no-repeat center/24px 24px var(--arrow-down-2),
        var(--lan-2-background-10);
    transition: rotate 0.35s;
}

.chevron-arrow--rotate {
    rotate: 0.5turn;
}

.animate-height {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease-out;
    & > * {
        overflow: hidden;
    }
}
.animate-height.expand {
    grid-template-rows: 1fr;
}

.compare {
    background-color: var(--lan-2-primary);
    .landing-2-hashtag {
        display: inline-block;
        margin: 20px;
    }
    .award-widget {
        position: absolute;
        top: 9%;
        right: 9%;
    }
}
.compare__inner {
    position: relative;
    padding-top: 9%;
    margin-bottom: -17%;
    aspect-ratio: 1.88;
    color: #fff;
    background: var(--gradient-3),
        no-repeat center/cover
            url("https://static.whatsbetter.me/img/constructor/template-2/hand-with-watch.jpg");
}
.compare__table {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    aspect-ratio: 1120/791;
    width: 100%;
    max-width: 1120px;
}

:root {
    --gold-color: #FCC779;
    --silver-color: #F1F0F0;
    --bronze-color: #FFA983;
    --top10-color: #F8C2E7;
    --top20-color: #D7FF9B;
    --top50-color: #93E1F3;
    --top100-color: #D1B0FD;

    --arank-color: #000000;
    --brank-color: #93211C;
    --crank-color: #C52323;
    --drank-color: #E17D2F;
    --erank-color: #108562;
    --frank-color: #33C400;
    --grank-color: #3D57CB;
    --hrank-color: #8129CE;
    --selfrank-color: #3d3d3d;
} 

.award {
    width: 180px;
    font-family: "Roboto Condensed";
}

.award-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1.6981;
    z-index: 98;
}
  

/*-------------------
    Awards Sizes
--------------------*/
.award.size-m {
    width: 100px;
}

.award.size-xm {
    width: 140px;
}

.award.award_pad.size-m {
    margin-right: 20px;
}
.award.award_pad.size-xm {
    padding-top: 18px;
    padding-bottom: 14px;
    margin-right: 30px;
}
.award.award_gpad.size-xm {
    padding-bottom: 14px;
    margin-right: 30px;
}


/*-------------------
    Awards Types
--------------------*/
.award-base {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(0);
}

.award-base_gold {
    background-image: url(https://static.whatsbetter.me/img/medals/base-gold.png);
}
.award-base_silver {
    background-image: url(https://static.whatsbetter.me/img/medals/base-silver.png);
}
.award-base_bronze {
    background-image: url(https://static.whatsbetter.me/img/medals/base-bronze.png);
}
.award-base_top10 {
    background-image: url(https://static.whatsbetter.me/img/medals/base-top10.png);
}
.award-base_top20 {
    background-image: url(https://static.whatsbetter.me/img/medals/base-top20.png);
}
.award-base_top50 {
    background-image: url(https://static.whatsbetter.me/img/medals/base-top50.png);
}
.award-base_top100 {
    background-image: url(https://static.whatsbetter.me/img/medals/base-top100.png);
}
.award-base_self {
    background-image: url(https://static.whatsbetter.me/img/medals/base-glass.png);
}

/*-------------------
    Award logo Types
--------------------*/
.award-logo {
    position: absolute;
    height: 90%;
    aspect-ratio: 1;
    top: 5%;
    left: 0;
    margin-left: 4%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 99;
}

.award-logo_gold {
    background-image: url(https://static.whatsbetter.me/img/medals/logo-gold.png);
}
.award-logo_silver {
    background-image: url(https://static.whatsbetter.me/img/medals/logo-silver.png);
}
.award-logo_bronze{
    background-image: url(https://static.whatsbetter.me/img/medals/logo-bronze.png);
}
.award-logo_top10{
    background-image: url(https://static.whatsbetter.me/img/medals/logo-top10.png);
}
.award-logo_top20{
    background-image: url(https://static.whatsbetter.me/img/medals/logo-top20.png);
}
.award-logo_top50{
    background-image: url(https://static.whatsbetter.me/img/medals/logo-top50.png);
}
.award-logo_top100{
    background-image: url(https://static.whatsbetter.me/img/medals/logo-top100.png);
}
.award-logo_self {
    background-image: url(https://static.whatsbetter.me/img/medals/logo-glass.png);
}

/*-------------------
    Award Georanks
--------------------*/
.award-georank {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #000;
    font-size: 16px;
    align-items: center;
    color: #fff;
    justify-content: center;
    padding-top: 1px;
    position: relative;

    div {
        z-index: 10; 
    }

    i {
        z-index: 1;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left:0;
    }

    .size-m & {
        font-size: 14px;
    }
}

.award-georank_a { 
    background-color: var(--arank-color) !important;
}
.award-georank_b { 
    background-color: var(--brank-color) !important;
}
.award-georank_c { 
    background-color: var(--crank-color) !important;
}
.award-georank_d { 
    background-color: var(--drank-color) !important;
}
.award-georank_e { 
    background-color: var(--erank-color) !important;
}
.award-georank_f { 
    background-color: var(--frank-color) !important;
}
.award-georank_g { 
    background-color: var(--grank-color) !important;
}
.award-georank_h { 
    background-color: var(--hrank-color) !important;
}
.award-georank_self {
    background-color: var(--selfrank-color);
}

/*-------------------
    Award Place
--------------------*/
.award-place {
    color: #000;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    aspect-ratio: 0.88;
    opacity: 76%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 700;
    z-index: 98;

    .size-m & {
        font-size: 36px;
    }

    .size-xm & {
        font-size: 54px;
    }

    .size-l & {
        font-size: 64px;
    }
}

.award-place_top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 24px;
    line-height: 24px;

    i {
        font-weight: 500;
        line-height: 14px;
        font-size: 14px; 
        font-style: normal;
    }

    .size-m & {
        font-size: 24px;
        line-height: 24px;
    }

    .size-xm & {
        font-size: 36px;
        line-height: 36px;
    }

    .size-l & {
        font-size: 48px;
        line-height: 48px;
    }
}

.size-l .award-place_top i {
    line-height: 24px;
    font-size: 24px; 
}


.size-xm .aw_top100 {
    font-size: 28px;
    line-height: 28px;
}

.size-xm .aw_top100 i {
    line-height: 14px;
    font-size: 14px; 
}

.award-place_self {
    background-repeat: no-repeat;
    background-size: 70% auto;
    background-position: center center;
    background-image: url(https://static.whatsbetter.me/img/medals/arrow-glass.svg);
}

/*-------------------
    Award Leaves
--------------------*/
.award-leaves {
    height: 148%;
    left: 80%;
    aspect-ratio: 0.5;
    display: flex;
    position: absolute;
    top: -24%;
}

.award-leaves_base {
    height: 100%;
    width: 100%;
    background-image: url(https://static.whatsbetter.me/img/medals/glass-leaves.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.award-leaves_rank {
    height: 100%;
    width: 100%;
    margin-left: -100%;
}

.award-leaves_rank_1 {
    background-image: url(https://static.whatsbetter.me/img/medals/class1.svg);
}
.award-leaves_rank_2 {
    background-image: url(https://static.whatsbetter.me/img/medals/class2.svg);
}
.award-leaves_rank_3 {
    background-image: url(https://static.whatsbetter.me/img/medals/class3.svg);
}
.award-leaves_rank_4 {
    background-image: url(https://static.whatsbetter.me/img/medals/class4.svg);
}
.award-leaves_rank_5 {
    background-image: url(https://static.whatsbetter.me/img/medals/class5.svg);
}
.award-leaves_rank_6 {
    background-image: url(https://static.whatsbetter.me/img/medals/class6.svg);
}
.award-leaves_rank_7 {
    background-image: url(https://static.whatsbetter.me/img/medals/class7.svg);
}

/*-------------------
    Award Geo
--------------------*/
.award-geo {
    overflow: hidden;
    width: 46%;
    margin-left: 27%;
    background-color: #000;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-width: 2px;
    border-style: solid;
    position: relative;
    height: 24px;
    border-bottom-width: 0;

    .size-m & {
        height: 18px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        width: 50%;
        margin-left: 25%;
    }

    .size-xm & {
        height: 22px;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        width: 52%;
        margin-left: 23%;
    }
}

.award-geo_gold {
    border-color: var(--gold-color);
}
.award-geo_silver {
    border-color: var(--silver-color);
}
.award-geo_bronze {
    border-color: var(--bronze-color);
}
.award-geo_top10 {
    border-color: var(--top10-color);
}
.award-geo_top20 {
    border-color: var(--top20-color);
}
.award-geo_top50 {
    border-color: var(--top50-color);
}
.award-geo_top100 {
    border-color: var(--top100-color);
}

.award-geo__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #FFF;
    opacity: 0.3;
    margin: 0 2px;
    display: block;
}


@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeHeightIn {
    0% {
        opacity: 0;
        height: 0;
    }
    1% {
        opacity: 0;
        height: auto;
    }
    100% {
        opacity: 1;
        height: auto;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes placeAppearance {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 76%;
    }
}

.award-place {
    .awardanim & {
        opacity: 0;
        animation: placeAppearance 0.2s ease 1.5s 1 normal forwards;
    }
}


@keyframes baseFlip {
    from {
        transform: rotateY(180deg)
    }
    to {
        transform: rotateY(0)
    }
}

.award-base {
    .awardanim & {
        opacity: 0;
        transform: rotateY(180deg);
        animation: fadeIn 1s ease 0s 1 normal forwards, baseFlip 0.8s ease 0s 1 normal forwards;
    }
}

@keyframes logoScale {
    0% {
        transform: scale(0);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes logoMove {
    0% {
        margin-left: 43%;
    }
    100% {
        margin-left: 2%;
    }
}

@keyframes leavesUprise {
    0% {
        opacity: 0;
        transform: rotate(30deg) translate(9%, 30%);
    }
    100% {
        transform: rotate(0) translate(0);
        opacity: 1;
    }
}

.award-leaves {
    .awardanim & {
        opacity: 0;
        transform: rotate(30deg) translate(9%, 30%);
        animation: leavesUprise 0.5s ease 2.7s 1 normal forwards;
    }
}

.award-logo {
    .awardanim & {
        opacity: 0;
        margin-left: 43%;
        animation: fadeIn 1s ease 0.5s 1 normal forwards, 
            logoScale 1s ease 0.5s 1 normal forwards,
            logoMove 0.5s ease 1.5s 1 normal forwards;
    }
}

/*-------------------
    Award Geo Rank
--------------------*/
@keyframes geoUprise {
    0% {
        opacity: 1;
        transform: translateY(100%) scaleY(1);
    }
    60% {
        opacity: 1;
        transform: translateY(-5%) scaleY(1.2);
    }
    80% {
        opacity: 1;
        transform: translateY(10%) scaleY(1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.award-geo {
    .awardanim & {
        opacity: 0;
        transform: translateY(100%);
        animation: geoUprise 0.75s ease 2.9s 1 normal forwards;
    }
}

@keyframes georankUprise {
    0% {
        transform: translateX(100%);
    }
    99% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes georankColorize {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.award-georank {
    .awardanim & {
        transform: translateX(100%);
        animation: georankUprise .7s ease 3.6s 1 normal forwards;

        i {
            opacity: 0;
            animation: georankColorize .2s ease 4.3s 1 normal forwards;
        }
    }
}

@keyframes propsSlideUp {
    0% {
        opacity: 0;
        height: 0;
        transform: translate3d(0, -50%, 0);
    }
    1% {
        opacity: 0;
        height: auto;
        transform: translate3d(0, -50%, 0);
    }
    85% {
        opacity: 0;
        height: auto;
        transform: translate3d(0, -50%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
        height: auto;
    }
}

.award-props {
    .awardanim & {
        opacity: 0;
        height: 0;
        transform: translate3d(0, -100%, 0);
        animation: propsSlideUp 1.5s ease 7.0s 1 normal forwards;
    }
}
/* cyrillic-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/19-7DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/19a7DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/1967DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/19G7DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/1927DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/19y7DQk6YvNkeg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    src: url(https://static.whatsbetter.me/fonts/robotocondensed/19K7DQk6YvM.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.award-props {
    display: flex;
    flex-direction: column;
}

.award-prop {
    background: #141516;
    padding: 2px 8px;
    width: 100%;
    height: 24px;
    border-radius: 12px;
    font-weight: 400;
    color: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    column-gap: 8px;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 8px;

    span:first-child {
        font-size: 14px;
        opacity: .5;
        white-space: nowrap;
    }

    span:last-child  {
        font-size: 14px;
        opacity: .9;
        white-space: nowrap;
    }

    &.bordered {
        outline: 1px solid hsla(0, 0%, 100%, .12);
    }

    &.expand {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
    }


}
.award-widget {
    width: 180px;
    font-family: "Roboto Condensed";
}

/*-------------------
    Award Pane
--------------------*/
@keyframes paneUprise {
    0% {
        opacity: 0; 
        padding-top: 0%;
    }
    75% {
        opacity: 1; 
        padding-top: 46%;
    }
    100% {
        opacity: 1; 
        padding-top: 42%;
    }
}


.award-pane {
    background-color: #1D1F20;
    border: 1px solid #2E2F2F;
    color: #fff;
    margin-top: -30%;
    padding-top: 42%;
    padding-bottom: 10%;
    padding-left: 8%;
    padding-right: 8%;

    display: flex;
    justify-content: center;
    flex-direction: column;

    border-bottom-left-radius: 52px;
    border-bottom-right-radius: 52px;
    z-index: 90;
    position: relative;


    .awardanim & {
        opacity: 0; 
        padding-top: 0%;
        animation: paneUprise .4s ease 1.1s 1 normal forwards;
    }
}


@keyframes nominationUprise {
    0% {
        opacity: 0;
        top: -200%;
        right: 0%;
    }
    100% {
        opacity: 1;
        right: 0%;
        top: 0;
    }
}

@keyframes nominationDownrise {
    0% {
        opacity: 1;
        right: 0%;
        top: 0;
    }
    100% {
        opacity: 0;
        right: 20%;
        top: 0;
    }
}

.award-pane__nomination {
    color: #d1ac49;
    font-size: 24px;
    font-weight: 500;
    line-height: 90%;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 200%;
    opacity: 0;
    animation: nominationUprise 0.3s ease 1.7s 1 normal forwards,
            nominationDownrise 0.5s ease 2.5s 1 normal forwards;
}

.award-pane__criterion {
    font-weight: 500;
    font-size: 24px;
    line-height: 90%;
    text-align: center;
    color: #fff;
    hyphens: auto;

    &:first-letter {
        text-transform: uppercase;
    }

    .awardanim & {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
        animation: fadeInRight .6s ease 2.6s 1 normal forwards;
    }
}

.award-prop__year {
    .awardanim & {
        opacity: 0;
        height: 0;
        animation: fadeHeightIn .5s ease 5s 1 normal forwards;
    }
}

.award-prop__popular {
    .awardanim & {
        opacity: 0;
        height: 0;
        animation: fadeHeightIn .5s ease 6s 1 normal forwards;
    }
}

@keyframes fadeOutFilters {
    0% {
        opacity: 1;
        right: 0%;
        top: 0;
    }
    100% {
        opacity: 0;
        right: 20%;
        top: 0;
    }
}

.award-pane__filters {
    color: #d1ac49;
    font-size: 24px;
    font-weight: 500;
    line-height: 90%;
    text-align: center;
    width: 100%;
    position: absolute;
    margin-top: 10%;

    .awardanim & {
        opacity: 0;
        height: 0;
        animation: fadeHeightIn 0.5s ease 7.0s 1 normal forwards,
            fadeOutFilters 0.3s ease 8s 1 normal forwards;
    }
}

/*-------------------
    Award Pane
--------------------*/
.award-pills {
    display: flex;
    align-items: center;
    width: 100;
    justify-content: space-between;
}

.award-pill {
    background: #141516;
    color: #fff;
    border-radius: 9px;
    display: inline-flex;
    column-gap: 4px;
    justify-content: center;
    align-items: center;
    height: 18px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    margin-bottom: 12px;
}

.award-options {
    .awardanim & {
        opacity: 0;
        animation: fadeIn .3s ease 9s 1 normal forwards;
    }
}

.award-footer {
    display: flex;
    justify-content: space-evenly;
    width: 88%;
    margin: 0px 6%;

    i {
        font-style: normal;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #fff;
        opacity: .5;
    }
}

.award-expand {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .8;
    column-gap: 4px;
    cursor: pointer;
    border-radius: 20px;
    width: 40px;
    height: 24px;
    background-color: #141516;
    border: 1px solid #222425;
    background-image: url(https://static.whatsbetter.me/img/medals/arrow.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.award-expand_up {
    margin: 4px auto;
    transform: rotate(180deg);

    .awardanim & {
        opacity: 0;
        animation: fadeIn .3s ease 9s 1 normal forwards;
    }
}

.award-whatsbetter {
    width: 100%;
    margin-top: 12px;
    aspect-ratio: 4.2;
    background-image: url(https://static.whatsbetter.me/img/medals/bottom-logo.svg);
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: center center;

    .awardanim & {
        opacity: 0;
        animation: fadeIn .3s ease 9s 1 normal forwards;
    }
}

.contacts {
    background-color: var(--lan-2-primary);
    overflow: hidden;
    color: var(--text-color);
    padding-bottom: 386px;
    padding: var(--section-space-top) 0;
    hr {
        border-color: var(--lan-2-border-color);
        margin: 20px 0;
    }
}
.contacts__top {
    position: relative;
    z-index: 0;
    &::after {
        content: "";
        position: absolute;
        width: 264px;
        height: 592px;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        background: var(--lan-2-color);
        filter: blur(232.55px);
        z-index: -1;
    }
}
.contacts__header {
    max-width: 849px;
    margin: 0;
}
.contacts__subtitle {
    margin-bottom: 10px;
}
.contacts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(356px, 1fr));
    text-align: center;
    gap: 74px;
    margin-bottom: 82px;
}
.contacts__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contacts__item-icon {
    width: 84px;
    height: 84px;
    background: no-repeat center;
    margin-bottom: 20px;
}
.contacts__item-title {
    font-weight: 600;
    margin-bottom: 10px;
}
.contacts__item-email {
    color: var(--lan-2-color);
    margin-bottom: 20px;
}
.contacts__description {
    font-size: clamp(14px, 12.704px + 0.38vw, 20px);
    line-height: clamp(20px, 18.272px + 0.506vw, 28px);
    letter-spacing: -0.012em;
    color: var(--lan-2-text-secondary);
    padding-bottom: clamp(32px, 21.664px + 3.038vw, 80px);
}
.contacts__item-btns {
    display: flex;
    gap: 20px;
    margin-top: auto;
}
.contacts__bottom {
    display: flex;
    align-items: center;
    gap: clamp(40px, 20.208px + 5.823vw, 132px);
    padding: clamp(0px, -66.672px + 5.556vw, 40px);
    background-color: var(--lan-2-background-5);
    border-radius: 24px;
    isolation: isolate;
}
.contacts__bottom-left {
    flex: 4 0 0;
    padding-left: clamp(32px, -43.008px + 6.25vw, 77.008px);
}
.contacts__bottom-right {
    flex: 6 0 0;
    cursor: pointer;
    border-radius: var(--border_radius-l);
    align-self: flex-start;
    height: 658px;

    background: no-repeat center/cover;
}
.contacts__bottom-title {
    font-weight: 600;
    margin-bottom: 20px;
}
.contacts__bottom-address {
    margin-bottom: 20px;
}
.contacts__bottom-extra {
    font-weight: 500;
    color: var(--lan-2-text-secondary);
}
.contacts__bottom-label {
    margin-bottom: 20px;
}
.contacts__bottom-contact {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--lan-2-color);
}
.contacts__bottom-contact--email {
    width: 1.35em;
    aspect-ratio: 1;
    margin-right: 10px;
    background: no-repeat center var(--icon);
}
.contacts__bottom-contact--phone {
    width: 1.35em;
    aspect-ratio: 1;
    margin-right: 10px;
    background: no-repeat center var(--icon);
}
@media (max-width: 1200px) {
    .contacts__bottom {
        flex-direction: column;
        background-color: transparent;
        align-items: initial;
    }
    .contacts__bottom-right {
        flex: auto;
        height: 400px;
        border-radius: 0;
        width: calc(100% + 2 * var(--padding));
        margin-left: calc(var(--padding) * -1);
    }
    .contacts__bottom-left {
        padding-left: 0;
    }
    .contacts__top::after {
        content: none;
    }
}

.mail-to:hover {
    text-decoration: underline;
}

.features {
    color: var(--text-color);
    background-color: var(--lan-2-primary);
    .landing-2-btn.landing-2-btn {
        border-radius: 12px;
        padding: 12px 20px;
    }
    .section-subtitle--lan-2 {
        margin-bottom: 10px;
    }
}
.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 30px;
    padding-bottom: 190px;
}
.features__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--gradient-1), no-repeat center/cover var(--bg-image);
    color: #fff;
    aspect-ratio: 1.554;
}
.features__item-logo {
    margin-top: 44px;
    background: no-repeat center/ cover;
    width: 52px;
    height: 32px;
}
.features__item-title {
    font-weight: 600;
    margin: 20px 0;
}
.features__item-subtitle {
    margin-bottom: 15px;
    font-size: 18px;
}
.features__item-btns {
    display: flex;
    gap: 11px;
}
.features__btn.features__btn {
    height: auto;
    padding: 12px 44px;
    font-weight: 600;
    border-radius: 1000px !important;
    color: white;
}
.features__btn-book {
    background-color: var(--lan-2-color);
}
.features__btn-details {
    background-color: transparent;
    border: 2px solid #fff;
}
.features__subtitle.features__subtitle {
    margin-bottom: 60px;
    text-align: center;
}

.footer {
    color: var(--text-color);
    background-color: var(--lan-2-background-11);
    padding-top: clamp(50px, 36.928px + 3.846vw, 80px);
    margin-top: auto;
    a,
    label {
        color: inherit;
    }
    a {
        cursor: pointer;
    }
}
.footer__main {
    display: flex;
    gap: 32px;
    padding-bottom: clamp(32px, 25.024px + 2.051vw, 48px);
    color: var(--lan-2-text-secondary);
}
.footer__navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    justify-items: center;
    flex-grow: 1;
    gap: 20px;
    a {
        text-align: center;
    }
}
.footer__copyright {
    border-top: 1px solid var(--lan-2-border-color);
    color: var(--lan-2-text-secondary);
    padding: 25px 0;
    .footer__copyright-right {
        display: inline-block;
    }
}
.footer__logo {
    align-self: flex-start;
}
.footer__join {
    position: relative;
    align-self: flex-start;
    .input.input {
        background-color: var(--lan-2-background-11);
        border-radius: var(--border_radius-l);
        height: auto;
    }
    input {
        padding: 12px 56px 12px 16px !important;
        color: var(--text-color);
        border-radius: inherit !important;
    }
    label {
        display: block;
        margin-bottom: 8px;
    }
}
.footer__input-icon {
    position: absolute;
    right: 18px;
    bottom: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: no-repeat center var(--icon);
}
.requisites-modal__wrapper .modal-window {
    color: var(--text-color);
    background-color: var(--lan-2-primary);
    border-radius: 16px;
}
.requisites-modal {
    border-radius: inherit;
    line-height: 1.5;
    font-size: 18px;
    text-align: center;
    span {
        display: inline-block;
        margin-top: 10px;
        font-weight: 600;
    }
}
.requisites-modal__content {
    padding: 24px 32px 32px 32px;
}
.requisites-modal__image {
    background: no-repeat center/cover
        url(https://dummyimage.com/600x5000/000/fff);
    height: 310px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.requisites-modal__title {
    margin-bottom: 10px;
    color: var(--lan-2-color);
}
.about-modal__wrapper {
    .modal-window {
        color: var(--text-color);
        background-color: var(--lan-2-primary);
    }
    .about-modal__logo {
        background: no-repeat 50% / 100% var(--logo-company);
        height: 38px;
        margin-bottom: 40px;
        width: 260px;
    }
    .about-modal {
        padding: 32px;
    }
    .about-modal__text {
        font-weight: 600;
        font-size: 17px;
        line-height: 22px;
    }
    .about-modal__feature {
        display: flex;
        align-items: center;
        margin-left: 12px;
        margin-top: 40px;
    }
    .about-modal__feature-icon {
        align-self: flex-start;
        background-image: var(--apply-icon);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        flex-shrink: 0;
        height: 20px;
        margin-right: 8px;
        width: 20px;
    }
    p,
    ul {
        margin: 16px 0;
    }
    ul {
        padding-left: 40px;
    }
}

@media (max-width: 980px) {
    .footer__navigation {
        color: var(--text-color);
        margin-top: 8px;
        grid-template-columns: repeat(
            auto-fit,
            minmax(max(160px, 100%/4 + 0.1%), 1fr)
        );
        width: 100%;
    }
    .footer__main {
        align-items: center;
        flex-direction: column;
    }
    .footer__join {
        width: 100%;
        border-top: 1px solid var(--lan-2-border-color);
        padding-top: 32px;
    }
    .footer__copyright {
        padding-bottom: 50px;
    }
    .footer__join,
    .footer__logo {
        align-self: center;
    }
}

.input-wrap {
	width: 100%;
}

.input {
    border-radius: var(--border_radius);
    width: 100%;
    position: relative;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #4a4a4a;
    
    .icon {
        display: block;
    }
}

/*-------------------
    Colors
--------------------*/
.input.white {
    background-color: #fff;
}

.input.grey {
    background-color: #f8f8f8;
}

/*-------------------
    Float
--------------------*/
.input.float-left {
   float: left; 
} 

.input.float-tight {
   float: right; 
} 

/*-------------------
    Border
--------------------*/
.input.bordered {
    border: 1px solid #eee; 
} 

.input.disabled {
    background-color: #e8e8e8;
} 



/*-------------------
    Input Text
--------------------*/
.input > input {
    padding: 0 12px 0 12px;
    width: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    font-family: inherit;
    font-weight: 400;
    font-size: inherit;
    color: inherit;
    height: inherit;
    position: relative;
    flex: 1;
    border-radius: 4px;
    min-height: 100%;

    &::-webkit-input-placeholder {
        color: #9B9B9B;
        font-size: inherit;
        font-weight: 400;
        font-family: inherit;
    }

    /* Chrome, Safari, Edge, Opera */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    /* Firefox */
    &[type=number] {
        -moz-appearance: textfield;
    }
}

.input.input_icon > input {
    padding-left: 40px;
}

.input.close > input {
    padding-right: 32px;
}

/*-------------------
    Hover
--------------------*/
.input:not(.disabled) > input:hover {
    box-shadow: 0px 0px 0px 2px rgba(0, 158, 255, 0.27);
}

/* .input.disabled > input:hover {
    box-shadow: 0;
} */


/*-------------------
    Focus
--------------------*/
.input > input:focus  {
  box-shadow: 0px 0px 0px 1px rgba(0, 158, 255, 0.5);
}

/*-------------------
    Error
--------------------*/
.input.error > input {
    background-color: rgba(255,85,85, .1);
    color: #ff5555;
}
.input.error > input::-webkit-input-placeholder {
    color: #ff5555;
}
.input.error > input:focus  {
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.4);
}
.input.error > input:hover {
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
}

.error-message {
	color: #f55;
    font-size: 14px;
    font-weight: 500;
    padding-top: 6px;
}


/*-------------------
    Sizes
--------------------*/
.input.size-s {
    height: 24px; 
    line-height: 24px;
    border-radius: 2px;
    font-size: 14px;
}

.input.size-m {
    height: 32px; 
    line-height: 32px;
    border-radius: 4px;
    font-size: 14px;
    
    i.icon.size-s {
        size: 16px;
    }
}

.input.size-xm {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    
    i.icon.size-s {
        size: 16px;
    }
}

.input.size-xxm {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
}

.input.size-l {
    height: 56px;
    line-height: 56px;
}

.input-icon {
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .icon {
        display: block;
    }
}

.input.size-m .input-icon{
    size: 32px; 
}

.input.size-xm .input-icon{
    size: 40px; 
}

.input.size-l .input-icon{
    size: 48px; 
}

.input-close {
    opacity: .75;
    cursor: pointer;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    height: 100%;
    width: 32px;
    justify-content: center;
    align-items: center;
}

.input .icon-search {
    opacity: 0.3;
}

.wui.one {
    width: 6.25%;
}
.wui.two {
    width: 12.5%;
}
.wui.three {
    width: 18.75%;
}
.wui.four {
    width: 25%;
}
.wui.five {
    width: 31.25%;
}
.wui.six {
    width: 37.5%;
}
.wui.seven {
    width: 43.75%;
}
.wui.eight {
    width: 50%;
}
.wui.nine {
    width: 56.25%;    
}
.wui.ten {
    width: 62.5%;
}
.wui.eleven {
    width: 68.75%;
}
.wui.twelve {
    width: 75%;
}
.wui.thirteen {
    width: 81.25%;
}
.wui.fourteen {
    width: 87,5%;
}
.wui.fifteen {
    width: 93.75%;
}
.wui.sixteen {
    width: 100%;
}
.modal {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0!important;
    left: 0!important;
    width: 100%;
    height: 100%;
    overflow: auto;
    align-items: center;
    background-color: rgba(0,0,0,.85);
    z-index: 9000;
    user-select: none;
    will-change: opacity;
    z-index: 1010;
    justify-content: center;
    flex-flow: row wrap;
}

.modal-window {
    z-index: 1001;
    text-align: left;
    background: #fff;
    border: none;
    margin: 1rem auto;
    border-radius: var(--border_radius);
    
    @media (max-width: 768px) {
        width: 100%;
        margin: 0;
    }
    
    .modal_basic & {
		background: transparent;
    }
    .modal_fullscreen & {
        width: 100%;
        min-height: 100%;
        margin: 0;
        border-radius: 0;
    }
}

/*-------------------
    Header
--------------------*/
.modal-header {
    min-height: 68px;
    background: #f5f5f5;
    border-top-left-radius: var(--border_radius);
    border-top-right-radius: var(--border_radius);
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 24px;
    
    @media (max-width: 480px) {
        position: fixed;
        top: 0;
        width: 100%;
        min-height: 56px;
        border-radius: 0;
        z-index: 9010;
    }
}

.modal-header.with-button {
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 500;
    color: #2a364e;
}

/*-------------------
    Scrolling
--------------------*/
.modal-window.scrolling {
    padding: 0; 
}


/*-------------------
    Sizes
--------------------*/
.size-s .modal-window {
    width: 360px;
}
.size-m .modal-window{
    width: 540px;
}

@media (max-width: 768px) {
    .size-m .modal-window{
        width: 100%;
    }
}
.size-l .modal-window{
    width: 720px;
}

@media (max-width: 768px) {
    .size-l .modal-window{
        width: 100%;
    }
}
    
.size-xl .modal-window {
    width: 900px;
}

.size-xxl .modal-window {
    width: 1164px;
}
@media (max-width: 1164px) {
    .size-xxl .modal-window{
        width: 100%;
    }
}

.modal-tabs {
    padding: 24px 32px 4px 32px; 
}

.modal-content {
    padding: 24px; 
    min-height: 300px;
    
    @media (max-width: 480px) {
        padding-top: 80px;
    }
    
    p {
        font-size: 16px;
    }

    h3 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
        margin-top: 20px;
    }

	&.pad-32 {
   		padding: 32px; 
	}
}

.modal-search {
    padding: 6px 24px;
    border-bottom: 1px solid #eee;
}

.modal-search__input {
    background-color: #fff;
}
   

/*-------------------
    Footer
--------------------*/
.modal-footer {
    text-align: right;
    padding: 16px;
    padding: 16px;
    //background-color: #fafafa;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #eaeaea;
    
    .btn-group {
        display: inline-block;
    }
}

.modal-content.scrolling {
    max-height: calc(80vh - 5em);
    overflow-y: auto;
}


/*-------------------
    Modal Tools
--------------------*/
.modal-close {
    position: fixed;
	top: 16px;
    right: 24px;
    z-index: 1090;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 50%;
}

.modal-expand {
    position: absolute;
    left: calc(100% + 8px);
    top: 4px;
    
    @media (max-width: 480px) {
        display: none;
    }
}


.gallery-lan-2 {
    background-color: var(--lan-2-primary);
    padding: var(--section-space-top) 0
        clamp(125.008px, 121.776px + 0.949vw, 140px) 0;
    position: relative;
    .slider-container--lan-2 .gallery-lan-2__item {
        width: 288px;
        aspect-ratio: 288/468 !important;
        height: auto;
        margin: 0 4px;
    }
}
.gallery-lan-2__top {
    text-align: center;
    padding-bottom: clamp(24px, 19.488px + 1.329vw, 45.008px);
}
.gallery-lan-2__item {
    position: relative;
    border-radius: 24px;
    background: no-repeat center/cover;
    height: 277px;
    min-width: 200px;
    flex-shrink: 0;
    &:hover {
        .gallery-lan-2__book-btn {
            pointer-events: all;
            opacity: 1;
        }
    }
}
.gallery-lan-2__item:first-child {
    margin-left: auto;
}
.gallery-lan-2__item:last-child {
    margin-right: auto;
}
.gallery-lan-2__lines {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1080px;
    position: absolute;
    inset: 0;
}
.gallery-lan-2__book-btn {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: 80%;
    font-size: 14px;
    border-radius: 12px !important;
    transition: opacity 0.35s ease-in-out;
}
.gallery-lan-2__modal-book {
    position: absolute;
    left: 32px;
    bottom: 32px;
    border-radius: 12px !important;
    width: 256px;
}
.lan-2-gallery__container {
    display: flex;
    gap: 16px;
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;

    --width: 0;
    --length: 0;
    --viewportWidth: 0;

    & > * {
        animation: slideLeft var(--length) linear infinite;
    }
    &:nth-child(2) {
        transform: scaleX(-1);
        .gallery-lan-2__book-btn {
            transform: scaleX(-1);
        }
    }
}
.lan-2-gallery__container.stop-animation {
    transform: none;
    & > * {
        animation: none;
        .gallery-lan-2__book-btn {
            transform: none;
        }
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(
            calc((var(--width) - var(--viewportWidth)) * -1px)
        );
    }
}

/* @keyframes slideRight {
    0% {
        transform: translateX(
            calc((var(--width) * -1px + var(--viewportWidth) * 1px))
        );
    }
    100% {
        transform: translateX(0);
    }
} */

.lan-2-gallery__container + .lan-2-gallery__container {
    margin-top: 16px;
}
.lan-2-gallery__slider {
    position: relative;
    .loader {
        position: absolute;
    }
}

@media (max-width: 768px) {
    .lan-2-gallery__slider {
        min-height: auto;
    }
}

.modgallery {
    display: flex;
    flex-direction: row;
}

.modgallery__left {
    width: 70%;
    background-color: #222;
    padding: 12px;

	&.no-right {
		width: 100%;
	}
}

.modgallery__right {
    width: 30%;
    background-color: #fff;
    padding: 12px;

	&.no-right {
		display: none;
	}
}

.gallery {
   height: 80vh;
   position: relative;
   background-color: #2a2a2a;
   border-radius: 16px;

   .slick-slide {
		height: 80vh;
	    margin-left:0;
   	 	margin-right: 0;
		background-color: transparent;
   }

   .slick-list {
		height: 80vh;
   }
}

.gallery__img {
	height: 80vh;
	border-radius: 16px;
	background-color: #2a2a2a;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.gallery-opinion__text {
    font-size: 14px;
    line-height: 16px;
    color: #333;
    font-weight: 400;
    white-space: pre-line;
    padding: 8px 0 0 40px;
}

.gallery-opinion__score {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 0px 0 40px;
}

.pgallery-thumbs {
    list-style: none;
    display: block;
    text-align: center;
    margin: 12px 0;
    max-width: 1024px;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 0;
    
    
    li {
        display: inline-block;
        width: 64px;
        height: 64px;
        margin: 0 8px;
        cursor: pointer;
    }
    
    .slick-active {
        outline: 4px solid #337ab7;
    }
}

.pgallery-thumbs__item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    
    
}

.gallery__img-counter {
    font-weight: 500;
    font-size: 14px;
    width: 80px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: rgba(0,0,0,.4);
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
	border-radius: var(--border_radius);
}


.gallery-arrow {
    color: #fff;
    border-radius: 9px;
    background-color: rgba(0,0,0, .5);
    width: 60px;
    height: 60px;
    top: 50%;
    background-size: 90%;
    background-size: 32px 32px;
    background-image: url(https://static.whatsbetter.me/img/icons/arrow-left.svg);
    background-repeat: no-repeat;
    background-position: center;
    border: 0;
    cursor: pointer;
    outline: 0;
    position: absolute;
    z-index: 301;
    
}

.gallery-next {
    right: 0; 
    
}

.gallery-prev {
    left: 0;
    transform: rotate(180deg);
}
.user {
    display: flex;
	height: 100%;
	align-items: center;
}

/*-------------------
    Sizes
--------------------*/
.user.size-s {
    height: 24px;
}
.user.size-m {
    height: 32px;
}
.user.size-l {
    height: 48px;
}
.user.size-96 {
    height: 96px;
}



.user-pict {


    /* .size-s & {
        width: 24px;
    }
    
    .size-m & {
        width: 32px;
    }
    
    .size-l & {
        width: 48px;
    }

    .size-96 & {
        width: 96px;
    } */
}

.user-info {
    padding-left: 8px;
	flex: 1;
    display: flex;
  	flex-direction: column;
	flex: 1;

    .size-l,
    .size-96 & {
        padding-left: 16px;
    }
}

.user-info__name {
    font-size: 12px;
	display: block;
    text-overflow: ellipsis;
    color: #222;  
    
    .user.size-m & {
		line-height: 16px;
        font-weight: 600;
        font-size: 14px;
    }
    
    .user.size-l &,
    .user.size-96 & {
        font-weight: 500;
        font-size: 16px;
		line-height: 18px;
        color: #4A4A4A;
    }

}

a.user-info__name {
    cursor: pointer;
    color: #3d71a5;  
    
    &:active,
    &:hover,
    &:focus {
        color: #3d71a5; 
    }  
    
    &:hover{
        text-decoration: underline;
    }
}

.user-info__subtitle {
    font-weight: 400;
    font-size: 12px;
    color: #9B9B9B;
	margin-top: 4px;
    
    /* .user_size_l & {
        font-weight: 400;
        font-size: 14px;
        color: #9B9B9B;
    } */
}

.user-badge {
    padding-left: 8px;
}

.user-select {
    display: table-cell;
    vertical-align: middle;
    width: 16px;
}


/*-------------------
    CUSTOM
--------------------*/
.user_segment{
	margin-top: 12px;
    background: #fff;
    width: 100%;
    cursor: pointer;
}

.user_postpreview{
    margin-bottom: 12px;
}

.user_chats{
    margin-bottom: 8px;
    width: 100%;
    background-color: #fff;
    padding: 8px;
	border-radius: var(--border_radius);
    cursor: pointer
}

.user-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f1f1;
    align-items: center;
    
    &:last-child {
        border-bottom: 0;
    }
}
.avatar {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
    background-color: #f5f5f5;
}

.avatar_user_default {
    background-image: url(https://static.whatsbetter.me/img/icons/user-default.svg);
    opacity: 0.3;
}

.avatar_sphere {
    border-radius: 8px
}

.avatar_entity {
    border-radius: 8px
}

.avatar_sphere_default {
    background-image: url(https://static.whatsbetter.me/img/ui/sphere-default.png);
}

.avatar_entity_default {
    background-image: url(https://static.whatsbetter.me/img/icons/entity-default.jpeg);
    opacity: 0.5;
}
/*-------------------
    Fitted
--------------------*/
.avatar.fitted {
    display: inline-block;
    float: left;
}

/*-------------------
    Sizes
--------------------*/
.avatar.size-l {
    size: 48px;
    width: 48px;
    height: 48px;
}
.avatar.size-xm {
    size: 40px;
    width: 40px;
    height: 40px;
}
.avatar.size-m {
    size: 32px;
    width: 32px;
    height: 32px;
}
.avatar.size-s {
    height: 24px;
    width: 24px;
    size: 24px;
}
.avatar.size-96 {
    size: 96px;
}
.avatar.size-xxl {
    size: 128px;
}

/*-------------------
    Group
--------------------*/
.avatar-group.fitted {
    float: left;
    margin-right: 24px;
    clear: fix;
}

.avatar-group .avatar {
    border: 1px solid #E5E5E5;
    float: left;
    margin-right: -16px;
}

.badge {
    display: inline-block;
    background-color: #ccc;
    font-weight: 600;
    text-align: center;
    margin: 0 2px;

    &:empty {
        display: none;
    }
}

.badge.red {
    background-color: #f55;
    color: #fff;
}
.badge.grey {
    background-color: #eee;
    color: #000;
}
.badge.blue {
    background-color: var(--main-color);
    color: #fff;
}

.badge.round {
    border-radius: 50%;
    padding: 0;
}

/*-------------------
    Sizes String
--------------------*/

.badge.size-xs {
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    min-width: 16px;
    border-radius: 8px;
    padding: 0 4px;
}

.badge.size-20 {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    min-width: 20px;
    border-radius: 10px;
    padding: 0 6px;
}

.badge.size-s {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    min-width: 24px;
    border-radius: 12px;
    padding: 0 6px;
}
.badge.size-m {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    min-width: 32px;
    border-radius: 16px;
    padding: 0 8px;
}


/*--------------
    Content
---------------*/

.wui.checkbox {
    position: relative;
    display: flex;
    backface-visibility: hidden;
    outline: none;
    vertical-align: baseline;
    font-style: normal;
    min-height: 24px;
    font-size: 1rem;
    line-height: 24px;
    min-width: 24px;
}

/* HTML Checkbox */
.wui.checkbox input[type="checkbox"],
.wui.checkbox input[type="radio"] {
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0 !important;
    outline: none;
    z-index: 3;
    width: 24px;
    height: 24px;
}

/*--------------
        Box
  ---------------*/
.wui.checkbox label {
    cursor: auto;
    position: relative;
    display: block;
    padding-left: 34px;
    outline: none;
    font-size: 14px;
}
.wui.checkbox label:before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    content: '';
    background: #F6F6F6;
    border-radius: 6px;
    transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
    border: 2px solid #E4E4E4;
}

/*--------------
      Checkmark
  ---------------*/

.wui.checkbox label:after {
    position: absolute;
    font-size: 14px;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    text-align: center;
    opacity: 0;
    color: rgba(0, 0, 0, 0.87);
    transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

/*--------------
        Label
  ---------------*/


/* Inside */
.wui.checkbox label,
.wui.checkbox+label {
    color: rgba(0, 0, 0, 0.87);
    transition: color 0.1s ease;
}

/* Outside */
.wui.checkbox+label {
    vertical-align: middle;
}


/*******************************
             States
  *******************************/


/*--------------
        Hover
  ---------------*/

.wui.checkbox label:hover::before {
    background: #F6F6F6;
    border-color: rgba(34, 36, 38, 0.35);
}

.wui.checkbox label:hover,
.wui.checkbox+label:hover {
    color: rgba(0, 0, 0, 0.8);
}

/*--------------
        Down
  ---------------*/

.wui.checkbox label:active::before {
    background: #F9FAFB;
    border-color: rgba(34, 36, 38, 0.35);
}

.wui.checkbox label:active::after {
    color: rgba(0, 0, 0, 0.95);
}

.wui.checkbox input:active~label {
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
       Focus
  ---------------*/

.wui.checkbox input:focus~label:before {
    background: #F6F6F6;
    border-color: #96C8DA;
}

.wui.checkbox input:focus~label:after {
    color: rgba(0, 0, 0, 0.95);
}

.wui.checkbox input:focus~label {
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
       Active
  ---------------*/

.wui.checkbox input:checked~label:before {
    background: #F6F6F6;
    border-color: rgba(34, 36, 38, 0.35);
}

.wui.checkbox input:checked~label:after {
    opacity: 1;
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
    Indeterminate
  ---------------*/

.wui.checkbox input:not([type=radio]):indeterminate~label:before {
    background: #F6F6F6;
    border-color: rgba(34, 36, 38, 0.35);
}

.wui.checkbox input:not([type=radio]):indeterminate~label:after {
    opacity: 1;
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
    Active Focus
  ---------------*/

.wui.checkbox input:not([type=radio]):indeterminate:focus~label:before,
.wui.checkbox input:checked:focus~label:before {
    background: #F6F6F6;
    border-color: #96C8DA;
}

.wui.checkbox input:not([type=radio]):indeterminate:focus~label:after,

.wui.checkbox input:checked:focus~label:after {
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
      Read-Only
  ---------------*/

.wui.read-only.checkbox,
.wui.read-only.checkbox label {
    cursor: default;
}

/*--------------
       Disabled
  ---------------*/
.wui.disabled.checkbox label,
.wui.checkbox input[disabled]~label {
    cursor: default !important;
    opacity: 0.5;
    color: #000000;
}

/*--------------
       Hidden
  ---------------*/


/* Initialized checkbox moves input below element
   to prevent manually triggering */
.wui.checkbox input.hidden {
    z-index: -1;
}

/* Selectable Label */
.wui.checkbox input.hidden+label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*******************************
               Types
  *******************************/


/*--------------
       Radio
  ---------------*/

.wui.radio.checkbox {
    min-height: 15px;
}

.wui.radio.checkbox label {
    padding-left: 1.85714em;
}

/* Box */
.wui.radio.checkbox label:before {
    content: '';
    transform: none;
    width: 15px;
    height: 15px;
    border-radius: 6px;
    top: 1px;
    left: 0px;
}

/* Bullet */
.wui.radio.checkbox label:after {
    border: none;
    content: '' !important;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

/* Radio Checkbox */
.wui.radio.checkbox label:after {
    top: 1px;
    left: 0px;
    width: 15px;
    height: 15px;
    border-radius: 500rem;
    transform: scale(0.46666667);
    background-color: rgba(0, 0, 0, 0.87);
}

/* Focus */
.wui.radio.checkbox input:focus~label:before {
    background-color: #F6F6F6;
}

.wui.radio.checkbox input:focus~label:after {
    background-color: rgba(0, 0, 0, 0.95);
}

/* Indeterminate */
.wui.radio.checkbox input:indeterminate~label:after {
    opacity: 0;
}

/* Active */
.wui.radio.checkbox input:checked~label:before {
    background-color: #F6F6F6;
}

.wui.radio.checkbox input:checked~label:after {
    background-color: rgba(0, 0, 0, 0.95);
}

/* Active Focus */
.wui.radio.checkbox input:focus:checked~label:before {
    background-color: #F6F6F6;
}

.wui.radio.checkbox input:focus:checked~label:after {
    background-color: rgba(0, 0, 0, 0.95);
}

/*--------------
       Toggle
  ---------------*/

.wui.toggle.checkbox {
    min-height: 1.5rem;
}

/* Input */
.wui.toggle.checkbox input {
    width: 3.5rem;
    height: 1.5rem;
}

/* Label */
.wui.toggle.checkbox label {
    min-height: 1.5rem;
    padding-left: 4.5rem;
    color: rgba(0, 0, 0, 0.87);
}

.wui.toggle.checkbox label {
    padding-top: 0.15em;
}

/* Switch */
.wui.toggle.checkbox label:before {
    display: block;
    position: absolute;
    content: '';
    z-index: 1;
    transform: none;
    border: none;
    top: 0rem;
    background: rgba(21, 22, 23, 0.12);
    box-shadow: none;
    width: 3.5rem;
    height: 1.5rem;
    border-radius: 500rem;
}

/* Handle */
.wui.toggle.checkbox label:after {
    background: #FFFFFF;
    position: absolute;
    content: '' !important;
    opacity: 1;
    z-index: 2;
    border: none;
    width: 20px;
    height: 20px;
    margin: 2px;
    top: 0rem;
    left: 2px;
    border-radius: 500rem;
    transition: background 0.3s ease, left 0.3s ease;
}

.wui.toggle.checkbox input~label:after {
    left: 0;
}

/* Focus */
.wui.toggle.checkbox input:focus~label:before {
    background-color: rgba(21, 22, 23, 0.12);
    border: none;
}

/* Hover */
.wui.toggle.checkbox label:hover::before {
    background-color: rgba(0, 0, 0, 0.15);
    border: none;
}

/* Active */
.wui.toggle.checkbox input:checked~label {
    color: rgba(0, 0, 0, 0.95) !important;
}

.wui.toggle.checkbox input:checked~label:before {
    background-color: var(--blue) !important;
}

.wui.toggle.checkbox input:checked~label:after {
    left: 32px;
    background-color: #fff;
}

/* Active Focus */
.wui.toggle.checkbox input:focus:checked~label {
    color: rgba(0, 0, 0, 0.95) !important;
}

.wui.toggle.checkbox input:focus:checked~label:before {
    background-color: #0d71bb !important;
}


/*******************************
              Variations
  *******************************/


/*--------------
       Fitted
  ---------------*/
.wui.fitted.checkbox label {
    padding-left: 0em !important;
}

.wui.fitted.toggle.checkbox,
.wui.fitted.toggle.checkbox {
    width: 3.5rem;
}

.wui.fitted.slider.checkbox,
.wui.fitted.slider.checkbox {
    width: 3.5rem;
}


/*******************************
           Theme Overrides
  *******************************/

  @font-face {
    font-family: 'Checkbox';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBSoAAAC8AAAAYGNtYXAXVtKHAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZoeAkUYAAAF4AAAAkGhlYWQpjCoZAAACCAAAADZoaGVhBzYDxgAAAkAAAAAkaG10eAoAAAAAAAJkAAAAFGxvY2EAKABcAAACeAAAAAxtYXhwAAcAGQAAAoQAAAAgbmFtZYDcQUgAAAKkAAABknBvc3QAAwAAAAAEOAAAACAAAwMAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QD//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAD/wAAAA8AAAgAANzkBAAAAAAEAAP/AAAADwAACAAA3OQEAAAAAAQAA/8AAAAPAAAIAADc5AQAAAAABAAD/wAN0A8AAFgAAARYUBwEGIi8BJjQ3NjIfARYyNwE2MhcDdAwM/pElaiaZDAwNIw2YDSMNAW4NIw0CtA0jDf6SJiaZDCQMDQ2ZDAwBbwwMAAABAAAAAQAAasJtiV8PPPUACwQAAAAAAON8cs4AAAAA43xyzgAA/8ADdAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAN0AAEAAAAAAAAAAAAAAAAAAAAFBAAAAAAAAAAAAAAAAgAAAAQAAAAAAAAAAAoAFAAeAEgAAQAAAAUAFwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAgAAAABAAAAAAACAAcAaQABAAAAAAADAAgAOQABAAAAAAAEAAgAfgABAAAAAAAFAAsAGAABAAAAAAAGAAgAUQABAAAAAAAKABoAlgADAAEECQABABAACAADAAEECQACAA4AcAADAAEECQADABAAQQADAAEECQAEABAAhgADAAEECQAFABYAIwADAAEECQAGABAAWQADAAEECQAKADQAsGNoZWNrYm94AGMAaABlAGMAawBiAG8AeFZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGNoZWNrYm94AGMAaABlAGMAawBiAG8AeGNoZWNrYm94AGMAaABlAGMAawBiAG8AeFJlZ3VsYXIAUgBlAGcAdQBsAGEAcmNoZWNrYm94AGMAaABlAGMAawBiAG8AeEZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype');
  }

/* Checkmark */
.wui.checkbox label:after {
    font-family: 'Checkbox';
    background-color: #0066FF;
    border-radius: 6px;
    color: white;
}

/* Checked */
.wui.checkbox input:checked~label:after {
    content: '\e900';
    font-size: 20px;
    color: white;
}

/* Indeterminate */
.wui.checkbox input:indeterminate~label:after {
    font-size: 12px;
    content: '\e801';
    color: white;
}
.stars {
    display: flex;
	align-items: center;
}
.stars__item {
    background-repeat: no-repeat;
    background-size: contain;
    size: 16px;
    margin-right: 4px;

}

.stars__item_yellow {
	background-image: url(https://static.whatsbetter.me/img/icons/star.svg?color=FFC107);
}
.stars__item_half {
    background-image: url(https://static.whatsbetter.me/img/icons/star-half.svg?color=FFC107);
}
.stars__item_grey {
    background-image: url(https://static.whatsbetter.me/img/icons/star.svg?color=E2E2E2);
}

.stars__score {
    font-size: 18px;
    font-weight: 600;
    padding-left: 10px;
    color: #000;

	&.white {
		color: #fff;
	}

	&.black {
        color: #000;
	}
}

.stars.size-xm {
	height: 28px;

	.stars__item{
		size: 20px;
	}

	.stars__score{
		line-height: 28px;
		font-size: 22px;
    	font-weight: 600;
    	padding-left: 10px;
	}
}

.stars.size-s {
	height: 24px;

	.stars__item {
		size: 16px;
        margin-right: 2px;
	}

	.stars__score{
		line-height: 24px;
		font-size: 16px;
    	font-weight: 600;
    	padding-left: 4px;
	}
}


.top-landing-2 {
    --init-delay: 0.5s;
    --init-animation: 1s;
    --award-animation: 1.25s;
    --btn-animation: 0.5s;

    position: relative;
    overflow: hidden;
    height: 100dvh;
    color: #fff;
    background: no-repeat center/cover var(--bg-image);

    display: flex;
    flex-direction: column;
    .section-subtitle--lan-2 {
        line-height: clamp(36px, 25.248px + 3.165vw, 86px);
        font-size: 64px;
    }
    .criteria-wrapper {
        flex-grow: 1;
        justify-content: flex-start;
    }
    .awards {
        top: 15px;
        right: 0;
        isolation: isolate;
    }
    .top-landing-2__award-placeholder {
        width: 270px;
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-top: clamp(20px, 16.768px + 0.949vw, 35.008px);
        padding-top: var(--header-height);
    }
    .landing-2-btn.landing-2-btn {
        --padding: clamp(9.008px, 8.352px + 0.19vw, 12px)
            clamp(16px, 15.136px + 0.253vw, 20px);
    }
    .award_slide {
        position: static;
    }
    .awards {
        width: auto;
        justify-content: center;
    }
    .award {
        width: 100%;
    }
    .award-widget {
        width: clamp(120px, 131.392px + 2.532vw, 160px);
    }
    .award-pane__criterion,
    .award-pane__nomination {
        font-size: clamp(11.008px, 8.208px + 0.823vw, 24px);
    }
    /* .award-pills {
        flex-wrap: wrap;
    } */
    .award-pill {
        flex-shrink: 0;
    }
    .awards-arrow_previos {
        left: -25%;
    }
    .awards-arrow_next {
        right: -25%;
    }
}

.top-landing-2__substrate-1 {
    position: absolute;
    background: no-repeat center/cover var(--gradient-6);
    left: 0;
    top: 0;
    width: 44%;
    height: 100%;
}
.top-landing-2__substrate-2 {
    content: "";
    position: absolute;
    background: no-repeat center/cover var(--gradient-7);
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
}
.top-landing-2__criteria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: clamp(20px, 2.784px + 5.063vw, 100px) 0
        clamp(10px, -0.752px + 3.165vw, 60px) 0;
    .landing-2-btn {
        margin: 0 auto;
    }
}
.top-landing-2__top {
    display: flex;
    flex-direction: column;
}
.top-landing-2__main-text-wrapper {
    position: relative;
    overflow: hidden;
}
.top-landing-2__main-text {
    font-weight: 700;
    font-size: clamp(18px, 13.264px + 1.392vw, 40px);
    line-height: clamp(20px, 12.256px + 2.278vw, 56px);

    .landing-2-hashtag {
        border-radius: clamp(10px, 8.704px + 0.38vw, 16px);
        font-size: clamp(16px, 14.272px + 0.506vw, 24px);
        line-height: clamp(40px, 36.56px + 1.013vw, 56px);
        margin-top: 8px;
        padding: 2px clamp(6px, 2.992px + 0.886vw, 20px);
    }
    .section-subtitle--lan-2 {
        font-size: clamp(18px, 13.264px + 1.392vw, 40px);
        line-height: clamp(20px, 12.256px + 2.278vw, 56px);
    }
}
.top-landing-2__hashtag {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}
.top-lading-2__hotel-name {
    color: var(--lan-2-color);
}
.top-landing-2__video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    &::before {
        content: "";
        position: absolute;
        background: var(--gradient-4);
        content: "";
        width: 100%;
        height: 100%;
    }
}
.top-landing-2__video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.tenor-sans {
    font-weight: 400;
    font-family: "Tenor Sans";
}

/* "top-landing-2--animate-init"
"top-landing-2--animate-restart"
"top-landing-2--animate-out", */

.top-landing-2--animate-init {
    .top-landing-2__main-text {
        animation: moveUp var(--init-animation) ease-out both var(--init-delay);
    }
    .awards {
        animation: scaleDown var(--award-animation) ease-out both
            calc(var(--init-delay) + var(--init-animation));
    }
}
.top-landing-2--animate-restart {
    --init-delay: 0s;
    --award-animation: 1s;
}
.top-landing-2--animate-out {
    .top-landing-2__main-text {
        animation: moveOut var(--move-out) ease-out both;
    }
    .awards {
        animation: opacity var(--move-out) ease-out both;
    }
}

.top-landing-2__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
@media (max-width: 1024px) {
    .top-landing-2 {
        .criteria__list > *:last-child {
            margin-right: 16px;
        }
    }
}

.header-lan-2 {
    --duration: 0.35s;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 16px;
}
.header-lan-2__background {
    background: var(--lan-2-background-14);
    backdrop-filter: blur(4.8px);
}
.header-lan-2__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
}
.header-lan-2__logo {
    order: 2;
    height: auto;
    width: fit-content;
}
.header-lan-2__left {
    display: flex;
    align-items: center;
    gap: 20px;
    order: 1;
}
.header-lan-2__right-medal {
    cursor: pointer;
    position: relative;
    width: 48px;
    height: 48px;
    background: no-repeat center url("https://static.whatsbetter.me/img/constructor/template-2/medal.svg");
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--border_radius-l);
        border: 2px solid transparent;
        background: linear-gradient(270deg, #e4002e 8.71%, #06f 95.31%)
            border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }
}
.header-lan-2__right {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 17px;
    flex: 1;
}
.header-lan-2__left {
    font-weight: 600;
    line-height: 24px;
    font-size: 16px;
    flex: 1;
}
.header-lan-2__burger {
    --width: 28px;
    --height: calc(2 * var(--height-bar) + 12px);
    --height-bar: 3px;
    width: var(--width);
    height: 14px;
}
.header-lan-2__burger-line {
    height: var(--height-bar);
    width: var(--width);
    background-color: #fff;
    @media (prefers-reduced-motion: no-preference) {
        transition: var(--duration) ease-in-out;
        transition-property: rotate, translate;
    }
    &:nth-child(1) {
        translate: 0 0;
    }
    &:nth-child(2) {
        translate: 0 8px;
    }
}

.header-lan-2--active {
    .header-lan-2__burger-line {
        width: calc(var(--height) * 1.414);
        &:nth-child(1) {
            rotate: 45deg;
            translate: 0 calc(var(--height-bar) / 2);
        }
        &:nth-child(2) {
            translate: 0 calc(var(--height-bar) / -2);
            rotate: -45deg;
        }
    }
}
.header-lan-2__right-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 32px;
    background: url(https://static.whatsbetter.me/img/constructor/template-2/header-avatar.png);
    overflow: hidden;
    &:after {
        content: "";
        inset: 0;
        position: absolute;
        z-index: -1;
        background: linear-gradient(270deg, #e4002e 8.71%, #0066ff 95.31%);
    }
}

.header-lan-2__menu {
    position: absolute;
    visibility: hidden;
    .landing-2-btn {
        visibility: hidden;
        pointer-events: none;
    }
    .container-big {
        width: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
        transition: var(--duration) ease-in-out;
        transition-property: background, backdrop-filter;
    }
}
.header-lan-2--active {
    .header-lan-2__menu {
        visibility: visible;
        inset: 0;
        overflow: auto;
        background: var(--lan-2-background-15);
        backdrop-filter: blur(15px);
        min-height: 100vh;
    }
}
.header-lan-2__menu-inner {
    display: flex;
    flex: 1;
    border-top: 1px solid var(--lan-2-border-color-6);
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}
.header-lan-2__menu-left {
    overflow: hidden;
    padding: clamp(16px, 2.224px + 4.051vw, 80px);
    flex: 1;
    border-right: 1px solid var(--lan-2-border-color-6);
}
.header-lan-2__menu-right {
    padding: clamp(16px, 2.224px + 4.051vw, 80px);
    flex: 1;
}
.header-lan-2__menu-placeholder {
    height: 98px;
    border-bottom: 1px solid var(--lan-2-border-color-6);
}
.header-lan-2__menu-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
}
.header-lan-2__menu-item {
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    &:hover a{
        color: var(--lan-2-color);
    }
}
.header-lan-2__menu-title-48 {
    font-weight: 600;
}
.header-lan-2__menu-title-24 {
    font-weight: 450;
}
.header-lan-2__menu-title-20 {
    font-weight: 450;
    color: var(--lan-2-text-secondary);
}
.header-lan-2__menu-main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.header-lan-2__menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.booking__search-form {
    display: block;
}
.booking__search-form-wrapper {
    position: relative;
    .loader {
        position: absolute;
        inset: 0;
    }
}
.header__right-wrapper {
    display: contents;
}
@media (max-width: 1024px) {
    .header__right-wrapper {
        display: flex;
        margin-left: auto;
    }
    .header-lan-2__menu-inner {
        flex-direction: column;
    }
    .header-lan-2__logo {
        order: -1;
        margin-right: auto;
    }
    .header-lan-2__right {
        flex: none;
        order: -1;
    }
    .header-lan-2__menu-left {
        flex: none;
    }
    .header-lan-2__left {
        flex: none;
        margin-left: 16px;
        span {
            display: none;
        }
    }
}

/* TODO:исправить старые токены */
.title-primary {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}
.title-secondary {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}
.title-tertiary {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}
.title-small {
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
}
.text-secondary {
    font-size: 14px;
    line-height: 20px;
}
.text-small {
    font-size: 12px;
    line-height: 14px;
}

@media (max-width: 540px) {
    .title-tertiary {
        font-size: 14px;
        line-height: 20px;
    }
    .text-secondary {
        font-size: 12px;
        line-height: 16px;
    }
}

/* Новые токены */
.text-xs {
    font-size: 12px;
    line-height: 16px;
}
.text-m {
    font-size: 14px;
    line-height: 20px;
}
.text-base {
    font-size: 16px;
    line-height: 24px;
}
.text-l {
    font-size: 18px;
    line-height: 26px;
}
.text-xl {
    font-size: var(--fz-xl);
    line-height: var(--lh-xl);
}
.text-2xl {
    font-size: var(--fz-2xl);
    line-height: var(--lh-2xl);
}
.text-3xl {
    font-size: var(--fz-3xl);
    line-height: var(--lh-3xl);
}
.text-4xl {
    font-size: var(--fz-4xl);
    line-height: var(--lh-4xl);
}

.color-primary {
    color: var(--text-primary);
}
.color-secondary {
    color: var(--text-secondary);
}
.color-active {
    color: var(--main-color);
}
.fw-400 {
    font-weight: 400;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}


.awards {
    width: 180px;
    position: relative;
    display: flex;
}

@keyframes slideIn {
    0% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        transform: translate3d(0, 20%, 0);
    }
}   

@keyframes slideUp {
    0% {
        opacity: 0;

        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}    

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
} 


.award_slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;

    &.active_up {
        animation: slideUp .2s ease 0s 1 normal forwards;
    }

    &.active_down {
        animation: slideDown .2s ease 0s 1 normal forwards;
    }

    &.active_no {
        animation: slideIn .2s ease 0s 1 normal forwards;
    }
}


@keyframes fadeInArrow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.awards-arrow {
    background-color: #141516;
    background-image: url(https://static.whatsbetter.me/img/medals/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    border: 1px solid #222425;
    border-radius: 20px;
    cursor: pointer;
    height: 32px;
    justify-content: center;
    width: 32px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 20%;
    cursor: pointer;
    z-index: 100;
    top: 120px;
    opacity: 0;
    animation: fadeInArrow .5s ease 0s 1 normal forwards;
}


.awards-arrow_previos {
    transform: rotate(90deg);
    left: -40%;
}

.awards-arrow_next {
    transform: rotate(-90deg);
    right: -40%;
}


.hotel-restorants {
    background-color: var(--lan-2-primary);
    padding: 10px 0 180px 0;
    .section-title--lan-2 {
        margin-bottom: 30px;
    }
    .landing-2-hashtag {
        margin-top: 18px;
    }
}
.hotel-restorans__slide {
    display: flex;
    padding: 40px;
    gap: 40px;
    background-color: var(--lan-2-background-4);
    border-radius: 24px;
    margin: 0 30px;
    max-width: 1264px;
    width: 100%;
}
.hotel-restorans__slide-image {
    max-width: 538px;
    min-width: 50%;
    width: 100%;
    background-size: cover;
    border-radius: var(--border_radius-l);
}
.hotel-restorans__slider {
    margin-top: 170px;
}
.hotel-restorans__slide-title {
    font-size: 72px;
    font-weight: 600;
    line-height: 80px;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
}
.hotel-restorans__slide-description {
    font-weight: 600;
    margin-bottom: 40px;
}
.hotel-restorants__top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 786px;
    position: relative;
    z-index: 0;
}
.hotel-restorants__title {
    display: flex;
    flex-direction: column;
    font-size: 200px;
    font-weight: 800;
    line-height: 212.98px;
    letter-spacing: -0.036em;
    color: var(--text-color);
    opacity: 0.1;
    margin-bottom: 75px;
    span {
        align-self: flex-end;
    }
}
.hotel-restorants__background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--gradient-3),
        url("https://static.whatsbetter.me/img/constructor/template-2/restoran.jpg");
}
.hotel-restorants__background-text {
    color:#fff;
    max-width: 900px;
    z-index: 1;
}
.hotel-restorants__award {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.hotel-restorans__slider-1 {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 50px;
    margin-top: 228px;
}
.hotel-restorans__restoran-slide {
    display: flex;
    align-items: center;
    gap: 100px;
    margin: 0 30px;
    padding: 0 100px;
}
.hotel-restorans__restoran-slide-image {
    width: 40%;
    aspect-ratio: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
}
.hotel-restorans__restoran-slide-right {
    padding-top: 18px;
    width: 60%;
}
.hotel-restorans__restoran-slide-title {
    font-weight: 600;
    margin-bottom: 40px;
}
.hotel-restorans__restoran-slide-subtitle {
    font-weight: 600;
    margin-bottom: 40px;
}
.hotel-restorans__restoran-slide-description {
    font-weight: 500;
    color: var(--lan-2-text-secondary);
    margin-bottom: 40px;
}
.hotel-restorans__restoran-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.hotel-restorans__restoran-btn {
    color: var(--lan-2-color);
    border: none;
    background-color: transparent;
}
.restoran-slide-arrow {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 12px;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    cursor: pointer;
    padding: 10px;
    .text-overflow {
        max-width: 100px;
    }
}
.restoran-slide-arrow__icon {
    width: 16px;
    height: 16px;
    background: no-repeat var(--arrow-back);
}
.restoran-slide-arrow.restoran-slide-arrow--prev {
    flex-direction: row;
    left: auto;
    right: 0;
    .restoran-slide-arrow__icon {
        rotate: 180deg;
    }
}

.next-to-us {
    padding-top: 180px;
    background-color: var(--lan-2-primary);
    padding-bottom: 90px;
    .landing-2-btn {
        margin-top: 42px;
        padding: 12px 24px;
    }
}
.next-to-us__main-wrapper {
    position: relative;
    z-index: 1;
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 90px;
        height: 714px;
        background: var(--lan-2-color);
        filter: blur(150px);
        transform-origin: bottom;
        transform: rotate(90deg) translateY(50%);
        z-index: -1;
    }
}
.next-to-us__main {
    display: flex;
    gap: 126px;
    margin-top: 58px;
    background-color: var(--lan-2-background-5);
    border-radius: 24px;
    padding: 40px;
}
.next-to-us__list-item {
    hr {
        padding-bottom: 40px;
        margin: 0;
        border: none;
        border-bottom: 1px solid var(--lan-2-border-color-2);
    }
    &:has(.next-to-us__item-description) {
        cursor: pointer;
    }
}
.next-to-us__item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin: 30px 0 20px 0;
    &:has(+ .next-to-us__item-description) {
        &::after {
            content: "";
            display: inline-block;
            background: no-repeat center/cover var(--arrow-down);
            width: 28px;
            height: 28px;
            transition: rotate 0.3s ease-in-out;
        }
        span {
            max-width: 100%;
            transition: scale 0.3s ease-in-out, max-width 0.4s ease-in-out;
            margin-bottom: 20px;
            transform-origin: left;
        }
    }
}

.next-to-us__list-item.active {
    .next-to-us__item-title::after {
        rotate: 180deg;
    }
    .next-to-us__item-description {
        grid-template-rows: 1fr;
    }
    .next-to-us__item-title:has(+ .next-to-us__item-description) {
        color: var(--lan-2-color);
        span {
            transition: scale 0.3s ease-in-out, max-width 0.2s ease-in-out;
            max-width: calc(100% / 1.6 - 12px);
            scale: 1.6;
        }
    }
}
.next-to-us__item-description {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.012em;
    transition: grid-template-rows 0.3s ease-in-out;
    & > div {
        overflow: hidden;
    }
}
.next-to-us__map {
    aspect-ratio: 1.25;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
    width: 100%;
    .map-container {
        height: 100% !important;
    }
    & > div {
        height: 100%;
    }
}

.object-description-column {
    padding: 90px 0;
    background-color: var(--lan-2-primary);
}
.object-description-row {
    padding: clamp(50px, 43.552px + 1.899vw, 80px) 0;
    background-color: var(--lan-2-primary);
    overflow: hidden;
    .section-title--lan-2 {
        text-transform: none;
    }
    &::after {
        content: "";
        right: 0;
        top: 0;
        width: 144px;
        height: 448px;
        translate: 25% -40%;
        transform: rotate(-180deg);
    }
    &::before {
        left: 0;
        bottom: 0;
        width: 169px;
        height: 842px;
        translate: -15% 35%;
        transform: rotate(-180deg);
    }
    @media (max-width: 980px) {
        .container-big {
            display: contents;
        }
        .object-description-row__inner {
            flex-direction: column;
        }
        .object-description-row__media {
            border-radius: 0;
            max-width: none;
            max-height: 450px;
        }
        .object-description-row__right {
            padding: 0 16px;
            max-width: none;
        }
        .object-description-row__btn {
            width: 100%;
        }
    }
}
.object-description-column__text {
    text-align: center;
    margin-bottom: 60px;
}
.object-description-column__media {
    border-radius: 24px;
    max-width: 865px;
    background: no-repeat center/cover;
}
.object-description-row__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 7.648px + 4.81vw, 100px);
}
.object-description-row__right {
    flex: 6 0 0;
    .section-title--lan-2 {
        text-transform: uppercase;
    }
}
/* .object-description-row__left {
    flex: 1;
    min-width: 670px;
} */
.object-description-row__media {
    aspect-ratio: 658/810;
    border-radius: 24px;
    background: no-repeat center/cover, var(--background-9);
    flex: 4 0 0;
    width: 100%;
    align-self: flex-start;
}
.object-description-row__text {
    font-size: var(--fz-xl);
    line-height: var(--lh-xl);
    color: var(--lan-2-text-secondary);
}
.object-description-row__btn.object-description-row__btn.object-description-row__btn {
    margin-top: clamp(24px, 17.12px + 2.025vw, 56px);
}

.posts-lan-2 {
    position: relative;
    background-color: var(--lan-2-primary);
    padding: 120px 0 270px 0;
    .slider-container--lan-2 {
        margin-top: 80px;
        padding: 0 80px;
    }
    .slider-arrow-1 {
        right: -50px;
        left: auto;
        transform: translate(50%, 50%);
        top: 50%;
        bottom: auto;
    }
    .slider-arrow-1.slick-prev {
        left: -50px !important;
        right: auto;
        left: calc(50% - 70px);
        transform: translate(-50%, 50%);
        bottom: auto;
    }
    &::before {
        content: "";
        position: absolute;
        width: 90px;
        height: 448px;
        left: 0;
        top: 0;
        background: var(--lan-2-color);
        filter: blur(150px);
        transform: rotate(-180deg);
    }
}
.posts-lan-2__slide {
    display: flex;
    align-items: center;
    gap: 68px;
    margin: 0 20px;
}
.posts-lan-2__slide-image {
    aspect-ratio: 1.33;
    border-radius: 24px;
    width: 37%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.posts-lan-2__slide-right {
    width: 63%;
}
.posts-lan-2__slide-title {
    font-weight: 600;
    margin-bottom: 20px;
}
.posts-lan-2__slide-description {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 40px;
}
.posts-lan-2__slide-btn.posts-lan-2__slide-btn {
    height: auto;
    padding: 12px 47px;
    background-color: var(--lan-2-color);
    font-weight: 600;
    font-size: initial;
    border-radius: 1000px;
    color: #fff;
}

.reviews {
    position: relative;
    overflow: hidden;
    background-color: var(--lan-2-primary);
    z-index: 0;
    padding-bottom: 100px;

    &::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 448px;
        left: 0;
        top: -57px;
        background: var(--lan-2-color);
        filter: blur(150px);
        z-index: -1;
        transform: rotate(90deg);
    }
    &::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 448px;
        right: 0;
        bottom: 0;
        background: var(--lan-2-color);
        transform: rotate(90deg);
        filter: blur(150px);
        z-index: -1;
    }
}
.review__section-title {
    padding-top: 60px;
    margin-bottom: 10px;
}
.review__title {
    margin-bottom: 60px;
    max-width: 828px;
}
.review {
    display: flex;
    flex-direction: column;
    background-color: var(--lan-2-secondary);
    padding: 28px;
    margin: 20px;
    height: 308px;
    width: 424px;
    border-radius: 24px;
}
.review__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    margin-bottom: 24px;
}
.review__top {
    margin-top: 70px;
}
.review__bottom {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: auto;
}
.review__bottom-right {
    display: flex;
    gap: 14px;
}
.review__bottom-name {
    font-weight: 600;
}
.review__bottom-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: no-repeat center/cover;
    border-radius: 50%;
    background-color: #f5f5f5;
}
.reviews {
    .slider-container {
        overflow: hidden;
    }
    .slick-slider:first-child {
        .slick-list {
            padding: 0 232px !important;
        }
    }
}
.review__bottom-stars {
    display: flex;
    gap: 5px;
    .star-icon {
        width: 24px;
        height: 24px;
        background-size: 100%;
        background-image: url("https://static.whatsbetter.me/img/icons/star-black.svg?color=3E3E3E");
    }
    .star-icon--colored {
        background-image: url("https://static.whatsbetter.me/img/icons/star-black.svg?color=CC855F");
    }
}

.reviews2 {
    padding-top: 60px;
    background-color: var(--lan-2-primary);
    .slick-dots {
        background-color: transparent;
        bottom: 0;
        .slick-active button::before {
            width: 8px;
        }
        button::before {
            background-color: rgba(0, 0, 0, 0.65);
        }
        .slick-active {
            width: auto;
        }
        .slick-active button::before {
            background-color: #fff;
        }
    }
    .slider-arrow-1 {
        top: 50%;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.4) no-repeat center/12px 12px
            url(https://static.whatsbetter.me/img/icons/arrow-down.svg?color=white);
        &:hover {
            background: rgba(0, 0, 0, 0.4) no-repeat center/12px 12px
                url(https://static.whatsbetter.me/img/icons/arrow-down.svg?color=white);
        }
    }
    .slider-arrow-1.slick-prev {
        left: 20px;
        right: auto;
        transform: translateX(-50%);
    }
    .slider-arrow-1.slick-next {
        right: 20px;
        transform: translateX(50%);
        z-index: 10;
    }
    .slick-list:first-of-type {
        padding-bottom: 130px;
    }
}
.reviews2__bottom-avatar {
    width: 60px;
    height: 60px;
}
.reviews2__review {
    border-radius: 24px;
    padding: 28px;
    width: 498px;
    background: var(--lan-2-background-5);
    margin: 0 20px;
}
.reviews2__review-top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}
.reviews2__review-name {
    font-weight: 600;
    margin-bottom: 4px;
}
.reviews2__review-date {
    color: var(--lan-2-text-secondary);
}
.reviews2__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reviews2__bottom-left,
.reviews2__bottom-right {
    display: flex;
    gap: 20px;
    span {
        padding: 0 8px;
        border-radius: 55px;
        background-color: var(--lan-2-background-7);
    }
    & > * {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}
.reviews2__review-text {
    margin-bottom: 20px;
}
.reviews2__review-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.reviews2__info-stars {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    .star-icon {
        width: 24px;
        height: 24px;
        background-size: 100%;
        background-image: url("https://static.whatsbetter.me/img/icons/star-black.svg?color=3E3E3E");
    }
    .star-icon--colored {
        background-image: url("https://static.whatsbetter.me/img/icons/star-black.svg?color=CC855F");
    }
}
.reviews2__info-tag {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 31px;
}

.reviews2__bottom-like::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 22px;
    background: no-repeat center var(--icon-like);
}
.reviews2__bottom-dislike::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 22px;
    rotate: 180deg;
    background: no-repeat center var(--icon-like);
}

.reviews2__bottom-comment::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background: no-repeat center var(--icon-comment);
}
.reviews2__bottom-views::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: no-repeat center var(--icon-view);
}
.reviews2__review-media {
    border-radius: 12px;
    aspect-ratio: 442/332;
    margin: 0 20px 20px 20px;
    background: no-repeat center/cover;
}
.reviews2__bottom-right {
    color: var(--lan-2-text-secondary);
}

.rooms-lan-2 {
    background-color: var(--lan-2-primary);
    padding: 10px 0 150px 0;
    .slick-slide {
        max-width: 1120px;
        width: 100%;
    }
    .slick-dots {
        bottom: -100px;
    }
    .slider-container--lan-2 {
        position: relative;
        z-index: 1;
        padding: 10px 0 100px 0;
    }
    .landing-2-hashtag {
        padding: 10px 16px;
        border-color: var(--text-color);
    }
    .location-icon {
        display: inline-flex;
        align-items: center;
        margin: 10px;
        border-radius: 1000px;
        border-color: var(--text-color);
        padding: 10px 16px;
        &::before {
            width: 32px;
            height: 40px;
            background-size: 100%;
            background: no-repeat center/cover var(--map-pin);
        }
    }
    .section-subtitle--lan-2 {
        margin-bottom: 29px;
    }
    .landing-2-hashtag.location-icon {
        margin-top: 29px;
    }
}
.rooms-lan-2__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.rooms-lan-2__slider {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        var(--bg-image) no-repeat center / cover;
    aspect-ratio: 2.02;
    margin: 70px 30px 0 30px;
    padding: 30px;
    border-radius: 24px;
    color: #fff;
    ul {
        margin: 0;
        padding: 0;
        padding-left: 15px;
    }
    li {
        list-style-type: disc;
    }
    li + li {
        margin-top: 10px;
    }
    .award-widget {
        position: absolute;
        right: 60px;
        top: -70px;
    }
}
.rooms-lan-2__slider-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    .btn {
        padding: 12px 32px;
        height: auto;
        font-size: initial;
        font-weight: 600;
    }
}
.rooms-lan-2__firefly {
    position: absolute;
    background: var(--lan-2-color);
    filter: blur(150px);
    transform: rotate(90deg);
    width: 90px;
    height: 448px;
}
.rooms-lan-2__firefly--top {
    top: -15%;
    left: 50%;
}
.rooms-lan-2__firefly--bottom {
    bottom: -15%;
    left: 50%;
}
.rooms-lan-2__slider-price {
    font-weight: 600;
}
.rooms-lan-2__room-name {
    font-weight: 600;
    margin-bottom: 30px;
}
.rooms-lan-2__award {
    position: absolute;
    right: 65px;
    top: 10px;
}

.services {
    position: relative;
    background-color: var(--lan-2-primary);
    padding: 180px 0 180px 0;
    padding-left: 400px;
    .section-subtitle--lan-2 {
        margin-bottom: 60px;
        max-width: 700px;
    }
    &:after {
        content: "";
        position: absolute;
        width: 90px;
        height: 400px;
        left: 0;
        top: 50%;
        background: var(--lan-2-color);
        filter: blur(150px);
        transform: translateY(-50%) rotate(-180deg);
    }
}
.services__slide {
    display: flex;
    flex-direction: column;
    background-color: var(--lan-2-secondary);
    border-radius: 24px;
    padding: 28px;
    margin: 0 20px;
    width: 505px;
    height: 362px;
}
.services__plus {
    cursor: pointer;
    margin: auto 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lan-2-background-6) url(https://static.whatsbetter.me/img/icons/plus.svg) no-repeat
        center/14px 14px;
}
.services__slide-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
}
.services__slide-title {
    font-weight: 600;
    margin-bottom: 12px;
}
.services__slide-description {
    font-weight: 400;
}

.special-offers {
    color: var(--text-color);
    background-color: var(--lan-2-primary);
}
.special-offers__title.special-offers__title {
    text-align: center;
    margin-bottom: 60px;
}

.special-offers__subtitle.special-offers__subtitle {
    margin-bottom: 60px;
    text-align: center;
}
.special-offers__slider {
    overflow: hidden;
    padding-bottom: 180px;
    .slick-dots {
        bottom: 0;
    }
    .slick-slider {
        padding-bottom: 124px;
    }
}
.special-offers__slide {
    position: relative;
    padding: 75px 0 170px 277px;
    background: var(--gradient-2), var(--bg-image) no-repeat center/cover;
    margin: 0 30px;
    color: #fff;
    .landing-2-btn.landing-2-btn {
        color: #fff;
    }
}
.special-offers__slide-inner {
    max-width: 670px;
}
.special-offers__slide-desc-title {
    font-weight: 700;
    margin-top: 60px;
}
.special-offers__slide-desc {
    margin: 20px 0;
    font-weight: 500;
}
.special-offers__award {
    position: absolute;
    top: 50%;
    right: 7.2%;
    transform: translateY(-50%);
}
.special-offers__slide-top {
    display: flex;
    font-weight: 600;
    gap: 56px;
    padding-left: 25px;
    margin-bottom: 40px;
    & > div {
        display: list-item;
        &::marker {
            color: var(--lan-2-color);
        }
    }
}

.tagsphere {
    margin: 0 auto;
    background-color: var(--lan-2-background-4);
    border-radius: 24px;
    position: relative;
    width: 100%;
    height: inherit;
    &:after {
        content: "";
        position: absolute;
        width: 192px;
        height: 430px;
        background: var(--lan-2-color);
        filter: blur(169.26px);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}
.tags-cloud {
    overflow: hidden;
    padding: var(--section-space-top) 0;
    background-color: var(--lan-2-primary);
    &::after,
    &::before {
        width: 98px;
        height: 489px;
    }
    &::after {
        content: "";
        right: 0;
        bottom: 0;
        transform: translateX(50%) rotate(-180deg);
    }
    &::before {
        left: 0;
        top: 0;
        rotate: -180deg;
    }
}
.tagsphere__item {
    padding: 10px 20px;
    border-radius: 84px;
    background-color: var(--lan-2-background-6);
    font-weight: 500;
    cursor: pointer;
    color: var(--text-color-3);
}
.tag-popper {
    z-index: 100;
}
.tag-awards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    padding: clamp(6px, 0.4px + 1.646vw, 32px);
    border-radius: 18px;
    width: 32%;
    background: var(--lan-2-background-7);
    border: 1px solid var(--lan-2-border-color-7);
    backdrop-filter: blur(16.2px);
    z-index: 9999;
    .slick-next,
    .slick-prev {
        top: 50%;
    }
    .slick-next {
        right: 0;
        transform: translateX(50%);
    }
    .slick-prev {
        left: 0 !important;
        transform: translateX(-50%);
    }
    .slick-disabled {
        visibility: hidden;
    }
}
.tag-award {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    hr {
        width: 100%;
        margin: 20px 0;
        border-color: var(--lan-2-border-color);
    }
}
.tagsphere__rating {
    font-weight: 600;
    margin-left: 20px;
}
.stop-transition {
    transition: none !important;
}
.tag-item--selected {
    color: #fff;
    background-color: var(--lan-2-color);
}
.tag-sphere__wrapper {
    height: inherit;
    flex: 1;
}
.award-compact {
    position: relative;
    width: 100%;
    .award-pills {
        justify-content: flex-start;
        gap: 3px;
    }
}
.award-compact__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.award-compact__place {
    padding: 4px 8px;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    &::before {
        border-radius: 8px;
    }
}
.award-compact__label {
    font-size: 24px;
    font-weight: 600;
    margin: 12px 0;
}
.tags-cloud__titles {
    margin-bottom: clamp(32px, 25.968px + 1.772vw, 60px);
}
.tags-cloud__description {
    text-align: center;
    font-weight: 600;
    font-size: clamp(16px, 11.696px + 1.266vw, 36px);
    color: var(--lan-2-text-secondary);
    line-height: clamp(24px, 19.696px + 1.266vw, 44px);
    margin-top: clamp(12px, 5.968px + 1.772vw, 40px);
}
@media (max-width: 1200px) {
    .tag-sphere__parent {
        height: auto !important;
        flex-direction: column;
    }
    .tag-sphere__wrapper {
        overflow-x: auto;
    }
    .tag-awards {
        width: 100%;
        background: none;
        backdrop-filter: blur(0px);
        border: none;
        padding: 0;
        .slick-slide > div {
            margin: 0 8px;
        }
        .tag-award {
            border-radius: 12px;
            padding: clamp(8px, 2.832px + 1.519vw, 32px);
            padding-left: clamp(16px, 12.56px + 1.013vw, 32px);
            width: 100%;
            background-color: var(--lan-2-background-10);
            max-width: 500px;
            margin: 0 auto;
        }
        .award {
            margin-top: 5px;
            width: 110px;
        }
        .slider-arrow-1 {
            cursor: pointer;
            right: 0;
            width: 37px;
            height: 37px;
        }
    }
    .tag-award {
        align-items: flex-start;
    }
    .tags-cloud {
        .tagsphere {
            background-color: transparent;
        }
        .container-big {
            display: contents;
        }
    }
}

.tarrifs-lan-2 {
    padding: 120px 0 120px 0;
    background-color: var(--lan-2-primary);
    .landing-2-btn.landing-2-btn {
        padding: 12px 47px;
    }
    .landing-2-hashtag {
        font-size: 48px;
        font-weight: 600;
        background-color: var(--lan-2-background-7);
        margin-bottom: 20px;
    }
}
.tarrifs-lan-2__slide {
    display: flex;
    justify-content: center;
    gap: 68px;
}
.tarrifs-lan-2__slide-image {
    border-radius: 24px;
    aspect-ratio: 632/475;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 475px;
    align-self: start;
}
.tarrifs-lan-2__title {
    font-weight: 600;
    margin-bottom: 20px;
}
.tarrifs-lan-2__slide-desc-title {
    font-weight: 600;
    margin-bottom: 20px;
}
.tarrifs-lan-2__slide-desc {
    margin-bottom: 40px;
    color: var(--lan-2-text-secondary);
}
.tarrifs-lan-2__slide-inner {
    max-width: 818px;
}

.team-service-2 {
    background-color: var(--lan-2-primary);
    padding:10px 0 175px 0;
    .landing-2-ellipse::before {
        width: 200px;
        height: 448px;
        top: 0;
        right: 0;
        transform-origin: right;
        transform: translate(-25%, -25%) rotate(90deg);
    }
}
.team-service-2__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.team-service-2__top {
    text-align: center;
    max-width: 849px;
    margin-bottom: 140px;
}
.team-service-2__card {
    display: flex;
    gap: 40px;
    background-color: var(--lan-2-background-5);
    border-radius: 24px;
    padding: 40px 327px 64px 40px;
    max-width: 1120px;
    overflow: hidden;
}
.team-service-2__card-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.team-service-2__card-right {
    padding-top: 47px;
}
.team-service-2__card-name {
    font-weight: 600;
    margin-bottom: 10px;
}
.team-service-2__card-job {
    font-weight: 450;
    margin-bottom: 20px;
}
.team-service-2__card-description {
    color: var(--text-secondary);
    font-weight: 450;
    margin-bottom: 40px;
}
.team-service-2__card-gallery {
    display: flex;
    gap: 12px;
}
.team-service-2__gallery-item {
    cursor: pointer;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.team-service {
    padding: 20px 0 60px 0;
    color: var(--text-color);
    background-color: var(--lan-2-primary);
}
.team-service__subtitle {
    padding-bottom: 55px;
    max-width: 849px;
}
.team-service__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(376px, 1fr));
    gap: 18px;
}
.team-service__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px;
}
.team-service__item-image {
    border-radius: 50%;
    width: 240px;
    height: 240px;
}
.team-service__item-name {
    margin-bottom: 10px;
}
.team-service__item-job {
    font-size: var(--font-l);
    line-height: 32px;
    letter-spacing: -0.014em;
}
.team-service__item-description {
    color: var(--lan-2-text-secondary);
    font-weight: 500;
}
.team-service__item-job,
.team-service__item-image,
.team-service__item-description {
    margin-bottom: 40px;
}

.articles-list {
    background-color: var(--lan-2-primary);
    padding: 120px 0 106px 0;
    overflow: hidden;
    &.landing-2-ellipse::before {
        width: 238px;
        height: 534px;
        left: 0;
        top: 0;
        opacity: 0.7;
        filter: blur(150px);
        transform: translate(-5%, 0);
    }
    &.landing-2-ellipse::after {
        content: "";
        width: 709px;
        height: 857px;
        opacity: 0.6;
        filter: blur(150px);
        transform: translate(15%, 40%);
        bottom: 0;
        right: 0;
    }
}
.articles-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 1fr));
    gap: 19px 18px;
}
.article-list__item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 24px;
    background-color: rgba(var(--lan-2-base-color-3));
}
.article__item-image {
    margin-bottom: 32px;
    height: 260px;
    background: no-repeat center/cover;
}
.article__item-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}
.article__item-main {
    padding: 20px 20px 28px 20px;
}

.event__item-preamble {
    font-weight: 500;
    font-size: 16px;
    opacity: .7;
    margin-top: 8px;
    max-height: 38px;
    overflow: hidden;
}

.article-iframe {
    position: fixed;
    inset: 0;
    background: var(--lan-2-primary);
    z-index: 100;
    .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.booking-widget-if {
    display: block;
}
.booking-widget-lan-2 {
    padding-top: var(--section-space-top);
}

.services-secondary {
    padding-top: var(--section-space-top);
    padding-bottom: clamp(126px, 122.992px + 0.886vw, 140px);
    &.landing-2-ellipse {
        &::before {
            left: 0;
            top: 0;
            width: 98px;
            height: min(40vw, 489px);
            translate: 0 -25%;
            transform: rotate(0deg);
        }
    }
}
.service-secondary {
    display: grid;
    grid-template-columns: 3fr 1fr;
    max-width: 1200px;
    margin: 0 var(--space-20);
    height: 524px;
    border-radius: var(--border_radius-2xl);
    border: 1px solid var(--lan-2-border-color-6);
    background-color: rgba(var(--lan-2-base-color-3));
    overflow: hidden;
    .media-item {
        height: inherit;
        aspect-ratio: initial;
        background-size: cover !important;
    }
    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        height: auto;
        .media-item {
            aspect-ratio: 1.5;
        }
    }
}
.service-secondary__right {
    display: flex;
    flex-direction: column;
    margin: var(--space-40) var(--space-24) var(--space-40) var(--space-32);
}
.service-secondary__text {
    -webkit-line-clamp: 10;
}


.media-item {
	width: 100%;
    position: relative;
	aspect-ratio: 1.5;
	position: relative;
    background-size: 100% auto;
	border-radius: var(--border_radius);
    background-repeat: no-repeat;
    background-position: center center;
	background-color: #f8f8f8;
	cursor: pointer;

	&.video,
	&.clip {
		background-color: #222;
	}

	&.horizontal {
		background-size: 100% auto;
	}

	&.vertical {
		background-size: auto 100%;
	}

	&.default {
		background-size: cover;
		background-image: url(https://static.whatsbetter.me/img/ui/entity-default.png)
	}
}

.media-item__remove {
    width: 24px;
    height: 24px;
    background-color: rgba(0,0,0,.8);
    border-radius: 4px;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center center;
    background-image: url(https://static.whatsbetter.me/img/icons/close-white.svg);
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    
    &:hover {
        background-color: rgba(0,0,0, 1);
    }
}


.media-item__video {
	position: absolute;
    top: 8px;
    right: 8px;
    background-image: url(https://static.whatsbetter.me/img/icons/video-white.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
}

.modal-video__iframe {
	height: 70%
}
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    .icon {
        width: 48px;
        height: 48px;
    }
}

.video-gallery-horizontal,
.video-gallery-vertical {
    background-color: var(--lan-2-primary);
    video {
        background-color: var(--lan-2-primary);
        border-radius: inherit;
    }
}
.video-gallery-horizontal__item {
    width: 902px;
    margin: 0 20px;
}
.video-gallery-vertical__item {
    display: flex;
    align-items: center;
    margin: 0 20px;
    width: 430px;
    height: 762px;
    @media (max-width: 1200px) {
        height: 510px;
        margin: 0px 1px;
        width: 288px;
    }
}
.video-gallery-horizontal__wrapper {
    padding: 60px 0 218px 0;
}
.video-gallery-vertical__wrapper {
    padding-top: var(--section-space-top);
    padding-bottom: clamp(126px, 122.992px + 0.886vw, 140px);
}
.video-gallery-horizontal__media {
    aspect-ratio: 902/508;
    border: 1px solid var(--lan-2-border-color-5);
    border-radius: 24px;
}
.video-gallery-vertical__media {
    width: inherit;
    height: inherit;
    border: 1px solid var(--lan-2-border-color-5);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    video {
        object-fit: cover;
    }
}
.video-gallery-horizontal__text {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--lan-2-border-color-5);
    background-color: var(--lan-2-primary);
    margin-top: 11px;
    p {
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
.video-gallery__processing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #4c4c4c;
    font-size: 16px;
    font-weight: 500;
    background-image: none;
    &::after {
        display: inline-block;
        content: "Видео обрабатывается";
        color: #fff;
    }
}

.title-m {
    font-size: var(--font-m);
    font-weight: 600;
}
.title-l {
    font-size: var(--font-l);
    font-weight: 600;
}
.hideScroll {
    position: sticky;
    inset: 0;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.text-overflow {
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.flex {
    display: flex;
}
.flex-container {
    display: flex;
    align-items: center;
}
.grow {
    flex-grow: 1;
}
.items-center {
    align-items: center;
}
.jcsb {
    justify-content: space-between;
}
.flex-wrap {
    flex-wrap: wrap;
}
.gap-4 {
    gap: var(--space-4);
}
.gap-6 {
    gap: var(--space-6);
}
.gap-8 {
    gap: var(--space-8);
}
.gap-8-12 {
    gap: var(--space-8) var(--space-12);
}
.gap-12 {
    gap: var(--space-12);
}
.gap-16 {
    gap: var(--space-16);
}
.gap-24 {
    gap: var(--space-24);
}
.gap-32 {
    gap: var(--space-32);
}
.ml-auto {
    margin-left: auto;
}
.mr-auto {
    margin-right: auto;
}
.justify-end {
    justify-content: flex-end;
}
.br {
    border-radius: var(--border_radius);
}
.br-m {
    border-radius: var(--border_radius-m);
}
.br-xl {
    border-radius: var(--border_radius-xl);
}
.br-max {
    border-radius: 1000px;
}
.p-4 {
    padding: var(--p-4);
}
.p-6 {
    padding: var(--p-6);
}
.p-8 {
    padding: var(--p-8);
}
.p-12 {
    padding: var(--p-12);
}
.p-16 {
    padding: var(--p-16);
}
.px-4 {
    padding-right: var(--p-4);
    padding-left: var(--p-4);
}
.px-6 {
    padding-right: var(--p-6);
    padding-right: var(--p-6);
}
.px-8 {
    padding-right: var(--p-8);
    padding-left: var(--p-8);
}
.px-12 {
    padding-right: var(--p-12);
    padding-left: var(--p-12);
}
.px-24 {
    padding-right: var(--p-24);
    padding-left: var(--p-24);
}
.py-4 {
    padding-top: var(--p-4);
    padding-bottom: var(--p-4);
}
.py-6 {
    padding-top: var(--p-6);
    padding-bottom: var(--p-6);
}
.py-8 {
    padding-top: var(--p-8);
    padding-bottom: var(--p-8);
}
.py-12 {
    padding-top: var(--p-12);
    padding-bottom: var(--p-12);
}
.py-16 {
    padding-top: var(--p-8);
    padding-bottom: var(--p-8);
}
.py-24 {
    padding-top: var(--p-24);
    padding-bottom: var(--p-24);
}
.block {
    display: block;
}
/* grid уже занят поэтому постфикс d*/
.grid-d {
    display: grid;
}
.inline-flex {
    display: inline-flex;
}
.pointer {
    cursor: pointer;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.relative {
    position: relative;
}

.mt-auto {
    margin-top: auto;
}
.mr-auto {
    margin-right: auto;
}
.ml-auto {
    margin-left: auto;
}
.mt-top {
    margin-top: auto;
}
.w-fit {
    width: fit-content;
}
.mb-56 {
        /* prettier-ignore */
        margin-bottom: var(--space-56);
    }
.mb-40 {
        /* prettier-ignore */
        margin-bottom: var(--space-40);
    }
.mb-32 {
        /* prettier-ignore */
        margin-bottom: var(--space-32);
    }
.mb-28 {
        /* prettier-ignore */
        margin-bottom: var(--space-28);
    }
.mb-24 {
        /* prettier-ignore */
        margin-bottom: var(--space-24);
    }
.mb-20 {
        /* prettier-ignore */
        margin-bottom: var(--space-20);
    }
.mb-16 {
        /* prettier-ignore */
        margin-bottom: var(--space-16);
    }
.mb-12 {
        /* prettier-ignore */
        margin-bottom: var(--space-12);
    }
.mb-10 {
        /* prettier-ignore */
        margin-bottom: var(--space-10);
    }
.mb-8 {
        /* prettier-ignore */
        margin-bottom: var(--space-8);
    }
.mb-4 {
        /* prettier-ignore */
        margin-bottom: var(--space-4);
    }
.ml-56 {
        /* prettier-ignore */
        margin-left: var(--space-56);
    }
.ml-40 {
        /* prettier-ignore */
        margin-left: var(--space-40);
    }
.ml-32 {
        /* prettier-ignore */
        margin-left: var(--space-32);
    }
.ml-28 {
        /* prettier-ignore */
        margin-left: var(--space-28);
    }
.ml-24 {
        /* prettier-ignore */
        margin-left: var(--space-24);
    }
.ml-20 {
        /* prettier-ignore */
        margin-left: var(--space-20);
    }
.ml-16 {
        /* prettier-ignore */
        margin-left: var(--space-16);
    }
.ml-12 {
        /* prettier-ignore */
        margin-left: var(--space-12);
    }
.ml-10 {
        /* prettier-ignore */
        margin-left: var(--space-10);
    }
.ml-8 {
        /* prettier-ignore */
        margin-left: var(--space-8);
    }
.ml-4 {
        /* prettier-ignore */
        margin-left: var(--space-4);
    }
.mt-56 {
        /* prettier-ignore */
        margin-top: var(--space-56);
    }
.mt-40 {
        /* prettier-ignore */
        margin-top: var(--space-40);
    }
.mt-32 {
        /* prettier-ignore */
        margin-top: var(--space-32);
    }
.mt-28 {
        /* prettier-ignore */
        margin-top: var(--space-28);
    }
.mt-24 {
        /* prettier-ignore */
        margin-top: var(--space-24);
    }
.mt-20 {
        /* prettier-ignore */
        margin-top: var(--space-20);
    }
.mt-16 {
        /* prettier-ignore */
        margin-top: var(--space-16);
    }
.mt-12 {
        /* prettier-ignore */
        margin-top: var(--space-12);
    }
.mt-10 {
        /* prettier-ignore */
        margin-top: var(--space-10);
    }
.mt-8 {
        /* prettier-ignore */
        margin-top: var(--space-8);
    }
.mt-4 {
        /* prettier-ignore */
        margin-top: var(--space-4);
    }
.mr-56 {
        /* prettier-ignore */
        margin-right: var(--space-56);
    }
.mr-40 {
        /* prettier-ignore */
        margin-right: var(--space-40);
    }
.mr-32 {
        /* prettier-ignore */
        margin-right: var(--space-32);
    }
.mr-28 {
        /* prettier-ignore */
        margin-right: var(--space-28);
    }
.mr-24 {
        /* prettier-ignore */
        margin-right: var(--space-24);
    }
.mr-20 {
        /* prettier-ignore */
        margin-right: var(--space-20);
    }
.mr-16 {
        /* prettier-ignore */
        margin-right: var(--space-16);
    }
.mr-12 {
        /* prettier-ignore */
        margin-right: var(--space-12);
    }
.mr-10 {
        /* prettier-ignore */
        margin-right: var(--space-10);
    }
.mr-8 {
        /* prettier-ignore */
        margin-right: var(--space-8);
    }
.mr-4 {
        /* prettier-ignore */
        margin-right: var(--space-4);
    }
.text-truncate {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.text-truncate--2 {
    -webkit-line-clamp: 2;
}
.text-truncate--4 {
    -webkit-line-clamp: 4;
}

.button.button {
    --button-font-weight: 600;
    --button-padding: 8px 16px;
    --button-bg: transparent;
    --button-border-width: 2px;
    --button-color: inherit;

    --button-hover-bg: var(--background-4);
    --button-border-color: var(--background-8);
    --button-radius: var(--border_radius);

    display: inline-flex;
    white-space: nowrap;
    border-radius: var(--button-radius);
    background-color: var(--button-bg);
    font-weight: var(--button-font-weight);
    padding: var(--button-padding);
    border-width: var(--button-border-width);
    border-color: var(--button-border-color);
    border-style: solid;
    cursor: pointer;
    color: var(--button-color);
    &:hover {
        --button-bg: var(--button-hover-bg);
    }

    /* reset wui button*/
    height: auto;
}
.button--primary.button--primary {
    --button-border-width: 0;
    --button-bg: var(--main-color);
    --button-color: white;
    &:hover {
        --button-bg: var(--main-color);
        filter: brightness(1.15);
    }
}
.button--secondary.button--secondary {
    --button-border-width: 0;
    --button-bg: white;
    --button-color: black;
}
.background-secondary {
    background-color: var(--background-8);
}
.background-tertiary {
    background-color: var(--background-4);
}
.badge-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 102, 255, 0.12);
    border-radius: 1000px;
    padding: 4px 12px;
}
.badge-secondary {
    line-height: 1;
    min-width: 20px;
    aspect-ratio: 1;
    text-align: center;
    background-color: var(--main-color);
    color: white;
}
.split {
    align-self: stretch;
    width: 1px;
    background-color: var(--background-8);
}

:root {
    --base-color: 14, 14, 14; /*0e0e0e*/
    --base-color-2: 255, 255, 255; /* #fff */

    --main-color: #0078ff;
    --critical-color: #e4002e;

    --text-color: rgb(var(--base-color));
    --text-secondary: rgba(var(--base-color), 0.64);
    --border-color: rgba(var(--base-color), 0.12);
    --border-color-40: rgba(var(--base-color), 0.4);
    --border-secondary: rgba(var(--base-color), 0.09);
    --background-8: rgba(var(--base-color), 0.08);
    --background-4: rgba(var(--base-color), 0.04);

    --border_radius-2xl: 24px;
    --border_radius-xl: 16px;
    --border_radius-l: 12px;
    --border_radius-m: 10px;
    --border_radius: 8px;

    --fz-4xl: clamp(32px, 30.272px + 0.506vw, 40px);
    --fz-3xl: clamp(24px, 22.704px + 0.38vw, 30px);
    --fz-2xl: clamp(16px, 14.272px + 0.506vw, 24px);
    --fz-xl: clamp(14px, 12.704px + 0.38vw, 20px);
    --fz-base: clamp(12px, 11.136px + 0.253vw, 16px);
    --fz-xs: 12px;

    --lh-4xl: clamp(40px, 38.496px + 0.443vw, 47.008px);
    --lh-3xl: clamp(30px, 28.704px + 0.38vw, 36px);
    --lh-2xl: clamp(24px, 22.272px + 0.506vw, 32px);
    --lh-xl: clamp(20px, 18.272px + 0.506vw, 28px);
    --lh-base: clamp(16px, 14.272px + 0.506vw, 24px);

    --p-24: 24px;
    --p-20: 20px;
    --p-16: 16px;
    --p-12: 12px;
    --p-10: 10px;
    --p-8: 8px;
    --p-6: 6px;
    --p-4: 4px;

    --space-56: clamp(24px, 17.12px + 2.025vw, 56px);
    --space-40: clamp(22px, 18.128px + 1.139vw, 40px);
    --space-32: clamp(20px, 17.424px + 0.759vw, 32px);
    --space-28: 28px;
    --space-24: 24px;
    --space-20: 20px;
    --space-16: 16px;
    --space-12: 12px;
    --space-10: 10px;
    --space-8: 8px;
    --space-4: 4px;

    --info-icon: url("https://static.whatsbetter.me/img/icons/info.svg?color=696A6A");
    --home-icon: url("https://static.whatsbetter.me/img/entity-landing/home.svg?color=696A6A");
    --property-icon: url("https://static.whatsbetter.me/img/booking/checkbox-circle-line.svg");
    --time-icon: url("https://static.whatsbetter.me/img/icons/time.svg");
}

:root[data-theme="light"] {
    --base-color: 21, 22, 23;

    --background: rgba(var(--base-color));
    --background-9: #fff;

    .icon-like-new {
        background-image: url("https://static.whatsbetter.me/img/icons/like-new.svg");
    }
    .icon-dislike-new {
        background-image: url("https://static.whatsbetter.me/img/icons/dislike-new.svg");
    }
    .icon-comment {
        background-image: url("https://static.whatsbetter.me/img/icons/comment.svg");
    }
}

:root[data-theme="dark-wawelberg"] {
    --base-color: 241, 241, 241;
    --base-color-2: 0, 0, 0;

    --background: rgba(14, 14, 14);
    --background-9: #151617;

    --info-icon: url("https://static.whatsbetter.me/img/icons/info.svg?color=white");
    --home-icon: url("https://static.whatsbetter.me/img/entity-landing/home.svg?color=white");
    --property-icon: url("https://static.whatsbetter.me/img/booking/checkbox-circle-line.svg?color=white");
    --time-icon: url("https://static.whatsbetter.me/img/icons/time.svg?color=ABAAAB");

    --main-color: #cc855f;

    .icon-like-new {
        background-image: url("https://static.whatsbetter.me/img/icons/like-new.svg?color=ABAAAB");
    }
    .icon-dislike-new {
        background-image: url("https://static.whatsbetter.me/img/icons/dislike-new.svg?color=ABAAAB");
    }
    .icon-comment {
        background-image: url("https://static.whatsbetter.me/img/icons/comment.svg?color=ABAAAB");
    }
    .icon-view {
        background-image: url("https://static.whatsbetter.me/img/icons/view.svg?color=ABAAAB");
    }
    .icon-close {
        background-image: url("https://static.whatsbetter.me/img/icons/close.svg?color=626362");
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
}
#root {
    display: flex;
    flex-direction: column;
    height: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}

.booking {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-color);
    .header-lan-2__right .landing-2-btn.landing-2-btn {
        color: var(--text-color);
    }
    .warn {
        margin-top: 32px;
    }
}
.booking__main {
    isolation: isolate;
    .warn {
        margin: 0 auto;
        max-width: 1200px;
        margin-bottom: 25px;
    }
}
.booking__title {
    text-align: center;
}
.booking__top {
    margin-top: clamp(12px, -2.64px + 4.304vw, 80px);
    margin-bottom: clamp(20px, -1.52px + 6.329vw, 120px);
}
.breadcrumbs-new {
    justify-content: center;
    .breadcrumbs__item {
        color: var(--text-color);
        font-size: 12px;
    }
    .breadcrumbs__item_home {
        background-image: var(--home-icon);
    }
    .breadcrumbs__delimiter {
        background: none;
        width: auto;
        height: auto;
        margin: 0 8px;
        &::after {
            content: "/";
        }
    }
    .breadcrumbs__item.active {
        color: var(--main-color);
    }
}
.ellipse {
    position: relative;
    isolation: isolate;
    &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 50%;
        z-index: -1;
        width: 50%;
        height: 56px;
        background: var(--main-color);
        filter: blur(150px);
    }
}

.warn {
    display: flex;
    flex-direction: column;
    padding: 30px 20px 20px 60px;
    background-color: var(--lan-2-background-11);
    border-radius: 12px;
    margin-bottom: 24px;
    p {
        color: var(--text-secondary);
        font-size: clamp(14px, 13.568px + 0.127vw, 16px);
    }
}

.warn-info {
    display: flex;
    align-items: center;
    font-size: initial;
    font-size: clamp(16px, 15.136px + 0.253vw, 20px);
    font-weight: 600;
    margin-bottom: 4px;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        left: -32px;
        width: clamp(16px, 15.136px + 0.253vw, 20px);
        height: clamp(16px, 15.136px + 0.253vw, 20px);
        background: no-repeat center/cover var(--info-icon);
    }
}

.layout-main {
    padding: var(--header-height) 0;
}

.breadcrumbs {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    display: flex;
	margin: 16px 0;
    
    @media (max-width: 480px) {
        display: block;
        height: auto;
    }
}

.breadcrumbs-section {
    display: flex;
    align-items: center;
    
    @media (max-width: 480px) {
        display: none 
    }
}

.breadcrumbs-section_penult {
    @media (max-width: 480px) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }  
}

.breadcrumbs__item_home {
    padding-left: 0;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    opacity: 0.5;
    background-image: url(https://static.whatsbetter.me/img/icons/home.svg);  
}

.breadcrumbs__item {
    cursor: pointer;
    font-size: 14px;
    color: #080808;
	font-weight: 400;
    display: inline-block;
    
    &:hover {
        text-decoration: underline;
    }
    
    &.active {
        cursor: default; 
        color: #777777
    }
 
    &.active:hover {
        text-decoration: none;
    }
    
   
}

.breadcrumbs__delimiter {
    display: inline-block;
    opacity: .35;
    width: 12px;
    margin-left: 12px;
    margin-right: 12px;
    background-image: url(https://static.whatsbetter.me/img/icons/arrow-right.svg);
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    
    @media (max-width: 480px) {
        margin-left: 0;
        background-repeat: no-repeat;
        transform: rotate(180deg);
    }
    
    
}
.rooms-detail {
    #whatsbetter-booking {
        margin-top: calc(-1 * clamp(0px, -184px + 13.333vw, 72px));
    }
}
.rooms-detail__slider-content {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
}
.rooms-detail__slider-content-inner {
    padding: clamp(24px, 9.36px + 4.304vw, 92px)
        clamp(12px, 4.256px + 2.278vw, 48px);
}
.rooms-detail__slider {
    .slick-list {
        margin: 0 -15px;
    }
    .slick-slide > div {
        margin: 0 15px;
    }
}
.rooms-detail__slider {
    position: relative;
}
.rooms-detail__slider-dot {
    width: clamp(15.008px, 13.92px + 0.316vw, 20px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    &[data-active="true"] {
        border: none;
        background-color: var(--main-color);
    }
}
.rooms-detail__slider-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 2;
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    border-radius: var(--border_radius-2xl);
    background: linear-gradient(
            288.96deg,
            rgba(0, 0, 0, 0.6) 2.07%,
            rgba(33, 33, 33, 0.38) 71.89%
        ),
        var(--background-image) no-repeat center/cover;
}
.rooms-detail__slider-title {
    font-size: 40px;
}
.rooms-detail__slider-description {
    max-width: 52ch;
}
.breadcrumbs--rooms-detail {
    margin-left: 10px;
    justify-content: flex-start;
}

.similar-entities {
    overflow: hidden;
    padding-bottom: var(--section-space-bottom);
}
.similar-entities.ellipse::after {
    width: 98px;
    height: 456px;
    translate: 50% 50%;
    left: auto;
    right: 0;
    bottom: 0;
}
.similar-entities__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(max(300px, 20.1%), 1fr));
}

.similar-entity {
    overflow: hidden;
    border: 1px solid var(--border-secondary);
    background-color: var(--lan-2-background-5);
}
.similar-entity__inner {
    padding: var(--p-20);
}
.similar-entity__img {
    background: no-repeat center/cover var(--bg-image);
    height: 260px;
    width: 100%;
}

.properties.properties {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-direction: row;
    height: auto;
}
.property {
    display: flex;
}
.property__icon.property__icon {
    width: 16px;
    aspect-ratio: 1;
    background-image: var(--property-icon);
    margin-right: 5px;
    opacity: 0.8;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.property__value.property__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
}

.posts-users {
    overflow: hidden;
    padding-bottom: var(--section-space-bottom);
    .btn {
        display: block;
        margin: 0 auto;
    }

    &.landing-2-ellipse {
        &::before {
            opacity: 0.3;
            transform: translate(0, -50%) rotate(0deg);
            width: 100%;
            height: 217px;
        }
        &::after {
            content: "";
            opacity: 0.3;
            width: 33vw;
            height: 53vw;
            right: 0;
            bottom: 0;
            transform: rotate(0) translate(50%, 20%);
        }
    }
}
.posts-users__cards {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(min(100%, 320px), 20% + 0.1%), 1fr)
    );
    gap: var(--space-20);
}
.posts-users__card {
    display: flex;
    flex-direction: column;
    padding: var(--p-8);
    border-radius: var(--border_radius-2xl);
    background-color: var(--background-9);
    .avatar {
        width: 48px;
        height: 48px;
    }
    .media-item {
        background-size: cover !important;
        margin-bottom: var(--space-20);
        border-radius: var(--border_radius-xl) var(--border_radius-xl) 2px 2px;
    }
}
.posts-users__card-info {
    display: grid;
    flex-grow: 1;
    padding: 0 var(--p-10);
}

.reactions__splitter {
    display: none;
    margin:0 auto;
}


.message {
    display: flex;
    width: 100%;
	border-radius: var(--border_radius);
    margin-bottom: 28px;
    align-items: flex-start;
}

.message__avatar {
    width: 40px;
}

.message__body {
	border-radius: var(--border_radius);
    background-color: #fff;
    flex: 1;
}

.message-author {
    font-weight: 500;
    font-size: 14px;
    color: #000;
    
}
.message-text {
    font-weight: 400;
    font-size: 14px;
    color: #444;
    line-height: 18px;
    padding: 6px 0 4px 0;
}

.message-data {
    font-weight: 400;
    font-size: 10px;
    color: #989898;
}

.message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.message-gallery {
    margin-top: 12px;
    width: 90%;
}

.message-gallery_many {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 0fr;
    grid-column-gap: 16px;
    grid-row-gap: 24px;
}

.message-gallery_one {
    width: 100%;
}

.message-gallery_item {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 120px;
    width: 100%;
}

.message-img {
    width: 90%;
    border-radius: 4px;
    overflow: hidden;

}

.editable-input {
    &:hover,
    &:focus {
        box-shadow: 0 0 0 2px rgba(0, 158, 255, 0.27);
    }
    border-radius: var(--border_radius-l, 12px);
    outline: none;
    padding: 12px 16px;
    background-color: var(--background-color, rgba(21, 22, 23, 0.04));
    font-size: 14px;

}

.reactions__counter {
    text-align: center;
    min-width: 30px;
    padding: 0 var(--p-8);
    border-radius: 55px;
    background-color: var(--background-8);
}
.reactions__icon {
    opacity: 1;
    &:hover {
        filter: brightness(1.25);
    }
}

.entry {
    .reactions__splitter {
        display: block;
    }
    .reactions__icon.reactions__icon {
        i {
            width: 32px;
            height: 32px;
        }
        i + * {
            font-size: var(--fz-xl);
            line-height: var(--lh-xl);
        }
    }
    .media-item {
        background-color: var(--background-4);
        aspect-ratio: 2/1;
        background-size: cover;
        border-radius: var(--border_radius-2xl);
    }
}
.entry__text {
    white-space: pre-wrap;
}
.entry__time {
    background-color: var(--background-4);
    border-radius: 1000px;
    padding: var(--p-4) var(--p-8);
}
.entry__time-icon {
    background: no-repeat center/cover var(--time-icon);
}

.rooms {
    display: grid;
    gap: clamp(25.008px, 13.168px + 3.481vw, 80px);
    @media (max-width: 1024px) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    }
}
.rooms-title {
    text-align: center;
}
.rooms__top {
    margin-top: clamp(20px, 7.088px + 3.797vw, 80px);
    margin-bottom: clamp(30px, -7.664px + 11.076vw, 205.008px);
}
.rooms__item:nth-child(2n) {
    flex-direction: row-reverse;
}
.rooms__item {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.784px + 5.063vw, 100px);
    .properties {
        margin-bottom: 24px;
    }
}
.rooms__item.rooms__item {
    @media (max-width: 1024px) {
        flex-direction: column;
        align-items: flex-start;
    }
}
.rooms__item-image {
    background-position: center;
    background-size: cover;
    background-color: var(--background-8);
    aspect-ratio: 0.8;
    border-radius: var(--border_radius-2xl);
    width: 40%;
    flex-shrink: 0;
    @media (max-width: 1024px) {
        aspect-ratio: 16/9;
        width: 100%;
        border-radius: var(--border_radius-m);
    }
}