.icon {
    display: inline-block;
    height: 1em;
    fill: currentColor;
}
.icon-arrow-right {
    font-size: 2.6em;
    width: 1em;
}
.icon-arrow_link {
    font-size: 2.6em;
    width: 1em;
}
.icon-checkmark {
    font-size: 3.2em;
    width: 1em;
}
.icon-close {
    font-size: 4em;
    width: 1em;
}
.icon-logo {
    font-size: 4.3em;
    width: 1.9069767442em;
}
.icon-logo2 {
    font-size: 3.3em;
    width: 1.2121212121em;
}
.icon-move404 {
    font-size: 9.4em;
    width: 1em;
}
.icon-newLogo {
    font-size: 3.5em;
    width: 3.9428571429em;
}
.icon-underline {
    font-size: 2.2em;
    width: 9.6818181818em;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
a img,
fieldset,
img {
    border: none;
}
input[type="email"],
input[type="tel"],
input[type="text"],
textarea {
    -webkit-appearance: none;
}
button,
input[type="submit"] {
    cursor: pointer;
}
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    padding: 0;
    border: 0;
}
textarea {
    overflow: auto;
}
button,
input {
    margin: 0;
    padding: 0;
    border: 0;
}
a,
a:focus,
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
span,
textarea {
    outline: 0;
}
ol,
ul {
    list-style-type: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
html {
    box-sizing: border-box;
    overflow-x: hidden;
}
*,
:after,
:before {
    box-sizing: inherit;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
}
button {
    -webkit-user-select: none;
    user-select: none;
}
body {
    position: relative;
    max-width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: 16px;
}
@font-face {
    font-family: satoshi;
    font-display: swap;
    src: url(../assets/fonts/Satoshi-Variable.ttf) format("truetype");
}
@font-face {
    font-family: Austin;
    font-display: swap;
    src: url(../assets/fonts/Austin-Light-Web.woff2) format("woff2");
}
@font-face {
    font-family: AustinItalic;
    font-display: swap;
    src: url(../assets/fonts/Austin-LightItalic-Web.woff2) format("woff2");
}
@font-face {
    font-family: editorial;
    font-display: swap;
    src: url(../assets/fonts/EditorialNew-Thin.otf);
}
@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Variable.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.font-italic {
    font-family: AustinItalic, serif;
    font-style: normal;
}
.font-sans {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-family: Austin, sans-serif;
    font-style: normal;
}
.font-light {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-weight: 300;
}
html {
    overflow-x: unset !important;
}
body {
    font-size: 16px;
    background-color: #f9d6d6;
}
.container {
    margin: 0 auto;
}
@media only screen and (max-width: 1440px) {
    .container {
        width: 1280px;
    }
}
#scroller {
    max-width: 100vw;
    overflow: hidden !important;
    position: relative;
    will-change: transform;
    -webkit-perspective: 1px;
    perspective: 1px;
}
canvas {
    isolation: isolate;
}
main {
    position: relative;
}
body {
    font-size: 16px;
    background-color: #f9d6d6;
}
.container {
    margin: 0 auto;
}
@media only screen and (max-width: 1440px) {
    .container {
        width: 1280px;
    }
}
#translate {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    max-height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    pointer-events: none;
}
#first,
#second,
#third {
    visibility: hidden;
}
.split-word {
    overflow: hidden;
    display: inline-block;
    padding-left: 10px;
    margin-left: -10px;
}
.split-char {
    letter-spacing: 0.001px;
    /*line-height: 1;*/
    line-height: 1.12;
    -webkit-text-rendering: optimizeSpeed;
    text-rendering: optimizeSpeed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-left: -10px;
    padding-left: 10px;
    will-change: transform;
}
.whitebg {
    position: relative;
    z-index: 6;
    background-color: #ffdfea;
}
.title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 100px;
    font-weight: 300;
    line-height: 0.93;
    overflow: hidden;
}
@media only screen and (max-width: 1440px) {
    .title {
        font-size: 80px;
    }
}
@media only screen and (max-width: 1200px) {
    .title {
        font-size: 72px;
    }
}
@media only screen and (max-width: 767px) {
    .title {
        font-size: 52px;
    }
}
@media only screen and (max-width: 480px) {
    .title {
        display: block;
    }
}
.text-block {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.22;
    margin-bottom: 20px;
    color: #1b1c1e;
}
@media only screen and (max-width: 1024px) {
    .text-block {
        font-size: 18px;
        line-height: 1.33;
    }
}
.green-pill {
    font-family: Austin, serif;
    font-style: normal;
    /*font-weight: 300;*/
    font-weight: 600;
    /*font-size: 40px;*/
    font-size: 36px;
    line-height: 110%;
    color: #e01d85;
    /*padding: 0.5rem 1rem;*/
    padding: 0.5rem 3rem;
    border: 1px solid #e01d85;
    border-radius: 999px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
@media only screen and (max-width: 1024px) {
    .green-pill {
        font-size: 28px;
    }
}
@media only screen and (max-width: 768px) {
    .green-pill {
        font-size: 24px;
        /*padding: 8px 12px;*/
        padding: 8px 30px;
        /*height: 42px;*/
    }
}
.button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    padding: 19px 30px;
    height: 62px;
    width: 100%;
    border-radius: 34px;
    background-color: #e01d85;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #fff;
    transition: color 0.3s ease-in;
}
@media only screen and (min-width: 768px) {
    .button:hover {
        color: #fff;
    }
    .button:hover .button__arrow {
        stroke: #fff;
    }
    .button:hover .button__hover {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        border-radius: 0;
    }
}
.button__arrow {
    flex-shrink: 0;
    font-size: 26px;
    stroke: #fff;
    margin-left: auto;
}
.button__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
    background-color: #1b1c1e;
    border-radius: 50% 50% 0 0;
    transition: border-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out, border-radius 0.5s ease-out;
    transition: transform 0.5s ease-out, border-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
    pointer-events: none;
}
@media only screen and (max-width: 767px) {
    .button__hover {
        display: none;
    }
}
.button-round {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    /*cursor: pointer;*/
    border: 1px solid #1b1c1e;
    padding: 10px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: transparent;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    line-height: 24px;
    color: #1b1c1e;
    transition: color 0.3s ease-in;
}
@media only screen and (max-width: 767px) {
    .button-round {
        font-size: 18px;
        width: 100px;
        height: 100px;
    }
}
@media only screen and (min-width: 768px) {
    .button-round:hover {
        color: #fff;
    }
    .button-round:hover .button-round__arrow {
        stroke: #fff;
    }
    .button-round:hover .button-round__hover {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        border-radius: 50% 50% 0 0;
    }
}
.button-round__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
    background-color: #1b1c1e;
    border-radius: 35% 35% 0 0;
    transition: border-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out, border-radius 0.5s ease-out;
    transition: transform 0.5s ease-out, border-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
@media only screen and (max-width: 767px) {
    .button-round__hover {
        display: none;
    }
}
.header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    top: 1rem;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    z-index: 100;
    width: 100vw;
    pointer-events: none;
}
.header--mobile {
    display: none;
    top: 11px;
    padding: 0 11px 0 18px;
}
@media only screen and (max-width: 767px) {
    .header {
        display: none;
    }
    .header--mobile {
        display: flex;
    }
}
.header__menu-block {
    z-index: 2;
    display: flex;
    pointer-events: all;
}
.header__menu {
    height: 51px;
    border-radius: 100px;
    background-color: grey;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 24px 11px;
    background-color: #ffdfea;
}
@media only screen and (max-width: 900px) {
    .header__menu {
        padding: 10px 16px 11px;
    }
}
.header__menu:not(.header__menu--help) {
    margin-right: 12px;
}
@media only screen and (max-width: 767px) {
    .header__menu:not(.header__menu--help) {
        margin-right: 4px;
    }
}
.header__menu.with-logo {
    padding-left: 22px;
    padding-right: 26px;
    gap: 0;
}
.header__menu.with-logo .header__menu-item:not(:last-child) {
    margin-right: 12px;
}
@media only screen and (max-width: 767px) {
    .header__menu.with-logo {
        padding: 0;
        background-color: transparent;
    }
}
.header__menu--help {
    background-color: #e01d85;
    color: #fff;
    cursor: pointer;
    font-size: 1.125rem;
    margin-right: 0;
    /*added new css*/
    display:none;
    /*added new css*/
}
.header__logo-animation {
    position: relative;
    width: 180px;
    height: 24px;
}
.header__logo-animation .header__menu-item {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
    opacity: 0;
    text-align: left;
    width: 100%;
    line-height: 24px;
}
.header__logo-link-mob {
    z-index: 2;
    /*extra code*/
    background: #ffdfea;
    border-radius: 100px;
    padding: 0px 10px 0px 15px;
}
.header__menu-item {
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.header__menu-item:not(:last-child) {
    margin-right: 20px;
}
.header__menu-item:hover {
    opacity: 0.78;
}
.header__menu-item.header__logo {
    font-size: 33px;
}
.header .new__custom_menu {
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
}
.header .new__custom_menu .header__menu-item {
    background: #ffdfea;
    height: 51px;
    display: flex;
    margin: 0;
    padding: 0 24px;
    align-items: center;
    color: #000;
    transition: color 0.3s ease-in-out;
}
.header .new__custom_menu .header__menu-item:nth-child(2) {
    margin: 0 2px;
}
.header .new__custom_menu .header__menu-item:nth-child(1) {
    border-radius: 100px 0 0 100px;
}
.header .new__custom_menu .header__menu-item:nth-child(3) {
    margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(4) {
    margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(5) {
    margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(6) {
    border-radius: 0 100px 100px 0;
}
.header .new__custom_menu .header__menu-item:hover {
    opacity: 1;
    color: rgba(0, 0, 0, 0.75);
}
.header__menu--button {
    cursor: pointer;
}
.header__menu--button .header__menu-icon-top {
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
    transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
}
.header__menu--button .header__menu-icon-bottom {
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
    transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
}
.header__menu--button.is-active .header__menu-icon-top {
    -webkit-transform: translate(2px, -8px) rotate(45deg);
    transform: translate(2px, -8px) rotate(45deg);
}
.header__menu--button.is-active .header__menu-icon-bottom {
    -webkit-transform: translate(2px, 7px) rotate(-45deg);
    transform: translate(2px, 7px) rotate(-45deg);
}
.header__logo-animation .header__menu-item:nth-child(1) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 0s;
}

.header__logo-animation .header__menu-item:nth-child(2) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 2.15s;
}

.header__logo-animation .header__menu-item:nth-child(3) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 4.3s;
}

.header__logo-animation .header__menu-item:nth-child(4) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 6.45s;
}

.header__logo-animation .header__menu-item:nth-child(5) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 8.6s;
}

.header__logo-animation .header__menu-item:nth-child(6) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 10.75s;
}

.header__logo-animation .header__menu-item:nth-child(7) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 12.9s;
}

.header__logo-animation .header__menu-item:nth-child(8) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 15.05s;
}

.header__logo-animation .header__menu-item:nth-child(9) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 17.2s;
}

.header__logo-animation .header__menu-item:nth-child(10) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 19.35s;
}

.header__logo-animation .header__menu-item:nth-child(11) {
    animation: logo-title 23.65s infinite ease-in-out;
    animation-delay: 21.5s;
}

