/* Start:/local/templates/teos/frontend/css/style.css?1787916848200429*/
@charset "UTF-8";
.vbox-overlay {
    --vbox-tools-color: #fff;
    --vbox-title-background: #101010;
    --vbox-title-width: "auto";
    --vbox-title-radius: 0;
    --vbox-share-background: #101010;
    --vbox-share-width: "auto";
    --vbox-share-radius: 0;
    --vbox-padding: 0;
    --vbox-max-width: 100%
}

.vbox-overlay *, .vbox-overlay :after, .vbox-overlay :before {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.vbox-overlay * {
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.vbox-overlay {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 999999
}

.vbox-share, .vbox-title {
    line-height: 1;
    position: fixed;
    z-index: 98;
    text-align: center;
    margin: 0 auto;
    color: var(--vbox-tools-color)
}

.vbox-title {
    font-size: 12px;
    background-color: var(--vbox-title-background);
    width: var(--vbox-title-width);
    border-radius: var(--vbox-title-radius);
    padding: 12px 54px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block
}

.vbox-share {
    font-size: 24px;
    padding: 0 .35em;
    background-color: var(--vbox-share-background);
    width: var(--vbox-share-width);
    border-radius: var(--vbox-share-radius)
}

.vbox-link-btn, button.vbox-link-btn, button.vbox-link-btn:active, button.vbox-link-btn:focus, button.vbox-link-btn:hover {
    border: none !important;
    background: 0 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 6px 12px;
    outline: 0;
    display: inline-block;
    cursor: pointer
}

.vbox-share a {
    color: inherit !important;
    padding: 6px 12px;
    display: inline-block
}

.vbox-share svg {
    z-index: 10;
    vertical-align: middle
}

.vbox-close {
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    padding: 6px 15px;
    color: #000;
    color: var(--vbox-tools-color);
    border: 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    opacity: .8;
    transition: opacity .2s
}

.vbox-close:hover {
    opacity: 1
}

.vbox-left-corner {
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    line-height: 1;
    font-size: 12px;
    z-index: 99;
    display: flex;
    align-items: center;
    color: var(--vbox-tools-color)
}

.vbox-num {
    display: inline-block;
    padding: 12px 15px
}

.vbox-left {
    left: 0
}

.vbox-right {
    right: 0
}

.vbox-top {
    top: 0
}

.vbox-bottom {
    bottom: 0
}

.vbox-next, .vbox-prev {
    position: fixed;
    top: 50%;
    margin-top: -15px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    width: 45px;
    height: 45px;
    z-index: 99;
    opacity: .8;
    transition: opacity .2s
}

.vbox-next:hover, .vbox-prev:hover {
    opacity: 1
}

.vbox-next span, .vbox-prev span {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: var(--vbox-tools-color);
    border-right-color: var(--vbox-tools-color);
    text-indent: -100px;
    position: absolute;
    top: 8px;
    display: block
}

.vbox-prev {
    left: 15px
}

.vbox-next {
    right: 15px
}

.vbox-prev span {
    left: 10px;
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.vbox-next span {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 10px
}

.vbox-open {
    overflow: hidden
}

.vbox-container {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
    max-height: 100%;
    padding: 30px 0
}

.vbox-content {
    opacity: 0;
    text-align: center;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%
}

.vbox-container img {
    max-width: 100%;
    height: auto
}

.vbox-child {
    box-shadow: 0 0 12px #00000030, 0 6px 6px #0000003b;
    max-width: var(--vbox-max-width);
    text-align: initial;
    padding: var(--vbox-padding)
}

.vbox-child img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: block
}

.vbox-fit .vbox-child img, .vbox-fit .vbox-child.venoratio {
    max-height: calc(100vh - 60px)
}

.vbox-inline, .venoratio {
    position: relative;
    width: 100%;
    margin: 0 auto
}

.venoratio:before {
    display: block;
    padding-top: var(--vb-aspect-ratio);
    content: ""
}

.venoratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--vbox-padding)
}

.venoratio-1x1 {
    --vb-aspect-ratio: 100%;
    max-width: min(var(--vbox-max-width), (100vh - 60px))
}

.venoratio-4x3.vbox-child.venoratio {
    --vb-aspect-ratio: 75%;
    max-width: min(var(--vbox-max-width), (100vh - 60px) * 4 / 3)
}

.venoratio-16x9.vbox-child.venoratio {
    --vb-aspect-ratio: 56.25%;
    max-width: min(var(--vbox-max-width), (100vh - 60px) * 16 / 9)
}

.venoratio-21x9.vbox-child.venoratio {
    --vb-aspect-ratio: calc(9 / 21 * 100%);
    max-width: min(var(--vbox-max-width), (100vh - 60px) * 21 / 9)
}

.venoratio-full {
    --vb-aspect-ratio: calc(100vh - 60px)
}

.vbox-grab .vbox-child img {
    cursor: grab
}

.vbox-child > iframe {
    border: none !important
}

.vbox-content.swipe-left {
    margin-left: -200px !important
}

.vbox-content.swipe-right {
    margin-left: 200px !important
}

.vbox-preloader {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0)
}

.vbox-preloader .vbox-preloader-inner {
    opacity: 1;
    transition: opacity .2s
}

.vbox-hidden {
    display: none
}

.vbox-preloader.vbox-hidden .vbox-preloader-inner {
    opacity: 0
}

.vbox-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(-1px);
    -moz-transform: translateZ(-1px);
    -o-transform: translateZ(-1px);
    transform: translateZ(-1px);
    z-index: 0
}

.vbox-tooltip {
    position: relative;
    display: inline-block
}

.vbox-tooltip .vbox-tooltip-text {
    visibility: hidden;
    color: #fff;
    text-align: center;
    padding: 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 0;
    opacity: 0;
    transition: opacity .3s;
    margin-bottom: 2px;
    font-family: sans-serif
}

.vbox-top .vbox-tooltip .vbox-tooltip-text {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 2px
}

.vbox-tooltip-inner {
    padding: 5px 10px;
    background-color: #000000e6;
    border-radius: 6px;
    font-size: 10px
}

.vbox-tooltip:hover .vbox-tooltip-text {
    visibility: visible;
    opacity: 1
}

.vbox-overlay {
    --sk-size: 40px;
    --sk-color: #333
}

.sk-center {
    margin: auto
}

.sk-plane {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    animation: sk-plane 1.2s infinite ease-in-out
}

@keyframes sk-plane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    to {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

.sk-chase {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-chase 2.5s infinite linear both
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2s infinite ease-in-out both
}

.sk-chase-dot:before {
    content: "";
    display: block;
    width: 25%;
    height: 25%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-chase-dot-before 2s infinite ease-in-out both
}

.sk-chase-dot:nth-child(1) {
    animation-delay: -1.1s
}

.sk-chase-dot:nth-child(2) {
    animation-delay: -1s
}

.sk-chase-dot:nth-child(3) {
    animation-delay: -.9s
}

.sk-chase-dot:nth-child(4) {
    animation-delay: -.8s
}

.sk-chase-dot:nth-child(5) {
    animation-delay: -.7s
}

.sk-chase-dot:nth-child(6) {
    animation-delay: -.6s
}

.sk-chase-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-chase-dot:nth-child(2):before {
    animation-delay: -1s
}

.sk-chase-dot:nth-child(3):before {
    animation-delay: -.9s
}

.sk-chase-dot:nth-child(4):before {
    animation-delay: -.8s
}

.sk-chase-dot:nth-child(5):before {
    animation-delay: -.7s
}

.sk-chase-dot:nth-child(6):before {
    animation-delay: -.6s
}

@keyframes sk-chase {
    to {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot {
    to, 80% {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(.4)
    }
    0%, to {
        transform: scale(1)
    }
}

.sk-bounce {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-bounce-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--sk-color);
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-bounce 2s infinite cubic-bezier(.455, .03, .515, .955)
}

.sk-bounce-dot:nth-child(2) {
    animation-delay: -1s
}

@keyframes sk-bounce {
    0%, to {
        transform: scale(0)
    }
    45%, 55% {
        transform: scale(1)
    }
}

.sk-wave {
    width: var(--sk-size);
    height: var(--sk-size);
    display: flex;
    justify-content: space-between
}

.sk-wave-rect {
    background-color: var(--sk-color);
    height: 100%;
    width: 15%;
    animation: sk-wave 1.2s infinite ease-in-out
}

.sk-wave-rect:nth-child(1) {
    animation-delay: -1.2s
}

.sk-wave-rect:nth-child(2) {
    animation-delay: -1.1s
}

.sk-wave-rect:nth-child(3) {
    animation-delay: -1s
}

.sk-wave-rect:nth-child(4) {
    animation-delay: -.9s
}

.sk-wave-rect:nth-child(5) {
    animation-delay: -.8s
}

@keyframes sk-wave {
    0%, to, 40% {
        transform: scaleY(.4)
    }
    20% {
        transform: scaleY(1)
    }
}

.sk-pulse {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-pulse 1.2s infinite cubic-bezier(.455, .03, .515, .955)
}

@keyframes sk-pulse {
    0% {
        transform: scale(0)
    }
    to {
        transform: scale(1);
        opacity: 0
    }
}

.sk-flow {
    width: calc(var(--sk-size) * 1.3);
    height: calc(var(--sk-size) * 1.3);
    display: flex;
    justify-content: space-between
}

.sk-flow-dot {
    width: 25%;
    height: 25%;
    background-color: var(--sk-color);
    border-radius: 50%;
    animation: sk-flow 1.4s cubic-bezier(.455, .03, .515, .955) 0s infinite both
}

.sk-flow-dot:nth-child(1) {
    animation-delay: -.3s
}

.sk-flow-dot:nth-child(2) {
    animation-delay: -.15s
}

@keyframes sk-flow {
    0%, to, 80% {
        transform: scale(.3)
    }
    40% {
        transform: scale(1)
    }
}

.sk-swing {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-swing 1.8s infinite linear
}

.sk-swing-dot {
    width: 45%;
    height: 45%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-swing-dot 2s infinite ease-in-out
}

.sk-swing-dot:nth-child(2) {
    top: auto;
    bottom: 0;
    animation-delay: -1s
}

@keyframes sk-swing {
    to {
        transform: rotate(360deg)
    }
}

@keyframes sk-swing-dot {
    0%, to {
        transform: scale(.2)
    }
    50% {
        transform: scale(1)
    }
}

.sk-circle {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.sk-circle-dot:before {
    content: "";
    display: block;
    width: 15%;
    height: 15%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-circle 1.2s infinite ease-in-out both
}

.sk-circle-dot:nth-child(1) {
    transform: rotate(30deg)
}

.sk-circle-dot:nth-child(2) {
    transform: rotate(60deg)
}

.sk-circle-dot:nth-child(3) {
    transform: rotate(90deg)
}

.sk-circle-dot:nth-child(4) {
    transform: rotate(120deg)
}

.sk-circle-dot:nth-child(5) {
    transform: rotate(150deg)
}

.sk-circle-dot:nth-child(6) {
    transform: rotate(180deg)
}

.sk-circle-dot:nth-child(7) {
    transform: rotate(210deg)
}

.sk-circle-dot:nth-child(8) {
    transform: rotate(240deg)
}

.sk-circle-dot:nth-child(9) {
    transform: rotate(270deg)
}

.sk-circle-dot:nth-child(10) {
    transform: rotate(300deg)
}

.sk-circle-dot:nth-child(11) {
    transform: rotate(330deg)
}

.sk-circle-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-circle-dot:nth-child(2):before {
    animation-delay: -1s
}

.sk-circle-dot:nth-child(3):before {
    animation-delay: -.9s
}

.sk-circle-dot:nth-child(4):before {
    animation-delay: -.8s
}

.sk-circle-dot:nth-child(5):before {
    animation-delay: -.7s
}

.sk-circle-dot:nth-child(6):before {
    animation-delay: -.6s
}

.sk-circle-dot:nth-child(7):before {
    animation-delay: -.5s
}

.sk-circle-dot:nth-child(8):before {
    animation-delay: -.4s
}

.sk-circle-dot:nth-child(9):before {
    animation-delay: -.3s
}

.sk-circle-dot:nth-child(10):before {
    animation-delay: -.2s
}

.sk-circle-dot:nth-child(11):before {
    animation-delay: -.1s
}

@keyframes sk-circle {
    0%, to, 80% {
        transform: scale(0)
    }
    40% {
        transform: scale(1)
    }
}

.sk-circle-fade {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-fade-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.sk-circle-fade-dot:before {
    content: "";
    display: block;
    width: 15%;
    height: 15%;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-circle-fade 1.2s infinite ease-in-out both
}

.sk-circle-fade-dot:nth-child(1) {
    transform: rotate(30deg)
}

.sk-circle-fade-dot:nth-child(2) {
    transform: rotate(60deg)
}

.sk-circle-fade-dot:nth-child(3) {
    transform: rotate(90deg)
}

.sk-circle-fade-dot:nth-child(4) {
    transform: rotate(120deg)
}

.sk-circle-fade-dot:nth-child(5) {
    transform: rotate(150deg)
}

.sk-circle-fade-dot:nth-child(6) {
    transform: rotate(180deg)
}

.sk-circle-fade-dot:nth-child(7) {
    transform: rotate(210deg)
}

.sk-circle-fade-dot:nth-child(8) {
    transform: rotate(240deg)
}

.sk-circle-fade-dot:nth-child(9) {
    transform: rotate(270deg)
}

.sk-circle-fade-dot:nth-child(10) {
    transform: rotate(300deg)
}

.sk-circle-fade-dot:nth-child(11) {
    transform: rotate(330deg)
}

.sk-circle-fade-dot:nth-child(1):before {
    animation-delay: -1.1s
}

.sk-circle-fade-dot:nth-child(2):before {
    animation-delay: -1s
}

.sk-circle-fade-dot:nth-child(3):before {
    animation-delay: -.9s
}

.sk-circle-fade-dot:nth-child(4):before {
    animation-delay: -.8s
}

.sk-circle-fade-dot:nth-child(5):before {
    animation-delay: -.7s
}

.sk-circle-fade-dot:nth-child(6):before {
    animation-delay: -.6s
}

.sk-circle-fade-dot:nth-child(7):before {
    animation-delay: -.5s
}

.sk-circle-fade-dot:nth-child(8):before {
    animation-delay: -.4s
}

.sk-circle-fade-dot:nth-child(9):before {
    animation-delay: -.3s
}

.sk-circle-fade-dot:nth-child(10):before {
    animation-delay: -.2s
}

.sk-circle-fade-dot:nth-child(11):before {
    animation-delay: -.1s
}

@keyframes sk-circle-fade {
    0%, to, 39% {
        opacity: 0;
        transform: scale(.6)
    }
    40% {
        opacity: 1;
        transform: scale(1)
    }
}

.sk-grid {
    width: var(--sk-size);
    height: var(--sk-size)
}

.sk-grid-cube {
    width: 33.33%;
    height: 33.33%;
    background-color: var(--sk-color);
    float: left;
    animation: sk-grid 1.3s infinite ease-in-out
}

.sk-grid-cube:nth-child(1) {
    animation-delay: .2s
}

.sk-grid-cube:nth-child(2) {
    animation-delay: .3s
}

.sk-grid-cube:nth-child(3) {
    animation-delay: .4s
}

.sk-grid-cube:nth-child(4) {
    animation-delay: .1s
}

.sk-grid-cube:nth-child(5) {
    animation-delay: .2s
}

.sk-grid-cube:nth-child(6) {
    animation-delay: .3s
}

.sk-grid-cube:nth-child(7) {
    animation-delay: 0s
}

.sk-grid-cube:nth-child(8) {
    animation-delay: .1s
}

.sk-grid-cube:nth-child(9) {
    animation-delay: .2s
}

@keyframes sk-grid {
    0%, to, 70% {
        transform: scaleZ(1)
    }
    35% {
        transform: scale3D(0, 0, 1)
    }
}

.sk-fold {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    transform: rotate(45deg)
}

.sk-fold-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1)
}

.sk-fold-cube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sk-color);
    animation: sk-fold 2.4s infinite linear both;
    transform-origin: 100% 100%
}

.sk-fold-cube:nth-child(2) {
    transform: scale(1.1) rotate(90deg)
}

.sk-fold-cube:nth-child(4) {
    transform: scale(1.1) rotate(180deg)
}

.sk-fold-cube:nth-child(3) {
    transform: scale(1.1) rotate(270deg)
}

.sk-fold-cube:nth-child(2):before {
    animation-delay: .3s
}

.sk-fold-cube:nth-child(4):before {
    animation-delay: .6s
}

.sk-fold-cube:nth-child(3):before {
    animation-delay: .9s
}

@keyframes sk-fold {
    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0
    }
    25%, 75% {
        transform: perspective(140px) rotateX(0);
        opacity: 1
    }
    to, 90% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0
    }
}

.sk-wander {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-wander-cube {
    background-color: var(--sk-color);
    width: 20%;
    height: 20%;
    position: absolute;
    top: 0;
    left: 0;
    --sk-wander-distance: calc(var(--sk-size) * .75);
    animation: sk-wander 2s ease-in-out -2s infinite both
}

.sk-wander-cube:nth-child(2) {
    animation-delay: -.5s
}

.sk-wander-cube:nth-child(3) {
    animation-delay: -1s
}

@keyframes sk-wander {
    0% {
        transform: rotate(0)
    }
    25% {
        transform: translate(var(--sk-wander-distance)) rotate(-90deg) scale(.6)
    }
    50% {
        transform: translate(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)
    }
    50.1% {
        transform: translate(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)
    }
    75% {
        transform: translate(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(.6)
    }
    to {
        transform: rotate(-360deg)
    }
}

html {
    -webkit-text-size-adjust: 100%
}

html:focus-within {
    scroll-behavior: smooth
}

body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    position: relative;
    text-rendering: optimizeSpeed;
    width: 100%
}

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

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

:focus {
    outline: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    display: block
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none
}

input, input:required {
    box-shadow: none
}

input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 30px #fff
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    -moz-appearance: none
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none
}

input:focus {
    outline: none
}

audio, canvas, video {
    display: inline-block;
    max-width: 100%
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

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

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle
}

img, picture {
    display: inline-block
}

