@font-face {
    font-family: swiper-icons;
    font-style: normal;
    font-weight: 400;
    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")
}

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

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

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

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1
}

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

.swiper-container-multirow>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-container-multirow-column>.swiper-wrapper {
    flex-direction: column;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    margin: 0 auto;
    transition-timing-function: ease-out
}

.swiper-container-pointer-events {
    touch-action: pan-y
}

.swiper-container-pointer-events.swiper-container-vertical {
    touch-action: pan-x
}

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

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

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

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

.swiper-container-3d {
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    transform-style: preserve-3d
}

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

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

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

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

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

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

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

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

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

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

.swiper-scrollbar {
    background: rgba(0, 0, 0, .1);
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none
}

.swiper-container-horizontal>.swiper-scrollbar {
    bottom: 3px;
    height: 5px;
    left: 1%;
    position: absolute;
    width: 98%;
    z-index: 50
}

.swiper-container-vertical>.swiper-scrollbar {
    height: 98%;
    position: absolute;
    right: 3px;
    top: 1%;
    width: 5px;
    z-index: 50
}

.swiper-scrollbar-drag {
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

@font-face {
    font-display: swap;
    font-family: VinMonoPro;
    font-style: normal;
    font-weight: 700;
    src: url(../fnt/vin-mono-pro-bold.ttf);
}

@font-face {
    font-display: swap;
    font-family: IBMPlexSans;
    font-style: normal;
    font-weight: 400;
    src: url(../fnt/IBMPlexSans-Regular.ttf);
}

@font-face {
    font-display: swap;
    font-family: IBMPlexSans;
    font-style: normal;
    font-weight: 700;
    src: url(../fnt/IBMPlexSans-Bold.ttf);
}

body {
    --clr-accent: var(--color-accent, #ef5959);
    --clr-fixed-light: var(--color-primary, #fff);
    --clr-fixed-soft-light: var(--color-primary-soft, #e5e8ec);
    --clr-fixed-dark: var(--color-secondary, #181919);
    --clr-fixed-soft-dark: var(--color-secondary-soft, #282828);
    --clr-err-stroke: var(--color-error-border, #c9213f);
    --clr-err-fill: var(--color-error-background, #f5e5e8)
}

body:has([data-theme=light]),
body:not(:has([data-theme])) {
    --clr-basic-light: var(--color-primary, #fff);
    --clr-basic-soft-light: var(--color-primary-soft, #e5e8ec);
    --clr-basic-dark: var(--color-secondary, #181919);
    --clr-basic-soft-dark: var(--color-secondary-soft, #282828);
    --clr-relative-light: var(--color-primary, #fff);
    --clr-relative-soft-light: var(--color-primary-soft, #e5e8ec);
    --clr-relative-dark: var(--color-secondary, #181919);
    --clr-relative-soft-dark: var(--color-secondary-soft, #282828);
    --clr-opposite-light: var(--color-primary, #fff);
    --clr-opposite-soft-light: var(--color-primary-soft, #e5e8ec);
    --clr-opposite-dark: var(--color-secondary, #181919);
    --clr-opposite-soft-dark: var(--color-secondary-soft, #282828);
    --clr-hover-light: var(--color-primary-hover-light, #e3e3e3);
    --clr-hover-dark: var(--color-secondary-hover-light, #000)
}

body:has([data-theme=dark]) {
    --clr-basic-light: var(--color-secondary, #181919);
    --clr-basic-soft-light: var(--color-secondary-soft, #282828);
    --clr-basic-dark: var(--color-primary, #fff);
    --clr-basic-soft-dark: var(--color-primary-soft, #e5e8ec);
    --clr-relative-light: var(--color-primary-soft, #e5e8ec);
    --clr-relative-soft-light: var(--color-primary, #fff);
    --clr-relative-dark: var(--color-secondary-soft, #282828);
    --clr-relative-soft-dark: var(--color-secondary, #181919);
    --clr-opposite-light: var(--color-secondary-soft, #282828);
    --clr-opposite-soft-light: var(--color-secondary, #181919);
    --clr-opposite-dark: var(--color-primary-soft, #e5e8ec);
    --clr-opposite-soft-dark: var(--color-primary, #fff);
    --clr-hover-light: var(--color-primary-hover-dark, #e3e3e3);
    --clr-hover-dark: var(--color-secondary-hover-dark, #787878)
}

*,
:after,
:before {
    box-sizing: inherit;
    color: inherit;
    line-height: inherit
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height)
}

body {
    box-sizing: border-box;
    text-rendering: optimizeSpeed;
    vertical-align: baseline
}

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
ul {
    margin: 0;
    padding: 0
}

b,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

strong {
    font-weight: 700
}

ol,
ul {
    list-style-type: none
}

img,
picture,
svg {
    display: block;
    max-width: 100%
}

button,
input,
select,
textarea {
    border: none;
    font: inherit;
    padding: 0
}

a {
    text-decoration: none
}

a,
button {
    -webkit-tap-highlight-color: transparent;
    outline: none
}

a span,
a svg,
button span,
button svg {
    transition: inherit
}

button {
    cursor: pointer
}

:focus {
    outline: none
}

:root {
    --inner: 0;
    --outer: 0.75rem;
    --max-content: 110rem;
    --header-height: 4rem;
    --container-square-y: 3rem;
    --container-rectangle-top: 3rem;
    --container-rectangle-bottom: 5rem;
    --section-after-header-padding-top: 2.1875rem
}

@media only screen and (min-width:48em) {
    :root {
        --inner: 1.25rem;
        --outer: 1.25rem;
        --container-square-y: 3.75rem;
        --section-after-header-padding-top: 2.5rem
    }
}

@media only screen and (min-width:80em) {
    :root {
        --section-after-header-padding-top: 2.25rem
    }
}

@media only screen and (min-width:120em) {
    :root {
        --inner: 2.5rem;
        --outer: 2.5rem;
        --container-square-y: 5rem
    }
}

body {
    font-family: VinMonoPro, sans-serif
}

.title,
.title__1,
.title__2,
.title__3,
.title__4,
.title__5 {
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

.title__1 {
    font-size: 3.5rem
}

.title__2 {
    font-size: 2.75rem
}

.title__3 {
    font-size: 2.25rem
}

.title__4 {
    font-size: 2rem
}

.title__5 {
    font-size: 1.5rem;
    line-height: 120%
}

.text__vin,
.text__vin--16,
.text__vin--18,
.text__vin--20 {
    font-family: VinMonoPro;
    font-weight: 700;
    line-height: normal
}

.text__vin--20 {
    font-size: 1.25rem;
    text-transform: uppercase
}

.text__vin--18 {
    font-size: 1.125rem;
    line-height: 120%
}

.text__vin--16 {
    font-size: 1rem
}

.text__vin--14 {
    font-size: .875rem
}

.text__ibm,
.text__ibm--12,
.text__ibm--14,
.text__ibm--16,
.text__ibm--18 {
    font-family: IBMPlexSans;
    font-weight: 400;
    line-height: 140%
}

.text__ibm--18 {
    font-size: 1.125rem
}

.text__ibm--16 {
    font-size: 1rem
}

.text__ibm--14 {
    font-size: .875rem;
    line-height: 120%
}

.text__ibm--12 {
    font-size: .75rem;
    line-height: 120%
}

strong .text__ibm,
strong .text__ibm--12,
strong .text__ibm--14,
strong .text__ibm--16,
strong .text__ibm--18 {
    font-weight: 700
}

.section__title {
    font-size: 2.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

@media only screen and (min-width:48em) {
    .section__title {
        font-size: 3.5rem
    }
}

.underlined {
    text-decoration-line: underline
}

.white-text {
    color: var(--clr-fixed-light)
}

.black-text {
    color: var(--clr-fixed-dark)
}

.accent-text {
    color: var(--clr-accent)
}

body {
    background: var(--clr-opposite-soft-light);
    color: var(--clr-opposite-light)
}

.section,
.wrapper {
    position: relative
}

.section {
    display: grid;
    grid-template-columns: [full-start] minmax(var(--outer), 1fr) [wide-start] var(--inner) [main-start] minmax(0, var(--max-content)) [main-end] var(--inner) [wide-end] minmax(var(--outer), 1fr) [full-end];
    overflow: hidden;
    z-index: 200
}

.container {
    grid-column: main
}

.container--square {
    padding: var(--container-square-y) 0
}

.container--rectangle {
    padding: var(--container-rectangle-top) 0 var(--container-rectangle-bottom)
}

@media only screen and (min-width:120em) {
    .container {
        padding-top: 3.75rem
    }
}

.btn,
.btn__black,
.btn__brilliant-azure,
.btn__caribbean-green,
.btn__fire-opal,
.btn__hot-pink,
.btn__lavender,
.btn__princeton-orange,
.btn__white {
    border-radius: 6.25rem;
    padding: .6875rem 2rem
}

.btn__white {
    background: var(--clr-fixed-light);
    box-shadow: inset 4.492px -4.492px 4.492px 0 rgba(59, 59, 59, .6), inset 1.123px -1.123px 2.246px 0 rgba(94, 94, 94, .8), inset -4.492px 4.492px 4.492px 0 hsla(0, 0%, 100%, .7), inset -1.123px 1.123px 2.246px 0 rgba(81, 81, 81, .8)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .btn__white:hover {
        background: var(--clr-hover-light)
    }
}

.btn__black {
    background: var(--clr-fixed-dark);
    box-shadow: inset 4.492px -4.492px 4.492px 0 rgba(0, 0, 0, .6), inset 1.123px -1.123px 2.246px 0 rgba(33, 33, 33, .8), inset -4.492px 4.492px 4.492px 0 hsla(0, 0%, 100%, .7), inset -1.123px 1.123px 2.246px 0 rgba(33, 33, 33, .8)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .btn__black:hover {
        background: var(--clr-hover-dark)
    }
}

.btn__brilliant-azure,
.btn__caribbean-green,
.btn__fire-opal,
.btn__hot-pink,
.btn__lavender,
.btn__princeton-orange {
    background: var(--clr-accent, #ef5959);
    box-shadow: 4.492px -4.492px 4.492px 0 var(--clr-accent-shadow-1, #5e2d36) inset, 1.123px -1.123px 2.246px 0 var(--clr-accent-shadow-2, #821a3f) inset, -4.492px 4.492px 4.492px 0 hsla(0, 0%, 100%, .7) inset, -1.123px 1.123px 2.246px 0 var(--clr-accent-shadow-3, #d7255b) inset
}

@media only screen and (hover:hover) and (pointer:fine) {

    .btn__brilliant-azure:hover,
    .btn__caribbean-green:hover,
    .btn__fire-opal:hover,
    .btn__hot-pink:hover,
    .btn__lavender:hover,
    .btn__princeton-orange:hover {
        background: var(--clr-accent-hover, #d74141)
    }
}

.btn__programm {
    background: var(--clr-basic-dark);
    border-radius: 75px;
    box-shadow: 0 .1875rem .3125rem 0 rgba(0, 0, 0, .15), 0 .625rem .625rem 0 rgba(0, 0, 0, .13), 0 1.4375rem .875rem 0 rgba(0, 0, 0, .08), 0 2.5rem 1rem 0 rgba(0, 0, 0, .02), 0 3.9375rem 1.0625rem 0 transparent;
    color: var(--clr-basic-light);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 120%;
    margin-top: 1.125rem;
    padding-block: .375rem;
    width: 100%
}

@media only screen and (hover:hover) and (pointer:fine) {
    .btn__programm:hover {
        background: var(--clr-hover-dark)
    }
}

@media only screen and (min-width:48em) {
    .btn__programm {
        display: table;
        margin-left: auto;
        margin-right: auto;
        width: fit-content
    }
}

@media only screen and (min-width:80em) {
    .btn__programm {
        min-width: 14.625rem
    }
}

.fixed-enroll {
    bottom: .625rem;
    left: 0;
    margin: .625rem;
    opacity: 0;
    position: fixed;
    transform: translateY(100%);
    transition: all .2s ease;
    width: 100%;
    width: -webkit-fill-available;
    z-index: 1000
}

@media only screen and (hover:hover) and (pointer:fine) {
    .fixed-enroll:hover {
        opacity: .1
    }
}

.fixed-btn-shown .fixed-enroll {
    opacity: 1;
    transform: translateY(0)
}

@media only screen and (min-width:48em) {
    .fixed-enroll {
        margin-top: 0;
        margin-inline: 1.25rem
    }
}

@media only screen and (min-width:64em) {
    .fixed-enroll {
        display: none
    }
}

.fixed-enroll__btn {
    background: var(--fixed-btn-bg, #181919);
    box-shadow: inset -1.123px 1.123px 2.246px 0 rgba(81, 81, 81, .8), inset -4.492px 4.492px 4.492px 0 hsla(0, 0%, 100%, .7), inset 1.123px -1.123px 2.246px 0 rgba(94, 94, 94, .8), inset 4.492px -4.492px 4.492px 0 rgba(59, 59, 59, .6);
    color: var(--fixed-btn-text, #fff);
    display: block;
    text-align: center;
    width: 100%
}

@media only screen and (min-width:80em) {

    .has-fixed-btn .back-to-top,
    .has-fixed-btn .desk-header__action {
        display: none !important
    }
}

.menu-mode.fixed-btn-shown .fixed-enroll {
    display: none
}

@media only screen and (max-width:767px) {
    .has-fixed-btn .header__btn {
        display: none
    }
}

body:has([data-theme=dark]) .fixed-enroll__btn {
    --fixed-btn-bg: #fff;
    --fixed-btn-text: #000
}

.header {
    height: var(--header-height);
    left: 0;
    padding-block: .75rem;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000
}

@media only screen and (min-width:48em) {
    .header .container {
        grid-column: wide;
        padding-top: unset
    }
}

@media only screen and (min-width:100em) {
    .header .container {
        grid-column: main
    }
}

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

.header__logo {
    --color-primary: var(--clr-basic-soft-light);
    --color-tertiary: var(--clr-opposite-dark);
    --color-senary: var(--clr-basic-soft-light);
    --color-octonary: var(--clr-opposite-dark);
    height: 2.5rem;
    width: 4.25rem
}

@media only screen and (hover:hover) and (pointer:fine) {
    .header__logo:hover {
        --color-octonary: var(--clr-hover-dark);
        --color-tertiary: var(--clr-hover-dark)
    }
}

.header__nav .nav-list {
    display: flex;
    flex-direction: row;
    gap: 2.5rem
}

.header__nav .nav-list a {
    color: var(--clr-basic-dark);
    text-transform: uppercase
}

@media only screen and (hover:hover) and (pointer:fine) {
    .header__nav .nav-list a:hover {
        color: var(--clr-accent)
    }
}

@media only screen and (max-width:1279px) {
    .header__nav {
        display: none
    }
}

.header.colored {
    background: var(--clr-accent)
}

.header.colored .nav-list a {
    color: var(--clr-fixed-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .header.colored .nav-list a:hover {
        color: var(--clr-fixed-light)
    }
}

.header+section .container {
    padding-top: calc(var(--section-after-header-padding-top) + var(--header-height))
}

.is-scrolled .header {
    background: var(--clr-relative-soft-light);
    position: fixed
}

.is-scrolled .header__nav a {
    color: var(--clr-fixed-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .is-scrolled .header__nav a:hover {
        color: var(--clr-accent)
    }
}

.is-scrolled .header__logo {
    --color-primary: var(--clr-fixed-soft-light);
    --color-tertiary: var(--clr-fixed-dark);
    --color-senary: var(--clr-fixed-soft-light);
    --color-octonary: var(--clr-fixed-dark)
}

.is-scrolled .header__logo:hover {
    --color-octonary: var(--clr-hover-dark);
    --color-tertiary: var(--clr-hover-dark)
}

.is-scrolled .header.colored .header__logo {
    --color-primary: var(--clr-fixed-soft-light);
    --color-tertiary: var(--clr-fixed-dark);
    --color-senary: var(--clr-fixed-soft-light);
    --color-octonary: var(--clr-fixed-dark)
}

.is-scrolled .header.colored .header__logo:hover {
    --color-octonary: var(--clr-hover-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .is-scrolled .header.colored .nav-list a:hover {
        color: var(--clr-accent)
    }
}

.main {
    background: var(--clr-basic-soft-light);
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:80em) {
    .main.is-less-then-three .main__media-slider--wrapper {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: start
    }

    .main.is-less-then-three .swiper-slide {
        flex-shrink: unset;
        width: 21.75rem
    }

    .main.is-less-then-three .main__media-slider--actions {
        display: none
    }
}

.main.colored {
    background: var(--clr-basic-light);
    color: var(--clr-basic-dark)
}

.main.colored .swiper-pagination-bullet {
    background: var(--clr-basic-soft-light)
}

.main.colored .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark)
}

@media only screen and (min-width:80em) {
    .main.title-to-the-left .main__wrapper {
        display: grid;
        grid-template-columns: 1fr 3fr
    }

    .main.slider .main__wrapper {
        flex-direction: column
    }
}

@media only screen and (max-width:1279px) {
    .main.is-long-title .main__content {
        flex-direction: column;
        gap: unset
    }
}

.main__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

@media only screen and (min-width:80em) {
    .main__wrapper {
        flex-direction: row;
        gap: 5rem
    }
}

@media only screen and (min-width:120em) {
    .main__content {
        width: -webkit-fill-available
    }
}

.main__content--title {
    margin-bottom: 2.5rem
}

.main__content--sub-title {
    margin-bottom: 1rem
}

.main__content--points {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.main__content--points-item {
    padding-left: 1.75rem;
    position: relative
}

.main__content--points-item:before {
    background: currentColor;
    border-radius: 100%;
    content: "";
    height: .3125rem;
    left: .625rem;
    position: absolute;
    top: .625rem;
    width: .3125rem
}

.main__content--text-box {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media only screen and (min-width:48em) {
    .main__content--text-box {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: repeat(2, 1fr)
    }

    .slider .main__content {
        display: flex;
        flex-direction: row;
        gap: 3.75rem
    }
}

.main__media .video-section__box {
    border-radius: 16px;
    height: 43.375rem;
    padding-bottom: 48.125%;
    position: relative
}

@media only screen and (min-width:48em) {
    .main__media .video-section__box {
        height: 24.75rem;
        padding-bottom: 56.2%
    }
}

@media only screen and (min-width:80em) {
    .main__media .video-section__box {
        padding-bottom: 50%;
        width: 44.25rem
    }
}

.main__media .video-section__box iframe {
    border: none;
    height: 100%;
    position: absolute;
    width: 100%
}

.main__media .video-section__box img {
    border-radius: 16px
}

.main__media .video-section__poster {
    height: 100%;
    position: absolute;
    width: 100%
}

.main__media .video-section__poster img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.main__media .video-section__play {
    cursor: pointer;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.main__media .video-section__play svg {
    fill: var(--clr-accent);
    height: 1.6875rem;
    transition: .3s;
    width: 2.5rem
}

@media only screen and (min-width:48em) {
    .main__media .video-section__play svg {
        height: 2.375rem;
        width: 3.5rem
    }
}

@media only screen and (min-width:80em) {
    .main__media .video-section__play svg {
        height: 3.625rem;
        width: 5.3125rem
    }
}

@media only screen and (hover:hover) and (pointer:fine) {
    .main__media .video-section__play:hover {
        opacity: .9
    }
}

.main__media-slider {
    overflow: hidden
}

@media only screen and (min-width:120em) {
    .main__media-slider--wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center
    }
}

.main__media-slider--pagination {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: 2.5rem
}

.main__media-slider--pagination .swiper-pagination-bullet {
    background: var(--clr-basic-light);
    border-radius: 10px;
    font-size: .75rem;
    height: .5625rem;
    line-height: 1.25rem;
    opacity: 1;
    text-align: center;
    width: .5625rem
}

.main__media-slider--pagination .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark);
    width: 1.8125rem
}

.main__media-slider--actions {
    margin-top: 2.5rem
}

@media only screen and (min-width:48em) {
    .main__media-slider--actions {
        align-items: flex-start;
        display: flex;
        justify-content: space-between
    }
}

.main__media-slider--button {
    cursor: pointer;
    display: flex;
    gap: 1rem
}

.main__media-slider--button svg path {
    fill: var(--clr-basic-dark)
}

@media only screen and (max-width:767px) {
    .main__media-slider--button {
        display: none
    }
}

@media only screen and (min-width:120em) {
    .main__media-slider--button {
        display: none
    }
}

.main__media-slider--item {
    width: 21.75rem
}

@media only screen and (min-width:120em) {
    .main__media-slider--item {
        flex-shrink: unset;
        width: 26.3125rem
    }
}

.main__media-slider--item img {
    border-radius: 16px;
    height: 15.375rem;
    object-fit: cover;
    width: 100%
}

@media only screen and (min-width:48em) {
    .main__media-slider--item img {
        height: 15.375rem;
        width: 21.75rem
    }
}

@media only screen and (min-width:120em) {
    .main__media-slider--item img {
        height: 18.5625rem;
        width: 26.3125rem
    }
}

.main__media--image {
    border-radius: 1rem;
    height: 17.25rem;
    object-fit: cover
}

@media only screen and (min-width:48em) {
    .main__media--image {
        height: 30.1875rem
    }
}

@media only screen and (min-width:80em) {
    .main__media--image {
        min-width: 38.9375rem;
        width: 38.9375rem
    }
}

.main.without-uppercase .main__content--title {
    text-transform: none
}

.hero-main {
    --container-rectangle-bottom: 2.5rem
}

@media only screen and (min-width:48em) {
    .hero-main {
        --container-rectangle-top: 3.75rem;
        --container-rectangle-bottom: 3.75rem
    }
}

@media only screen and (min-width:120em) {
    .hero-main {
        --container-rectangle-bottom: 5rem
    }
}

@media only screen and (min-width:48em) {
    .hero-main .container {
        grid-column: wide
    }
}

@media only screen and (min-width:120em) {
    .hero-main .container {
        grid-column: main
    }
}

.hero-main__lectors-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2.5rem
}

@media only screen and (min-width:1280px) {
    .hero-main__lectors-box {
        flex-direction: unset;
        gap: 5rem
    }
}

@media only screen and (min-width:768px) and (max-width:1279px) {
    .hero-main.two-lectors-row .hero-main__lectors-box {
        flex-direction: unset;
        gap: 5rem
    }
}

.hero-main .fixed-enroll__btn {
    display: none
}

@media only screen and (min-width:80em) {
    .hero-main .fixed-enroll__btn {
        display: block;
        margin-top: .5rem;
        width: fit-content
    }
}

.hero-main__wrapper {
    display: flex;
    flex-direction: column
}

@media only screen and (min-width:80em) {
    .hero-main__wrapper {
        flex-direction: row
    }
}

.hero-main__wrapper.equal-height-columns .hero-main__content {
    height: auto
}

.hero-main__wrapper.equal-height-columns .hero-main__content-box {
    gap: unset;
    height: calc(100% - 33px);
    justify-content: space-between
}

.hero-main__content {
    height: fit-content
}

@media only screen and (min-width:80em) {
    .hero-main__content {
        min-width: 48.125rem;
        width: 48.125rem
    }
}

@media only screen and (min-width:120em) {
    .hero-main__content {
        width: 100%
    }
}

.hero-main__tags {
    display: flex;
    flex-wrap: wrap
}

.hero-main__tags--item {
    border-radius: 100px;
    padding: .5rem 1rem
}

.hero-main__content-box,
.hero-main__tags--item {
    background: var(--clr-opposite-light);
    color: var(--clr-basic-dark)
}

.hero-main__content-box {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 2rem 1rem
}

@media only screen and (min-width:48em) {
    .hero-main__content-box {
        border-radius: 32px;
        gap: 4rem;
        padding: 2rem
    }
}

@media only screen and (min-width:120em) {
    .hero-main__content-box {
        padding: 2.5rem
    }
}

@media only screen and (min-width:80em) {
    .hero-main__content-box--head {
        max-width: 39rem
    }
}

.hero-main__content-box--head-title {
    margin-bottom: .75rem
}

@media only screen and (min-width:48em) {
    .hero-main__content-box--head-title {
        font-size: 3.5rem
    }
}

.hero-main__content-box--tail-name {
    margin-bottom: .25rem
}

@media only screen and (min-width:48em) {
    .hero-main__content-box--tail-name {
        font-size: 1.5rem
    }
}

.hero-main__content-box--tail-position {
    margin-bottom: 1rem
}

@media only screen and (min-width:48em) {
    .hero-main__content-box--tail-position {
        font-size: 1.125rem
    }
}

.hero-main__content-box--tail-company {
    background: var(--clr-opposite-soft-light);
    border-radius: 20px;
    padding: .375rem 1rem;
    width: fit-content
}

@media only screen and (min-width:48em) {
    .hero-main__content-box--tail-company {
        font-size: 1.125rem
    }
}

@media only screen and (min-width:80em) {
    .hero-main__image {
        margin-top: 2.0625rem;
        width: 100%
    }
}

@media only screen and (min-width:120em) {
    .hero-main__image {
        height: auto;
        min-height: 28rem;
        min-width: 35.0625rem;
        width: 35.0625rem
    }
}

.hero-main__image img {
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-main-image-position, top);
    width: 100%
}

@media only screen and (min-width:48em) {
    .hero-main__image img {
        border-radius: 32px;
        height: 36.4375rem
    }
}

@media only screen and (min-width:80em) {
    .hero-main__image img {
        height: 100%;
        min-height: 27.8125rem
    }
}

@media only screen and (min-width:120em) {
    .hero-main__image img {
        height: 100%;
        min-height: 28rem;
        min-width: 35.0625rem;
        width: 35.0625rem
    }
}

.hero-main__image .video-section__box {
    height: 19.5rem;
    padding-bottom: 48.125%;
    position: relative
}

@media only screen and (min-width:48em) {
    .hero-main__image .video-section__box {
        height: 35.1875rem;
        padding-bottom: 56.2%
    }
}

@media only screen and (min-width:80em) {
    .hero-main__image .video-section__box {
        margin: auto;
        padding-bottom: 50%
    }
}

@media only screen and (min-width:120em) {
    .hero-main__image .video-section__box {
        height: 100%;
        min-height: 28rem;
        min-width: 35.0625rem;
        width: 35.0625rem
    }
}

.hero-main__image .video-section__box iframe {
    border: none;
    height: 100%;
    position: absolute;
    width: 100%
}

.hero-main__image .video-section__poster {
    height: 100%;
    position: absolute;
    width: 100%
}

.hero-main__image .video-section__poster img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.hero-main__image .video-section__play {
    cursor: pointer;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.hero-main__image .video-section__play svg {
    fill: var(--clr-accent);
    height: 1.6875rem;
    transition: .3s;
    width: 2.5rem
}

@media only screen and (min-width:48em) {
    .hero-main__image .video-section__play svg {
        height: 2.375rem;
        width: 3.5rem
    }
}

@media only screen and (min-width:80em) {
    .hero-main__image .video-section__play svg {
        height: 3.625rem;
        width: 5.3125rem
    }
}

@media only screen and (hover:hover) and (pointer:fine) {
    .hero-main__image .video-section__play:hover {
        opacity: .9
    }
}

.hero-main__points {
    color: var(--clr-basic-dark);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1rem
}

@media only screen and (min-width:80em) {
    .hero-main__points {
        justify-content: center;
        margin-top: 2.0625rem;
        padding: 1.25rem 2.5rem
    }
}

.hero-main__points--item {
    display: flex;
    flex-direction: row;
    gap: .5rem
}

.hero-main__points--item svg {
    height: 1.5rem;
    width: 1.5rem
}

.hero-main__points--item p {
    width: fit-content
}

.hero-main.colored {
    background: var(--clr-accent)
}

.hero-main.colored .hero-main__tags--item {
    background: var(--clr-fixed-light);
    color: var(--clr-fixed-dark)
}

.hero-main.colored .hero-main__content-box {
    background: var(--clr-fixed-soft-light);
    color: var(--clr-fixed-dark)
}

.hero-main.colored .hero-main__content-box--tail-company {
    background: var(--clr-fixed-light)
}

.hero-main.colored .hero-main__points--item {
    --icon-clr: var(--switch-color-hero-point-icon) var(--clr-fixed-light);
    --text-clr: var(--switch-color-hero-point-text) var(--clr-fixed-light);
    color: var(--text-clr, var(--clr-fixed-dark))
}

.hero-main.colored .hero-main__points--item svg,
.hero-main.colored .hero-main__points--item svg.black-text {
    color: var(--icon-clr, var(--clr-fixed-dark))
}

@media only screen and (min-width:80em) {
    .hero-main.colored .hero-grid__info {
        background-color: var(--clr-opposite-light);
        color: var(--clr-opposite-dark)
    }
}

.hero-grid {
    background: var(--clr-opposite-light);
    border-radius: 20px;
    color: var(--clr-basic-dark);
    padding: 2rem 1rem
}

@media only screen and (min-width:48em) {
    .hero-grid {
        border-radius: 2rem;
        padding: 2.5rem 2rem
    }
}

@media only screen and (min-width:80em) {
    .hero-grid {
        background: none;
        display: grid;
        grid-template-columns: 13.75rem 1fr 34.25rem;
        padding: 0
    }
}

@media only screen and (min-width:112.5em) {
    .hero-grid {
        grid-template-columns: 17.5rem 1fr 41.625rem
    }
}

.hero-grid__front__title {
    margin-block: 2rem 1rem
}

@media only screen and (max-width:35.4375em) {
    .hero-grid__front__desc {
        font-size: 1rem
    }
}

@media only screen and (min-width:80em) {
    .hero-grid__front {
        grid-area: 1/2/2/3;
        padding: 1.25rem
    }

    .hero-grid__front__title {
        margin-top: 2.25rem
    }
}

@media only screen and (min-width:112.5em) {
    .hero-grid__front {
        padding: 2rem
    }

    .hero-grid__front__title {
        margin-top: 2.5rem
    }
}

.hero-grid__info {
    margin-top: 3.5rem
}

@media only screen and (min-width:80em) {
    .hero-grid__info {
        align-items: flex-end;
        background-color: var(--clr-accent);
        border-radius: 32px;
        color: var(--clr-fixed-dark);
        display: flex;
        grid-area: 1/1/2/2;
        margin: 0;
        padding: 2rem 1.25rem
    }
}

.hero-grid__image {
    margin-top: 2rem
}

.hero-grid__image img {
    border-radius: 20px;
    width: 100%
}

@media only screen and (min-width:80em) {
    .hero-grid__image {
        grid-area: 1/3/2/4;
        margin: 0;
        padding: 1.25rem
    }
}

@media only screen and (min-width:112.5em) {
    .hero-grid__image {
        padding: 2rem
    }
}

.hero-grid__bg {
    display: none
}

@media only screen and (min-width:80em) {
    .hero-grid__bg {
        background-color: var(--clr-opposite-light);
        border-radius: 32px;
        display: block;
        grid-area: 1/2/2/4;
        height: 100%;
        width: 100%
    }
}

.colored .hero-grid .hero-main__tags--item,
.hero-grid .hero-main__tags--item {
    background: var(--clr-opposite-soft-light);
    color: var(--clr-basic-dark)
}

.about-course {
    background: var(--clr-basic-light);
    color: var(--clr-basic-dark)
}

.about-course__info {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    margin-bottom: 2.5rem
}

@media only screen and (min-width:48em) {
    .about-course__info {
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 3rem
    }
}

@media only screen and (min-width:80em) {
    .about-course__info {
        flex-direction: row;
        gap: unset;
        justify-content: space-between
    }
}

.about-course__info--title {
    width: min-content
}

@media only screen and (min-width:48em) {
    .about-course__info--title {
        width: unset
    }
}

.about-course__info--labels {
    display: flex;
    flex-direction: column;
    gap: 1.75rem
}

.about-course__info--labels span {
    display: block;
    margin-bottom: .5rem
}

@media only screen and (min-width:48em) {
    .about-course__info--labels {
        flex-direction: row;
        gap: 3.75rem
    }
}

@media only screen and (min-width:120em) {
    .about-course__info--labels {
        width: 78.75rem
    }
}

@media only screen and (min-width:80em) {
    .about-course__description {
        max-width: 42.5rem
    }
}

@media only screen and (min-width:120em) {
    .about-course__description {
        align-items: end;
        display: flex;
        justify-content: end;
        max-width: unset
    }
}

@media only screen and (min-width:48em) {
    .about-course__description--text {
        font-size: 1.5rem
    }
}

@media only screen and (min-width:120em) {
    .about-course__description--text {
        max-width: 78.75rem
    }
}

@media only screen and (min-width:80em) {
    .about-course.without-title .about-course__wrapper {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

@media only screen and (min-width:120em) {
    .about-course.without-title .about-course__info--labels {
        justify-content: end;
        width: 35.875rem
    }

    .about-course.without-title .about-course__wrapper {
        gap: 6.25rem
    }
}

.about-course.colored {
    background: var(--clr-accent);
    color: var(--clr-fixed-dark)
}

.about-course.colored .accent-text {
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:48em) {
    .for-whom {
        background: var(--clr-basic-soft-light)
    }
}

@media only screen and (min-width:120em) {
    .for-whom__wrapper {
        display: grid;
        grid-template-columns: 1fr 78.75rem
    }
}

.for-whom__title {
    color: var(--clr-basic-dark);
    margin-bottom: 2.5rem
}

.for-whom__list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

@media only screen and (min-width:48em) {
    .for-whom__list {
        gap: 2rem
    }
}

@media only screen and (min-width:80em) {
    .for-whom__list {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media only screen and (min-width:120em) {
    .for-whom__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

.for-whom__list--item {
    color: var(--clr-basic-dark);
    display: flex;
    flex-direction: row;
    gap: .5rem
}

@media only screen and (min-width:48em) {
    .for-whom__list--item {
        flex-direction: column
    }
}

.for-whom__list--item-box {
    width: fit-content
}

.for-whom__list--item-title {
    margin-bottom: .5rem
}

@media only screen and (min-width:48em) {
    .for-whom__list--item-title {
        margin-bottom: 1rem
    }

    .for-whom__list--item-text {
        padding-inline: .75rem
    }
}

.for-whom__list--item-number {
    color: var(--clr-accent);
    padding: 0 1rem .5rem
}

@media only screen and (min-width:48em) {
    .for-whom__list--item-number {
        font-size: 1.5rem;
        padding: 0 0 .5rem
    }
}

.for-whom__list--item-number~.for-whom__list--item-title {
    padding-inline: 1rem
}

@media only screen and (min-width:48em) {
    .for-whom__list--item-number~.for-whom__list--item-title {
        padding-inline: unset
    }
}

.for-whom__list--item-number~.for-whom__list--item-text {
    padding-inline: 2rem
}

@media only screen and (min-width:48em) {
    .for-whom__list--item-number~.for-whom__list--item-text {
        padding-inline: .75rem
    }
}

.for-whom.colored .for-whom__list--item-title {
    color: var(--clr-accent)
}

.for-whom.colored .for-whom__list--item-number {
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:48em) {
    .for-whom.more-than-three .for-whom__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (min-width:80em) {
    .for-whom.more-than-three .for-whom__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width:120em) {
    .for-whom.more-than-three .for-whom__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}

.for-program {
    background: var(--clr-basic-soft-light)
}

@media only screen and (min-width:80em) {
    .for-program.is-less-then-four .for-program__cards-slider--actions {
        display: none
    }
}

.for-program .no-swiper .for-program__cards-slider--actions {
    display: none
}

@media only screen and (min-width:112.5em) {
    .for-program__wrapper {
        display: grid;
        gap: 3.125rem;
        grid-template-columns: 1fr 78.75rem
    }
}

.for-program__title {
    color: var(--clr-basic-dark);
    margin-bottom: 2.5rem
}

.for-program__cards {
    display: flex
}

.for-program__cards--item {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    padding: 1.25rem 1.25rem 2rem;
    width: 15rem
}

@media only screen and (min-width:23.4375em) {
    .for-program__cards--item {
        width: 19.25rem
    }
}

@media only screen and (min-width:48em) {
    .for-program__cards--item {
        border-radius: 32px;
        width: 23.75rem
    }
}

@media only screen and (min-width:1280px) {
    .for-program__cards--item {
        width: calc(33.33333% - 40px)
    }
}

@media only screen and (min-width:112.5em) {
    .for-program__cards--item {
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .15), 0 10px 10px 0 rgba(0, 0, 0, .13), 0 23px 14px 0 rgba(0, 0, 0, .08), 0 40px 16px 0 rgba(0, 0, 0, .02), 0 63px 17px 0 transparent;
        width: 28%
    }
}

@media only screen and (min-width:120em) {
    .for-program__cards--item {
        padding: 2rem 2rem 2.5rem
    }
}

.for-program__cards--item-title {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: .5rem;
    height: auto
}

.for-program__cards--item.primary {
    background: var(--clr-basic-soft-dark);
    color: var(--clr-basic-light)
}

.for-program__cards--item.secondary {
    background: var(--clr-basic-light);
    color: var(--clr-basic-dark)
}

.for-program__cards--item.accent {
    background: var(--clr-accent);
    color: var(--clr-fixed-light)
}

@media only screen and (min-width:112.5em) {
    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards-slider--actions {
        display: none
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(3, 1fr);
        width: 78.75rem
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards .for-program__cards--item:nth-last-child(2) {
        grid-column-start: 2
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards:has(.for-program__cards--item:first-child:nth-last-child(3n)) .for-program__cards--item:nth-last-child(2) {
        grid-column-start: unset
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards:has(.for-program__cards--item:first-child:nth-last-child(4n)) {
        grid-template-columns: repeat(4, 1fr)
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards:has(.for-program__cards--item:first-child:nth-last-child(4n)) .for-program__cards--item:nth-last-child(2) {
        grid-column-start: unset
    }

    .for-program__cards-slider[data-disable-slider-on-pc=true] .for-program__cards--item {
        width: auto
    }
}

@media only screen and (min-width:120em) {
    .for-program__cards-slider:not([data-disable-slider-on-pc=true]) {
        overflow: hidden
    }
}

.for-program__cards-slider--pagination {
    align-items: center;
    display: flex;
    flex-direction: row
}

.for-program__cards-slider--pagination .swiper-pagination-bullet {
    background: var(--clr-basic-light);
    border-radius: 10px;
    font-size: .75rem;
    height: .5625rem;
    line-height: 1.25rem;
    opacity: 1;
    text-align: center;
    width: .5625rem
}

.for-program__cards-slider--pagination .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark);
    width: 1.8125rem
}

.for-program__cards-slider--actions {
    margin-top: 2.5rem
}

@media only screen and (min-width:48em) {
    .for-program__cards-slider--actions {
        align-items: flex-start;
        display: flex;
        justify-content: space-between
    }
}

.for-program__cards-slider--button {
    cursor: pointer;
    display: flex;
    gap: 1rem
}

.for-program__cards-slider--button svg {
    fill: var(--clr-basic-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .for-program__cards-slider--button svg:hover {
        fill: var(--clr-hover-dark)
    }
}

@media only screen and (max-width:767px) {
    .for-program__cards-slider--button {
        display: none
    }
}

@media only screen and (max-width:1279px) {
    .for-program__cards-slider .swiper-slide-active {
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .15), 0 10px 10px 0 rgba(0, 0, 0, .13), 0 23px 14px 0 rgba(0, 0, 0, .08), 0 40px 16px 0 rgba(0, 0, 0, .02), 0 63px 17px 0 transparent;
        transition: box-shadow .1s ease-in-out
    }
}

.programm {
    --container-rectangle-top: 3rem;
    --container-rectangle-bottom: 4rem;
    background: var(--clr-opposite-soft-light);
    overflow: hidden
}

@media only screen and (min-width:768px) {
    .programm {
        --container-rectangle-top: 3.75rem;
        --container-rectangle-bottom: 5rem
    }
}

@media only screen and (min-width:120em) {
    .programm__wrapper {
        display: grid;
        grid-template-columns: 1fr 3fr
    }
}

.programm .hidden-program {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: 1ms
}

.programm .hidden-program.show-program {
    display: block;
    margin-top: 1.875rem;
    opacity: 1;
    pointer-events: all
}

@media only screen and (min-width:48em) {
    .programm .hidden-program.show-program {
        margin-top: 2.75rem
    }
}

@media only screen and (min-width:80em) {
    .programm .hidden-program.show-program {
        margin-top: 4.375rem
    }
}

.programm .show-program-btn {
    margin-top: 1.875rem
}

@media only screen and (min-width:48em) {
    .programm .show-program-btn {
        margin-top: 2.75rem
    }
}

@media only screen and (min-width:80em) {
    .programm .show-program-btn {
        margin-top: 4.375rem
    }
}

.programm .show-program-btn .close,
.programm .show-program-btn.shown .open {
    display: none
}

.programm .show-program-btn.shown .close {
    display: block
}

.programm__title {
    color: var(--clr-basic-dark);
    margin-bottom: 2.5rem
}

.programm__dropdown {
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

.programm__inner {
    grid-column: main
}

@media only screen and (min-width:64em) {
    .programm__inner {
        grid-column: wide
    }
}

@media only screen and (min-width:90em) {
    .programm__inner {
        grid-column: main-start/wide-end
    }
}

@media only screen and (min-width:120em) {
    .programm__inner {
        width: 78.75rem
    }
}

.programm__inner.open .programm__dropdown {
    height: unset;
    margin-top: 1.25rem;
    opacity: 1;
    pointer-events: all
}

@media only screen and (min-width:120em) {
    .programm__inner.open .programm__dropdown {
        margin-top: 2.5rem
    }
}

.programm__list-item:not(:last-child) {
    padding-bottom: .625rem
}

.programm__list-item:not(:last-child).js-accordeon-shown {
    padding-bottom: 2.5rem
}

@media only screen and (min-width:120em) {
    .programm__list-item:not(:last-child) {
        padding-bottom: 2.5rem
    }
}

.prog-item {
    display: grid;
    grid-template-areas: "num    num    action" "lead   lead    lead" "body   body    body";
    grid-template-columns: 3.375rem 1fr 1.875rem;
    grid-template-rows: auto
}

@media only screen and (min-width:120em) {
    .prog-item {
        --item-height: 100%;
        grid-template-areas: "num num action" "content content content"
    }

    .prog-item.js-accordeon-shown .prog-item__lead {
        border-radius: 32px 0 0 32px
    }
}

.prog-item__content {
    display: contents
}

@media only screen and (min-width:120em) {
    .prog-item__content {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        background: var(--clr-opposite-light);
        border-radius: 32px;
        box-shadow: 0 .1875rem .3125rem 0 rgba(0, 0, 0, .15), 0 .625rem .625rem 0 rgba(0, 0, 0, .13), 0 1.4375rem .875rem 0 rgba(0, 0, 0, .08), 0 2.5rem 1rem 0 rgba(0, 0, 0, .02), 0 3.9375rem 1.0625rem 0 transparent;
        cursor: pointer;
        display: flex;
        gap: 5rem;
        grid-area: content;
        justify-content: space-between;
        transition: all .2s ease-in-out
    }
}

.prog-item__num {
    display: flex;
    grid-area: num
}

.prog-item__num--number {
    background: var(--clr-accent)
}

.prog-item__num--label,
.prog-item__num--number {
    border-radius: 100px;
    color: var(--clr-basic-light);
    height: 2.5625rem;
    padding: .5rem 1.5rem
}

.prog-item__num--label {
    background: var(--clr-basic-soft-dark)
}

@media only screen and (min-width:48em) {
    .prog-item__num {
        font-size: 3rem
    }
}

@media only screen and (min-width:64em) {
    .prog-item__num {
        font-size: 7.8125rem;
        line-height: 4.5rem
    }
}

.prog-item__date {
    align-self: center;
    color: var(--clr-basic-dark);
    display: flex;
    gap: 1.25rem;
    grid-area: date;
    margin-bottom: 1.25rem;
    padding-top: .625rem;
    white-space: nowrap
}

@media only screen and (min-width:80em) {
    .prog-item__date {
        padding-top: unset
    }
}

.prog-item__lead {
    -webkit-tap-highlight-color: transparent;
    background: var(--clr-opposite-light);
    border-radius: 20px;
    box-shadow: 0 .1875rem .3125rem 0 rgba(0, 0, 0, .15), 0 .625rem .625rem 0 rgba(0, 0, 0, .13), 0 1.4375rem .875rem 0 rgba(0, 0, 0, .08), 0 2.5rem 1rem 0 rgba(0, 0, 0, .02), 0 3.9375rem 1.0625rem 0 transparent;
    color: var(--clr-basic-dark);
    cursor: pointer;
    grid-area: lead;
    padding: 2rem .75rem;
    transition: all .2s ease-in-out
}

.js-accordeon-shown .prog-item__lead {
    border-radius: 20px 20px 0 0;
    box-shadow: none;
    padding: 2rem .75rem .5rem
}

@media only screen and (min-width:48em) {
    .js-accordeon-shown .prog-item__lead {
        border-radius: 32px 32px 0 0;
        padding: 2rem 2rem 1rem
    }
}

@media only screen and (min-width:120em) {
    .js-accordeon-shown .prog-item__lead {
        padding: 2rem 0 2rem 2rem
    }
}

@media only screen and (min-width:48em) {
    .prog-item__lead {
        border-radius: 2rem;
        padding: 2rem
    }
}

@media only screen and (min-width:120em) {
    .prog-item__lead {
        box-shadow: unset;
        height: 100%;
        padding: 2rem 0 2rem 2rem;
        width: 32rem
    }
}

@media only screen and (min-width:80em) {
    .prog-item__lead p.text__vin--20 {
        font-size: 1.5rem
    }
}

.prog-item__action {
    align-self: center;
    grid-area: action;
    justify-self: end
}

.prog-item__body {
    background: var(--clr-opposite-light);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 .1875rem .3125rem 0 rgba(0, 0, 0, .15), 0 .625rem .625rem 0 rgba(0, 0, 0, .13), 0 1.4375rem .875rem 0 rgba(0, 0, 0, .08), 0 2.5rem 1rem 0 rgba(0, 0, 0, .02), 0 3.9375rem 1.0625rem 0 transparent;
    color: var(--clr-basic-dark);
    font-size: 1rem;
    grid-area: body;
    line-height: 1.4375rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 .75rem 2rem;
    transition: all .3s ease-out
}

@media only screen and (min-width:120em) {
    .prog-item__body {
        width: 41.75rem
    }
}

.js-accordeon-shown .prog-item__body {
    max-height: var(--item-height, 2000px);
    opacity: 1
}

@media only screen and (min-width:48em) {
    .js-accordeon-shown .prog-item__body {
        border-radius: 0 0 32px 32px
    }
}

@media only screen and (min-width:120em) {
    .js-accordeon-shown .prog-item__body {
        border-radius: 0 32px 32px 0;
        padding: 4.8125rem 2rem 2rem 0
    }
}

.prog-item__body>*+* {
    margin-top: .5em
}

@media only screen and (min-width:48em) {
    .prog-item__body {
        font-size: 1.25rem;
        line-height: 1.33;
        padding: 0 2rem 2rem
    }
}

@media only screen and (min-width:120em) {
    .prog-item__body {
        box-shadow: unset;
        padding: 2.8125rem 2rem 2rem
    }
}

.prog-item__body li {
    padding-left: 1.25em;
    position: relative
}

.prog-item__body li+li {
    margin-top: .125rem
}

.prog-item__body li:before {
    background-color: currentColor;
    border-radius: 5px;
    content: "";
    display: block;
    height: .3125rem;
    left: 0;
    position: absolute;
    top: .55em;
    width: .3125rem
}

.show-btn {
    align-items: center;
    background: none;
    display: inline-flex;
    justify-content: center
}

.show-btn span {
    margin-left: .625rem;
    padding-bottom: .125rem
}

@media only screen and (max-width:767px) {
    .show-btn span {
        display: none !important
    }
}

.show-btn__icon {
    --icon-size: 1.25rem;
    --icon-color: var(--clr-basic-dark);
    height: var(--icon-size);
    position: relative;
    width: var(--icon-size)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .show-btn__icon:hover {
        --icon-color: var(--clr-hover-dark)
    }
}

.show-btn__icon:after,
.show-btn__icon:before {
    background-color: var(--icon-color);
    content: "";
    display: block;
    height: .1875rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50%;
    transition: all .25s ease;
    width: var(--icon-size)
}

.show-btn__icon:after {
    transform: translate(-50%, -50%) rotate(90deg)
}

.show-btn .less-str {
    display: none
}

.js-accordeon-shown .show-btn .less-str {
    display: block
}

.js-accordeon-shown .show-btn .more-str {
    display: none
}

.js-accordeon-shown .show-btn .show-btn__icon:after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .show-btn:hover span {
        color: var(--clr-hover-dark)
    }
}

.lector {
    background: var(--clr-accent);
    color: var(--clr-fixed-dark)
}

@media only screen and (min-width:120em) {
    .lector__wrapper {
        display: grid;
        grid-template-columns: 1fr 78.75rem
    }
}

.lector__info,
.lector__title {
    margin-bottom: 2.5rem
}

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

@media only screen and (min-width:80em) {
    .lector__info {
        flex-direction: row-reverse
    }
}

.lector__info--img {
    border-radius: 20px;
    height: 19.5rem;
    object-fit: cover;
    object-position: var(--lector-image-position, top);
    width: 100%
}

@media only screen and (min-width:48em) {
    .lector__info--img {
        border-radius: 32px;
        height: 34.4375rem
    }
}

@media only screen and (min-width:80em) {
    .lector__info--img {
        height: 23.625rem;
        width: 29.5625rem
    }
}

.lector__info--box {
    background: var(--clr-fixed-light);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1rem
}

@media only screen and (min-width:48em) {
    .lector__info--box {
        border-radius: 2rem;
        min-height: 23.625rem;
        padding: 2rem;
        width: -webkit-fill-available
    }
}

@media only screen and (min-width:80em) {
    .lector__info--box {
        min-height: unset
    }
}

@media only screen and (min-width:120em) {
    .lector__info--box {
        padding: 2.5rem
    }
}

.lector__info--name {
    margin-bottom: 1rem
}

@media only screen and (min-width:48em) {
    .lector__info--name {
        margin-bottom: 2rem
    }
}

.lector__info--description {
    margin-bottom: 1rem
}

@media only screen and (min-width:48em) {
    .lector__info--description {
        margin-bottom: 2rem
    }
}

.lector__info--profile {
    align-items: center;
    background: var(--clr-fixed-light);
    border-radius: 100px;
    display: flex;
    gap: .75rem;
    margin-bottom: 2.5rem;
    width: fit-content
}

.lector__info--profile span {
    margin-right: 1rem
}

@media only screen and (hover:hover) and (pointer:fine) {
    .lector__info--profile svg:hover circle {
        fill: var(--clr-fixed-dark)
    }

    .lector__info--profile svg:hover path {
        fill: var(--clr-fixed-light)
    }
}

.lector__info--companies {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, 1fr)
}

@media only screen and (min-width:48em) {
    .lector__info--companies {
        grid-template-columns: repeat(5, 1fr);
        margin-top: auto
    }
}

@media only screen and (min-width:80em) {
    .lector__info--companies {
        grid-template-columns: repeat(8, 1fr)
    }
}

.lector__info--companies li {
    align-items: center;
    display: flex;
    justify-content: center
}

.lector__info--companies svg path {
    fill: var(--clr-fixed-dark)
}

.lector__points {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(1, 1fr)
}

@media only screen and (min-width:48em) {
    .lector__points {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width:80em) {
    .lector__points {
        grid-template-columns: repeat(12, 1fr)
    }
}

@media only screen and (min-width:120em) {
    .lector__points {
        grid-template-columns: repeat(2, 1fr)
    }
}

.lector__points--item {
    --icon-clr: var(--switch-color-lector-point-icon) var(--clr-fixed-light);
    --text-clr: var(--switch-color-lector-point-text) var(--clr-fixed-light);
    color: var(--text-clr, var(--clr-fixed-dark))
}

.lector__points--item svg {
    color: var(--icon-clr, var(--clr-fixed-dark))
}

@media only screen and (min-width:48em) {
    .lector__points--item {
        grid-column: span 2
    }

    .lector__points--item:first-child:nth-last-child(3),
    .lector__points--item:first-child:nth-last-child(3)~* {
        grid-column: span 4
    }

    .lector__points--item svg {
        margin-bottom: .5rem
    }
}

@media only screen and (min-width:80em) {

    .lector__points--item:first-child:nth-last-child(3n+3),
    .lector__points--item:first-child:nth-last-child(3n+3)~* {
        grid-column: span 4
    }

    .lector__points--item:first-child:nth-last-child(4n+4),
    .lector__points--item:first-child:nth-last-child(4n+4)~* {
        grid-column: span 3
    }
}

@media only screen and (min-width:120em) {

    .lector__points--item:first-child:nth-last-child(3n+3),
    .lector__points--item:first-child:nth-last-child(3n+3)~* {
        grid-column: span 1
    }

    .lector__points--item:first-child:nth-last-child(4n+4),
    .lector__points--item:first-child:nth-last-child(4n+4)~* {
        grid-column: span 1;
        width: unset
    }
}

.order {
    --container-rectangle-top: 3.75rem;
    --container-rectangle-bottom: 5rem;
    background: var(--clr-opposite-soft-light)
}

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

@media only screen and (min-width:80em) {
    .order__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}

.order__info {
    background: var(--clr-opposite-light);
    border-radius: 20px;
    color: var(--clr-basic-dark);
    padding: 2rem .75rem 2.5rem
}

.order__info--title {
    margin-bottom: 2rem
}

@media only screen and (min-width:48em) {
    .order__info--title {
        margin-bottom: 1.5rem
    }
}

@media only screen and (min-width:80em) {
    .order__info--title {
        margin-bottom: 2rem
    }
}

@media only screen and (min-width:48em) {
    .order__info {
        border-radius: 32px;
        padding: 2.5rem 2rem
    }
}

@media only screen and (min-width:80em) {
    .order__info {
        padding: 2rem
    }
}

@media only screen and (min-width:120em) {
    .order__info {
        padding: 3.75rem
    }
}

.order__inner {
    background: var(--clr-accent);
    border-radius: 20px;
    box-shadow: 0 .1875rem .3125rem 0 rgba(0, 0, 0, .15), 0 .625rem .625rem 0 rgba(0, 0, 0, .13), 0 1.4375rem .875rem 0 rgba(0, 0, 0, .08), 0 2.5rem 1rem 0 rgba(0, 0, 0, .02), 0 3.9375rem 1.0625rem 0 transparent;
    padding: 2.5rem .75rem 3rem
}

@media only screen and (min-width:48em) {
    .order__inner {
        border-radius: 32px;
        padding: 3.75rem .75rem
    }
}

.order .form {
    color: var(--clr-fixed-dark);
    font-family: IBMPlexSans;
    position: relative
}

@media only screen and (min-width:48em) {
    .order .form {
        margin: auto;
        width: 22.875rem
    }
}

@media only screen and (min-width:120em) {
    .order .form {
        width: 29rem
    }
}

.order .form-hidden {
    display: none
}

.order .form__input:not(.form__input--checkbox) {
    margin-bottom: 1.5rem;
    position: relative;
    width: 100%
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order .form__input:not(.form__input--checkbox) {
        cursor: text
    }
}

.order .form__input:not(.form__input--checkbox) input:-webkit-autofill,
.order .form__input:not(.form__input--checkbox) input:-webkit-autofill:active,
.order .form__input:not(.form__input--checkbox) input:-webkit-autofill:focus,
.order .form__input:not(.form__input--checkbox) input:-webkit-autofill:hover {
    box-shadow: 0 0 0 30px var(--clr-fixed-light) inset !important;
    -webkit-box-shadow: 0 0 0 30px var(--clr-fixed-light) inset !important;
    transition: background-color 0s linear 1000s !important
}

.order .form__input:not(.form__input--checkbox) .request-input {
    -webkit-text-fill-color: var(--clr-fixed-dark) !important;
    background: var(--clr-fixed-light);
    border: 1px solid var(--clr-fixed-light);
    border-radius: 100px;
    font-size: 1rem;
    height: 2.75rem;
    padding-inline: 1rem;
    width: 100%
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order .form__input:not(.form__input--checkbox) .request-input:hover {
        border-color: var(--clr-fixed-soft-light)
    }
}

.order .form__input:not(.form__input--checkbox) .request-input:focus {
    background: var(--clr-fixed-soft-light);
    border-color: var(--clr-fixed-soft-light)
}

.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown)::placeholder {
    /*opacity: 0*/
}

.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):-webkit-autofill+.form__label,
.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):-webkit-autofill:focus+.form__label,
.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):-webkit-autofill:hover+.form__label,
.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):focus+.form__label,
.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):focus-within+.form__label,
.order .form__input:not(.form__input--checkbox) .request-input:not(.js-country-shown):not(:placeholder-shown)+.form__label {
    /*transform: scale(0)*/
}

.order .form__input:not(.form__input--checkbox).filled .form__label {
    /*transform: scale(0)*/
}

.order .form__label {
    bottom: .75rem;
    color: var(--clr-fixed-dark);
    left: 1rem;
    pointer-events: none;
    position: absolute;
    transform-origin: left;
    transition: all .2s ease
}

.with-dial-code .order .form__label {
    display: none
}

.order .form__error {
    color: var(--clr-fixed-dark);
    font-size: .625rem;
    font-weight: 400;
    line-height: 120%;
    margin-left: .5rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: right;
    top: 50%;
    transform: translateY(-20%);
    transition: all .2s ease
}

.order .form__action {
    margin-top: 1.5rem;
    padding: 0 var(--summary-size)
}

.order .form__action .btn,
.order .form__action .btn__black,
.order .form__action .btn__brilliant-azure,
.order .form__action .btn__caribbean-green,
.order .form__action .btn__fire-opal,
.order .form__action .btn__hot-pink,
.order .form__action .btn__lavender,
.order .form__action .btn__princeton-orange,
.order .form__action .btn__white {
    height: 2.5rem;
    width: 100%
}

.order .form__disclaimer {
    margin-top: 1.5rem
}

.order .form__disclaimer a {
    text-decoration: underline
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order .form__disclaimer a:hover {
        text-decoration: unset
    }
}

.order .error-input input:not(.form__input--checkbox).request-input {
    background: var(--clr-err-fill);
    border-color: var(--clr-err-stroke)
}

.order .error-input .form__error {
    opacity: 1;
    transform: translateY(24px)
}

.order .error-input.form__input--checkbox .form__input-label:before {
    background: var(--clr-err-fill);
    border-color: var(--clr-err-stroke)
}

.order .error-input.form__input--checkbox .form__error {
    display: block
}

.order .iti {
    color: var(--clr-fixed-dark);
    font-size: 1rem;
    font-weight: 400;
    line-height: 140%;
    width: 100%
}

.order .iti__country-list {
    -ms-overflow-style: none;
    background: var(--clr-fixed-light) !important;
    color: var(--clr-fixed-dark) !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    width: var(--full-input-width)
}

.order .iti__country-list::-webkit-scrollbar {
    display: none
}

@media only screen and (min-width:48em) {
    .order .iti__country-list {
        border: none;
        margin-top: 1.75rem
    }
}

.order .iti__selected-flag {
    background-color: transparent !important;
    padding-left: 1rem
}

.order .iti__selected-dial-code {
    font-size: 1rem
}

.order .iti__country-list {
    scroll-behavior: unset
}

.order .iti__arrow {
    border: unset;
    content: url("data:image/svg+xml; utf8, %3Csvg fill=%27none%27 height=%278%27 viewBox=%270 0 12 8%27 width=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27%3E %3Cpath clip-rule=%27evenodd%27 d=%27M0 7.17065L1.90074e-08 5.57672C1.90074e-08 5.57672 3.36663 3.30675 5.33171 6.26246e-06L5.33463 6.2625e-06L6.66537 6.27837e-06L6.66829 6.2784e-06C8.63337 3.30675 12 5.57672 12 5.57672L12 7.17065C12 7.17065 8.09024 5.57672 7.13639 4.74516L6.66537 4.74516L5.33463 4.74516L4.86361 4.74516C3.90976 5.57672 0 7.17065 0 7.17065Z%27 fill=%27%23101010%27 fill-rule=%27evenodd%27%3E%3C/path%3E %3C/svg%3E");
    height: unset;
    transform: rotate(180deg);
    width: unset
}

.order .iti__arrow--up {
    transform: rotate(1turn)
}

.order .form__input--checkbox {
    position: relative
}

.order .form__input--checkbox:first-child {
    margin-bottom: .5rem;
    margin-top: 1.5rem
}

.order .form__input--checkbox input[type=checkbox] {
    display: none
}

.order .form__input--checkbox input[type=checkbox]:checked+label .form__input-label:after {
    opacity: 1
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order .form__input--checkbox input[type=checkbox]:hover+label .form__input-label:before {
        border-color: var(--clr-fixed-soft-light)
    }
}

.order .form__input--checkbox .form__input-label {
    display: inline-block;
    font-size: .875rem;
    padding-left: 2.125rem;
    position: relative
}

.order .form__input--checkbox .form__input-label:after,
.order .form__input--checkbox .form__input-label:before {
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 50%
}

.order .form__input--checkbox .form__input-label:before {
    background-color: var(--clr-fixed-light);
    border: 2px solid var(--clr-fixed-light);
    border-radius: 100px;
    height: 1.375rem;
    top: 0;
    width: 1.375rem
}

.order .form__input--checkbox .form__input-label:after {
    border: solid var(--clr-fixed-dark);
    border-radius: 1px;
    border-width: 0 3px 3px 0;
    height: .6875rem;
    opacity: 0;
    pointer-events: none;
    top: 0;
    transform: translate(110%, 40%) rotate(45deg);
    width: .4375rem
}

.order .form__input--checkbox .form__input-label>a {
    color: inherit;
    text-decoration: underline
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order .form__input--checkbox .form__input-label>a:hover {
        text-decoration: unset
    }
}

.order .form__input--checkbox .form__error {
    display: none;
    position: relative;
    text-align: start;
    transform: unset
}

.order .btn--submit {
    padding: unset;
    position: relative
}

.order .btn--submit:disabled {
    color: transparent;
    pointer-events: none
}

.order .btn--submit:disabled>span {
    opacity: 0
}

.order .btn--submit:disabled .btn-loader {
    opacity: 1
}

.order .btn-loader {
    display: inline-block;
    height: 5rem;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5rem
}

.order .btn-loader span {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--color-order-spiner, currentColor);
    border-radius: 50%;
    height: .8125rem;
    position: absolute;
    top: 2.0625rem;
    width: .8125rem
}

.order .btn-loader span:first-child {
    animation: btn-loader-1 .6s infinite;
    left: .5rem
}

.order .btn-loader span:nth-child(2) {
    animation: btn-loader-2 .6s infinite;
    left: .5rem
}

.order .btn-loader span:nth-child(3) {
    animation: btn-loader-2 .6s infinite;
    left: 2rem
}

.order .btn-loader span:nth-child(4) {
    animation: btn-loader-3 .6s infinite;
    left: 3.5rem
}

@keyframes btn-loader-1 {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@keyframes btn-loader-3 {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

@keyframes btn-loader-2 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(24px)
    }
}

.iti__country-list {
    color: var(--clr-fixed-dark) !important
}

.partners {
    --gap: 0.5rem;
    background: var(--clr-basic-soft-light)
}

@media only screen and (min-width:80em) {
    .partners.title-to-the-left .partners__wrapper {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: 1fr 60rem
    }
}

@media only screen and (min-width:120em) {
    .partners.title-to-the-left .partners__wrapper {
        grid-template-columns: 1fr 78.75rem
    }
}

@media only screen and (min-width:80em) {
    .partners.title-to-the-left .partners__list {
        justify-content: end;
        min-width: unset
    }
}

.partners__title {
    color: var(--clr-basic-dark);
    margin-bottom: 2.5rem
}

.partners__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: center;
    min-width: 100%
}

@media only screen and (min-width:48em) {
    .partners__list {
        gap: .5rem
    }
}

@media only screen and (min-width:80em) {
    .partners__list {
        justify-content: start
    }
}

.partners__list--item {
    align-items: center;
    background: var(--clr-basic-light);
    border-radius: 16px;
    color: var(--clr-basic-dark);
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    font-weight: 700;
    gap: .5rem;
    height: 3.5rem;
    justify-content: center;
    padding: 1.125rem 1.875rem;
    width: 7.875rem
}

.partners__list--item svg path {
    fill: var(--clr-basic-dark)
}

.partners-slider--item {
    align-items: center;
    background: var(--clr-basic-light);
    border-radius: 16px;
    display: flex;
    height: 3.5rem;
    justify-content: center;
    width: 7.875rem
}

.partners-slider--item svg {
    padding: 1.125rem 1.875rem
}

.partners-slider--item svg path {
    fill: var(--clr-basic-dark)
}

.partners-slider--pagination {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: 2.5rem
}

.partners-slider--pagination .swiper-pagination-bullet {
    background: var(--clr-basic-light);
    border-radius: 10px;
    font-size: .75rem;
    height: .5625rem;
    line-height: 1.25rem;
    opacity: 1;
    text-align: center;
    width: .5625rem
}

.partners-slider--pagination .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark);
    width: 1.8125rem
}

.partners-slider__actions {
    margin-top: 2.5rem
}

@media only screen and (min-width:48em) {
    .partners-slider__actions {
        align-items: flex-start;
        display: flex;
        justify-content: space-between
    }
}

.partners-slider__button {
    cursor: pointer;
    display: flex;
    gap: 1rem
}

.partners-slider__button svg {
    fill: var(--clr-basic-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .partners-slider__button svg:hover {
        fill: var(--clr-hover-dark)
    }
}

@media only screen and (max-width:767px) {
    .partners-slider__button {
        display: none
    }
}

.partners__line {
    display: flex;
    flex-shrink: 0;
    gap: var(--gap);
    justify-content: space-around;
    min-width: 100%
}

.partners__line.move-to-left,
.partners__line.move-to-right {
    animation: scroll 40s linear infinite
}

.partners__line.move-to-right {
    animation-direction: reverse
}

.partners__list--wrapper {
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    position: relative;
    user-select: none
}

@media only screen and (min-width:112.5em) {
    .partners.title-to-the-left .partners__wrapper {
        display: grid;
        grid-template-columns: 1fr 1260px
    }
}

.partners.colored .partners__list--item {
    background: var(--clr-accent)
}

.partners.updated .partners__list {
    gap: 1rem;
    justify-content: flex-start
}

@media only screen and (min-width:80em) {
    .partners.updated .partners__list {
        gap: .75rem
    }
}

@media only screen and (min-width:112.5em) {
    .partners.updated .partners__list {
        flex-wrap: wrap;
        height: fit-content;
        justify-content: flex-end
    }
}

.partners.updated .partners__list--item {
    border-radius: 6.25rem;
    height: fit-content;
    padding: .5625rem 1.0625rem;
    transition: .3s;
    width: fit-content
}

@media only screen and (hover:hover) and (pointer:fine) {
    .partners.updated .partners__list--item:hover:has(a) {
        background: var(--clr-hover-light)
    }
}

@media only screen and (min-width:112.5em) {
    .partners.updated .container {
        display: grid;
        grid-template-columns: 1fr 1260px
    }
}

@media only screen and (min-width:120em) {
    .partners.updated .partners__title {
        margin-bottom: 0
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-100% - var(--gap)))
    }
}

@media only screen and (hover:hover) and (pointer:fine) {
    body:has([data-theme=dark]) .partners.updated .partners__list--item:hover:has(a) {
        background: var(--clr-hover-dark)
    }
}

.speakers {
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:120em) {
    .speakers__wrapper {
        display: grid;
        grid-template-columns: 1fr 78.75rem
    }
}

.speakers__title {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:48em) {
    .speakers__title {
        font-size: 3.5rem
    }
}

@media only screen and (min-width:120em) {
    .speakers__title {
        margin-bottom: unset
    }
}

.speakers-list {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

@media only screen and (min-width:80em) {
    .speakers-list {
        column-count: 2;
        display: block;
        gap: 1.25rem
    }
}

.speakers-list__item {
    display: flex
}

.speakers-list__item.reverse {
    flex-direction: row-reverse
}

@media only screen and (min-width:80em) {
    .speakers-list__item.row-gap {
        padding-bottom: 1.25rem
    }
}

.speakers-list__item--company {
    font-size: .875rem
}

.speakers-list__item--image {
    height: auto;
    min-height: 11.375rem
}

@media only screen and (min-width:23.4375em) {
    .speakers-list__item--image {
        min-width: 9.5rem;
        width: 9.5rem
    }
}

@media only screen and (min-width:48em) {
    .speakers-list__item--image {
        height: 9.5rem;
        min-height: 9.5rem;
        min-width: 13.875rem;
        width: 13.875rem
    }
}

.speakers-list__item--image img {
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.speakers-list__item--content-box {
    background: var(--clr-opposite-light);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: .75rem;
    width: 100%
}

@media only screen and (min-width:48em) {
    .speakers-list__item--content-box {
        padding: 1rem
    }
}

.speakers-list__item--title {
    margin-bottom: .5rem
}

.speakers-list__item--logos {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, 74px);
    margin-top: auto
}

@media only screen and (min-width:48em) {
    .speakers-list__item--logos {
        grid-template-columns: repeat(4, 74px)
    }
}

.speakers-list__item--logos li {
    height: 1.5rem;
    width: 4.625rem
}

.speakers-list__item--logos li img,
.speakers-list__item--logos li svg {
    height: 100%;
    width: 100%
}

.schedule {
    --container-rectangle-bottom: 4rem;
    background: var(--clr-accent);
    color: var(--clr-fixed-dark)
}

@media only screen and (min-width:48em) {
    .schedule {
        --container-rectangle-top: 3.75rem;
        --container-rectangle-bottom: 5rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__wrapper {
        display: grid;
        grid-template-areas: "title content" "cards cards"
    }
}

@media only screen and (min-width:120em) {
    .schedule__wrapper {
        grid-template-areas: "title content" ". cards";
        grid-template-columns: 1fr 78.75rem
    }
}

.schedule__title {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:48em) {
    .schedule__title {
        font-size: 3.5rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__title {
        grid-area: title;
        margin-right: 5rem
    }

    .schedule__content {
        grid-area: content
    }
}

.schedule__description--text {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:48em) {
    .schedule__description--text {
        font-size: 1.125rem
    }
}

.schedule__description--list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem
}

.schedule__description--list-item {
    padding-left: 1.1875rem;
    position: relative
}

.schedule__description--list-item:before {
    background: currentColor;
    border-radius: 20%;
    content: "";
    height: .1875rem;
    left: .4375rem;
    position: absolute;
    top: .375rem;
    width: .1875rem
}

@media only screen and (min-width:48em) {
    .schedule__description--list-item {
        font-size: 1.125rem
    }
}

.schedule__cards-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem
}

@media only screen and (min-width:80em) {
    .schedule__cards-list {
        gap: 2rem;
        grid-area: cards
    }
}

.schedule__card--labels {
    display: flex;
    flex-direction: row
}

.schedule__card--labels-text,
.schedule__card--labels-time {
    align-items: center;
    background: var(--clr-fixed-soft-dark);
    border-radius: 100px;
    color: var(--clr-fixed-light);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 9.375rem;
    padding: .625rem 1.25rem;
    width: fit-content
}

@media only screen and (min-width:48em) {

    .schedule__card--labels-text,
    .schedule__card--labels-time {
        font-size: 1.125rem;
        min-width: 10.25rem
    }

    .schedule__card--labels-text span,
    .schedule__card--labels-time span {
        font-size: inherit
    }
}

.schedule__card--item {
    background: var(--clr-fixed-light);
    border-radius: 20px;
    padding: 1.5rem .75rem .75rem
}

@media only screen and (min-width:48em) {
    .schedule__card--item {
        border-radius: 32px;
        padding: 1.5rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__card--item {
        display: flex;
        flex-direction: row;
        gap: 2.5rem
    }
}

.schedule__card--item-title {
    margin-bottom: 1.5rem
}

@media only screen and (min-width:48em) {
    .schedule__card--item-title {
        font-size: 1.5rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__card--item-title {
        margin-bottom: unset
    }
}

@media only screen and (min-width:48em) {
    .schedule__card--item.only-one-lector {
        display: flex;
        flex-direction: row;
        gap: 2.5rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__card--item.only-one-lector {
        align-items: center
    }
}

@media only screen and (min-width:48em) {
    .schedule__card--item.only-one-lector .schedule__card--item-title {
        margin-bottom: unset;
        width: 100%
    }
}

.schedule__lectors {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

@media only screen and (min-width:48em) {
    .schedule__lectors {
        flex-flow: row wrap;
        gap: 1rem
    }
}

@media only screen and (min-width:80em) {
    .schedule__lectors {
        align-items: center;
        flex: auto 0 0;
        justify-content: end;
        max-width: 57.125rem
    }
}

.schedule__lectors--item {
    display: flex;
    flex-direction: row;
    gap: .75rem
}

@media only screen and (max-width:767px) {
    .schedule__lectors--item:only-child() {
        padding-block: .375rem
    }
}

@media only screen and (min-width:48em) {
    .schedule__lectors--item:only-child() {
        align-items: center
    }

    .schedule__lectors--item {
        gap: 1rem;
        width: 18.375rem
    }
}

.schedule__lectors--item-content {
    width: 100%
}

.schedule__lectors--item-image {
    height: 3.75rem;
    min-width: 5.5rem;
    width: 5.5rem
}

@media only screen and (min-width:48em) {
    .schedule__lectors--item-image {
        height: 4.5rem;
        min-width: 6.625rem;
        width: 6.625rem
    }
}

.schedule__lectors--item-image img {
    border-radius: 12px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.schedule__lectors--item-name {
    margin-bottom: .25rem
}

@media only screen and (min-width:48em) {
    .schedule__lectors--item-name {
        font-size: 1rem
    }
}

.registration {
    --container-rectangle-bottom: 3rem;
    background: var(--clr-opposite-soft-light);
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:48em) {
    .registration {
        --container-rectangle-top: 3.75rem;
        --container-rectangle-bottom: 5rem
    }
}

.registration__image {
    height: 11.5rem
}

@media only screen and (min-width:48em) {
    .registration__image {
        height: 17.625rem
    }
}

.registration__image picture {
    height: 100%;
    width: 100%
}

.registration__image img {
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.registration__form {
    background: var(--clr-opposite-light);
    border-radius: 20px;
    padding: 2rem .75rem
}

@media only screen and (min-width:48em) {
    .registration__form {
        align-items: flex-start;
        align-self: stretch;
        border-radius: 32px;
        display: flex;
        gap: 2rem;
        padding: 2.5rem 2rem
    }
}

@media only screen and (min-width:80em) {
    .registration__form {
        flex-direction: column
    }
}

@media only screen and (min-width:120em) {
    .registration__form {
        align-items: center;
        height: 100%
    }
}

.registration__form--actions {
    display: flex;
    flex-direction: column
}

@media only screen and (min-width:48em) {
    .registration__form--actions {
        flex-direction: column-reverse;
        gap: 2rem
    }
}

@media only screen and (min-width:80em) {
    .registration__form--actions {
        gap: 2.5rem;
        width: 100%
    }
}

@media only screen and (min-width:48em) {
    .registration__form--description {
        font-size: 1.125rem;
        max-width: 17rem
    }
}

@media only screen and (min-width:80em) {
    .registration__form--description {
        line-height: 123%;
        width: 100%
    }
}

.registration__form--btn {
    padding-block: 2rem
}

@media only screen and (min-width:48em) {
    .registration__form--btn {
        padding: unset
    }
}

@media only screen and (min-width:80em) {
    .registration__form--btn {
        height: 2.5rem
    }
}

.registration__form--btn .btn,
.registration__form--btn .btn__black,
.registration__form--btn .btn__brilliant-azure,
.registration__form--btn .btn__caribbean-green,
.registration__form--btn .btn__fire-opal,
.registration__form--btn .btn__hot-pink,
.registration__form--btn .btn__lavender,
.registration__form--btn .btn__princeton-orange,
.registration__form--btn .btn__white {
    display: block;
    text-align: center
}

@media only screen and (min-width:80em) {

    .registration__form--btn .btn,
    .registration__form--btn .btn__black,
    .registration__form--btn .btn__brilliant-azure,
    .registration__form--btn .btn__caribbean-green,
    .registration__form--btn .btn__fire-opal,
    .registration__form--btn .btn__hot-pink,
    .registration__form--btn .btn__lavender,
    .registration__form--btn .btn__princeton-orange,
    .registration__form--btn .btn__white {
        height: 100%;
        line-height: 120%
    }
}

.registration__form--disclaimer a {
    text-decoration: underline
}

@media only screen and (hover:hover) and (pointer:fine) {
    .registration__form--disclaimer a:hover {
        text-decoration: unset
    }
}

.registration__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

@media only screen and (min-width:80em) {
    .registration[data-with-image=true] .registration__wrapper {
        flex-direction: row;
        gap: unset;
        padding-left: 11.5rem;
        position: relative
    }

    .registration[data-with-image=true] .registration__image {
        height: 100%;
        left: 0;
        position: absolute;
        width: 11.5rem
    }

    .registration[data-with-image=true] .registration__info {
        background: var(--clr-opposite-light);
        border-radius: 32px;
        max-width: 34.4375rem;
        padding: 2rem;
        width: 100%
    }

    .registration[data-with-image=true] .registration__info h2 {
        line-height: 100%
    }

    .registration[data-with-image=true] .registration__form--description {
        min-width: 30.4375rem
    }

    .registration[data-with-image=true] .registration__form {
        height: 100%;
        min-height: 18rem
    }
}

@media only screen and (min-width:85.375em) {
    .registration[data-with-image=true] .registration__info {
        max-width: unset;
        min-width: 34.4375rem
    }
}

@media only screen and (min-width:120em) {
    .registration[data-with-image=true] .registration__image {
        height: 18rem;
        width: 13.5rem
    }

    .registration[data-with-image=true] .registration__wrapper {
        min-height: 18rem;
        padding-left: 13.5rem
    }

    .registration[data-with-image=true] .registration__form {
        flex-direction: row;
        padding: 2.5rem
    }

    .registration[data-with-image=true] .registration__info {
        max-width: 48.25rem;
        min-width: 48.25rem
    }

    .registration[data-with-image=true] .registration__form--description {
        margin-bottom: 2.5rem;
        max-width: 21.25rem
    }

    .registration[data-with-image=true] .registration__form--actions {
        max-width: 20rem
    }

    .registration[data-with-image=true] .registration__form--description {
        min-width: unset
    }
}

@media only screen and (min-width:80em) {
    .registration[data-with-image=false] .form {
        flex-direction: column
    }

    .registration[data-with-image=false] .registration__wrapper {
        align-items: flex-start;
        flex-direction: row;
        gap: 2.5rem;
        justify-content: center
    }

    .registration[data-with-image=false] .registration__info {
        max-width: 35.25rem;
        width: 100%
    }

    .registration[data-with-image=false] .registration__form {
        flex-direction: row;
        width: 42.625rem
    }

    .registration[data-with-image=false] .registration__form--description {
        max-width: 16.625rem
    }
}

@media only screen and (min-width:85.375em) {
    .registration[data-with-image=false] .registration__info {
        max-width: unset;
        min-width: 16.625rem
    }
}

@media only screen and (min-width:120em) {
    .registration[data-with-image=false] .registration__form--description {
        max-width: 28rem
    }

    .registration[data-with-image=false] .registration__info {
        max-width: 50rem
    }

    .registration[data-with-image=false] .registration__wrapper {
        gap: 5rem
    }

    .registration[data-with-image=false] .registration__form {
        align-items: start;
        padding: 2.5rem
    }

    .registration[data-with-image=false] .registration__form--actions {
        max-width: 20rem
    }

    .registration[data-with-image=false] .registration__form {
        width: 55rem
    }
}

.order.v2 {
    background-color: var(--clr-accent)
}

.order.v2 .container {
    padding-top: 3rem
}

@media only screen and (min-width:768px) {
    .order.v2 .container {
        padding-top: 3.75rem
    }
}

@media only screen and (min-width:1280px) {
    .order.v2 .order__wrapper {
        gap: 3.75rem;
        grid-template-columns: minmax(auto, 36.4375rem) minmax(auto, 40.1875rem)
    }
}

@media only screen and (min-width:1600px) {
    .order.v2 .order__wrapper {
        gap: 5rem;
        grid-template-columns: 1fr 1fr
    }
}

@media only screen and (min-width:1920px) {
    .order.v2 .order__wrapper {
        gap: 5rem;
        grid-template-columns: minmax(auto, 50rem) minmax(auto, 55rem)
    }
}

.order.v2 .order__info {
    background-color: var(--clr-accent)
}

@media only screen and (min-width:768px) {
    .order.v2 .order__info {
        padding: 1.25rem 1.25rem 3.75rem 2rem
    }
}

@media only screen and (min-width:1280px) {
    .order.v2 .order__info {
        padding: 5rem 0 0
    }
}

.order.v2 .order__info--title {
    font-size: 2.75rem
}

.order.v2 .order__info--descripton,
.order.v2 .order__info--title {
    color: var(--clr-fixed-dark)
}

.order.v2 .order__info__labels {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem
}

.order.v2 .order__info__labels span {
    background-color: var(--clr-opposite-light);
    border-radius: 6.25rem;
    color: var(--clr-basic-dark);
    font-weight: 700;
    padding: .5rem 1rem;
    width: fit-content
}

.order.v2 .order__inner {
    background-color: var(--clr-basic-soft-light);
    box-shadow: none
}

.order.v2 .order__inner__title {
    color: var(--clr-basic-dark);
    font-family: VinMonoPro, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 2.5rem;
    text-transform: uppercase;
    width: fit-content
}

.order.v2 .order__inner .form__action .btn,
.order.v2 .order__inner .form__action .btn__black,
.order.v2 .order__inner .form__action .btn__brilliant-azure,
.order.v2 .order__inner .form__action .btn__caribbean-green,
.order.v2 .order__inner .form__action .btn__fire-opal,
.order.v2 .order__inner .form__action .btn__hot-pink,
.order.v2 .order__inner .form__action .btn__lavender,
.order.v2 .order__inner .form__action .btn__princeton-orange,
.order.v2 .order__inner .form__action .btn__white {
    background-color: var(--clr-accent)
}

@media only screen and (hover:hover) and (pointer:fine) {

    .order.v2 .order__inner .form__action .btn:hover,
    .order.v2 .order__inner .form__action .btn__black:hover,
    .order.v2 .order__inner .form__action .btn__brilliant-azure:hover,
    .order.v2 .order__inner .form__action .btn__caribbean-green:hover,
    .order.v2 .order__inner .form__action .btn__fire-opal:hover,
    .order.v2 .order__inner .form__action .btn__hot-pink:hover,
    .order.v2 .order__inner .form__action .btn__lavender:hover,
    .order.v2 .order__inner .form__action .btn__princeton-orange:hover,
    .order.v2 .order__inner .form__action .btn__white:hover {
        opacity: .9
    }
}

.order.v2 .disabled {
    display: none
}

.order.v2 .form__input:not(.form__input--checkbox) .request-input:focus {
    background-color: #fff;
    border-color: #fff
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order.v2 input[type=checkbox]:hover+label .form__input-label:before {
        border-color: var(--clr-fixed-dark)
    }
}

.order.v2 .checkbox__wrapper .form__input-label {
    color: var(--clr-basic-dark)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order.v2 .checkbox__wrapper .form__input-label:before:hover {
        border-color: var(--clr-relative-dark)
    }
}

.order.v2 .form__error {
    color: var(--clr-err-stroke)
}

.order.v2 .policy__text {
    color: var(--clr-basic-dark);
    display: block;
    margin-top: 1.5rem
}

.order.v2 .policy__text a {
    display: inline-block;
    font-family: IBMPlexSans;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    position: relative
}

.order.v2 .policy__text a:after {
    background-color: #000;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: height .3s;
    width: 100%
}

@media only screen and (hover:hover) and (pointer:fine) {
    .order.v2 .policy__text a:hover:after {
        width: 0
    }
}

.faq {
    --faq-btn-box-shadow: 0 63px 17px 0 transparent, 0 40px 16px 0 rgba(0, 0, 0, .02), 0 23px 14px 0 rgba(0, 0, 0, .08), 0 10px 10px 0 rgba(0, 0, 0, .13), 0 3px 5px 0 rgba(0, 0, 0, .15);
    background-color: var(--faq-background-color)
}

@media only screen and (max-width:767px) {
    .faq .container {
        padding-bottom: 4rem
    }
}

.faq__wrapper {
    color: var(--faq-txt-color);
    display: grid;
    grid-template-columns: 1fr;
    justify-content: unset
}

@media only screen and (min-width:768px) {
    .faq__wrapper {
        grid-template-columns: 1fr
    }
}

@media only screen and (min-width:1280px) {
    .faq__wrapper {
        display: grid;
        grid-template-columns: auto minmax(auto, 53.5625rem);
        justify-content: space-between
    }
}

@media only screen and (min-width:1600px) {
    .faq__wrapper {
        display: grid;
        grid-template-columns: auto minmax(auto, 78.75rem)
    }
}

.faq__content {
    margin-top: 2.5rem
}

@media only screen and (min-width:1280px) {
    .faq__content {
        margin-top: 0
    }
}

.faq__content__question {
    transition: margin-top .3s
}

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

.faq__content__question__group--text {
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .faq__content__question__group--text {
        font-size: 1.5rem
    }
}

.faq__content__question__group--btn {
    cursor: pointer;
    height: 2.5rem;
    min-height: 2.5rem;
    min-width: 2.5rem;
    position: relative;
    width: 2.5rem
}

.faq__content__question__group--btn:after,
.faq__content__question__group--btn:before {
    background-color: var(--faq-txt-color);
    content: "";
    display: block;
    height: 2.5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color .3s;
    width: 1.25rem
}

.faq__content__question__group--btn:before {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .3s
}

@media only screen and (hover:hover) and (pointer:fine) {

    .faq__content__question__group--btn:hover:after,
    .faq__content__question__group--btn:hover:before {
        background-color: var(--faq-btn-hover-bg-color)
    }
}

.faq__content__question .hidden-txt {
    display: none;
    font-family: IBMPlexSans, sans-serif;
    font-size: 1rem;
    line-height: 140%;
    margin-top: .5rem
}

@media only screen and (min-width:768px) {
    .faq__content__question .hidden-txt {
        font-size: 1.125rem;
        margin-top: 1rem
    }
}

.faq__content__question:not(:first-child) {
    margin-top: 1.5rem
}

@media only screen and (min-width:768px) {
    .faq__content__question:not(:first-child) {
        margin-top: 1rem
    }
}

.faq__content__question.active .hidden-txt {
    display: block
}

.faq__content__question.active [data-more-btn]:before {
    transform: translate(-50%, -50%) rotate(0deg)
}

.faq__content__more {
    display: none
}

.faq__content__more.active {
    display: block
}

.faq__content__moreBtn {
    background-color: var(--faq-btn-bg-color);
    border-radius: 4.6875rem;
    color: var(--faq-btn-txt-color);
    font-size: 1.125rem;
    line-height: 1;
    margin: 2.5rem auto 0;
    padding: .5625rem 2.5rem .4375rem;
    transition: .3s;
    width: 100%
}

@media only screen and (min-width:568px) {
    .faq__content__moreBtn {
        width: auto
    }
}

@media only screen and (min-width:768px) {
    .faq__content__moreBtn {
        margin: 2.5rem auto 0
    }
}

@media only screen and (min-width:1280px) {
    .faq__content__moreBtn {
        margin: 3rem 0 0
    }
}

.faq.show-more .faq__content__more {
    display: block
}

[data-theme=light]~.faq {
    --faq-background-color: var(--clr-fixed-soft-light);
    --faq-txt-color: var(--clr-fixed-dark);
    --faq-btn-txt-color: var(--clr-fixed-light);
    --faq-btn-bg-color: var(--clr-fixed-dark);
    --faq-btn-hover-bg-color: #000101
}

[data-theme=light]~.faq .faq__content__moreBtn {
    background-color: var(--clr-fixed-light);
    border-radius: 75px;
    box-shadow: var(--faq-btn-box-shadow);
    color: var(--clr-fixed-dark)
}

@media only screen and (min-width:768px) {
    [data-theme=light]~.faq .faq__content__moreBtn {
        background-color: var(--faq-btn-bg-color);
        box-shadow: unset;
        color: var(--faq-btn-txt-color)
    }
}

@media only screen and (min-width:768px) and (hover:hover) and (pointer:fine) {
    [data-theme=light]~.faq .faq__content__moreBtn:hover {
        background-color: var(--faq-btn-hover-bg-color)
    }
}

[data-theme=dark]~.faq {
    --faq-background-color: var(--clr-fixed-dark);
    --faq-txt-color: var(--clr-fixed-light);
    --faq-btn-txt-color: var(--clr-fixed-dark);
    --faq-btn-bg-color: var(--clr-fixed-light);
    --faq-btn-hover-bg-color: var(--clr-hover-light)
}

[data-theme=dark]~.faq .faq__content__moreBtn {
    background-color: var(--clr-fixed-soft-dark);
    box-shadow: var(--faq-btn-box-shadow);
    color: var(--clr-fixed-light)
}

@media only screen and (min-width:768px) {
    [data-theme=dark]~.faq .faq__content__moreBtn {
        background-color: var(--faq-btn-bg-color);
        box-shadow: unset;
        color: var(--faq-btn-txt-color)
    }
}

@media only screen and (min-width:768px) and (hover:hover) and (pointer:fine) {
    [data-theme=dark]~.faq .faq__content__moreBtn:hover {
        background-color: var(--faq-btn-hover-bg-color)
    }
}

.feedbacks {
    background-color: var(--clr-basic-soft-light)
}

.feedbacks__title {
    color: var(--clr-basic-dark);
    margin-bottom: 2.5rem
}

@media only screen and (min-width:1280px) {
    .feedbacks__title {
        grid-area: title
    }
}

@media only screen and (min-width:1600px) {
    .feedbacks__title {
        margin-bottom: 0
    }
}

.feedbacks .container {
    grid-column: main;
    padding-bottom: 3rem
}

@media only screen and (min-width:768px) {
    .feedbacks .container {
        padding-bottom: 3.75rem
    }
}

@media only screen and (min-width:1280px) {
    .feedbacks .container {
        padding-bottom: 5rem
    }
}

@media only screen and (min-width:1600px) {
    .feedbacks .container {
        padding-bottom: 3.75rem
    }
}

.feedbacks__wrapper {
    display: block
}

@media only screen and (min-width:1280px) {
    .feedbacks__wrapper {
        display: grid;
        grid-template-areas: "title socials" "slider slider";
        grid-template-columns: 1fr 25.125rem
    }
}

@media only screen and (min-width:1600px) {
    .feedbacks__wrapper {
        display: grid;
        grid-template-areas: "title slider" "socials slider" ". slider";
        grid-template-columns: 26.25rem 1fr;
        grid-template-rows: repeat(2, max-content)
    }
}

@media only screen and (min-width:1280px) {
    .feedbacks .feedbacks__items {
        grid-area: slider
    }
}

.feedbacks .feedbacks__items .swiper-wrapper {
    display: flex;
    gap: 0;
    height: 100%;
    justify-content: unset
}

@media only screen and (min-width:1600px) {
    .feedbacks .feedbacks__items .swiper-wrapper {
        display: grid;
        gap: 3.75rem 2.5rem;
        grid-template-columns: repeat(3, minmax(auto, 24.5625rem));
        height: auto;
        justify-content: flex-end
    }
}

.feedbacks .feedbacks__items__item__person {
    align-items: flex-start;
    color: var(--clr-basic-dark);
    display: flex;
    gap: 1rem
}

.feedbacks .feedbacks__items__item__person__photo {
    align-items: center;
    border-radius: 1rem;
    display: flex;
    height: 5rem;
    justify-content: center;
    min-height: 5rem;
    min-width: 5rem;
    overflow: hidden;
    width: 5rem
}

.feedbacks .feedbacks__items__item__person__photo.base-image {
    background-color: var(--clr-basic-light)
}

.feedbacks .feedbacks__items__item__person__photo img.base-image {
    height: 2.125rem;
    object-fit: contain;
    position: relative;
    width: 2.375rem;
    z-index: 1
}

.feedbacks .feedbacks__items__item__person__photo img.person-photo {
    height: 100%;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 2
}

.feedbacks .feedbacks__items__item__person__name {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 120%;
    margin-top: .5rem
}

.feedbacks .feedbacks__items__item__person__name a {
    border-bottom: 1px solid;
    text-transform: uppercase;
    transition: .2s
}

@media only screen and (hover:hover) and (pointer:fine) {
    .feedbacks .feedbacks__items__item__person__name a:hover {
        border-color: transparent;
        color: #000101
    }
}

.feedbacks .feedbacks__items__item__person__subtitle {
    font-family: IBMPlexSans, sans-serif;
    font-size: .875rem;
    line-height: 120%;
    margin-top: .25rem
}

.feedbacks .feedbacks__items__item__text {
    color: var(--clr-basic-dark);
    font-family: IBMPlexSans, sans-serif;
    font-size: 1rem;
    line-height: 140%;
    margin-top: 1.25rem
}

.feedbacks .feedbacks-slider {
    display: block
}

.feedbacks .feedbacks-slider .swiper-slide {
    width: 21.75rem
}

@media only screen and (min-width:768px) {
    .feedbacks .feedbacks-slider .swiper-slide {
        width: 25.125rem
    }
}

@media only screen and (min-width:1600px) {
    .feedbacks .feedbacks-slider .swiper-slide {
        width: auto
    }
}

.feedbacks .feedbacks-slider .main__media-slider--actions {
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media only screen and (min-width:1600px) {
    .feedbacks .feedbacks-slider .main__media-slider--actions {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .feedbacks .feedbacks-slider .main__media-slider--button {
        display: flex
    }
}

.feedbacks .feedbacks-slider .main__media-slider--pagination {
    display: flex;
    margin-top: 0
}

@media only screen and (min-width:1600px) {
    .feedbacks .feedbacks-slider .main__media-slider--pagination {
        display: none
    }
}

.feedbacks__moreBtn {
    background-color: transparent;
    color: var(--clr-basic-dark);
    display: block;
    font-family: VinMonoPro, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 1.25rem 0 0 auto;
    position: relative;
    text-transform: uppercase;
    transition: all .3s;
    width: fit-content
}

@media only screen and (min-width:375px) {
    .feedbacks__moreBtn {
        margin: 1.25rem 0 0
    }
}

.feedbacks__moreBtn:after {
    background-color: var(--clr-basic-dark);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .3s;
    width: 100%
}

@media only screen and (hover:hover) and (pointer:fine) {
    .feedbacks__moreBtn:hover {
        color: var(--feedbacks-btn-hover-color)
    }

    .feedbacks__moreBtn:hover:after {
        background-color: var(--feedbacks-btn-hover-color)
    }
}

.feedbacks .swiper-button-next svg,
.feedbacks .swiper-button-next svg path,
.feedbacks .swiper-button-prev svg,
.feedbacks .swiper-button-prev svg path {
    fill: var(--clr-basic-dark);
    transition: .3s
}

@media only screen and (hover:hover) and (pointer:fine) {

    .feedbacks .swiper-button-next:hover svg,
    .feedbacks .swiper-button-next:hover svg path,
    .feedbacks .swiper-button-prev:hover svg,
    .feedbacks .swiper-button-prev:hover svg path {
        fill: var(--feedbacks-btn-hover-color)
    }
}

.feedbacks .expander {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s
}

.feedbacks .expander .expander-content {
    overflow: hidden
}

.feedbacks .full .expander {
    grid-template-rows: 1fr
}

.feedbacks__socials {
    color: var(--clr-basic-dark);
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 2.5rem
}

@media only screen and (max-width:320px) {
    .feedbacks__socials {
        grid-template-columns: none
    }
}

@media only screen and (min-width:768px) {
    .feedbacks__socials {
        gap: 1rem
    }
}

@media only screen and (min-width:1280px) {
    .feedbacks__socials {
        gap: .625rem;
        grid-area: socials;
        margin-bottom: 2.5rem;
        margin-top: 0
    }
}

@media only screen and (min-width:1920px) {
    .feedbacks__socials {
        grid-template-columns: none;
        margin-bottom: 0;
        margin-top: 2.5rem;
        width: 15rem
    }
}

.feedbacks__socials-box {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem
}

.feedbacks__socials-item {
    border: 1px solid;
    border-radius: 1rem;
    height: fit-content;
    padding: .75rem .875rem
}

@media only screen and (min-width:768px) {
    .feedbacks__socials-item {
        padding-inline: 1.25rem
    }
}

@media only screen and (min-width:1280px) {
    .feedbacks__socials-item {
        padding: .875rem .75rem
    }
}

@media only screen and (min-width:1920px) {
    .feedbacks__socials-item {
        padding-inline: 1rem
    }
}

.feedbacks__socials-desc,
.feedbacks__socials-text {
    font-family: IBMPlexSans, sans-serif;
    font-size: .75rem;
    line-height: 1.2
}

@media only screen and (min-width:768px) {

    .feedbacks__socials-desc,
    .feedbacks__socials-text {
        font-size: .875rem
    }
}

.feedbacks__socials-number {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1
}

@media only screen and (min-width:768px) {
    .feedbacks__socials-number {
        font-size: 1.125rem
    }
}

[data-theme=light]~.feedbacks {
    --feedbacks-btn-hover-color: #000101
}

[data-theme=dark]~.feedbacks {
    --feedbacks-btn-hover-color: var(--clr-hover-light)
}

.roadmap {
    --title-color: var(--switch-color-roadmap-title) var(--clr-accent);
    --cards-title-color: var(--switch-color-roadmap-cards-title) var(--clr-accent)
}

.roadmap.bullets {
    align-items: flex-start
}

.roadmap.bullets .roadmap__cards__card__title {
    align-items: flex-start;
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap.bullets .roadmap__cards__card__title {
        text-align: center
    }
}

.roadmap.bullets .roadmap__cards__card__bottom__list {
    align-items: flex-start;
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap.bullets .roadmap__cards__card__bottom__list {
        align-items: center;
        text-align: center
    }
}

.roadmap {
    background-color: var(--clr-basic-light)
}

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

@media only screen and (min-width:1600px) {
    .roadmap__wrapper {
        flex-direction: row
    }
}

.roadmap__title {
    color: var(--title-color, var(--clr-basic-dark));
    max-width: 100%
}

@media only screen and (min-width:1600px) {
    .roadmap__title {
        max-width: 26.125rem
    }
}

.roadmap__cards {
    display: grid;
    justify-content: flex-start;
    margin-top: 2.5rem;
    width: 100%
}

@media only screen and (min-width:1600px) {
    .roadmap__cards {
        justify-content: flex-end;
        margin-top: 0
    }
}

.roadmap__cards__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center
}

.roadmap__cards__card__icon {
    align-items: center;
    background-color: var(--clr-basic-soft-light);
    border-radius: 1rem;
    display: flex;
    height: 6rem;
    justify-content: center;
    min-width: 6rem;
    overflow: hidden;
    width: 6rem
}

.roadmap__cards__card__icon img {
    aspect-ratio: 1/1;
    object-fit: contain;
    width: 3.75rem
}

.roadmap__cards__card__title {
    color: var(--cards-title-color, var(--clr-basic-dark));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 2rem;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__title {
        font-size: 1.25rem
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards__card__title {
        font-size: 1.5rem;
        margin-top: 1.75rem
    }
}

.roadmap__cards__card__bottom {
    color: var(--clr-basic-dark);
    font-family: IBMPlexSans, sans-serif;
    font-size: 1rem;
    line-height: 140%;
    margin-top: .5rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__bottom {
        margin-top: .5rem
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards__card__bottom {
        font-size: 1.125rem;
        margin-top: .75rem
    }
}

.roadmap__cards__card__bottom__list {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__bottom__list {
        align-items: center
    }
}

.roadmap__cards__card__bottom__list__item {
    color: var(--clr-basic-dark);
    font-size: .875rem;
    font-weight: 400;
    line-height: 140%;
    padding-left: .8125rem;
    position: relative;
    width: fit-content
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__bottom__list__item {
        font-size: 1rem
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards__card__bottom__list__item {
        font-size: 1.125rem
    }
}

.roadmap__cards__card__bottom__list__item>span {
    background-color: var(--clr-basic-dark);
    border-radius: 50%;
    height: .1875rem;
    position: absolute;
    top: .5625rem;
    transform: translateX(-.625rem);
    width: .1875rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__bottom__list__item>span {
        height: .3125rem;
        transform: translateX(-.8125rem);
        width: .3125rem
    }
}

.roadmap__cards__card__arrow {
    background: url(../img/robot-site-static.fra1.digitaloceanspaces.com-cc-ckeditor-landings-master-landing-arrow.png);
    background-position: 50%;
    background-size: cover;
    height: 1.625rem;
    position: absolute;
    top: 6.9375rem;
    transform: translate(100%);
    width: 2rem
}

.roadmap__cards__card__arrow.left {
    display: none;
    left: -.75rem
}

.roadmap__cards__card__arrow.right {
    right: -.75rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards__card__arrow.left {
        left: -1rem
    }

    .roadmap__cards__card__arrow.right {
        right: -1rem
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards__card__arrow.left {
        left: -1.25rem
    }

    .roadmap__cards__card__arrow.right {
        right: -1.25rem
    }
}

.roadmap__cards__card:last-child .roadmap__cards__card__arrow.right {
    display: none
}

.roadmap__cards.column-3 {
    align-items: flex-start;
    gap: 2rem;
    grid-template-columns: 1fr
}

.roadmap__cards.column-3 .roadmap__cards__card {
    align-items: center;
    flex-direction: row;
    gap: 1.25rem;
    padding-left: 3.25rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 .roadmap__cards__card {
        align-items: center;
        flex-direction: column;
        gap: 0;
        padding-left: unset
    }
}

.roadmap__cards.column-3 .roadmap__cards__card__title {
    margin-top: 0;
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 .roadmap__cards__card__title {
        margin-top: 2rem;
        text-align: center
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-3 .roadmap__cards__card__title {
        margin-top: 1.75rem
    }
}

.roadmap__cards.column-3 .roadmap__cards__card__bottom {
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 .roadmap__cards__card__bottom {
        text-align: center
    }
}

.roadmap__cards.column-3 .roadmap__cards__card__arrow.left {
    display: block;
    left: 0;
    top: 2.0625rem;
    transform: translate(0)
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 .roadmap__cards__card__arrow.left {
        display: none;
        left: -1rem;
        top: 0;
        transform: translate(100%)
    }
}

.roadmap__cards.column-3 .roadmap__cards__card__arrow.right {
    display: none
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 .roadmap__cards__card__arrow.right {
        display: block
    }

    .roadmap__cards.column-3 .roadmap__cards__card__arrow {
        top: 2.1875rem
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-3 .roadmap__cards__card__arrow {
        top: 7.625rem
    }
}

.roadmap__cards.column-3 .roadmap__cards__card:last-child .roadmap__cards__card__arrow.right {
    display: none
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3 {
        align-items: flex-start;
        gap: 5rem;
        grid-template-columns: repeat(3, minmax(11rem, 1fr))
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-3 {
        gap: 4.5rem;
        grid-template-columns: repeat(3, 22.125rem)
    }
}

@media only screen and (min-width:1600px) {
    .roadmap__cards.column-3 {
        grid-template-columns: repeat(3, 23.25rem)
    }
}

.roadmap__cards.column-3.bullets .roadmap__cards__card {
    align-items: flex-start
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3.bullets .roadmap__cards__card {
        align-items: center
    }
}

.roadmap__cards.column-3.bullets .roadmap__cards__card__bottom__list__item {
    margin-left: .625rem;
    padding-left: .625rem
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-3.bullets .roadmap__cards__card__bottom__list__item {
        margin-left: 0;
        padding-left: .8125rem
    }
}

.roadmap__cards.column-4 {
    gap: 2.5rem 3.5rem;
    grid-template-columns: repeat(2, clamp(7.6875rem, 30vw, 16.5rem));
    justify-content: center
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4 {
        gap: 2.5rem 4rem;
        grid-template-columns: repeat(2, 16.5rem);
        justify-content: center
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-4 {
        gap: 4rem;
        grid-template-columns: repeat(4, minmax(auto, 16.6875rem));
        justify-content: flex-start
    }
}

@media only screen and (min-width:1600px) {
    .roadmap__cards.column-4 {
        grid-template-columns: repeat(4, 16.6875rem);
        justify-content: flex-end
    }
}

.roadmap__cards.column-4 .roadmap__cards__card__title {
    margin-top: 2rem
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-4 .roadmap__cards__card__title {
        margin-top: 1.75rem
    }
}

.roadmap__cards.column-4 .roadmap__cards__card__bottom__list {
    align-items: center
}

.roadmap__cards.column-4 .roadmap__cards__card__bottom__list__item {
    padding-left: .625rem;
    text-align: center
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4 .roadmap__cards__card__bottom__list__item {
        padding-left: .8125rem
    }
}

.roadmap__cards.column-4 .roadmap__cards__card__arrow {
    top: 2.1875rem
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-4 .roadmap__cards__card__arrow {
        top: 7.625rem
    }
}

.roadmap__cards.column-4 .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
    display: block;
    transform: translateX(-100%)
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4 .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        display: block;
        transform: translateX(-100%)
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-4 .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        display: none
    }
}

.roadmap__cards.column-4.bullets .roadmap__cards__card {
    align-items: flex-start
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card {
        align-items: center
    }
}

.roadmap__cards.column-4.bullets .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
    display: block
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        display: block
    }
}

@media only screen and (min-width:1280px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        display: none
    }
}

.roadmap__cards.column-4.bullets .roadmap__cards__card__bottom {
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__bottom {
        text-align: center
    }
}

.roadmap__cards.column-4.bullets .roadmap__cards__card__bottom__list {
    align-items: flex-start
}

.roadmap__cards.column-4.bullets .roadmap__cards__card__bottom__list__item {
    margin-left: .625rem;
    padding-left: .625rem;
    text-align: left
}

@media only screen and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__bottom__list__item {
        margin-left: 0;
        padding-left: .8125rem;
        text-align: center
    }

    .roadmap__cards.column-4.bullets .roadmap__cards__card__bottom__list {
        align-items: center
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets {
        align-items: flex-start;
        gap: 2rem;
        grid-template-columns: 1fr
    }

    .roadmap__cards.column-4.bullets .roadmap__cards__card {
        align-items: center;
        flex-direction: row;
        gap: 1.25rem;
        padding-left: 3.25rem
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card {
        align-items: center;
        flex-direction: column;
        gap: 0;
        padding-left: unset
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__title {
        margin-top: 0;
        text-align: left
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__title {
        margin-top: 2rem;
        text-align: center
    }
}

@media only screen and (max-width:766px) and (min-width:1280px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__title {
        margin-top: 1.75rem
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__bottom {
        text-align: left
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__bottom {
        text-align: center
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow.left {
        display: block;
        left: 0;
        top: 2.0625rem;
        transform: translate(0)
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow.left {
        display: none;
        left: -1rem;
        top: 0;
        transform: translate(100%)
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow.right {
        display: none
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow.right {
        display: block
    }

    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow {
        top: 2.1875rem
    }
}

@media only screen and (max-width:766px) and (min-width:1280px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card__arrow {
        top: 7.625rem
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card:last-child .roadmap__cards__card__arrow.right {
        display: none
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets {
        align-items: flex-start;
        gap: 5rem;
        grid-template-columns: repeat(3, minmax(11rem, 1fr))
    }
}

@media only screen and (max-width:766px) and (min-width:1280px) {
    .roadmap__cards.column-4.bullets {
        gap: 4.5rem;
        grid-template-columns: repeat(3, 22.125rem)
    }
}

@media only screen and (max-width:766px) and (min-width:1600px) {
    .roadmap__cards.column-4.bullets {
        grid-template-columns: repeat(3, 23.25rem)
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card {
        align-items: flex-start
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card {
        align-items: center
    }
}

@media only screen and (max-width:766px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        transform: translateX(0)
    }
}

@media only screen and (max-width:766px) and (min-width:768px) {
    .roadmap__cards.column-4.bullets .roadmap__cards__card:nth-child(3n) .roadmap__cards__card__arrow.left {
        transform: translateX(-100%)
    }
}

.roadmap.without-arrow .roadmap__cards__card {
    padding-left: 0
}

.roadmap.without-arrow .roadmap__cards__card__arrow {
    visibility: hidden
}

.roadmap.without-arrow .column-4 {
    gap: 2.5rem .75rem;
    grid-template-columns: repeat(2, 1fr)
}

.roadmap.without-arrow .column-4.bullets {
    grid-template-columns: 1fr
}

@media only screen and (min-width:768px) {
    .roadmap.without-arrow .column-4.bullets {
        grid-template-columns: repeat(2, 11.875rem)
    }
}

@media only screen and (min-width:1280px) {
    .roadmap.without-arrow .column-4.bullets {
        grid-template-columns: repeat(4, minmax(auto, 16.6875rem))
    }
}

@media only screen and (min-width:1600px) {
    .roadmap.without-arrow .column-4.bullets {
        grid-template-columns: repeat(4, 16.6875rem)
    }
}

.roadmap.without-arrow .column-4.bullets .roadmap__cards__card {
    padding-left: 0
}

@media only screen and (min-width:768px) {
    .roadmap.without-arrow .column-4 {
        gap: 2.5rem 4rem;
        grid-template-columns: repeat(2, 16.5rem)
    }
}

@media only screen and (min-width:1280px) {
    .roadmap.without-arrow .column-4 {
        gap: 4rem;
        grid-template-columns: repeat(4, minmax(auto, 16.6875rem))
    }
}

@media only screen and (min-width:1600px) {
    .roadmap.without-arrow .column-4 {
        gap: 4.5rem;
        grid-template-columns: repeat(4, 16.6875rem)
    }
}

.main-with-photo {
    --opposite-white: #fff;
    --opposite-soft-white: #e5e8ec;
    color: var(--clr-basic-dark)
}

.main-with-photo.colored {
    background: var(--clr-accent)
}

.main-with-photo .container {
    padding-block: 5.5rem 2.5rem
}

@media only screen and (min-width:48em) {
    .main-with-photo .container {
        grid-column: wide;
        padding-block: 6.5rem 3.75rem
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo .container {
        padding-top: 6.25rem
    }
}

@media only screen and (min-width:100em) {
    .main-with-photo .container {
        grid-column: main
    }
}

.main-with-photo__left {
    background: var(--opposite-white);
    border-radius: 1.25rem;
    padding: 2rem 1rem
}

@media only screen and (min-width:48em) {
    .main-with-photo__left {
        border-radius: 2rem;
        padding: 2.5rem 2rem
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo__left {
        grid-area: left;
        padding: 2rem 1.25rem
    }
}

@media only screen and (min-width:100em) {
    .main-with-photo__left {
        padding-inline: 2.5rem
    }
}

.main-with-photo__left-info {
    align-items: center;
    display: flex;
    margin-bottom: 1.75rem
}

@media only screen and (min-width:48em) {
    .main-with-photo__left-info {
        margin-bottom: 2rem
    }
}

.main-with-photo__left-info p {
    background: var(--opposite-soft-white);
    border-radius: 6.25rem;
    color: var(--clr-basic-dark);
    font-size: 1rem;
    font-weight: 700;
    padding: .5rem 1rem;
    width: fit-content
}

.main-with-photo__title {
    font-size: 2.75rem;
    font-weight: 700
}

@media only screen and (min-width:48em) {
    .main-with-photo__title {
        font-size: 3.5rem
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo__title {
        max-width: 33.625rem
    }
}

.main-with-photo__img {
    border-radius: 1.25rem;
    overflow: hidden;
    padding-top: 80%;
    position: relative
}

@media only screen and (min-width:48em) {
    .main-with-photo__img {
        border-radius: 2rem;
        padding-top: 80%
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo__img {
        grid-area: img;
        padding-top: 81.8%
    }
}

.main-with-photo__img img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: 0;
    width: 100%
}

.main-with-photo__info {
    background: var(--opposite-white);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem
}

@media only screen and (min-width:48em) {
    .main-with-photo__info {
        border-radius: 2rem;
        padding: 2rem
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo__info {
        display: flex;
        flex-direction: column;
        grid-area: info;
        justify-content: flex-end;
        padding: 2rem 1.25rem
    }
}

.main-with-photo__info.colored {
    background: var(--clr-accent);
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:768px) and (max-width:1279px) {
    .main-with-photo.two-lectors-row .main-with-photo__info {
        flex-direction: unset;
        gap: 5rem
    }
}

.main-with-photo__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
    text-transform: uppercase
}

@media only screen and (min-width:48em) {
    .main-with-photo__name {
        font-size: 1.5rem;
        line-height: 1.2
    }
}

.main-with-photo__position {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem
}

@media only screen and (min-width:48em) {
    .main-with-photo__position {
        font-size: 1.125rem;
        line-height: 1.2
    }
}

.main-with-photo__company {
    background: var(--opposite-soft-white);
    border-radius: 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    padding: .375rem 1rem;
    width: fit-content
}

@media only screen and (min-width:48em) {
    .main-with-photo__company {
        font-size: 1.125rem;
        line-height: 1.2
    }
}

@media only screen and (min-width:80em) {
    .main-with-photo__wrapper {
        display: grid;
        grid-template-areas: "info left img";
        grid-template-columns: 16.75% 42% 41.5%
    }
}

@media only screen and (min-width:100em) {
    .main-with-photo__wrapper {
        grid-template-columns: 16.1% 48.1% 36%
    }
}

body:has([data-theme=dark]) .main-with-photo {
    --opposite-white: #282828;
    --opposite-soft-white: #000
}

.header__counter {
    color: var(--clr-basic-dark);
    display: flex;
    gap: 1.6875rem;
    justify-content: center
}

@media only screen and (min-width:1280px) {
    .header__counter {
        gap: 1.8125rem
    }
}

.header__counter .indicator {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    position: relative
}

.header__counter .indicator__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1
}

@media only screen and (min-width:768px) {
    .header__counter .indicator__value {
        font-size: 1.5rem
    }
}

.header__counter .indicator__label {
    font-family: IBMPlexSans;
    font-size: .75rem
}

.header__counter .indicator:not(:last-child):before {
    color: var(--clr-basic-dark);
    content: ":";
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    position: absolute;
    right: -1.125rem;
    top: 0
}

@media only screen and (min-width:1280px) {
    .header__counter .indicator:not(:last-child):before {
        right: -1.1875rem
    }
}

.header__box {
    background: var(--clr-accent)
}

@media only screen and (min-width:768px) {
    .header__box {
        height: var(--header-height);
        left: 0;
        padding-block: .75rem;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1000
    }
}

@media only screen and (max-width:767px) {
    .header__box .header__counter-box {
        padding-top: 5.125rem
    }

    .header__box+.section .container {
        padding-top: 2.5rem
    }

    .header.without-btn-mob-tab .header__action {
        display: none
    }
}

@media only screen and (min-width:768px) and (max-width:1279px) {
    .header.without-btn-mob-tab .header__action {
        display: var(--show-header-btn, block)
    }
}

@media only screen and (max-width:1279px) {
    .header.with-counter .header__action {
        display: var(--show-header-btn, block)
    }
}

@media only screen and (min-width:768px) {
    .header__counter-box {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999
    }

    .is-scrolled .header__box {
        position: fixed
    }
}

body:has([data-theme=dark]).is-scrolled .header__counter {
    color: var(--clr-fixed-dark)
}

body:has([data-theme=dark]).is-scrolled .indicator:before {
    color: var(--clr-fixed-dark)
}

.header__box+section .container {
    padding-top: calc(var(--section-after-header-padding-top) + var(--header-height))
}

.base-banner.fixed~.wrapper .header__box {
    top: 0
}

@media only screen and (min-width:768px) {
    .base-banner.fixed~.wrapper .without-btn-mob-tab .header__counter-box {
        top: .6875rem;
        transform: translateX(-50%)
    }

    .base-banner.fixed~.wrapper .header__counter-box {
        top: calc(var(--base-banner-height) + 13px);
        transform: translateX(-50%)
    }
}

.master-landing-body .bf-main {
    color: var(--clr-basic-dark)
}

.master-landing-body .bf-main .container {
    padding-bottom: 3.75rem;
    padding-top: 6.875rem;
    position: relative
}

@media only screen and (min-width:768px) and (max-width:1279px) {
    .master-landing-body .bf-main .container {
        grid-column: wide
    }
}

.master-landing-body .bf-main__animation-title {
    display: none
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__animation-title {
        display: block
    }
}

.master-landing-body .bf-main__animation-title-item {
    color: var(--clr-basic-dark);
    display: flex;
    font-family: VinMonoPro, sans-serif;
    font-size: 4rem;
    font-weight: 700;
    gap: 8.75rem;
    justify-content: center;
    line-height: 1;
    line-height: 3.625rem;
    opacity: .15;
    text-transform: uppercase
}

.master-landing-body .bf-main__animation-title-item:not(:last-child) {
    margin-bottom: .125rem
}

.master-landing-body .bf-main__animation-title-item:nth-child(2) {
    justify-content: space-between;
    opacity: 1
}

@media only screen and (min-width:1600px) {
    .master-landing-body .bf-main__animation-title-item:nth-child(2) {
        gap: 35.6875rem;
        justify-content: center
    }
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__animation-title-item {
        font-size: 4.5rem;
        line-height: 4.25rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__animation-title-item {
        font-size: 8.25rem;
        gap: 18.75rem;
        line-height: 7.4375rem
    }
}

.master-landing-body .bf-main__ticker-box-mob {
    display: grid;
    grid-template: 1fr/1fr;
    position: relative
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__ticker-box-mob {
        display: none
    }
}

.master-landing-body .bf-main__ticker-box-mob:first-child {
    margin-bottom: -1rem;
    z-index: 10
}

.master-landing-body .bf-main__ticker-box-mob:first-child .bf-main__runline {
    font-size: 4rem
}

.master-landing-body .bf-main__ticker-box-mob:first-child .bf-main__runline:first-child {
    animation: run-to-left 70s linear infinite forwards
}

.master-landing-body .bf-main__ticker-box-mob:first-child .bf-main__runline:last-child {
    animation: run-to-left 70s linear 70s infinite forwards
}

.master-landing-body .bf-main__ticker-box-mob:last-child {
    margin-top: -1.375rem;
    z-index: 30
}

.master-landing-body .bf-main__ticker-box-mob:last-child .bf-main__runline:first-child {
    animation: run-to-right 70s linear infinite forwards
}

.master-landing-body .bf-main__ticker-box-mob:last-child .bf-main__runline:last-child {
    animation: run-to-right 70s linear 70s infinite forwards
}

@keyframes run-to-right {
    0% {
        transform: translateX(calc(-100% + 100vw))
    }

    to {
        transform: translateX(0)
    }
}

.master-landing-body .bf-main__animation-box {
    margin-bottom: 3rem;
    position: relative
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__animation-box {
        margin-bottom: 3.75rem
    }
}

.master-landing-body .bf-main__runline {
    display: flex;
    font-family: VinMonoPro, sans-serif;
    font-size: 3.75rem;
    gap: 1.25rem;
    grid-area: 1/1/2/2;
    line-height: 1;
    text-transform: uppercase;
    transform: translate(100vw);
    white-space: nowrap
}

.master-landing-body .bf-main__container {
    position: relative;
    z-index: 10
}

.master-landing-body .bf-main__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__list.four-elements {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__list.four-elements {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__list {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(3, 1fr)
    }
}

.master-landing-body .bf-main__list li {
    background: #fff;
    border-radius: 1.25rem;
    font-family: IBMPlexSans;
    font-size: 1rem;
    height: fit-content;
    line-height: 1.4;
    padding: 3.25rem 1rem 1.25rem;
    position: relative
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__list li {
        height: auto;
        padding: 3.25rem 1.5rem 1.25rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__list li {
        font-size: 1.125rem;
        padding: 3.25rem 2rem 1.25rem
    }
}

.master-landing-body .bf-main__list li:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="19" viewBox="0 0 14 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 13.0887C14 13.2383 13.9414 13.3815 13.836 13.488L12.8884 14.445C12.7847 14.5497 12.6436 14.6096 12.4968 14.6106L13.4399 14.6106C13.7485 14.6106 13.9992 14.8631 14 15.1732L14 16.9698C14 17.1192 13.9405 17.2631 13.8358 17.3686L12.887 18.3244C12.7815 18.4307 12.6395 18.4899 12.4912 18.4899C9.75924 18.4899 3.31086 18.5 0.578915 18.5C0.27033 18.5 0.0196573 18.2475 0.0196573 17.9366L0.0196574 17.0026C0.0191309 16.9927 0.0188649 16.9827 0.0188649 16.9728L0.0188583 15.1762C0.0196575 14.8661 0.271384 14.6136 0.581256 14.6136L7.4503 14.6136C6.269 13.4395 1.35723 8.49285 0.173944 7.31688C0.0883023 7.23177 0.032418 7.12217 0.0132472 7.00381C0.0044982 6.9638 6.72931e-07 6.92266 6.7475e-07 6.88104L9.28912e-07 1.0665C9.42575e-07 0.75392 0.250362 0.499999 0.558554 0.499999L3.28716 0.5C3.59535 0.5 3.84571 0.75392 3.84571 1.0665L3.84571 5.36665C3.84571 5.46491 3.8848 5.55907 3.95415 5.62807C4.77847 6.44811 9.33121 11.0371 10.1543 11.8551L10.1543 6.43625C10.1543 6.28662 10.2129 6.14338 10.3183 6.03696L11.2659 5.07993C11.3704 4.9743 11.513 4.91429 11.6612 4.91429L13.4422 4.91429C13.7496 4.91509 14 5.16795 14 5.47922L14 13.0887Z" fill="%23282828"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 1.125rem;
    left: 1.25rem;
    position: absolute;
    top: 1.25rem;
    width: 1.5rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__list li:before {
        left: 1.75rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__list li:before {
        left: 2.25rem
    }
}

.master-landing-body .bf-main__picture {
    height: auto;
    margin: 0 auto;
    position: relative;
    width: 21.375rem;
    z-index: 20
}

@media only screen and (max-width:374px) {
    .master-landing-body .bf-main__picture {
        width: 100%
    }
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__picture {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 18.25rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__picture {
        width: 28.125rem
    }
}

.master-landing-body .bf-main__picture img {
    height: 100%;
    width: 100%
}

.master-landing-body .bf-main__text {
    font-family: VinMonoPro, sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 3rem;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .master-landing-body .bf-main__text {
        margin-bottom: 3.75rem;
        margin-top: 0;
        padding-inline: 1.5625rem;
        text-align: center
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .bf-main__text {
        margin-inline: auto;
        margin-bottom: 2.5rem;
        padding-inline: 0;
        width: 54.125rem
    }
}

.master-landing-body .bf-main.bf-main-accent .bf-main__animation-title-item:nth-child(2),
.master-landing-body .bf-main.bf-main-accent .bf-main__ticker-box-mob {
    color: var(--color-accent)
}

body:has([data-theme=dark]) .bf-main__list li {
    background: #282828
}

body:has([data-theme=dark]) .bf-main__list li:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="19" viewBox="0 0 14 19" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 13.0887C14 13.2383 13.9414 13.3815 13.836 13.488L12.8884 14.445C12.7847 14.5497 12.6436 14.6096 12.4968 14.6106L13.4399 14.6106C13.7485 14.6106 13.9992 14.8631 14 15.1732L14 16.9698C14 17.1192 13.9405 17.2631 13.8358 17.3686L12.887 18.3244C12.7815 18.4307 12.6395 18.4899 12.4912 18.4899C9.75924 18.4899 3.31086 18.5 0.578915 18.5C0.27033 18.5 0.0196573 18.2475 0.0196573 17.9366L0.0196574 17.0026C0.0191309 16.9927 0.0188649 16.9827 0.0188649 16.9728L0.0188583 15.1762C0.0196575 14.8661 0.271384 14.6136 0.581256 14.6136L7.4503 14.6136C6.269 13.4395 1.35723 8.49285 0.173944 7.31688C0.0883023 7.23177 0.032418 7.12217 0.0132472 7.00381C0.0044982 6.9638 6.72931e-07 6.92266 6.7475e-07 6.88104L9.28912e-07 1.0665C9.42575e-07 0.75392 0.250362 0.499999 0.558554 0.499999L3.28716 0.5C3.59535 0.5 3.84571 0.75392 3.84571 1.0665L3.84571 5.36665C3.84571 5.46491 3.8848 5.55907 3.95415 5.62807C4.77847 6.44811 9.33121 11.0371 10.1543 11.8551L10.1543 6.43625C10.1543 6.28662 10.2129 6.14338 10.3183 6.03696L11.2659 5.07993C11.3704 4.9743 11.513 4.91429 11.6612 4.91429L13.4422 4.91429C13.7496 4.91509 14 5.16795 14 5.47922L14 13.0887Z" fill="white"/></svg>')
}

.bestseller {
    background: var(--clr-basic-light);
    color: var(--clr-basic-dark);
    font-family: VinMonoPro, Sans-Serif
}

.bestseller--title {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:112.5em) {
    .bestseller--title {
        margin-bottom: 0
    }
}

.bestseller__img {
    border-radius: 1rem;
    overflow: hidden;
    padding-top: 66%;
    position: relative;
    width: 100%
}

@media only screen and (min-width:48em) {
    .bestseller__img {
        padding-top: 59%
    }
}

@media only screen and (min-width:80em) {
    .bestseller__img {
        padding-top: 60%
    }
}

.bestseller__item {
    border-radius: 1.25rem;
    height: auto;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:48em) {
    .bestseller__item {
        border-radius: 2rem
    }
}

@media only screen and (min-width:112.5em) {
    .bestseller__item {
        flex-basis: calc(33.33333% - 14px)
    }
}

.bestseller__item img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.bestseller__item.opened .bestseller__item-info-hidden {
    grid-template-rows: 1fr
}

.bestseller__item.opened .bestseller__btn button span:last-child {
    display: block
}

.bestseller__item.opened .bestseller__btn button span:first-child {
    display: none
}

.bestseller__item-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.875rem;
    margin-block: 1.5rem 1rem;
    text-transform: uppercase
}

@media only screen and (min-width:48em) {
    .bestseller__item-name {
        font-size: 2rem;
        line-height: 2.125rem
    }
}

.bestseller__item-lector-info {
    font-size: .875rem;
    font-weight: 700;
    line-height: .9375rem;
    margin-bottom: 1.5rem
}

@media only screen and (min-width:48em) {
    .bestseller__item-lector-info {
        font-size: 1rem;
        line-height: 1.0625rem
    }
}

.bestseller__item-info {
    display: grid
}

.bestseller__item-info p {
    font-family: IBMPlexSans;
    font-size: .875rem;
    line-height: 1.0625rem
}

@media only screen and (min-width:48em) {
    .bestseller__item-info p {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.bestseller__item-info p:not(:first-child) {
    margin-top: 1.25rem
}

.bestseller__item-info-hidden {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s
}

.bestseller__item-info-hidden-content {
    overflow: hidden
}

.bestseller__item-container {
    background: var(--clr-basic-soft-light);
    height: 100%;
    padding: 1.25rem 1.25rem 6.4375rem
}

.bestseller__btn {
    margin-top: 1.5rem
}

.bestseller__btn button {
    background: none;
    border-bottom: 1px solid;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.0625rem;
    text-transform: uppercase
}

.bestseller__btn button span {
    transition: .3s
}

.bestseller__btn button span:last-child {
    display: none
}

@media only screen and (hover:hover) and (pointer:fine) {
    .bestseller__btn button:hover span {
        color: #000101
    }
}

.bestseller__runline-box {
    background: var(--clr-basic-dark);
    bottom: 2.5rem;
    color: var(--clr-basic-light);
    display: grid;
    grid-template: 1fr/1fr;
    left: 0;
    padding-block: .25rem;
    position: absolute
}

.bestseller__runline-box .bestseller__runline {
    display: flex;
    gap: 1.25rem;
    grid-area: 1/1/2/2;
    transform: translate(100vw);
    white-space: nowrap
}

.bestseller__runline-box .bestseller__runline:first-child {
    animation: run-to-left 70s linear infinite forwards
}

.bestseller__runline-box .bestseller__runline:last-child {
    animation: run-to-left 70s linear 70s infinite forwards
}

.bestseller__runline span {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3125rem;
    text-transform: uppercase
}

.bestseller .container {
    padding-block: 3rem
}

@media only screen and (min-width:48em) {
    .bestseller .container {
        padding-block: 3.75rem
    }
}

@media only screen and (min-width:80em) {
    .bestseller .container {
        padding-block: 3.75rem 5rem
    }
}

@media only screen and (min-width:112.5em) {
    .bestseller .container {
        display: grid;
        gap: 3.125rem;
        grid-template-columns: 1fr 78.75rem;
        padding-block: 3.75rem
    }
}

@media only screen and (max-width:79.9375em) {
    .bestseller .swiper-container {
        overflow: visible
    }
}

@media only screen and (min-width:1280px) {
    .bestseller .swiper-container {
        width: 100%
    }
}

@media only screen and (min-width:112.5em) {
    .bestseller .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        height: unset
    }
}

.bestseller .swiper-button-next,
.bestseller .swiper-button-prev {
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem
}

.bestseller .swiper-button-next svg,
.bestseller .swiper-button-prev svg {
    fill: var(--clr-basic-dark);
    display: block;
    height: 100%;
    width: 100%
}

.bestseller .swiper-button-disabled {
    opacity: .5
}

.bestseller__navigation {
    display: none
}

@media only screen and (min-width:48em) {
    .bestseller__navigation {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        gap: 1.125rem
    }
}

.bestseller__navigation-box {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem
}

@media only screen and (min-width:768px) {
    .bestseller__navigation-box {
        flex-direction: row-reverse
    }
}

@media only screen and (min-width:112.5em) {
    .bestseller__navigation-box {
        display: none
    }
}

.bestseller .swiper-pagination {
    align-items: center;
    display: flex;
    flex-direction: row
}

.bestseller .swiper-pagination-bullet {
    background: var(--clr-fixed-soft-light);
    border-radius: 10px;
    font-size: .75rem;
    height: .5625rem;
    line-height: 1.25rem;
    opacity: 1;
    text-align: center;
    width: .5625rem
}

.bestseller .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark);
    width: 1.8125rem
}

.bestseller.accent-runline .bestseller__runline-box {
    background: var(--clr-accent)
}

.bestseller.accent-runline .bestseller__runline-box span {
    color: var(--clr-basic-dark)
}

@keyframes run-to-left {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-100% + 100vw))
    }
}

body:has([data-theme=dark]) .bestseller .swiper-pagination-bullet {
    background: #282828
}

body:has([data-theme=dark]) .bestseller .swiper-pagination-bullet-active {
    background: #fff
}

@media only screen and (hover:hover) and (pointer:fine) {
    body:has([data-theme=dark]) .bestseller__btn button:hover span {
        color: #e3e3e3
    }
}

.picture-block .picture,
.picture-block img {
    display: block;
    width: 100%
}

.guides {
    background: var(--clr-basic-light);
    color: var(--clr-basic-dark)
}

@media only screen and (min-width:80em) {
    .guides .container {
        overflow: hidden;
        padding-bottom: 5rem
    }
}

@media only screen and (min-width:112.5em) {
    .guides .container {
        padding-bottom: 3.75rem
    }
}

.guides__title {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:112.5em) {
    .guides__wrapper {
        display: grid;
        gap: 5rem;
        grid-template-columns: 1fr 78.75rem
    }

    .guides__cards {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr
    }
}

.guides__cards--item {
    align-items: flex-end;
    border-radius: 2rem;
    display: flex;
    height: auto;
    min-height: 35.375rem;
    overflow: hidden;
    position: relative
}

.guides__cards--item a {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20
}

@media only screen and (hover:hover) and (pointer:fine) {
    .guides__cards--item a:hover~.guides__img img {
        filter: brightness(.7);
        transform: scale(1.1)
    }

    .guides__cards--item a:hover~.guides__info .guides__course {
        border-color: var(--clr-basic-dark)
    }
}

.guides__cards-slider--button {
    display: none
}

@media only screen and (min-width:48em) {
    .guides__cards-slider--button {
        align-items: center;
        display: flex;
        gap: 1rem
    }
}

.guides__cards-slider--button svg {
    fill: var(--clr-basic-dark)
}

.guides__cards-slider--actions {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem
}

@media only screen and (min-width:112.5em) {
    .guides__cards-slider--actions {
        display: none
    }
}

.guides__img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.guides__img img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    width: 100%
}

.guides__info {
    background: rgba(229, 232, 236, .8);
    border-radius: 1.25rem;
    margin: 0 .75rem 4.0625rem;
    padding: 1rem 1rem 1.25rem;
    position: relative
}

.guides__new {
    background: var(--clr-accent);
    border-radius: 6.25rem;
    font-size: 1rem;
    font-weight: 700;
    left: .75rem;
    padding: .5rem .875rem .375rem;
    position: absolute;
    text-transform: uppercase;
    top: 1.25rem;
    z-index: 10
}

.guides__course {
    border-bottom: 1px solid transparent;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    transition: .3s;
    width: fit-content
}

.guides__course,
.guides__position {
    margin-bottom: .75rem
}

.guides__position p {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.1
}

.guides__text p {
    font-family: IBMPlexSans, sans-serif;
    font-size: .75rem;
    line-height: 1.2
}

.guides__text p:not(:last-child) {
    margin-bottom: 1rem
}

.guides__marquee {
    background: var(--runline-background, var(--clr-basic-dark));
    bottom: 1.25rem;
    color: var(--runline-text-color, var(--clr-basic-light));
    display: grid;
    grid-template: 1fr/1fr;
    height: 1.8125rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10
}

.guides .ticker__item {
    align-items: center;
    display: flex;
    gap: .6em;
    grid-area: 1/1/2/2;
    padding: 0 .3em;
    transform: translate(100%);
    white-space: nowrap;
    width: 100%
}

.guides .ticker__item:first-child {
    animation: ticker 30s linear infinite forwards
}

.guides .ticker__item:last-child {
    animation: ticker 30s linear -15s infinite forwards
}

.guides .ticker__item span {
    font-size: 1.25rem;
    font-weight: 700
}

.guides .swiper-pagination {
    align-items: center;
    display: flex;
    flex-direction: row
}

.guides .swiper-pagination-bullet {
    background: var(--clr-fixed-soft-light);
    border-radius: 10px;
    font-size: .75rem;
    height: .5625rem;
    line-height: 1.25rem;
    opacity: 1;
    text-align: center;
    width: .5625rem
}

.guides .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark);
    width: 1.8125rem
}

.guides .swiper-button-disabled {
    opacity: .5
}

.guides .swiper-button-lock,
.guides .swiper-pagination-lock {
    display: none
}

.guides .swiper-button-next,
.guides .swiper-button-prev {
    cursor: pointer
}

@keyframes ticker {
    0% {
        transform: translate(100%)
    }

    50% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

[data-theme=dark]~.guides .guides__info {
    background: rgba(40, 40, 40, .8)
}

[data-theme=dark]~.guides .swiper-pagination-bullet {
    background: #282828
}

[data-theme=dark]~.guides .swiper-pagination-bullet-active {
    background: var(--clr-basic-dark)
}

.master-landing-body .main-with-bg {
    min-height: var(--window-height);
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:1280px) {
    .master-landing-body .main-with-bg {
        min-height: unset
    }
}

.master-landing-body .main-with-bg .container {
    padding-top: 5.5rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg .container {
        padding-top: 6.5rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .main-with-bg .container {
        padding-bottom: 6.25rem;
        padding-top: 7rem
    }
}

@media only screen and (min-width:1920px) {
    .master-landing-body .main-with-bg .container {
        padding-top: 6.25rem
    }
}

@media only screen and (min-width:1280px) {
    .master-landing-body .main-with-bg__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

.master-landing-body .main-with-bg .main-with-bg__img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media only screen and (min-width:1920px) {
    .master-landing-body .main-with-bg .main-with-bg__img {
        left: 50%;
        transform: translateX(-50%)
    }
}

.master-landing-body .main-with-bg .main-with-bg__img img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.master-landing-body .main-with-bg__top {
    background: var(--clr-basic-soft-dark);
    border-radius: 1.25rem;
    color: var(--clr-basic-light);
    padding: 2rem 1rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__top {
        border-radius: 2rem;
        padding: 2.5rem 2rem
    }
}

.master-landing-body .main-with-bg__bottom {
    background: var(--clr-basic-light);
    border-radius: 1.25rem;
    color: var(--clr-basic-soft-dark);
    padding: 1.5rem 1rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__bottom {
        border-radius: 2rem;
        padding: 2rem
    }
}

.master-landing-body .main-with-bg__wrapper {
    position: relative
}

.master-landing-body .main-with-bg__time {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.75rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__time {
        margin-bottom: 2rem
    }
}

.master-landing-body .main-with-bg__time div {
    background: var(--clr-basic-soft-light);
    border-radius: 6.25rem;
    color: var(--clr-basic-soft-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: .5rem 1rem;
    width: fit-content
}

.master-landing-body .main-with-bg__title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__title {
        font-size: 3.5rem
    }
}

.master-landing-body .main-with-bg__sm {
    color: var(--clr-accent);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .75rem
}

.master-landing-body .main-with-bg__name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__name {
        font-size: 1.5rem
    }
}

.master-landing-body .main-with-bg__position {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__position {
        font-size: 1.125rem
    }
}

.master-landing-body .main-with-bg__companies {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__companies {
        margin-bottom: 2.5rem
    }
}

.master-landing-body .main-with-bg__companies p {
    background: var(--clr-basic-soft-light);
    border-radius: 1.25rem;
    color: var(--clr-basic-soft-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: .375rem 1rem
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__companies p {
        font-size: 1.125rem;
        padding: .5rem 1.125rem
    }
}

.master-landing-body .main-with-bg__list {
    display: grid;
    font-family: IBMPlexSans, sans-serif;
    gap: .25rem
}

.master-landing-body .main-with-bg__list li {
    font-size: 1rem;
    line-height: 1.4;
    padding-left: 1rem;
    position: relative
}

@media only screen and (min-width:768px) {
    .master-landing-body .main-with-bg__list li {
        font-size: 1.125rem
    }
}

.master-landing-body .main-with-bg__list li:before {
    background: var(--clr-basic-soft-light);
    content: "";
    display: block;
    height: .25rem;
    left: 0;
    position: absolute;
    top: .5625rem;
    width: .5rem
}

.master-landing-body:not(.is-scrolled) .main-with-bg__box .header__nav .nav-list a {
    color: var(--header-color, #fff)
}

@media only screen and (hover:hover) and (pointer:fine) {
    .master-landing-body:not(.is-scrolled) .main-with-bg__box .header__nav .nav-list a:hover {
        color: var(--header-navigation-hover, var(--clr-accent))
    }
}

.certificate {
    background: var(--clr-basic-soft-light)
}

.certificate .container {
    padding-bottom: 5rem
}

@media only screen and (min-width:1280px) {
    .certificate__wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

.certificate__top {
    background: var(--clr-basic-light);
    border-radius: 1.25rem;
    color: var(--clr-basic-soft-dark);
    padding: 2rem .75rem 2.5rem
}

@media only screen and (min-width:768px) {
    .certificate__top {
        border-radius: 2rem;
        padding: 2.5rem 2rem
    }
}

@media only screen and (min-width:1280px) {
    .certificate__top {
        padding: 2rem
    }
}

@media only screen and (min-width:1920px) {
    .certificate__top {
        padding: 3.75rem
    }
}

.certificate__bottom {
    border-radius: 1.25rem;
    overflow: hidden
}

@media only screen and (min-width:768px) {
    .certificate__bottom {
        border-radius: 2rem
    }
}

.certificate__bottom img {
    display: block;
    height: 100%;
    width: 100%
}

.certificate__title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2rem;
    text-transform: uppercase
}

@media only screen and (min-width:768px) {
    .certificate__title {
        font-size: 3.5rem;
        margin-bottom: 1.5rem
    }
}

@media only screen and (min-width:1280px) {
    .certificate__title {
        margin-bottom: 2rem
    }
}

@media only screen and (min-width:1920px) {
    .certificate__title {
        margin-bottom: 2.5rem
    }
}

.certificate__list {
    display: grid;
    font-family: IBMPlexSans, sans-serif;
    gap: 1.375rem
}

@media only screen and (min-width:768px) {
    .certificate__list {
        gap: 1.25rem
    }
}

.certificate__list li {
    font-size: 1rem;
    line-height: 1.4;
    padding-left: 2rem;
    position: relative
}

@media only screen and (min-width:768px) {
    .certificate__list li {
        font-size: 1.125rem
    }
}

@media only screen and (min-width:1280px) {
    .certificate__list li {
        padding-left: 0;
        padding-top: 2rem
    }
}

.certificate__list li svg {
    left: 0;
    position: absolute;
    top: 0
}

.certificate__list li svg path {
    fill: var(--clr-accent)
}

:root {
    --base-banner-height: 3rem
}

@media only screen and (min-width:768px) {
    :root {
        --base-banner-height: 3.75rem
    }
}

.base-banner {
    height: var(--base-banner-height);
    z-index: 200
}

.base-banner,
.base-banner~.wrapper {
    position: relative
}

.base-banner__cont {
    background-color: var(--bgc);
    display: block
}

.base-banner__cont img,
.base-banner__cont picture {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 120rem;
    object-fit: contain;
    object-position: center;
    width: 100%
}

.base-banner.fixed {
    position: fixed;
    z-index: 2000
}

.base-banner.fixed~.wrapper {
    padding-top: var(--base-banner-height)
}

.base-banner.fixed~.wrapper .fixed-header.active,
.base-banner.fixed~.wrapper .header,
.base-banner.fixed~.wrapper .header--scrolled {
    top: var(--base-banner-height)
}

.base-banner.fixed~.wrapper .fixed-filter.is-fixed {
    top: calc(10px + var(--base-banner-height))
}

body[data-banner-enabled=true] .breadcrumbs:is(nav) {
    margin-top: calc(var(--base-banner-height) + 2rem)
}

body[data-banner-enabled=true] .landing-breadcrumbs {
    margin-top: calc(var(--base-banner-height)*-1)
}

body[data-banner-enabled=true].elvtr-base .base-banner.fixed~.wrapper,
body[data-banner-enabled=true].page-not-front .base-banner.fixed~.wrapper {
    padding-top: var(--base-banner-height)
}

body[data-banner-enabled=true].elvtr-base .base-banner.fixed~.wrapper .header,
body[data-banner-enabled=true].page-not-front .base-banner.fixed~.wrapper .header {
    top: var(--base-banner-height)
}

@media only screen and (max-width:639px) {
    body[data-banner-enabled=true].menu-active .l_header:not(.active)+.l_menu {
        top: var(--base-banner-height)
    }
}

body[data-banner-enabled=true].course-new-theme .nav__bars {
    transition: margin .2s ease
}

body[data-banner-enabled=true].course-new-theme .header:not(.active)+.nav__bars {
    margin-top: var(--base-banner-height)
}

body[data-banner-enabled=true].elvtr-expansion-body,
body[data-banner-enabled=true].elvtr-expansion-body .wrapper {
    padding-top: 0
}

body[data-banner-enabled=true].elvtr-expansion-body .base-banner.fixed~.wrapper {
    padding-top: var(--base-banner-height)
}

body[data-banner-enabled=true].elvtr-expansion-body .base-banner.fixed~.wrapper .header {
    top: var(--base-banner-height)
}

body[data-banner-enabled=true].elvtr-expansion-body .breadcrumbs {
    margin-top: calc(var(--base-banner-height) + 2rem)
}

body[data-banner-enabled=true].elvtr-expansion-body .hero,
body[data-banner-enabled=true].elvtr-expansion-body .informers-list,
body[data-banner-enabled=true].elvtr-expansion-body .main-running-lines-box-light {
    padding-top: var(--base-banner-height)
}

@media only screen and (max-width:1139px) {
    body[data-banner-enabled=true].elvtr-expansion-body .informers-list {
        padding-top: var(--header-height, var(--base-banner-height))
    }
}

body[data-banner-enabled=true].elvtr-expansion-body .header:not(.scrolled),
body[data-banner-enabled=true].robot-land-wrap .header:not(.header--scrolled) {
    top: var(--base-banner-height)
}

body[data-banner-enabled=true].master-landing-body .base-banner:not(.fixed)~.wrapper .header {
    top: 0
}

body[data-banner-enabled=true].short-land-body .header:not(.scrolled) .nav__enroll {
    top: calc(var(--base-banner-height) + .25rem)
}

body[data-banner-enabled=true] .webinar-timetable-wrap .cta-top-btn {
    top: var(--base-banner-height)
}

body[data-banner-enabled=true] .webinar-timetable-wrap .cta-top-btn.show,
body[data-banner-enabled=true].corp-landing .header.header--scrolled {
    top: 0
}

body[data-banner-enabled=true].laba-3-0-body .desk {
    margin-top: 1.25rem
}

@media only screen and (min-width:1280px) {
    body[data-banner-enabled=true].laba-3-0-body .desk {
        margin-top: 0
    }
}

body[data-banner-enabled=true].page-article {
    --header-height: 3rem
}

@media only screen and (min-width:768px) {
    body[data-banner-enabled=true].page-article {
        --header-height: 4.1875rem
    }
}

@media only screen and (min-width:1280px) {
    body[data-banner-enabled=true].page-article {
        --header-height: 4.5rem
    }
}

body[data-banner-enabled=true].page-article .base-banner.fixed~.wrapper {
    padding-top: calc(var(--base-banner-height) + var(--header-height))
}

body[data-banner-enabled=true].page-article .base-banner.fixed~.wrapper .header {
    position: absolute
}