@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; background: #060708; margin: 0; padding: 0; } html, body { box-sizing: border-box; height: 100%; padding: 0; margin: 0; } .wrapper { box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; max-width: 100%; position: relative; overflow: hidden; } a { cursor: pointer; } * { box-sizing: border-box; font-family: 'Lato', sans-serif; color: #fff; } main { flex-grow: 1; } h3, h4, .download-btn { font-family: 'Rajdhani', sans-serif; } .download-buttons-mob { display: none; } .heading-second { color: #fff; font-size: 150px; font-weight: 800; line-height: 80%; text-transform: uppercase; font-family: "pressio-compressed", sans-serif; font-size: 150px; font-weight: 800; line-height: 80%; text-transform: uppercase; } .main-text { display: block; margin: 46px auto 0; color: #fff; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700; line-height: 100%; text-transform: uppercase; } .main-text.grey { color: #999; } .download-btn { display: inline-flex; justify-content: center; align-items: center; position: relative; height: 52px; margin: 0 auto 10px; padding: 16px 52px; white-space: nowrap; overflow: hidden; background: #FE4655; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; line-height: 100%; letter-spacing: -0.6px; transition: all .2s ease-in-out; } .download-btn:hover { background: #FF7A7A; } .download-btn.mob { display: none; } .download-btn.desktop { display: inline-flex; } .download-btn svg { width: 24px; margin-right: 6px; min-width: 24px; } .download-buttons { display: flex; justify-content: center; margin: 36px auto 0; } .download-btn.mac.hidden, .download-btn.pc.hidden { display: none; } .banner-section { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 auto; max-width: 100%; width: 100%; } .banner-section .first-layer { position: absolute; top: 0; left: 50%; max-width: 1440px; width: 100%; height: 100%; display: flex; justify-content: center; margin: 0 auto; transform: translateX(-50%); z-index: 1; } .banner-section .first-layer .vector-left, .banner-section .first-layer .vector-right { position: absolute; bottom: 0; } .banner-section .first-layer .vector-left { position: absolute; bottom: 47px; left: 0%; width: 10px; height: auto; } .banner-section .first-layer .vector-right { position: absolute; bottom: 47px; right: 0%; width: 10px; height: auto; } .banner-section .content-wrapper { width: 100%; } .banner-img { position: relative; width: 100%; overflow: hidden; } .banner-img.mob { display: none; } .banner-hero { position: absolute; top: 0; left: 50%; width: 538.133px; min-height: 932.046px; margin-top: 15px; transform: translateX(-50%); } .banner-bg.decor { display: flex; position: absolute; top: 0; left: 50%; width: 100%; transform: translateX(-50%); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-26px); } 100% { transform: translateY(0px); } } .hero-section { max-width: 100%; position: relative; padding: 0; z-index: 1; background: url("./../images/Mobile-hero.webp") no-repeat 0% 0%; background-size: contain; } .hero-section img, .hero-section svg { max-width: unset; } .hero-section .logo { width: 41.477px; } .hero-section .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 5; max-width: 1479px; margin: 0 auto; padding: 231px 20px 86px; text-align: center; } .hero-section .first-layer { position: absolute; top: 0; left: 50%; max-width: 100%; width: 100%; height: 100%; display: flex; justify-content: center; margin: 0 auto; } .hero-section .first-layer .square.one { position: absolute; top: 292px; left: 29.55%; width: 10px; height: 10px; background: #FF4655; } .hero-section .first-layer .line { display: block; position: absolute; width: 24px; height: 2px; background: #4C545C; } .hero-section .first-layer .line.one { top: 40px; left: 164px; } .hero-section .first-layer .line.two { top: 439px; left: 164px; animation: float 5s ease 1s infinite alternate; } .hero-section .first-layer img { position: absolute; } .hero-section .first-layer img:first-of-type { position: absolute; top: 0; right: 0; } .hero-section .first-layer img:nth-of-type(2) { top: 40px; left: 40px; width: 14px; height: 14px; } .hero-section .first-layer img:nth-of-type(3) { top: 40px; right: 40px; width: 14px; height: 14px; } .hero-section .first-layer img:nth-of-type(4) { right: 40px; bottom: 88px; width: 14px; height: 14px; } .hero-section .first-layer img:nth-of-type(5) { top: 300px; left: 0; width: 174px; height: 292px; } .hero-btn-text { display: none; margin: 6px auto 0; text-align: center; font-size: 14px; font-weight: 400; line-height: 130%; color: #808080; } .decorated-line-mob { display: flex; justify-content: center; position: relative; height: 1px; width: 100%; border-top: 1px solid #2D363F; } .decorated-line-mob svg { display: flex; justify-content: center; } .hero-animated-el { position: absolute; top: 0px; left: 0px; right: unset; bottom: unset; } .hero-animated-el.zero { top: 0px; left: 0px; max-width: 681px; transform: translate(0px, 740px); } .hero-animated-el.one { top: 0px; left: 0px; width: 219px; height: 169px; transform: translate(-46px, 924px); } .hero-animated-el.two { right: 0; height: 317px; width: 323px; transform: translate(252px, 798px); } .hero-animated-el.three { top: 0; right: 0px; left: unset; height: 198px; transform: translate(2px, 636px); } .hero-animated-el.four { top: 0; right: 0; left: unset; width: 120px; height: 84px; transform: translate(-79px, 877px); } .hero-arrow-down { position: absolute; top: 837px; left: 50%; width: 20px; height: 12px; transform: translateX(-50%); } .hero-bottom { display: flex; margin-top: 60px; } .video-thumb-container { display: flex; position: relative; width: 220px; height: 220px; border-radius: 50%; } .video-thumb-container img { transition: opacity .3s ease; opacity: 1; position: relative; z-index: 1; } .video-thumb-container .yt-video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } a.btn-primary, a.btn-secondary, button { text-decoration: none; font-weight: 500; font-size: 16px; line-height: 110%; white-space: nowrap; cursor: pointer; display: inline-block; text-transform: uppercase; transition: all .15s ease; border: none; } .video-thumb-container .play-btn { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; background-color: var(--white); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-radius: 24px; letter-spacing: .04em; font-weight: 500; font-size: 14px; line-height: 20px; padding: 8px 12px; width: max-content; height: max-content; z-index: 2; } .image-slider-section .images-list li .video-thumb-container .play-btn svg { width: 13px; height: 12px; position: relative; bottom: -1px; } a.btn-primary svg, a.btn-secondary svg, button svg { pointer-events: none; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .video-container { width: 220px; height: 220px; overflow: hidden; border-radius: 50%; position: absolute; top: 562px; left: -57px; cursor: pointer; transition: .2s ease-in-out; z-index: 2; } .video-container .play-btn { position: absolute; top: 50%; left: 50%; width: 47px; transform: translate(-50%, -50%) scale(1); } .video-container-block { position: absolute; width: 150px; height: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 50%; background: url("./../images/videoBgPlay.webp") no-repeat 50% 50%; background-size: cover; } .video-container-border { position: relative; max-width: 220px; border-radius: 50%; animation: rotate 10s linear infinite forwards; } .video-container-border-wrapper { position: relative; max-width: 220px; transform: scale(1); transition: .2s ease-in-out; } .video-container:hover .video-container-border-wrapper { transform: scale(0.9); } @-webkit-keyframes typing { 0% { width: 0; } } @-webkit-keyframes blink { 50% { border-color: transparent; } } .top-left { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .top-left .marker { position: absolute; top: 289px; left: 164px; width: 20px; height: 10px; } .top-left .square { position: absolute; top: 267px; left: 164px; width: 10px; height: 10px; z-index: 1; background: #656C7A; } .top-left .typed-text-wrapper { top: 160.5px; right: unset; left: 71px; } .right-bottom { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 3; } .right-bottom .line { top: 674.5px; right: 0; width: 278px; height: 1px; transform: rotate(45deg); background-color: #4C545C; position: absolute; } .right-bottom .square { position: absolute; right: 164px; width: 10px; height: 10px; z-index: 1; } .right-bottom .square.red { top: 617px; background: #FF4655; } .right-bottom .square.grey { top: 639px; background: #656C7A; } .typed-text { display: flex; color: #4C545C; font-feature-settings: 'clig' off, 'liga' off; font-family: Rajdhani; font-size: 14px; font-weight: 500; line-height: 130%; letter-spacing: 1.68px; text-transform: uppercase; width: 22ch; /* Number of chars */ margin: 20px; white-space: nowrap; overflow: hidden; -webkit-animation: typing 3s steps(22, end), blink 0.4s step-end infinite alternate; animation-delay: .8s; z-index: 1; } .typed-text-wrapper { display: flex; align-items: flex-start; position: absolute; top: 741px; right: 74px; width: 193px; transform: rotate(90deg); } @keyframes fadeInBottomToTopLong { 0% { transform: translateY(80px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateY(80px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } section.features { display: flex; justify-content: space-between; height: 63.65vw; height: 35.65vw; padding: 11.5vw 8.54vw 56.5vw; padding: 11.5vw 8.54vw 53.5vw; box-sizing: border-box; align-items: flex-start; position: relative; z-index: 2; } section.features .video { display: none; } section.features .video video { max-width: 100%; } section.features .desk.decor { display: none; } section.features h2 { text-align: center; } section.features img { max-inline-size: unset; max-block-size: unset; } section.features .art { right: 4.38vw; bottom: -1.25vw; height: 41.46vw; position: absolute; } section.features .divider { bottom: 7.81vw; position: absolute; width: 100%; left: 0; } section.features h2 { text-align: right; font-family: "pressio-compressed", sans-serif; font-size: 7.81vw; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; position: relative; top: -0.4vw; } section.features h2 svg { position: absolute; right: 0; top: -2.29vw; height: 1.04vw; } section.features .cards { display: flex; align-items: flex-start; position: relative; gap: 1.04vw; height: 100%; } section.features .cards .card { background: #0F1923; position: relative; } section.features .cards .card .wrapper { flex-direction: column; justify-content: center; align-items: flex-start; display: flex; width: 26.98vw; overflow: hidden; transition: all 0.5s ease; transition-delay: 0.2s; } section.features .cards .card .title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.31vw; } section.features .cards .card .title * { white-space: nowrap; } section.features .cards .card .title h3 { font-family: 'Rajdhani', sans-serif; font-size: 1.67vw; font-style: normal; font-weight: 700; line-height: 1.67vw; text-transform: uppercase; } section.features .cards .card .title p { font-family: Lato; font-size: 0.83vw; font-style: normal; font-weight: 400; line-height: 1.04vw; color: #C6C9CC; } section.features .cards .card .title.faded { transform: rotate(-90deg); position: absolute; bottom: 14vw; right: 0vw; opacity: 0; transition: all 0.3s ease; } section.features .cards .card .title.faded p, section.features .cards .card .title.faded h3 { color: #4C545C; } section.features .cards .card .poster { width: 26.98vw; height: auto; } section.features .cards .card .desc { padding: 1.88vw; box-sizing: border-box; } section.features .cards .card.off .wrapper { width: 12.92vw; opacity: 0; transition-delay: 0s; } section.features .cards .card.off .title.faded { transition-delay: 0.3s; bottom: 6.9vw; opacity: 1; } .mob.decor { display: none; } section.winmore { text-align: center; background: #FF4655; box-sizing: border-box; padding: 7.5vw 3.125vw; position: relative; } section.winmore .barcode { position: absolute; top: -1.2925vw; left: 50%; margin-left: -7.5vw; width: 15vw; } section.winmore .winmob { display: none; } section.winmore .win { width: 93.75vw; margin-top: 10px; } section.winmore .stats { margin: 0 auto; justify-content: center; margin-top: 6.04vw; display: flex; align-items: flex-start; gap: 5vw; margin-bottom: 5vw; } section.winmore .stats .stat { display: flex; flex-direction: column; align-items: center; gap: 0.63vw; } section.winmore .stat p, section.winmore .stat p strong { display: flex; align-items: center; gap: 0.42vw; font-family: 'Rajdhani', sans-serif; font-size: 1.67vw; font-weight: 700; line-height: 100%; text-transform: uppercase; } section.winmore .stats .stat p svg { height: 1.11vw; } section.winmore .stats .stat p svg.large { height: 1.8vw; } section.winmore .stat span { display: block; color: #060708; text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: 'Rajdhani', sans-serif; font-size: 1.25vw; font-weight: 700; line-height: 1.25vw; text-transform: uppercase; } .barcode-wrapper { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 200px; z-index: 133; overflow: hidden; } .winmore .heading-second { display: none; } section.steps { margin: 0 auto; width: 91.09vw; background: #0F1923; box-sizing: border-box; padding: 4.38vw 4.01vw 8.8vw; margin-top: -5.5vw; position: relative; } section.steps h2 { font-feature-settings: 'clig' off, 'liga' off; font-family: "pressio-compressed", sans-serif; font-size: 7.81vw; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; position: relative; top: -0.4vw; } section.steps h2 svg { position: absolute; left: -0.5vw; bottom: -4.79vw; height: 1.04vw; } section.steps .arrs { position: absolute; right: 4.01vw; top: 4.38vw; height: 2.79vw; } section.steps .items { display: inline-flex; align-items: flex-start; gap: 6.67vw; position: absolute; top: 11.39vw; left: 27.9vw; } section.steps .items .item { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25vw; } section.steps .items .item svg { height: 3.13vw; } section.steps .items .item article { display: flex; width: 12.5vw; flex-direction: column; align-items: flex-start; gap: 0.42vw; } section.steps .items .item article h3 { color: #FFF; font-feature-settings: 'clig' off, 'liga' off; font-family: Rajdhani; font-size: 1.25vw; font-style: normal; font-weight: 700; line-height: 100%; text-transform: uppercase; } section.steps .items .item article p { color: #C6C9CC; font-feature-settings: 'clig' off, 'liga' off; font-family: Lato; font-size: 0.833vw; font-style: normal; font-weight: 400; line-height: 130%; } section.steps .items + svg { position: absolute; right: 77px; top: 88px; height: 53.617px; } section.btm { justify-content: center; align-items: center; display: flex; align-items: center; justify-content: center; padding: 341px 20px 318px; background: #060708; background-size: auto 100%; background-repeat: no-repeat; background-position: center; background-image: url("./../images/BottomBannerBG.webp"); background-color: #060708; } section.btm article { display: inline-flex; gap: 2.14vw; align-content: stretch; } section.btm article .logo { width: 18.23vw; height: 18.23vw; } section.btm article h2 { font-feature-settings: 'clig' off, 'liga' off; font-family: "pressio-compressed", sans-serif; font-size: 7.81vw; font-style: normal; font-weight: 800; line-height: 80%; text-transform: uppercase; position: relative; top: -0.4vw; } section.btm article .desc { display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; } section.btm .download-btn.desktop.left { margin: 54px 0 0; padding: 15px 42px; } .footer { display: flex; justify-content: center; align-items: center; background: #030303; width: 100%; border-bottom: 5px solid #E6004C; flex-grow: 0; flex-shrink: 0; } .footer-container { display: flex; width: 100%; padding: 0 20px; } .footer-text { display: none; margin: 0; padding: 26px 20px 24px; font-weight: 400 !important; font-size: 16px !important; text-align: center; line-height: 155% !important; text-align: center; color: #ccc; } .footer-logo { display: flex; margin: 0 auto; padding: 17px 0 14px; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 4; } /* Modal Content */ .modal-content { position: relative; margin: auto; padding: 29px 36px 34px; width: 100%; max-width: 520px; max-height: 335px; height: 100%; overflow: hidden; background: url("./../images/popup.webp") no-repeat 50% 50%; background-size: cover; z-index: 5; } .modal-content .popup-logo { margin-bottom: 56px; } .modal-content .popup-logo img { display: flex; width: 150.999px; height: 28.578px; } .modal-content .first-heading { max-width: 270px; margin: 0; text-align: left; color: #FFF; text-shadow: 0px 0px 10px #151136; font-family: 'Rajdhani', sans-serif; font-size: 40px; font-weight: 700; line-height: 110%; } .modal-content .first-heading span { font-family: 'Rajdhani', sans-serif; font-size: 40px; font-weight: 700; line-height: 110%; color: #FE4655; } .modal-content .first-heading.popup span { position: absolute; opacity: 0; z-index: -4; } .modal-content .modal-block { height: 100%; display: flex; flex-direction: column; justify-content: stretch; } .modal-content .modal-block-inner { display: flex; flex-direction: column; position: relative; z-index: 1; padding: 0px 0 20px; } .modal-content .popup-text { max-width: 235px; margin: 17px 0 10px; padding: 0; color: #fff; font-family: 'Lato', sans-serif; text-shadow: 0px 0px 10px #151136; font-size: 16px; font-weight: 500; line-height: 150%; } .modal-content .popup-text a { color: #FE4655; text-decoration-line: underline; text-shadow: none; } .modal-content .popup-text-small { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 400; line-height: 150%; } .modal-content.video { display: flex; justify-content: center; max-width: 960px; width: 80vw; max-height: 540px; padding: 0; border: 1px solid #2D363F; background: #FFF; overflow: unset; } .modal-content.video .icon-close { display: flex; position: absolute; width: 40px; height: 40px; cursor: pointer; top: 0px; right: -47px; } .modal-content.video .icon-close * { display: flex !important; } /* Hide the slides by default */ .mySlides { display: none; width: 100%; height: 100%; height: 95vh; max-width: 100%; width: auto; transform: translateY(10%); } .mySlides img { max-width: 100%; width: auto; height: auto; margin: 0 auto; display: block; max-height: 100%; } .active { opacity: 1; } .hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .stroke-text { transform: translate(211px, 1px); } .valorant { position: relative; max-width: 100%; overflow: hidden; } .decorated-section { display: flex; flex-direction: column; width: 100%; position: relative; } .decorated-section > .first-layer { position: absolute; top: 0; left: 50%; max-width: 1440px; width: 100%; height: 100%; display: flex; justify-content: center; margin: 0 auto; transform: translateX(-50%); } .decorated-section > .first-layer .vector-left, .decorated-section > .first-layer .vector-right { position: absolute; } .decorated-section > .first-layer .vector-left { position: absolute; top: 0; left: 0; width: 2px; height: 100%; transform: translateX(-1px); } .decorated-section > .first-layer .vector-right { position: absolute; top: 0; right: 0px; width: 2px; height: 100%; transform: translateX(1px); } .decorated-section > .first-layer .left-hero-v { top: 0; position: absolute; left: -242px; width: 242px; } .decorated-section > .first-layer .right-hero-v { top: 0; position: absolute; right: -238px; width: 238px; } .first-layer { position: absolute; top: 0; left: 50%; max-width: 1440px; width: 100%; height: 100%; display: flex; justify-content: center; margin: 0 auto; transform: translateX(-50%); } .first-layer .square-small { position: absolute; width: 10px; height: 10px; background: #333; } .first-layer .cube { position: absolute; width: 19px; height: 19px; border: 1px solid #FE4655; background: #111; transform: rotate(45deg); flex-shrink: 0; } @media only screen and (min-width: 1025px) { .download-btn { height: 58px; margin-top: 40px; padding: 16px 60px; line-height: 130%; } .banner-section .first-layer .vector-left, .banner-section .first-layer .vector-right { bottom: 47px; } .hero-section { background: url("./../images/Hero_BG.webp") no-repeat 50% 50%; background-size: cover; } .hero-section .logo { width: 68px; height: 68px; margin-bottom: 53px; } .hero-section .content-wrapper { padding: 174px 19.5px 321px; } .hero-btn-text { display: flex; margin: 0 auto; } .decorated-line-mob { display: none; } section.features { background: url("./../images/Jett.webp") no-repeat 100% 100%; background-size: contain; } section.features .video { display: flex; max-height: 989px; position: absolute; left: 0; bottom: 0; transform: translate(-192px, 93px); max-width: 61vw; } section.features .desk.decor { display: flex; position: absolute; top: -47px; right: 4px; } section.features h2 { text-align: left; } .footer { max-height: 78px; } .footer-container { justify-content: space-between; align-items: center; max-width: 1300px; max-height: 78px; } .footer-text { display: flex; } .footer-logo { display: inline; margin: unset; padding: 0 0 0 17px; } .mySlides { height: 65vh; transform: translateY(10%); } } @media only screen and (min-width: 1921px) { .banner-section .first-layer .vector-left, .banner-section .first-layer .vector-right { top: 0; bottom: unset; } } @media only screen and (min-width: 1950px) { section.features .video { max-height: unset; max-width: 70vw; } } @media only screen and (min-width: 2000px) { .banner-bg.decor { width: 80%; } } @media only screen and (min-width: 2700px) { .banner-bg.decor { width: 85%; } } @media only screen and (max-width: 1700px) { .video-container { left: 5%; } } @media only screen and (max-width: 1500px) { .heading-second { font-size: 7.81vw; } } @media only screen and (max-width: 1024px) { .download-buttons-mob { display: flex; flex-direction: column; align-items: center; } .main-text { max-width: 235px; margin: 12px auto 15px; font-size: 20px; } .download-btn.mob { display: flex; } .download-btn.desktop { display: none; } .download-buttons { display: none; } .banner-section .first-layer { display: none; } .banner-section .content-wrapper { display: flex; justify-content: center; } .banner-img.desktop { display: none; } .banner-img.mob { display: flex; } .banner-img.mob img { min-width: 104%; } .hero-section .first-layer { display: none; } .hero-animated-el { display: none; } .hero-arrow-down { display: none; } .hero-section .download-btn { margin: 4px auto; } .hero-bottom { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 500px; margin-top: 60px; } .video-container { display: none; } .top-left { display: none; } .right-bottom { display: none; } .mob.decor { display: flex; } .pop img { width: 90vw; } .cta.desk { display: none; } .mob.dekor { display: flex; } .cta.mob { display: flex; width: 235px; padding: 16px 35px; font-size: 20px; margin: 0 auto; line-height: 1; } section.features { height: auto; padding: 76px 20px 105px; flex-direction: column; justify-content: center; align-items: center; gap: 60px; } section.features .divider { display: none; } section.features h2 { font-size: 60px; text-align: center; } section.features h2 svg { width: 100%; height: 20px; top: auto; bottom: 14px; } section.features h2 svg path:nth-child(1) { position: absolute; transform: translateX(79px); } section.features h2 svg path:nth-child(2) { position: absolute; transform: translateX(-77px); } section.features .cards { flex-direction: column; gap: 43px; } section.features .cards .card:first-of-type { order: 2; } section.features .cards .card:nth-of-type(2) { order: 3; } section.features .cards .card:nth-of-type(3) { order: 1; } section.features .cards .card .wrapper { width: 100%; } section.features .cards .card .wrapper .poster { width: 100%; } section.features .cards .card .title { gap: 6px; padding: 22px; box-sizing: border-box; } section.features .cards .card .title h3 { font-size: 24px; line-height: 1; } section.features .cards .card .title p { font-size: 15px; line-height: 1.3; } section.features .cards .card .title.faded { visibility: hidden !important; } section.features .cards .card.off .wrapper { width: 100%; opacity: 1; transition-delay: 0s; } section.features .art { display: none; } section.steps { display: none; } section.winmore { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; margin-top: 0; padding: 0; } section.winmore .barcode { width: 229px; margin-left: unset; left: 50%; transform: translateX(-50%); top: 0; max-inline-size: unset; max-block-size: unset; } section.winmore .win { display: none; } .barcode-wrapper { overflow: unset; height: 48.559px; margin-top: -21.23px; } .winmore .heading-second { display: flex; position: relative; margin: 91px auto 10px; padding: 0; } .winmore .heading-second svg { position: absolute; width: 102px; top: 50%; left: 50%; transform: translate(-50%, -50%); } section.winmore .stats { flex-wrap: wrap; margin-top: 55px; margin-bottom: 68px; display: flex; grid-template-columns: 1fr 1fr; gap: 40px 20px; max-width: 400px; width: 100%; padding: 0 20px; justify-content: space-between; } section.winmore .stats .stat { align-items: center; gap: 12px; max-width: 142px; margin: 0 auto; } section.winmore .stats .stat span { font-size: 21px; line-height: 1; } section.winmore .stats .stat p { gap: 8px; line-height: 1; } section.winmore .stat p, section.winmore .stat p strong { font-size: 20px; } section.winmore .stats .stat p svg { height: 21px; } section.winmore .stats .stat p svg.large { height: 25px; } section.winmore .stats .stat strong { font-size: 24px; } section.btm { height: unset; padding: 99px 20px; background-size: auto 85%; } section.btm article { flex-direction: column; justify-content: center; align-items: center; gap: 20px; text-align: center; } section.btm article .logo { width: 56px; height: 56px; } section.btm article .desc { justify-content: center; align-items: center; gap: 20px; } section.btm article .desc .cta { width: 100%; } section.btm article .desc h2 { font-size: 60px; } .heading-second { margin: 13px auto 10px; color: #fff; text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-size: 120px; font-weight: 800; line-height: 80%; text-transform: uppercase; } } @media only screen and (max-width: 600px) { .modal-content { padding: 0; height: auto; } } @media only screen and (max-width: 1024px) and (min-width: 520px) { .hero-section { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 100vh; margin: 0 auto; background-size: 100%; } } .hero-section .main-text span { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700; line-height: 100%; text-transform: lowercase; } @media only screen and (max-width: 1024px) { .hero-section .main-text span { font-size: 20px; } }