button, input {
    line-height: normal
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    background: transparent;
    border: 0;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

[disabled] {
    pointer-events: none
}

input[type=checkbox], input[type=radio] {
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

button {
    background: transparent;
    border: 0
}

textarea {
    overflow: auto;
    resize: vertical;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0
}

hr {
    background: #000;
    border: 0;
    box-sizing: content-box;
    height: 1px;
    line-height: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    page-break-after: always;
    width: 100%
}

pre {
    font-family: monospace, monospace;
    font-size: 100%
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: none
}

code, kbd, pre, samp {
    font-family: monospace, monospace
}

small, sub, sup {
    font-size: 75%
}

sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -5px
}

sup {
    top: -5px
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1;
    margin: 0;
    padding: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    outline: 0;
    padding: 0
}

legend {
    border: 0;
    color: inherit;
    display: block;
    max-width: 100%;
    white-space: normal;
    width: 100%
}

fieldset {
    min-width: 0
}

body:not(:-moz-handler-blocked) fieldset {
    display: block
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

template {
    display: none
}

@font-face {
    font-family: Fira Sans;
    src: url(/local/templates/teos/frontend/css/../fonts/FiraSansExtraCondensed-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: Fira Sans;
    src: url(/local/templates/teos/frontend/css/../fonts/FiraSansExtraCondensed-SemiBold.ttf) format("truetype");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: Fira Sans;
    src: url(/local/templates/teos/frontend/css/../fonts/FiraSansExtraCondensed-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: 500
}

@font-face {
    font-family: Fira Sans;
    src: url(/local/templates/teos/frontend/css/../fonts/FiraSansExtraCondensed-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: Fira Sans;
    src: url(/local/templates/teos/frontend/css/../fonts/FiraSansExtraCondensed-Light.ttf) format("truetype");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: Graphik LC;
    src: url(/local/templates/teos/frontend/css/../fonts/Graphik-LC.woff2) format("woff2"), url(/local/templates/teos/frontend/css/../fonts/Graphik-LC.woff) format("woff"), url(/local/templates/teos/frontend/css/../fonts/Graphik-LC.ttf) format("truetype");
    font-style: normal;
    font-weight: 500
}

@font-face {
    font-family: Onest;
    src: url(/local/templates/teos/frontend/css/../fonts/Onest-VariableFont_wght.ttf) format("truetype");
    font-style: normal
}

@font-face {
    font-family: Inter;
    src: url(/local/templates/teos/frontend/css/../fonts/Inter-18pt-SemiBold.ttf) format("truetype");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

html {
    box-sizing: border-box;
    font-size: 10px
}

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

@media (max-width: 768px) {
    html {
        font-size: 2.7777777778vw
    }
}

html {
    scroll-behavior: smooth;
    --primary-main: #001489;
    --primary-hover: #001DC8;
    --text-on-dark-primary: #FFFFFF;
    --text-on-dark-secondary: #B2B8DB;
    --text-on-dark-tertiary: #838BBD;
    --text-primary: #4B5484;
    --text-secondary: #95A7CF;
    --backgroud-white: #FFFFFF;
    --backgroud-white-70: rgba(255, 255, 255, .7);
    --backgroud-white-60: rgba(255, 255, 255, .6);
    --backgroud-white-10: rgba(255, 255, 255, .1);
    --backgroud-light: #F1F3F9;
    --backgroud-color: #F4F7FF;
    --stroke-primary: #EBEAE9;
    --state-bage: #F08700
}

body {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    min-height: 100vh;
    background-color: var(--backgroud-white, #FFFFFF);
    display: flex;
    flex-direction: column;
    position: relative
}

body._popup-open {
    overflow: hidden
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

input[type=number] {
    -moz-appearance: textfield
}

a, input, button, select, textarea {
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    border-radius: 0;
    background-color: transparent
}

svg {
    flex: none;
    width: 100%;
    height: 100%
}

b, strong {
    font-weight: 700
}

i {
    font-style: italic
}

h1, h2, h3, h4, h5, h6 {
    font-family: Graphik LC;
    font-weight: 500
}

h1 {
    font-size: 12rem
}

@media (max-width: 768px) {
    h1 {
        font-size: 4.6rem
    }
}

h2 {
    font-size: 8rem
}

@media (max-width: 768px) {
    h2 {
        font-size: 2.6rem
    }
}

h3 {
    font-size: 4.2rem
}

@media (max-width: 768px) {
    h3 {
        font-size: 2.2rem
    }
}

h4 {
    font-size: 3.2rem
}

@media (max-width: 768px) {
    h4 {
        font-size: 2.1rem
    }
}

h5 {
    font-size: 2.4rem
}

@media (max-width: 768px) {
    h5 {
        font-size: 1.8rem
    }
}

h6 {
    font-size: 1.8rem
}

@media (max-width: 768px) {
    h6 {
        font-size: 1.6rem
    }
}

.page {
    flex: 1
}

.container {
    width: 100%;
    max-width: 155.2rem;
    margin: 0 auto;
    padding: 0rem 1.6rem
}

.lazy:not(.loaded) {
    filter: blur(.4rem)
}

.swiper {
    width: 100%
}

.swiper-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 1.2rem
}

.swiper-pag .swiper-pagination-bullet, .swiper-pag .swiper-pag__bullet {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background-color: var(--text-on-dark-secondary, #B2B8DB);
    transition: .3s
}

.swiper-pag .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pag .swiper-pagination-bullet._active-bullet, .swiper-pag .swiper-pag__bullet.swiper-pagination-bullet-active, .swiper-pag .swiper-pag__bullet._active-bullet {
    background-color: var(--primary-main, #001489);
    width: 1.2rem;
    height: 1.2rem
}

.swiper-btn {
    position: absolute;
    z-index: 100;
    top: 50%;
    right: 2rem;
    translate: 0 -50%;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-main, #001489);
    transition: .3s
}

@media (max-width: 768px) {
    .swiper-btn {
        display: none
    }
}

@media (hover) {
    .swiper-btn:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .swiper-btn:active {
        color: var(--primary-hover, #001DC8)
    }
}

.swiper-btn[data-prev] svg {
    animation: swiper-btn-anim-prev 1s infinite alternate
}

.swiper-btn[data-next] svg {
    animation: swiper-btn-anim-next 1s infinite alternate
}

.swiper-btn:disabled {
    opacity: 0;
    pointer-events: none
}

@keyframes swiper-btn-anim-prev {
    0% {
        translate: 0 0
    }
    to {
        translate: -10% 0%
    }
}

@keyframes swiper-btn-anim-next {
    0% {
        translate: 0 0
    }
    to {
        translate: 10% 0%
    }
}

.page-title {
    font-family: Graphik LC;
    font-size: 12rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .page-title {
        font-size: 4.6rem
    }
}

.block-title {
    font-family: Graphik LC;
    font-size: 4.2rem;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .block-title {
        font-size: 2.6rem
    }
}

@keyframes spin {
    0% {
        rotate: 0deg
    }
    to {
        rotate: 360deg
    }
}

.template-page {
    margin-top: 17.5rem
}

@media (max-width: 768px) {
    .template-page {
        margin-top: 9.2rem;
        font-size: 1.8rem
    }
}

.template b, .template strong {
    font-weight: 500
}

.template i {
    font-style: italic
}

.template h1, .template h2, .template h3, .template h4, .template h5, .template h6 {
    font-family: Graphik LC;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

.template h1 {
    font-size: 12rem;
    line-height: 1.1;
    letter-spacing: .01em
}

@media (max-width: 768px) {
    .template h1 {
        font-size: 4.6rem
    }
}

.template h2 {
    font-size: 8rem;
    line-height: 1.4;
    letter-spacing: .01em
}

@media (max-width: 768px) {
    .template h2 {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.template h3 {
    font-size: 4.2rem;
    line-height: 1.5
}

@media (max-width: 768px) {
    .template h3 {
        font-size: 2.2rem;
        letter-spacing: .01em
    }
}

.template h4 {
    font-size: 3.2rem;
    line-height: 1.4;
    letter-spacing: .01em
}

@media (max-width: 768px) {
    .template h4 {
        font-size: 2.1rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.template h5 {
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: .01em
}

@media (max-width: 768px) {
    .template h5 {
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: normal
    }
}

.template h6 {
    font-size: 1.8rem;
    line-height: 1.5
}

@media (max-width: 768px) {
    .template h6 {
        font-size: 1.6rem
    }
}

.template h1:not(:last-child), .template h2:not(:last-child) {
    margin-bottom: 3.2rem
}

@media (max-width: 768px) {
    .template h1:not(:last-child), .template h2:not(:last-child) {
        margin-bottom: 2.4rem
    }
}

.template h3:not(:last-child), .template h4:not(:last-child), .template h5:not(:last-child) {
    margin-bottom: 2.4rem
}

@media (max-width: 768px) {
    .template h3:not(:last-child), .template h4:not(:last-child), .template h5:not(:last-child) {
        margin-bottom: 1.6rem
    }
}

.template h6:not(:last-child) {
    margin-bottom: 1.6rem
}

.template p:not(:last-child), .template ul:not(:last-child), .template ol:not(:last-child) {
    margin-bottom: 1em
}

.template div:not(:last-child), .template section:not(:last-child), .template table:not(:last-child), .template blockquote:not(:last-child), .template article:not(:last-child), .template iframe:not(:last-child) {
    margin-bottom: 3.2rem
}

.template img, .template video {
    display: block;
    margin-bottom: 3.2rem;
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: auto;
    border-radius: 4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .template img, .template video {
        border-radius: 1.6rem
    }
}

.template iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 152/85;
    border-radius: 4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .template iframe {
        border-radius: 1.6rem
    }
}

.template ul {
    list-style: none;
    padding-left: 2rem
}

@media (max-width: 768px) {
    .template ul {
        padding-left: 1.8rem
    }
}

.template ul li {
    position: relative;
    margin-bottom: .4em
}

.template ul li:before {
    content: "";
    position: absolute;
    top: .7em;
    left: -2rem;
    width: 1rem;
    border-bottom: .1rem solid var(--text-primary, #4B5484)
}

.template ol {
    counter-reset: item;
    list-style: none
}

.template ol > li {
    position: relative;
    counter-increment: item;
    margin-bottom: .4em;
    padding-left: 2rem
}

.template ol > li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: counters(item, ".") ""
}

.template ol > li > ol > li {
    padding-left: 2.4rem
}

.template ol > li > ol > li > ol > li {
    padding-left: 3.4rem
}

.template a {
    text-decoration: underline;
    color: var(--primary-main, #001489)
}

.template a:hover {
    text-decoration: none
}

.template blockquote {
    position: relative;
    padding: 4.8rem 1.6rem;
    border-radius: 1.6rem
}

.template blockquote:before, .template blockquote:after {
    content: "";
    position: absolute;
    font-size: 4.8rem;
    font-weight: 700
}

.template blockquote:before {
    content: "“";
    top: .8rem;
    left: 1.6rem
}

.template blockquote:after {
    content: "„";
    bottom: .8rem;
    right: 1.6rem
}

.template .table {
    overflow-x: auto;
    padding-bottom: .4rem
}

@media (max-width: 768px) {
    .template .table {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.template .table::-webkit-scrollbar {
    width: .8rem;
    height: .8rem
}

.template .table::-webkit-scrollbar-track {
    background: var(--backgroud-light, #F1F3F9)
}

.template .table::-webkit-scrollbar-thumb {
    background-color: var(--primary-main, #001489);
    border-radius: 1rem
}

.template table {
    width: max-content;
    min-width: 100%;
    font-size: 1.8rem
}

.template table thead {
    font-family: Onest;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .template table thead {
        font-size: 1.6rem
    }
}

.template table thead th, .template table thead td {
    background-color: var(--primary-main, #001489);
    text-transform: uppercase;
    vertical-align: middle;
    padding: 1.6rem 2rem 1.4rem
}

.template table thead th:first-child, .template table thead td:first-child {
    border-radius: 1.6rem 0 0 1.6rem
}

.template table thead th:last-child, .template table thead td:last-child {
    border-radius: 0 1.6rem 1.6rem 0
}

.template table td, .template table th {
    max-width: 60rem;
    padding: 1.6rem 2rem
}

.template table tr:not(:last-child) {
    border-bottom: .1rem solid var(--stroke-primary, #EBEAE9)
}

.popup {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    background-color: #00000080;
    backdrop-filter: blur(2rem);
    transition: .5s
}

.popup:not(._popup-open) {
    opacity: 0;
    pointer-events: none
}

.popup__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.popup__container {
    position: relative;
    width: 100%;
    max-width: 65.8rem;
    margin: auto;
    background-color: var(--backgroud-color, #F4F7FF);
    padding: 4rem;
    transition: .5s
}

.popup__close {
    position: absolute;
    z-index: 100;
    top: 3.2rem;
    right: 3.2rem;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .popup__close {
        width: 2.4rem;
        height: 2.4rem;
        top: 1.6rem;
        right: 1.6rem
    }
}

@media (hover) {
    .popup__close:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .popup__close:active {
        color: var(--primary-hover, #001DC8)
    }
}

.popup-style {
    overflow: hidden;
    padding: 11.8rem 0rem
}

@media (max-width: 768px) {
    .popup-style {
        padding: 7rem 0rem 2.4rem
    }
}

.popup-style .popup__container {
    padding: 0 11.6rem;
    background: none;
    max-width: 118rem;
    height: 100%;
    overflow: hidden;
    display: grid
}

@media (max-width: 768px) {
    .popup-style .popup__container {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2.2rem
    }
}

@media (max-width: 768px) {
    .popup-style .popup__close {
        top: 1.6rem;
        right: 3.2rem
    }
}

.popup-style__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .popup-style__wrapper {
        padding: 0rem 1.6rem
    }
}

.popup-style__swiper {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .popup-style__swiper {
        width: calc(100% + 3.2rem);
        margin: 0 -1.6rem;
        padding: 0 1.6rem
    }
}

.popup-style__swiper .swiper-wrapper {
    align-items: stretch
}

.popup-style__swiper .swiper-slide {
    height: auto
}

.popup-style__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

.popup-style__nav-pag {
    display: none
}

@media (max-width: 768px) {
    .popup-style__nav-pag {
        display: flex
    }
}

.popup-style__nav-pag .swiper-pag__bullet {
    background-color: var(--backgroud-white-60, rgba(255, 255, 255, .6))
}

.popup-style__nav-pag .swiper-pag__bullet._active-bullet {
    background-color: var(--text-on-dark-primary, #FFFFFF)
}

.popup-style__nav-btn {
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .popup-style__nav-btn {
        display: flex;
        position: static;
        translate: 0 0;
        width: 2.4rem;
        height: 2.4rem
    }
}

@media (hover) {
    .popup-style__nav-btn:hover {
        color: var(--backgroud-white-60, rgba(255, 255, 255, .6))
    }
}

@media (hover: none) {
    .popup-style__nav-btn:active {
        color: var(--backgroud-white-60, rgba(255, 255, 255, .6))
    }
}

.popup-style__nav-btn.swiper-button-lock, .popup-style__nav-btn:disabled {
    display: none
}

.popup-style__nav-btn[data-prev] {
    left: 1rem
}

@media (max-width: 768px) {
    .popup-style__nav-btn[data-prev] svg {
        animation: none
    }
}

.popup-style__nav-btn[data-next] {
    right: 1rem
}

@media (max-width: 768px) {
    .popup-style__nav-btn[data-next] svg {
        animation: none
    }
}

@media (max-width: 768px) {
    .popup-style__nav-btn svg:nth-child(1) {
        display: none
    }
}

.popup-style__nav-btn svg:nth-child(2) {
    display: none
}

@media (max-width: 768px) {
    .popup-style__nav-btn svg:nth-child(2) {
        display: block
    }
}

.popup-style-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--text-on-dark-primary, #FFFFFF);
    border-radius: 2.4rem
}

@media (max-width: 768px) {
    .popup-style-item {
        border-radius: 1.6rem
    }
}

.popup-style-item__img {
    width: 100%;
    height: 20rem
}

@media (max-width: 768px) {
    .popup-style-item__img {
        height: 7rem
    }
}

.popup-style-item__img img, .popup-style-item__img picture, .popup-style-item__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.popup-style-item__container {
    flex: 1;
    overflow: hidden;
    padding: 4rem .8rem 0
}

@media (max-width: 768px) {
    .popup-style-item__container {
        padding: 1.6rem .4rem 0
    }
}

.popup-style-item__content {
    width: 100%;
    height: 100%;
    padding: 0 4rem 4rem;
    overflow: auto
}

@media (max-width: 768px) {
    .popup-style-item__content {
        padding: 0rem 1.2rem 1.6rem
    }
}

.popup-style-item__content::-webkit-scrollbar {
    width: .6rem;
    height: .6rem
}

.popup-style-item__content::-webkit-scrollbar-track {
    background: transparent
}

.popup-style-item__content::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary, #95A7CF);
    border-radius: 1rem
}

.popup-style-item__text {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .popup-style-item__text {
        font-size: 1.8rem
    }
}

.default-btn {
    padding: 1.6rem 4rem 1.4rem;
    border: .1rem solid var(--primary-main, #001489);
    background-color: var(--primary-main, #001489);
    color: var(--text-on-dark-primary, #FFFFFF);
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-family: Onest;
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s
}

@media (max-width: 768px) {
    .default-btn {
        padding: 1.2rem 3.2rem 1rem;
        font-size: 1.6rem;
        line-height: 1.4
    }

    .default-btn svg {
        width: 1.6rem;
        height: 1.6rem
    }
}

@media (hover) {
    .default-btn:hover {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .default-btn:active {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

.default-btn:disabled, .default-btn._disabled {
    background-color: var(--text-on-dark-secondary, #B2B8DB);
    border-color: var(--text-on-dark-secondary, #B2B8DB);
    opacity: .4
}

.default-btn svg {
    width: 2.4rem;
    height: 2.4rem
}

@media (max-width: 768px) {
    .default-btn svg {
        width: 1.6rem;
        height: 1.6rem
    }
}

.default-btn_medium {
    padding: 1.2rem 2.4rem 1rem;
    font-size: 1.6rem;
    line-height: 1.4
}

.default-btn_medium svg {
    width: 1.6rem;
    height: 1.6rem
}

.default-btn_small {
    padding: .8rem 1.6rem .6rem;
    font-size: 1.4rem;
    line-height: 1.4
}

.default-btn_small svg {
    width: 1.6rem;
    height: 1.6rem
}

.default-btn_outlined {
    background-color: transparent;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .default-btn_outlined:hover {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .default-btn_outlined:active {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

.default-btn_outlined:disabled, .default-btn_outlined._disabled {
    background-color: transparent;
    border-color: var(--text-on-dark-secondary, #B2B8DB);
    color: var(--text-on-dark-tertiary, #838BBD)
}

.default-btn_text {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .default-btn_text:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .default-btn_text:active {
        background-color: transparent;
        border-color: transparent;
        color: var(--primary-hover, #001DC8)
    }
}

.default-btn_text:disabled, .default-btn_text._disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-on-dark-tertiary, #838BBD)
}

.default-btn_white {
    background-color: var(--backgroud-white, #FFFFFF);
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--primary-main, #001489)
}

@media (hover) {
    .default-btn_white:hover {
        background-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        border-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .default-btn_white:active {
        background-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        border-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        color: var(--primary-hover, #001DC8)
    }
}

.default-btn_white:disabled, .default-btn_white._disabled {
    background-color: var(--backgroud-white, #FFFFFF);
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--text-primary, #4B5484);
    opacity: .4
}

.default-btn_white.default-btn_outlined {
    background-color: transparent;
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--backgroud-white, #FFFFFF)
}

@media (hover) {
    .default-btn_white.default-btn_outlined:hover {
        background-color: transparent;
        border-color: var(--text-on-dark-secondary, #B2B8DB);
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .default-btn_white.default-btn_outlined:active {
        background-color: transparent;
        border-color: var(--text-on-dark-secondary, #B2B8DB);
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.default-btn_white.default-btn_outlined:disabled, .default-btn_white.default-btn_outlined._disabled {
    background-color: transparent;
    border-color: var(--text-primary, #4B5484);
    color: var(--text-secondary, #95A7CF);
    opacity: .8
}

.default-btn_white.default-btn_text {
    background-color: transparent;
    border-color: transparent;
    color: var(--backgroud-white, #FFFFFF)
}

@media (hover) {
    .default-btn_white.default-btn_text:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--text-secondary, #95A7CF)
    }
}

@media (hover: none) {
    .default-btn_white.default-btn_text:active {
        background-color: transparent;
        border-color: transparent;
        color: var(--text-secondary, #95A7CF)
    }
}

.default-btn_white.default-btn_text:disabled, .default-btn_white.default-btn_text._disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary, #95A7CF);
    opacity: .4
}

.icon-btn {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .1rem solid var(--primary-main, #001489);
    background-color: var(--primary-main, #001489);
    color: var(--text-on-dark-primary, #FFFFFF);
    border-radius: 50%;
    transition: .3s
}

@media (hover) {
    .icon-btn:hover {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .icon-btn:active {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

.icon-btn:disabled, .icon-btn._disabled {
    background-color: var(--text-on-dark-secondary, #B2B8DB);
    border-color: var(--text-on-dark-secondary, #B2B8DB);
    opacity: .4
}

.icon-btn svg {
    width: 2.4rem;
    height: 2.4rem
}

@media (max-width: 768px) {
    .icon-btn svg {
        width: 1.6rem;
        height: 1.6rem
    }
}

.icon-btn_outlined {
    background-color: transparent;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .icon-btn_outlined:hover {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .icon-btn_outlined:active {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

.icon-btn_outlined:disabled, .icon-btn_outlined._disabled {
    background-color: transparent;
    border-color: var(--text-on-dark-secondary, #B2B8DB);
    color: var(--text-on-dark-tertiary, #838BBD)
}

.icon-btn_text {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .icon-btn_text:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .icon-btn_text:active {
        background-color: transparent;
        border-color: transparent;
        color: var(--primary-hover, #001DC8)
    }
}

.icon-btn_text:disabled, .icon-btn_text._disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-on-dark-tertiary, #838BBD)
}

.icon-btn_white {
    background-color: var(--backgroud-white, #FFFFFF);
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--text-primary, #4B5484)
}

@media (hover) {
    .icon-btn_white:hover {
        background-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        border-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .icon-btn_white:active {
        background-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        border-color: var(--backgroud-white-70, rgba(255, 255, 255, .7));
        color: var(--primary-hover, #001DC8)
    }
}

.icon-btn_white:disabled, .icon-btn_white._disabled {
    background-color: var(--backgroud-white, #FFFFFF);
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--text-primary, #4B5484);
    opacity: .4
}

.icon-btn_white.icon-btn_outlined {
    background-color: transparent;
    border-color: var(--backgroud-white, #FFFFFF);
    color: var(--backgroud-white, #FFFFFF)
}

@media (hover) {
    .icon-btn_white.icon-btn_outlined:hover {
        background-color: transparent;
        border-color: var(--text-on-dark-secondary, #B2B8DB);
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .icon-btn_white.icon-btn_outlined:active {
        background-color: transparent;
        border-color: var(--text-on-dark-secondary, #B2B8DB);
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.icon-btn_white.icon-btn_outlined:disabled, .icon-btn_white.icon-btn_outlined._disabled {
    background-color: transparent;
    border-color: var(--text-primary, #4B5484);
    color: var(--text-secondary, #95A7CF);
    opacity: .8
}

.icon-btn_white.icon-btn_text {
    background-color: transparent;
    border-color: transparent;
    color: var(--backgroud-white, #FFFFFF)
}

@media (hover) {
    .icon-btn_white.icon-btn_text:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--text-secondary, #95A7CF)
    }
}

@media (hover: none) {
    .icon-btn_white.icon-btn_text:active {
        background-color: transparent;
        border-color: transparent;
        color: var(--text-secondary, #95A7CF)
    }
}

.icon-btn_white.icon-btn_text:disabled, .icon-btn_white.icon-btn_text._disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary, #95A7CF);
    opacity: .4
}

.chip {
    font-family: Onest;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--text-on-dark-primary, #FFFFFF);
    background-color: #e02d3c;
    padding: .4rem 1rem .2rem;
    border-radius: .8rem
}

.select {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column
}

.select[data-select]:not(._dropped) .select__container, .select[data-dropdown]:not(._dropped) .select__container {
    opacity: 0;
    pointer-events: none
}

.select[data-select]._dropped, .select[data-dropdown]._dropped {
    z-index: 2
}

.select[data-select]._dropped .select__btn-icon svg, .select[data-dropdown]._dropped .select__btn-icon svg {
    scale: 1 -1
}

.select[data-select-multiple] [data-btn-text][data-selected-count]:after {
    content: " (" attr(data-selected-count) ")"
}

.select__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1.2rem 2.4rem 1rem;
    border: .1rem solid var(--primary-main, #001489);
    color: var(--primary-main, #001489);
    border-radius: 10rem;
    font-family: Onest;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
    text-align: left
}

@media (max-width: 768px) {
    .select__btn {
        padding: .9rem 1.6rem .7rem;
        font-size: 1.4rem;
        letter-spacing: .01em
    }
}

.select__btn-text {
    flex: 1
}

.select__btn-icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem
}

.select__btn-icon svg {
    transition: scale .5s
}

.select__container {
    position: absolute;
    top: calc(100% + .6rem);
    left: 0;
    width: 100%;
    min-width: 27.4rem;
    max-height: 18.4rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: .4rem 0;
    border-radius: .6rem;
    background-color: var(--backgroud-white, #FFFFFF);
    box-shadow: 0 .1rem .4rem #0000001a, 0 .9rem 2.8rem .8rem #0000000d, 0 .6rem 1.6rem #00000014, 0 .3rem .6rem -.4rem #0000001f;
    transition: .5s
}

.select__container::-webkit-scrollbar {
    width: 1rem;
    height: 1fr
}

.select__container::-webkit-scrollbar-track {
    background: transparent
}

.select__container::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: var(--text-secondary, #95A7CF);
    margin: .2rem
}

.select__inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: max-content
}

.select-item {
    padding: 1rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    font-family: Fira Sans;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    cursor: pointer;
    transition: .3s
}

@media (hover) {
    .select-item:hover {
        background-color: var(--backgroud-light, #F1F3F9)
    }
}

@media (hover: none) {
    .select-item:active {
        background-color: var(--backgroud-light, #F1F3F9)
    }
}

.select-item:not(:last-child) {
    border-bottom: .1rem solid var(--stroke-primary, #EBEAE9)
}

.select-item._selected svg {
    opacity: 1
}

.select-item svg {
    width: 2.4rem;
    height: 2.4rem;
    opacity: 0;
    transition: opacity .3s
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap
}

.pagination__link {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Onest;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 600;
    color: var(--primary-main, #001489);
    text-transform: uppercase;
    text-align: center;
    border-radius: 50%
}

.pagination__link:is(a) {
    transition: .3s
}

@media (hover) {
    .pagination__link:is(a):hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .pagination__link:is(a):active {
        color: var(--primary-hover, #001DC8)
    }
}

.pagination__link._active {
    background-color: var(--primary-main, #001489);
    color: var(--text-on-dark-primary, #FFFFFF)
}

.pagination__link._disabled {
    pointer-events: none;
    color: var(--text-secondary, #95A7CF)
}

.pagination__link svg {
    width: 2.4rem;
    height: 2.4rem
}

.header {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    color: var(--text-on-dark-primary, #FFFFFF);
    padding-top: 6rem
}

@media (max-width: 768px) {
    .header {
        padding-top: 2.4rem
    }
}

.header.header_dark {
    color: var(--primary-main, #001489)
}

.header.header_dark .header__logo-dark {
    opacity: 1
}

.header.header_dark .header__logo-default {
    opacity: 0
}

@media (min-width: 769px) {
    .header.header_dark-desktop {
        color: var(--primary-main, #001489)
    }

    .header.header_dark-desktop .header__logo-dark {
        opacity: 1
    }

    .header.header_dark-desktop .header__logo-default {
        opacity: 0
    }
}

.header:not(._catalog-open) .header-catalog {
    opacity: 0;
    translate: 0 -100%
}

@media (min-width: 769px) {
    .header._catalog-open {
        color: var(--primary-main, #001489)
    }

    .header._catalog-open .header__container {
        pointer-events: none
    }

    .header._catalog-open .header-nav, .header._catalog-open .header__logo, .header._catalog-open .header-lang {
        pointer-events: all
    }

    .header._catalog-open .header__logo-dark {
        opacity: 1
    }

    .header._catalog-open .header__logo-default {
        opacity: 0
    }

    .header._catalog-open .header-nav__link[data-header-catalog-btn] svg {
        scale: 1 -1
    }
}

@media (max-width: 768px) {
    .header:not(._menu-open) .header-lang {
        opacity: 0;
        pointer-events: none
    }

    .header:not(._menu-open) .header-menu {
        opacity: 0;
        pointer-events: none
    }

    .header:not(._menu-open) .header-menu__container {
        translate: 0 -100%
    }
}

@media (max-width: 768px) {
    .header._menu-open {
        color: var(--text-on-dark-primary, #FFFFFF)
    }

    .header._menu-open .header__logo-dark {
        opacity: 0
    }

    .header._menu-open .header__logo-default {
        opacity: 1
    }

    .header._menu-open .header__menu-btn svg:nth-child(1) {
        opacity: 0;
        scale: 0
    }

    .header._menu-open .header__menu-btn svg:nth-child(2) {
        opacity: 1;
        scale: 1
    }
}

.header__container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12rem
}

@media (max-width: 768px) {
    .header__container {
        gap: 2.4rem;
        justify-content: space-between
    }
}

.header__logo {
    position: relative;
    z-index: 1;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 768px) {
    .header__logo {
        height: 3.6rem
    }
}

.header__logo img, .header__logo picture, .header__logo video {
    object-fit: contain;
    object-position: left center;
    width: 100%;
    height: 100%;
    transition: .3s
}

.header__logo-dark {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .header__inner {
        gap: 2rem
    }
}

@media (max-width: 768px) {
    .header-menu {
        position: absolute;
        top: -2.4rem;
        left: 0;
        width: 100%;
        height: 100vh;
        transition: .5s
    }
}

@media (max-width: 768px) {
    .header-menu__bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000626b2
    }
}

@media (max-width: 768px) {
    .header-menu__container {
        position: relative;
        padding-top: 10rem;
        background: radial-gradient(70% 70% at 70% 50%, #216CCD 0%, #001287 100%);
        color: var(--text-on-dark-primary, #FFFFFF);
        padding: 10rem 2.4rem 4rem;
        border-radius: 0 0 2.8rem 2.8rem;
        transition: .5s
    }
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .header-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.4rem
    }
}

.header-nav__link {
    font-family: Graphik LC;
    font-size: 1.8rem;
    font-weight: 1.45;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: .3s
}

@media (max-width: 768px) {
    .header-nav__link {
        font-size: 1.6rem;
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (hover) {
    .header-nav__link:hover {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .header-nav__link:active {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.header-nav__link svg {
    width: 2.4rem;
    height: 2.4rem;
    transition: scale .3s
}

@media (max-width: 768px) {
    .header-nav-item[data-dropdown]:not(._dropped) .header-nav-item__drop {
        opacity: 0;
        pointer-events: none;
        grid-template-rows:0fr;
        padding-top: 0
    }

    .header-nav-item[data-dropdown]._dropped .header-nav-item__btn {
        color: var(--backgroud-white-60, rgba(255, 255, 255, .6))
    }

    .header-nav-item[data-dropdown]._dropped .header-nav-item__btn svg {
        scale: 1 -1
    }
}

.header-nav-item__drop {
    display: none
}

@media (max-width: 768px) {
    .header-nav-item__drop {
        display: grid;
        grid-template-rows:1fr;
        overflow: hidden;
        padding: 2rem 0rem 0rem 2.4rem;
        transition: .5s
    }
}

.header-nav-item__container {
    min-height: 0
}

.header-nav-item__list {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.header-nav-item__link {
    font-family: Graphik LC;
    font-size: 1.6rem;
    line-height: 1.45;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s;
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (hover) {
    .header-nav-item__link:hover {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .header-nav-item__link:active {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.header-lang {
    position: relative;
    transition: .3s
}

@media (min-width: 769px) {
    .header-lang:hover .header-lang__btn svg {
        scale: 1 -1
    }

    .header-lang:not(:hover) .header-lang__btn svg {
        scale: 1 1
    }

    .header-lang:not(:hover) .header-lang__drop {
        opacity: 0;
        pointer-events: none;
        translate: -50% -1rem
    }
}

@media (max-width: 768px) {
    .header-lang[data-dropdown] .header-lang__btn svg {
        scale: 1 -1
    }

    .header-lang[data-dropdown]:not(._dropped) .header-lang__btn svg {
        scale: 1 1
    }

    .header-lang[data-dropdown]:not(._dropped) .header-lang__drop {
        opacity: 0;
        pointer-events: none;
        translate: -50% -1rem
    }
}

.header-lang__btn {
    font-family: Graphik LC;
    font-size: 1.8rem;
    font-weight: 1.45;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: .3s
}

@media (max-width: 768px) {
    .header-lang__btn {
        font-size: 1.6rem
    }
}

@media (hover) {
    .header-lang__btn:hover {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .header-lang__btn:active {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.header-lang__btn svg {
    width: 2.4rem;
    height: 2.4rem;
    transition: scale .3s
}

.header-lang__drop {
    position: absolute;
    top: 100%;
    padding-top: 1.5rem;
    left: 50%;
    translate: -50% 0;
    width: fit-content;
    transition: .3s
}

@media (max-width: 768px) {
    .header-lang__drop {
        padding-top: .4rem
    }
}

.header-lang__list {
    display: flex;
    flex-direction: column;
    border-radius: .6rem;
    background-color: var(--backgroud-white, #FFFFFF);
    box-shadow: 0 .1rem .4rem #0000001a, 0 .9rem 2.8rem .8rem #0000000d, 0 .6rem 1.6rem #00000014, 0 .3rem .6rem -.4rem #0000001f
}

.header-lang__item {
    padding: 1rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    transition: .3s
}

@media (hover) {
    .header-lang__item:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .header-lang__item:active {
        color: var(--primary-hover, #001DC8)
    }
}

.header-lang__item:not(._active) svg {
    opacity: 0
}

.header-lang__item:not(:last-child) {
    border-bottom: .1rem solid var(--stroke-primary, #EBEAE9)
}

.header-lang__item svg {
    width: 2.4rem;
    height: 2.4rem
}

.header__menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    transition: .3s;
    display: none
}

@media (max-width: 768px) {
    .header__menu-btn {
        display: flex
    }
}

.header__menu-btn svg {
    position: absolute;
    transition: opacity .3s, scale .3s
}

.header__menu-btn svg:nth-child(2) {
    opacity: 0;
    scale: 0
}

.header-catalog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15.7rem 0 4rem;
    background-color: var(--backgroud-white, #FFFFFF);
    border-radius: 0 0 4rem 4rem;
    box-shadow: 0 .6rem 1.6rem #00000014;
    transition: .5s;
    z-index: 1;
}
/* _catalog-open */

@media (max-width: 768px) {
    .header-catalog {
        display: none
    }
}

.header-catalog__container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap
}

.header-catalog-card {
    height: auto;
    width: 100%;
    max-width: 45rem;
    display: flex;
    flex-direction: column;
    border-radius: 1.6rem;
    background-color: var(--backgroud-light, #F1F3F9);
    overflow: hidden
}

@media (hover) {
    .header-catalog-card:hover .header-catalog-card__img img, .header-catalog-card:hover .header-catalog-card__img picture, .header-catalog-card:hover .header-catalog-card__img video {
        scale: 1.05
    }

    .header-catalog-card:hover .header-catalog-card__title {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .header-catalog-card:active .header-catalog-card__img img, .header-catalog-card:active .header-catalog-card__img picture, .header-catalog-card:active .header-catalog-card__img video {
        scale: 1.05
    }

    .header-catalog-card:active .header-catalog-card__title {
        color: var(--primary-hover, #001DC8)
    }
}

.header-catalog-card__img {
    flex: none;
    width: 100%;
    height: 18rem;
    border-radius: 1.6rem;
    background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    overflow: hidden
}

.header-catalog-card__img img, .header-catalog-card__img picture, .header-catalog-card__img video {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: .3s
}

.header-catalog-card__container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.8rem;
    padding: 3.2rem 0rem 2.4rem
}

.header-catalog-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 0rem 1.6rem
}

.header-catalog-card__title {
    font-family: Graphik LC;
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: .01em;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s
}

.header-catalog-card__text {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    transition: .3s
}

.header-catalog-card__btn {
    margin-top: auto
}

.footer {
    width: 100%;
    max-width: 192rem;
    margin: 10rem auto 2rem;
    padding: 0 2rem
}

@media (max-width: 768px) {
    .footer {
        margin: 8rem 0rem 1.6rem;
        padding: 0
    }
}

.footer__wrapper {
    padding: 2.4rem 0rem;
    background-color: var(--primary-main, #001489);
    color: var(--text-on-dark-primary, #FFFFFF);
    border-radius: 3rem
}

@media (max-width: 768px) {
    .footer__wrapper {
        padding: unset;
        background-color: unset;
        border-radius: unset
    }
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 4rem
}

@media (max-width: 768px) {
    .footer__container {
        gap: 1.6rem
    }
}

.footer__top {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    gap: 2.4rem;
    align-items: center
}

@media (max-width: 768px) {
    .footer__top {
        padding: 2.4rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        align-items: stretch;
        background-color: var(--primary-main, #001489);
        border-radius: 2rem;
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.footer__logo {
    width: 100%;
    height: 3.5rem
}

@media (max-width: 768px) {
    .footer__logo {
        display: none
    }
}

.footer__logo img, .footer__logo picture, .footer__logo video {
    object-fit: contain;
    object-position: left top;
    width: 100%;
    height: 100%
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .footer-nav {
        gap: 1.6rem 2.4rem;
        justify-content: flex-start
    }
}

.footer-nav__link {
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.45;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-on-dark-primary, #FFFFFF);
    transition: .3s
}

@media (max-width: 768px) {
    .footer-nav__link {
        font-size: 1.6rem
    }
}

@media (hover) {
    .footer-nav__link:hover {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

@media (hover: none) {
    .footer-nav__link:active {
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.footer-prod {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: .8rem;
    font-family: Inter;
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 600
}

@media (max-width: 768px) {
    .footer-prod {
        font-size: 1.4rem;
        justify-content: flex-start
    }
}

.footer-prod__text {
    margin-bottom: .4rem
}

.footer-prod img, .footer-prod picture, .footer-prod video {
    object-fit: contain;
    object-position: right center;
    height: 4.4rem
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .footer__bottom {
        flex-direction: column;
        gap: 1.2rem
    }
}

.footer__legal {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-on-dark-tertiary, #838BBD)
}

@media (max-width: 768px) {
    .footer__legal {
        font-family: Onest;
        font-size: 1.1rem;
        color: var(--text-secondary, #95A7CF)
    }
}

.footer__legal:is(a), .footer__legal a {
    transition: .3s
}

@media (hover) {
    .footer__legal:is(a):hover, .footer__legal a:hover {
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (hover) and (max-width: 768px) {
    .footer__legal:is(a):hover, .footer__legal a:hover {
        color: var(--text-primary, #4B5484)
    }
}

@media (hover: none) {
    .footer__legal:is(a):active, .footer__legal a:active {
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (hover: none) and (max-width: 768px) {
    .footer__legal:is(a):active, .footer__legal a:active {
        color: var(--text-primary, #4B5484)
    }
}

.teosophy {
    width: 100%;
    max-width: 192rem;
    margin: 10rem auto 0;
    padding: 0rem 2rem
}

@media (max-width: 768px) {
    .teosophy {
        margin: 7rem auto 0;
        padding: 0
    }
}

.teosophy__wrapper {
    position: relative;
    min-height: 90rem;
    padding: 18rem 0rem 6rem
}

@media (max-width: 768px) {
    .teosophy__wrapper {
        padding: 0;
        min-height: unset;
        display: flex;
        flex-direction: column;
        gap: 3.2rem
    }
}

.teosophy__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .teosophy__bg {
        position: static;
        height: 38rem;
        border-radius: 2.8rem
    }
}

.teosophy__bg img, .teosophy__bg picture, .teosophy__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.teosophy__container {
    position: relative;
    z-index: 1
}

.teosophy__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem;
    color: var(--text-on-dark-primary, #FFFFFF);
    max-width: 80rem
}

@media (max-width: 768px) {
    .teosophy__head {
        gap: 3.2rem
    }
}

.teosophy__head-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .teosophy__head-inner {
        gap: 2rem
    }
}

.teosophy__title {
    font-family: Graphik LC;
    font-size: 12rem;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .teosophy__title {
        font-size: 4.6rem;
        color: var(--primary-main, #001489)
    }
}

.teosophy__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    max-width: 66rem
}

@media (max-width: 768px) {
    .teosophy__text {
        font-size: 2rem;
        letter-spacing: normal;
        color: var(--text-primary, #4B5484)
    }
}

@media (max-width: 768px) {
    .teosophy__btn {
        border: .1rem solid var(--primary-main, #001489);
        background-color: var(--primary-main, #001489);
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (max-width: 768px) and (hover) {
    .teosophy__btn:hover {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (max-width: 768px) and (hover: none) {
    .teosophy__btn:active {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (max-width: 768px) {
    .teosophy__btn:disabled, .teosophy__btn._disabled {
        background-color: var(--text-on-dark-secondary, #B2B8DB);
        border-color: var(--text-on-dark-secondary, #B2B8DB);
        opacity: .4
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem
}

@media (hover: hover) {
    .product-card:hover .product-card__img-bg {
        opacity: 1
    }

    .product-card:hover .product-card__title {
        color: var(--primary-hover, #001DC8)
    }
}

@media (max-width: 768px) {
    .product-card {
        gap: 1.2rem
    }
}

.product-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 360/270;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

@media (max-width: 768px) {
    .product-card__img {
        aspect-ratio: 328/250
    }
}

.product-card__img img, .product-card__img picture, .product-card__img video {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
    height: 100%
}

.product-card__img .product-card__img-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    object-position: center
}

.product-card__chip {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 0rem
}

@media (max-width: 768px) {
    .product-card__chip {
        top: .4rem
    }
}

.product-card__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
    max-width: 33rem
}

@media (max-width: 768px) {
    .product-card__container {
        gap: .4rem
    }
}

.product-card__desc {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .product-card__desc {
        font-size: 1.6rem
    }
}

.product-card__title {
    font-family: Graphik LC;
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .product-card__title {
        font-size: 1.8rem;
        letter-spacing: normal
    }
}

.product-card_large .product-card__img {
    aspect-ratio: 360/420
}

@media (max-width: 768px) {
    .product-card_large .product-card__img {
        aspect-ratio: 328/350
    }
}

@media (max-width: 768px) {
    .products {
        padding: 4rem 0rem
    }
}

.products_big .products__container {
    padding-top: 10rem
}

@media (max-width: 768px) {
    .products_big .products__container {
        padding-top: 0;
        padding-bottom: 0
    }
}

.products_big .products__content {
    margin-top: 10rem
}

@media (max-width: 768px) {
    .products_big .products__content {
        margin-top: 0
    }
}

.products__container {
    max-width: 175.2rem;
    min-height: 75rem;
    display: grid;
    grid-template-columns:1fr 124.5rem;
    align-items: flex-start;
    gap: 6rem;
    padding-top: 18rem;
    padding-bottom: 10rem
}

@media (max-width: 768px) {
    .products__container {
        min-height: unset;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4rem;
        padding-top: 0;
        padding-bottom: 0
    }
}

.products__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4.8rem;
    margin-top: 4rem
}

@media (max-width: 768px) {
    .products__content {
        gap: 2.4rem;
        margin-top: 0
    }
}

.products__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .products__head {
        gap: 1.2rem
    }
}

.products__title {
    color: var(--primary-main, #001489)
}

.products__text {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .products__text {
        font-size: 1.8rem
    }
}

.products__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    flex-wrap: wrap
}

@media (max-width: 768px) {
    .products__nav-btn {
        padding: .8rem 1.6rem;
        font-size: 1.4rem;
        line-height: 1.4
    }
}

.products__nav-btn[data-tab-btn]._tab-active {
    background-color: var(--primary-main, #001489);
    color: var(--text-on-dark-primary, #FFFFFF)
}

.products__tabs {
    position: relative;
    width: 100%
}

.products__tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s
}

.products__tab[data-tab]:not(._tab-active) {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

@media (max-width: 768px) {
    .products__tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rem
    }
}

.products__swiper-btn {
    position: absolute;
    top: 50%;
    right: -4.5rem;
    translate: 50% -50%
}

.products__swiper-btn.swiper-button-lock, .products__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .products__swiper-pag {
        display: flex
    }
}

.products__swiper-pag._empty-bullets {
    display: none
}

.products__swiper .swiper-wrapper {
    align-items: stretch
}

.products__swiper .swiper-slide {
    height: auto
}

.product-rec {
    padding: 8rem 0rem 10rem
}

@media (max-width: 768px) {
    .product-rec {
        padding: 4rem 0rem;
        background-color: var(--backgroud-color, #F4F7FF)
    }
}

.product-rec__container {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .product-rec__container {
        gap: 2.4rem
    }
}

.product-rec__title {
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .product-rec__title {
        text-align: center
    }
}

.product-rec__swiper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem
}

.product-rec__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .product-rec__swiper-pag {
        display: flex
    }
}

.product-rec__swiper-btn {
    position: absolute;
    top: 50%
}

.product-rec__swiper-btn.swiper-button-lock {
    display: none
}

.product-rec__swiper-btn[data-prev] {
    left: -9.6rem;
    translate: -100% -50%
}

.product-rec__swiper-btn[data-next] {
    right: -9.6rem;
    translate: 100% -50%
}

@media (max-width: 768px) {
    .product-rec__swiper .swiper {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.recipe-card {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

@media (max-width: 768px) {
    .recipe-card {
        gap: 1.6rem
    }
}

@media (hover) {
    .recipe-card:hover .recipe-card__img > img, .recipe-card:hover .recipe-card__img > picture, .recipe-card:hover .recipe-card__img > video {
        scale: 1.05
    }

    .recipe-card:hover .recipe-card__title {
        color: var(--primary-hover, #001DC8)
    }

    .recipe-card:hover .recipe-card__info {
        color: var(--text-primary, #4B5484)
    }
}

@media (hover: none) {
    .recipe-card:active .recipe-card__img > img, .recipe-card:active .recipe-card__img > picture, .recipe-card:active .recipe-card__img > video {
        scale: 1.05
    }

    .recipe-card:active .recipe-card__title {
        color: var(--primary-hover, #001DC8)
    }

    .recipe-card:active .recipe-card__info {
        color: var(--text-primary, #4B5484)
    }
}

.recipe-card__img {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    width: 100%;
    height: 53.5rem;
    background-color: var(--backgroud-light, #F1F3F9);
    background-image: url(/local/templates/teos/frontend/css/../img/img-empty.png);
    background-size: 30rem;
    background-position: center;
    background-repeat: no-repeat
}

@media (max-width: 768px) {
    .recipe-card__img {
        height: 36.5rem;
        background-size: 18rem
    }
}

.recipe-card__img > img, .recipe-card__img > picture, .recipe-card__img > video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: scale .5s
}

.recipe-card__play {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background-color: var(--backgroud-white-60, rgba(255, 255, 255, .6));
    backdrop-filter: blur(.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-main, #001489);
    overflow: hidden
}

@media (max-width: 768px) {
    .recipe-card__play {
        width: 7rem;
        height: 7rem
    }
}

.recipe-card__play:is(a), .recipe-card__play:is(button) {
    transition: .3s
}

@media (hover) {
    .recipe-card__play:is(a):hover, .recipe-card__play:is(button):hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .recipe-card__play:is(a):active, .recipe-card__play:is(button):active {
        color: var(--primary-hover, #001DC8)
    }
}

.recipe-card__play-text {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 125%;
    height: 125%;
    object-fit: cover;
    object-position: center;
    animation: spin 12s linear infinite reverse
}

.recipe-card__play-icon {
    width: 3.2rem;
    height: 3.2rem
}

@media (max-width: 768px) {
    .recipe-card__play-icon {
        width: 2.4rem;
        height: 2.4rem
    }
}

.recipe-card__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem
}

.recipe-card__title {
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary-main, #001489);
    transition: .3s
}

@media (max-width: 768px) {
    .recipe-card__title {
        line-height: 1.4
    }
}

.recipe-card__info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    transition: .3s
}

@media (max-width: 768px) {
    .recipe-card__info {
        font-size: 1.8rem
    }
}

.recipe-card__chip {
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    background-color: var(--state-bage, #F08700)
}

@media (max-width: 768px) {
    .recipe-rec {
        margin-top: 7rem
    }
}

.recipe-rec__container {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .recipe-rec__container {
        gap: 2.4rem
    }
}

.recipe-rec__title {
    color: var(--primary-main, #001489)
}

.recipe-rec__swiper {
    position: relative
}

.recipe-rec__swiper-btn {
    position: absolute;
    top: 27rem
}

.recipe-rec__swiper-btn.swiper-button-lock {
    display: none
}

.recipe-rec__swiper-btn[data-prev] {
    left: -9.6rem;
    translate: -100% -50%
}

.recipe-rec__swiper-btn[data-next] {
    right: -9.6rem;
    translate: 100% -50%
}

@media (max-width: 768px) {
    .recipe-rec__swiper .swiper-wrapper {
        transform: none !important;
        flex-direction: column !important;
        gap: 4.8rem
    }
}

@media (max-width: 768px) {
    .recipe-rec__swiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important
    }
}

.recipes-slider {
    display: grid;
    grid-template-columns:76rem 1fr;
    align-items: center;
    gap: 8rem;
    padding: 2.4rem 8rem 2.4rem 2.4rem;
    border-radius: 6rem;
    overflow: hidden;
    background-color: var(--backgroud-color, #F4F7FF)
}

@media (max-width: 768px) {
    .recipes-slider {
        display: flex;
        flex-direction: column;
        padding: 1.6rem 1.6rem 2.4rem;
        border-radius: 2.8rem;
        background-color: var(--primary-main, #001489);
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.recipes-slider__imgs {
    height: 100%
}

@media (max-width: 768px) {
    .recipes-slider__imgs {
        display: none
    }
}

.recipes-slider__imgs .swiper-wrapper {
    align-items: stretch
}

.recipes-slider__imgs .swiper-slide {
    position: relative;
    height: auto;
    min-height: 53.5rem;
    border-radius: 4.5rem;
    overflow: hidden
}

.recipes-slider__imgs .swiper-slide img, .recipes-slider__imgs .swiper-slide picture, .recipes-slider__imgs .swiper-slide video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recipes-slider__btns {
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 21.2rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    background-color: var(--backgroud-color, #F4F7FF);
    border-radius: 10rem
}

@media (max-width: 768px) {
    .recipes-slider__btns {
        left: unset;
        right: 1.6rem;
        background-color: var(--primary-main, #001489)
    }
}

.recipes-slider__btn {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #00148914;
    color: var(--primary-main, #001489);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s
}

@media (max-width: 768px) {
    .recipes-slider__btn {
        background-color: var(--backgroud-white-10, rgba(255, 255, 255, .1));
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (hover) {
    .recipes-slider__btn:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .recipes-slider__btn:active {
        color: var(--primary-hover, #001DC8)
    }
}

.recipes-slider__btn svg {
    width: 3.2rem;
    height: 3.2rem
}

.recipes-slider__swiper .swiper-wrapper {
    align-items: stretch
}

.recipes-slider__swiper .swiper-slide {
    height: auto;
    transition: opacity .5s !important
}

.recipes-slider-item {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
    height: 100%
}

.recipes-slider-item__img {
    width: 100%;
    height: 23rem;
    border-radius: 2rem;
    overflow: hidden;
    display: none
}

@media (max-width: 768px) {
    .recipes-slider-item__img {
        display: block
    }
}

.recipes-slider-item__img img, .recipes-slider-item__img picture, .recipes-slider-item__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recipes-slider-item__container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem
}

@media (max-width: 768px) {
    .recipes-slider-item__container {
        gap: 3.2rem
    }
}

.recipes-slider-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem
}

@media (max-width: 768px) {
    .recipes-slider-item__content {
        gap: .8rem
    }
}

.recipes-slider-item__title {
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .recipes-slider-item__title {
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.recipes-slider-item__text {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .recipes-slider-item__text {
        font-size: 1.8rem;
        color: var(--text-on-dark-secondary, #B2B8DB)
    }
}

.recipes-slider-item__btn {
    margin-top: auto
}

@media (max-width: 768px) {
    .recipes-slider-item__btn {
        background-color: var(--backgroud-white-10, rgba(255, 255, 255, .1));
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.cookie {
    position: fixed;
    z-index: 5000;
    bottom: 6rem;
    right: 2rem;
    width: 100%;
    max-width: 31.4rem;
    padding: 2rem;
    background-color: var(--backgroud-light, #F1F3F9);
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transition: .5s
}

@media (max-width: 768px) {
    .cookie {
        bottom: 2rem
    }
}

.cookie[data-cookie]:not(._cookie-active) {
    opacity: 0;
    pointer-events: none
}

.cookie__content {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.cookie__title {
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--primary-main, #001489);
    text-transform: uppercase
}

.cookie__text {
    font-family: Fira Sans;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400
}

.cookie__text a {
    text-decoration: underline;
    text-underline-offset: .2em;
    transition: .3s
}

@media (hover) {
    .cookie__text a:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .cookie__text a:active {
        color: var(--primary-hover, #001DC8)
    }
}

.cookie__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.6rem
}

.main-banner {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 2rem 2rem 0rem
}

@media (max-width: 768px) {
    .main-banner {
        padding: 0
    }
}

.main-banner__wrapper {
    position: relative;
    background: radial-gradient(80% 80% at 60% 50%, #216CCD 0%, #001287 100%);
    border-radius: 8rem;
    overflow: hidden;
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .main-banner__wrapper {
        border-radius: 0 0 2.8rem 2.8rem;
        padding: 27.2rem 0rem 4rem
    }
}

.main-banner__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 81rem;
    height: 78.5rem;
    border-radius: 50% 0 50% 50%;
    overflow: hidden
}

@media (max-width: 768px) {
    .main-banner__img {
        width: 21.5rem;
        height: 23rem
    }

    .main-banner__img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0))
    }
}

.main-banner__img img, .main-banner__img picture, .main-banner__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.main-banner__container {
    position: relative;
    z-index: 1;
    min-height: 89rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 11.5rem;
    padding-bottom: 7.5rem
}

@media (max-width: 768px) {
    .main-banner__container {
        min-height: unset;
        padding-top: 0;
        padding-bottom: 0
    }
}

.main-banner__content {
    max-width: 76rem;
    display: flex;
    flex-direction: column;
    gap: 4rem
}

@media (max-width: 768px) {
    .main-banner__content {
        gap: 2.4rem
    }
}

.main-banner__title {
    font-family: Graphik LC;
    font-size: 12rem;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .main-banner__title {
        font-size: 4.6rem
    }
}

.main-banner__title-anim {
    display: inline-block;
    position: relative;
    color: transparent
}

.main-banner__title-anim-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.main-banner__title-anim-list {
    color: #cd7fb4;
    display: flex;
    flex-direction: column;
    will-change: transform;
    animation: main-banner-title-anim 12s ease-in-out infinite
}

.main-banner__title-anim-list span:nth-child(8n+2) {
    color: #ee7774
}

.main-banner__title-anim-list span:nth-child(8n+3) {
    color: #f08700
}

.main-banner__title-anim-list span:nth-child(8n+4) {
    color: #2298d5
}

.main-banner__title-anim-list span:nth-child(8n+5) {
    color: #e73151
}

.main-banner__title-anim-list span:nth-child(8n+6) {
    color: #f6ab6e
}

.main-banner__title-anim-list span:nth-child(8n+7) {
    color: #fbb900
}

.main-banner__title-anim-list span:nth-child(8n+8) {
    color: #a5a4d2
}

.main-banner__text {
    max-width: 60rem;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em
}

@media (max-width: 768px) {
    .main-banner__text {
        font-size: 2rem;
        letter-spacing: normal
    }
}

@keyframes main-banner-title-anim {
    0%, 6% {
        transform: translateY(0)
    }
    12%, 18% {
        transform: translateY(-12.5%)
    }
    24%, 30% {
        transform: translateY(-25%)
    }
    36%, 42% {
        transform: translateY(-37.5%)
    }
    48%, 54% {
        transform: translateY(-50%)
    }
    60%, 66% {
        transform: translateY(-62.5%)
    }
    72%, 78% {
        transform: translateY(-75%)
    }
    84%, 90% {
        transform: translateY(-87.5%)
    }
    96%, to {
        transform: translateY(-100%)
    }
}

.main-about {
    padding: 16rem 0rem;
    position: relative;
    overflow: hidden
}

@media (max-width: 768px) {
    .main-about {
        padding: 12rem 0rem 0rem
    }
}

.main-about__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .main-about__bg {
        height: 46rem
    }
}

.main-about__bg img, .main-about__bg picture, .main-about__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.main-about__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16rem
}

@media (max-width: 768px) {
    .main-about__container {
        flex-direction: column;
        gap: 5rem
    }
}

.main-about__img {
    flex: none;
    width: 59.5rem;
    margin-left: -7.3rem
}

@media (max-width: 768px) {
    .main-about__img {
        width: 100%;
        height: 18.5rem;
        margin: 0
    }
}

.main-about__img img, .main-about__img picture, .main-about__img video {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%
}

.main-about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem
}

@media (max-width: 768px) {
    .main-about__content {
        gap: 3.2rem
    }
}

.main-about__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .main-about__inner {
        gap: 2rem
    }
}

.main-about__title {
    font-family: Graphik LC;
    font-size: 4.2rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .main-about__title {
        font-size: 2.6rem
    }
}

.main-about__text {
    font-family: Fira Sans;
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    max-width: 76rem
}

@media (max-width: 768px) {
    .main-about__text {
        font-size: 2rem;
        letter-spacing: normal
    }
}

.main-prod {
    max-width: 192rem;
    margin: 0 auto;
    padding: 0rem 2rem;
    position: relative;
    cursor: none
}

@media (max-width: 768px) {
    .main-prod {
        padding: 0rem 1.6rem;
        margin: 7rem auto
    }
}

.main-prod:not(._mouse-enter) .main-prod__btn {
    scale: 0;
    opacity: 0
}

.main-prod__wrapper {
    display: flex;
    align-items: stretch
}

@media (min-width: 769px) {
    .main-prod__wrapper[data-items="3"] .main-prod-item {
        width: calc((100% - 93.2rem) / 2)
    }

    .main-prod__wrapper[data-items="3"] .main-prod-item._active {
        width: 93.2rem
    }

    .main-prod__wrapper[data-items="3"] .main-prod-item:not(._active) .main-prod-item__img {
        width: 42rem
    }

    .main-prod__wrapper[data-items="3"] .main-prod-item:nth-child(2) {
        background-color: var(--backgroud-light, #F1F3F9)
    }

    .main-prod__wrapper[data-items="3"] .main-prod-item__img {
        width: 61.4rem
    }
}

@media (max-width: 768px) {
    .main-prod__wrapper {
        flex-direction: column;
        gap: 2.4rem
    }
}

.main-prod-item {
    flex: auto;
    width: calc(100% - 116.2rem);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90rem;
    border-radius: 3rem;
    overflow: hidden;
    transition: .6s;
    cursor: none
}

@media (min-width: 769px) {
    .main-prod-item._active {
        width: 116.2rem
    }

    .main-prod-item:not(._active) .main-prod-item__bg {
        opacity: 0
    }

    .main-prod-item:not(._active) .main-prod-item__img {
        opacity: .5;
        width: 53rem
    }

    .main-prod-item:not(._active) .main-prod-item__title {
        opacity: 0
    }
}

@media (max-width: 768px) {
    .main-prod-item {
        width: 100%;
        height: auto;
        min-height: 43.7rem;
        padding: 3.2rem 1.6rem 2.2rem;
        border-radius: 2rem;
        justify-content: space-between
    }
}

.main-prod-item__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    transition: .5s;
    pointer-events: none
}

.main-prod-item__head {
    position: absolute;
    z-index: 1;
    top: 10rem;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem
}

@media (max-width: 768px) {
    .main-prod-item__head {
        position: static
    }
}

.main-prod-item__title {
    font-family: Graphik LC;
    font-size: 12rem;
    line-height: 1.1;
    font-weight: 500;
    text-align: center;
    color: var(--text-on-dark-primary, #FFFFFF);
    white-space: nowrap;
    transition: .3s
}

@media (max-width: 768px) {
    .main-prod-item__title {
        font-size: 4.6rem;
        white-space: normal
    }
}

.main-prod-item__btn {
    background-color: var(--backgroud-white-10, rgba(255, 255, 255, .1));
    border-color: transparent;
    color: var(--text-on-dark-primary, #FFFFFF);
    display: none
}

@media (max-width: 768px) {
    .main-prod-item__btn {
        display: flex
    }
}

.main-prod-item__img {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 70rem;
    height: 100%;
    transition: .5s
}

@media (max-width: 768px) {
    .main-prod-item__img {
        position: static;
        translate: 0 0;
        width: 100%;
        height: 24rem
    }
}

.main-prod-item__img img, .main-prod-item__img picture, .main-prod-item__img video {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%
}

.main-prod__btn {
    position: fixed;
    z-index: 100;
    top: var(--mouse-y, 0);
    left: var(--mouse-x, 0);
    translate: -50% -50%;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background-color: #ffffff1a;
    font-family: Graphik LC;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--text-on-dark-primary, #FFFFFF);
    backdrop-filter: blur(1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    transition: scale .3s, opacity .3s
}

@media (hover: none) {
    .main-prod__btn {
        display: none
    }
}

@media (max-width: 768px) {
    .main-prod__btn {
        display: none
    }
}

.main-new {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 15.6rem 0rem;
    position: relative;
    overflow: hidden
}

@media (max-width: 768px) {
    .main-new {
        padding: 0;
        margin: 7rem 0rem
    }
}

.main-new__wrapper {
    display: flex;
    align-items: center;
    min-height: 55.2rem
}

@media (max-width: 768px) {
    .main-new__wrapper {
        flex-direction: column;
        align-items: stretch;
        min-height: unset;
        gap: 2.4rem
    }
}

.main-new__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 57rem
}

@media (max-width: 768px) {
    .main-new__container {
        gap: 2rem
    }
}

.main-new__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .main-new__title {
        font-size: 4.6rem
    }
}

.main-new__text {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    order: 3
}

@media (max-width: 768px) {
    .main-new__text {
        order: unset
    }
}

.main-new__text[data-tab]:not(._tab-active) {
    display: none
}

.main-new__btns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 2.4rem 0rem 6rem
}

@media (max-width: 768px) {
    .main-new__btns {
        margin: .4rem 0rem 0rem
    }
}

.main-new__btn[data-tab-btn]:not(._tab-active) {
    background-color: transparent;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .main-new__btn[data-tab-btn]:not(._tab-active):hover {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .main-new__btn[data-tab-btn]:not(._tab-active):active {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

.main-new__tabs {
    position: absolute;
    top: 50%;
    right: 0;
    width: 106.6rem;
    min-height: 55.2rem;
    overflow: hidden;
    translate: 0 -50%
}

@media (max-width: 768px) {
    .main-new__tabs {
        position: relative;
        top: unset;
        right: unset;
        width: calc(100% + 3.2rem);
        margin: 0 -1.6rem;
        min-height: unset;
        translate: 0 0
    }
}

.main-new__tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 5rem;
    transition: opacity .5s
}

@media (max-width: 768px) {
    .main-new__tab {
        position: relative;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.6rem
    }
}

.main-new__tab[data-tab]:not(._tab-active) {
    opacity: 0;
    pointer-events: none
}

@media (max-width: 768px) {
    .main-new__tab[data-tab]:not(._tab-active) {
        position: absolute;
        top: 0;
        left: 0
    }
}

.main-new__swiper {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .main-new__swiper {
        padding: 0rem 1.6rem
    }
}

.main-new__swiper .swiper-wrapper {
    align-items: stretch
}

.main-new__swiper .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.main-new__swiper-btn {
    position: absolute;
    z-index: 100;
    top: 50%;
    right: 2rem;
    translate: 0 -50%
}

@media (max-width: 768px) {
    .main-new__swiper-btn {
        display: none
    }
}

.main-new__swiper-btn.swiper-button-lock, .main-new__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .main-new__swiper-pag {
        display: flex
    }
}

.main-new-card {
    position: relative;
    width: 100%;
    padding: 2rem 4.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

@media (max-width: 768px) {
    .main-new-card {
        padding: 2.4rem 1.6rem
    }
}

@media (hover) {
    .main-new-card:hover.main-new-card_vertical .main-new-card__img-main {
        translate: calc(-50% + 2rem) calc(-50% - 2rem)
    }
}

@media (hover) and (max-width: 768px) {
    .main-new-card:hover.main-new-card_vertical .main-new-card__img-main {
        translate: -50% calc(-50% - 2rem)
    }
}

@media (hover) {
    .main-new-card:hover .main-new-card__title {
        color: var(--primary-hover, #001DC8)
    }

    .main-new-card:hover .main-new-card__img-main {
        translate: calc(-50% + 2rem) -50%
    }
}

@media (hover) and (max-width: 768px) {
    .main-new-card:hover .main-new-card__img-main {
        translate: -50% -50%
    }
}

@media (hover) {
    .main-new-card:hover .main-new-card__img-parallax {
        translate: calc(-50% - 2rem) -50%
    }
}

@media (hover) and (max-width: 768px) {
    .main-new-card:hover .main-new-card__img-parallax {
        translate: -50% -50%
    }
}

@media (hover: none) {
    .main-new-card:active.main-new-card_vertical .main-new-card__img-main {
        translate: calc(-50% + 2rem) calc(-50% - 2rem)
    }
}

@media (hover: none) and (max-width: 768px) {
    .main-new-card:active.main-new-card_vertical .main-new-card__img-main {
        translate: -50% calc(-50% - 2rem)
    }
}

@media (hover: none) {
    .main-new-card:active .main-new-card__title {
        color: var(--primary-hover, #001DC8)
    }

    .main-new-card:active .main-new-card__img-main {
        translate: calc(-50% + 2rem) -50%
    }
}

@media (hover: none) and (max-width: 768px) {
    .main-new-card:active .main-new-card__img-main {
        translate: -50% -50%
    }
}

@media (hover: none) {
    .main-new-card:active .main-new-card__img-parallax {
        translate: calc(-50% - 2rem) -50%
    }
}

@media (hover: none) and (max-width: 768px) {
    .main-new-card:active .main-new-card__img-parallax {
        translate: -50% -50%
    }
}

.main-new-card.main-new-card_vertical .main-new-card__img-main {
    translate: -50% calc(-50% - 2rem)
}

.main-new-card__img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 301/212;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -5deg
}

.main-new-card__img-main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    aspect-ratio: 215/260;
    translate: -50% -50%;
    transition: .5s
}

.main-new-card__img-main img, .main-new-card__img-main picture, .main-new-card__img-main video {
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
    height: 100%
}

.main-new-card__img-parallax {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 5rem);
    height: 100%;
    translate: -50% -50%;
    transition: .5s
}

@media (max-width: 768px) {
    .main-new-card__img-parallax {
        width: calc(100% + 3rem)
    }
}

.main-new-card__img img, .main-new-card__img picture, .main-new-card__img video {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%
}

.main-new-card__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    rotate: 5deg
}

.main-new-card__bg {
    position: relative;
    width: 100%;
    aspect-ratio: 390/404;
    border-radius: 2.8rem;
    background-color: var(--bg-color, #F0D9E9)
}

@media (max-width: 768px) {
    .main-new-card__bg {
        border-radius: 2rem;
        aspect-ratio: 256/265
    }
}

.main-new-card__chip {
    display: block;
    position: absolute;
    bottom: .8rem;
    left: 50%;
    translate: -50% 0;
    font-family: Fira Sans;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-on-dark-primary, #FFFFFF);
    background-color: #e02d3c;
    border-radius: .8rem;
    padding: .4rem 1rem
}

.main-new-card__chip_top {
    bottom: unset;
    top: .8rem
}

.main-new-card__chip_right {
    left: unset;
    right: 1rem;
    translate: 0 0
}

.main-new-card__chip_left {
    right: unset;
    left: 1rem;
    translate: 0 0
}

.main-new-card__title {
    font-family: Graphik LC;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--primary-main, #001489);
    transition: .5s;
    text-align: center;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .main-new-card__title {
        font-size: 1.4rem
    }
}

.main-recipe {
    padding: 2.8rem 0rem
}

@media (max-width: 768px) {
    .main-recipe {
        padding: 0
    }
}

.main-recipe__wrapper {
    position: relative;
    display: grid;
    grid-template-columns:66.2rem 1fr;
    gap: 6rem 10rem;
    grid-template-areas:"swiper head" "swiper head" "swiper preview"
}

@media (max-width: 768px) {
    .main-recipe__wrapper {
        display: flex;
        flex-direction: column;
        gap: 4rem
    }
}

.main-recipe__head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem
}

@media (max-width: 768px) {
    .main-recipe__head {
        gap: 2.4rem
    }
}

.main-recipe__head-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .main-recipe__head-inner {
        gap: 2rem
    }
}

.main-recipe__title {
    font-family: Graphik LC;
    font-size: 4.2rem;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .main-recipe__title {
        font-size: 2.6rem
    }
}

.main-recipe__title-accent {
    position: relative;
    font-family: Onest;
    font-weight: 600;
    color: var(--text-on-dark-primary, #FFFFFF)
}

.main-recipe__title-accent:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(100% + .4em);
    height: calc(100% + .8rem);
    background-color: var(--primary-main, #001489);
    border-radius: .6rem;
    z-index: -1
}

.main-recipe__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .main-recipe__text {
        font-size: 2rem
    }
}

.main-recipe__nav-btn {
    position: absolute;
    top: 50%
}

@media (max-width: 768px) {
    .main-recipe__nav-btn {
        display: none
    }
}

.main-recipe__nav-btn[data-prev] {
    left: -3.2rem;
    translate: -100% -50%
}

.main-recipe__nav-btn[data-next] {
    right: -3.2rem;
    translate: 100% -50%
}

.main-recipe__swiper {
    grid-area: swiper;
    display: flex;
    flex-direction: column;
    gap: 1.6rem
}

@media (max-width: 768px) {
    .main-recipe__swiper {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.main-recipe__swiper .swiper-wrapper {
    align-items: stretch
}

.main-recipe__swiper .swiper-slide {
    height: auto;
    background-color: var(--backgroud-white, #FFFFFF);
    transition: opacity .6s !important
}

.main-recipe__swiper .swiper-slide:not(.swiper-slide-active) {
    pointer-events: none
}

.main-recipe__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .main-recipe__swiper-pag {
        display: flex
    }
}

.main-recipe__preview {
    grid-area: preview;
    height: auto;
    margin-top: auto
}

@media (max-width: 768px) {
    .main-recipe__preview {
        display: none
    }
}

.main-recipe__preview .swiper-slide {
    width: 100%;
    height: 25.5rem;
    border-radius: 2rem;
    overflow: hidden;
    cursor: pointer;
    transition: .6s;
    border: .2rem solid transparent
}

.main-recipe__preview .swiper-slide.swiper-slide-thumb-active {
    border-color: var(--primary-hover, #001DC8)
}

@media (hover) {
    .main-recipe__preview .swiper-slide:hover img, .main-recipe__preview .swiper-slide:hover picture, .main-recipe__preview .swiper-slide:hover video {
        scale: 1.05
    }
}

@media (hover: none) {
    .main-recipe__preview .swiper-slide:active img, .main-recipe__preview .swiper-slide:active picture, .main-recipe__preview .swiper-slide:active video {
        scale: 1.05
    }
}

.main-recipe__preview .swiper-slide img, .main-recipe__preview .swiper-slide picture, .main-recipe__preview .swiper-slide video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: .5s
}

.main-recipe-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    color: var(--primary-main, #001489);
    transition: .5s
}

@media (max-width: 768px) {
    .main-recipe-card {
        gap: 1.6rem
    }
}

@media (hover) {
    .main-recipe-card:hover {
        color: var(--primary-hover, #001DC8)
    }

    .main-recipe-card:hover .main-recipe-card__img img, .main-recipe-card:hover .main-recipe-card__img picture, .main-recipe-card:hover .main-recipe-card__img video {
        scale: 1.05
    }
}

@media (hover: none) {
    .main-recipe-card:active {
        color: var(--primary-hover, #001DC8)
    }

    .main-recipe-card:active .main-recipe-card__img img, .main-recipe-card:active .main-recipe-card__img picture, .main-recipe-card:active .main-recipe-card__img video {
        scale: 1.05
    }
}

.main-recipe-card__img {
    flex: none;
    position: relative;
    width: 100%;
    aspect-ratio: 662/736;
    border-radius: 4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .main-recipe-card__img {
        aspect-ratio: 330/420;
        border-radius: 2rem
    }
}

.main-recipe-card__img:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8));
    pointer-events: none
}

@media (max-width: 768px) {
    .main-recipe-card__img:after {
        content: none;
        display: none
    }
}

.main-recipe-card__img img, .main-recipe-card__img picture, .main-recipe-card__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: .5s
}

.main-recipe-card__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .main-recipe-card__title {
        font-size: 2.2rem;
        line-height: 1.5
    }
}

.catalog-banner {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 2rem 2rem 0rem
}

@media (max-width: 768px) {
    .catalog-banner {
        padding: 0
    }
}

.catalog-banner__wrapper {
    position: relative;
    padding: 18.5rem 0rem 10rem;
    border-radius: 6rem;
    overflow: hidden;
    background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .catalog-banner__wrapper {
        padding: 10.8rem 0rem 3.2rem;
        border-radius: 0 0 2.8rem 2.8rem;
        display: flex;
        flex-direction: column;
        gap: 3.2rem
    }
}

.catalog-banner__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60rem;
    height: 100%
}

@media (max-width: 768px) {
    .catalog-banner__img {
        position: static;
        width: 100%;
        height: auto
    }
}

.catalog-banner__img img, .catalog-banner__img picture, .catalog-banner__img video {
    object-fit: cover;
    object-position: center bottom;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .catalog-banner__container {
        display: flex;
        flex-direction: column;
        gap: 3.2rem
    }
}

.catalog-banner__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4rem
}

@media (max-width: 768px) {
    .catalog-banner__head {
        align-items: center
    }
}

@media (max-width: 768px) {
    .catalog-banner__title {
        text-align: center
    }
}

.catalog-banner__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.6rem;
    max-width: 102.4rem
}

@media (max-width: 768px) {
    .catalog-banner__nav {
        display: none
    }
}

.catalog-adv {
    position: relative
}

@media (max-width: 768px) {
    .catalog-adv {
        display: none
    }
}

.catalog-adv:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 13.7rem;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), #FFFFFF)
}

.catalog-adv:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    background: linear-gradient(0deg, #FFFFFF, rgba(255, 255, 255, 0))
}

.catalog-adv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.catalog-adv__bg img, .catalog-adv__bg picture, .catalog-adv__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.catalog-adv__container {
    position: relative;
    z-index: 1;
    min-height: 67.5rem
}

.catalog-adv__img {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: 50rem;
    height: 55.5rem
}

.catalog-adv__img img, .catalog-adv__img picture, .catalog-adv__img video {
    object-fit: contain;
    object-position: center top;
    width: 100%;
    height: 100%
}

.catalog-adv-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    width: 38rem
}

.catalog-adv-item:nth-child(1) {
    top: 10rem;
    left: 2.4rem
}

.catalog-adv-item:nth-child(1):after {
    top: 10.2rem;
    right: -10.6rem;
    width: 12.8rem;
    height: 8.4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='128' height='85' viewBox='0 0 128 85' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='124' cy='80.5' r='4' fill='%23B2B8DB'/%3E%3Cpath d='M0 0.5H43.7879L123.5 80' stroke='%23B2B8DB' stroke-dasharray='8 8'/%3E%3C/svg%3E%0A");
    background-position: right bottom
}

.catalog-adv-item:nth-child(2) {
    top: 10rem;
    right: 2.4rem
}

.catalog-adv-item:nth-child(2):after {
    top: 10.5rem;
    right: 100%;
    width: 12.8rem;
    height: 8.4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='128' height='85' viewBox='0 0 128 85' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' transform='matrix(-1 0 0 1 8 76.5)' fill='%23B2B8DB'/%3E%3Cpath d='M114.301 0.5H78.8055L4.50058 80' stroke='%23B2B8DB' stroke-dasharray='8 8'/%3E%3C/svg%3E%0A");
    background-position: left bottom
}

.catalog-adv-item:nth-child(3) {
    bottom: 11.3rem;
    left: 6.6rem
}

.catalog-adv-item:nth-child(3):after {
    bottom: 1rem;
    right: -7.9rem;
    width: 9.6rem;
    height: 8.4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='97' height='84' viewBox='0 0 97 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' transform='matrix(1 0 0 -1 88.3164 8)' fill='%23B2B8DB'/%3E%3Cpath d='M0 53.5H59.3152L91.8152 4.5' stroke='%23B2B8DB' stroke-dasharray='8 8'/%3E%3C/svg%3E%0A");
    background-position: right top
}

.catalog-adv-item:nth-child(4) {
    bottom: 11.3rem;
    right: 6.6rem
}

.catalog-adv-item:nth-child(4):after {
    bottom: 1rem;
    right: calc(100% + 1.3rem);
    width: 9.6rem;
    height: 8.4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='97' height='84' viewBox='0 0 97 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' transform='rotate(180 4 4)' fill='%23B2B8DB'/%3E%3Cpath d='M93.1914 48.5H35.9992L4.49916 4.5' stroke='%23B2B8DB' stroke-dasharray='8 8'/%3E%3C/svg%3E%0A");
    background-position: left top
}

.catalog-adv-item:after {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

.catalog-adv-item__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

.catalog-adv-item__text {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    max-width: 35rem
}

.catalog-rec {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 0 2rem
}

@media (max-width: 768px) {
    .catalog-rec {
        padding: 0
    }
}

.catalog-rec__wrapper {
    position: relative;
    padding: 8rem 0rem 10rem;
    border-radius: 6rem;
    overflow: hidden;
    background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .catalog-rec__wrapper {
        padding: 0rem;
        background: none;
        color: var(--text-primary, #4B5484);
        border-radius: 0
    }
}

@media (max-width: 768px) {
    .catalog-rec__container {
        display: flex;
        flex-direction: column;
        gap: 3.2rem
    }
}

.catalog-rec__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem;
    max-width: 102.4rem
}

@media (max-width: 768px) {
    .catalog-rec__content {
        gap: 3.2rem
    }
}

.catalog-rec__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem
}

@media (max-width: 768px) {
    .catalog-rec__head {
        gap: 2rem
    }
}

.catalog-rec__head-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem
}

@media (max-width: 768px) {
    .catalog-rec__title {
        color: var(--primary-main, #001489)
    }
}

.catalog-rec__chip {
    padding: .6rem 1.2rem;
    font-family: Graphik LC;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #ffffff1a;
    border-radius: .6rem
}

@media (max-width: 768px) {
    .catalog-rec__chip {
        background-color: var(--text-on-dark-tertiary, #838BBD);
        color: var(--text-on-dark-primary, #FFFFFF);
        font-family: Fira Sans;
        font-size: 1.4rem;
        line-height: 1.4;
        font-weight: 300;
        letter-spacing: .02em;
        padding: .4rem 1rem
    }
}

.catalog-rec__text {
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    max-width: 67.9rem
}

@media (max-width: 768px) {
    .catalog-rec__text {
        font-size: 2rem
    }
}

@media (max-width: 768px) {
    .catalog-rec__btn {
        background-color: var(--primary-main, #001489);
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (max-width: 768px) and (hover) {
    .catalog-rec__btn:hover {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (max-width: 768px) and (hover: none) {
    .catalog-rec__btn:active {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

.catalog-rec__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60rem;
    height: 100%
}

@media (max-width: 768px) {
    .catalog-rec__img {
        position: static;
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        height: 38rem;
        border-radius: 2.8rem;
        overflow: hidden;
        background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%)
    }
}

.catalog-rec__img img, .catalog-rec__img picture, .catalog-rec__img video {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%
}

.catalog__head {
    padding-top: 4rem;
    padding-bottom: 2.4rem;
    display: none
}

@media (max-width: 768px) {
    .catalog__head {
        display: block
    }
}

.catalog__title {
    color: var(--primary-main, #001489)
}

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

@media (max-width: 768px) {
    .catalog__container .products:nth-child(odd) {
        background-color: var(--backgroud-color, #F4F7FF)
    }
}

.catalog__container .products:nth-child(2n+2) {
    position: relative;
    background-color: var(--backgroud-color, #F4F7FF)
}

@media (max-width: 768px) {
    .catalog__container .products:nth-child(2n+2) {
        background-color: unset
    }
}

.catalog__container .products:nth-child(2n+2):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), #FFFFFF);
    pointer-events: none
}

@media (max-width: 768px) {
    .catalog__container .products:nth-child(2n+2):before {
        content: none;
        display: none
    }
}

.product-head {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 20rem 9rem 0 20rem;
    min-height: 96rem
}

@media (max-width: 768px) {
    .product-head {
        padding: 9.2rem 1.6rem 0;
        min-height: unset
    }
}

.product-head__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 80rem);
    height: 100%;
    border-radius: 0 0 2.4rem 2.4rem;
    overflow: hidden;
    background: linear-gradient(90deg, var(--backgroud-color, #F4F7FF) 0%, var(--backgroud-color, #F4F7FF) 52.4rem, transparent 52.4rem, transparent 100%), radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    pointer-events: none
}

@media (max-width: 768px) {
    .product-head__bg {
        width: 100%;
        height: 100%;
        border-radius: 0;
        background: radial-gradient(80% 79rem at 50% 39.5rem, #216CCD 0%, #001287 100%)
    }
}

.product-head__wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns:60rem auto 61rem 1fr;
    grid-template-rows:auto 1fr auto;
    align-items: flex-start;
    gap: 0 1rem
}

@media (max-width: 768px) {
    .product-head__wrapper {
        display: flex;
        flex-direction: column;
        gap: 0
    }
}

.product-head__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    max-width: 54rem;
    grid-area: 1/1/2/2;
    margin-bottom: 2.4rem
}

@media (max-width: 768px) {
    .product-head__top {
        flex-direction: column;
        gap: .8rem;
        margin-bottom: 1.6rem
    }
}

.product-head__title {
    color: var(--primary-main, #001489);
    width: 100%;
    order: 3
}

@media (max-width: 768px) {
    .product-head__title {
        order: unset;
        text-align: center;
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.product-head__subtitle {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-on-dark-tertiary, #838BBD)
}

@media (max-width: 768px) {
    .product-head__subtitle {
        order: -1;
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.4;
        color: var(--backgroud-white-60, rgba(255, 255, 255, .6))
    }
}

.product-head__img {
    position: relative;
    width: 100%;
    height: 50rem;
    margin-top: 7rem;
    grid-area: 1/3/4/4;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: productAnim-min 2s ease-in-out infinite alternate
}

@media (max-width: 768px) {
    .product-head__img {
        margin: 0;
        height: 27rem;
        margin-bottom: 1.6rem;
        animation: productAnim-min-xs 2s ease-in-out infinite alternate
    }
}

.product-head__img img, .product-head__img picture, .product-head__img video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.product-head-filter {
    grid-area: 1/4/4/5;
    display: flex;
    flex-direction: column;
    gap: 5.6rem;
    margin-bottom: 11rem
}

@media (max-width: 768px) {
    .product-head-filter {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        gap: 2.4rem 1.6rem;
        margin-bottom: 3.2rem
    }
}

.product-head-filter__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem
}

@media (max-width: 768px) {
    .product-head-filter__item {
        gap: 1.2rem
    }
}

.product-head-filter__item_fullwidth {
    grid-column: span 2
}

.product-head-filter__item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%
}

.product-head-filter__item-btns {
    display: flex;
    align-items: center;
    gap: .8rem;
    display: none
}

@media (max-width: 768px) {
    .product-head-filter__item-btns {
        display: flex
    }
}

.product-head-filter__item-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark-primary, #FFFFFF);
    transition: .3s
}

.product-head-filter__item-btn:disabled, .product-head-filter__item-btn.swiper-button-disabled {
    opacity: 0;
    pointer-events: none
}

.product-head-filter__title {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-on-dark-secondary, #B2B8DB)
}

@media (max-width: 768px) {
    .product-head-filter__title {
        font-size: 1.6rem
    }
}

@media (max-width: 768px) {
    .product-head-filter__swiper {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.product-head-filter__list {
    flex: 1;
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 2.5rem
}

@media (max-width: 768px) {
    .product-head-filter__list {
        gap: 1rem
    }
}

.product-head-filter__list_fat {
    gap: .8rem
}

.product-head-filter__list_size {
    gap: 1rem
}

.product-head-filter__list_min {
    grid-template-columns:1fr
}

@media (min-width: 769px) {
    .product-head-filter__list.swiper-wrapper {
        transform: none !important;
        width: fit-content !important;
        height: auto !important;
        display: grid !important
    }
}

@media (max-width: 768px) {
    .product-head-filter__list.swiper-wrapper {
        display: flex;
        gap: 0rem
    }
}

.product-head-filter__list .swiper-slide {
    width: fit-content
}

@media (max-width: 768px) {
    .product-head-filter__list .swiper-slide {
        padding-right: .8rem
    }
}

.product-head-filter__taste {
    position: relative;
    width: 6.5rem;
    aspect-ratio: 65/75;
    padding: .2rem;
    display: flex;
    flex-direction: column
}

@media (hover) {
    .product-head-filter__taste:hover .product-head-filter__taste-bg {
        opacity: .45
    }
}

@media (hover: none) {
    .product-head-filter__taste:active .product-head-filter__taste-bg {
        opacity: .45
    }
}

@media (max-width: 768px) {
    .product-head-filter__taste {
        width: 5.4rem
    }
}

.product-head-filter__taste._active .product-head-filter__taste-bg {
    opacity: .6
}

.product-head-filter__taste-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    opacity: .3;
    transition: .3s
}

.product-head-filter__taste-value {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    object-position: center
}

.product-head-filter__size {
    position: relative;
    width: 8.2rem;
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--primary-main, #001489)
}

@media (hover) {
    .product-head-filter__size:hover .product-head-filter__size-bg {
        opacity: .7
    }
}

@media (hover: none) {
    .product-head-filter__size:active .product-head-filter__size-bg {
        opacity: .7
    }
}

@media (max-width: 768px) {
    .product-head-filter__size {
        width: 6.4rem;
        font-size: 1.4rem
    }
}

.product-head-filter__size._active .product-head-filter__size-bg {
    opacity: .9
}

.product-head-filter__size-bg {
    object-fit: contain;
    object-position: center bottom;
    width: 100%;
    height: 100%;
    opacity: .5;
    transition: .3s
}

.product-head-filter__size-value {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 1rem .4rem
}

@media (max-width: 768px) {
    .product-head-filter__size-value {
        padding: .8rem .4rem
    }
}

.product-head-filter__fat {
    position: relative;
    width: 8.2rem;
    padding: .6rem .4rem .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--primary-main, #001489);
    margin: auto
}

@media (hover) {
    .product-head-filter__fat:hover .product-head-filter__fat-bg {
        opacity: .7
    }
}

@media (hover: none) {
    .product-head-filter__fat:active .product-head-filter__fat-bg {
        opacity: .7
    }
}

@media (max-width: 768px) {
    .product-head-filter__fat {
        font-size: 1.6rem;
        padding: .5rem .4rem .7rem
    }
}

.product-head-filter__fat._active .product-head-filter__fat-bg {
    opacity: 1
}

.product-head-filter__fat-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: .5;
    transition: .3s
}

.product-head-filter__fat-value {
    position: relative;
    z-index: 1
}

.product-head-comp {
    grid-area: 1/2/4/3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 4.4rem;
    margin-bottom: 10rem;
    width: 19.5rem;
    padding-left: 5rem
}

@media (max-width: 768px) {
    .product-head-comp {
        margin: 0;
        padding: 2.4rem 1.6rem 0rem;
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        background-color: var(--text-on-dark-primary, #FFFFFF);
        border-radius: 2.8rem 2.8rem 0 0;
        gap: 1.2rem
    }
}

.product-head-comp__title {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

.product-head-comp__list {
    display: flex;
    flex-direction: column;
    gap: 4rem
}

@media (max-width: 768px) {
    .product-head-comp__list {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        gap: 2rem 2.4rem
    }
}

.product-head-comp__item {
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .product-head-comp__item {
        padding-top: .4rem;
        border-top: .1rem solid var(--stroke-primary, #EBEAE9)
    }
}

.product-head-comp__item-value {
    font-family: Graphik LC;
    font-size: 4.2rem;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary-main, #001489);
    display: flex;
    align-items: flex-end;
    gap: .4rem
}

@media (max-width: 768px) {
    .product-head-comp__item-value {
        font-size: 2.6rem
    }
}

.product-head-comp__item-value sub {
    font-family: Fira Sans;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .product-head-comp__item-value sub {
        margin-bottom: 1.2rem
    }
}

.product-head-comp__item-title {
    margin-top: -.6rem;
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .product-head-comp__item-title {
        font-size: 1.8rem
    }
}

.product-head-info {
    grid-area: 2/1/4/2;
    width: 100%;
    max-width: 54rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .product-head-info {
        gap: 2rem;
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 2rem 1.6rem 4rem;
        background-color: var(--text-on-dark-primary, #FFFFFF)
    }
}

.product-head-info__text {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .product-head-info__text {
        font-size: 1.8rem
    }
}

.product-head-info__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .product-head-info__list {
        gap: 1.5rem;
        font-size: 1.8rem
    }
}

.product-head-info__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem
}

.product-head-info__item > span:first-child {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem
}

.product-head-info__item > span:first-child:after {
    content: "";
    flex: 1;
    border-bottom: .1rem solid var(--backgroud-color, #F4F7FF)
}

.product-head-info__item > span:last-child {
    flex: none;
    text-align: right
}

.product-head-drop {
    display: flex;
    flex-direction: column
}

.product-head-drop[data-dropdown]:not(._dropped) .product-head-drop__container {
    grid-template-rows:0fr;
    padding-top: 0;
    opacity: 0
}

.product-head-drop[data-dropdown]._dropped .product-head-drop__btn svg {
    scale: 1 -1
}

.product-head-drop__btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: Graphik LC;
    font-size: 1.8rem;
    line-height: 1.45;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

.product-head-drop__btn svg {
    width: 2.4rem;
    height: 2.4rem;
    transition: scale .3s
}

.product-head-drop__container {
    display: grid;
    grid-template-rows:1fr;
    overflow: hidden;
    padding-top: 1.6rem;
    transition: .5s
}

.product-head-drop__content {
    min-height: 0
}

.product-head-drop__text {
    font-family: Fira Sans;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--text-primary, #4B5484)
}

.product-head_vertical .product-head__wrapper {
    grid-template-columns:60rem auto 37rem 1fr
}

.product-head_vertical .product-head-comp {
    width: 32rem;
    padding-left: 16.5rem;
    margin-top: 0
}

@media (max-width: 768px) {
    .product-head_vertical .product-head-comp {
        width: calc(100% + 3.2rem);
        padding-left: 1.6rem
    }
}

.product-head_vertical .product-head__img {
    height: 51.2rem;
    margin-top: 5rem
}

@media (max-width: 768px) {
    .product-head_vertical .product-head__img {
        margin-top: 0;
        height: 45rem
    }
}

@keyframes productAnim-min {
    0% {
        translate: 0 2rem
    }
    to {
        translate: 0 -2rem
    }
}

@keyframes productAnim-min-xs {
    0% {
        translate: 0 1rem
    }
    to {
        translate: 0 -1rem
    }
}

.recipes-head {
    position: relative
}

.recipes-head__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.recipes-head__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0006
}

@media (max-width: 768px) {
    .recipes-head__bg:after {
        background-color: #0009
    }
}

.recipes-head__bg img, .recipes-head__bg picture, .recipes-head__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recipes-head__container {
    position: relative;
    z-index: 1;
    min-height: 65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 13.5rem;
    padding-bottom: 5rem;
    color: var(--text-on-dark-primary, #FFFFFF);
    text-align: center
}

@media (max-width: 768px) {
    .recipes-head__container {
        min-height: 31rem;
        padding-top: 8.4rem;
        padding-bottom: 2.4rem
    }
}

.recipes {
    padding-top: 10rem
}

@media (max-width: 768px) {
    .recipes {
        padding-top: 4rem
    }
}

.recipes__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .recipes__wrapper {
        gap: 2.4rem
    }
}

.recipes__filters {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem
}

@media (max-width: 768px) {
    .recipes__filters {
        flex-direction: column;
        gap: 1.2rem
    }
}

@media (min-width: 769px) {
    .recipes__category[data-select]:not(._dropped) .select__container {
        opacity: 1;
        pointer-events: auto
    }

    .recipes__category .select__btn {
        display: none
    }

    .recipes__category .select__container {
        position: static;
        max-height: unset;
        background-color: transparent;
        box-shadow: none;
        padding: 0
    }

    .recipes__category .select__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 1.6rem
    }

    .recipes__category .select-item {
        padding: 1.2rem 2.4rem 1rem;
        border: .1rem solid var(--primary-main, #001489);
        background-color: transparent;
        color: var(--primary-main, #001489);
        border-radius: 10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .8rem;
        font-family: Onest;
        font-size: 1.6rem;
        line-height: 1.4;
        font-weight: 600;
        text-transform: uppercase
    }
}

@media (min-width: 769px) and (hover) {
    .recipes__category .select-item:hover {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

@media (min-width: 769px) and (hover: none) {
    .recipes__category .select-item:active {
        background-color: transparent;
        border-color: var(--primary-hover, #001DC8);
        color: var(--primary-hover, #001DC8)
    }
}

@media (min-width: 769px) {
    .recipes__category .select-item._selected {
        background-color: var(--primary-main, #001489);
        color: var(--text-on-dark-primary, #FFFFFF)
    }
}

@media (min-width: 769px) and (hover) {
    .recipes__category .select-item._selected:hover {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (min-width: 769px) and (hover: none) {
    .recipes__category .select-item._selected:active {
        border-color: var(--primary-hover, #001DC8);
        background-color: var(--primary-hover, #001DC8)
    }
}

@media (min-width: 769px) {
    .recipes__category .select-item svg {
        display: none
    }
}

.recipes__container {
    display: flex;
    flex-direction: column;
    gap: 6rem
}

@media (max-width: 768px) {
    .recipes__container {
        gap: 4rem
    }
}

.recipes__list {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 6rem 4rem
}

@media (max-width: 768px) {
    .recipes__list {
        display: flex;
        flex-direction: column;
        gap: 4.8rem
    }
}

.recipes__list:not(:first-child) .recipe-card {
    grid-column: span 2
}

.recipes__list:not(:first-child) .recipe-card:nth-child(5n+1), .recipes__list:not(:first-child) .recipe-card:nth-child(5n+2) {
    grid-column: span 2
}

@media (min-width: 769px) {
    .recipes__list:not(:first-child) .recipe-card:nth-child(5n+1) .recipe-card__img, .recipes__list:not(:first-child) .recipe-card:nth-child(5n+2) .recipe-card__img {
        height: 53.5rem
    }
}

.recipes__list:not(:first-child) .recipe-card:nth-child(5n+4), .recipes__list:not(:first-child) .recipe-card:nth-child(5n+5) {
    grid-column: span 3
}

@media (min-width: 769px) {
    .recipes__list:not(:first-child) .recipe-card:nth-child(5n+4) .recipe-card__img, .recipes__list:not(:first-child) .recipe-card:nth-child(5n+5) .recipe-card__img {
        height: 56rem
    }

    .recipes__list:not(:first-child) .recipe-card:nth-child(5n+4) .recipe-card__title, .recipes__list:not(:first-child) .recipe-card:nth-child(5n+5) .recipe-card__title {
        font-size: 2.4rem;
        line-height: 1.4;
        letter-spacing: .01em
    }
}

.recipes__list:first-child .recipe-card {
    grid-column: span 2
}

.recipes__list:first-child .recipe-card:nth-child(5n+1), .recipes__list:first-child .recipe-card:nth-child(5n+2) {
    grid-column: span 3
}

@media (min-width: 769px) {
    .recipes__list:first-child .recipe-card:nth-child(5n+1) .recipe-card__img, .recipes__list:first-child .recipe-card:nth-child(5n+2) .recipe-card__img {
        height: 56rem
    }

    .recipes__list:first-child .recipe-card:nth-child(5n+1) .recipe-card__title, .recipes__list:first-child .recipe-card:nth-child(5n+2) .recipe-card__title {
        font-size: 2.4rem;
        line-height: 1.4;
        letter-spacing: .01em
    }
}

.recipe {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto 10rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .recipe {
        margin-bottom: 7rem
    }
}

.recipe__img {
    position: relative;
    width: 100%;
    height: 86rem
}

@media (max-width: 768px) {
    .recipe__img {
        height: 45rem
    }
}

.recipe__img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18rem;
    background: linear-gradient(180deg, rgba(0, 11, 70, .7) 0%, rgba(0, 10, 70, 0) 100%)
}

@media (max-width: 768px) {
    .recipe__img:after {
        background: linear-gradient(180deg, rgba(0, 11, 70, .8) 0%, rgba(0, 10, 70, 0) 100%)
    }
}

.recipe__img img, .recipe__img picture, .recipe__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recipe-head {
    position: relative;
    z-index: 1;
    margin-top: -18.7rem;
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .recipe-head {
        margin-top: -3.2rem;
        padding: 0 .8rem 0 .4rem
    }
}

.recipe-head__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 4.8rem 8rem 4.8rem 0rem;
    width: 100%;
    max-width: 66.6rem
}

@media (max-width: 768px) {
    .recipe-head__content {
        padding: 1.6rem 1.6rem 1.6rem 0rem;
        gap: 1rem
    }
}

.recipe-head__content:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    background-color: var(--primary-main, #001489);
    width: 100vw;
    height: 100%;
    border-radius: 0 6rem 6rem 0;
    box-shadow: 0 2rem 5rem #07015926
}

@media (max-width: 768px) {
    .recipe-head__content:before {
        border-radius: 0 4rem 4rem 0
    }
}

.recipe-head__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3.2rem;
    flex-wrap: wrap
}

@media (max-width: 768px) {
    .recipe-head__inner {
        gap: 1.6rem
    }
}

.recipe-head__chip {
    background-color: var(--state-bage, #F08700)
}

@media (max-width: 768px) {
    .recipe-head__chip {
        position: absolute;
        top: 0;
        left: 0;
        translate: 0 -50%
    }
}

.recipe__info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3.2rem;
    flex-wrap: wrap;
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-on-dark-secondary, #B2B8DB)
}

@media (max-width: 768px) {
    .recipe__info {
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--text-on-dark-tertiary, #838BBD);
        gap: 1.6rem
    }
}

.recipe__title {
    font-family: Graphik LC;
    font-size: 3.6rem;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .recipe__title {
        font-family: Inter;
        font-size: 1.9rem;
        font-weight: 600
    }
}

.recipe__subtitle {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .recipe__subtitle {
        font-family: Inter;
        font-size: 2.1rem;
        font-weight: 600;
        letter-spacing: normal
    }
}

.recipe__content {
    margin-top: -7.6rem
}

@media (max-width: 768px) {
    .recipe__content {
        margin-top: -9.2rem
    }
}

.recipe__container {
    display: grid;
    grid-template-columns:66.6rem 1fr;
    gap: 9rem
}

@media (max-width: 768px) {
    .recipe__container {
        display: flex;
        flex-direction: column;
        gap: 7rem
    }
}

.recipe__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6rem;
    padding: 13rem 4.4rem 3.2rem 0
}

@media (max-width: 768px) {
    .recipe__inner {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 14rem 1.6rem 4rem
    }
}

.recipe__inner:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    background-color: var(--backgroud-color, #F4F7FF);
    width: 100vw;
    height: 100%;
    border-radius: 0 0 2rem
}

@media (max-width: 768px) {
    .recipe__inner:before {
        border-radius: 0 0 2rem 2rem;
        width: 100%
    }
}

.recipe-ingr {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem
}

.recipe-ingr__list {
    width: 100%;
    column-count: 2;
    column-gap: 3.2rem
}

@media (max-width: 768px) {
    .recipe-ingr__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem
    }
}

.recipe-ingr__item {
    position: relative;
    break-inside: avoid;
    margin-bottom: .6rem;
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--primary-main, #001489);
    padding-left: 1.7rem
}

@media (max-width: 768px) {
    .recipe-ingr__item {
        margin: 0
    }
}

.recipe-ingr__item:last-child {
    margin-bottom: 0
}

.recipe-ingr__item:before {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 0;
    width: .7rem;
    height: .7rem;
    background-color: var(--text-secondary, #95A7CF);
    border-radius: 0 50% 50%
}

.recipe-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    color: var(--primary-main, #001489);
    max-width: 55.8rem;
    transition: .3s
}

@media (max-width: 768px) {
    .recipe-product {
        flex-direction: column;
        gap: 2.4rem;
        text-align: center
    }
}

@media (hover) {
    .recipe-product:hover {
        color: var(--primary-hover, #001DC8)
    }
}

@media (hover: none) {
    .recipe-product:active {
        color: var(--primary-hover, #001DC8)
    }
}

.recipe-product__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem
}

@media (max-width: 768px) {
    .recipe-product__container {
        gap: 1.2rem;
        align-items: center
    }
}

.recipe-product__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem
}

@media (max-width: 768px) {
    .recipe-product__inner {
        align-items: center
    }
}

.recipe-product__subtitle {
    font-family: Fira Sans;
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484);
    transition: .3s
}

.recipe-product__title {
    font-family: Graphik LC;
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .recipe-product__title {
        font-size: 1.8rem
    }
}

.recipe-product__btn {
    font-family: Graphik LC;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase
}

.recipe-product__img {
    flex: none;
    width: 24rem;
    height: 17rem
}

@media (max-width: 768px) {
    .recipe-product__img {
        height: auto
    }
}

.recipe-product__img img, .recipe-product__img picture, .recipe-product__img video {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .recipe-product__img img, .recipe-product__img picture, .recipe-product__img video {
        max-height: 17rem
    }
}

.recipe-steps {
    margin-top: 9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .recipe-steps {
        margin: 0;
        gap: 1.6rem
    }
}

.recipe-steps__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .recipe-steps__list {
        gap: 1.6rem
    }
}

.recipe-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem
}

@media (max-width: 768px) {
    .recipe-steps__item {
        gap: 1rem
    }
}

.recipe-steps__item-num {
    flex: none;
    width: 4.2rem;
    height: 4.2rem;
    border: .1rem solid var(--text-secondary, #95A7CF);
    border-radius: .5rem 50% 50%;
    font-family: Graphik LC;
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--primary-main, #001489);
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 768px) {
    .recipe-steps__item-num {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.8rem
    }
}

.recipe-steps__item-text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .recipe-steps__item-text {
        font-size: 2rem;
        letter-spacing: normal
    }
}

.recipe-video {
    margin-bottom: 10rem
}

@media (max-width: 768px) {
    .recipe-video {
        margin-bottom: 7rem
    }
}

.recipe-video__container {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .recipe-video__container {
        gap: 2.4rem
    }
}

.recipe-video__title {
    color: var(--primary-main, #001489)
}

.recipe-video__video {
    position: relative;
    width: 100%;
    aspect-ratio: 1520/855;
    border-radius: 2rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .recipe-video__video {
        width: calc(100% + 3.2rem);
        margin: 0 -1.6rem
    }
}

.recipe-video__video._active iframe {
    display: block
}

.recipe-video__video._active .recipe-video__video-poster {
    opacity: 0;
    pointer-events: none
}

.recipe-video__video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s
}

.recipe-video__video-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recipe-video__video-btn {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 15rem;
    height: 15rem
}

@media (max-width: 768px) {
    .recipe-video__video-btn {
        width: 8rem;
        height: 8rem
    }
}

.recipe-video__video-btn .recipe-card__play-icon {
    width: 5.4rem;
    height: 5.4rem
}

@media (max-width: 768px) {
    .recipe-video__video-btn .recipe-card__play-icon {
        width: 2.8rem;
        height: 2.8rem
    }
}

.recipe-video__video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none
}

.not-found {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 2rem
}

@media (max-width: 768px) {
    .not-found {
        padding: 10.8rem 0rem 1.4rem
    }
}

.not-found:last-child {
    margin-bottom: -10rem
}

@media (max-width: 768px) {
    .not-found:last-child {
        margin-bottom: 0
    }
}

.not-found__wrapper {
    position: relative;
    border-radius: 8rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .not-found__wrapper {
        border-radius: unset
    }
}

.not-found__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .not-found__bg {
        display: none
    }
}

.not-found__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 31%, rgba(242, 242, 242, .4) 36%, rgba(242, 242, 242, 0) 50%, rgba(242, 242, 242, 0) 100%)
}

.not-found__bg-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%
}

.not-found__bg-img img, .not-found__bg-img picture, .not-found__bg-img video {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%
}

.not-found__container {
    position: relative;
    z-index: 1;
    min-height: 86.5rem;
    padding-top: 24.7rem
}

@media (max-width: 768px) {
    .not-found__container {
        min-height: unset;
        padding: 0
    }
}

.not-found__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40.1rem;
    gap: 4rem;
    text-align: center
}

@media (max-width: 768px) {
    .not-found__content {
        gap: 2.4rem
    }
}

.not-found__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem
}

@media (max-width: 768px) {
    .not-found__inner {
        gap: .4rem
    }
}

.not-found__code {
    font-family: Graphik LC;
    font-size: 20rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--primary-main, #001489);
    text-transform: uppercase
}

@media (max-width: 768px) {
    .not-found__code {
        font-size: 13rem;
        line-height: 1
    }
}

.not-found__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .not-found__title {
        font-size: 2rem;
        line-height: 1.5
    }
}

.selection-head {
    position: relative
}

.selection-head__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.selection-head__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080
}

@media (max-width: 768px) {
    .selection-head__bg:after {
        background-color: #0009
    }
}

.selection-head__bg img, .selection-head__bg picture, .selection-head__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.selection-head__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.4rem;
    padding-top: 19.5rem;
    padding-bottom: 4.8rem;
    min-height: 53.5rem
}

@media (max-width: 768px) {
    .selection-head__container {
        min-height: 46.2rem;
        padding-top: 10.8rem;
        flex-direction: column;
        align-items: center;
        text-align: center
    }
}

.selection-head__title {
    color: var(--text-on-dark-primary, #FFFFFF);
    max-width: 70.2rem
}

.selection-head__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-on-dark-primary, #FFFFFF);
    max-width: 60rem
}

@media (max-width: 768px) {
    .selection-head__text {
        font-size: 2rem
    }
}

.selection__list {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 6rem 4rem
}

@media (min-width: 769px) {
    .selection__list .recipe-card__img {
        height: 56rem
    }

    .selection__list .recipe-card__title {
        font-size: 2.4rem;
        line-height: 1.4;
        letter-spacing: .01em
    }
}

@media (max-width: 768px) {
    .selection__list {
        display: flex;
        flex-direction: column;
        gap: 4.8rem
    }
}

.about-head {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 2rem 2rem 0rem;
    display: flex;
    flex-direction: column;
    gap: 7rem;
    margin-bottom: 10rem
}

@media (max-width: 768px) {
    .about-head {
        padding: 0rem;
        gap: 0rem;
        margin-bottom: 7rem
    }
}

.about-head__banner {
    background: radial-gradient(80% 80% at 50% 50%, #216CCD 0%, #001287 100%);
    min-height: 41.7rem;
    border-radius: 6rem;
    padding-top: 18.5rem;
    padding-bottom: 4.8rem;
    color: var(--text-on-dark-primary, #FFFFFF)
}

@media (max-width: 768px) {
    .about-head__banner {
        padding: 10.8rem 0rem 8rem;
        border-radius: 0 0 2.8rem 2.8rem;
        min-height: unset
    }
}

.about-head__title {
    max-width: 70rem
}

@media (max-width: 768px) {
    .about-head__title {
        text-align: center
    }
}

@media (max-width: 768px) {
    .about-head__container {
        margin-top: -4rem
    }
}

.about-head__content {
    position: relative
}

@media (max-width: 768px) {
    .about-head__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rem
    }
}

.about-head__img {
    position: absolute;
    top: -24.7rem;
    right: 0;
    width: 66rem;
    height: calc(100% + 24.7rem);
    border-radius: 2.4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .about-head__img {
        position: static;
        width: 29.6rem;
        height: 30rem;
        border-radius: 1.6rem
    }
}

.about-head__img img, .about-head__img picture, .about-head__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.about-head-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    width: 100%;
    max-width: 64.9rem
}

@media (max-width: 768px) {
    .about-head-info {
        gap: 1.6rem
    }
}

.about-head-info__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--primary-main, #001489);
    letter-spacing: .01em;
    text-transform: uppercase;
    max-width: 57.3rem
}

@media (max-width: 768px) {
    .about-head-info__title {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.about-head-info__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .about-head-info__text {
        font-size: 2rem;
        letter-spacing: normal
    }
}

.about-for__container {
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .about-for__container {
        gap: 1.6rem
    }
}

.about-for__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .about-for__title {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.about-for__list {
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .about-for__list {
        gap: 3.2rem
    }
}

.about-for-item {
    padding-top: 6rem
}

@media (max-width: 768px) {
    .about-for-item {
        padding: 0
    }
}

.about-for-item.about-for-item_v1 .about-for-item__wrapper {
    background-color: #eaf0fe;
    translate: 5rem 0rem
}

@media (max-width: 768px) {
    .about-for-item.about-for-item_v1 .about-for-item__wrapper {
        translate: 0 0
    }
}

.about-for-item.about-for-item_v1 .about-for-item__bg {
    width: 180rem;
    top: -20rem;
    left: 65rem
}

@media (max-width: 768px) {
    .about-for-item.about-for-item_v1 .about-for-item__bg {
        width: 60rem;
        top: unset;
        bottom: -15rem;
        left: -8rem
    }
}

.about-for-item.about-for-item_v2 .about-for-item__wrapper {
    translate: 10rem 0rem;
    background-color: #dde6ff
}

@media (max-width: 768px) {
    .about-for-item.about-for-item_v2 .about-for-item__wrapper {
        translate: 0 0
    }
}

.about-for-item.about-for-item_v2 .about-for-item__bg {
    top: unset;
    bottom: 4rem
}

@media (max-width: 768px) {
    .about-for-item.about-for-item_v2 .about-for-item__bg {
        bottom: -30rem
    }
}

.about-for-item__wrapper {
    position: relative;
    border-radius: 3.2rem;
    overflow: hidden;
    background-color: var(--backgroud-color, #F4F7FF)
}

@media (max-width: 768px) {
    .about-for-item__wrapper {
        border-radius: 2rem
    }
}

.about-for-item__bg {
    position: absolute;
    top: -8.6rem;
    left: 84rem;
    width: 120rem
}

@media (max-width: 768px) {
    .about-for-item__bg {
        width: 60rem;
        top: unset;
        bottom: -30rem;
        left: 0rem
    }
}

.about-for-item__bg img, .about-for-item__bg picture, .about-for-item__bg video {
    object-fit: contain;
    object-position: left top;
    width: 100%;
    height: 100%
}

.about-for-item__container {
    position: relative;
    z-index: 1;
    height: 65rem;
    display: grid;
    grid-template-columns:1fr 59rem;
    align-items: flex-end;
    gap: 6rem
}

@media (max-width: 768px) {
    .about-for-item__container {
        height: unset;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2.4rem
    }
}

.about-for-item__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 0rem 0rem 10rem 10rem;
    max-width: 86.8rem
}

@media (max-width: 768px) {
    .about-for-item__head {
        padding: 1.6rem 1.6rem 0rem
    }
}

.about-for-item__title {
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .about-for-item__title {
        font-size: 2.2rem
    }
}

.about-for-item__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484);
    max-width: 71rem
}

@media (max-width: 768px) {
    .about-for-item__text {
        font-size: 1.8rem;
        letter-spacing: normal
    }
}

.about-for-item__img {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .about-for-item__img {
        height: 30rem
    }
}

.about-for-item__img img, .about-for-item__img picture, .about-for-item__img video {
    object-fit: cover;
    object-position: left top;
    width: 100%;
    height: 100%
}

.about-awards {
    padding-top: 10rem
}

@media (max-width: 768px) {
    .about-awards {
        padding-top: 7rem
    }
}

.about-awards__container {
    display: flex;
    flex-direction: column;
    gap: 4rem
}

@media (max-width: 768px) {
    .about-awards__container {
        gap: 1.6rem
    }
}

.about-awards__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .about-awards__title {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.about-awards__swiper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.6rem
}

.about-awards__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .about-awards__swiper-pag {
        display: flex
    }
}

.about-awards__swiper-btn {
    position: absolute;
    top: 50%
}

.about-awards__swiper-btn.swiper-button-lock {
    display: none
}

.about-awards__swiper-btn[data-prev] {
    left: -9.6rem;
    translate: -100% -50%
}

.about-awards__swiper-btn[data-next] {
    right: -9.6rem;
    translate: 100% -50%
}

@media (max-width: 768px) {
    .about-awards__swiper .swiper {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.about-awards__swiper .swiper-wrapper {
    align-items: stretch
}

@media (max-width: 768px) {
    .about-awards__swiper .swiper-wrapper {
        align-items: flex-start
    }
}

.about-awards__swiper .swiper-slide {
    height: auto
}

.about-awards-item {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:60rem 1fr;
    gap: 4rem
}

@media (max-width: 768px) {
    .about-awards-item {
        display: flex;
        flex-direction: column;
        gap: 1.6rem
    }
}

.about-awards-item__img {
    width: 100%;
    height: 100%;
    border-radius: 2.4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .about-awards-item__img {
        height: 27.5rem;
        order: 2
    }
}

.about-awards-item__img img, .about-awards-item__img picture, .about-awards-item__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.about-awards-item__content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 6rem;
    background-color: var(--backgroud-light, #F1F3F9);
    border-radius: 3.2rem;
    min-height: 45rem
}

@media (max-width: 768px) {
    .about-awards-item__content {
        min-height: unset;
        padding: 1.6rem;
        border-radius: 2.4rem;
        gap: 1.6rem;
        flex: 1
    }
}

.about-awards-item__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .about-awards-item__title {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.about-awards-item__text {
    font-family: Fira Sans;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .about-awards-item__text {
        font-size: 1.8rem
    }
}

.teosophy-head {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding: 2rem 2rem 0rem;
    margin-bottom: 10rem
}

@media (max-width: 768px) {
    .teosophy-head {
        padding: 0;
        margin-bottom: 4rem
    }
}

.teosophy-head__wrapper {
    position: relative;
    border-radius: 6rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .teosophy-head__wrapper {
        border-radius: 0 0 2.8rem 2.8rem
    }
}

.teosophy-head__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.teosophy-head__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080
}

@media (max-width: 768px) {
    .teosophy-head__bg:after {
        background-color: #0009
    }
}

.teosophy-head__bg img, .teosophy-head__bg picture, .teosophy-head__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.teosophy-head__container {
    position: relative;
    z-index: 1;
    min-height: 43rem;
    padding-top: 19.7rem;
    padding-bottom: 4.8rem;
    color: var(--text-on-dark-primary, #FFFFFF);
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .teosophy-head__container {
        justify-content: flex-end;
        min-height: 31rem;
        padding-top: 10.8rem
    }
}

.teosophy-head__title {
    text-transform: none
}

@media (max-width: 768px) {
    .teosophy-head__title {
        text-align: center
    }
}

.teosophy-conc {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 10rem
}

@media (max-width: 768px) {
    .teosophy-conc {
        margin-bottom: 7rem
    }
}

.teosophy-conc__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.teosophy-conc__bg img, .teosophy-conc__bg picture, .teosophy-conc__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .teosophy-conc__bg img, .teosophy-conc__bg picture, .teosophy-conc__bg video {
        object-position: center bottom
    }
}

.teosophy-conc__container {
    position: relative;
    min-height: 73.5rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .teosophy-conc__container {
        min-height: unset;
        padding-bottom: 0;
        gap: 2.4rem
    }
}

.teosophy-conc__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
    max-width: 83.2rem;
    flex: 1
}

.teosophy-conc__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .teosophy-conc__title {
        font-size: 4.6rem;
        line-height: 1.1
    }
}

@media (max-width: 768px) {
    .teosophy-conc__btn {
        font-size: 1.4rem;
        padding: 1rem 1.6rem
    }
}

.teosophy-conc__swiper {
    margin: auto 0 0;
    max-width: 54.3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem
}

.teosophy-conc__swiper .swiper-wrapper {
    align-items: stretch
}

.teosophy-conc__swiper .swiper-slide {
    height: auto
}

.teosophy-conc-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem
}

.teosophy-conc-item__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .teosophy-conc-item__title {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.teosophy-conc-item__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .teosophy-conc-item__text {
        font-size: 2rem
    }
}

.teosophy-conc-nav {
    position: absolute;
    bottom: 0;
    left: 59.5rem;
    width: 103.1rem;
    height: 65.6rem
}

@media (max-width: 768px) {
    .teosophy-conc-nav {
        position: relative;
        left: unset;
        bottom: unset;
        width: calc(100% + 3.2rem);
        margin: 0 -1.6rem;
        height: 21.6rem
    }
}

.teosophy-conc-nav__img {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: 64.5rem;
    height: 39.5rem
}

@media (max-width: 768px) {
    .teosophy-conc-nav__img {
        width: 19.5rem;
        height: 12.5rem
    }
}

.teosophy-conc-nav__img img, .teosophy-conc-nav__img picture, .teosophy-conc-nav__img video {
    object-fit: contain;
    object-position: center top;
    width: 100%;
    height: 100%
}

.teosophy-conc-nav__list {
    position: absolute;
    top: 4.2rem;
    left: 50%;
    translate: -50% 0;
    width: 91rem;
    aspect-ratio: 1;
    border: .1rem solid var(--text-secondary, #95A7CF);
    border-radius: 50%
}

@media (max-width: 768px) {
    .teosophy-conc-nav__list {
        width: calc(100% - 8rem);
        top: 2.2rem
    }
}

.teosophy-conc-nav__item {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 50%;
    transform-origin: center right
}

@media (min-width: 769px) {
    .teosophy-conc-nav__item:not(._active) .teosophy-conc-nav__item-num {
        scale: .6
    }
}

.teosophy-conc-nav__item-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15rem;
    height: 15rem;
    font-family: Onest;
    font-size: 8rem;
    line-height: 1;
    letter-spacing: .01em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-on-dark-primary, #FFFFFF);
    background: radial-gradient(90% 90% at 50% 50%, #216CCD 0%, #001287 100%);
    border-radius: 50%;
    translate: -50% 0;
    transition: .8s
}

@media (max-width: 768px) {
    .teosophy-conc-nav__item-num {
        width: 5rem;
        height: 5rem;
        font-size: 2.4rem
    }
}

.teosophy-conc-nav__item:nth-child(2) {
    rotate: 45deg
}

.teosophy-conc-nav__item:nth-child(2) .teosophy-conc-nav__item-num {
    rotate: -45deg
}

.teosophy-conc-nav__item:nth-child(3) {
    rotate: 90deg
}

.teosophy-conc-nav__item:nth-child(3) .teosophy-conc-nav__item-num {
    rotate: -90deg
}

.teosophy-conc-nav__item:nth-child(4) {
    rotate: 135deg
}

.teosophy-conc-nav__item:nth-child(4) .teosophy-conc-nav__item-num {
    rotate: -135deg
}

.teosophy-conc-nav__item:nth-child(5) {
    rotate: 180deg
}

.teosophy-conc-nav__item:nth-child(5) .teosophy-conc-nav__item-num {
    rotate: -180deg
}

.teosophy-style {
    margin-bottom: 6.4rem
}

@media (max-width: 768px) {
    .teosophy-style {
        margin-bottom: 7rem
    }
}

.teosophy-style__wrapper {
    width: 100%;
    max-width: calc(100% - 4rem);
    margin: 0 auto;
    position: relative;
    border-radius: 6rem;
    padding: 18rem 0rem;
    min-height: 74.5rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .teosophy-style__wrapper {
        max-width: 100%;
        border-radius: 2.4rem;
        min-height: 34.5rem;
        padding: 3.2rem 0rem 12rem
    }
}

.teosophy-style__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.teosophy-style__bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0003
}

.teosophy-style__bg img, .teosophy-style__bg picture, .teosophy-style__bg video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.teosophy-style__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    color: var(--text-on-dark-primary, #FFFFFF)
}

.teosophy-style__title {
    max-width: 80rem
}

.teosophy-style__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-on-dark-primary, #FFFFFF);
    max-width: 66rem
}

@media (max-width: 768px) {
    .teosophy-style__text {
        display: none
    }
}

.teosophy-style__container {
    position: relative;
    z-index: 1;
    margin-top: -7.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.teosophy-style__subtitle {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--backgroud-white-60, rgba(255, 255, 255, .6));
    display: none
}

@media (max-width: 768px) {
    .teosophy-style__subtitle {
        display: block
    }
}

.teosophy-style__swiper {
    position: relative
}

.teosophy-style__swiper-btn {
    position: absolute;
    top: 10rem
}

.teosophy-style__swiper-btn.swiper-button-lock, .teosophy-style__swiper-btn:disabled {
    display: none
}

.teosophy-style__swiper-btn[data-prev] {
    left: -8.4rem;
    translate: 0 -20%
}

.teosophy-style__swiper-btn[data-next] {
    right: -8.4rem;
    translate: 0 -20%
}

@media (max-width: 768px) {
    .teosophy-style__swiper .swiper {
        width: calc(100% + 3.2rem);
        margin: 0rem -1.6rem;
        padding: 0rem 1.6rem
    }
}

.teosophy-style__swiper .swiper-wrapper {
    align-items: stretch
}

.teosophy-style__swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (max-width: 768px) {
    .teosophy-style__swiper .swiper-slide {
        width: auto
    }
}

.teosophy-style-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.1rem;
    text-align: center;
    color: var(--primary-main, #001489);
    transition: .3s;
    cursor: pointer
}

@media (max-width: 768px) {
    .teosophy-style-item {
        width: 13rem;
        gap: 1.2rem
    }
}

@media (hover) {
    .teosophy-style-item:hover {
        color: var(--primary-hover, #001DC8)
    }

    .teosophy-style-item:hover .teosophy-style-item__img img, .teosophy-style-item:hover .teosophy-style-item__img picture, .teosophy-style-item:hover .teosophy-style-item__img video {
        scale: 1.1
    }
}

@media (hover: none) {
    .teosophy-style-item:active {
        color: var(--primary-hover, #001DC8)
    }

    .teosophy-style-item:active .teosophy-style-item__img img, .teosophy-style-item:active .teosophy-style-item__img picture, .teosophy-style-item:active .teosophy-style-item__img video {
        scale: 1.1
    }
}

.teosophy-style-item__img {
    width: 17.5rem;
    height: 17.5rem;
    border-radius: 50% 50% 50% 1.4rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .teosophy-style-item__img {
        width: 10rem;
        height: 10rem;
        border-radius: 50% 50% 50% .8rem
    }
}

.teosophy-style-item__img img, .teosophy-style-item__img picture, .teosophy-style-item__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: scale .3s
}

.teosophy-style-item__title {
    font-family: Fira Sans;
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: normal
}

@media (max-width: 768px) {
    .teosophy-style-item__title {
        font-size: 1.4rem
    }
}

.teosophy-people {
    padding: 10rem 0rem;
    background-color: var(--backgroud-light, #F1F3F9);
    margin-bottom: 10rem
}

@media (max-width: 768px) {
    .teosophy-people {
        border-radius: 2.8rem;
        padding: 2.4rem 0rem;
        margin-bottom: 7rem
    }
}

.teosophy-people__container {
    position: relative;
    display: grid;
    grid-template-columns:66rem 1fr;
    gap: 0rem 10rem;
    grid-template-rows:auto 1fr auto
}

@media (max-width: 768px) {
    .teosophy-people__container {
        display: flex;
        flex-direction: column;
        gap: 2.4rem
    }
}

.teosophy-people__imgs {
    grid-area: 1/1/4/2
}

@media (max-width: 768px) {
    .teosophy-people__imgs {
        display: none
    }
}

.teosophy-people__imgs .swiper-wrapper {
    align-items: stretch
}

.teosophy-people__imgs .swiper-slide {
    height: auto;
    border-radius: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10rem;
    background-color: var(--text-secondary, #95A7CF)
}

.teosophy-people__imgs .swiper-slide img, .teosophy-people__imgs .swiper-slide picture, .teosophy-people__imgs .swiper-slide video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.teosophy-people__title {
    font-family: Graphik LC;
    font-size: 8rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489);
    grid-area: 1/2/2/3;
    margin-bottom: 3.2rem
}

@media (max-width: 768px) {
    .teosophy-people__title {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: normal;
        margin: 0
    }
}

.teosophy-people__swiper {
    grid-area: 2/2/3/3;
    margin-bottom: 5.6rem
}

@media (max-width: 768px) {
    .teosophy-people__swiper {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 3.2rem
    }
}

.teosophy-people__swiper-pag {
    display: none
}

@media (max-width: 768px) {
    .teosophy-people__swiper-pag {
        display: flex
    }
}

.teosophy-people__nav {
    grid-area: 3/2/4/3
}

@media (max-width: 768px) {
    .teosophy-people__nav {
        width: calc(100% + 3.2rem);
        margin: 0 -1.6rem;
        padding: 0rem 1.6rem
    }
}

.teosophy-people__nav-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    transform-origin: center;
    transition: .6s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10rem;
    background-color: var(--text-secondary, #95A7CF)
}

@media (max-width: 768px) {
    .teosophy-people__nav-img {
        transform-origin: right center
    }
}

.teosophy-people__nav-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff4d;
    opacity: 0;
    transition: .6s
}

.teosophy-people__nav-img img, .teosophy-people__nav-img picture, .teosophy-people__nav-img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.teosophy-people__nav .swiper-wrapper {
    align-items: stretch
}

.teosophy-people__nav .swiper-slide {
    position: relative;
    aspect-ratio: 1
}

@media (min-width: 769px) {
    .teosophy-people__nav .swiper-slide:not(.swiper-slide-thumb-active) .teosophy-people__nav-img {
        scale: .7
    }

    .teosophy-people__nav .swiper-slide:not(.swiper-slide-thumb-active) .teosophy-people__nav-img:after {
        opacity: 1
    }
}

@media (max-width: 768px) {
    .teosophy-people__nav .swiper-slide:not(.swiper-slide-active) .teosophy-people__nav-img {
        scale: .66;
        translate: -6rem 0
    }

    .teosophy-people__nav .swiper-slide:not(.swiper-slide-active) .teosophy-people__nav-img:after {
        opacity: 1
    }

    .teosophy-people__nav .swiper-slide.swiper-slide-next + .swiper-slide .teosophy-people__nav-img {
        translate: -12rem 0
    }
}

.teosophy-people__nav-btn[data-prev] {
    left: -14rem;
    translate: 0 -50%
}

.teosophy-people__nav-btn[data-next] {
    right: -14rem;
    translate: 0 -50%
}

.teosophy-people-item {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

@media (max-width: 768px) {
    .teosophy-people-item {
        gap: 1.2rem
    }
}

.teosophy-people-item__title {
    font-family: Graphik LC;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--primary-main, #001489)
}

@media (max-width: 768px) {
    .teosophy-people-item__title {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: normal
    }
}

.teosophy-people-item__text {
    font-family: Fira Sans;
    font-size: 2.6rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .01em;
    color: var(--text-primary, #4B5484)
}

@media (max-width: 768px) {
    .teosophy-people-item__text {
        font-size: 1.8rem;
        letter-spacing: normal
    }
}

.teosophy-blog__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

@media (max-width: 768px) {
    .teosophy-blog__wrapper {
        gap: 2.4rem
    }
}

.teosophy-blog__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem
}

@media (max-width: 768px) {
    .teosophy-blog__container {
        gap: 3.2rem
    }
}

.teosophy-blog__title {
    color: var(--primary-main, #001489)
}

.teosophy-blog__btn._show-hidden {
    display: none
}

.teosophy-blog__list {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 4.8rem 4rem;
    padding-top: 4.5rem
}

@media (max-width: 768px) {
    .teosophy-blog__list {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding-top: 0
    }
}

@media (min-width: 769px) {
    .teosophy-blog__list .teosophy-blog-card:nth-child(3n+2) {
        margin-top: 4.5rem
    }

    .teosophy-blog__list .teosophy-blog-card:nth-child(3n+1), .teosophy-blog__list .teosophy-blog-card:nth-child(3n+3) {
        margin-top: -4.5rem
    }
}

.teosophy-blog-card {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    color: var(--primary-main, #001489);
    transition: .3s
}

@media (max-width: 768px) {
    .teosophy-blog-card {
        gap: 1.6rem
    }
}

.teosophy-blog-card._show-hidden {
    display: none
}

@media (hover) {
    .teosophy-blog-card:hover {
        color: var(--primary-hover, #001DC8)
    }

    .teosophy-blog-card:hover .teosophy-blog-card__img img, .teosophy-blog-card:hover .teosophy-blog-card__img picture, .teosophy-blog-card:hover .teosophy-blog-card__img video {
        scale: 1.05
    }
}

@media (hover: none) {
    .teosophy-blog-card:active {
        color: var(--primary-hover, #001DC8)
    }

    .teosophy-blog-card:active .teosophy-blog-card__img img, .teosophy-blog-card:active .teosophy-blog-card__img picture, .teosophy-blog-card:active .teosophy-blog-card__img video {
        scale: 1.05
    }
}

.teosophy-blog-card__img {
    width: 100%;
    aspect-ratio: 480/530;
    border-radius: 2.4rem;
    overflow: hidden
}

.teosophy-blog-card__img img, .teosophy-blog-card__img picture, .teosophy-blog-card__img video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: scale .3s
}

.teosophy-blog-card__title {
    font-family: Graphik LC;
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .teosophy-blog-card__title {
        font-size: 1.8rem;
        letter-spacing: normal
    }
}

/* End */


/* Start:/local/templates/teos/frontend/css/custom.css?17878279231855*/
@media(max-width: 768px) {
    .header.header_dark.detail_product .header__logo-dark {
        opacity: 0
    }

    .header.header_dark.detail_product .header__logo-default {
        opacity: 1
    }
	
	.header.header_dark.detail_product {
		color: var(--text-on-dark-primary, #fff);
	}
}

.main-prod-item {
    cursor: pointer;
}

.main-prod__btn {
    display: none;
}

.main-prod-item__btn {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 17rem;
    height: 17rem;
    color: var(--text-on-dark-primary, #FFFFFF);
    backdrop-filter: blur(1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-prod-item__btn:hover {
    transform: translate(-50%, 0) scale(1.15);
    cursor: pointer; /* Делаем курсор кликабельным */
    background-color: var(--backgroud-white-10, rgba(255, 255, 255, .1));
    border-color: transparent;
}

@media(max-width: 768px) {
	.main-prod-item__btn {
		width: 10rem;
		height: 10rem;
		bottom: 95%;
		font-size: 1.4rem;
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: .01em;
	}
}

.main-recipe-card__img:after {
    display: none;
}

.teosophy-head__bg:after {
    background-color: #00000000;
}

.header.text-page {
    position: relative;
    width: 100%;
    max-width: 192rem;
    margin: 0 auto 2rem;
    padding: 0 2rem;
}

.header.text-page .container.header__container {
    background-color: var(--primary-main, #001489);
    border-radius: 3rem;
    max-width: 100%;
    padding: 2.4rem;
}

@media (max-width: 768px) {
    .header.text-page {
        padding: 0rem 1.6rem;
    }
}
/* End */


/* Start:/local/templates/teos/template_styles.css?177098476732*/
#panel {
    z-index: 10000;
}
/* End */
/* /local/templates/teos/frontend/css/style.css?1787916848200429 */
/* /local/templates/teos/frontend/css/custom.css?17878279231855 */
/* /local/templates/teos/template_styles.css?177098476732 */