.visually-hidden { position: absolute; z-index: -1; width: 0; height: 0; padding: 0; margin: 0; border: none; overflow: hidden; }

@font-face { font-family: 'MaisonNeue'; src: url(/static/core/webfonts/Maison_Neue/MaisonNeue-Light.woff) format("woff"); font-weight: 300; }

@font-face { font-family: 'TiemposItalic'; src: url(/static/core/webfonts/TiemposItalic/TiemposHeadlineWeb-RegularItalic.woff) format("woff"); font-weight: 300; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-Light.otf) format("opentype"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-Regular.otf) format("opentype"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-Medium.otf) format("opentype"); font-weight: 500; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-SemiBold.otf) format("opentype"); font-weight: 600; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-Bold.otf) format("opentype"); font-weight: bold; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-ExtraBold.otf) format("opentype"); font-weight: 800; font-style: normal; }

@font-face { font-family: 'Trap'; src: url(/static/core/webfonts/Trap/Trap-Black.otf) format("opentype"); font-weight: 900; font-style: normal; }

@font-face { font-family: 'Magilio'; src: url(/static/core/webfonts/Magilio/MagilioRegular.otf) format("opentype"), url(/static/core/webfonts/Magilio/MagilioRegular.ttf) format("truetype"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'PurplePurse'; src: url(/static/core/webfonts/Purple_Purse/PurplePurse-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'Michroma'; src: url(/static/core/webfonts/Michroma/Michroma-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'Asap'; src: url(/static/core/webfonts/Asap/Asap-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; }

* { box-sizing: border-box; }

html, body { font-family: "Poppins", sans-serif, sans-serif; height: 100%; width: 100%; margin: 0; padding: 0; }

html { overflow-x: hidden; align-items: center; }

.footer { margin-top: auto; }

body { display: contents; min-height: 100vh; }

html { --primary-color: white; --text-color-primary: black; --secondary-color: #fff; --text-color-secondary: #16181b; --hover-color: #fbfbfb; --line-color-primary: #e3e3e3; --success-color: #28a745; --error-color: #dc3545; --input-text-color: #505050; --input-label-color: #959595; --input-border-color: #D7D7D7; --input-autofill-bg: #f4f3ff; }

html[theme='dark'] { --primary-color: #111317; --text-color-primary: white; --secondary-color: #202020; --text-color-secondary: #fff; --hover-color: #252525; --line-color-primary: #353535; --success-color: #28a745; --error-color: #d9534f; --input-text-color: white; --input-label-color: #727272; --input-border-color: #727272; --input-autofill-bg: #222139; }

html { background-color: var(--primary-color); color: var(--text-color-primary); }

.scroll-animation { height: 100vh; display: flex; justify-content: center; }

.scroll-animation__wrapper { width: 100%; max-width: 1500px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }

.scroll-animation__visual { width: 100%; max-width: 1312px; border-radius: 20px; background: #F0F0F0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 80px); max-height: 800px; border: 8px solid #717171; z-index: 2; opacity: 0; overflow: hidden; position: relative; transition: 0.1s ease transform, 1.5s ease-in-out opacity; }

.scroll-animation__model { position: absolute; transition: .7s ease-in-out transform; }

.scroll-animation__model--first { right: 0; bottom: 0; max-width: 1000px; transform-origin: bottom; }

.scroll-animation__model--second { max-width: 320px; transform-origin: center; }

.scroll-animation__model--third { height: 100%; transform-origin: center; }

.scroll-animation__model--fourth { width: 100%; transform-origin: center; transform: scaleX(-1); }

.scroll-animation__model--blur { opacity: 1 !important; transform: scale(1.05) scaleX(-1); width: unset; height: 100%; z-index: -1; filter: blur(22px); }

.scroll-animation__bar { object-fit: contain; position: absolute; left: 20px; top: 80px; z-index: 3; opacity: 0; transition: .3s ease-in-out opacity; }

.scroll-animation__bar--first { max-width: 182px; top: 50%; transform: translateY(-270px); }

.scroll-animation__bar--second { max-width: 300px; }

.scroll-animation__bar--third-vertical { left: unset; right: 20px; top: unset; height: 80%; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.scroll-animation__bar--third-vertical img { width: unset; height: 100%; }

.scroll-animation__bar--third-horizontal { visibility: hidden; left: unset; top: unset; bottom: 0; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.scroll-animation__bar--third-horizontal img { max-width: 800px; width: 100%; }

.scroll-animation__bar img { width: 100%; }

.scroll-animation__cursor { top: 0; left: 0; width: 35px !important; position: absolute; z-index: 4; transition: .4s ease-in-out transform, .3s ease-in-out opacity; transform: translate(0, 0); }

.scroll-animation__cursor--first { opacity: 0; }

.scroll-animation__cursor--second { left: 56px; top: 163px; }

.scroll-animation__text { position: absolute; bottom: 0; padding: 40px; z-index: 1; width: 30%; transition: 0.1s ease; }

.scroll-animation__text--left { left: 0; }

.scroll-animation__text--right { right: 0; }

.scroll-animation h5 { font-family: "Trap", sans-serif, sans-serif; font-size: clamp(18px, 3.5vw, 38px); font-weight: 600; font-style: normal; }

.scroll-animation p { font-family: "Trap", sans-serif, sans-serif; font-size: clamp(14px, 3.5vw, 20px); font-weight: 400; font-style: normal; color: var(--text-color-primary); }

.scroll-animation__ellipse { position: absolute; background: radial-gradient(circle, #22315b 0%, rgba(255, 255, 255, 0) 100%); width: 600px; height: 600px; filter: blur(50px); z-index: -1; top: 0; }

.scroll-animation__ellipse--right { right: 0; }

.scroll-animation__ellipse--left { left: 0; }

@media (max-width: 730px) { .scroll-animation__wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; } .scroll-animation__visual { height: calc(100vh / 1.5); position: absolute; top: 20px; transform: none !important; border: none; } .scroll-animation__model--first { max-width: 500px; } .scroll-animation__model--second { max-width: 200px; bottom: 20px; right: 20px; } .scroll-animation__model--third { height: unset; width: 100%; } .scroll-animation__bar--first { top: 40px; transform: none; } .scroll-animation__bar--second { max-width: 200px; top: 20px; left: 20px; } .scroll-animation__bar--third-vertical { visibility: hidden; } .scroll-animation__bar--third-horizontal { visibility: visible; } .scroll-animation__cursor--second { left: 35px; top: 107px; } .scroll-animation__text { left: unset; transform: none !important; width: 100%; height: 30%; } .scroll-animation__ellipse { right: unset; transform: translateY(-50%); background: linear-gradient(#22315b 0%, rgba(255, 255, 255, 0) 100%); width: 100%; left: 0; } }

@media (max-height: 420px) { .scroll-animation { overflow-x: clip; margin: 0 -20px; padding: 0 20px; } .scroll-animation__text { transform: none !important; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .scroll-animation h5 { font-size: 20px; } .scroll-animation p { font-size: 16px; } .scroll-animation__model--first { max-width: 600px; } .scroll-animation__model--second { max-width: 170px; } .scroll-animation__bar--first { transform: scale(0.5); top: 20%; transform-origin: left top; } .scroll-animation__bar--second { transform: scale(0.5); top: 20px; transform-origin: left top; } .scroll-animation__ellipse--right { left: 0; right: unset; } .scroll-animation__ellipse--left { left: unset; right: 0; } }