@keyframes logo-title {
    0% {
        transform: translateY(24px);
        opacity: 0;
    }
    4.22% {
        transform: translateY(0);
        opacity: 1;
    }
    8.44% {
        transform: translateY(0);
        opacity: 1;
    }
    12.65% {
        transform: translateY(-24px);
        opacity: 0;
    }
    12.66% {
        transform: translateY(24px);
        opacity: 0;
    }
    100% {
        transform: translateY(24px);
        opacity: 0;
    }
}
.menu {
    position: fixed;
    top: 0;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    background-color: #f9d6d6;
    padding: 0 28px 28px;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.menu.is-active {
    transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.menu__list {
    list-style: none;
    margin-top: 124px;
}
.menu__list li {
    margin-bottom: 28px;
}
.menu__list-item {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 42px;
    font-weight: 300;
    line-height: 38px;
    cursor: pointer;
}
.menu__list-item i {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-size: 42px;
    font-weight: 300;
    line-height: 38px;
}
.menu__list-item:hover {
    opacity: 0.8;
}
.menu__socials {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    justify-content: space-between;
}
.menu__social-btn {
    font-size: 18px;
    padding-left: 26px;
    padding-right: 26px;
}
.menu__social {
    display: block;
    width: calc(50% - 5px);
    margin-bottom: 10px;
}
.menu__social:last-child {
    width: 100%;
    margin-bottom: 0;
}
.hero {
    position: relative;
    width: 100%;
    z-index: 5;
    margin-bottom: -40vw;
    -webkit-backface-visibility: hidden;
}
@media only screen and (max-width: 767px) {
    .hero {
        margin-bottom: -50vw;
    }
}
.hero__podium {
    width: 88%;
    height: 44vw;
    background-color: #ffdfea;
    /*new css added*/
    background-image: url(https://iifjs.com/wp-content/uploads/2025/05/Semi-circle-below-pink-dot_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    /*new css added*/
    overflow: hidden;
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    position: relative;
    margin: 0 auto;
    margin-top: -118px;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
}
@media only screen and (max-width: 1200px) {
    .hero__podium {
        margin-top: -90px;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__podium {
        margin-top: -70px;
    }
}
@media only screen and (max-width: 992px) {
    .hero__podium {
        width: 100vw;
        height: 55vw;
    }
}
@media only screen and (max-width: 767px) {
    .hero__podium {
        width: calc(100vw - 20px);
        height: 55vw;
        margin-top: 0;
    }
}
.hero__podium-text {
    font-family: Austin, serif;
    font-style: normal;
    /*font-size: 90px;*/
    font-size: 70px;
    line-height: 0.96;
    letter-spacing: 0;
    text-align: center;
    padding-top: 215px;
    width: 800px;
    margin: 0 auto;
    color: #1b1c1e;
    opacity: 1;
}
@media only screen and (max-width: 1440px) {
    .hero__podium-text {
        font-size: 72px;
        width: 700px;
        padding-top: 170px;
    }
}
@media only screen and (max-width: 1200px) {
    .hero__podium-text {
        font-size: 58px;
        width: 640px;
        padding-top: 130px;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__podium-text {
        font-size: 46px;
        width: 590px;
        padding-top: 100px;
    }
}
@media only screen and (max-width: 992px) {
    .hero__podium-text {
        width: 510px;
        padding-top: 126px;
        font-size: 68px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__podium-text {
        /*font-size: 40px;*/
        font-size: 34px;
        width: 315px;
        padding-top: 10%;
    }
}
.hero__podium-text .italic {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-size: inherit;
    display: inline-block;
}
.hero__podium-text .italic--wave {
    position: relative;
}
.hero__podium-text .italic--wave .hero__underline {
    width: 100%;
    height: auto;
    bottom: -28px;
    z-index: -1;
}
.hero__podium-text .italic--wave .hero__underline img {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
@media only screen and (max-width: 1200px) {
    .hero__podium-text .italic--wave .hero__underline {
        bottom: -14px;
    }
}
.hero__podium-text .italic--line {
    position: relative;
}
.hero__podium-text .italic--line .hero__underline {
    height: 5px;
    background-color: #e01d85;
    width: 100%;
    position: absolute;
    bottom: 0;
}
@media only screen and (max-width: 1200px) {
    .hero__podium-text .italic--line .hero__underline {
        height: 3px;
    }
}
.hero__underline {
    position: absolute;
    overflow: hidden;
    bottom: -15px;
    left: 0;
    right: 0;
    width: 100%;
}
.hero__underline img {
    height: 22px;
}
@media only screen and (max-width: 1200px) {
    .hero__underline img {
        height: 12px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__underline {
        stroke: 3px;
        bottom: -16px;
    }
}
.hero__ball {
    display: block;
    position: relative;
    width: 610px;
    height: 610px;
    margin: -305px auto 0;
    border-radius: 50%;
    -webkit-transform: translate3d(0 -200vh 0);
    transform: translate3d(0 -200vh 0);
    z-index: 2;
}
.hero__ball img {
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 1440px) {
    .hero__ball {
        width: 500px;
        height: 500px;
        margin: -250px auto 0;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__ball {
        width: 380px;
        height: 380px;
        margin: -190px auto 0;
    }
}
@media only screen and (max-width: 767px) {
    .hero__ball {
        width: 250px;
        height: 250px;
        margin: -125px auto 0;
    }
}
.hero__space {
    width: 610px;
    margin: 0 auto;
    height: 65vh;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
@media only screen and (max-width: 1440px) {
    .hero__space {
        width: 500px;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__space {
        width: 380px;
    }
}
@media only screen and (max-width: 767px) {
    .hero__space {
        width: 250px;
        height: 40vh;
    }
}
.hero__title {
    position: absolute;
    z-index: 4;
    width: 610px;
    /*top: 49vh;*/
    top: 47vh;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
}
@media only screen and (max-width: 767px) {
    .hero__title {
        top: 30vh;
    }
}
.hero__name {
    /*font-family: Austin, serif;*/
    font-family: ALANTA ROSERY;
    font-style: normal;
    font-size: 200px;
    color: #1b1c1e;
    line-height: 0.5;
    margin-left: -450px;
}
@media only screen and (max-width: 1440px) {
    .hero__name {
        /*font-size: 160px;*/
        font-size: 130px;
        /*margin-left: -350px;*/
        margin-left: -314px;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__name {
        font-size: 92px;
        margin-left: -240px;
    }
}
@media only screen and (max-width: 599px) {
    .hero__name {
        /*margin-left: -190px;*/
        margin-left: -170px;
        font-size: 80px;
    }
}
.hero__surname {
    /*font-family: Austin, serif;*/
    font-family: ALANTA ROSERY;
    font-style: normal;
    font-size: 200px;
    color: #1b1c1e;
    line-height: 1.2;
    margin-left: 326px;
}
@media only screen and (max-width: 1440px) {
    .hero__surname {
        /*font-size: 160px;*/
        font-size: 130px;
        margin-right: 50px;
    }
}
@media only screen and (max-width: 1024px) {
    .hero__surname {
        font-size: 92px;
        margin-left: 160px;
    }
}
@media only screen and (max-width: 599px) {
    .hero__surname {
        margin-left: 100px;
        font-size: 80px;
    }
}
.hero__bottom-space {
    width: 100vw;
    height: 1260px;
    margin: 0 auto 0;
    position: relative;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: calc(var(--vh, 1vh) * -50 + 305px);
}
.hero__bottom-space::-webkit-scrollbar {
    display: none;
}
.hero__podium-bg {
    z-index: 1;
    background-color: #f9d6d6;
    width: 1260px;
    position: relative;
    margin: -630px auto 0;
    height: 300px;
}
@media only screen and (max-width: 1440px) {
    .hero__podium-bg {
        margin-top: -512px;
        height: 400px;
    }
}
.hero__dashes-section {
    position: absolute;
    height: 110vh;
    width: 100vw;
    z-index: 0;
    height: 110vh;
    height: calc(65vh + 200px + 20vw);
}
@media only screen and (max-width: 992px) {
    .hero__dashes-section {
        height: calc(65vh + 200px + 20vw);
    }
}
@media only screen and (max-width: 767px) {
    .hero__dashes-section {
        height: calc(68vh + 125px + 20vw);
    }
}
@media only screen and (max-width: 460px) {
    .hero__dashes-section {
        height: calc(72vh + 125px + 20vw);
    }
}
.hero__dashes-section .hero__space {
    background-color: #f9d6d6;
}
.hero__dashes {
    overflow: hidden;
    position: absolute;
    top: 0;
    margin: 0 auto;
    background-color: #f9d6d6;
    background-repeat: repeat-x;
    height: 100%;
    width: 78vw;
    left: 11vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24)),
        linear-gradient(to left, transparent 1px, transparent calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24));
    background-size: calc((78vw - 1px) / 24) 100%, calc((78vw - 1px) / 24) 93%;
    background-position-x: calc((78vw - 1px) / 24 / 2), calc((78vw - 1px) / 24);
}
@media only screen and (max-width: 992px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14)),
            linear-gradient(to left, transparent 1px, transparent calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14));
        background-size: calc((88vw - 4px) / 14) 100%, calc((88vw - 4px) / 14) 93%;
        background-position-x: calc((88vw - 4px) / 14 / 2), calc((88vw - 4px) / 14);
    }
}
@media only screen and (max-width: 767px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10)),
            linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10));
        background-size: calc((88vw - 2px) / 10) 98%, calc((88vw - 2px) / 10) 97%;
        background-position-x: calc((88vw - 2px) / 10 / 2), calc((88vw - 2px) / 10);
    }
}
@media only screen and (max-width: 520px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8)),
            linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8));
        background-size: calc((88vw - 2px) / 8) 100%, calc((88vw - 2px) / 8) 97%;
        background-position-x: calc((88vw - 2px) / 8 / 2), calc((88vw - 2px) / 8);
    }
}
.introduction {
    position: relative;
    z-index: 4;
    width: 88%;
    margin: 0 auto;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    background-color: #f4c2c2;
    padding-top: 46.5277777778vw;
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    padding-bottom: 515px;
}
@media only screen and (max-width: 1200px) {
    .introduction {
        padding-bottom: 515px;
        padding-top: 46.5277777778vw;
    }
}
@media only screen and (max-width: 992px) {
    .introduction {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .introduction {
        width: calc(100% - 20px);
        padding: 0 18px 156px;
        margin: 64px auto 0;
        padding-top: 61.0666666667vw;
    }
}
.introduction .font-italic div div:nth-child(2) {
    padding-right: 5px;
}
.introduction .font-italic div div:nth-child(3) {
    padding-left: 5px;
}
.introduction__title {
    margin-bottom: 25px;
}
@media only screen and (min-width: 416px) {
    .introduction__title br {
        display: none;
    }
}
.introduction__info {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .introduction__info {
        flex-direction: column;
        margin-top: 22px;
    }
}
.introduction__info-block {
    width: 50%;
}
@media only screen and (max-width: 767px) {
    .introduction__info-block {
        width: 100%;
    }
}
.introduction__info-block.with-padding {
    padding-left: 38px;
}
@media only screen and (max-width: 1024px) {
    .introduction__info-block.with-padding {
        padding-left: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .introduction__info-block.with-padding {
        padding-left: 0;
    }
}
.introduction__paragraph {
    width: 480px;
}
@media only screen and (max-width: 1440px) {
    .introduction__paragraph {
        width: 400px;
    }
}
@media only screen and (max-width: 1200px) {
    .introduction__paragraph {
        width: 360px;
    }
}
@media only screen and (max-width: 1024px) {
    .introduction__paragraph {
        width: 300px;
    }
}
@media only screen and (max-width: 767px) {
    .introduction__paragraph {
        width: 100%;
    }
}
.introduction__also {
    display: inline-block;
}
.principles__also {
    display: inline-block;
}
@media only screen and (max-width: 767px) {
    .introduction__also {
        display: none;
    }
}
.introduction__also--mobile {
    display: none;
}
@media only screen and (max-width: 767px) {
    .introduction__also--mobile {
        display: block;
    }
}
@media only screen and (max-width: 416px) {
    .introduction__also--mobile {
        /*display: inline-block;*/
        /*margin-top: 5px;*/
        margin-top: 25px;
        /*position: absolute;*/
        /*margin-left: 10px;*/
    }
}
.snake__ball {
    position: relative;
    width: 630px;
    height: 630px;
    margin: -315px auto -315px;
    background-color: #e01d85;
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    z-index: 4;
    margin-bottom: 247px;
    overflow: visible;
    isolation: isolate;
    will-change: transform;
}
@media only screen and (max-width: 1440px) {
    .snake__ball {
        width: 500px;
        height: 500px;
        margin: -250px auto 247px;
    }
}
@media only screen and (max-width: 1024px) {
    .snake__ball {
        width: 380px;
        height: 380px;
        margin: -250px auto 247px;
    }
}
@media only screen and (max-width: 767px) {
    .snake__ball {
        width: 330px;
        height: 330px;
        margin: 0 auto 247px;
        margin-bottom: 185px;
    }
}
.snake__image {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    display: block;
    overflow: hidden;
    will-change: transform;
}
.snake__image-1 {
    width: 470px;
    height: 836px;
    left: 0;
    padding: 2px;
}
.snake__image-1.is-savemode {
    display: none;
}
@media only screen and (max-width: 1440px) {
    .snake__image-1 {
        left: -8%;
    }
}
@media only screen and (max-width: 1200px) {
    .snake__image-1 {
        width: 352px;
        height: 450px;
    }
}
@media only screen and (max-width: 1024px) {
    .snake__image-1 {
        left: -5%;
    }
}
@media only screen and (max-width: 767px) {
    .snake__image-1 {
        /*width: 200px;*/
        width: 180px;
        height: 253px;
        /*left: 10%;*/
        left: 18%;
        top: 14%;
    }
}
.snake__image-2 {
    width: 360px;
    height: 240px;
    object-position: center 18%;
    right: 0;
}
.snake__image-2 img {
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 1440px) {
    .snake__image-2 {
        right: -8%;
    }
}
@media only screen and (max-width: 1200px) {
    .snake__image-2 {
        width: 288px;
        height: 180px;
        right: -5%;
    }
}
@media only screen and (max-width: 767px) {
    .snake__image-2 {
        top: 14%;
        right: 10%;
        width: 178px;
        height: auto;
    }
}
.snake .card {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.snake .card:not(:first-child) {
    object-position: center 18%;
}
.snake__snake-container {
    position: relative;
    width: 500px;
    height: 811.4035087719px;
    margin: 0 auto;
}
@media only screen and (max-width: 1440px) {
    .snake__snake-container {
        width: 460px;
    }
}
@media only screen and (max-width: 1024px) {
    .snake__snake-container {
        width: 330px;
        height: 535.5263157895px;
    }
}
.snake__snake {
    z-index: 1;
    width: 500px;
    height: 811.4035087719px;
    position: absolute;
    display: block;
    top: -20px;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed;
}
.snake__snake path {
    stroke: transparent;
    fill: none;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    shape-rendering: optimizeSpeed;
}
@media only screen and (max-width: 1440px) {
    .snake__snake {
        width: 460px;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}
@media only screen and (max-width: 1024px) {
    .snake__snake {
        width: 330px;
        height: 535.5263157895px;
    }
}
.snake__text {
    font-size: 4px;
    font-family: Austin, serif;
    font-style: normal;
    pointer-events: none;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed;
}
.portfolio {
    position: relative;
    z-index: 3;
}
.portfolio__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 3rem;
    text-align: center;
    color: #1b1c1e;
    font-weight: 300;
    margin-bottom: 48px;
}
@media only screen and (max-width: 767px) {
    .portfolio__title {
        font-size: 1.875rem;
    }
}
.portfolio__items {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box;
}
@media only screen and (min-width: 768px) {
    .portfolio__items {
        padding-bottom: 218px;
        display: block;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__items {
        padding-bottom: 90px;
    }
}
.portfolio__item {
    cursor: pointer;
    position: relative;
    display: block;
}
@media only screen and (max-width: 767px) {
    .portfolio__item {
        border: 1px solid #1b1c1e;
        border-radius: 50%;
        width: 71vw;
        height: 71vw;
    }
    .portfolio__item .portfolio__item-title {
        font-size: 30px;
    }
    .portfolio__item .portfolio__item-descr {
        font-size: 16px;
    }
    .portfolio__item:hover .portfolio__image-darken {
        background-color: rgba(0, 0, 0, 0.5647058824);
    }
    .portfolio__item:nth-child(1) {
        margin-top: 0vw;
        margin-left: -8.5333333333vw;
        height: 74.6666666667vw;
        width: 74.6666666667vw;
    }
    .portfolio__item:nth-child(1) .portfolio__item-descr {
        width: 154px;
        margin: 0 auto;
        margin-top: 8px;
    }
    .portfolio__item:nth-child(2) {
        margin-top: 0vw;
        margin-left: 35.7333333333vw;
        height: 64vw;
        width: 64vw;
    }
    .portfolio__item:nth-child(2) .portfolio__item-descr {
        margin-top: 18px;
    }
    .portfolio__item:nth-child(3) {
        margin-top: -14.6666666667vw;
        margin-left: -6.6666666667vw;
        height: 53.3333333333vw;
        width: 53.3333333333vw;
    }
    .portfolio__item:nth-child(3) .portfolio__item-descr {
        width: 130px;
        margin: 0 auto;
        margin-top: 11px;
    }
    .portfolio__item:nth-child(4) {
        margin-top: -14.1333333333vw;
        margin-left: 35.7333333333vw;
        height: 64.5333333333vw;
        width: 64.5333333333vw;
    }
    .portfolio__item:nth-child(4) .portfolio__item-descr {
        width: 154px;
        margin: 0 auto;
        margin-top: 8px;
    }
    .portfolio__item:nth-child(5) {
        margin-top: -4.8vw;
        margin-left: -5.8666666667vw;
        height: 74.6666666667vw;
        width: 74.6666666667vw;
    }
    .portfolio__item:nth-child(5) .portfolio__item-descr {
        width: 140px;
        margin: 0 auto;
        margin-top: 11px;
    }
    .portfolio__item:nth-child(6) {
        margin-top: -8vw;
        margin-left: 46.9333333333vw;
        height: 53.3333333333vw;
        width: 53.3333333333vw;
    }
    .portfolio__item:nth-child(6) .portfolio__item-descr {
        width: 110px;
        margin: 0 auto;
        margin-top: 11px;
    }
}
@media only screen and (min-width: 768px) {
    .portfolio__item {
        transition: z-index 0.7s linear;
    }
    .portfolio__item.is-active {
        z-index: 100;
    }
    .portfolio__item.is-active .portfolio__image-container {
        transition: -webkit-clip-path 0.7s ease-in-out 0.4s;
        transition: clip-path 0.7s ease-in-out 0.4s;
        transition: clip-path 0.7s ease-in-out 0.4s, -webkit-clip-path 0.7s ease-in-out 0.4s;
        flex-shrink: 0;
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%);
    }
    .portfolio__item.is-active img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    .portfolio__item.is-active .portfolio__item-title {
        color: #e01d85;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    .portfolio__item.is-active .portfolio__item-descr {
        color: #e01d85;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    .portfolio__item.is-inactive {
        z-index: 1;
    }
    .portfolio__item.is-inactive .portfolio__item-title {
        opacity: 30%;
    }
    .portfolio__item.is-inactive .portfolio__item-descr {
        opacity: 30%;
    }
    .portfolio__item.is-active .portfolio__image-container.first_transition {
        transition: -webkit-clip-path 0.7s ease-in-out 0s;
        transition: clip-path 0.7s ease-in-out 0s;
        transition: clip-path 0.7s ease-in-out 0s, -webkit-clip-path 0.7s ease-in-out 0s;
    }
}
@media only screen and (min-width: 768px) {
    .portfolio__headers {
        margin: 0 auto;
        display: block;
        width: 100%;
    }
    .portfolio__headers:not(:last-child) {
        padding-bottom: 76px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__headers {
        z-index: 2;
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
.portfolio__item-title {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    text-align: center;
    color: #1b1c1e;
    /*font-size: 100px;*/
    font-size: 60px;
    font-weight: 300;
    line-height: 0.98;
    z-index: 1;
    transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (max-width: 1440px) {
    .portfolio__item-title {
        /*font-size: 80px;*/
        font-size: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__item-title {
        font-size: 2.25rem;
        line-height: 1.05;
        -webkit-user-select: none;
        user-select: none;
    }
}
.portfolio__item-descr {
    position: relative;
    font-family: satoshi, sans-serif;
    font-style: normal;
    text-align: center;
    color: #1b1c1e;
    font-weight: 300;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 2px;
    z-index: 1;
    transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (max-width: 1440px) {
    .portfolio__item-descr {
        font-size: 1.125rem;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__item-descr {
        font-size: 1.125rem;
        margin-top: 8px;
        line-height: 1.33;
        -webkit-user-select: none;
        user-select: none;
    }
}
.portfolio__image-container {
    position: absolute;
    z-index: 0;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: -webkit-clip-path 0.7s ease-in-out 0s;
    transition: clip-path 0.7s ease-in-out 0s;
    transition: clip-path 0.7s ease-in-out 0s, -webkit-clip-path 0.7s ease-in-out 0s;
    pointer-events: none;
}
@media only screen and (min-width: 768px) {
    .portfolio__image-container {
        -webkit-clip-path: circle(0);
        clip-path: circle(0);
    }
}
.portfolio__image-container--1 {
    top: -100%;
    left: -20%;
}
.portfolio__image-container--2 {
    top: -20vw;
    left: 50%;
    width: 44vw;
    height: 44vw;
}
.portfolio__image-container--3 {
    width: 38vw;
    height: 38vw;
    left: -4%;
    top: -10vw;
}
.portfolio__image-container--4 {
    top: -20vw;
    left: 50%;
    width: 44vw;
    height: 44vw;
}
.portfolio__image-container--5 {
    width: 44vw;
    height: 44vw;
    left: 1.4vw;
    top: -5.28vw;
}
.portfolio__image-container--6 {
    width: 38vw;
    height: 38vw;
    left: 58%;
    bottom: -1.52vw;
}
.portfolio__image-container--7 {
    width: 50vw;
    height: 50vw;
    left: 62.5%;
    top: -31vw;
}
@media only screen and (max-width: 767px) {
    .portfolio__image-container {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        pointer-events: all;
        width: 100%;
        height: 100%;
    }
}
.portfolio__image {
    width: 100%;
    height: 100%;
}
.portfolio__image img {
    width: 100%;
    height: 100%;
    object-position: center center;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform 10s ease-out;
    transition: transform 10s ease-out;
    transition: transform 10s ease-out, -webkit-transform 10s ease-out;
}
@media only screen and (max-width: 767px) {
    .portfolio__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #e01d85;
        position: absolute;
        bottom: 0;
        right: 20%;
        color: #fff;
        font-size: 26px;
    }
}
.portfolio__arrow {
    font-size: 21px;
    stroke: #fff;
}
@media only screen and (min-width: 768px) {
    .portfolio__arrow {
        display: none;
    }
}
.portfolio__dashes {
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: -800px;
    bottom: 0;
    background-color: #f9d6d6;
    background-repeat: repeat-x;
    width: 88vw;
    left: 6vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28)),
        linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28));
    background-size: calc((88vw - 1px) / 28) 100%, calc((88vw - 1px) / 28) 100%;
    background-position-x: calc((88vw - 1px) / 28 / 2), calc((88vw - 1px) / 28);
}
@media only screen and (max-width: 992px) {
    .portfolio__dashes {
        width: calc(100vw - 48px);
        left: 24px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16));
        background-size: calc((100vw - 48px - 1px) / 16) 100%, calc((100vw - 48px - 1px) / 16) 100%;
        background-position-x: calc((100vw - 48px - 1px) / 16 / 2), calc((100vw - 48px - 1px) / 16);
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__dashes {
        width: calc(100vw - 20px);
        left: 10px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12));
        background-size: calc((100vw - 20px - 1px) / 12) 100%, calc((100vw - 20px - 1px) / 12) 100%;
        background-position-x: calc((100vw - 20px - 1px) / 12 / 2), calc((100vw - 20px - 1px) / 12);
    }
}
@media only screen and (max-width: 520px) {
    .portfolio__dashes {
        width: calc(100vw - 20px);
        left: 11px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10));
        background-size: calc((100vw - 20px - 2px) / 10) 100%, calc((100vw - 20px - 2px) / 10) 100%;
        background-position-x: calc((100vw - 20px - 2px) / 10 / 2), calc((100vw - 20px - 2px) / 10);
    }
}
.portfolio .its-safari {
    width: 89vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28)),
        linear-gradient(to left, transparent 1px, transparent calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28));
    background-size: calc((89vw - 1px) / 28) 100%, calc((89vw - 1px) / 28) 100%;
    background-position-x: calc((89vw - 1px) / 28 / 2), calc((89vw - 1px) / 28);
}
.portfolio .its-windows {
    width: 88vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28)),
        linear-gradient(to left, transparent 1px, transparent calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28));
    background-size: calc((88vw - 17px) / 28) 100%, calc((88vw - 17px) / 28) 100%;
    background-position-x: calc((88vw - 17px) / 28 / 2), calc((88vw - 17px) / 28);
}
.portfolio .this-is-test-for-deploy {
    opacity: 1;
}
.portfolio__space {
    background-color: #fbe0e0;
    width: 610px;
    top: -800px;
    bottom: 0;
    position: absolute;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: calc((100vw - 610px) / 2);
    z-index: -1;
}
@media only screen and (max-width: 1440px) {
    .portfolio__space {
        width: 500px;
        left: calc((100vw - 500px) / 2);
    }
}
@media only screen and (max-width: 1024px) {
    .portfolio__space {
        width: 380px;
        left: calc((100vw - 380px) / 2);
    }
}
@media only screen and (max-width: 767px) {
    .portfolio__space {
        width: 250px;
        left: calc((100vw - 250px) / 2);
    }
}
.modals {
    height: 0;
    overflow: hidden;
}
.modal {
    position: relative;
    top: 0;
    opacity: 1;
    pointer-events: all;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #fff;
    overflow: hidden;
    transition: opacity 0.3s ease-out;
    position: relative;
}
@media only screen and (max-width: 992px) {
    .modal {
        overflow: visible;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
}
.modal__progress {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 100;
    width: calc(50% - 40px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media only screen and (max-width: 992px) {
    .modal__progress {
        display: none;
    }
}
.modal__progress-number {
    color: #fff;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
}
.modal__progress-bar {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 11px 28px 0 20px;
}
.modal__progress-bar-inner {
    width: 100%;
    height: 2px;
    background-color: #fff;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.modal .slide-content {
    width: 50vw;
    height: calc(var(--vh, 1vh) * 100);
}
@media only screen and (max-width: 992px) {
    .modal .slide-content {
        width: 100%;
    }
}
.modal__wrapper {
    width: 100%;
    display: flex;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.modal__wrapper::-webkit-scrollbar {
    display: none;
}
.modal.is-active {
    opacity: 1;
    pointer-events: all;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.modal__close {
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 2000;
}
.modal__close:hover .modal__close-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
@media only screen and (max-width: 992px) {
    .modal__close {
        border-radius: 50%;
        width: 44px;
        height: 44px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.modal__close-icon {
    font-size: 40px;
    stroke: #1b1c1e;
    stroke-width: 2px;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
@media only screen and (max-width: 992px) {
    .modal__close-icon {
        font-size: 22px;
        stroke-width: 4px;
    }
}
.portfolio-content {
    position: relative;
}
.portfolio-content__slider {
    width: 50%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__slider {
        display: none;
    }
}
.portfolio-content__awards {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 0 30px 0 0;
    z-index: 1;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__awards {
        padding: 0 16px 9px 0;
    }
}
.portfolio-content__awards canvas {
    width: 100%;
    height: 100%;
}
.portfolio-content__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.portfolio-content__image img {
    max-width: 90%;
    max-height: 80%;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__image {
        width: 80%;
    }
}
.portfolio-content__slide-number {
    position: absolute;
    bottom: 18px;
    left: 20px;
    color: #ffdfea;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
}
.portfolio-content__slide-total {
    position: absolute;
    bottom: 18px;
    right: 18px;
    color: #ffdfea;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
}
.portfolio-content video {
    width: calc(100% - 60px);
    height: auto;
    z-index: 2;
}
.portfolio-content__content {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__content {
        width: 100%;
    }
}
@media only screen and (min-width: 992px) {
    .portfolio-content__content .portfolio-content__slide {
        display: none;
    }
}
.portfolio-content__block {
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    padding: 22px 70px 0 34px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.portfolio-content__block.is-active {
    pointer-events: all;
}
.portfolio-content__block:not(:first-child) {
    margin-top: calc(var(--vh, 1vh) * -100);
}
@media only screen and (max-width: 992px) {
    .portfolio-content__block {
        pointer-events: all;
        padding: 16px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .portfolio-content__block:not(:first-child) {
        margin-top: 0;
    }
}
.portfolio-content__title {
    font-family: Austin, serif;
    font-style: normal;
    /*font-size: 100px;*/
    font-size: 68px;
    font-weight: 300;
    line-height: 1;
    z-index: 2;
}
@media only screen and (max-width: 1280px) {
    .portfolio-content__title {
        /*font-size: 72px;*/
        font-size: 60px;
    }
}
@media only screen and (max-width: 992px) {
    .portfolio-content__title {
        /*font-size: 56px;*/
        font-size: 45px;
    }
}
.portfolio-content__signature {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 8px;
    margin-bottom: 30px;
    z-index: 2;
}
@media only screen and (max-width: 1280px) {
    .portfolio-content__signature {
        margin-top: 12px;
        font-size: 18px;
    }
}
.portfolio-content__pill {
    height: 45px;
    padding: 0 16px;
    background-color: #1b1c1e;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 45px;
    color: #f4c2c2;
    margin-bottom: 15px;
    border-radius: 22px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.portfolio-content__bottom-content {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    right: 0;
    left: 0;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__bottom-content {
        position: relative;
        display: flex;
        bottom: 0;
    }
}
.portfolio-content__live {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 2;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__live {
        position: relative;
        margin-left: auto;
        margin-top: 48px;
        margin-bottom: 12px;
        right: unset;
        bottom: unset;
    }
}
.portfolio-content__download {
    width: 200px;
    height: 200px;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__download {
        width: 180px;
        height: 180px;
    }
}
.portfolio-content__text-content {
    z-index: 2;
}
.portfolio-content__text-content p {
    margin-bottom: 30px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
}
@media only screen and (max-width: 1280px) {
    .portfolio-content__text-content p {
        font-size: 18px;
    }
}
.portfolio-content__text-content b {
    font-weight: 700;
    font-size:18px;
}
.portfolio-content__buttons {
    bottom: 20px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    position: absolute;
}
@media only screen and (max-width: 1200px) {
    .portfolio-content__buttons {
        flex-direction: column;
    }
}
@media only screen and (max-width: 992px) {
    .portfolio-content__buttons {
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
        margin-top: 30px;
    }
}
.portfolio-content__link {
    display: block;
    width: calc(50% - 6px);
}
.jwlx .portfolio-content__link {
    display: block;
    width: calc(37% - 6px);
}
@media only screen and (max-width: 1200px) {
    .portfolio-content__link {
        width: 100%;
    }
    .jwlx .portfolio-content__link {
        width: 100%;
    }
    .portfolio-content__link:first-child {
        margin-bottom: 10px;
    }
}
.portfolio-content__link--single {
    width: 100%;
}
.portfolio-content__link--single:first-child {
    margin-bottom: 0;
}
.portfolio-content__button {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    border: 1px solid #1b1c1e;
    background-color: transparent;
    color: #1b1c1e;
    height: 62px;
    width: 100%;
}
.portfolio-content__button .button__arrow {
    stroke: #1b1c1e;
}
.portfolio-content__slide {
    height: 100%;
    width: 50%;
    top: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__slide {
        position: relative;
        visibility: visible !important;
        opacity: 1 !important;
        height: unset;
        width: 100%;
    }
}
.portfolio-content__outer {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__outer {
        overflow-y: visible;
    }
}
.portfolio-content__inner {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__inner {
        overflow-y: visible;
    }
}
.portfolio-content__bg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-size: cover;
    background-size: contain;
    background-position: center;
}
@media only screen and (max-width: 992px) {
    .portfolio-content__bg {
        position: relative;
        height: 80vw;
        width: 100%;
        overflow: hidden;
        min-width: 100%;
        display: flex;
        margin-bottom: 30px;
    }
}
.principles {
    position: relative;
    overflow: hidden;
    width: 88%;
    z-index: 2;
    margin: 0 auto;
    padding-top: 132px;
    padding-bottom: 384px;
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    background-color: #f4c2c2;
    border-radius: 0 0 9999px 9999px;
}
@media only screen and (max-width: 1200px) {
    .principles {
        padding-bottom: 515px;
    }
}
@media only screen and (max-width: 1024px) {
    .principles {
        padding: 132px 48px 300px;
        padding-bottom: 300px;
    }
}
@media only screen and (max-width: 992px) {
    .principles {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .principles {
        width: calc(100% - 20px);
        padding: 26px 18px 198px;
    }
}
.principles__title {
    position: relative;
    overflow: hidden;
    z-index: 3;
    margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
    .principles__title {
        margin-bottom: 10px;
        padding-bottom: 13px;
    }
}
@media only screen and (max-width: 480px) {
    .principles__title {
        display: block;
    }
}
.principles .principles__title div:nth-child(1) {
    padding-bottom: 6px;
}
.principles .principles__title .for-relative {
    position: relative;
    display: inline-block;
    top: -6px;
}
.principles .font-italic {
    margin-left: 15px;
}
.principles .font-italic div {
    padding-bottom: 6px;
}
.principles .font-italic div div:nth-child(1),
.principles .font-italic div div:nth-child(2),
.principles .font-italic div div:nth-child(8) {
    padding-right: 5px;
}
.principles .font-italic div div:nth-child(2),
.principles .font-italic div div:nth-child(3),
.principles .font-italic div div:nth-child(9) {
    padding-left: 5px;
}
.principles__info {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .principles__info {
        flex-direction: column;
        gap: 28px;
    }
}
.principles__info-block {
    width: 50%;
}
@media only screen and (max-width: 767px) {
    .principles__info-block {
        width: 100%;
    }
}
.principles__info-block:not(:first-child) {
    padding-left: 38px;
}
@media only screen and (max-width: 1024px) {
    .principles__info-block:not(:first-child) {
        padding-left: 16px;
    }
}
@media only screen and (max-width: 767px) {
    .principles__info-block:not(:first-child) {
        padding-left: 0;
    }
}
.principles__paragraph {
    max-width: 480px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 1440px) {
    .principles__paragraph {
        width: 400px;
    }
}
@media only screen and (max-width: 1200px) {
    .principles__paragraph {
        width: 360px;
    }
}
@media only screen and (max-width: 1024px) {
    .principles__paragraph {
        width: 300px;
    }
}
@media only screen and (max-width: 767px) {
    .principles__paragraph {
        width: 100%;
    }
}
.principles__paragraph:first-child {
    width: 480px;
}
@media only screen and (max-width: 1440px) {
    .principles__paragraph:first-child {
        width: 480px;
    }
}
@media only screen and (max-width: 1200px) {
    .principles__paragraph:first-child {
        width: 380px;
    }
}
@media only screen and (max-width: 1024px) {
    .principles__paragraph:first-child {
        width: 340px;
    }
}
@media only screen and (max-width: 767px) {
    .principles__paragraph:first-child {
        width: 100%;
    }
}
.principles__items {
    position: relative;
    display: flex;
    flex-direcrion: row;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 2;
    margin-top: 70px;
}
@media only screen and (max-width: 768px) {
    .principles__items {
        flex-direction: column;
        margin-top: 40px;
    }
}
.principles__item {
    /*display: flex;*/
    flex-direction: row;
    align-items: center;
    min-width: none;
    /*height: 160px;*/
    border-radius: 160px;
    width: calc(50% - 24px);
    margin-bottom: 30px;
    padding: 30px 40px 30px 40px;
    /*background-color: #ffdfea;*/
    background-color: #e01d85;
}
@media only screen and (max-width: 1280px) {
    .principles__item {
        width: calc(50% - 12px);
    }
}
@media only screen and (max-width: 768px) {
    .principles__item {
        width: 100%;
        /*height: 90px;*/
        margin-bottom: 14px;
        padding: 18px 4px 18px 16px;
    }
}
.principles__item-lottie {
    height: 100px;
    width: 100px;
    margin-right: 20px;
    flex-shrink: 0;
}
@media only screen and (max-width: 1280px) {
    .principles__item-lottie {
        margin-right: 10px;
    }
}
@media only screen and (max-width: 768px) {
    .principles__item-lottie {
        margin-right: 20px;
        width: 54px;
        height: 54px;
    }
}
.principles__item-text {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.5rem;
    /*color: #1b1c1e;*/
    color: #ffffff;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
}
@media only screen and (max-width: 1580px) {
    .principles__item-text {
        font-size: 2rem;
    }
}
@media only screen and (max-width: 1480px) {
    .principles__item-text {
        font-size: 1.5rem;
    }
}
.principles__ball {
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    min-height: 100vw;
}
.principles__ball canvas {
    width: 100%;
    height: 100%;
}
.principles__ball-pic {
    width: 100%;
    height: 100%;
}
.principles__ball-pic img {
    width: 100%;
    height: 100%;
}
.awards {
    position: relative;
    z-index: 1;
    width: 88%;
    height: 88vw;
    padding: 132px 110px 132px;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 9999px;
    border: 2px solid #1b1c1e;
    margin-top: -34%;
    margin-bottom: 200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media only screen and (max-width: 1200px) {
    .awards {
        padding: 0 110px;
    }
}
@media only screen and (max-width: 1024px) {
    .awards {
        padding: 0 48px;
    }
}
@media only screen and (max-width: 992px) {
    .awards {
        width: calc(100% - 48px);
        height: calc(100vw - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .awards {
        width: calc(100% + 4px);
        margin-left: -2px;
        height: 500px;
        border-top: none;
        border-radius: 9999px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 0 28px;
        margin-top: 120px;
        align-items: flex-start;
    }
}
@media only screen and (max-width: 550px) {
    .awards {
        height: calc(100vw - 10px);
    }
}
.awards__text {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .awards__text {
        flex-direction: column;
        align-items: flex-start;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}
.awards__header {
    margin-right: 53px;
    margin-bottom: 10px;
}
.awards__canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
}
@media only screen and (max-width: 767px) {
    .awards__canvas {
        height: 100vh;
    }
}
.awards__canvas canvas {
    width: 100%;
    height: 100%;
}
.teacher {
    padding-top: 0;
    position: relative;
}
.teacher__header {
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    width: 88%;
    margin: 0 auto;
    margin-bottom: 33px;
}
@media only screen and (max-width: 992px) {
    .teacher__header {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .teacher__header {
        margin: 0;
        margin-bottom: 26px;
        padding-left: 28px;
        padding-right: 0;
        width: 264px;
    }
}
.teacher__text {
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    width: 88%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 140px;
}
@media only screen and (max-width: 992px) {
    .teacher__text {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .teacher__text {
        display: block;
        font-size: 18px;
        margin: 0;
        margin-bottom: 80px;
        padding-left: 28px;
        padding-right: 28px;
        width: 100%;
    }
}
.teacher__text-item {
    width: 50%;
}
@media only screen and (max-width: 767px) {
    .teacher__text-item {
        width: 100%;
        margin-bottom: 18px;
    }
}
@media only screen and (min-width: 768px) {
    .teacher__text-item:not(:first-child) {
        padding-left: 38px;
    }
}
.teacher__main {
    position: relative;
    /*height: 154vw;*/
    height: 124vw;
}
@media only screen and (max-width: 992px) {
    .teacher__main {
        /*height: 154vw;*/
        height: 124vw;
    }
}
@media only screen and (max-width: 767px) {
    .teacher__main {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
}
.teacher__ball {
    position: absolute;
    top: -20%;
    left: 0;
    width: 88vw;
    height: 88vw;
    margin-left: 6vw;
    border-radius: 50%;
    -webkit-transform-origin: center;
    transform-origin: center;
    background-color: #ffdfea;
    z-index: -1;
}
@media only screen and (max-width: 767px) {
    .teacher__items {
        display: flex;
        flex-direction: column;
    }
}
.teacher .teacher__item {
    width: 22.22vw;
}
.teacher .teacher__item--1 {
    position: absolute;
    top: -3.1944444444vw;
    left: 44.9305555556vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--1 {
        order: 2;
    }
}
.teacher .teacher__item--2 {
    position: absolute;
    top: 4.4444444444vw;
    left: 15.2777777778vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--2 {
        order: 1;
    }
}
.teacher .teacher__item--3 {
    position: absolute;
    top: 21.7361111111vw;
    left: 58.5416666667vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--3 {
        order: 3;
    }
}
.teacher .teacher__item--4 {
    position: absolute;
    top: 51.25vw;
    left: 22.7777777778vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--4 {
        order: 5;
    }
}
.teacher .teacher__item--5 {
    position: absolute;
    top: 58.4722222222vw;
    left: 61.3888888889vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--5 {
        order: 4;
    }
}
.teacher .teacher__item--6 {
    position: absolute;
    top: 81.6666666667vw;
    left: 15.2777777778vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--6 {
        order: 7;
    }
}
.teacher .teacher__item--7 {
    position: absolute;
    top: 91.7361111111vw;
    left: 44.9305555556vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--7 {
        order: 6;
    }
}
.teacher .teacher__item--8 {
    position: absolute;
    top: 124.3055555556vw;
    left: 64.0277777778vw;
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item--8 {
        order: 8;
    }
}
@media only screen and (max-width: 900px) {
    .teacher .teacher__item {
        width: 24vw;
    }
}
@media only screen and (max-width: 767px) {
    .teacher .teacher__item {
        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 46px);
        margin: 0 auto;
        border-bottom: 1px solid #1b1c1e;
        padding-bottom: 20px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}
.teacher__item-event {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 12px;
}
@media only screen and (max-width: 1280px) {
    .teacher__item-event {
        font-size: 1rem;
        margin-bottom: 6px;
    }
}
@media only screen and (max-width: 900px) {
    .teacher__item-event {
        font-size: 0.8rem;
    }
}
@media only screen and (max-width: 767px) {
    .teacher__item-event {
        font-size: 1.125rem;
        padding-bottom: 8px;
    }
}
.teacher__item-image {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .teacher__item-image {
        display: none;
    }
}
.teacher__item-image img {
    width: 100%;
    height: auto;
}
.teacher__item-image-mob {
    display: block;
}
.teacher__item-image-mob img {
    height: 100%;
}
@media only screen and (min-width: 768px) {
    .teacher__item-image-mob {
        display: none;
    }
}
.teacher__item-image-mob--1 {
    height: 80px;
}
.teacher__item-image-mob--2 {
    height: 80px;
}
.teacher__item-image-mob--3 {
    height: 80px;
}
.teacher__item-image-mob--4 {
    height: 80px;
}
.teacher__item-image-mob--5 {
    height: 80px;
}
.teacher__item-image-mob--6 {
    height: 80px;
}
.teacher__item-image-mob--8 {
    height: 35px;
}
.teacher__item-desc {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.125rem;
    font-weight: 300;
    line-height: 1;
    margin-top: 20px;
}
@media only screen and (max-width: 1280px) {
    .teacher__item-desc {
        font-size: 1.5rem;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 900px) {
    .teacher__item-desc {
        font-size: 1.25rem;
    }
}
@media only screen and (max-width: 767px) {
    .teacher__item-desc {
        font-size: 1.5rem;
    }
}
.articles {
    background-color: #ffdfea;
    position: relative;
    padding: 154px 0 160px;
}
@media only screen and (max-width: 767px) {
    .articles {
        padding-top: 43px;
        padding-bottom: 80px;
    }
}
.articles .font-italic div div:nth-child(2),
.articles .font-italic div div:nth-child(6) {
    padding-right: 5px;
}
.articles .font-italic div div:nth-child(3),
.articles .font-italic div div:nth-child(7) {
    padding-left: 5px;
}
.articles__title {
    z-index: 2;
    position: relative;
    margin-bottom: 154px;
    margin-left: 13.8888888889vw;
}
.articles__title .split-char:first-child {
    padding-left: 20px;
}
@media only screen and (max-width: 992px) {
    .articles__title {
        width: calc(100% - 48px);
        margin-left: 10vw;
    }
}
@media only screen and (max-width: 767px) {
    .articles__title {
        margin-bottom: 140px;
        width: 100%;
        margin-left: 28px;
    }
}
.articles__books {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
.articles__canvas {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: -50vh;
    width: 100%;
    height: calc(100% + 50vh);
    z-index: 1;
    opacity: 0.7;
}
.articles__canvas canvas {
    width: 100%;
    height: 100%;
}
.book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #1b1c1e;
    margin-bottom: 20px;
    color: #1b1c1e;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: color 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s, -webkit-transform 0.3s ease-out 0.1s;
    transition: color 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s;
    transition: color 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s, -webkit-transform 0.3s ease-out 0.1s;
    background-color: #ffdfea;
    cursor: pointer;
}
.book:hover {
    color: #fff;
    border: 2px solid transparent;
}
.book:hover .book__year {
    border-left: 2px solid #fff;
}
.book:hover img {
    -webkit-filter: brightness(1.25);
    filter: brightness(1.25);
}
.book__author {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-right: 25px;
    padding-left: 36px;
}
@media only screen and (max-width: 767px) {
    .book__author {
        display: none;
    }
}
.book__image img {
    height: 100%;
    width: auto;
    transition: -webkit-filter 0.3s ease-out 0.1s;
    transition: filter 0.3s ease-out 0.1s;
    transition: filter 0.3s ease-out 0.1s, -webkit-filter 0.3s ease-out 0.1s;
}
@media only screen and (max-width: 767px) {
    .book__image img {
        padding-left: 28px;
    }
}
.book__title {
    font-family: Austin, serif;
    font-style: normal;
    color: inherit;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1;
    padding: 34px 36px 34px 24px;
    flex-grow: 1;
}
.book__title:hover {
    text-decoration: underline;
}
@media only screen and (max-width: 1200px) {
    .book__title {
        font-size: 1.75rem;
    }
}
@media only screen and (max-width: 767px) {
    .book__title {
        font-size: 1.375rem;
    }
}
.book__year {
    width: 78px;
    color: inherit;
    border-left: 2px solid #1b1c1e;
    transition: border-left 0.3s ease-out 0.1s;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book__dates {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: inherit;
    font-size: 1.25rem;
    /*font-weight: 300;*/
    font-weight: bold;
    line-height: 30px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
@media only screen and (max-width: 767px) {
    .book__dates {
        font-size: 1.125rem;
    }
}
.book--1 {
    width: 64.7222222222vw;
    margin-left: 8.8888888889vw;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
    margin-bottom: 40px;
}
@media only screen and (max-width: 992px) {
    .book--1 {
        width: 95%;
        margin-left: 2.5%;
    }
}
.book--1:hover {
    background-color: #e01d85;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
}
.book--1 .book__icon {
    height: 100px;
}
@media only screen and (max-width: 992px) {
    .book--1 .book__icon {
        height: 44px;
    }
}
.book--2 {
    width: 69.4444444444vw;
    -webkit-transform: rotate(-0.333deg);
    transform: rotate(-0.333deg);
}
@media only screen and (max-width: 992px) {
    .book--2 {
        width: 92%;
        margin-left: 4%;
    }
}
.book--2 .book__icon {
    height: 56px;
}
@media only screen and (max-width: 992px) {
    .book--2 .book__icon {
        height: 30px;
    }
}
.book--2:hover {
    background-color: #e01d85;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.book--3 {
    width: 64.7916666667vw;
    margin-left: 2.0833333333vw;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
@media only screen and (max-width: 992px) {
    .book--3 {
        width: 95%;
        margin-left: 2.5%;
    }
}
.book--3:hover {
    background-color: #a79a85;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
}
.book--3 .book__icon {
    height: 73px;
}
@media only screen and (max-width: 992px) {
    .book--3 .book__icon {
        height: 43px;
    }
}
.book--4 {
    width: 73.2638888889vw;
    margin-left: 0.1388888889vw;
    -webkit-transform: rotate(-0.97deg);
    transform: rotate(-0.97deg);
}
@media only screen and (max-width: 992px) {
    .book--4 {
        width: 95%;
        margin-left: 2.5%;
    }
}
.book--4:hover {
    background-color: #ba8585;
    -webkit-transform: rotate(0.97deg);
    transform: rotate(0.97deg);
}
.book--4 .book__icon {
    height: 67px;
}
@media only screen and (max-width: 992px) {
    .book--4 .book__icon {
        height: 36px;
    }
}
.book--5 {
    width: 64.7222222222vw;
    margin-left: 5.6944444444vw;
    -webkit-transform: rotate(0.39deg);
    transform: rotate(0.39deg);
}
@media only screen and (max-width: 992px) {
    .book--5 {
        width: 90%;
        margin-left: 5%;
    }
}
.book--5:hover {
    background-color: #6e5c62;
    -webkit-transform: rotate(-0.39deg);
    transform: rotate(-0.39deg);
}
.book--5 .book__icon {
    height: 72px;
}
@media only screen and (max-width: 992px) {
    .book--5 .book__icon {
        height: 38px;
    }
}
.book--6 {
    width: 64.7222222222vw;
    margin-left: 2.4305555556vw;
    background-color: #e01d85;
    border: 2px solid transparent;
    color: #fff;
}
@media only screen and (max-width: 992px) {
    .book--6 {
        width: 96%;
        margin-left: 2%;
    }
}
.book--6:hover {
    background-color: #1b1c1e;
}
.book--6 .book__icon {
    height: 68px;
}
@media only screen and (max-width: 992px) {
    .book--6 .book__icon {
        height: 40px;
    }
}
.book--6 .book__year {
    border-left: 2px solid #fff;
}
.mentorship {
    width: 100%;
    position: relative;
    z-index: 3;
}
.mentorship .font-sans {
    position: relative;
    top: -6px;
}
.mentorship .font-italic div {
    padding-bottom: 6px;
}
.mentorship .font-italic div div:nth-child(3) {
    padding-right: 5px;
}
.mentorship .font-italic div div:nth-child(4) {
    padding-left: 5px;
}
.mentorship__inner {
    position: relative;
    z-index: 1;
    width: 88%;
    padding: 90px 120px 217px;
    margin: 0 auto;
    background-color: #f4c2c2;
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    display: flex;
}
@media only screen and (max-width: 1024px) {
    .mentorship__inner {
        padding: 132px 48px 300px;
    }
}
@media only screen and (max-width: 992px) {
    .mentorship__inner {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .mentorship__inner {
        flex-direction: column;
        width: calc(100% - 20px);
        padding: 26px 18px 228px;
    }
}
.mentorship__title {
    width: 50%;
    margin-bottom: 25px;
}
.mentorship__title .font-italic .split-char {
    padding-bottom: 2px;
}
.mentorship__title .font-italic .split-char:first-child {
    padding-left: 4px;
}
@media only screen and (max-width: 1175px) {
    .mentorship__title {
        flex-direction: column;
        width: 100%;
    }
}
@media only screen and (max-width: 992px) {
    .mentorship__title {
        font-size: 56px;
    }
}
@media only screen and (max-width: 767px) {
    .mentorship__title {
        margin-bottom: 16px;
        padding-bottom: 10px;
        width: 100%;
    }
}
.mentorship__items {
    width: 50%;
}
@media only screen and (max-width: 1175px) {
    .mentorship__items {
        width: 100%;
    }
}
@media only screen and (max-width: 992px) {
    .mentorship__items {
        padding-left: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .mentorship__items {
        width: 100%;
        padding-left: 0;
    }
}
.mentorship__item {
    position: relative;
    padding-left: 87px;
    cursor: pointer;
}
@media only screen and (max-width: 1175px) {
    .mentorship__item {
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .mentorship__item {
        padding-left: 0;
    }
}
.mentorship__item:not(:last-child) {
    margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
    .mentorship__item:not(:last-child) {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width: 992px) {
    .mentorship__item:hover .mentorship__item-image {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    }
}
.mentorship__item-event {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1;
}
@media only screen and (max-width: 992px) {
    .mentorship__item-event {
        font-size: 2rem;
    }
}
@media only screen and (max-width: 767px) {
    .mentorship__item-event {
        font-size: 2.25rem;
        margin-bottom: 15px;
    }
}
.mentorship__item-pills {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 12px;
}
.mentorship__item-title {
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    margin-right: 10px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 40px;
    color: #ffdfea;
    background-color: #1b1c1e;
}
@media only screen and (max-width: 992px) {
    .mentorship__item-title {
        font-size: 1rem;
    }
}
.mentorship__item-dates {
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    margin-right: 10px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 40px;
    color: #1b1c1e;
    border: 1px solid #1b1c1e;
}
@media only screen and (max-width: 992px) {
    .mentorship__item-dates {
        font-size: 1rem;
    }
}
.mentorship__item-image {
    position: absolute;
    pointer-events: none;
    transition: -webkit-clip-path 0.3s ease-out;
    transition: clip-path 0.3s ease-out;
    transition: clip-path 0.3s ease-out, -webkit-clip-path 0.3s ease-out;
    z-index: 3;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    top: 0;
    left: 0;
}
.working {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    margin-bottom: 100px;
}
@media only screen and (max-width: 992px) {
    .working {
        margin-bottom: 100px;
    }
}
@media only screen and (max-width: 850px) {
    .working {
        margin-bottom: 160px;
    }
}
@media only screen and (max-width: 767px) {
    .working {
        margin-bottom: 0;
        /*padding-top: 80px;*/
        padding-top: 0px;
        height: 178.6666666667vw;
    }
}
.working .font-italic div {
    padding-bottom: 6px;
    position: relative;
    top: 6px;
}
.working__title {
    margin-bottom: 25px;
    margin-left: 13.8888888889vw;
}
@media only screen and (max-width: 767px) {
    .working__title {
        width: calc(100% - 48px);
        margin-left: 10vw;
    }
}
@media only screen and (max-width: 767px) {
    .working__title {
        margin-bottom: 0;
        margin-left: 28px;
    }
}
@media only screen and (max-width: 480px) {
    .working__title {
        display: block;
    }
}
.working__photos {
    position: relative;
    margin: 0 auto;
    z-index: 5;
    width: 36.1111111111vw;
    height: 36.1111111111vw;
}
@media only screen and (max-width: 767px) {
    .working__photos {
        display: none;
    }
}
.working__photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.working__photo.is-active img {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.working__photo img {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out;
}
.working .working__ball-fill {
    transition: 0.85s cubic-bezier(0.25, 0.46, 0.45, 1);
}
.working__balls {
    position: relative;
    padding-top: 70px;
}
.working__ball {
    width: 13.1944444444vw;
    height: 13.1944444444vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1b1c1e;
    border-radius: 50%;
    cursor: pointer;
    background-color: #ffdfea;
}
@media only screen and (min-width: 1024px) {
    .working__ball img {
        z-index: 2;
        transition: 0.85s cubic-bezier(0.25, 0.46, 0.45, 1);
        -webkit-filter: brightness(1) invert(0);
        filter: brightness(1) invert(0);
    }
    .working__ball:hover .working__ball-fill {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .working__ball:hover img {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
}
@media only screen and (min-width: 768px) {
    .working__ball.is-active .working__ball-fill {
        -webkit-transform: scale(1);
        transform: scale(1);
        z-index: -1;
    }
    .working__ball.is-active img {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
}
.working__ball--space {
    position: absolute;
    top: 20.2777777778vw;
    left: 88.2638888889vw;
    /*top: 9.2777777778vw;*/
    /*left: 75.2638888889vw;*/
}
.working__ball--we {
    position: absolute;
    top: 14.7916666667vw;
    left: 7.3611111111vw;
}
.working__ball--lifehouse {
    position: absolute;
    top: 22.9861111111vw;
    left: 17.6388888889vw;
}
.working__ball--crysis {
    position: absolute;
    top: 39.2361111111vw;
    left: 19.0972222222vw;
}
.working__ball--tough {
    position: absolute;
    top: 30.4861111111vw;
    left: 0vw;
}
.working__ball--netrix {
    position: absolute;
    top: 22.5vw;
    left: 70.4166666667vw;
}
.working__ball--rapp {
    position: absolute;
    top: 0vw;
    left: 63.8888888889vw;
}
.working__ball--stacked {
    position: absolute;
    top: 7.6388888889vw;
    left: 77.0833333333vw;
}
@media only screen and (max-width: 767px) {
    .working__ball {
        height: 30.4vw;
        width: 30.4vw;
    }
    .working__ball--space {
        position: absolute;
        top: 5.0666666667vw;
        left: 18.4vw;
    }
    .working__ball--we {
        position: absolute;
        top: 27.4666666667vw;
        left: -2.1333333333vw;
    }
    .working__ball--lifehouse {
        position: absolute;
        top: 77.8666666667vw;
        left: 34.9333333333vw;
    }
    .working__ball--crysis {
        position: absolute;
        top: 42.9333333333vw;
        left: 26.9333333333vw;
    }
    .working__ball--tough {
        position: absolute;
        top: 98.4vw;
        left: 7.2vw;
    }
    .working__ball--netrix {
        position: absolute;
        top: 90.1333333333vw;
        left: 62.6666666667vw;
    }
    .working__ball--rapp {
        position: absolute;
        top: 29.3333333333vw;
        left: 59.4666666667vw;
    }
    .working__ball--stacked {
        position: absolute;
        top: 56.8vw;
        left: 72.2666666667vw;
    }
}
.working__ball-image {
    -webkit-transform: translate3d(0, 0, 0);
    height: auto;
}
.working__ball-image--netrix {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}
.working__ball-image--space {
    /*width: 10.9722222222vw;*/
    width: 7.9722222222vw;
}
.working__ball-image--we {
    /*width: 11.5277777778vw;*/
    width: 7.5277777778vw;
}
.working__ball-image--lifehouse {
    width: 8.6111111111vw;
}
.working__ball-image--crysis {
    width: 8.75vw;
    padding-bottom: 20%;
}
.working__ball-image--tough {
    width: 10.8333333333vw;
    /*width: 7.8333333333vw;*/
}
.working__ball-image--netrix {
    width: 10.8333333333vw;
}
.working__ball-image--rapp {
    width: 7.9166666667vw;
}
.working__ball-image--stacked {
    width: 6.25vw;
}
@media only screen and (max-width: 767px) {
    .working__ball-image--space {
        /*width: 25.3333333333vw;*/
        width: 20.3333333333vw;
    }
    .working__ball-image--we {
        /*width: 26.9333333333vw;*/
        width: 19.9333333333vw;
    }
    .working__ball-image--lifehouse {
        width: 19.7333333333vw;
    }
    .working__ball-image--crysis {
        width: 20vw;
        padding-bottom: 20%;
    }
    .working__ball-image--tough {
        width: 24.8vw;
        /*width: 19.8vw;*/
    }
    .working__ball-image--netrix {
        width: 18.1333333333vw;
    }
    .working__ball-image--rapp {
        width: 18.1333333333vw;
    }
    .working__ball-image--stacked {
        width: 14.6666666667vw;
    }
}
.working__content-inner {
    position: absolute;
    position: absolute;
    top: 17.5vw;
    left: 12.8472222222vw;
    width: 45.3333333333vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
@media only screen and (max-width: 1280px) {
    .working__content-inner {
        width: 41.6666666667vw;
        position: absolute;
        top: 19.5833333333vw;
        left: 5.5555555556vw;
    }
}
@media only screen and (max-width: 922px) {
    .working__content-inner {
        position: absolute;
        top: 19.5833333333vw;
        left: -1.3888888889vw;
        width: 47.2222222222vw;
    }
}
@media only screen and (max-width: 767px) {
    .working__content-inner {
        position: absolute;
        top: 15.2777777778vw;
        left: 12.8472222222vw;
        width: 37.5vw;
    }
}
.working__content-inner.is-active {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.5s ease-in-out 0.25s;
}
.working__content {
    position: relative;
    margin-top: -17.5694444444vw;
    width: 65.6666666667vw;
    height: 65.6666666667vw;
    padding-right: 70px;
    background-color: #fff;
    margin-left: calc(100% - 18px - 65.6666666667vw);
    border-radius: 50%;
    padding-left: 185px;
}
@media only screen and (max-width: 1280px) {
    .working__content {
        padding-left: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .working__content {
        display: none;
    }
}
.working__content h4 {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 6px;
}
@media only screen and (max-width: 1280px) {
    .working__content h4 {
        font-size: 28px;
    }
}
.working__content-subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}
@media only screen and (max-width: 1280px) {
    .working__content-subtitle {
        font-size: 16px;
        margin-bottom: 8px;
    }
}
.working__content-content p {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}
@media only screen and (max-width: 1280px) {
    .working__content-content p {
        font-size: 16px;
    }
}
.working__social {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    padding: 8px 16px;
    height: 42px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 34px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #1b1c1e;
    transition: 0.3s background-color ease-out;
    border: 1px solid #1b1c1e;
}
.working__social:hover {
    background-color: #1b1c1e;
    color: #fff;
}
.working__social:hover .working__socials-arrow {
    stroke: #fff;
}
.working__socials-arrow {
    font-size: 26px;
    stroke: #1b1c1e;
    margin-left: 13px;
}
.working__ball-fill {
    background-color: #e01d85;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 0.6s -webkit-transform ease-out;
    transition: 0.6s transform ease-out;
    transition: 0.6s transform ease-out, 0.6s -webkit-transform ease-out;
}
.working__dashes {
    overflow: hidden;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 6%;
    width: 88%;
    margin: 0 auto;
    background-color: #ffdfea;
    background-image: linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, 0.6) 49px, rgba(210, 211, 195, 0.6) 50px),
        linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, 0.6) 49px, rgba(210, 211, 195, 0.6) 50px);
    background-size: 50px 100%, 50px 100%;
    background-position-x: 0, 25px;
    background-repeat: repeat-x;
    /*height: 210%;*/
    /*top: -50%;*/
    height: 150%;
    top: 0;
    width: 88vw;
    left: 6vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28)),
        linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28));
    background-size: calc((88vw - 1px) / 28) 100%, calc((88vw - 1px) / 28) 100%;
    background-position-x: calc((88vw - 1px) / 28 / 2), calc((88vw - 1px) / 28);
}
@media only screen and (max-width: 767px) {
    .working__dashes{
    background-color: unset;
    }
    .working__photo{
        top: 97px;
        right: 30px;
    }
    .working__photos{
        display:block !important;
    }
}
@media only screen and (max-width: 992px) {
    .working__dashes {
        width: calc(100vw - 48px);
        left: 24px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16));
        background-size: calc((100vw - 48px - 1px) / 16) 100%, calc((100vw - 48px - 1px) / 16) 100%;
        background-position-x: calc((100vw - 48px - 1px) / 16 / 2), calc((100vw - 48px - 1px) / 16);
    }
}
@media only screen and (max-width: 767px) {
    .working__dashes {
        width: calc(100vw - 20px);
        left: 10px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12));
        background-size: calc((100vw - 20px - 1px) / 12) 100%, calc((100vw - 20px - 1px) / 12) 100%;
        background-position-x: calc((100vw - 20px - 1px) / 12 / 2), calc((100vw - 20px - 1px) / 12);
    }
}
@media only screen and (max-width: 520px) {
    .working__dashes {
        width: calc(100vw - 20px);
        left: 11px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10)),
            linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10));
        background-size: calc((100vw - 20px - 2px) / 10) 100%, calc((100vw - 20px - 2px) / 10) 100%;
        background-position-x: calc((100vw - 20px - 2px) / 10 / 2), calc((100vw - 20px - 2px) / 10);
    }
}
.working__space {
    background-color: #ffdfea;
    /*width: 610px;*/
    width: unset;
    bottom: 0;
    position: absolute;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: calc((100vw - 610px) / 2);
    z-index: 0;
    height: 200%;
    top: -50%;
}
@media only screen and (max-width: 1440px) {
    .working__space {
        /*width: 500px;*/
        width: unset;
        left: calc((100vw - 500px) / 2);
    }
}
@media only screen and (max-width: 1024px) {
    .working__space {
        /*width: 380px;*/
        width: unset;
        left: calc((100vw - 380px) / 2);
    }
}
@media only screen and (max-width: 767px) {
    .working__space {
        /*width: 250px;*/
        width: unset;
        left: calc((100vw - 250px) / 2);
    }
}
.help {
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 767px) {
    .help {
        padding-top: 64px;
    }
}
.help__inner {
    position: relative;
    width: 88%;
    margin: 0 auto;
    background-color: #f4c2c2;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    padding: 0 3.4722222222vw calc(69.0277777778vw + 48px);
}
@media only screen and (max-width: 992px) {
    .help__inner {
        width: calc(100% - 48px);
        margin: 0 auto;
    }
}
@media only screen and (max-width: 767px) {
    .help__inner {
        width: calc(100% - 20px);
        padding-bottom: 146.6vw;
    }
}
.help__placeholder {
    width: 100%;
    height: 1px;
}
.help__text {
    width: 88%;
    z-index: 1;
    position: absolute;
    top: 5.5vw;
    left: 5.5vw;
    display: block;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed;
}
.help__text path {
    stroke: transparent;
    fill: none;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}
.help__text-path {
    font-size: 140px;
    fill: #000000;
    font-family: Austin, serif;
    font-style: normal;
}
.help__balls {
    z-index: 4;
    position: relative;
}
.help__ball {
    position: absolute;
    z-index: 1;
    border: 1px solid #1b1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: #f4c2c2;
}
.help__ball--mentorship {
    width: 13.8888888889vw;
    height: 13.8888888889vw;
    position: absolute;
    top: 37.4305555556vw;
    left: 18.125vw;
}
@media only screen and (max-width: 767px) {
    .help__ball--mentorship {
        width: 33.0666666667vw;
        height: 33.0666666667vw;
        position: absolute;
        top: 98.9333333333vw;
        left: 18.4vw;
    }
}
.help__ball--audit {
    width: 15.9722222222vw;
    height: 15.9722222222vw;
    position: absolute;
    top: 26.1111111111vw;
    left: 28.4722222222vw;
}
@media only screen and (max-width: 767px) {
    .help__ball--audit {
        width: 28.2666666667vw;
        height: 28.2666666667vw;
        position: absolute;
        top: 45.3333333333vw;
        left: 54.6666666667vw;
    }
}
.help__ball--consulting {
    width: 16.5277777778vw;
    height: 16.5277777778vw;
    position: absolute;
    top: 48.125vw;
    left: 29.0277777778vw;
}
@media only screen and (max-width: 767px) {
    .help__ball--consulting {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        position: absolute;
        top: 58.9333333333vw;
        left: 1.0666666667vw;
    }
}
.help__ball--design {
    width: 13.8888888889vw;
    height: 13.8888888889vw;
    position: absolute;
    top: 23.8888888889vw;
    left: 46.5277777778vw;
}
@media only screen and (max-width: 767px) {
    .help__ball--design {
        width: 34.6666666667vw;
        height: 34.6666666667vw;
        position: absolute;
        top: 23.4666666667vw;
        left: 21.6vw;
    }
}
.help__ball--workshops {
    width: 16.6666666667vw;
    height: 16.6666666667vw;
    position: absolute;
    top: 38.2638888889vw;
    left: 42.4305555556vw;
}
@media only screen and (max-width: 767px) {
    .help__ball--workshops {
        width: 34.6666666667vw;
        height: 34.6666666667vw;
        position: absolute;
        top: 74.6666666667vw;
        left: 44.2666666667vw;
    }
}
.help__ball-fill {
    background-color: #e01d85;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.help__ball-text {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.3611111111vw;
    font-weight: 300;
    letter-spacing: 0;
    text-align: center;
    z-index: 2;
    color: #1b1c1e;
    transition: 0.4s color ease-out;
}
@media only screen and (max-width: 767px) {
    .help__ball-text {
        font-size: 24px;
    }
}
.help .help__ball:nth-child(n + 1) {
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.help .help__ball:nth-child(n + 2) {
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.help .help__ball:nth-child(n + 3) {
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.help .help__ball:nth-child(n + 4) {
    -webkit-animation-name: animate4;
    animation-name: animate4;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.help .help__ball:nth-child(n + 5) {
    -webkit-animation-name: animate5;
    animation-name: animate5;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes animate1 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(10px);
        transform: translateY(10px) translateX(10px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate1 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(10px);
        transform: translateY(10px) translateX(10px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes animate2 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(2px) translateX(5px);
        transform: translateY(2px) translateX(5px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate2 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(2px) translateX(5px);
        transform: translateY(2px) translateX(5px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes animate3 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(6px) translateX(9px);
        transform: translateY(6px) translateX(9px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate3 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(6px) translateX(9px);
        transform: translateY(6px) translateX(9px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes animate4 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(5px) translateX(4px);
        transform: translateY(5px) translateX(4px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate4 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(5px) translateX(4px);
        transform: translateY(5px) translateX(4px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes animate5 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(10px);
        transform: translateY(10px) translateX(10px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate5 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(10px) translateX(10px);
        transform: translateY(10px) translateX(10px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes animate6 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(1px) translateX(3px);
        transform: translateY(1px) translateX(3px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@keyframes animate6 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    50% {
        -webkit-transform: translateY(1px) translateX(3px);
        transform: translateY(1px) translateX(3px);
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}
@-webkit-keyframes snakeHead {
    0% {
        -webkit-transform: translateX(0) translateY(0) rotate(0);
        transform: translateX(0) translateY(0) rotate(0);
    }
    33.2% {
        -webkit-transform: translateX(170px) translateY(0) rotate(0);
        transform: translateX(170px) translateY(0) rotate(0);
    }
    33.3333% {
        -webkit-transform: translateX(170px) translateY(0) rotate(90deg);
        transform: translateX(170px) translateY(0) rotate(90deg);
    }
    49.95% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(90deg);
        transform: translateX(170px) translateY(80px) rotate(90deg);
    }
    50% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(180deg);
        transform: translateX(170px) translateY(80px) rotate(180deg);
    }
    83.2% {
        -webkit-transform: translateX(0) translateY(80px) rotate(180deg);
        transform: translateX(0) translateY(80px) rotate(180deg);
    }
    83.3333% {
        -webkit-transform: translateX(0) translateY(80px) rotate(270deg);
        transform: translateX(0) translateY(80px) rotate(270deg);
    }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotate(270deg);
        transform: translateX(0) translateY(0) rotate(270deg);
    }
}
@keyframes snakeHead {
    0% {
        -webkit-transform: translateX(0) translateY(0) rotate(0);
        transform: translateX(0) translateY(0) rotate(0);
    }
    33.2% {
        -webkit-transform: translateX(170px) translateY(0) rotate(0);
        transform: translateX(170px) translateY(0) rotate(0);
    }
    33.3333% {
        -webkit-transform: translateX(170px) translateY(0) rotate(90deg);
        transform: translateX(170px) translateY(0) rotate(90deg);
    }
    49.95% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(90deg);
        transform: translateX(170px) translateY(80px) rotate(90deg);
    }
    50% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(180deg);
        transform: translateX(170px) translateY(80px) rotate(180deg);
    }
    83.2% {
        -webkit-transform: translateX(0) translateY(80px) rotate(180deg);
        transform: translateX(0) translateY(80px) rotate(180deg);
    }
    83.3333% {
        -webkit-transform: translateX(0) translateY(80px) rotate(270deg);
        transform: translateX(0) translateY(80px) rotate(270deg);
    }
    100% {
        -webkit-transform: translateX(0) translateY(0) rotate(270deg);
        transform: translateX(0) translateY(0) rotate(270deg);
    }
}
@-webkit-keyframes snakeRotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    33.3% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    33.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    83.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes snakeRotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    33.3% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    33.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    83.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@-webkit-keyframes topSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px);
    }
}
@keyframes topSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px);
    }
}
@-webkit-keyframes rightSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }
}
@keyframes rightSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }
}
@-webkit-keyframes leftSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-220px);
        transform: translateY(-220px);
    }
}
@keyframes leftSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-220px);
        transform: translateY(-220px);
    }
}
@-webkit-keyframes bottomSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-310px);
        transform: translateX(-310px);
    }
}
@keyframes bottomSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-310px);
        transform: translateX(-310px);
    }
}
@-webkit-keyframes firstDisable {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes firstDisable {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes secondDisable {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    91% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes secondDisable {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    91% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes thirdDisable {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    91% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes thirdDisable {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    91% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.preloader {
    position: fixed;
    background-color: #f9d6d6;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    -webkit-perspective: 2px;
    perspective: 2px;
    overflow: hidden;
    flex-wrap: wrap;
    height: calc(var(--vh, 1vh) * 100);
}
.preloader .pre_wrapper {
    width: 180px;
    height: 90px;
    position: relative;
    overflow: hidden;
}
.preloader .pre_wrapper .first {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    top: 0;
    right: 0;
    -webkit-animation-name: firstDisable;
    animation-name: firstDisable;
    -webkit-animation-duration: 10ms;
    animation-duration: 10ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.preloader .pre_wrapper .second {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    bottom: 0;
    right: 50px;
    -webkit-animation-name: secondDisable;
    animation-name: secondDisable;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.preloader .pre_wrapper .third {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    top: 50px;
    left: 0;
    -webkit-animation-name: thirdDisable;
    animation-name: thirdDisable;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.preloader .pre_wrapper .snake_new .last_snake {
    position: absolute;
    height: 10px;
    width: 110px;
    background: #191a1b;
    display: inline-block;
    top: 0;
    left: -110px;
    -webkit-animation-name: topSnake;
    animation-name: topSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
}
.preloader .pre_wrapper .snake_new .top_snake {
    position: absolute;
    height: 10px;
    width: 110px;
    background: #191a1b;
    display: inline-block;
    top: 0;
    left: -110px;
    -webkit-animation-name: topSnake;
    animation-name: topSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
}
.preloader .pre_wrapper .snake_new .bottom_snake {
    position: absolute;
    height: 10px;
    width: 140px;
    background: #191a1b;
    display: inline-block;
    bottom: 0;
    right: -140px;
    -webkit-animation-name: bottomSnake;
    animation-name: bottomSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.preloader .pre_wrapper .snake_new .right_snake {
    width: 10px;
    height: 110px;
    background: #191a1b;
    display: inline-block;
    position: absolute;
    right: 0;
    top: -110px;
    -webkit-animation-name: rightSnake;
    animation-name: rightSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.97s;
    animation-delay: 0.97s;
}
.preloader .pre_wrapper .snake_new .left_snake {
    width: 10px;
    height: 130px;
    background: #191a1b;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -130px;
    -webkit-animation-name: leftSnake;
    animation-name: leftSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-delay: 2.47s;
    animation-delay: 2.47s;
}
.preloader .pre_wrapper .snake_new .head {
    display: inline-block;
    width: 10px;
    position: absolute;
    height: 10px;
    background: #f9d6d6;
    -webkit-animation-name: snakeHead;
    animation-name: snakeHead;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
}
.preloader .pre_wrapper .snake_new .head:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 3px;
    background: #191a1b;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: 4px;
}
.preloader .pre_wrapper .snake_new .head:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 3px;
    background: #191a1b;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 2px;
    left: 4px;
}
.working-modal {
    position: fixed;
    z-index: 3000;
    top: calc(var(--vh, 1vh) * 110);
}
@media only screen and (min-width: 993px) {
    .working-modal {
        display: none;
    }
}
@media only screen and (max-width: 992px) {
    .working-modal.is-active .working-modal__item {
        opacity: 0;
        pointer-events: none;
    }
    .working-modal.is-active .working-modal__item.is-active {
        opacity: 1;
        pointer-events: all;
        -webkit-transform: translateY(calc(var(--vh, 1vh) * -105));
        transform: translateY(calc(var(--vh, 1vh) * -105));
        transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s, -webkit-transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
        transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s;
        transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s, -webkit-transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
    }
}
.working-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}
.working-modal__close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.working-modal__inner {
    overflow: scroll;
    height: 100%;
    padding: 40px 28px 22px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}
.working-modal__socials {
    margin-top: 30px;
}
.working-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2px;
}
.working-modal__item {
    position: absolute;
    top: 0;
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 95);
    background-color: #fff;
    border-radius: 40px 40px 0 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s, -webkit-transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s, -webkit-transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}
.working-modal__item::-webkit-scrollbar {
    display: none;
}
.working-modal__photo {
    margin: 0 auto 18px;
    display: block;
    width: 60%;
    min-width: 200px;
}
.working-modal__photo img {
    width: 100%;
}
.working-modal__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 8px;
}
.working-modal__subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 20px;
}
.working-modal__content {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 30px;
}
.working-modal__social {
    width: 100%;
    border: 1px solid #1b1c1e;
    color: #1b1c1e;
    border-radius: 60px;
    height: 54px;
    background-color: transparent;
    font-size: 1.125rem;
}
.working-modal__social:first-child {
    margin-bottom: 10px;
}
.working-modal__social .button__arrow {
    stroke: #1b1c1e;
}
.help-modal {
    position: fixed;
    top: 0;
    z-index: 4000;
    top: calc(var(--vh, 1vh) * 110);
    width: 100vw;
    opacity: 0;
    pointer-events: none;
}
.help-modal.is-active {
    opacity: 1;
    pointer-events: all;
}
.help-modal.is-active .help-modal__close {
    pointer-events: all;
    -webkit-transform: translateY(calc(var(--vh, 1vh) * -110));
    transform: translateY(calc(var(--vh, 1vh) * -110));
}
.help-modal.is-active .help-modal__close:hover {
    -webkit-transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg);
    transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg);
}
.help-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    z-index: 4000;
    cursor: pointer;
    pointer-events: none;
}
@media only screen and (max-width: 767px) {
    .help-modal__close {
        background-color: #fff;
    }
}
.help-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2px;
}
@media only screen and (max-width: 767px) {
    .help-modal__close-icon {
        stroke: #1b1c1e;
    }
}
.help-modal__item {
    display: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: calc(var(--vh, 1vh) * -10);
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #1b1c1e;
    padding: 22px 40px 40px;
    overflow: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.help-modal__item::-webkit-scrollbar {
    display: none;
}
@media only screen and (max-width: 767px) {
    .help-modal__item {
        padding: 15px 16px;
    }
}
.help-modal__container {
    position: relative;
    height: 100%;
    min-height: 650px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*FOR POPUP SCROLLBAR*/
    overflow: auto;
    scrollbar-width: thin;
        padding: 0px 20px;
}
/*scroller css start*/
/* Firefox */
.help-modal__container {
  scrollbar-width: thin;
  scrollbar-color: #e01d85 transparent; /* no background color */
}

/* WebKit (Chrome, Safari, Edge) */
.help-modal__container::-webkit-scrollbar {
  width: 10px; /* increased from 8px */
}

.help-modal__container::-webkit-scrollbar-track {
  background: transparent; /* removes white background */
}

.help-modal__container::-webkit-scrollbar-thumb {
  background-color: #e01d85;
  border-radius: 20px;
}

.help-modal__container::-webkit-scrollbar-thumb:hover {
  background-color: #c2186f;
}
/*scroller css end*/
@media only screen and (max-width: 767px) {
    .help-modal__container {
        height: unset;
        min-height: unset;
        max-height: unset;
    }
}
.help-modal__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 100px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    margin-bottom: 8px;
}
@media only screen and (max-width: 767px) {
    .help-modal__title {
        font-size: 56px;
    }
}
.help-modal__subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .help-modal__subtitle {
        font-size: 1.125rem;
        margin-bottom: 40px;
    }
}
.help-modal__blocks {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
        margin-top: 40px;
}
@media only screen and (max-width: 767px) {
    .help-modal__blocks {
        flex-direction: column;
        margin-top:0px;
    }
    .help-modal__blocks:first-child {
        margin-top:40px;
    }
}
.help-modal__block {
    width: calc(42% - 40px);
    display: flex;
    flex-direction: column;
    margin-bottom:40px;
}
.help-modal__block:first-child {
    /*margin-right: 80px;*/
}
@media only screen and (max-width: 767px) {
    .help-modal__block {
        width: 100%;
    }
    .help-modal__block:first-child {
        margin-bottom: 40px;
    }
}
.help-modal__pill {
    height: 64px;
    padding: 0 20px;
    background-color: #ffdfea;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 64px;
    color: #1b1c1e;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 32px;
    margin-bottom: 15px;
    margin-top:30px;
}
@media only screen and (max-width: 767px) {
    .help-modal__pill {
        height: 49px;
        font-size: 1.5rem;
        line-height: 49px;
    }
}
.help-modal__text {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #ffdfea;
}
@media only screen and (max-width: 767px) {
    .help-modal__text {
        font-size: 1.125rem;
    }
}
.help-modal__text p {
    margin-bottom: 30px;
}
.help-modal__text a {
    text-decoration: underline;
}
.help-modal__subtext {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #ffdfea;
    margin-top: auto;
}
@media only screen and (max-width: 767px) {
    .help-modal__subtext {
        font-size: 1.125rem;
    }
}
.help-modal__subtext p {
    margin-bottom: 0;
}
.help-modal__subtext a {
    text-decoration: underline;
    cursor: pointer;
}
.help-modal__list {
    max-width: 420px;
    margin-top: 21px;
}
@media only screen and (max-width: 767px) {
    .help-modal__list {
        max-width: 100%;
    }
}
.help-modal__list-item {
    display: block;
    border-bottom: 1px solid #ffdfea;
    color: #ffdfea;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    padding-bottom: 6px;
    margin-bottom: 18px;
}
@media only screen and (max-width: 767px) {
    .help-modal__list-item {
        font-size: 1.125rem;
    }
}
.help-modal__next-section {
    width: 50%;
}
@media only screen and (max-width: 767px) {
    .help-modal__next-section {
        width: 100%;
        padding-bottom: 20px;
    }
    .help-modal__next-section .help-modal__subtext {
        display: none;
    }
}
.help-modal__next {
    margin-top: 30px;
    width: 66%;
    border: 1px solid #ffdfea;
    border-radius: 60px;
    height: 62px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 26px;
    cursor: pointer;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.33;
    color: #ffdfea;
    transition: color 0.3s ease-in;
}
@media only screen and (max-width: 767px) {
    .help-modal__next {
        width: 100%;
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) {
    .help-modal__next:hover {
        color: #1b1c1e;
    }
    .help-modal__next:hover .help-modal__next-icon {
        stroke: #1b1c1e;
    }
    .help-modal__next:hover .help-modal__hover {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}
.help-modal__next-icon {
    stroke: #ffdfea;
    font-size: 26px;
    transition: color 0.5s ease-out;
}
.help-modal__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    background-color: #ffdfea;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    transition: border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out, border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out;
    transition: transform 0.5s ease-out, border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
@media only screen and (max-width: 767px) {
    .help-modal__hover {
        display: none;
    }
}
.help-modal__actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    width: 100%;
}
.help-modal__actions > .help-modal__subtext {
    display: none;
}
@media only screen and (min-width: 1280px) {
    .help-modal__actions.help-modal__actions--single {
        justify-content: flex-end;
    }
    .help-modal__actions.help-modal__actions--single .help-modal__buttons {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .help-modal__actions.help-modal__actions--single .help-modal__subtext {
        position: absolute;
        width: 40%;
        bottom: 120px;
    }
}
@media only screen and (max-width: 767px) {
    .help-modal__actions {
        flex-direction: column;
        margin-top: 30px;
    }
    .help-modal__actions > .help-modal__subtext {
        display: block;
        margin-bottom: 30px;
    }
}
.help-modal__buttons {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .help-modal__buttons {
        width: 100%;
        justify-content: space-between;
    }
}
.help-modal__button {
    width: 200px;
    height: 200px;
    border: 1px solid #ffdfea;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0;
}
@media only screen and (max-width: 922px) {
    .help-modal__button {
        width: 140px;
        height: 140px;
    }
    .help-modal__button:last-child {
        margin-left: auto;
    }
}
.help-modal__button-text {
    color: #ffdfea;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    max-width: 140px;
    text-align: center;
}
@media only screen and (max-width: 767px) {
    .help-modal__button-text {
        font-size: 1.125rem;
    }
}
.help-modal__button-or {
    color: #ffdfea;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25;
    font-weight: 400;
    line-height: 1.2;
    padding: 0 16px;
}
.help-modal__button--discuss {
    background-color: #ffdfea;
}
.help-modal__button--discuss .help-modal__button-text {
    color: #1b1c1e;
}
.form {
    position: relative;
    z-index: 2;
    padding: 72px 0;
}
@media only screen and (max-width: 767px) {
    .form {
        padding: 40px 0;
    }
}
.form__container {
    width: 81.9444444444vw;
    margin: 0 auto;
}
@media only screen and (max-width: 992px) {
    .form__container {
        width: calc(100% - 48px);
    }
}
@media only screen and (max-width: 767px) {
    .form__container {
        width: 81.9444444444vw;
    }
}
.form__email {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 9vw;
    font-weight: 300;
    text-align: center;
    z-index: 2;
}
@media only screen and (max-width: 992px) {
    .form__email {
        font-size: 10vw;
    }
}
@media only screen and (max-width: 767px) {
    .form__email {
        font-size: 9vw;
        margin-bottom:15px;
    }
}
.form__inputs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.form #form {
    display: none;
}
.form #form_main .form__send-text {
    width: 284px;
    display: none;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 1200px) {
    .form #form_main .form__send-text {
        font-size: 20px;
    }
}
@media only screen and (max-width: 900px) {
    .form #form_main .form__send-text {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .form #form_main .form__send-text {
        font-size: 28px;
    }
}
.form #form_main .form__lottie,
.form #form_main .form__send-text,
.form #form_main .form__submitted {
    display: none;
}
.form #form_main.is-send {
    border-radius: 34px;
    border: 1px solid #1b1c1e;
    padding: 8px 16px;
}
.form #form_main.is-send .button,
.form #form_main.is-send .custom-select-container,
.form #form_main.is-send .form__input,
.form #form_main.is-send .form__text-input,
.form #form_main.is-send select {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
@media only screen and (max-width: 767px) {
    .form #form_main.is-send .button,
    .form #form_main.is-send .custom-select-container,
    .form #form_main.is-send .form__input,
    .form #form_main.is-send .form__text-input,
    .form #form_main.is-send select {
        position: relative;
    }
}
.form #form_main.is-send .form__send-text {
    display: block;
}
.form #form_main.is-send .form__submitted {
    display: flex;
}
.form #form_main.is-send .form__lottie {
    display: block;
    width: 100%;
}
.form #form_main.is-send .form__lottie svg {
    height: auto !important;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .form #form_main.is-send .form__lottie {
        position: absolute;
        width: calc(100% - 32px);
    }
}
.form .custom-select-container {
    position: relative;
    width: 25%;
    z-index: 100;
    font-size: 20px;
}
.form .custom-select-container::after {
    content: url(../assets/svg/chevron.svg);
    position: absolute;
    z-index: 200;
    top: 20px;
    right: 28px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    pointer-events: none;
}
.form .custom-select-container.is-open::after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.form .custom-select-container.is-open .custom-select-panel {
    display: block;
}
@media only screen and (max-width: 992px) {
    .form .custom-select-container {
        width: calc(33% - 12px);
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .form .custom-select-container {
        height: 54px;
        font-size: 18px;
        width: 100% !important;
        margin-bottom: 14px;
        width: 100%;
    }
}
.form .custom-select-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 26px;
    border: 1px solid #1b1c1e;
    background-color: #f4c2c2;
}
.form .custom-select-option {
    font-family: satoshi, sans-serif;
    font-style: normal;
    padding: 16px 30px 0;
    background-color: transparent;
    flex-shrink: 0;
    font-size: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.form .custom-select-option:last-child {
    padding-bottom: 16px;
}
@media only screen and (max-width: 992px) {
    .form .custom-select-option {
        padding: 18px 26px 0;
    }
}
.form .custom-select-opener {
    display: flex;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    height: 62px;
    border-radius: 42px;
    padding: 16px 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    font-size: inherit;
    cursor: pointer;
}
@media only screen and (max-width: 992px) {
    .form .custom-select-opener {
        font-size: 18px;
        padding: 18px 26px;
    }
}
@media only screen and (max-width: 767px) {
    .form .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px;
    }
}
.form__input-inner {
    width: 100%;
    height: 100%;
    border-radius: 34px;
    padding: 0 30px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    font-size: 20px;
}
.form__input-inner::-webkit-input-placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1;
}
.form__input-inner::placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1;
}
@media only screen and (max-width: 992px) {
    .form__input-inner {
        font-size: 18px;
        padding: 0 26px;
    }
}
@media only screen and (max-width: 767px) {
    .form__input-inner {
        font-size: 18px;
    }
}
.form__input {
    position: relative;
    height: 62px;
    flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
    .form__input {
        height: 54px;
        width: 100% !important;
        margin-bottom: 14px;
    }
}
.form__input::after {
    content: "";
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: #933333;
}
@media only screen and (max-width: 767px) {
    .form__input::after {
        width: 18px;
        height: 18px;
        top: 18px;
        right: 18px;
    }
}
.form__input.not-valid .form__input-inner {
    border-color: #933333;
    color: #933333;
}
.form__input.not-valid .form__input-inner::-webkit-input-placeholder {
    color: #933333;
}
.form__input.not-valid .form__input-inner::placeholder {
    color: #933333;
}
.form__input.not-valid::after {
    display: block;
}
.form__input-4 {
    width: calc(25% - 11px);
}
@media only screen and (max-width: 992px) {
    .form__input-4 {
        width: 67%;
    }
}
.form__input-2 {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    .form__input-2 {
        width: 100%;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .form__input-2 {
        margin-top: 0;
    }
}
.form__text-input {
    position: relative;
    margin-top: 14px;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .form__text-input {
        margin-top: 0;
    }
}
.form__text-input .form__input {
    width: 100%;
}
.form__submit {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
    top: 4px;
    transition: 0.3s background-color ease-out;
    cursor: pointer;
    z-index: 20;
}
@media only screen and (max-width: 767px) {
    .form__submit {
        display: none;
    }
}
.form__submit:hover {
    background-color: #e01d85;
}
.form__submit-arrow {
    font-size: 26px;
    stroke: #fff;
    fill: #fff;
}
.form__submitted {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
    bottom: 4px;
    transition: 0.3s background-color ease-out;
    cursor: pointer;
}
@media only screen and (max-width: 767px) {
    .form__submitted {
        display: none;
    }
}
.form__submitted:hover {
    background-color: #e01d85;
}
.form__checkmark {
    display: block;
    font-size: 32px;
    fill: transparent;
    stroke: #fff;
}
.form__submit-mob {
    display: none;
    background-color: #1b1c1e;
    -webkit-user-select: none;
    user-select: none;
    color: transparent;
}
.form__submit-mob:hover {
    color: transparent;
}
@media only screen and (max-width: 767px) {
    .form__submit-mob {
        display: flex;
    }
}
.form__socials {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
}
.visitor-registration-button{
    justify-content: center;
    margin-top:-32px;
    position:relative;
    z-index:1;
}
@media only screen and (max-width: 767px) {
    .visitor-registration-button {
        margin-top: -32px !important;
        margin-left:25px;
        margin-right:25px;
    }
}
.form__socials-arrow {
    font-size: 26px;
    stroke: #fff;
    margin-left: 13px;
}
@media only screen and (max-width: 767px) {
    .form__socials {
        margin-top: 50px;
        justify-content: space-between;
    }
}
.form__social-link {
    margin-right: 10px;
}
@media only screen and (max-width: 767px) {
    .form__social-link {
        display: block;
        width: calc(50% - 5px);
        margin-bottom: 10px;
        flex-shrink: 0;
        margin-right: 0;
    }
    .form__social-link:last-child {
        width: 100%;
    }
}
.form__social {
    height: 62px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 7px;
    border-radius: 34px;
    background-color: #e01d85;
    font-size: 20px;
    color: #fff;
    width: 100%;
}
.footer {
    z-index: 1;
}
.footer__made {
    font-family: Austin, serif;
    font-style: normal;
    margin-top: 34px;
    padding-bottom: 38px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}
@media only screen and (max-width: 767px) {
    .footer__made {
        margin-top: 40px;
        padding-bottom: 26px;
        font-size: 24px;
        line-height: 1;
    }
}
.footer__made--link {
    text-decoration: underline;
}
.form-modal {
    position: fixed;
    top: 0;
    z-index: 5000;
    top: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    opacity: 0;
    pointer-events: none;
}
.form-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffdfea;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    z-index: 100;
    cursor: pointer;
}
.form-modal__close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.form-modal__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: #ffdfea;
    -webkit-transform-origin: center;
    transform-origin: center;
    border-radius: 50%;
}
.form-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #1b1c1e;
    stroke-width: 2px;
}
.form-modal__inner {
    display: none;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 0;
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #ffdfea;
    padding: 22px 40px 40px;
    overflow: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.form-modal__inner::-webkit-scrollbar {
    display: none;
}
@media only screen and (max-width: 767px) {
    .form-modal__inner {
        padding: 100px 28px;
    }
}
.form-modal__email {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 10vw;
    font-weight: 300;
    z-index: 2;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block;
}
@media only screen and (max-width: 767px) {
    .form-modal__email {
        font-size: 11vw;
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 420px) {
    .form-modal__email {
        font-size: 10vw;
    }
}
.form-modal__inputs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    width: 80.5555555556vw;
}
@media only screen and (max-width: 767px) {
    .form-modal__inputs {
        width: 100%;
    }
}
.form-modal #form-modal-select {
    display: none;
}
.form-modal .custom-select-container {
    position: relative;
    width: 25%;
    z-index: 100;
    font-size: 20px;
}
.form-modal .custom-select-container::after {
    content: url(../assets/svg/chevron.svg);
    position: absolute;
    z-index: 200;
    top: 20px;
    right: 28px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition: -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    pointer-events: none;
}
@media only screen and (max-width: 1280px) {
    .form-modal .custom-select-container::after {
        top: 23px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal .custom-select-container::after {
        top: 20px;
    }
}
.form-modal .custom-select-container.is-open::after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.form-modal .custom-select-container.is-open .custom-select-panel {
    display: block;
}
@media only screen and (max-width: 1280px) {
    .form-modal .custom-select-container {
        width: calc(40% - 12px);
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal .custom-select-container {
        height: 54px;
        font-size: 18px;
        width: 100% !important;
        margin-bottom: 14px;
        width: 100%;
    }
}
.form-modal .custom-select-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 26px;
    border: 1px solid #1b1c1e;
    background-color: #ffdfea;
}
.form-modal .custom-select-option {
    font-family: satoshi, sans-serif;
    font-style: normal;
    padding: 16px 30px 0;
    background-color: transparent;
    flex-shrink: 0;
    font-size: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.form-modal .custom-select-option:last-child {
    padding-bottom: 16px;
}
@media only screen and (max-width: 1280px) {
    .form-modal .custom-select-option {
        padding: 18px 26px 0;
    }
}
.form-modal .custom-select-opener {
    display: flex;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    height: 62px;
    border-radius: 42px;
    padding: 16px 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    font-size: inherit;
    cursor: pointer;
}
@media only screen and (max-width: 1280px) {
    .form-modal .custom-select-opener {
        font-size: 18px;
        padding: 18px 26px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px;
    }
}
.form-modal__input-inner {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    border-radius: 34px;
    padding: 0 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    font-size: 20px;
    width: 100%;
    height: 100%;
}
.form-modal__input-inner::-webkit-input-placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1;
}
.form-modal__input-inner::placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1;
}
@media only screen and (max-width: 767px) {
    .form-modal__input-inner {
        font-size: 18px;
    }
}
.form-modal__input {
    position: relative;
    height: 62px;
    flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
    .form-modal__input {
        height: 54px;
        width: 100% !important;
        margin-bottom: 10px;
    }
}
.form-modal__input::after {
    content: "";
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: #933333;
}
@media only screen and (max-width: 1280px) {
    .form-modal__input::after {
        top: 23px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal__input::after {
        width: 18px;
        height: 18px;
        top: 18px;
        right: 18px;
    }
}
.form-modal__input.not-valid .form-modal__input-inner {
    border-color: #933333;
    color: #933333;
}
.form-modal__input.not-valid .form-modal__input-inner::-webkit-input-placeholder {
    color: #933333;
}
.form-modal__input.not-valid .form-modal__input-inner::placeholder {
    color: #933333;
}
.form-modal__input.not-valid::after {
    display: block;
}
.form-modal__input-4 {
    width: calc(25% - 11px);
}
@media only screen and (max-width: 1280px) {
    .form-modal__input-4 {
        width: 60%;
    }
}
.form-modal__input-2 {
    width: 50%;
}
@media only screen and (max-width: 1280px) {
    .form-modal__input-2 {
        width: 100%;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .form-modal__input-2 {
        margin-top: 0;
    }
}
.form-modal__textarea {
    height: 241px;
}
@media only screen and (max-width: 767px) {
    .form-modal__textarea {
        height: 170px;
        margin-bottom: 8px;
    }
}
.form-modal__textarea .form-modal__input-inner {
    padding: 20px 30px;
    resize: none;
}
.form-modal__text-input {
    position: relative;
    margin-top: 14px;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .form-modal__text-input {
        margin-top: 0;
    }
}
.form-modal__text-input .form-modal__input {
    width: 100%;
}
.form-modal__submit {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 19px;
    bottom: 26px;
    transition: 0.3s background-color ease-out;
    cursor: pointer;
}
@media only screen and (max-width: 767px) {
    .form-modal__submit {
        display: none;
    }
}
.form-modal__submit:hover {
    background-color: #e01d85;
}
.form-modal__submit-arrow {
    font-size: 26px;
    fill: #fff;
    stroke: #fff;
}
.form-modal__submit-mob {
    display: none;
    background-color: #1b1c1e;
    -webkit-user-select: none;
    user-select: none;
    color: transparent;
}
.form-modal__submit-mob:hover {
    color: transparent;
}
@media only screen and (max-width: 767px) {
    .form-modal__submit-mob {
        display: flex;
    }
}
.form-modal__success {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.form-modal__logo {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 30px;
}
.form-modal__logo-image {
    font-size: 29px;
}
.form-modal__success-text {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

/*css by me*/
.help-modal p{
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 30px;
}
.help-modal li{
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
    list-style-type: disc;
    margin-left: 20px;
}
.help-modal ul{
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .help-modal p {
        font-size: 1.125rem;
        margin-bottom: 40px;
    }
    .help-modal li {
        font-size: 1.125rem;
        margin-bottom: 20px;
    }
}
.portfolio-content__text-content li{
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    list-style-type: disc;
    margin-left: 20px;
}

/*Video iframe css start*/
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px; /* optional: control max size */
  aspect-ratio: 16 / 9; /* makes it square */
  border: 4px solid #e01d85;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.video-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent iframe from catching the click */
}

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background: #fff;
  border: 4px solid #e01d85;
  border-radius: 12px;
  padding: 20px;
}

.video-modal__video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-modal__video-wrapper iframe {
  width: 100%;
  height: 100%;
}

.video-modal__close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  color: #fff;
  background: #e01d85;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
}

.video-modal__close:hover {
  background: #c01870;
}
@media only screen and (min-width: 767px){
.help-modal__item--2 .help-modal__block{
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
}}
/*Video iframe css end*/