@font-face { font-family: "SF Pro Display Regular"; src: url("../fonts/SFProDisplay/SFProDisplay-Regular.eot"); src: local("SF Pro Display Regular"), local("SFProDisplay-Regular"), url("../fonts/SFProDisplay/SFProDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay/SFProDisplay-Regular.woff2") format("woff2"), url("../fonts/SFProDisplay/SFProDisplay-Regular.woff") format("woff"), url("../fonts/SFProDisplay/SFProDisplay-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "SF Pro Display Medium"; src: url("../fonts/SFProDisplay/SFProDisplay-Medium.eot"); src: local("SF Pro Display Medium"), local("../fonts/SFProDisplay/SFProDisplay-Medium"), url("../fonts/SFProDisplay/SFProDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay/SFProDisplay-Medium.woff2") format("woff2"), url("../fonts/SFProDisplay/SFProDisplay-Medium.woff") format("woff"), url("../fonts/SFProDisplay/SFProDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "SF Pro Display Semibold"; src: url("../fonts/SFProDisplay/SFProDisplay-Semibold.eot"); src: local("SF Pro Display Semibold"), local("SFProDisplay-Semibold"), url("../fonts/SFProDisplay/SFProDisplay-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay/SFProDisplay-Semibold.woff2") format("woff2"), url("../fonts/SFProDisplay/SFProDisplay-Semibold.woff") format("woff"), url("../fonts/SFProDisplay/SFProDisplay-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope/Manrope-SemiBold.woff2") format("woff2"), url("../fonts/Manrope/Manrope-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "Nazarro Hand Ext"; src: url("../fonts/NazarroHandExt/NazarroHandExt-Regular.otf") format("opentype"), url("../fonts/NazarroHandExt/NazarroHandExt-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @keyframes bounceOut { 0% { transform: scale(1); } 30% { transform: scale(0.9); } 66% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes animLine { to { stroke-dashoffset: 0; } } @keyframes fadeInOut { 0%, 45%, 100% { opacity: 1; } 55%, 99% { opacity: 0; } } @keyframes scrollText { 0% { transform: translate(-100%, 0); } 100% { transform: translate(100%, 0); } } @keyframes scrollTextNext { 0% { transform: translate(-200%, 0); } 100% { transform: translate(0%, 0); } } /* RWD @media query setting */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *: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-width: 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; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; } html { position: relative; height: 100%; overflow-x: hidden; scroll-behavior: smooth; } *::after, *::before, a, p, ul, li, ol, span, section, main, header, footer, svg, label, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; } body { font-size: 16px; line-height: 20px; font-family: "SF Pro Display Regular", sans-serif; color: #FFFFFF; background-color: #000000; overflow-x: hidden; word-break: break-word; letter-spacing: -0.02em; } @media screen and (min-width: 768px) { body { font-size: 18px; line-height: 22px; } } @media screen and (min-width: 1200px) { body { font-size: 20px; line-height: 24px; } } h1, h2, h3, h4, h5 { font-family: "SF Pro Display Semibold", sans-serif; text-transform: lowercase; } h2 { font-size: 32px; line-height: 32px; } @media screen and (min-width: 768px) { h2 { font-size: 48px; line-height: 48px; } } @media screen and (min-width: 1200px) { h2 { font-size: 64px; line-height: 64px; } } h3 { font-size: 24px; line-height: 32px; } @media screen and (min-width: 768px) { h3 { font-size: 28px; line-height: 36px; } } @media screen and (min-width: 1200px) { h3 { font-size: 32px; line-height: 40px; } } section { position: relative; overflow: visible; } .container { max-width: 1750px; width: 100%; margin: 0 auto; padding: 0 15px; } img { -o-object-fit: cover; object-fit: cover; } button { cursor: pointer; outline: none !important; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; text-decoration: none; } .text-red { color: rgb(188, 16, 16); } .link { display: inline-block; font-size: 16px; line-height: 44px; font-family: "SF Pro Display Semibold", sans-serif; padding: 5px 37px; background-color: rgb(188, 16, 16); border-radius: 333px; transition: all ease-in-out 0.3s; height: 60px; white-space: nowrap; } .link:hover { animation: 0.3s ease-in bounceOut; } .link.link-white { height: 58px; padding: 7px 50px; color: rgb(20, 20, 20); background-color: #FFFFFF; } @media screen and (min-width: 768px) { .link { font-size: 20px; padding: 10px 48px 14px 46px; height: 68px; } .link.link-white { padding: 10px 85px 14px 87px; height: 68px; } } [data-aos=clip-right] { -webkit-clip-path: inset(0% 100% -60% 0%); clip-path: inset(0% 100% -60% 0%); transition-property: -webkit-clip-path; transition-property: clip-path; transition-property: clip-path, -webkit-clip-path; } [data-aos=clip-right].aos-animate { -webkit-clip-path: inset(0% -1% -60% 0%); clip-path: inset(0% -1% -60% 0%); transition-property: -webkit-clip-path; transition-property: clip-path; transition-property: clip-path, -webkit-clip-path; } .menu__links { display: flex; } .menu__link { margin-left: 13px; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } .menu__link-img { width: 45px; height: 45px; border-radius: 0; } .menu__link-title { font-family: "SF Pro Display Medium", sans-serif; font-size: 9.15px; line-height: 10.45px; letter-spacing: -0.02em; color: #FFFFFF; } @media screen and (min-width: 768px) { .menu__link { margin-left: 20px; } .menu__link-img { width: 69px; height: 69px; border-radius: 0; } .menu__link-title { font-size: 14px; line-height: 16px; color: rgb(25, 25, 25); } } .requests__item { padding: 12px 23px 26px 20px; position: relative; display: flex; justify-content: flex-start; align-items: center; background-color: rgb(20, 20, 20); border-radius: 12px; position: absolute; max-width: 272px; width: 100%; opacity: 0; animation: fadeInOut 10s infinite; } .requests__item svg { position: absolute; bottom: 0; left: -15px; } .requests__item:nth-child(even) { animation-delay: 5s; } .requests__item:nth-child(1) { top: 0; left: 0; } .requests__item:nth-child(2) { top: 0; right: 0; } .requests__item:nth-child(3) { top: 119px; right: 0; } .requests__item:nth-child(4) { top: 119px; left: 0; } .requests__item:nth-child(5) { bottom: 134px; left: 0; } .requests__item:nth-child(6) { bottom: 134px; right: 0; } .requests__item:nth-child(7) { bottom: 0; right: 0; } .requests__item:nth-child(8) { bottom: 0; left: 0; } .requests__item:nth-child(2) svg, .requests__item:nth-child(3) svg, .requests__item:nth-child(6) svg, .requests__item:nth-child(7) svg { left: auto; right: -15px; transform: scaleY(-1) rotate(180deg); } @media screen and (min-width: 768px) { .requests__item { padding: 28px 30px; max-width: 391px; } } @media screen and (min-width: 1200px) { .requests__item { animation: none; opacity: 1; } .requests__item svg { left: auto; right: -15px; transform: scaleY(-1) rotate(180deg); } .requests__item:nth-child(n+4) .requests__item-svg { display: none; } .requests__item:nth-child(1) { top: 0; left: 10%; } .requests__item:nth-child(2) { top: 0; right: 10%; } .requests__item:nth-child(3) { top: 169px; left: 0; } .requests__item:nth-child(4) { top: 169px; left: auto; right: 0; } .requests__item:nth-child(5) { bottom: 154px; left: 0; } .requests__item:nth-child(6) { bottom: 154px; right: 0; } .requests__item:nth-child(7) { bottom: 0; left: 10%; } .requests__item:nth-child(8) { bottom: 0; left: auto; right: 10%; } .requests__item:nth-child(even) svg { right: auto; left: -15px; transform: scaleY(1) rotate(0); } } @media screen and (min-width: 1600px) { .requests__item:nth-child(1) { left: 24%; } .requests__item:nth-child(2) { left: 51%; right: auto; } .requests__item:nth-child(3) { left: 10%; } .requests__item:nth-child(4) { right: 10%; } .requests__item:nth-child(5) { left: 15%; } .requests__item:nth-child(6) { right: 15%; } .requests__item:nth-child(7) { left: 24%; } .requests__item:nth-child(8) { left: 51%; right: auto; } } .cases__item { width: 55%; position: relative; } .cases__item-img { width: 184px; height: 349px; } .cases__item-img__cover { position: absolute; z-index: -1; top: -2.5%; left: 0; width: 184px; height: 349px; -o-object-fit: contain; object-fit: contain; -o-object-position: top; object-position: top; } .cases__item-img__title { font-size: 8px; line-height: 20px; position: absolute; top: -10px; left: 70px; color: rgb(112, 112, 112); } .cases__item-title { font-size: 20px; line-height: 20px; margin-top: 16px; margin-bottom: 4px; } .cases__item-text { font-size: 16px; line-height: 20px; color: rgb(112, 112, 112); } .cases__item.fit-changed { margin-bottom: 55px; } .cases__item.small, .cases__item.fit-changed { width: 100%; } .cases__item.small .cases__item-img, .cases__item.fit-changed .cases__item-img { width: 111px; height: 209px; } .cases__item.small .cases__item-img__cover, .cases__item.fit-changed .cases__item-img__cover { width: 111px; height: 209px; top: -2%; } .cases__item.small .cases__item-img__title, .cases__item.fit-changed .cases__item-img__title { top: -10px; left: 38px; } @media screen and (min-width: 360px) { .cases__item-img { width: 199px; height: 354px; } .cases__item-img__cover { width: 199px; height: 354px; top: -5.5%; } .cases__item-img__title { top: -21px; left: 80px; } .cases__item.small .cases__item-img, .cases__item.fit-changed .cases__item-img { width: 126px; height: 224px; } .cases__item.small .cases__item-img__cover, .cases__item.fit-changed .cases__item-img__cover { width: 126px; height: 224px; top: -5%; } .cases__item.small .cases__item-img__title, .cases__item.fit-changed .cases__item-img__title { top: -18px; left: 42px; } } @media screen and (min-width: 460px) { .cases__item-img { width: 249px; height: 470px; } .cases__item-img__cover { width: 249px; height: 470px; top: -3%; } .cases__item-img__title { top: -15px; left: 103px; } .cases__item.small .cases__item-img, .cases__item.fit-changed .cases__item-img { width: 176px; height: 344px; } .cases__item.small .cases__item-img__cover, .cases__item.fit-changed .cases__item-img__cover { width: 176px; height: 344px; top: -1%; } .cases__item.small .cases__item-img__title, .cases__item.fit-changed .cases__item-img__title { top: -5px; left: 69px; } } @media screen and (min-width: 992px) { .cases__item { width: 220px; position: absolute; } .cases__item-img__cover { top: -5.5%; } .cases__item-img__title { font-size: 10px; top: -24px; left: 83px; } .cases__item--1 { left: 0; top: 22%; } .cases__item--2 { left: 30%; top: 0; } .cases__item--3 { left: 25%; bottom: 0; } .cases__item--4 { right: 0; top: 24%; } .cases__item--5 { right: 25%; bottom: 0; } .cases__item--6 { right: 27%; top: 9%; } .cases__item.fit-changed { width: 220px; margin-bottom: 0; } .cases__item .cases__item-img, .cases__item.fit-changed .cases__item-img { width: 220px; height: 375px; } .cases__item .cases__item-img__cover, .cases__item.fit-changed .cases__item-img__cover { width: 220px; height: 375px; top: -6%; } .cases__item.fit-changed .cases__item-img__title { top: -24px; left: 83px; } .cases__item.small { width: 151px; } .cases__item.small .cases__item-img { width: 151px; height: 275px; } .cases__item.small .cases__item-img__cover { top: -5%; } .cases__item.small .cases__item-img__title { top: -21px; left: 54px; } } @media screen and (min-width: 1300px) { .cases__item { width: 270px; } .cases__item-img__title { top: -27px; left: 110px; } .cases__item.small .cases__item-img__cover { top: -5.5%; } .cases__item.fit-changed { width: 270px; } .cases__item .cases__item-img, .cases__item.fit-changed .cases__item-img { width: 270px; height: 480px; } .cases__item .cases__item-img__cover, .cases__item.fit-changed .cases__item-img__cover { width: 270px; height: 480px; } .cases__item.fit-changed .cases__item-img__title { top: -27px; left: 100px; } .cases__item.small { width: 201px; } .cases__item.small .cases__item-img { width: 201px; height: 358px; } .cases__item.small .cases__item-img__cover { width: 201px; height: 358px; } .cases__item.small .cases__item-img__title { top: -24px; left: 73px; } } .services__item { padding: 15px 20px 25px; max-width: 707px; width: 100%; margin: 0 auto; height: 256px; background-color: rgb(20, 20, 20); border-radius: 10px; position: relative; margin-top: 12px; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; } .services__item-title { font-family: "SF Pro Display Semibold", sans-serif; font-size: 24px; line-height: 32px; margin-bottom: 12px; padding-right: 50px; } .services__item-text { color: rgba(255, 255, 255, 0.44); font-size: 12px; line-height: 14px; max-width: 75%; } .services__item-additional { font-family: "SF Pro Display Semibold", sans-serif; font-size: 12px; line-height: 14px; max-width: 70%; } .services__item-num { position: absolute; top: 12px; right: 24px; font-size: 12px; line-height: 32px; color: rgb(123, 123, 123); } .services__item-img { width: 78px; height: 78px; position: absolute; bottom: 27px; right: 20px; -o-object-fit: contain; object-fit: contain; } @media screen and (min-width: 768px) { .services__item { padding: 34px; height: 325px; } .services__item-additional { font-size: 16px; line-height: 21px; } .services__item-num { font-size: 16px; top: 33px; right: 33px; } .services__item-img { width: 112px; height: 112px; } } @media screen and (min-width: 992px) { .services__item { margin: 0; margin-top: 0; } } @media screen and (min-width: 1200px) { .services__item-title.title-big { font-size: 32px; } .services__item-additional { font-size: 20px; line-height: 32px; } } .about__item { margin: 0 auto 60px; display: flex; justify-content: flex-start; align-items: flex-start; } .about__item-num { font-family: "SF Pro Display Regular", sans-serif; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.44); margin-top: -13px; white-space: nowrap; } .about__item-content { position: relative; } .about__item-title { font-family: "SF Pro Display Medium", sans-serif; font-size: 64px; line-height: 64px; letter-spacing: -0.05em; margin-bottom: 4px; white-space: nowrap; } .about__item-text { max-width: 208px; width: 100%; } .about__item-subtext { font-family: "Nazarro Hand Ext", sans-serif; font-size: 26.56px; line-height: 12.68px; letter-spacing: -0.1em; width: 152px; text-align: center; transform: rotate(-2.44deg); position: absolute; right: -39px; bottom: -24px; } .about__item-text:nth-child(2) { max-width: 190px; } @media screen and (min-width: 576px) { .about__item { justify-content: center; } } @media screen and (min-width: 768px) { .about__item { justify-content: flex-start; } } @media screen and (min-width: 992px) { .about__item { margin-bottom: 0; } .about__item-title { font-size: 128px; line-height: 90px; margin-bottom: 17px; } .about__item-text, .about__item-text:nth-child(2) { max-width: 228px; } .about__item-subtext { font-size: 44px; line-height: 21px; width: 251px; text-align: right; right: -54px; bottom: -38px; } } .team__item-name { font-size: 20px; line-height: 20px; letter-spacing: -0.02em; margin-bottom: 4px; text-transform: capitalize; } .team__item-position { font-size: 16px; line-height: 20px; color: rgb(112, 112, 112); } .team__item-img__title { font-size: 10px; line-height: 20px; position: absolute; left: 50%; transform: translateX(-50%); top: 0; } .team__item img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .team__item-img { position: relative; overflow: hidden; } .team__item-img__person { position: absolute; } .team__item--small .team__item-img { width: 126px; margin-bottom: 14px; } .team__item--small .team__item-img__person { height: 169px; top: 17px; } .team__item--small .team__item-img__cover { height: 194px; } .team__item--small .team__item-img__title { display: none; } .team__item--big .team__item-img { width: 199px; margin-bottom: 16px; } .team__item--big .team__item-img__person { height: 265px; top: 21px; } .team__item--big .team__item-img__cover { height: 294px; } .team__item--big .team__item-img__title { top: 0; } .team__item.first .team__item-img__person::before, .team__item.third .team__item-img__person::before { position: absolute; content: ""; inset: 0; width: 100%; height: 100%; background-color: rgb(188, 16, 16); mix-blend-mode: overlay; z-index: 1; } .team__item.third { margin-top: 48px; } @media screen and (min-width: 768px) { .team__item-name { font-size: 24px; margin-bottom: 8px; } .team__item-img__title { font-size: 12px; top: 2px; } .team__item--small .team__item-img { width: 200px; } .team__item--small .team__item-img__person { height: 268px; top: 25px; } .team__item--small .team__item-img__cover { height: 298px; } .team__item--small .team__item-img__title { display: block; top: 4px; } .team__item--big .team__item-img { width: 310px; } .team__item--big .team__item-img__person { height: 413px; top: 40px; } .team__item--big .team__item-img__cover { height: 460px; } .team__item--big .team__item-img__title { top: 10px; } } @media screen and (min-width: 1200px) { .team__item--small .team__item-img { width: 270px; } .team__item--small .team__item-img__person { height: 360px; top: 30px; } .team__item--small .team__item-img__cover { height: 398px; } .team__item--small .team__item-img__title { top: 4px; } .team__item--big .team__item-img { width: 415px; } .team__item--big .team__item-img__person { height: 553px; top: 45px; } .team__item--big .team__item-img__cover { height: 611px; } .team__item--big .team__item-img__title { top: 10px; } } @media screen and (min-width: 1410px) { .team__item.first { margin-top: 73px; } .team__item.second, .team__item.fourth { align-self: flex-end; } .team__item.third { margin-top: 0; } .team__item.fourth { margin-bottom: 104px; } } .scrolling-bar { display: flex; overflow: hidden; text-align: center; } .scrolling-bar .text { font-family: "SF Pro Display Semibold", sans-serif; width: 245px; font-size: 44px; line-height: 48px; margin-right: 50px; } .scrolling-bar__inner { height: 100%; display: flex; flex-wrap: nowrap; align-items: center; will-change: transform; animation: scrollText 50s linear infinite -50s; } .scrolling-bar__inner:nth-child(2) { animation: scrollTextNext 50s linear infinite -25s; } @media screen and (min-width: 768px) { .scrolling-bar .text { width: auto; white-space: nowrap; font-size: 86px; line-height: 100px; margin-right: 100px; } .scrolling-bar__inner { animation: scrollText 100s linear infinite -100s; } .scrolling-bar__inner:nth-child(2) { animation: scrollTextNext 100s linear infinite -50s; } } @media screen and (min-width: 1200px) { .scrolling-bar .text { font-size: 128px; line-height: 150px; margin-right: 150px; } .scrolling-bar__inner { animation: scrollText 150s linear infinite -150s; } .scrolling-bar__inner:nth-child(2) { animation: scrollTextNext 150s linear infinite -75s; } } .form { max-width: 435px; width: 100%; margin: 0 auto; text-align: center; position: relative; } .form__input { border: 1px solid rgb(255, 255, 255); background: rgba(255, 255, 255, 0.13); font-size: 16px; line-height: 20px; width: 100%; padding: 19px 16px 21px; text-align: left; border-radius: 12px; margin-bottom: 8px; } .form__btn { margin-top: 17px; } .form__error { font-family: "SF Pro Display Semibold", sans-serif; width: 100%; color: #000000; font-size: 20px; line-height: 20px; text-align: center; margin-top: 10px; } @media screen and (min-width: 768px) { .form__input { font-size: 20px; line-height: 44px; padding: 12px 28px; margin-bottom: 11px; } .form__btn { margin-top: 29px; } } .modal { background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 50%; top: 50%; z-index: 999; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 15px; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; visibility: hidden; transition: all ease-in-out 0.3s; } .modal__close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; cursor: pointer; opacity: 0.5; transition: all ease-in-out 0.3s; } .modal__close span { display: inline-block; position: absolute; top: 10px; width: 100%; height: 2px; background-color: rgba(0, 0, 0, 0.7); } .modal__close span:nth-child(1) { left: 0; transform: rotate(45deg); } .modal__close span:nth-child(2) { right: 0; transform: rotate(-45deg); } .modal__close:hover { opacity: 1; } .modal.active { opacity: 1; pointer-events: all; visibility: visible; } .success-modal__content { border: 2px solid rgb(188, 16, 16); background-color: #FFFFFF; border-radius: 12px; padding: 40px; text-align: center; position: relative; } .form-modal__content { background-color: rgb(188, 16, 16); border-radius: 12px; padding: 30px 10px; text-align: center; position: relative; } .form-modal__title { font-size: 20px; line-height: 24px; max-width: 287px; width: 100%; margin: 0 auto 15px; } @media screen and (min-width: 576px) { .form-modal__content { padding: 30px 20px; } } #header { padding-top: 13px; position: absolute; z-index: 999; top: 0; right: 0; left: 0; } #header .header__inner { display: flex; justify-content: space-between; align-items: center; position: relative; } #header .logo { display: flex; justify-content: flex-start; align-items: center; word-break: normal; cursor: pointer; width: 98px; height: 34px; } #header .logo__subtitle { font-family: "SF Pro Display Medium", sans-serif; color: rgb(25, 25, 25); font-size: 12px; line-height: 12px; padding-left: 17px; width: 88px; } @media screen and (min-width: 992px) { #header { padding-top: 28px; } #header .logo { width: 128px; height: 44px; } #header .logo__subtitle { font-size: 16px; line-height: 16px; width: 115px; } } #contact-us { padding: 88px 0 25px; border-radius: 60px 60px 0px 0px; background-color: rgb(188, 16, 16); text-align: center; } #contact-us .contact-us__inner { margin-top: 38px; } #contact-us .contact-us__form { margin-bottom: 125px; } #contact-us .contact-us__socials { font-family: "SF Pro Display Semibold", sans-serif; font-size: 16px; line-height: 24px; color: #000000; margin-bottom: 15px; } #contact-us .contact-us__docs { font-family: "SF Pro Display Semibold", sans-serif; font-size: 16px; line-height: 24px; color: #000000; } #contact-us .contact-us__doc { display: none; } #contact-us .contact-us__copy { color: rgba(0, 0, 0, 0.28); } @media screen and (min-width: 768px) { #contact-us { padding: 170px 0 20px; } #contact-us .contact-us__inner { margin-top: 121px; } #contact-us .contact-us__form { margin-bottom: 228px; } #contact-us .contact-us__link { margin: 88px auto 198px; } #contact-us .contact-us__socials { max-width: 371px; width: 100%; margin: 0 auto 20px; font-size: 20px; } #contact-us .contact-us__docs { max-width: 561px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #contact-us .contact-us__doc { display: block; } } @media screen and (min-width: 1200px) { #contact-us { padding: 117px 0 35px; } #contact-us .contact-us__link { margin: 114px auto 230px; } #contact-us .contact-us__bottom { display: flex; justify-content: space-between; align-items: center; } #contact-us .contact-us__socials { text-align: left; } #contact-us .contact-us__socials, #contact-us .contact-us__docs { margin: 0; } } #preview { height: 100vh; background-color: rgb(225, 233, 255); } #preview .preview__bg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; min-width: 918px; max-width: 1650px; } #preview .preview__inner { height: 100vh; display: flex; justify-content: center; align-items: center; } #preview .preview__main { text-align: center; position: relative; } #preview .preview__title { color: rgb(25, 25, 25); font-size: 36px; line-height: 44px; max-width: 395px; width: 100%; margin: 0 auto 139px; } #preview .preview__subtitle { font-family: "Nazarro Hand Ext", sans-serif; font-size: 32.45px; line-height: 14.32px; letter-spacing: -0.1em; max-width: 208px; width: 100%; position: absolute; bottom: 184px; right: 41px; transform: rotate(-2.44deg); } #preview .preview__link--desktop { display: none; } @media screen and (min-width: 385px) { #preview .preview__title { font-size: 40px; } } @media screen and (min-width: 768px) { #preview .preview__link--mobile { display: none; } #preview .preview__link--desktop { display: inline-block; } } @media screen and (min-width: 768px) { #preview .preview__inner { align-items: flex-start; } #preview .preview__main { top: 190px; } #preview .preview__title { max-width: 680px; font-size: 70px; line-height: 70px; } #preview .preview__subtitle { font-size: 56.21px; line-height: 28.11px; max-width: 362px; bottom: 163px; right: 35px; } } @media screen and (min-width: 1200px) { #preview .preview__title { max-width: 846px; font-size: 96px; line-height: 96px; margin-bottom: 90px; } #preview .preview__subtitle { bottom: 125px; } } #requests { margin-bottom: 126px; } #requests .requests__inner { padding: 253px 0 296px; position: relative; } #requests .requests__title-wrapper { display: flex; justify-content: center; align-items: center; } #requests .requests__title { font-family: "SF Pro Display Semibold", sans-serif; font-size: 32px; line-height: 32px; max-width: 166px; width: 100%; text-align: center; position: relative; } #requests .requests__subtitle { font-family: "Nazarro Hand Ext", sans-serif; font-size: 44px; line-height: 19.09px; letter-spacing: -0.1em; transform: rotate(-2.44deg); position: absolute; bottom: -17px; right: 11px; } @media screen and (min-width: 768px) { #requests { margin-bottom: 356px; } #requests .requests__title { font-size: 40px; line-height: 36px; max-width: 196px; } } #video { padding-bottom: 100px; text-align: center; } #video video { max-height: 100vh; max-width: 1920px; width: 100%; } @media screen and (min-width: 1200px) { #video { padding-bottom: 150px; } } #cases { padding-bottom: 200px; } #cases .cases__inner { position: relative; } #cases .cases__title { text-align: left; } #cases .cases__items { margin-top: -25px; } #cases .cases__items-block { display: flex; justify-content: center; align-items: center; max-width: 600px; width: 100%; margin: 0 auto; } #cases .cases__items-block:nth-child(2) { margin-top: -50px; } #cases .cases__items-block:nth-child(2) .cases__items-small { order: -1; margin-right: 20px; margin-left: 0; } #cases .cases__items-small { margin-left: 20px; width: 45%; } @media screen and (min-width: 992px) { #cases { padding-bottom: 300px; } #cases .cases__inner { padding: 615px 0 590px; } #cases .cases__title { text-align: center; } #cases .cases__items { margin-top: 0; } } #services { padding-bottom: 200px; } #services .services__title { font-family: "SF Pro Display Semibold", sans-serif; font-size: 32px; line-height: 24px; text-align: center; margin-bottom: 51px; word-break: normal; } @media screen and (min-width: 768px) { #services { padding-bottom: 325px; } #services .services__title { font-size: 40px; line-height: 96px; } } @media screen and (min-width: 992px) { #services .services__items { display: flex; gap: 16px; justify-content: center; } #services .services__items--1 { margin-bottom: 41px; } } @media screen and (min-width: 1200px) { #services { padding-bottom: 458px; } } @media screen and (min-width: 1550px) { #services .services__title { text-align: left; margin-right: 30px; } #services .services__items { justify-content: flex-start; } #services .services__items--1 { justify-content: flex-end; } #services .services__items--wrapper { display: flex; justify-content: space-between; } } #about { padding: 78px 0 132px; } #about .about__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } #about .about__block { max-width: 725px; width: 100%; order: 1; margin: 65px auto 87px; } #about .about__text { font-family: "SF Pro Display Semibold", sans-serif; font-size: 24px; line-height: 28px; margin-bottom: 32px; max-width: 560px; width: 100%; } #about .about__specialization { display: flex; justify-content: flex-start; align-items: flex-start; } #about .about__specialization-symbol { font-size: 12px; line-height: 20px; word-break: normal; } #about .about__specialization-text { font-family: "SF Pro Display Semibold", sans-serif; font-size: 24px; line-height: 28px; color: rgba(255, 255, 255, 0.44); max-width: 486px; width: 100%; margin-left: 58px; } #about .about__copy { font-family: "SF Pro Display Semibold", sans-serif; font-size: 12px; line-height: 28px; margin-top: 8px; } #about .about__video-container { padding: 0; max-width: 1720px; margin-bottom: 132px; } #about video { height: 658px; width: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 768px) { #about { padding: 107px 0 260px; } #about .about__text { font-size: 24px; line-height: 28px; } #about .about__specialization-symbol { font-size: 16px; } #about .about__specialization-text { font-size: 24px; line-height: 28px; margin-left: 126px; } #about .about__copy { font-size: 15px; margin-top: 22px; } #about .about__video-container { margin-bottom: 40px; } #about video { height: 704px; } #about .about__items { display: grid; gap: 75px; grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 992px) { #about .about__title { width: 50%; } } @media screen and (min-width: 1275px) { #about { padding: 107px 0 338px; } #about .about__title { width: auto; } #about .about__top { margin-bottom: 70px; } #about .about__block { order: 0; margin: 15px 70px 0; } } @media screen and (min-width: 1440px) { #about .about__items { grid-template-columns: repeat(4, 1fr); } } #cooperation { padding-bottom: 108px; } #cooperation .cooperation__title { text-align: center; max-width: 295px; width: 100%; margin: 0 auto 60px; } #cooperation .cooperation__items--desktop { display: none; } #cooperation .cooperation__items-block { display: flex; justify-content: space-around; align-items: center; margin-bottom: 38px; } #cooperation .cooperation__items-block:last-child { display: flex; justify-content: space-around; align-items: center; } #cooperation .cooperation__item { max-width: 140px; width: 26%; margin: 0 10px; } @media screen and (min-width: 768px) { #cooperation { padding-bottom: 194px; } #cooperation .cooperation__title { max-width: 395px; margin-bottom: 76px; flex-wrap: nowrap; } #cooperation .cooperation__items--mobile { display: none; } #cooperation .cooperation__items--desktop { display: block; } #cooperation .cooperation__items-block { display: flex; justify-content: space-between; align-items: center; } #cooperation .cooperation__items-block:last-child { display: flex; justify-content: space-between; align-items: center; } #cooperation .cooperation__items-block:nth-child(2) { justify-content: space-around; margin: 65px 0; } #cooperation .cooperation__item { width: auto; margin: 0; } } #team { position: relative; } #team .team__bg { position: absolute; } #team .team__bg--mobile { bottom: 80px; right: -10px; width: 245px; height: 713px; -o-object-fit: contain; object-fit: contain; } #team .team__bg--desktop { display: none; } #team .team__title { text-align: center; margin-bottom: 79px; } #team .team__items { position: relative; } #team .team__items-block { display: flex; justify-content: center; gap: 10px; } #team .team__items-block:first-child { align-items: flex-end; } #team .team__items-block:nth-child(2) { align-items: flex-start; margin-top: 40px; } #team .team__items--desktop { display: none; } @media screen and (min-width: 360px) { #team .team__items-block { gap: 20px; } } @media screen and (min-width: 768px) { #team .team__bg--mobile { display: none; } #team .team__bg--desktop { display: block; bottom: 68px; left: 50%; transform: translateX(-50%); max-width: 1920px; width: 100%; } #team .team__title { margin-bottom: 89px; } } @media screen and (min-width: 1410px) { #team .team__items--mobile { display: none; } #team .team__items--desktop { height: 1053px; display: flex; justify-content: space-between; align-items: flex-start; } } #telegram { padding: 257px 0; position: relative; } #telegram .telegram__bg { position: absolute; z-index: -1; } #telegram .telegram__bg--mobile { left: 0; right: 0; bottom: 0; width: 100%; transform: scale(2.2); mix-blend-mode: hard-light; opacity: 0.44; } #telegram .telegram__bg--desktop { display: none; } #telegram .telegram__inner { max-width: 615px; width: 100%; margin: 0 auto; text-align: center; } #telegram .telegram__title-wrapper { display: inline-block; position: relative; } #telegram .telegram__title { font-family: "SF Pro Display Semibold", sans-serif; font-size: 40px; line-height: 40px; color: rgb(255, 251, 251); margin-bottom: 53px; } #telegram .telegram__subtitle { font-family: "Nazarro Hand Ext", sans-serif; font-size: 64.33px; line-height: 18.83px; letter-spacing: -0.1em; position: absolute; left: -6px; top: 34px; } #telegram .telegram__text { margin-bottom: 121px; } @media screen and (min-width: 768px) { #telegram { padding: 460px 0 360px; } #telegram .telegram__bg--mobile { display: none; } #telegram .telegram__bg--desktop { left: 50%; transform: translateX(-50%); display: block; bottom: -78%; min-width: 1920px; } } @media screen and (max-width: 375px) { #telegram .telegram__title { font-size: 33px; } #telegram .telegram__subtitle { font-size: 54px; } }/*# sourceMappingURL=style.css.map */