﻿/* RICHKID LANDING PAGE KICKSTART PAGE - 2025 */

body { background: var(--lgray); }

/*------------------------------------------/*
 HEADER
/*------------------------------------------*/
#main-header .header-container .header-center { display: none; }
#main-header .header-container .header-left { pointer-events: none; }

@media(max-width: 1024px) {
    #main-header .header-container { justify-content: center; }
    #main-header .header-container .header-left a.logoHeader { width: 150px; }
}


/*------------------------------------------/*
 LOBBYVIEW
/*------------------------------------------*/
#lobbyview { display: grid; text-wrap: balance; justify-items: center; position: relative; background: var(--black); padding: 2.7vw 21vw 0; color: var(--white); border-top-left-radius: var(--gap-8); border-top-right-radius: var(--gap-8); margin-top: 1px; }
#lobbyview #headline { font-size: 100%; margin: 0; position: relative; }
#lobbyview #headline h1 { font-size: clamp(2rem, var(--gap-96), 1000rem); line-height: 1.3; font-family: var(--en-reg); color: inherit; direction: ltr; padding-inline-start: var(--gap-80); }
#lobbyview #headline h1 span { font-family: var(--en-bold); }
#lobbyview #headline h1::before { content: '/'; display: inline-block; margin-inline-end: var(--gap-8); font-family: var(--en-bold); color: var(--red); font-size: 160%; line-height: 0.75; position: absolute; inset-inline-start: 0; }

@media(min-width: 1025px) {
}

@media(max-width: 1024px) {
    #lobbyview { width: 100%; padding: 24px 12px 0; text-wrap: unset; }
    .digitalassets-page #lobbyview { padding: 24px 0 0; }
    #lobbyview #headline h1 { font-size: var(--gap-28); padding-inline-start: var(--gap-28); ); line-height: 1.5; }
    .digitalassets-page #lobbyview #headline h1 { font-size: var(--gap-24); }
    #lobbyview #headline h1::before { font-size: 200%; }
}


/*------------------------------------------/*
 SECTIONS
/*------------------------------------------*/
#GridWrap { display: grid; }

