@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } body { outline: none; margin: 0; padding: 0; background: black; } html { scroll-behavior: smooth; } html { scroll-behavior: smooth; } @font-face { font-family: Tongari; src: url("./../fonts/Tongari/Tongari-Regular.otf"); font-weight: 400; } @font-face { font-family: Tongari; src: url("./../fonts/Tongari/Tongari-Bold.otf"); font-weight: 700; } html { font-family: 'Montserrat', sans-serif; } a { cursor: pointer; } * { box-sizing: border-box; font-optical-sizing: auto; color: #fff; font-family: 'Montserrat', sans-serif; } main { position: relative; max-width: 100%; overflow: hidden; background: black; } .text-main { color: #CCC; text-align: center; font-family: Lato, sans-serif; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .text-main b { color: #CCC; font-weight: 700; font-family: Lato, sans-serif; } .heading-first { align-items: center; color: #FFF; text-align: center; font-family: Tongari; font-size: 64px; font-style: normal; font-weight: 400; line-height: 108%; } .under-btn-text { margin-top: 16px; position: relative; color: #ccc; text-align: center; leading-trim: both; text-edge: cap; font-family: Lato, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; transition: all .2s ease-in-out; } .under-btn-text:hover { color: #fff; } .heading-second { color: var(--text-text-primary, #FFF); text-align: center; font-family: Tongari; font-size: 48px; font-style: normal; font-weight: 400; line-height: 56px; text-transform: capitalize; } .download-btn { transition: .3s ease-in-out; } .download-btn.mob { display: none; } .download-btn.orange { display: flex; align-items: center; color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; max-width: 279px; height: 48px; margin: 0 auto; padding: 11px 30px; white-space: nowrap; position: relative; letter-spacing: 1px; } .download-btn.orange:hover { background: #F18536; } .download-btn.orange svg { height: 24px; min-width: 24px; margin-right: 12px; } .large-section { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; background: url("./../images/Fog.webp") no-repeat 50% 0; background-size: 100%; } @keyframes bounce { 0%, 20%, 48%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes fadeInBottomToTopSoft { 0% { transform: translatey(20px); opacity: 0; } 100% { transform: translatey(0); opacity: 1; } } .to-top { display: flex; flex-direction: column; align-items: center; margin: 9px auto 0; color: #DFDFDF; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; background-color: #000; font-weight: 500; line-height: var(--font-line-height-3, 24px); /* 150% */ letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .to-top svg { width: 24px; height: 24px; margin: 0 0 10px; } .to-top-section { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; } .to-top-section .content-wrapper { position: relative; padding-top: 0px; z-index: 3; } html, body { background-color: #000; } :root { --color-bg: #0d0d0d; --color-title: #fff; --color-small-title: #e5e5e5; --color-txt: #ccc; --color-title-black: #1e1e1e; --color-txt-black: #535353; --color-txt-gray: #b2b2b2; --color-txt-gray-2: #b5b5b5; --color-gray: #909090; --color-300: #333; --color-primary: #eb622b; --color-primary-hover: #f18536; } header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; opacity: 1; z-index: 27; height: 80px; } header * { box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: #fff; } header ol, header ul, header menu { list-style: none; } header .content-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; margin: 0 auto; padding: 15px 20px; } header .download-buttons { margin: 0; } .header-container { position: relative; z-index: 2; width: 100%; background: linear-gradient(180deg, #000000 40%, rgba(0, 0, 0, 0) 100%); } .header-link { display: flex; align-items: center; margin: 0 20px; padding: 7px 0; color: #DFDFDF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: 140%; border: 1px solid transparent; background: transparent; transition: .3s ease-in-out; white-space: nowrap; cursor: pointer; } .header-link.border { margin-right: 0; border: 1px solid #DFDFDF; padding: 7px 32px; } .header-link.border:hover { color: #fff; background: #EB622B; border: 1px solid #EB622B; } .header-link.orange { color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; max-width: 284px; margin: 0 auto; padding: 11px 30px; white-space: nowrap; position: relative; letter-spacing: 1px; } .header-link.orange:hover { background: #F18536; } .header-link.orange svg { height: 24px; margin-right: 12px; } .header-link-container { display: none; flex-grow: 1; } .header-link.mob { position: relative; display: none; } .header-link.mob::before { position: absolute; top: 50%; left: 0; width: 4px; height: 24px; transform: translateY(-50%); content: ''; background-color: #EB622B; opacity: 0; height: 0; transition: .2s ease-in-out; } .header-link.mob.active::before { opacity: 1; height: 24px; } .header-link.mob :hover { color: #D6D6D6; } .header-buttons { display: flex; flex-direction: row; } .header-logo { display: flex; align-items: center; } .header-logo.desktop { display: flex; } .header-logo.mob { display: none; } .header-logo img { width: 273px; margin-right: 12px; } .header-logo span { display: inline-flex; position: relative; margin-left: 12px; margin-top: 6px; color: #DFDFDF; font-size: 16px; font-weight: 600; line-height: 24px; } .header-logo span::before { top: 50%; margin-top: -3px; transform: translateY(-50%); content: ""; width: 1px; height: 24px; background-color: var(--color-txt); position: absolute; left: -11px; } .site-header { width: 100%; position: fixed; top: 0; z-index: 100; transition: .3s; } .site-header.black { background-color: #000; } .site-header .download-btn { padding: 16px 32px; } .site-header .header-inner { display: flex; max-width: 100%; margin: 0 auto; padding: 15px 14px 9px 16px; position: relative; z-index: 10; transition: .3s; min-height: 74px; align-items: center; } .site-header .header-inner nav { margin-left: auto; display: flex; align-items: center; } .site-header .header-inner nav ul li { margin: 0 3.5px; } .site-header .header-inner nav ul li:last-of-type { margin-left: 18px; margin-right: 6px; } .site-header .header-inner nav ul li.mob-only.decor a { font-size: 16px; font-weight: 600; line-height: 24px; } .site-header .header-inner nav ul.header-menu { display: flex; } .site-header .hamburger-menu-button { display: none; margin-left: 12px; } .hamburger-menu-button { z-index: 1; display: block; background: transparent; width: 24px; height: 24px; outline: none; border: none; cursor: pointer; padding: 0; } .hamburger-menu-button > div { position: relative; width: 24px; height: 20px; left: 2px; right: 0; margin: 0 auto; transition: .4s ease-in-out; } .hamburger-menu-button > div span { background: #fff; display: block; width: 100%; max-width: 20px; height: 2px; position: absolute; transition: .4s ease-in-out; border-radius: 0; } .hamburger-menu-button > div span:first-child { top: 3px; left: 0; } .hamburger-menu-button > div span:nth-child(2) { top: 9px; left: 0; } .hamburger-menu-button > div span:nth-child(3) { top: 15px; left: 0; } .hamburger-menu-button.close > div span { background: #DFDFDF; } .hamburger-menu-button.close > div span:first-child { transform: translateY(4px) rotate(45deg); } .hamburger-menu-button.close > div span:nth-child(2) { transform: scaleX(0); } .hamburger-menu-button.close > div span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header .header-inner nav .header-menu .header-menu-inner { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; } .opening-section { max-width: 100%; background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; padding: 75px 0px 0; z-index: 2; background: black; background: linear-gradient(180deg, black 0%, #011021 80%); } .opening-section .first-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .opening-section .first-layer .shadow-bottom { display: flex; position: absolute; min-width: 100vw; bottom: 0; left: 0; z-index: 2; max-inline-size: fit-content; max-block-size: unset; align-items: flex-end; align-self: flex-end; top: unset; } .opening-section .logo-ribbon { position: absolute; top: 23px; right: -51px; } .opening-section .hero-video-loop { position: absolute; width: auto; } .opening-section .hero-video-loop.bg { position: absolute; bottom: 0; top: unset; width: 100%; } .opening-section .hero-video-loop.left { top: 0; left: 0; height: fit-content; min-width: auto; max-height: 100%; z-index: 9; } .opening-section .hero-video-loop.right { top: 0; right: 0; height: fit-content; min-width: auto; max-height: 100%; z-index: 9; } .opening-section .characters-block { position: relative; max-width: 1920px; margin: 0 auto; } .opening-section h1.heading-second { width: 100%; max-width: 538px; margin-top: 25px; opacity: 0; animation: .4s .4s forwards fadeInBottomToTopSoft; } .opening-section .small-text { display: none; margin: 23px 0 10px; font-family: Lato, sans-serif; font-size: 16px; font-weight: 500; line-height: 130%; color: rgba(255, 255, 255, 0.5); text-align: center; } .opening-section * { box-sizing: border-box; } .intro-text-container { max-width: 1680px; margin: 0 auto; position: relative; z-index: 10; padding: 64px 20px 0; } .intro-text-container .heading-first { max-width: 788px; margin-top: 45px; text-align: center; opacity: 0; animation: .4s .4s forwards fadeInBottomToTopSoft; } .intro-text-container p.txt { max-width: 545px; font-family: 'Montserrat', sans-serif; line-height: 145%; color: #ccc; text-align: center; font-size: 16px; font-weight: 500; line-height: 160%; } .intro-text-container p.txt:first-of-type { margin: 12px auto 0; } .intro-text-container p.txt + p.txt { margin: 0 auto 12px; } .intro-text-container p.txt span { color: #fff; font-size: 16px; font-weight: 500; line-height: 160%; font-weight: 700; } .intro-text-content { display: flex; flex-direction: column; align-items: center; } .hero-logo { display: flex; justify-content: center; height: 80px; margin: 9px auto 2px; animation: .4s .5s forwards fadeInBottomToTopSoft; } .opening-section { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .opening-section .download-buttons { display: flex; justify-content: flex-start; margin: 36px auto 0; } .opening-section .download-buttons + .txt-small { text-decoration: underline; transition: .2s ease-in-out; } .opening-section .download-buttons + .txt-small:hover { color: #fff; } .opening-section .download-buttons div:not(:first-child) { position: relative; margin-left: 22px; } .opening-section .download-buttons .desktop { display: flex; } .opening-section .download-buttons .download-btn { margin: 0; } .opening-section .hero-logo { opacity: 0; } .opening-section .under-btn-text { opacity: 0; animation: .4s .1s forwards fadeInBottomToTopSoft; } .opening-section .download-btn { opacity: 0; animation: .4s .2s forwards fadeInBottomToTopSoft; } .bg-character-mob { position: relative; display: none; } .scroll-down-block { display: flex; flex-grow: 1; flex-direction: column; justify-content: flex-end; margin: 84px auto 40px; color: #808080; text-align: center; font-size: 15px; font-weight: 500; line-height: 150%; z-index: 10; position: relative; display: flex; animation: bounce 3s linear infinite; } .scroll-down { position: relative; display: flex; justify-content: center; margin: 0 auto; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .icons-block { position: relative; display: flex; flex-wrap: wrap; gap: 25px 25px; margin: 21px auto 15px; max-width: 862px; width: 100%; justify-content: space-evenly; opacity: 0; animation: .4s .3s forwards fadeInBottomToTopSoft; } .icons-item { display: flex; flex-direction: column; align-items: center; min-width: 154px; } .icons-item img { height: 40px; } .icons-item-text { margin-top: 4px; color: var(--text-text-secondary, #CCC); text-align: center; font-size: var(--font-size-350, 14px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .kit-section { position: relative; margin: 0 auto; background: linear-gradient(180deg, #011021 0%, #000 100%); } .kit-section .layer-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .kit-section .layer-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(180deg, #011021 0%, #000 100%), url("./../images/shadowBottomDevKit.svg"); background: radial-gradient(100% 100% at 50% 0%, rgba(0, 0, 0, 0) 84.82%, #000 100%); background: url("./../images/shadowBottomDevKit.svg"); background-size: cover; background-position: 50% 100%; z-index: 8; } .kit-section .layer-section .layer { position: absolute; } .kit-section .layer-section .layer.one { bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 4; } .kit-section .layer-section .layer.two { bottom: 0; left: 0; width: 100%; height: 100%; } .kit-section .layer-section .layer.three { top: 0; left: 0; width: 100%; height: 100%; } .kit-section .layer-section .shadow-bg { display: flex; align-items: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; } .kit-section .layer-section .shadow-bg img { position: relative; width: 100%; } .kit-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; padding: 86px 20px 13px; max-width: 1150px; width: 100%; margin: 0 auto; z-index: 4; } .kit-section .content-wrapper::before { content: ''; position: absolute; bottom: 265px; left: 50%; width: 1320px; height: 457px; transform: translate3d(0, 0, 0); transform: translateX(-50%); border-radius: var(--space-none, 1320px); background: linear-gradient(181deg, rgba(71, 112, 142, 0.6) 11.11%, rgba(71, 112, 142, 0) 106.3%); filter: blur(150px); } .kit-section .text-main { max-width: 650px; width: 100%; font-family: Lato, sans-serif; } .kit-section .text-main br:first-child { display: none; } .kit-section .video-loop.ember { position: absolute; transform: translate3d(0, 0, 0); mix-blend-mode: screen; z-index: 3; } .kit-section .video-loop.ember.left { left: 0; width: 960px; } .kit-section .video-loop.ember.right { right: 0; width: 960px; } .kit-section .decorated-line { position: relative; margin-bottom: 20px; } .kit-section .heading-second { margin-bottom: 18px; } .kit-section .video-loop.large { position: relative; max-width: 1110px; margin: 68px auto 0; } .kit-section .video-loop.large::before { top: 50%; left: 50%; width: 100%; height: 100%; transform: translate3d(0, 0, 0); transform: translate(-50%, -50%); position: absolute; content: ''; display: flex; border-radius: var(--space-none, 1320px); background: linear-gradient(181deg, rgba(71, 112, 142, 0.6) 11.11%, rgba(71, 112, 142, 0) 106.3%); mix-blend-mode: screen; filter: blur(150px); } .gradient-top { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; } .gradient-top img { display: flex; align-items: center; position: relative; max-inline-size: fit-content; max-block-size: fit-content; } .gradient-bottom { display: flex; align-items: flex-end; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 5; } .gradient-bottom img { display: flex; align-items: center; position: relative; max-inline-size: fit-content; max-block-size: fit-content; height: unset; } .features-section { position: relative; background: #000; } .features-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 68px 20px 40px; width: 100%; max-width: 1436px; z-index: 2; } .features-line { position: relative; display: flex; justify-content: space-between; width: 100%; gap: 24px; margin-bottom: 91px; margin-bottom: 52px; } .features-line:first-of-type .features-line-text { max-width: 355px; } .features-line:nth-of-type(2) { margin-bottom: 60px; } .features-line:nth-of-type(2) .features-line-text { max-width: 312px; } .features-line .features-video { width: 100%; max-width: 818px; } .features-line .features-video video { max-width: 100%; width: auto; } .features-line-container { width: 100%; max-width: 442px; margin-left: 24px; } .features-line-item { display: flex; margin: 68px 0 83px; } .features-line-img { min-width: 40px; width: 40px; height: 40px; } .features-line-heading { margin: 0 0 0 24px; margin-bottom: 3px; color: var(--color-text-pure, #FFF); font-family: Tongari; font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; } .features-line-text { max-width: 420px; margin: 0 24px; color: var(--text-text-secondary, #CCC); font-family: var(--font-family-default, Lato); font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .features-line-content { margin: 0; } .features-line-heading br { display: none; } .contest-section { position: relative; background: #000 url("./../images/Hackathon_BG_Visual.webp") no-repeat 50% 0%; background-size: cover; } .contest-section .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding: 209px 20px 247px; width: 100%; max-width: 1436px; } .contest-section .card { position: relative; width: 100%; background: url("./../images/CardBody.webp") no-repeat 50% 50%; background-size: cover; height: 534px; padding: 14px; } .contest-section .card-wrapper-outer { width: 100%; max-width: 1112px; } .contest-section .card-wrapper-outer::before { width: 100%; height: 440px; position: absolute; top: 62%; left: 50%; transform: translate3d(0, 0, 0); transform: translate(-50%, -50%); content: ''; border-radius: 1320px; background: linear-gradient(181deg, rgba(235, 98, 43, 0.6) 11.11%, rgba(235, 98, 43, 0) 106.3%); filter: blur(150px); } .contest-section .card-wrapper { display: flex; justify-content: center; padding: 75px 20px 111px; border-radius: 257px; background: url("./../images/InnerBG.webp") no-repeat 50% 50%; background-size: cover; } .contest-section .card-img { width: 269px; margin: 0 58px 0 58px; } .contest-section .card-content { max-width: 480px; padding: 58px 20px 0; } .contest-section .card-content .text-main { margin-bottom: 23px; text-align: left; color: var(--color-text-primary, #DFDFDF); } .contest-section .card .corner { position: absolute; } .contest-section .card .corner.top { top: 15px; } .contest-section .card .corner.top.left { left: 12px; } .contest-section .card .corner.top.right { right: 13px; } .contest-section .card .corner.bottom { bottom: 15px; } .contest-section .card .corner.bottom.left { left: 12px; } .contest-section .card .corner.bottom.right { right: 13px; } .contest-section .decor-line { position: absolute; height: 475.467px; } .contest-section .decor-line.left { top: 0; left: 0; transform: translate(-57%, 48.5%); } .contest-section .decor-line.right { top: 0; right: 0; transform: translate(57%, 48.5%); } .contest-section .decor-sparks { position: absolute; } .contest-section .decor-sparks.left { top: 407px; left: -187px; width: 652px; height: 543px; } .contest-section .decor-sparks.right { top: 37px; right: -156px; width: 438.405px; height: 433px; transform: rotate(46.044deg); flex-shrink: 0; } .contest-section .img-bg-cat { position: absolute; top: 61px; left: -50px; height: 440px; } .contest-section .img-bg-owl { position: absolute; bottom: -2px; right: -243px; z-index: 1; width: 840.773px; } .btn-border { display: inline-flex; border: 1px solid #DFDFDF; align-items: center; margin: 0; padding: 7px 32px; color: #DFDFDF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: 140%; background: transparent; transition: .3s ease-in-out; white-space: nowrap; cursor: pointer; text-transform: uppercase; } .btn-border:hover { color: #fff; background: #EB622B; border: 1px solid #EB622B; } .about-section { position: relative; margin: 0 auto; background: var(--HL-Dark-blue, #011021); background: url("./../images/AboutBG_screen.webp"), var(--HL-Dark-blue, #011021) no-repeat 50% 50%; } .about-section::before { content: ''; position: absolute; width: 100%; height: 1px; background-color: #B69451; } .about-section .content-wrapper { display: flex; align-items: flex-start; position: relative; padding: 151px 0 70px; max-width: 1509px; width: 100%; margin: 0 auto; } .about-section .about-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; width: 100%; max-width: 680px; margin: 0 auto 80px; padding: 0 20px; text-align: center; } .about-section .about-item-img { width: 96px; height: 96px; margin: 0 0 41px; } .about-section .about-item .heading-second { margin-bottom: 23px; } .faq-section { position: relative; z-index: 3; } .faq-section .content-wrapper { padding: 78px 0 86px; max-width: 882px; width: 100%; margin: auto; } .faq-section .heading-second { margin: 38px auto 5px; } .faq-section .faq-list { list-style: none; padding: 12px 0 0 0; } .faq-section .faq-list li { position: relative; font-size: 18px; font-weight: 400; color: #FFF; font-feature-settings: 'liga' off, 'clig' off; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: 0.18px; border-bottom: 1px solid #B69451; } .faq-section .faq-list li a { transition: .2s ease-in-out; } .faq-section .faq-list li a:hover { color: #fff; } .faq-section .faq-list li .question { font-size: 22px; line-height: 32px; margin: 0; background: transparent; font-weight: 500; width: 100%; text-align: left; padding: 24px 50px 24px 0; border: none; text-transform: inherit; position: relative; transition: all .15s; letter-spacing: 0; cursor: pointer; color: #DFDFDF; } .faq-section .faq-list li .question svg { width: 24px; height: 24px; margin-right: 15px; transition: all .15s; fill: #A4ADBC; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; } .faq-section .faq-list li .question.active + .answer-outer:before { height: 100%; } .faq-section .faq-list li .question.active svg { fill: #fff; transform: rotate(180deg); } .faq-section .faq-list li .answer-outer { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; background: var(--color-surface-primary, #101010); } .faq-section .faq-list li .answer-outer .answer-inner { padding: 0 36px; } .faq-section .faq-list li .answer-outer .answer-inner p { padding: 0; margin: 24px 0; max-width: 730px; color: #DFDFDF; font-family: Lato, sans-serif; font-size: var(--font-size-225, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-35, 28px); letter-spacing: var(--font-letter-spacing-none, 0px); } .faq-section .faq-list li .answer-outer .answer-inner a { color: #DFDFDF; font-family: Lato, sans-serif; font-family: var(--font-family-default, Lato); font-size: var(--font-size-225, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-35, 28px); letter-spacing: var(--font-letter-spacing-none, 0px); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; cursor: pointer; transition: .2s ease-in-out; } .faq-section .faq-list li .answer-outer .answer-inner a:hover { color: #fff; } .faq-section .faq-list li .answer-outer .answer-inner ul { padding-bottom: 24px; list-style: disc; padding-left: 15px; } .faq-section .decorated-line { position: relative; display: flex; justify-content: center; position: relative; height: 96px; } .faq-section .decorated-line img { max-inline-size: none; max-width: 100%; max-block-size: fit-content; } .large-section { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; background: linear-gradient(180deg, #011021 0%, #000 100%); } .large-section::before { content: ''; position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; background: url("./../images/Fog.webp"); background-size: cover; background-repeat: no-repeat; background-position: 50% 0; z-index: 2; } .low-section { width: 100%; z-index: 3; } .bottom-section { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; z-index: 1; } .bottom-section .layer-item { position: absolute; top: 0; } .bottom-section .layer-item.left { left: 0; width: 527px; } .bottom-section .layer-item.right { right: 0; width: 527px; } .bottom-section .layer-item .glow { position: absolute; transform: translate3d(0, 0, 0); transform: scale(0); z-index: 6; } .bottom-section .layer-item .glow.left { top: 392px; left: 152px; width: 180px; height: 180px; animation: glow 5.1s ease-in-out infinite alternate; animation-delay: .5s; } .bottom-section .layer-item .glow.right { top: 441px; right: 195px; width: 180px; height: 180px; animation: glow 4.7s ease-in-out infinite alternate; } .bottom-section .intro-text-container { position: relative; padding: 127px 20px 141px; } .bottom-section .icons-block .icons-item-text { margin-top: 0px; } .bottom-section .layer-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @keyframes glow { 0% { transform: scale(0); } 100% { transform: scale(1); } } .footer { position: relative; z-index: 3; padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #000; } .footer .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 1720px; margin: 0 auto; padding: 30px 20px 42px; } .footer-line { display: flex; width: 100%; justify-content: space-between; width: 100%; } .footer-line .content-wrapper { position: relative; flex-direction: column; max-width: 1678px; width: 100%; margin: 0 auto; padding: 15px 10px; } .footer-line p, .footer-line span, .footer-line a { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line a { text-decoration-line: underline; transition: .2s ease-in-out; } .footer-line a:hover { color: #fff; } .footer-line-left { display: flex; flex-direction: column; } .footer-line-left ul { display: flex; align-items: center; } .footer-line-left ul li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line-right { display: flex; } .footer-line-right p, .footer-line-right span, .footer-line-right a, .footer-line-right li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 48px; width: 100%; } .footer-col p { max-width: 1099px; margin-top: 24px; } .footer-col p, .footer-col span, .footer-col a { color: #B2B2B2; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 140%; transition: .2s ease-in-out; } .footer-col a { text-decoration: underline; transition: .2s ease-in-out; } .footer-col a:hover { color: #fff; } .footer-fire { position: absolute; top: -26px; right: -100px; width: 375px; max-height: 228px; } .footer-logo { width: 177px; } .footer-socials { display: flex; margin-top: -2px; } .footer-socials-item { margin-left: 20px; } .footer-line ul.mob-only { display: none; } @media only screen and (min-width: 1025px) { .opening-section .small-text { display: block; text-align: left; } .icons-block { gap: 33px 65px; margin: 58px auto 20px; } .icons-item-text { font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .faq-section .faq-list { padding: 51px 0 0; } .faq-section .faq-list li .question { margin: 0; padding: 22px 45px 22px 0; line-height: 160%; } .bottom-section .icons-block { gap: 33px 57px; margin: 58px auto 51px; } .footer { padding: 0; } .footer .content-wrapper { max-width: 1720px; padding: 0px 20px 141px; align-items: flex-start; } .footer-line .content-wrapper { flex-direction: row; justify-content: space-between; max-width: 1720px; margin: 0 auto; padding: 16px 20px; } .footer-line-left { flex-direction: row; } .footer-line-left ul li { margin-left: 32px; } } @media only screen and (min-width: 1025px) and (min-width: 1921px) { .icons-item-text { margin-top: 2%; font-size: 0.8vw; line-height: 143%; } } @media only screen and (min-width: 1025px) and (min-width: 2000px) { .icons-item-text { margin-top: 3.5%; font-size: 0.8vw; line-height: 143%; } } @media only screen and (min-width: 1100px) { .site-header .header-inner nav ul li ul.header-menu-inner { display: none; } } @media only screen and (min-width: 1101px) { .header-link { border-bottom: 1px solid transparent; } .header-link:hover { border-bottom: 1px solid #EB622B; } } @media only screen and (min-width: 1921px) { .opening-section { height: 100vh; justify-content: center; } .intro-text-container .heading-first { max-width: 53vw; font-size: 3.345vw; line-height: 100%; } .hero-logo { height: 4.1vw; } .opening-section .under-btn-text { margin-top: 3%; font-size: 0.81vw; line-height: 100%; } .opening-section .download-btn { font-size: 0.81vw; line-height: 100%; } .opening-section .download-btn.orange { max-width: unset; height: unset; padding: 0.57vw 1.7vw 0.6vw; } .scroll-down-block { max-height: 70px; } .icons-item img { height: 2vw; margin: 0 auto; display: flex; justify-content: center; } .large-section::before { background-position: 50% 100%; } } @media only screen and (max-width: 1760px) { .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1470px) { .opening-section .hero-video-loop.left { left: unset; right: 67vw; } .opening-section .hero-video-loop.right { right: unset; left: 67vw; } } @media only screen and (max-width: 1400px) { .features-line .features-video { display: flex; } } @media only screen and (max-width: 1360px) { .footer-col p { max-width: 600px; } .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1250px) { .header-link.border { padding: 7px 12px; } .site-header .header-inner nav ul li { margin: 0; } .btn-border { padding: 7px 32px; } } @media only screen and (max-width: 1200px) { .features-line-container { margin-left: 0; } .about-section .content-wrapper { flex-direction: column; align-items: flex-start; padding: 64px 0 15px; } .about-section .text-main br { display: none; } .about-section .about-item-img { width: 80px; height: 80px; } .about-section .about-item .heading-second { margin-bottom: 20px; } } @media only screen and (max-width: 1148px) { .contest-section { background: #000; } .contest-section .content-wrapper { padding: 69px 20px 179px; } .contest-section .card { width: 375px; height: 800px; background: url("./../images/Body_mob-texture.webp") no-repeat 50% 50%; background-size: cover; } .contest-section .card-wrapper-outer { display: flex; justify-content: center; } .contest-section .card-wrapper-outer::before { display: none; } .contest-section .card-wrapper { flex-direction: column; align-items: center; justify-content: flex-start; background: url("./../images/InnerBG_mob.webp") no-repeat 50% 50%; background-size: cover; padding: 39px 20px 111px; } .contest-section .card-img { width: 252.128px; margin: 0 auto; } .contest-section .card-content { display: flex; flex-direction: column; max-width: 307px; padding: 20px 0 0; } .contest-section .card-content .text-main { text-align: center; } .contest-section .card .corner { width: 120px; height: 120px; } .contest-section .img-bg-owl { right: -9%; width: 534.68px; max-inline-size: unset; max-block-size: unset; bottom: -3px; } .btn-border { margin: 0 auto; } } @media only screen and (max-width: 1100px) { html, body { scroll-padding-top: 74px; } .under-btn-text { margin-top: 15px; } header { height: unset; } header .content-wrapper { justify-content: flex-start; } .header-link { width: 100%; margin-left: 0; padding: 11px 18px 14.5px; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: 0; border-bottom: none; } .header-link.desktop { display: none !important; } .header-link.mob { display: flex; } .header-link:hover { border-bottom: none; } .header-link.border { display: none; border: none; } .header-logo.desktop { display: none; } .header-logo.mob { display: flex; } .header-logo img { margin-right: 0; margin-left: 9px; width: auto; height: 48px; } .site-header .hamburger-menu-button { display: block; } .submenu-icon { display: flex; } .site-header .header-inner .action-items { width: fit-content; margin: auto auto 10vh; display: flex; gap: 8px; } .site-header .header-inner nav .header-menu { position: absolute; left: 0; top: 74px; margin: 0; flex-direction: column; background-color: #1E1E1E; text-align: center; width: 100%; overflow: overlay; height: 100vh; padding-top: 16px; padding-bottom: 80px; gap: 0; } .site-header .header-menu-inner { background: #000; } .site-header .header-inner nav { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: opacity .3s ease-out; animation: quick-hide-mobile-menu .2s 1ж; } .site-header .header-inner nav ul li { margin-left: unset; display: flex; justify-content: flex-start; position: relative; width: 100%; margin: 0; flex-direction: column; } .site-header .header-inner nav ul li a { display: flex; align-items: center; } .site-header .header-inner nav ul li a.download-btn { max-width: 224px; } .site-header .header-inner nav ul li a.border { display: none; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } to { opacity: 0; } } .site-header .header-inner nav.is-open { opacity: 1; } .site-header .header-inner nav:not(.is-open) { pointer-events: none; } .site-header .header-inner nav ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: #1E1E1E; } .site-header .header-inner nav ul::-webkit-scrollbar-thumb { border-width: 0; background-color: #1E1E1E; background-clip: padding-box; } .kit-section { scroll-padding: 74px 0px 0px 0px; } .faq-section { scroll-padding: 74px 0px 0px 0px; } .faq-section .content-wrapper { scroll-padding: 74px 0px 0px 0px; } } @media only screen and (max-width: 1024px) { html { scroll-padding-top: 80px; } .heading-first { font-size: 36px; font-style: normal; font-weight: 400; line-height: 44px; } .heading-second { font-size: 36px; line-height: 44px; } .download-btn.mob { display: flex; } .download-btn.orange { display: flex; } .to-top { margin: 13px auto 0; font-size: 16px; } .to-top-section .content-wrapper { padding-top: 0; } .header-link.border { display: none; } .header-link-container { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 120px; } .site-header .header-inner nav ul li:last-of-type { margin-left: unset; } .opening-section { background-size: cover; display: flex; flex-direction: column; height: unset; width: 100%; padding: 0; height: unset; background: none; background: black; background: linear-gradient(180deg, black 0%, #011021 80%); } .opening-section .first-layer { display: none; } .opening-section .logo-ribbon { top: -21px; right: -20px; height: 40px; } .opening-section h1.heading-second { margin-top: 18px; font-size: 32px; line-height: 39px; } .intro-text-container { padding: 75px 20.5px 0; } .intro-text-container .heading-first { margin: 38px 0 17px; } .intro-text-container p.txt:first-of-type { margin: 13px auto 0; } .intro-text-container p.txt + p.txt { margin: 0 auto 15px; } .intro-text-container p.txt { margin: 0px auto 0px; text-align: center; font-size: 16px; font-weight: 500; line-height: 160%; } .hero-logo.desktop { display: none; } .opening-section { background: linear-gradient(180deg, #000 0%, #011021 40%); } .opening-section .download-buttons { flex-direction: column; align-items: center; width: 100%; margin: 25px auto 0; } .opening-section .download-buttons div:not(:first-child) { margin-left: 0; margin-top: 20px; } .opening-section .download-buttons .desktop { display: flex; width: 100%; justify-content: center; } .opening-section .download-btn { display: flex; } .bg-character-mob { display: flex; margin-top: -255px; min-width: 106%; margin-left: -3%; } .scroll-down-block { display: none; margin: 76px auto 0px; } .kit-section .layer-section { display: none; } .kit-section .content-wrapper { padding: 4px 20px 0; } .kit-section .content-wrapper::before { display: none; } .kit-section .video-loop.ember { display: none; } .kit-section .decorated-line { display: none; } .kit-section .heading-second br { display: none; } .kit-section .video-loop.large { display: flex; align-items: center; width: 100%; max-width: 1110px; margin: 47px auto 0; } .features-section .content-wrapper { padding: 20px 20px 40px; } .features-line { flex-direction: column-reverse; justify-content: flex-start; align-items: center; margin-bottom: 36px; } .features-line:nth-of-type(2) { margin-bottom: 40px; } .features-line .features-video { max-width: 100%; order: -1; } .features-line-item { display: flex; margin: 23px 2px 50px; flex-direction: column; justify-content: flex-start; } .features-line-heading { margin-bottom: unset; margin: 21px 0 6px; } .features-line-text { margin: 0; } .features-line-heading br { display: flex; } .contest-section .decor-line { display: none; } .contest-section .decor-sparks { display: none; } .contest-section .img-bg-cat { display: none; } .faq-section .content-wrapper { padding: 15px 20px 30px; } .faq-section .heading-second { margin: 48px auto 12px; } .faq-section .faq-list li .question { padding: 24px 132px 24px 0; font-size: var(--font-size-450, 18px); font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-700, 28px); letter-spacing: var(--font-letter-spacing-default, 0px); } .large-section::before { display: none; } .bottom-section { background: url("./../images/BottomSection_mob.webp") no-repeat 50% 100%; background-size: 100%; } .bottom-section .heading-first { order: 0; margin: 26px 0 46px; font-size: 48px; font-style: normal; font-weight: 400; line-height: 56px; text-transform: capitalize; } .bottom-section .cta-buttons.hero-buttons.download-buttons { order: 1; } .bottom-section .under-btn-text.underline { order: 2; } .bottom-section .intro-text-container { padding: 34px 20px 46px; } .bottom-section .icons-block { order: 3; margin: 60px auto 16px; } .bottom-section .layer-section { display: none; } .footer-line { flex-direction: column; align-items: center; } .footer-col { align-items: center; margin: 0 auto 8px; } .footer-col p { margin-top: 30px; text-align: center; } .footer-fire { display: none; } .footer-logo { width: 140px; } .footer-socials { margin-top: 44px; justify-content: center; margin: 29px auto 6px; } .footer-line ul.mob-only { display: flex; justify-content: space-between; width: 100%; max-width: 400px; padding: 0px 16px 16px; } .footer-line ul.mob-only li { margin: 0 4px; } .footer-line ul.desktop-only { display: none; } .footer-socials-item { margin-left: unset; margin: 0 10px; } .footer-socials-item:first-of-type { order: 1; } .footer-socials-item:nth-of-type(2) { order: 3; } .footer-socials-item:last-of-type { order: 2; } } @media only screen and (max-width: 600px) { .contest-section .content-wrapper { padding: 69px 0px 179px; } } @media only screen and (max-width: 500px) { .kit-section .text-main br { display: none; } .kit-section .text-main br:first-child { display: none; } } @media only screen and (max-width: 375px) { .contest-section .card { width: 320px; height: 879px; } } @media only screen and (max-width: 360px) { .faq-section .faq-list li .question { padding: 24px 52px 24px 0; } }