html { scroll-behavior: smooth; } body { font-family: Urbanist; font-size: 14px; font-style: normal; font-weight: 500; background-color: var(--bg-primary-color); margin: 0; } :root { --font-family: "Urbanist", sans-serif; --second-family: "Inter", sans-serif; --absolute-white: #fff; --absolute-black: #000; --bg-primary-color: #141414; --bg-second-color: #1A1A1A; --text-second-color: #999; --btn-primary-color: #262626; --btn-second-color: #703bf7; --btn-third-color: #1A1A1A; --logo-color: #703bf7; --border-primary-color: #262626; --border-second-color: #703bf7; --border-third-color: #1A1A1A; --box-shadow-color: #191919; --rating-star-color: #FFE500; --icon-primary-color: #a685fa; --icon-second-color: #703bf7; --icon-third-color: #999; --input-text-color: #666; --purple-65: #8254f8; --purple-70: #946cf9; --purple-90: #dbcefd; --purple-95: #ede7fe; --purple-97: #f4f0fe; --purple-99: #fbfaff; --white-90: #e4e4e7; --white-95: #f1f1f3; --white-97: #f7f7f8; --white-99: #fcfcfd; --grey-20: #333; --grey-30: #4d4d4d; --grey-40: #666; --grey-50: #808080; } @media screen and (min-width: 390px) { main { min-width: 390px; margin: auto; } } @media screen and (min-width: 1440px) { main { min-width: 1440px; } } @media screen and (min-width: 1920px) { main { min-width: 1920px; } } p { margin: 0; } a { list-style-type: none; text-decoration: none; font-style: normal; } address { text-decoration: none; font-style: normal; } li { text-decoration: none; list-style-type: none; } ul { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } .is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ======== */ /** Use a better box model (opinionated). */ *, ::before, ::after { box-sizing: border-box; } /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size (opinionated). */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ tab-size: 4; /* 3 */ } /* Sections ======== */ /** 1. Remove the margin in all browsers. 2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ /* Grouping content ================ */ /** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { text-decoration: underline dotted; } /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ :-moz-ui-invalid { box-shadow: none; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } .header { position: relative; max-width: 390px; margin: auto; background-color: var(--bg-second-color); padding: 20px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-primary-color); border-bottom: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .header { padding: 14px 80px; min-width: 1440px; } } @media screen and (min-width: 1920px) { .header { min-width: 1920px; padding: 20px 162px; } } .header__logo { display: flex; align-items: center; gap: 6px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .header__logo { gap: 7px; } } @media screen and (min-width: 1920px) { .header__logo { gap: 10px; } } .header__logo-img { width: 28px; height: 28px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .header__logo-img { width: 34px; height: 34px; } } @media screen and (min-width: 1920px) { .header__logo-img { width: 48px; height: 48px; } } .header__logo-text { width: 61px; height: 13px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .header__logo-text { width: 73px; height: 16px; } } @media screen and (min-width: 1920px) { .header__logo-text { width: 102px; height: 21px; } } .header__nav-list { display: flex; margin: 0; gap: 20px; } .header__nav-item { display: none; color: var(--absolute-white); background-color: var(--bg-second-color); border: 1px solid var(--border-third-color); padding: 0; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) { .header__nav-item { display: flex; } } .header__nav-item:hover { border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1920px) { .header__nav-item:hover { border-radius: 10px; } } .header__current { border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1920px) { .header__current { border-radius: 10px; } } .header__nav-link { cursor: pointer; padding: 12px 20px; align-items: center; justify-content: center; display: flex; color: var(--absolute-white); text-align: center; line-height: 150%; } @media screen and (min-width: 1920px) { .header__nav-link { padding: 14px 24px; font-size: 18px; } } .header__mobile-nav-list { display: flex; flex-direction: column; justify-content: center; margin: 0; padding-bottom: 40px; gap: 10px; } .header__mobile-nav-link { cursor: pointer; padding: 12px 20px; display: flex; justify-content: center; align-items: center; text-align: center; color: #FFF; line-height: 150%; border: 1px solid var(--border-third-color); transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .header__mobile-nav-link:hover { border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .header__contact-btn { display: none; cursor: pointer; padding: 12px 20px; align-items: center; background-color: var(--bg-second-color); border: 1px solid var(--border-third-color); border-radius: 8px; color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) { .header__contact-btn { display: flex; justify-content: center; padding: 14px 24px; border-radius: 10px; font-size: 18px; } } .header__contact-btn:hover { border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .header__menu-icon { z-index: 19; position: relative; width: 28px; height: 28px; cursor: pointer; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 1440px) { .header__menu-icon { display: none; } } .header__menu-icon-line { position: relative; width: 20px; height: 1.5px; border-radius: 12px; background-color: var(--absolute-white); } .header__menu-icon-line::before { position: absolute; left: 0; top: -6px; content: ''; width: 20px; height: 1.5px; border-radius: 12px; background-color: var(--absolute-white); transition: transform 0.2s ease-in, top 0.2s linear 0.2s; } .header__menu-icon-line::after { position: absolute; left: 0; top: 6px; content: ''; width: 20px; height: 1.5px; border-radius: 12px; background-color: var(--absolute-white); transition: transform 0.2s ease-in, top 0.2s linear 0.2s; } .header__menu-icon.header__menu-icon-active .header__menu-icon-line { background-color: transparent; } .header__menu-icon.header__menu-icon-active .header__menu-icon-line::before { transform: rotate(45deg); top: 0; transition: top 0.2s linear, transform 0.2s ease-in 0.2s; } .header__menu-icon.header__menu-icon-active .header__menu-icon-line::after { transform: rotate(-45deg); top: 0; transition: top 0.2s linear, transform 0.2s ease-in 0.2s; } .header__mobile-nav { z-index: 9; display: flex; justify-content: center; position: absolute; top: -500%; left: 0; height: 50%; width: 100%; padding: 165px 0; background-color: var(--bg-second-color); transition: transform 0.4s ease-in; border-top: 1px solid var(--absolute-white); border-radius: 0 0 6px 6px; } .header__mobile-nav-active { transform: translateY(123%); } .hero { max-width: 390px; margin: auto; padding: 40px 16px; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero { padding: 0 0 0 80px; display: flex; justify-content: start; flex-direction: row-reverse; min-width: 1440px; gap: 60px; } } @media screen and (min-width: 1920px) { .hero { padding: 0 0 0 162px; display: flex; justify-content: start; flex-direction: row-reverse; min-width: 1920px; gap: 80px; } } .hero__bg { width: 358px; height: 302px; border: 1px solid #262626; border-radius: 12px; background-image: linear-gradient(231.6deg, #2a213f 8.764%, rgba(26, 26, 26, 0) 50.088%), url(../images/hero-bg.jpg); background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 1440px) { .hero__bg { min-width: 690px; height: 622px; border: none; border-radius: 0; } } @media screen and (min-width: 1920px) { .hero__bg { min-width: 920px; height: 814px; } } .hero__container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__container { padding: 98px 0; } } @media screen and (min-width: 1920px) { .hero__container { padding: 144px 0; } } .hero__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 120%; margin: 16px 0; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__name { font-size: 46px; margin: 0; margin-bottom: 20px; } } @media screen and (min-width: 1920px) { .hero__name { font-size: 60px; margin: 0; margin-bottom: 24px; } } .hero__description { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__description { font-size: 16px; } } @media screen and (min-width: 1920px) { .hero__description { font-size: 18px; } } .hero__buttons { display: flex; flex-direction: column; gap: 16px; margin: 40px 0; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__buttons { flex-direction: unset; margin: 50px 0; } } @media screen and (min-width: 1920px) { .hero__buttons { flex-direction: unset; margin: 60px 0; gap: 20px; } } .hero__btn { width: 358px; cursor: pointer; display: flex; padding: 14px 20px; justify-content: center; align-items: center; background: #141414; border-radius: 8px; border: 1px solid var(--border-primary-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__btn { width: auto; } } @media screen and (min-width: 1920px) { .hero__btn { width: auto; padding: 18px 24px; font-size: 18px; border-radius: 10px; } } .hero__btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .hero__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__list { gap: 16px; flex-wrap: nowrap; } } @media screen and (min-width: 1920px) { .hero__list { gap: 20px; } } .hero__item { display: flex; flex-direction: column; width: 173px; padding: 16px; gap: 2px; border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__item { padding: 14px 20px; border-radius: 10px; min-width: 192px; } } @media screen and (min-width: 1920px) { .hero__item { padding: 16px 24px; border-radius: 12px; min-width: 239px; } } .hero__item:last-child { flex-grow: 2; } .hero__numbers { color: var(--absolute-white); font-size: 24px; font-weight: 700; line-height: 150%; display: flex; justify-content: center; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__numbers { font-size: 30px; justify-content: start; } } @media screen and (min-width: 1920px) { .hero__numbers { font-size: 40px; justify-content: start; } } .hero__text { color: var(--text-second-color); text-align: center; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .hero__text { font-size: 16px; text-align: start; } } @media screen and (min-width: 1920px) { .hero__text { font-size: 18px; text-align: start; } } .subscribe { max-width: 390px; padding: 0 16px 40px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe { min-width: 1440px; padding: 10px 0 60px 0; } } @media screen and (min-width: 1920px) { .subscribe { min-width: 1920px; padding: 10px 0 75px 0; } } .subscribe__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 9px; border: 1px solid var(--border-color); box-shadow: 0px 0px 0px 6px var(--box-shadow-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__list { padding: 10px; flex-wrap: nowrap; } } @media screen and (min-width: 1920px) { .subscribe__list { padding: 20px; gap: 20px; } } .subscribe__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 164px; padding: 20px 14px; border-radius: 10px; border: 1px solid var(--border-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__item { min-width: 347px; padding: 30px 16px; gap: 16px; } } @media screen and (min-width: 1920px) { .subscribe__item { min-width: 455px; padding: 40px 20px; gap: 20px; } } .subscribe__icon-container { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; border-radius: 100px; background-image: linear-gradient(35deg, #a685fa 10%, rgba(112, 59, 247, 0) 40%, rgba(112, 59, 247, 0) 60%, #a685fa 90%); padding: 1px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__icon-container { width: 60px; height: 60px; } } @media screen and (min-width: 1920px) { .subscribe__icon-container { width: 82px; height: 82px; } } .subscribe__icon-container1 { display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: 100px; background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__icon-container1 { width: 58px; height: 58px; } } @media screen and (min-width: 1920px) { .subscribe__icon-container1 { width: 80px; height: 80px; } } .subscribe__icon-container2 { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 100px; background-image: linear-gradient(135deg, #a685fa 10%, rgba(112, 59, 247, 0) 40%, rgba(112, 59, 247, 0) 60%, #a685fa 90%); padding: 1px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__icon-container2 { width: 44px; height: 44px; } } @media screen and (min-width: 1920px) { .subscribe__icon-container2 { width: 62px; height: 62px; } } .subscribe__icon-container3 { display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 100px; background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__icon-container3 { width: 42px; height: 42px; } } @media screen and (min-width: 1920px) { .subscribe__icon-container3 { width: 60px; height: 60px; } } .subscribe__icons { fill: var(--icon-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__icons { width: 24px; height: 24px; } } @media screen and (min-width: 1920px) { .subscribe__icons { width: 34px; height: 34px; } } .subscribe__text { color: var(--absolute-white); text-align: center; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .subscribe__text { font-size: 16px; } } @media screen and (min-width: 1920px) { .subscribe__text { font-size: 20px; } } .subscribe__arrow-box { position: absolute; z-index: 100; margin-top: 20px; margin-right: 20px; right: 0; top: 0; } .subscribe__arrow { fill: white; } @media screen and (min-width: 1920px) { .subscribe__arrow { width: 34px; height: 34px; } } .features { max-width: 390px; margin: auto; padding: 40px 16px; background-color: var(--bg-primary-color); background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-size: 20px 20px, 12px 12px, 6px 6px; background-position: top 20px left 8px, top 25px left 32px, top 28px left 48px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features { min-width: 1440px; padding: 60px 80px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-position: top 30px left 70px, top 35px left 99px, top 39px left 118px; } } @media screen and (min-width: 1920px) { .features { min-width: 1920px; padding: 75px 162px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-size: 30px 30px, 18px 18px, 8.4px 8.4px; background-repeat: no-repeat; background-position: top 30px left 142px, top 35px left 178px, top 39px left 202px; } } .features__container { margin: auto; } .features__title { display: flex; justify-content: space-between; align-items: end; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__title { gap: 150px; } } @media screen and (min-width: 1920px) { .features__title { gap: 200px; } } .features__title-name { color: var(--absolute-white); font-size: 20px; font-weight: 600; line-height: 150%; margin-bottom: 14px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__title-name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .features__title-name { font-size: 48px; margin-bottom: 14px; } } .features__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .features__title-text { font-size: 18px; } } .features__title-btn1 { cursor: pointer; display: none; min-width: 155px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__title-btn1 { display: flex; justify-content: center; padding: 14px; } } @media screen and (min-width: 1920px) { .features__title-btn1 { display: flex; justify-content: center; padding: 18px 24px; } } .features__title-btn1:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .features__title-btn { cursor: pointer; display: flex; align-items: center; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__title-btn { display: none; } } @media screen and (min-width: 1920px) { .features__title-btn { display: none; } } .features__title-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .features__swiper { overflow: hidden; } .features__list { display: flex; padding: 0; margin: 40px 0 30px 0; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__list { margin: 60px 0 40px 0; } } @media screen and (min-width: 1920px) { .features__list { margin: 80px 0 50px 0; } } .features__item { max-width: 358px; padding: 24px; flex-direction: column; align-items: flex-start; border-radius: 12px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); transition: 3s; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__item { min-width: 413.333px; padding: 30px; } } @media screen and (min-width: 1920px) { .features__item { min-width: 512px; padding: 40px; } } .features__img { height: 210px; width: 100%; border-radius: 10px; margin-bottom: 16px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__img { height: 255px; margin-bottom: 20px; } } @media screen and (min-width: 1920px) { .features__img { height: 318px; margin-bottom: 30px; } } .features__name { color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__name { font-size: 20px; } } @media screen and (min-width: 1920px) { .features__name { font-size: 24px; } } .features__text { color: var(--text-second-color); line-height: 150%; margin-top: 2px; margin-bottom: 20px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__text { margin-top: 4px; margin-bottom: 24px; font-size: 16px; } } @media screen and (min-width: 1920px) { .features__text { margin-top: 6px; margin-bottom: 30px; font-size: 18px; } } .features__link { color: var(--absolute-white); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__link { font-size: 16px; } } @media screen and (min-width: 1920px) { .features__link { font-size: 18px; } } .features__link:hover { text-decoration: underline; } .features__item-list { margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__item-list { flex-wrap: nowrap; } } @media screen and (min-width: 1920px) { .features__item-list { flex-wrap: nowrap; } } .features__list-item { display: flex; align-items: center; padding: 6px 14px; border-radius: 28px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__list-item { padding: 6px 11px; } } @media screen and (min-width: 1920px) { .features__list-item { padding: 8px 14px; } } .features__item-icon { fill: var(--absolute-white); } .features__item-name { margin-left: 4px; color: var(--absolute-white); line-height: 150%; } .features__price { display: flex; gap: 30px; margin-top: 20px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__price { margin-top: 24px; gap: 40px; } } @media screen and (min-width: 1920px) { .features__price { margin-top: 30px; gap: 60px; } } .features__price-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1920px) { .features__price-text { font-size: 18px; margin-bottom: 2px; } } .features__price-sum { color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__price-sum { font-size: 20px; } } @media screen and (min-width: 1920px) { .features__price-sum { font-size: 24px; } } .features__price-btn { cursor: pointer; min-width: 202px; display: flex; padding: 14px 20px; justify-content: center; align-items: center; border-radius: 8px; background-color: var(--bg-second-color); border: 1px solid var(--border-primary-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__price-btn { min-width: 227px; } } @media screen and (min-width: 1920px) { .features__price-btn { padding: 18px 24px; font-size: 18px; min-width: 278px; } } .features__price-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .features__pagination { display: flex; padding-top: 16px; justify-content: space-between; border-top: 1px solid var(--border-primary-color); } @media screen and (min-width: 1920px) { .features__pagination { padding-top: 20px; } } .features__pagination-numbers1 { display: none; color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__pagination-numbers1 { display: block; font-size: 16px; } } @media screen and (min-width: 1920px) { .features__pagination-numbers1 { display: block; font-size: 20px; } } .features .numbers1 { display: none; color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features .numbers1 { display: block; font-size: 16px; } } @media screen and (min-width: 1920px) { .features .numbers1 { display: block; font-size: 20px; } } .features__btns-container { display: flex; align-items: center; gap: 10px; } .features__button-prev { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); cursor: pointer; } @media screen and (min-width: 1920px) { .features__button-prev { width: 58px; height: 58px; } } .features__pagination-numbers { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features__pagination-numbers { display: none; } } @media screen and (min-width: 1920px) { .features__pagination-numbers { display: none; } } .features .numbers { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .features .numbers { display: none; } } @media screen and (min-width: 1920px) { .features .numbers { display: none; } } .features__button-next { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); cursor: pointer; } @media screen and (min-width: 1920px) { .features__button-next { width: 58px; height: 58px; } } .features__arrow-left { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .features__arrow-left { width: 30px; height: 30px; } } .features__button-prev:hover .features__arrow-left { fill: var(--absolute-white); } .features__arrow-right { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .features__arrow-right { width: 30px; height: 30px; } } .features__button-next:hover .features__arrow-right { fill: var(--absolute-white); } .swiper-pagination-current { color: var(--absolute-white); } .feedback { max-width: 390px; margin: auto; padding: 40px 16px; background-color: var(--bg-primary-color); background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-size: 20px 20px, 12px 12px, 6px 6px; background-position: top 20px left 8px, top 25px left 32px, top 28px left 48px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback { min-width: 1440px; padding: 60px 80px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-position: top 30px left 70px, top 35px left 99px, top 39px left 118px; } } @media screen and (min-width: 1920px) { .feedback { min-width: 1920px; padding: 75px 162px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-size: 30px 30px, 18px 18px, 8.4px 8.4px; background-repeat: no-repeat; background-position: top 30px left 142px, top 35px left 178px, top 39px left 202px; } } .feedback__container { margin: auto; } .feedback__title { display: flex; justify-content: space-between; align-items: end; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__title { gap: 150px; } } @media screen and (min-width: 1920px) { .feedback__title { gap: 200px; } } .feedback__title-name { color: var(--absolute-white); margin-bottom: 6px; font-size: 20px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__title-name { margin-bottom: 10px; font-size: 38px; } } @media screen and (min-width: 1920px) { .feedback__title-name { font-size: 48px; margin-bottom: 14px; } } .feedback__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .feedback__title-text { font-size: 18px; } } .feedback__title-btn1 { cursor: pointer; display: none; align-items: center; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__title-btn1 { display: flex; justify-content: center; padding: 14px; } } @media screen and (min-width: 1920px) { .feedback__title-btn1 { display: flex; justify-content: center; padding: 18px 24px; } } .feedback__title-btn1:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .feedback__title-btn { cursor: pointer; display: flex; align-items: center; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__title-btn { display: none; } } @media screen and (min-width: 1920px) { .feedback__title-btn { display: none; } } .feedback__title-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .feedback__swiper { overflow: hidden; } .feedback__list { display: flex; padding: 0; margin: 40px 0 30px 0; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__list { margin: 60px 0 40px 0; } } @media screen and (min-width: 1920px) { .feedback__list { margin: 80px 0 50px 0; } } .feedback__item { min-width: 358px; display: flex; flex-direction: column; padding: 30px; gap: 24px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__item { min-width: 413px; padding: 40px; gap: 30px; } } @media screen and (min-width: 1920px) { .feedback__item { min-width: 512px; padding: 50px; } } .feedback__rate { display: flex; margin: 0; padding: 0; gap: 8px; flex-direction: row-reverse; justify-content: start; } @media screen and (min-width: 1920px) { .feedback__rate { gap: 10px; } } .feedback__rate-item { padding: 10px; border-radius: 100px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); cursor: pointer; } .feedback__icon-star { fill: var(--text-second-color); transition: 0.2s; } @media screen and (min-width: 1920px) { .feedback__icon-star { width: 24px; height: 24px; } } .feedback__rate-item:hover .feedback__icon-star { fill: var(--rating-star-color); } .feedback__rate-item:hover ~ .feedback__rate-item .icon-star { fill: var(--rating-star-color); } .feedback__rate[data-total-value="1"] .feedback__rate-item:nth-child(n + 5) .feedback__icon-star, .feedback__rate[data-total-value="2"] .feedback__rate-item:nth-child(n + 4) .feedback__icon-star, .feedback__rate[data-total-value="3"] .feedback__rate-item:nth-child(n + 3) .feedback__icon-star, .feedback__rate[data-total-value="4"] .feedback__rate-item:nth-child(n + 2) .feedback__icon-star, .feedback__rate[data-total-value="5"] .feedback__rate-item:nth-child(n + 1) .feedback__icon-star { fill: var(--rating-star-color); } .feedback__text-container { height: 100%; } .feedback__text { align-self: stretch; color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1920px) { .feedback__text { font-size: 24px; } } .feedback__description { align-self: stretch; color: var(--absolute-white); line-height: 150%; margin-top: 6px; } @media screen and (min-width: 1920px) { .feedback__description { font-size: 18px; } } .feedback__user { display: flex; align-items: center; gap: 10px; } @media screen and (min-width: 1920px) { .feedback__user { gap: 12px; } } .feedback__user-wadewarren { width: 50px; height: 50px; border-radius: 50px; background-image: url(../images/wade_warren.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 1920px) { .feedback__user-wadewarren { width: 60px; height: 60px; } } .feedback__user-emeliethomson { width: 50px; height: 50px; border-radius: 50px; background-image: url(../images/emelie_thomson.png); background-size: cover; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 1920px) { .feedback__user-emeliethomson { width: 60px; height: 60px; } } .feedback__user-johnmans { width: 50px; height: 50px; border-radius: 50px; background-image: url(../images/john_mans.png); background-size: cover; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 1920px) { .feedback__user-johnmans { width: 60px; height: 60px; } } .feedback__user-info { display: flex; flex-direction: column; } @media screen and (min-width: 1920px) { .feedback__user-info { gap: 2px; } } .feedback__user-name { color: var(--absolute-white); font-size: 16px; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__user-name { font-size: 18px; } } @media screen and (min-width: 1920px) { .feedback__user-name { font-size: 20px; } } .feedback__user-from { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__user-from { font-size: 16px; } } @media screen and (min-width: 1920px) { .feedback__user-from { font-size: 18px; } } .feedback__pagination { display: flex; padding-top: 16px; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--border-primary-color); } @media screen and (min-width: 1920px) { .feedback__pagination { padding-top: 20px; } } .feedback__pagination-numbers1 { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__pagination-numbers1 { display: none; } } @media screen and (min-width: 1920px) { .feedback__pagination-numbers1 { display: none; } } .feedback__pagination-numbers { display: none; color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .feedback__pagination-numbers { display: block; font-size: 16px; } } @media screen and (min-width: 1920px) { .feedback__pagination-numbers { display: block; font-size: 20px; } } .feedback__btns-container { display: flex; align-items: center; gap: 10px; } .feedback__button-prev { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1920px) { .feedback__button-prev { width: 58px; height: 58px; } } .feedback__button-next { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1920px) { .feedback__button-next { width: 58px; height: 58px; } } .feedback__arrow-left { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .feedback__arrow-left { width: 30px; height: 30px; } } .feedback__button-prev:hover .feedback__arrow-left { fill: var(--absolute-white); } .feedback__arrow-right { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .feedback__arrow-right { width: 30px; height: 30px; } } .feedback__button-next:hover .feedback__arrow-right { fill: var(--absolute-white); } .question { max-width: 390px; margin: auto; padding: 40px 16px 80px 16px; background-color: var(--bg-primary-color); background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-size: 20px 20px, 12px 12px, 6px 6px; background-position: top 20px left 8px, top 25px left 32px, top 28px left 48px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question { min-width: 1440px; padding: 60px 80px 72px 80px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-size: 24px 24px, 14px 14px, 7px 7px; background-position: top 30px left 70px, top 35px left 99px, top 39px left 118px; } } @media screen and (min-width: 1920px) { .question { min-width: 1920px; padding: 75px 162px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-size: 30px 30px, 18px 18px, 8.4px 8.4px; background-repeat: no-repeat; background-position: top 30px left 142px, top 35px left 178px, top 39px left 202px; } } .question__container { margin: auto; } .question__title { display: flex; align-items: end; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__title { gap: 150px; } } @media screen and (min-width: 1920px) { .question__title { gap: 200px; } } .question__title-name { color: var(--absolute-white); font-size: 20px; font-weight: 600; line-height: 150%; margin-bottom: 6px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__title-name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .question__title-name { font-size: 48px; margin-bottom: 14px; } } .question__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .question__title-text { font-size: 18px; } } .question__title-btn1 { cursor: pointer; display: none; padding: 14px 20px; border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__title-btn1 { display: flex; justify-content: center; border-radius: 10px; width: 170px; } } @media screen and (min-width: 1920px) { .question__title-btn1 { display: flex; justify-content: center; width: 170px; font-size: 18px; } } .question__title-btn1:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .question__title-btn { cursor: pointer; display: flex; padding: 14px 20px; align-items: center; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__title-btn { border-radius: 8px; display: none; } } @media screen and (min-width: 1920px) { .question__title-btn { display: none; } } .question__title-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .question__swiper { overflow: hidden; } .question__list { display: flex; margin: 40px 0 30px 0; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__list { margin: 60px 0 40px 0; } } @media screen and (min-width: 1920px) { .question__list { margin: 80px 0 50px 0; } } .question__item { display: flex; flex-direction: column; width: 358px; gap: 20px; padding: 30px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__item { min-width: 413px; gap: 24px; padding: 40px; } } @media screen and (min-width: 1920px) { .question__item { min-width: 512px; gap: 30px; padding: 50px; } } .question__text { align-self: stretch; color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__text { font-size: 20px; } } @media screen and (min-width: 1920px) { .question__text { font-size: 20px; flex-grow: 1; } } .question__description { align-self: stretch; color: var(--absolute-white); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__description { font-size: 16px; } } @media screen and (min-width: 1920px) { .question__description { font-size: 18px; } } .question__item-btn { cursor: pointer; min-width: 298px; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-weight: 500; line-height: 131%; letter-spacing: -0.108px; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__item-btn { border-radius: 8px; min-width: 0; max-width: 107px; padding: 14px 0; } } @media screen and (min-width: 1920px) { .question__item-btn { border-radius: 10px; min-width: 0; max-width: 134px; font-size: 18px; } } .question__item-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .question__pagination { display: flex; padding-top: 16px; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--border-primary-color); } @media screen and (min-width: 1920px) { .question__pagination { padding-top: 20px; } } .question__pagination-numbers { display: none; color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__pagination-numbers { display: block; font-size: 16px; } } @media screen and (min-width: 1920px) { .question__pagination-numbers { display: block; font-size: 20px; } } .question__pagination-numbers1 { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .question__pagination-numbers1 { font-size: 16px; display: none; } } @media screen and (min-width: 1920px) { .question__pagination-numbers1 { display: none; } } .question__btns-container { display: flex; align-items: center; gap: 10px; } .question__button-prev { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1920px) { .question__button-prev { width: 58px; height: 58px; } } .question__button-next { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 44px; height: 44px; padding: 10px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1920px) { .question__button-next { width: 58px; height: 58px; } } .question__arrow-left { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .question__arrow-left { width: 30px; height: 30px; } } .question__button-prev:hover .question__arrow-left { fill: var(--absolute-white); } .question__arrow-right { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .question__arrow-right { width: 30px; height: 30px; } } .question__button-next:hover .question__arrow-right { fill: var(--absolute-white); } .join { max-width: 390px; margin: auto; padding: 50px 16px; background-color: var(--bg-primary-color); border-top: 1px solid var(--border-primary-color); border-bottom: 1px solid var(--border-primary-color); background-image: url("../images/abstract.svg"), url("../images/abstract1.svg"); background-repeat: no-repeat; background-size: 522px 284px, 398px 217px; background-position: left -21px top -109px, right 0 bottom -25px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .join { min-width: 1440px; padding: 60px 80px; background-image: url("../images/abstract.svg"), url("../images/abstract1.svg"); background-repeat: no-repeat; background-size: 474px 258px, 569px 310px; background-position: left 0 bottom 0, top -30px right -14px; } } @media screen and (min-width: 1920px) { .join { min-width: 1920px; padding: 100px 162px; background-image: url("../images/abstract.svg"), url("../images/abstract1.svg"); background-repeat: no-repeat; background-size: 566px 308px, 725px 394px; background-position: left -10px top 59px, right -92px top 36px; } } .join__container { margin: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; align-items: center; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .join__container { gap: 150px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .join__container { gap: 250px; flex-direction: inherit; } } .join__title-name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; margin-bottom: 6px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .join__title-name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .join__title-name { font-size: 48px; margin-bottom: 14px; } } .join__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .join__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .join__title-text { font-size: 18px; } } .join__title-btn { cursor: pointer; display: flex; min-width: 357px; padding: 14px 20px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .join__title-btn { border-radius: 8px; min-width: 152px; padding: 14px; } } @media screen and (min-width: 1920px) { .join__title-btn { border-radius: 10px; min-width: 192px; padding: 18px; font-size: 18px; } } .join__title-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .footer { background-color: var(--bg-primary-color); max-width: 390px; padding-top: 50px; margin: auto; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer { min-width: 1440px; padding-top: 80px; } } @media screen and (min-width: 1920px) { .footer { min-width: 1920px; padding-top: 100px; } } .footer__container { display: flex; flex-direction: column; margin: auto; padding: 0 16px 90px 16px; gap: 50px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__container { padding: 0 80px 80px 80px; gap: 80px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .footer__container { padding: 0 162px 100px 162px; gap: 200px; flex-direction: inherit; } } .footer__subscribe { display: flex; flex-direction: column; gap: 20px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__subscribe { min-width: 326px; gap: 24px; } } @media screen and (min-width: 1920px) { .footer__subscribe { min-width: 378px; gap: 30px; } } .footer__logo { display: flex; align-items: center; gap: 7px; width: 160px; } @media screen and (min-width: 1920px) { .footer__logo { gap: 10px; } } .footer__logo-img { width: 34px; height: 34px; } @media screen and (min-width: 1920px) { .footer__logo-img { width: 48px; height: 48px; } } .footer__logo-text { width: 72px; height: 14px; } @media screen and (min-width: 1920px) { .footer__logo-text { width: 102px; height: 21px; } } .footer__submit { display: flex; align-items: center; gap: 6px; min-width: 358px; padding: 14px 20px; border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__submit { min-width: 0px; max-width: 305px; } } @media screen and (min-width: 1920px) { .footer__submit { min-width: 0px; max-width: 423px; border-radius: 12px; gap: 12px; padding: 18px 24px; } } .footer__submit input::placeholder { color: var(--text-second-color); line-height: 24px; letter-spacing: -0.108px; } .footer__submit input { min-width: 261px; border-radius: 4px; border: 0px solid; background: #141414; color: var(--text-second-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__submit input { min-width: 209px; } } @media screen and (min-width: 1920px) { .footer__submit input { font-size: 18px; } } .footer__icon-mail { fill: #999999; } @media screen and (min-width: 1920px) { .footer__icon-mail { width: 24px; height: 24px; } } .footer__icon-send { fill: white; } .footer__links { position: relative; display: flex; flex-wrap: wrap; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links { justify-content: space-between; width: 100%; } } @media screen and (min-width: 1920px) { .footer__links { justify-content: space-between; width: 100%; } } .footer__links-list { min-width: 158.5px; margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--Grey-15, #262626); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list { min-width: 0; padding-bottom: 0; border-bottom: 0; } } @media screen and (min-width: 1920px) { .footer__links-list { min-width: 0; padding-bottom: 0; border-bottom: 0; } } .footer__links-list:nth-child(odd) { margin-right: 20px; box-shadow: 20px 0 0 0 #141414, 21px 0 0 0 #262626; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list:nth-child(odd) { margin-right: 0; box-shadow: none; } } @media screen and (min-width: 1920px) { .footer__links-list:nth-child(odd) { margin-right: 0; box-shadow: none; } } .footer__links-list:nth-child(even) { margin-left: 20px; float: left; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list:nth-child(even) { margin-left: 0; } } @media screen and (min-width: 1920px) { .footer__links-list:nth-child(even) { margin-left: 0; } } .footer__links-list:nth-child(n+3) { margin-top: 20px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list:nth-child(n+3) { margin-top: 0; } } @media screen and (min-width: 1920px) { .footer__links-list:nth-child(n+3) { margin-top: 0; } } .footer__links-list:nth-child(3n) { height: 116px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list:nth-child(3n) { height: auto; } } .footer__links-list:nth-child(5n) { position: absolute; top: 348px; padding-top: 20px; margin-top: 0; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-list:nth-child(5n) { padding-top: 0; position: unset; } } @media screen and (min-width: 1920px) { .footer__links-list:nth-child(5n) { padding-top: 0; position: unset; } } .footer__links-item { margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-item { margin-bottom: 16px; } } @media screen and (min-width: 1920px) { .footer__links-item { margin-bottom: 20px; } } .footer__links-item:first-child { margin-bottom: 16px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__links-item:first-child { margin-bottom: 24px; } } @media screen and (min-width: 1920px) { .footer__links-item:first-child { margin-bottom: 30px; } } .footer__links-item:last-child { margin-bottom: 0; } .footer__link-nav-categories { color: var(--text-second-color); font-size: 16px; line-height: 24px; letter-spacing: -0.12px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__link-nav-categories { font-size: 18px; } } @media screen and (min-width: 1920px) { .footer__link-nav-categories { font-size: 20px; } } .footer__link-nav-categories:hover { text-decoration: underline; } .footer__link-nav { color: var(--absolute-white); line-height: 24px; letter-spacing: -0.108px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__link-nav { font-size: 16px; } } @media screen and (min-width: 1920px) { .footer__link-nav { font-size: 18px; } } .footer__link-nav:hover { text-decoration: underline; } .footer__end { min-width: 390px; margin: auto; padding: 20px 16px; background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__end { padding: 12px 80px; } } @media screen and (min-width: 1920px) { .footer__end { padding: 16px 162px; } } .footer__rights-socials { display: flex; flex-direction: column-reverse; justify-content: space-between; margin: auto; gap: 20px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__rights-socials { flex-direction: inherit; } } @media screen and (min-width: 1920px) { .footer__rights-socials { flex-direction: inherit; } } .footer__rights { display: flex; flex-direction: column; gap: 10px; align-items: center; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__rights { gap: 20px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .footer__rights { gap: 40px; flex-direction: inherit; } } .footer__rights-text { color: var(--absolute-white); line-height: 24px; letter-spacing: -0.108px; } @media screen and (min-width: 1920px) { .footer__rights-text { font-size: 18px; } } .footer__rights-text-link { color: var(--absolute-white); line-height: 24px; letter-spacing: -0.108px; } @media screen and (min-width: 1920px) { .footer__rights-text-link { font-size: 18px; } } .footer__rights-text-link:hover { text-decoration: underline; } .footer__socials { display: flex; justify-content: center; align-items: center; gap: 8px; } @media screen and (min-width: 1920px) { .footer__socials { gap: 10px; } } .footer__socials-btn { cursor: pointer; display: flex; justify-content: center; align-items: center; border: 0px solid; padding: 0; border-radius: 58px; background-color: var(--bg-primary-color); width: 60px; height: 60px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .footer__socials-btn { width: 40px; height: 40px; padding: 10px; } } @media screen and (min-width: 1920px) { .footer__socials-btn { width: 52px; height: 52px; padding: 14px; } } .footer__socials-icon { fill: var(--absolute-white); } .about { max-width: 390px; background-color: var(--bg-primary-color); display: flex; flex-direction: column; padding: 50px 16px 40px 16px; margin: auto; gap: 40px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about { padding: 70px 80px 60px 80px; display: flex; justify-content: start; flex-direction: row-reverse; min-width: 1440px; gap: 60px; } } @media screen and (min-width: 1920px) { .about { padding: 100px 162px 75px 162px; display: flex; justify-content: start; flex-direction: row-reverse; min-width: 1920px; gap: 80px; } } .about__hero-bg { width: 358px; height: 310px; border-radius: 12px; border: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-bg { width: 610px; height: 435px; } } @media screen and (min-width: 1920px) { .about__hero-bg { width: 755px; height: 546px; } } .about__hero-img { width: 358px; height: 310px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-img { width: 610px; height: 435px; } } @media screen and (min-width: 1920px) { .about__hero-img { width: 755px; height: 546px; } } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-container { padding-top: 55.5px; } } @media screen and (min-width: 1920px) { .about__hero-container { padding-top: 67.5px; } } .about__hero-name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 120%; margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .about__hero-name { font-size: 60px; margin-bottom: 14px; } } .about__hero-description { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-description { font-size: 16px; } } @media screen and (min-width: 1920px) { .about__hero-description { font-size: 18px; } } .about__hero-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-list { margin-top: 50px; flex-wrap: nowrap; } } @media screen and (min-width: 1920px) { .about__hero-list { margin-top: 80px; gap: 20px; } } .about__hero-item { display: flex; flex-direction: column; align-items: center; width: 170px; padding: 18px 16px; flex-grow: 1; gap: 2px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-item { padding: 20px; border-radius: 10px; align-items: start; } } @media screen and (min-width: 1920px) { .about__hero-item { padding: 24px; border-radius: 12px; align-items: start; } } .about__hero-numbers { color: var(--absolute-white); font-size: 24px; font-weight: 700; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-numbers { font-size: 30px; } } @media screen and (min-width: 1920px) { .about__hero-numbers { font-size: 40px; } } .about__hero-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .about__hero-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .about__hero-text { font-size: 18px; } } .values { max-width: 390px; padding: 40px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values { min-width: 1440px; padding: 60px 80px; } } @media screen and (min-width: 1920px) { .values { min-width: 1920px; padding: 75px 162px; } } .values__container { margin: auto; gap: 40px; display: flex; flex-direction: column; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__container { gap: 60px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .values__container { gap: 80px; flex-direction: inherit; } } .values__title { display: flex; flex-direction: column; justify-content: center; gap: 8px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__title { gap: 10px; width: 413px; } } @media screen and (min-width: 1920px) { .values__title { gap: 14px; width: 517px; } } .values__title-name { margin: 0; color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__title-name { font-size: 38px; } } @media screen and (min-width: 1920px) { .values__title-name { font-size: 48px; } } .values__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .values__title-text { font-size: 18px; } } .values__list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; gap: 20px; padding: 24px; border-radius: 12px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); box-shadow: 0px 0px 0px 6px var(--box-shadow-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__list { width: 807px; gap: 0; padding: 50px; box-shadow: 0px 0px 0px 8px var(--box-shadow-color); } } @media screen and (min-width: 1920px) { .values__list { width: 999px; gap: 0; padding: 60px; box-shadow: 0px 0px 0px 10px var(--box-shadow-color); } } .values__item { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__item { gap: 16px; padding-bottom: 0; border-bottom: 0; width: 329px; } } @media screen and (min-width: 1920px) { .values__item { width: 410px; gap: 20px; padding-bottom: 0; border-bottom: 0; } } .values__item:last-child { padding-bottom: 0; border-bottom: 0; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__item:nth-child(2n+1) { padding-right: 20px; border-right: 1px solid var(--border-primary-color); } } @media screen and (min-width: 1920px) { .values__item:nth-child(2n+1) { padding-right: 30px; border-right: 1px solid var(--border-primary-color); } } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__item:nth-child(2n) { padding-left: 20px; } } @media screen and (min-width: 1920px) { .values__item:nth-child(2n) { padding-left: 30px; } } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__item:nth-child(-n+2) { padding-bottom: 20px; border-bottom: 1px solid var(--border-primary-color); } } @media screen and (min-width: 1920px) { .values__item:nth-child(-n+2) { padding-bottom: 30px; border-bottom: 1px solid var(--border-primary-color); } } @media screen and (min-width: 1440px) and (max-width: 1919px) { .values__item:nth-child(n+3) { padding-top: 20px; } } @media screen and (min-width: 1920px) { .values__item:nth-child(n+3) { padding-top: 30px; } } .values__item-container { display: flex; gap: 8px; align-items: center; } @media screen and (min-width: 1920px) { .values__item-container { gap: 14px; } } .values__icon-container { width: 52px; height: 52px; border-radius: 52px; border: 1px solid var(--icon-second-color); background: #141414; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 1920px) { .values__icon-container { width: 74px; height: 74px; } } .values__icon { fill: var(--icon-primary-color); } @media screen and (min-width: 1920px) { .values__icon { width: 34px; height: 34px; } } .values__icon-text { color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1920px) { .values__icon-text { font-size: 24px; } } .values__text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1920px) { .values__text { font-size: 18px; } } .achievements { max-width: 390px; padding: 40px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements { min-width: 1440px; padding: 60px 80px; } } @media screen and (min-width: 1920px) { .achievements { min-width: 1920px; padding: 75px 162px; } } .achievements__container { margin: auto; } .achievements__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; margin: 0; margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .achievements__name { font-size: 48px; margin-bottom: 14px; } } .achievements__text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__text { font-size: 16px; } } @media screen and (min-width: 1920px) { .achievements__text { font-size: 18px; } } .achievements__list { display: flex; flex-direction: column; margin: 0; gap: 20px; margin-top: 40px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__list { gap: 30px; margin-top: 60px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .achievements__list { gap: 40px; margin-top: 80px; flex-direction: inherit; } } .achievements__item { border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); box-shadow: 0px 0px 0px 4px var(--box-shadow-color); padding: 30px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__item { padding: 50px; width: 406px; box-shadow: 0px 0px 0px 6px var(--box-shadow-color); } } @media screen and (min-width: 1920px) { .achievements__item { padding: 50px; width: 505px; border-radius: 12px; box-shadow: 0px 0px 0px 8px var(--box-shadow-color); } } .achievements__item-name { color: var(--absolute-white); font-weight: 600; line-height: 150%; font-size: 20px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__item-name { font-size: 24px; } } @media screen and (min-width: 1920px) { .achievements__item-name { font-size: 30px; } } .achievements__item-text { color: var(--text-second-color); line-height: 150%; margin-top: 16px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .achievements__item-text { font-size: 16px; margin-top: 24px; } } @media screen and (min-width: 1920px) { .achievements__item-text { font-size: 18px; margin-top: 30px; } } .experience { max-width: 390px; padding: 40px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience { min-width: 1440px; padding: 60px 80px; } } @media screen and (min-width: 1920px) { .experience { min-width: 1920px; padding: 75px 162px; } } .experience__container { margin: auto; } .experience__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; margin: 0; margin-bottom: 6px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .experience__name { font-size: 48px; margin-bottom: 14px; } } .experience__text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__text { font-size: 16px; } } @media screen and (min-width: 1920px) { .experience__text { font-size: 18px; } } .experience__list { display: flex; flex-direction: column; margin: 0; margin-top: 40px; flex-wrap: wrap; gap: 30px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__list { margin-top: 60px; gap: 20px; flex-direction: inherit; } } @media screen and (min-width: 1920px) { .experience__list { margin-top: 80px; gap: 30px; flex-direction: inherit; } } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item { width: 413px; margin-bottom: 40px; display: flex; flex-direction: column; } } @media screen and (min-width: 1920px) { .experience__item { display: flex; flex-direction: column; width: 512px; margin-bottom: 50px; } } .experience__item:nth-child(n+4) { margin-bottom: 0; display: none; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item:nth-child(n+4) { display: flex; } } @media screen and (min-width: 1920px) { .experience__item:nth-child(n+4) { display: flex; } } .experience__item-box { padding: 14px 16px; border-left: 1px solid var(--border-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item-box { width: 413px; padding: 14px 16px; } } @media screen and (min-width: 1920px) { .experience__item-box { width: 512px; padding: 16px 20px; } } .experience__item-title { color: var(--absolute-white); font-size: 16px; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item-title { font-size: 18px; } } @media screen and (min-width: 1920px) { .experience__item-title { font-size: 20px; } } .experience__border { display: flex; flex-grow: 1; background: linear-gradient(135deg, #703bf7 10%, rgba(112, 59, 247, 0) 20%); padding: 1px; } .experience__item-card { padding: 30px; border-radius: 0px 10px 10px 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); background-image: linear-gradient(121deg, #703bf7 -49.01%, rgba(112, 59, 247, 0) 13.65%); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item-card { padding: 40px; } } @media screen and (min-width: 1920px) { .experience__item-card { padding: 50px; border-radius: 0px 12px 12px 12px; } } .experience__item-card:nth-child(3) { align-self: stretch; } .experience__item-name { color: var(--absolute-white); font-size: 18px; font-weight: 600; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item-name { font-size: 20px; } } @media screen and (min-width: 1920px) { .experience__item-name { font-size: 26px; } } .experience__item-text { color: var(--text-second-color); line-height: 150%; margin-top: 14px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .experience__item-text { font-size: 16px; margin-top: 16px; } } @media screen and (min-width: 1920px) { .experience__item-text { font-size: 18px; margin-top: 20px; } } .team { max-width: 390px; padding: 40px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team { min-width: 1440px; padding: 60px 80px; } } @media screen and (min-width: 1920px) { .team { min-width: 1920px; padding: 75px 162px; } } .team__container { margin: auto; } .team__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; margin: 0; margin-bottom: 6px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .team__name { font-size: 48px; margin-bottom: 14px; } } .team__text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__text { font-size: 16px; } } @media screen and (min-width: 1920px) { .team__text { font-size: 18px; } } .team__list { margin: 0; margin-top: 40px; gap: 20px; display: flex; flex-direction: column; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__list { flex-direction: inherit; justify-content: center; gap: 20px; margin-top: 60px; } } @media screen and (min-width: 1920px) { .team__list { flex-direction: inherit; justify-content: center; gap: 30px; margin-top: 80px; } } .team__item { display: flex; flex-direction: column; padding: 20px; border-radius: 12px; border: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__item { padding: 24px; } } @media screen and (min-width: 1920px) { .team__item { padding: 30px; } } .team__img { height: 100%; width: 100%; object-fit: cover; border-radius: 10px; } @media screen and (min-width: 1920px) { .team__img { border-radius: 12px; } } .team__item-name { color: var(--absolute-white); text-align: center; font-size: 18px; font-weight: 600; line-height: 28px; margin-top: 40px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__item-name { font-size: 20px; margin-top: 50px; } } @media screen and (min-width: 1920px) { .team__item-name { font-size: 24px; margin-top: 50px; } } .team__item-job { color: var(--text-second-color); text-align: center; line-height: 24px; margin-top: 2px; margin-bottom: 16px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__item-job { font-size: 16px; margin-bottom: 20px; margin-top: 4px; } } @media screen and (min-width: 1920px) { .team__item-job { font-size: 18px; margin-bottom: 24px; margin-top: 6px; } } .team__item-message { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 24px; border-radius: 100px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); color: var(--absolute-white); line-height: 28px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__item-message { font-size: 16px; padding: 10px 10px 10px 20px; } } @media screen and (min-width: 1920px) { .team__item-message { font-size: 18px; padding: 14px 14px 14px 24px; } } .team__message-btn { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 48px; height: 48px; border-radius: 100px; background-color: var(--btn-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .team__message-btn { width: 36px; height: 36px; } } @media screen and (min-width: 1920px) { .team__message-btn { width: 44px; height: 44px; } } .team__message-icon { width: 20px; height: 20px; fill: var(--absolute-white); } @media screen and (min-width: 1920px) { .team__message-icon { width: 24px; height: 24px; } } .team input { background-color: var(--bg-second-color); border: 1px solid var(--border-third-color); color: var(--absolute-white); } .clients { max-width: 390px; padding: 40px 16px 80px 16px; margin: auto; background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients { min-width: 1440px; padding: 60px 80px 120px 80px; } } @media screen and (min-width: 1920px) { .clients { min-width: 1920px; padding: 75px 162px 150px 162px; } } .clients__container { margin: auto; } .clients__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 150%; margin: 0; margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .clients__name { font-size: 48px; margin-bottom: 14px; } } .clients__text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__text { font-size: 16px; } } @media screen and (min-width: 1920px) { .clients__text { font-size: 18px; } } .clients__swiper { overflow: hidden; } .clients__list { margin: 40px 0 30px 0; display: flex; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__list { margin: 60px 0 40px 0; } } @media screen and (min-width: 1920px) { .clients__list { margin: 80px 0 50px 0; } } .clients__item { width: 358px; padding: 24px; border-radius: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); box-shadow: 0px 0px 0px 6px var(--box-shadow-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__item { min-width: 619px; padding: 40px; border-radius: 12px; box-shadow: 0px 0px 0px 8px var(--box-shadow-color); } } @media screen and (min-width: 1920px) { .clients__item { min-width: 773px; padding: 50px; border-radius: 12px; box-shadow: 0px 0px 0px 8px var(--box-shadow-color); } } .clients__item-title { display: flex; justify-content: space-between; flex-direction: column; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__item-title { flex-direction: inherit; align-items: center; } } @media screen and (min-width: 1920px) { .clients__item-title { flex-direction: inherit; align-items: center; } } .clients__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .clients__title-text { font-size: 18px; } } .clients__title-name { color: var(--absolute-white); font-size: 20px; font-weight: 600; line-height: 150%; margin: 0; margin-top: 2px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__title-name { font-size: 24px; margin-top: 4px; } } @media screen and (min-width: 1920px) { .clients__title-name { font-size: 30px; margin-top: 6px; } } .clients__item-btn { cursor: pointer; padding: 0; width: 309px; height: 49px; border-radius: 10px; border: 1px solid var(--border-primary-color); background: var(--bg-second-color); color: var(--absolute-white); font-family: Urbanist; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); margin-top: 20px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__item-btn { width: 118px; height: 49px; margin-top: 0; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; } } @media screen and (min-width: 1920px) { .clients__item-btn { width: 148px; height: 60px; margin-top: 0; font-family: Urbanist; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; } } .clients__item-btn:hover { background-color: var(--btn-second-color); border: 1px solid var(--border-second-color); } .clients__categories { display: flex; margin: 30px 0; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories { margin: 30px 0; } } @media screen and (min-width: 1920px) { .clients__categories { margin: 40px 0; } } .clients__categories-domain { padding-right: 30px; border-right: 1px solid var(--border-primary-color); } .clients__categories-category { padding-left: 30px; } .clients__categories-title { display: flex; gap: 6px; margin-bottom: 4px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories-title { margin-bottom: 6px; } } @media screen and (min-width: 1920px) { .clients__categories-title { margin-bottom: 8px; } } .clients__categories-kubik { width: 18px; height: 18px; fill: var(--grey-50); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories-kubik { width: 20px; height: 20px; } } @media screen and (min-width: 1920px) { .clients__categories-kubik { width: 24px; height: 24px; } } .clients__categories-lightining { width: 18px; height: 18px; fill: var(--grey-50); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories-lightining { width: 20px; height: 20px; } } @media screen and (min-width: 1920px) { .clients__categories-lightining { width: 24px; height: 24px; } } .clients__categories-title-name { color: var(--text-second-color); font-size: 12px; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories-title-name { font-size: 14px; } } @media screen and (min-width: 1920px) { .clients__categories-title-name { font-size: 18px; } } .clients__categories-title-text { color: var(--absolute-white); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__categories-title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .clients__categories-title-text { font-size: 20px; } } .clients__item-description { padding: 20px; border-radius: 12px; border: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__item-description { padding: 24px; } } @media screen and (min-width: 1920px) { .clients__item-description { padding: 30px; } } .clients__description-name { color: var(--text-second-color); font-weight: 500; line-height: 150%; margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__description-name { font-size: 16px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .clients__description-name { font-size: 18px; margin-bottom: 14px; } } .clients__description-text { color: var(--absolute-white); font-size: 14px; line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__description-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .clients__description-text { font-size: 18px; } } .clients__pagination { padding-top: 20px; justify-content: center; border-top: 1px solid var(--border-primary-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__pagination { display: flex; justify-content: space-between; } } @media screen and (min-width: 1920px) { .clients__pagination { display: flex; justify-content: space-between; } } .clients__pagination-numbers { color: var(--text-second-color); font-size: 14px; line-height: 150%; text-align: center; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__pagination-numbers { font-size: 16px; display: none; } } @media screen and (min-width: 1920px) { .clients__pagination-numbers { font-size: 20px; display: none; } } .clients__pagination-numbers1 { color: var(--text-second-color); font-size: 14px; line-height: 150%; display: none; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__pagination-numbers1 { font-size: 16px; display: inline; } } @media screen and (min-width: 1920px) { .clients__pagination-numbers1 { font-size: 20px; display: inline; } } .clients__btns-container { display: flex; align-items: center; justify-content: space-between; } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__btns-container { gap: 10px; } } @media screen and (min-width: 1920px) { .clients__btns-container { gap: 10px; } } .clients__btn-prev, .clients__btn-next { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 44px; height: 44px; border-radius: 69px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) and (max-width: 1919px) { .clients__btn-prev, .clients__btn-next { width: 44px; height: 44px; } } @media screen and (min-width: 1920px) { .clients__btn-prev, .clients__btn-next { width: 58px; height: 58px; } } .clients__arrow-left { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .clients__arrow-left { width: 30px; height: 30px; } } .clients__arrow-left:hover { fill: var(--absolute-white); } .clients__arrow-right { fill: var(--grey-50); } @media screen and (min-width: 1920px) { .clients__arrow-right { width: 30px; height: 30px; } } .clients__arrow-right:hover { fill: var(--absolute-white); } .properties { max-width: 390px; margin: auto; padding: 50px 16px 40px 16px; background-color: var(--bg-primary-color); background-image: linear-gradient(154.12deg, #262626 -72.542%, rgba(38, 38, 38, 0) 19.002%); } @media screen and (min-width: 1440px) { .properties { padding: 100px 200px 130px 80px; min-width: 1440px; background-image: linear-gradient(90deg, #262626 -28.188%, rgba(38, 38, 38, 0) 39.823%); margin-bottom: 160px; position: relative; border-bottom: 1px solid var(--border-primary-color); } } @media screen and (min-width: 1920px) { .properties { padding: 150px 400px 160px 162px; min-width: 1920px; background-image: linear-gradient(90deg, #262626 -27.695%, rgba(38, 38, 38, 0) 40.055%); margin-bottom: 240px; } } .properties__title { border-bottom: 1px solid var(--border-primary-color); padding-bottom: 50px; } @media screen and (min-width: 1440px) { .properties__title { border-bottom: none; padding-bottom: 0; } } .properties__name { color: var(--absolute-white); font-size: 28px; font-weight: 600; line-height: 120%; margin-bottom: 10px; } @media screen and (min-width: 1440px) { .properties__name { font-size: 38px; margin: 0; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .properties__name { font-size: 48px; margin: 0; margin-bottom: 14px; } } .properties__description { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) { .properties__description { font-size: 16px; } } @media screen and (min-width: 1920px) { .properties__description { font-size: 18px; } } @media screen and (min-width: 1440px) { .properties__container { position: absolute; top: 285px; } } @media screen and (min-width: 1920px) { .properties__container { top: 375px; } } .properties__search { display: flex; gap: 20px; margin-top: 40px; padding: 10px 10px 10px 18px; border-radius: 12px; box-shadow: 0px 0px 0px 4px #191919; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1440px) { .properties__search { border-radius: 12px 12px 0px 0px; padding: 16px 16px 16px 20px; box-shadow: 0px 0px 0px 10px #191919; margin: 0 90px; } } @media screen and (min-width: 1920px) { .properties__search { padding: 20px 20px 20px 24px; margin: 0 148px; gap: 50px; } } .properties__search-input { width: 100%; padding: 0; background-color: var(--bg-primary-color); border: none; font-size: 16px; font-weight: 500; line-height: 150%; } @media screen and (min-width: 1920px) { .properties__search-input { font-size: 24px; } } .properties__search-input:focus { outline: none; border: none; color: var(--input-text-color); padding: 0; } .properties__search-input::placeholder { color: var(--input-text-color); } .properties__search-btn { cursor: pointer; border-radius: 8px; padding: 14px 20px; background-color: var(--btn-primary-color); border: none; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 1440px) { .properties__search-btn { display: flex; align-items: center; gap: 6px; min-width: 148px; } } @media screen and (min-width: 1920px) { .properties__search-btn { min-width: 185px; gap: 8px; padding: 18px 24px; } } .properties__search-btn__search-btn, .properties__search-btn span { display: none; } @media screen and (min-width: 1440px) { .properties__search-btn__search-btn, .properties__search-btn span { display: inline; font-weight: 500; line-height: 150%; color: var(--absolute-white); } } @media screen and (min-width: 1920px) { .properties__search-btn__search-btn, .properties__search-btn span { font-size: 18px; } } .properties__search-btn:hover { background-color: var(--btn-second-color); } @media screen and (min-width: 1920px) { .properties__search-icon { width: 24px; height: 24px; } } .properties__inputs { margin-top: 20px; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 20px; background-color: var(--bg-second-color); } @media screen and (min-width: 1440px) { .properties__inputs { flex-direction: row; margin-top: 0; padding: 10px; } } .properties__inputs-item { display: flex; align-items: center; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-primary-color); background-color: var(--bg-primary-color); } @media screen and (min-width: 1920px) { .properties__inputs-item { padding: 20px; border-radius: 12px; } } .properties__inputs-icon { margin-right: 12px; } @media screen and (min-width: 1440px) { .properties__inputs-icon { margin-right: 10px; } } @media screen and (min-width: 1920px) { .properties__inputs-icon { width: 24px; height: 24px; margin-right: 12px; } } .properties__inputs-input { width: 100%; padding: 0; padding-left: 7.5px; background-color: var(--bg-primary-color); border: none; border-left: 1px solid var(--border-primary-color); font-weight: 500; line-height: 150%; } @media screen and (min-width: 1440px) { .properties__inputs-input { width: 124px; } } @media screen and (min-width: 1920px) { .properties__inputs-input { font-size: 18px; width: 134px; } } .properties__inputs-input:focus { outline: none; border-left: 1px solid var(--border-primary-color); color: var(--input-text-color); padding-left: 7.5px; } .properties__search-input::placeholder { color: var(--input-text-color); } .properties__inputs-btn { cursor: pointer; margin-left: 20px; display: flex; align-items: center; border-radius: 46px; padding: 4px; background-color: var(--btn-third-color); border: none; } @media screen and (min-width: 1920px) { .properties__inputs-btn { margin-left: 50px; } } @media screen and (min-width: 1440px) { .properties__inputs-btn-icon { width: 24px; height: 24px; } } @media screen and (min-width: 1920px) { .properties__inputs-btn-icon { width: 32px; height: 32px; } } .makeit { max-width: 390px; margin: auto; padding: 40px 16px; background-color: var(--bg-primary-color); background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-size: 20px 20px, 12px 12px, 6px 6px; background-position: top 20px left 8px, top 25px left 32px, top 28px left 48px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .makeit { min-width: 1440px; padding: 60px 80px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-repeat: no-repeat; background-position: top 30px left 70px, top 35px left 99px, top 39px left 118px; } } @media screen and (min-width: 1920px) { .makeit { min-width: 1920px; padding: 75px 162px; background-image: url(../images/frame1.svg), url(../images/frame2.svg), url(../images/frame3.svg); background-size: 30px 30px, 18px 18px, 8.4px 8.4px; background-repeat: no-repeat; background-position: top 30px left 142px, top 35px left 178px, top 39px left 202px; } } .makeit__title-name { color: var(--absolute-white); font-size: 20px; font-weight: 600; line-height: 150%; margin-bottom: 8px; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .makeit__title-name { font-size: 38px; margin-bottom: 10px; } } @media screen and (min-width: 1920px) { .makeit__title-name { font-size: 48px; margin-bottom: 14px; } } .makeit__title-text { color: var(--text-second-color); line-height: 150%; } @media screen and (min-width: 1440px) and (max-width: 1920px) { .makeit__title-text { font-size: 16px; } } @media screen and (min-width: 1920px) { .makeit__title-text { font-size: 18px; } } .makeit__inputs { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: 12px; border: 1px solid var(--border-primary-color); } .makeit__inputs form { font-size: 16px; font-weight: 600; line-height: 150%; color: var(--absolute-white); gap: 10px; } .makeit__input-box { display: flex; align-items: center; padding: 16px 20px; border-radius: 6px; margin-top: 10px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } .makeit__inputs-input { width: 100%; padding: 0; background-color: var(--bg-second-color); border: none; font-weight: 500; line-height: 150%; } @media screen and (min-width: 1440px) { .makeit__inputs-input { width: 124px; } } @media screen and (min-width: 1920px) { .makeit__inputs-input { font-size: 18px; width: 134px; } } .makeit__inputs-input:focus { outline: none; color: var(--input-text-color); } .makeit__search-input::placeholder { color: var(--input-text-color); } .makeit__inputs-btn { cursor: pointer; margin-left: 20px; display: flex; align-items: center; border-radius: 46px; padding: 4px; background-color: var(--btn-third-color); border: none; } @media screen and (min-width: 1920px) { .makeit__inputs-btn { margin-left: 50px; } } @media screen and (min-width: 1440px) { .makeit__inputs-btn-icon { width: 24px; height: 24px; } } @media screen and (min-width: 1920px) { .makeit__inputs-btn-icon { width: 32px; height: 32px; } } .makeit__contact-input-box { display: flex; align-items: center; padding: 16px 20px; border-radius: 6px; border: 1px solid var(--border-primary-color); background-color: var(--bg-second-color); } .makeit__contact-input-box:first-child { margin-top: 10px; margin-bottom: 16px; } .makeit__contact-input-icon { margin-right: 7.25px; } .makeit__label-checkbox { display: block; color: #999999; position: relative; cursor: pointer; font-size: 14px; padding-left: 35px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .makeit__label-checkbox a { color: #999999; } .makeit__label-checkbox a:hover { text-decoration: underline; } .makeit__label-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .makeit__checkmark-checkbox { position: absolute; top: 0; left: 0; height: 24px; width: 24px; border: 1px solid #262626; background: #1a1a1a; border-radius: 4px; } .makeit__label-checkbox:hover input ~ .makeit__checkmark-checkbox { border: 1px solid var(--border-second-color); } .makeit__label-checkbox input:checked ~ .makeit__checkmark-checkbox { background: #1a1a1a; } .makeit__checkmark-checkbox:after { content: ""; position: absolute; display: none; } .makeit__label-checkbox input:checked ~ .makeit__checkmark-checkbox:after { display: block; } .makeit__label-checkbox .makeit__checkmark-checkbox:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .makeit__search-btn { cursor: pointer; border-radius: 6px; padding: 14px 34px; background-color: var(--btn-primary-color); border: none; font-weight: 500; line-height: 24px; color: var(--absolute-white); transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .makeit__search-btn:hover { background-color: var(--btn-second-color); }