:is(div, #LobbyModule) .section.img-in-middle-text-sec { background: var(--black); color: var(--white); padding: 2.35vw 11vw 5.2vw; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes { justify-content: center; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box { display: flex; align-items: center; width: 100%; gap: 5.5vw; justify-content: center; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-image { width: 19.2vw; height: 20vw; pointer-events: none; overflow-y: clip; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-image lottie-player { position: absolute; left: 50%; top: 25%; transform: translate(-50%,-50%) scale(2.1); z-index: 1; width: 100%; height: 100%; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-image img { opacity: 0; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-title { order: -1; text-align: start; width: 22.5vw; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: clamp(1.3rem, 3.25vw, 1000rem); line-height: 0.9; margin: 0; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-title h3 span { font-family: var(--bold); }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text { width: 22.5vw; text-align: start; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text .grid-box-fulltext p { color: inherit; font-size: clamp(1.3rem, var(--gap-20), 1000rem); }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text .grid-box-subtitle.button { color: inherit; }
:is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text .grid-box-subtitle.button a { background-color: var(--red); height: 2.35vw; display: inline-flex; font-size: clamp(1.2rem, var(--gap-16), 1000rem); transition: 0.3s all ease; min-width: 9.25vw; letter-spacing: 0.32px; border-radius: 50px; padding: 0 var(--gap-32); align-items: center; justify-content: center; color: var(--white); font-family: var(--bold); margin-top: var(--gap-32); }

:is(div, #LobbyModule) .section.running-text { background: var(--black); margin-bottom: 4vw; color: var(--white); border-bottom-left-radius: var(--gap-8); border-bottom-right-radius: var(--gap-8); }
:is(div, #LobbyModule) .section.running-text .grid-text-content { display: flex; gap: 2vw; transform: translateY(100%); transition: 0.6s 0.3s all ease; }
:is(div, #LobbyModule) .section.running-text.shown .grid-text-content { transform: translateY(0%); }
:is(div, #LobbyModule) .section.running-text .grid-text-content .running-text-inner { width: max-content; display: flex; white-space: nowrap; animation: scrollText 80s linear infinite; gap: 2vw; }
:is(div, #LobbyModule) .section.running-text .grid-text-content .running-text-inner p { font-size: clamp(2rem, 7.187vw, 1000rem); line-height: 0.7; text-transform: uppercase; opacity: 0.2; font-family: var(--en-reg); color: inherit; }
:is(div, #LobbyModule) .section.running-text .grid-text-content .running-text-inner p strong { font-family: var(--en-bold); }

:is(div, #LobbyModule) .section.side-title-sec { display: flex; gap: var(--gap-40); justify-content: space-between; text-align: start; margin-bottom: 4vw; }
:is(div, #LobbyModule) .section.side-title-sec .section-title { min-width: 19.156vw; width: fit-content; }
:is(div, #LobbyModule) .section.side-title-sec .section-title h2 { font-size: clamp(1.2rem, var(--gap-32), 1000rem); color: #777777; line-height: 1; }
:is(div, #LobbyModule) .section.side-title-sec .section-title + div { flex-grow: 1; }

:is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) p:has(+ ul),
:is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) ul:has(+ p) { margin-bottom: var(--gap-40); }
:is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) ul { margin: 0; padding: 0; padding-inline-start: calc(var(--gap-16) + var(--gap-12)); display: flex; flex-direction: column; gap: 1.25vw; list-style: none; }
:is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) ul li::before { content: ''; position: absolute; inset-inline-start: calc((var(--gap-16) + var(--gap-12)) * -1); top: var(--gap-8); width: var(--gap-16); height: var(--gap-16); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(/warehouse/dynamic/592038.svg); }

:is(div, #LobbyModule) .section.mid-text-size-sec .grid-text-content * { font-size: clamp(1.2rem, 1.667vw, 1000rem); line-height: 0.9; }

:is(div, #LobbyModule) .section.boxes-sec .grid-boxes { gap: 2.5vw 1.25vw; text-align: start; display: grid; grid-template-columns: repeat(2, 1fr); }
:is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box { width: 100%; max-width: 13.2vw; }
:is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box .grid-box-title h3 { color: var(--red); font-family: var(--bold); font-size: clamp(1.2rem, 0.938vw, 1000rem); margin: 0; }
:is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box .grid-box-fulltext p { font-size: clamp(1.2rem, var(--gap-24), 1000rem); }

:is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes { gap: var(--gap-24); ); display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--gap-40); width: 80%; }
:is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box { width: 100%; }
:is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box .grid-box-title { width: 100%; pointer-events: none; }
:is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box .grid-box-title h3 { background: var(--red); color: var(--white); margin: 0 0 1px; font-size: clamp(1.2rem, var(--gap-18), 1000rem); padding: var(--gap-20); line-height: 0.8; border-radius: var(--gap-8); }
:is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box .grid-box-subtitle { background: var(--red); color: var(--white); font-size: clamp(1.2rem, var(--gap-24), 1000rem); padding: var(--gap-56) var(--gap-28); line-height: 1.1; border-radius: var(--gap-8); }

:is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes { gap: 1.25vw; text-align: start; display: grid; grid-template-columns: repeat(1, 1fr); }
:is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box { width: 100%; max-width: 100%; }
:is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box .grid-box-title h3 { color: var(--red); font-family: var(--bold); font-size: clamp(1.2rem, var(--gap-20), 1000rem); margin: 0; line-height: 1.5; letter-spacing: 0.2px; }
:is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box .grid-box-fulltext p { }

:is(div, #LobbyModule) .section.speakers-sec .grid-boxes { gap: 1.25vw; }
:is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box { display: flex; text-align: start; gap: 1vw; align-items: center; width: auto; min-width: 15vw; }
:is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-title h3 { margin: 0; font-size: clamp(2rem, 1.146vw, 1000rem); line-height: 1.2; font-family: var(--bold); }
:is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-subtitle { color: inherit; font-size: clamp(1.2rem, 0.938vw, 1000rem); line-height: 1.2; }

.section.text-sections { display: flex; gap: 8vw; padding: 0 6.25vw 7.5vw; }
.section.text-sections .text-sections-inner { width: 57.5vw; }
.section.text-sections #GridPromo { width: 21vw; position: sticky; top: calc(var(--headerHeight) + 2vw); height: max-content; }
#GridPromo #DynamicFormObject { max-width: 100% !important; display: flex; flex-direction: column; border: none; justify-content: center; align-items: center; padding: 1.667vw; background: var(--red); color: var(--white); }
#GridPromo #DynamicFormObject::after { display: none; }
#GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText { padding: 0; margin: 0; width: 100%; font-size: 100%; }
#GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: clamp(1.2rem, 1.667vw, 1000rem); line-height: 1; color: inherit; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields { padding: 0; margin: 0; width: 100%; text-align: start !important; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields .top-form { display: block; margin-bottom: 0.8vw; font-size: clamp(1.2rem, 1.667vw, 1000rem); color: var(--white); text-align: center; line-height: 1; font-family: var(--bold); }
#GridPromo #DynamicFormObject .dynamicFormObjectFields .dynamicFormEndText { margin-bottom: 2vw; font-size: clamp(1.2rem, 0.938vw, 1000rem); color: var(--white); text-align: center; line-height: 1; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset { display: flex; gap: 1.354vw; flex-direction: column; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField { padding: 0; width: 100%; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { outline: unset; width: 100%; max-width: 100%; padding: 0.5vw 0.4vw; box-shadow: none; background: transparent; border: unset !important; border-bottom: 1px solid var(--white) !important; border-radius: 0; margin: 0; font-size: clamp(1.2rem, 0.833vw, 1000rem); color: var(--white); height: 2.3vw; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField :is(input:not([type="checkbox"], [type="radio"]), select, textarea)::placeholder { color: inherit; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField select option { color: var(--black); }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField { width: 100%; margin: 0.5vw 0 0; display: flex; gap: 6px; align-items: center; pointer-events: none; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField input { margin: 0; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField input[type="checkbox"] { margin: 0; cursor: pointer; opacity: 0; width: 0.833vw; height: 0.833vw; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField .checkmark { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/592018.svg); position: absolute; top: 0; right: 0; height: 0.833vw; width: 0.833vw; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField label { margin: 0; font-size: clamp(1rem, 0.677vw, 1000rem); }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField .must::before { right: 0; top: 0.7vw; font-size: 0.6vw; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField span.error { font-size: clamp(1rem, 0.677vw, 1000rem); left: 0; padding: 0.2vw; top: 0.7vw; line-height: 0.8; color: var(--white); background: var(--red); }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectSubmit { width: 100%; padding: 0; margin-top: 0.4vw; display: grid; place-content: center; }
#GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectSubmit button { background-color: var(--black); color: var(--white); height: 2.7vw; border: unset; display: flex; font-size: clamp(1.2rem, 1.146vw, 1000rem); transition: 0.3s all ease; min-width: 13vw; border-radius: 50px; padding: 0 1vw; align-items: center; justify-content: center; font-family: var(--reg); }
#GridPromo #DynamicFormObject .dynamicFormObjectFields #form-thanks #text1 * { color: inherit; }

:is(div, #LobbyModule) .section.clients-sec { padding: var(--gap-180) 0; }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes { width: 62.5vw; margin: 0 auto; overflow: visible; }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes::before { content: ''; display: block !important; position: absolute; width: var(--gap-80); height: var(--gap-56); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/622810.svg); inset-inline-end: calc(100% + var(--gap-32)); bottom: calc(100% + var(--gap-32)); }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box { display: flex; flex-direction: column-reverse; gap: var(--gap-32); align-items: center; width: 100%; opacity: 0 !important; }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box.swiper-slide-active { opacity: 1 !important; }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-headline { display: flex; align-items: center; justify-content: center; gap: var(--gap-8); }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-title h3 { color: var(--black); margin: 0; font-size: clamp(1.3rem, var(--gap-24), 1000rem); line-height: 1.5; font-family: var(--bold); }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-subtitle { color: var(--black); font-size: clamp(1.3rem, var(--gap-24), 1000rem); line-height: 1.5; }
:is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-fulltext p { font-size: clamp(1.3rem, var(--gap-48), 1000rem); line-height: 1.1; }
:is(div, #LobbyModule) .section.clients-sec .clients-image-container { display: flex; justify-content: center; margin-top: var(--gap-56); gap: var(--gap-28); }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image { position: relative; cursor: pointer; scroll-snap-align: center; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .box-image-animation { pointer-events: none; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .box-image-animation img { width: var(--gap-80); aspect-ratio: 1; height: auto; border-radius: 50%; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .progress-ring { position: absolute; top: 50%; left: 50%; width: var(--gap-100); height: var(--gap-100); pointer-events: none; transform: translate(-50%,-50%) rotate(-90deg); }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .progress-ring svg { width: 100%; height: 100%; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .progress-ring__background { fill: none; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image .progress-ring__circle { fill: none; stroke: var(--red); stroke-width: var(--gap-2); stroke-dasharray: 356; stroke-dashoffset: 356; transition: unset; }
:is(div, #LobbyModule) .section.clients-sec .grid-box-image.active .progress-ring__circle { transition: stroke-dashoffset 5s linear; }
:is(div, #LobbyModule) .section.clients-sec .content-section-Btn a.sec-button { margin: var(--gap-100) auto 0; font-family: var(--bold); background-color: var(--red); display: inline-flex; width: max-content; align-items: center; justify-content: center; border: unset; color: var(--white); font-size: clamp(1.2rem, var(--gap-18), 1000rem); transition: 0.3s all ease; border-radius: 50px; line-height: 1.4; padding: var(--gap-16) var(--gap-24); }

:is(div, #LobbyModule) .section.who-we-are-sec { background: var(--red); color: var(--white); display: flex; flex-wrap: wrap; gap: 4vw 2vw; padding-block: 4vw 9vw; }
:is(div, #LobbyModule) .section.who-we-are-sec .section-title { min-width: 19.156vw; width: fit-content; margin-inline-start: 6.25vw; }
:is(div, #LobbyModule) .section.who-we-are-sec .section-title h2 { font-size: clamp(1.2rem, var(--gap-32), 1000rem); line-height: 1; text-align: start; color: inherit; }
:is(div, #LobbyModule) .section.who-we-are-sec .text1 { max-width: 41.8vw; text-align: start; flex-grow: 1; }
:is(div, #LobbyModule) .section.who-we-are-sec .text1 * { color: inherit; }
:is(div, #LobbyModule) .section.who-we-are-sec .text1 a { text-decoration: underline; }
:is(div, #LobbyModule) .section.who-we-are-sec .owl-stage-outer { display: flex; gap: 1.667vw; justify-content: flex-end; }
:is(div, #LobbyModule) .section.who-we-are-sec .owl-stage-outer .owl-stage-outer-inner { display: flex; gap: 1.667vw; width: max-content; animation: scrollText 25s linear infinite; }
:is(div, #LobbyModule) .section.who-we-are-sec .owl-stage-outer .item a.slide-bg-layer { display: none; }

:is(div, #LobbyModule) .section.footer-text-sec { background: var(--red); color: var(--white); }
:is(div, #LobbyModule) .section.footer-text-sec .section-title h2 { font-size: clamp(2rem, 7.187vw, 1000rem); line-height: 0.7; text-transform: uppercase; opacity: 0.2; transform: translateY(100%); transition: 0.6s 0.3s all ease; font-family: var(--en-reg); color: inherit; }
:is(div, #LobbyModule) .section.footer-text-sec .section-title h2 span { font-family: var(--en-bold); }
:is(div, #LobbyModule) .section.footer-text-sec .section-title.shown h2 { transform: translateY(0%); }

@media(min-width: 1025px) {
    :is(div, #LobbyModule) .section.hero-team-sec .grid-boxes .grid-box:first-child { flex-direction: row-reverse; text-align: end; }
    :is(div, #LobbyModule) .section.hero-team-sec .grid-boxes .grid-box .grid-box-image img { width: 5.8vw; }

    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-image img { width: 5.8vw; }

    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField :is(input:not([type="checkbox"], [type="radio"]), select, textarea):is(:focus) { border-bottom: 1px solid var(--red) !important; }
}

@media(max-width: 1024px) {
    :is(div, #LobbyModule) .section.img-in-middle-text-sec { padding: var(--gap-20) var(--gap-24) var(--gap-48); }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box { flex-direction: column; gap: var(--gap-20); }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-image { width: 60vw; height: 62vw; }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-title { width: 100%; order: unset; text-align: center; }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: var(--gap-28); line-height: 1; }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text { width: 100%; text-align: center; }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text .grid-box-fulltext p { font-size: var(--gap-16); }
    :is(div, #LobbyModule) .section.img-in-middle-text-sec .grid-boxes .grid-box .grid-box-text .grid-box-subtitle.button a { font-size: var(--gap-14); padding: 0 var(--gap-24); letter-spacing: 0.28px; height: var(--gap-40); min-width: var(--gap-140); margin-top: var(--gap-20); }

    :is(div, #LobbyModule) .section.running-text { margin-bottom: 40px; }
    :is(div, #LobbyModule) .section.running-text .grid-text-content { gap: 20px; }
    :is(div, #LobbyModule) .section.running-text .grid-text-content .running-text-inner { gap: 20px; }
    :is(div, #LobbyModule) .section.running-text .grid-text-content .running-text-inner p { font-size: 7.6rem; }

    :is(div, #LobbyModule) .section.side-title-sec { padding-inline: var(--gap-24); flex-direction: column; gap: 14px; margin-bottom: var(--gap-40); }
    :is(div, #LobbyModule) .section.side-title-sec .section-title { min-width: unset; }
    :is(div, #LobbyModule) .section.side-title-sec .section-title h2 { font-size: 1.6rem; color: var(--black); font-family: var(--bold); }

    :is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) p:has(+ ul),
    :is(div, #LobbyModule) .section.bullets-sec :is(.grid-text-content, .section-topText) ul:has(+ p) { margin-bottom: var(--gap-28); }

    :is(div, #LobbyModule) .section.mid-text-size-sec .grid-text-content * { font-size: 2.2rem; line-height: 1.1; }

    :is(div, #LobbyModule) .section.boxes-sec .grid-boxes { gap: var(--gap-24); }
    :is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box { max-width: unset; }
    :is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: var(--gap-16); }
    :is(div, #LobbyModule) .section.boxes-sec .grid-boxes .grid-box .grid-box-fulltext p { font-size: var(--gap-18); }

    :is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes { width: 100%; margin-top: var(--gap-28); gap: var(--gap-12); }
    :is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: var(--gap-16); padding: var(--gap-16); }
    :is(div, #LobbyModule) .section.text-and-boxes-sec .grid-boxes .grid-box .grid-box-subtitle { font-size: var(--gap-18); padding: var(--gap-32) var(--gap-24); }

    :is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes { gap: 24px; }
    :is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box { max-width: unset; }
    :is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: var(--gap-16); }
    :is(div, #LobbyModule) .section.boxes-down-sec .grid-boxes .grid-box .grid-box-fulltext p { }

    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes { width: 100%; gap: 28px; flex-direction: column; }
    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box { gap: 8px; width: 70%; }
    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-image img { width: 64px; }
    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: 1.4rem; }
    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-subtitle { font-size: 1.2rem; }
    :is(div, #LobbyModule) .section.speakers-sec .grid-boxes .grid-box .grid-box-fulltext p { font-size: 1.2rem; }

    :is(div, #LobbyModule) .section.who-we-are-sec { flex-wrap: nowrap; flex-direction: column; padding-block: 40px 60px; gap: 0; }
    :is(div, #LobbyModule) .section.who-we-are-sec .section-title { min-width: unset; margin-inline-start: 24px; margin-bottom: 24px; }
    :is(div, #LobbyModule) .section.who-we-are-sec .section-title h2 { font-size: 1.6rem; font-family: var(--bold); }
    :is(div, #LobbyModule) .section.who-we-are-sec .text1 { max-width: unset; padding: 0 24px 40px; }
    :is(div, #LobbyModule) .section.who-we-are-sec .text1 * { font-size: 1.6rem; }
    :is(div, #LobbyModule) .section.who-we-are-sec .owl-stage-outer .owl-stage-outer-inner img { width: 33vw; max-height: 60vw; object-fit: cover; }

    :is(div, #LobbyModule) .section.clients-sec { padding: var(--gap-200) 0 var(--gap-96); }
    :is(div, #LobbyModule) .section.clients-sec::before { width: 50px; height: var(--gap-34); margin-bottom: var(--gap-56); }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes { width: 100%; }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes::before { inset-inline-end: 50%; transform: translateX(-50%); bottom: calc(100% + var(--gap-32)); }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box { padding: 0 var(--gap-20); }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-headline { flex-direction: column; }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-fulltext p { font-size: var(--gap-20); }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-title h3 { font-size: var(--gap-16); }
    :is(div, #LobbyModule) .section.clients-sec .grid-boxes .grid-box .grid-box-subtitle { font-size: var(--gap-16); }
    :is(div, #LobbyModule) .section.clients-sec .clients-image-container { margin-top: 0; gap: var(--gap-20); scroll-snap-type: x mandatory; overflow-x: auto; padding: var(--gap-32) var(--gap-20) var(--gap-8); justify-content: flex-start; }
    :is(div, #LobbyModule) .section.clients-sec .clients-image-container::-webkit-scrollbar,
    :is(div, #LobbyModule) .section.clients-sec .clients-image-container::-webkit-scrollbar-button { display: none; }
    :is(div, #LobbyModule) .section.clients-sec .grid-box-image .box-image-animation img { width: var(--gap-64); }
    :is(div, #LobbyModule) .section.clients-sec .grid-box-image .progress-ring { width: var(--gap-72); height: var(--gap-72); }
    :is(div, #LobbyModule) .section.clients-sec .content-section-Btn a.sec-button { margin: var(--gap-48) auto 0; font-size: var(--gap-16); line-height: 1.5; }

    :is(div, #LobbyModule) .section.footer-text-sec { padding-bottom: 60px; }
    :is(div, #LobbyModule) .section.footer-text-sec .section-title h2 { font-size: 6.7rem; line-height: 0.9; }

    .GridPromo-button { position: fixed; z-index: 200; bottom: 0; width: 100%; background: var(--red); border: unset; box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.25); border-radius: 20px 20px 0px 0px; padding: 22px 22px 18px; font-size: 1.6rem; transition: 0.7s all ease; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--white); }
    .GridPromo-button.active { transform: translateY(100%); }
    .GridPromo-button::before { content: ''; animation: updownInverted 1.5s infinite alternate; display: inline-block; width: 15px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/547558.svg); margin-right: 10px; transform: scaleY(-1); filter: invert(1); }

    #GridPromo:has(#DynamicFormObject) { box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.25); border-radius: 20px 20px 0px 0px; overflow: hidden; position: fixed; z-index: 100; bottom: -100vh; right: 0; transition: 0.7s all ease; }
    #GridPromo:has(#DynamicFormObject).active { bottom: 0%; z-index: 250; }
    #GridPromo #DynamicFormObject { padding: 24px 12px !important; width: 100%; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields .dynamicFormEndText { margin-bottom: 20px; font-size: 1.6rem; }
    #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText { width: 100%; text-align: center; position: relative; }
    #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText::after { content: ''; width: 15px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/warehouse/dynamic/547558.svg); position: absolute; left: 30px; margin-top: 35px; animation: updown 1.5s infinite alternate; filter: invert(1); }
    #GridPromo #DynamicFormObject .dynamicFormObjectTitleAndText h3.dynamicFormObjectTitle { font-size: 2.4rem; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields { width: 100%; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields .top-form { font-size: 2.4rem; margin-bottom: 20px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset { flex-direction: column; gap: 24px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField { width: 100%; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { font-size: 1.6rem !important; padding: 5px 10px; height: 40px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField textarea { height: 120px; padding-top: 16px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField { margin: 10px 0 0; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField.checkboxField label { font-size: 1.2rem; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField .must::before { top: 14px; right: 0; font-size: 70%; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectField span.error { font-size: 1.3rem; top: 10px; left: 0; padding: 4px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectSubmit { margin-top: 4px; }
    #GridPromo #DynamicFormObject .dynamicFormObjectFields fieldset .dynamicFormObjectSubmit button { height: 40px; font-size: 1.4rem; min-width: 162px; padding: 0 20px; }
}


/*------------------------------------------/*
 FORM THANK YOU PAGE
/*------------------------------------------*/
.FormResultPage #GridTop { display: none; }
.FormResultPage #GridWrapInner { padding: 0; min-height: calc(48vw - var(--headerHeight)); display: grid; place-content: center; }
.FormResultPage #GridWrapInner #GridHeader { display: none; }
.FormResultPage #SiteGrid { display: flex; flex-direction: column; justify-content: center; }
.FormResultPage #pageview #headline { font-size: 100%; position: relative; margin: 0; }
.FormResultPage #pageview #headline h1 { margin-bottom: 2vw; color: var(--black); font-family: var(--bold); font-size: 4.167vw; }
.FormResultPage #pageview #text1 { max-width: 100%; line-height: 1; }
.FormResultPage #pageview #text1 p { text-align: center; font-family: var(--reg); line-height: 1.5; direction: ltr; color: var(--black); font-size: clamp(1.2rem, 0.833vw, 1000rem); }
.FormResultPage #pageview #text1 a.FormResultPageButton { background: var(--red); color: var(--white); height: 2.7vw; display: inline-flex !important; font-size: clamp(1.2rem, 0.938vw, 1000rem); transition: 0.3s all ease; min-width: 11vw; border-radius: 50px; padding: 0 1vw; margin-top: 0 !important; align-items: center; justify-content: center; font-family: var(--bold); }

@media(min-width: 1025px) {
    .FormResultPage #pageview #text1 a.FormResultPageButton:is(:hover, :focus) { background: var(--dblue); }
}

@media(max-width: 1024px) {
    .FormResultPage #GridWrapInner { height: calc(100vh - var(--headerHeight)); padding: 0; justify-content: center; }
    .FormResultPage #pageview #headline h1 { font-size: 4rem; margin-bottom: 32px; margin-top: 0; }
    .FormResultPage #pageview #text1 p { font-size: 1.6rem; }
    .FormResultPage #pageview #text1 a.FormResultPageButton { height: 50px; width: auto; min-width: 210px; font-size: 1.6rem; padding: 0 20px; }
}


/*------------------------------------------/*
 ACCESSABILITY PAGE
/*------------------------------------------*/
.accessabilityMainPage #GridTop { display: none; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) { max-width: 46vw; margin: 5vw auto; display: flex; flex-direction: column; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline { font-size: 100%; text-align: start; margin: 0; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline h1 { font-size: clamp(2rem, 3.9vw, 1000rem); margin: 0 0 3vw; direction: ltr; font-family: var(--en-bold), var(--bold); }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) { max-width: 100%; text-align: start; direction: ltr; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3) { font-size: clamp(1.3rem, 1.354vw, 1000rem); margin: 2vw 0 0.8vw; line-height: 1; font-family: var(--en-bold), var(--bold); }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3):first-child { margin-top: 0; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol) { padding-inline-start: 1vw; margin: 0; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol) :is(ul,ol) { padding-inline-start: 0; }
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol):has(+ p, + ul, + ol),
.accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(p, ul,ol):has(+ ul, + ol) { margin-bottom: 2vw; }

@media(max-width: 1024px) {
    .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) { max-width: 100%; margin: 60px auto; padding: 0 16px; }
    .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) #headline h1 { font-size: 4rem; margin: 0 0 40px; }
    .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(h2, h3) { margin: 24px 0; font-size: 2.2rem; }
    .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol) { padding-inline-start: 20px; }
    .accessabilityMainPage :is(.MainContent, #pageview .container-fluid) :is(#text1, #text2) :is(ul,ol):has(+ p, + ul, + ol) { margin-bottom: 24px; }
}


/*------------------------------------------/*
 GSAP/ANIMATIONS RELATED
/*------------------------------------------*/
.line { overflow: hidden; }
.word { display: inline-flex !important; }
.char-wrap { display: inline-block; position: relative; overflow: hidden; }

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

@keyframes updownInverted {
    0% { transform: translateY(5px) scaleY(-1); }
    100% { transform: translateY(-5px) scaleY(-1); }
}

@keyframes updown {
    0% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
}
