.footer { max-width: 1400px; margin: 0 auto; margin-top: 96px; padding: 56px 0; background-color: #40404c; border-radius: 24px; } .footer__socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; } .footer__menu { display: grid; grid-template-columns: repeat(3, 1fr); } .footer__menu-subcolumn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .footer__menu-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .footer__menu-column-title { font-size: 20px; font-weight: 700; line-height: 120%; color: #fff; } .footer__menu-column-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .footer__menu-column-list li a, .footer__menu-column-list li { font-size: 18px; font-weight: 500; line-height: 145%; color: #b3b3bf; -webkit-transition: color 200ms ease; transition: color 200ms ease; } .footer__menu-column-list li a:hover { color: #f1f1f1; -webkit-transition: color 200ms ease; transition: color 200ms ease; } .footer__copyright { margin-top: 40px; font-size: 18px; font-weight: 500; line-height: 145%; color: #fff; text-align: center; display: block; } @media (max-width: 1024px) { .footer { margin-top: 72px; } .footer__menu { grid-template-columns: repeat(2, 1fr); } .footer__menu > :first-child { grid-column: span 2; } .footer__menu-column--double { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; } } @media (max-width: 768px) { .footer { margin-top: 64px; margin-left: 16px; margin-right: 16px; } .footer__menu { grid-template-columns: 1fr; gap: 16px; } .footer__menu > :first-child { grid-column: span 1; } .footer__menu-column--double { grid-template-columns: repeat(1, 1fr); } } .header-bar { background-color: rgba(249, 249, 252, 0.8); padding: 16px 26px; border-radius: 500px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 1400px; margin: 0 auto; margin-top: 4px; border: 1px solid #ededf9; backdrop-filter: blur(16px); -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); height: 78px; } .header-bar__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .header-bar__phone { font-size: 18px; font-weight: 600; line-height: 100%; letter-spacing: 2%; } p.header-bar__phone { margin: 0; } .header-bar__phone-label { font-size: 11px; font-weight: 400; text-transform: uppercase; } .header-bar__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .header-bar__menu-item a { font-size: 16px; font-weight: 500; line-height: 140%; color: #212121; text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; display: flex; align-items: center; } .header-bar__menu > li.menu-item:nth-of-type(1) > a::after, .header-bar__menu > li.menu-item:nth-of-type(2) > a::after, .header-bar__menu > li.menu-item:nth-of-type(3) > a::after { content: ''; width: 16px; height: 16px; margin-left: 8px; flex: none; flex-grow: 0; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; flex-shrink: 0; } .header-bar__menu > li.menu-item:nth-of-type(1).popup-open > a::after, .header-bar__menu > li.menu-item:nth-of-type(2).popup-open > a::after, .header-bar__menu > li.menu-item:nth-of-type(3).popup-open > a::after { background-image: url('data:image/svg+xml;utf8,'); } .header-bar__menu-item a:hover { color: rgba(26, 26, 64, 0.6); -webkit-transition: color 0.3s; transition: color 0.3s; } .header-bar__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .header-bar__right-profile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; border: 1.5px solid #212121; padding: 4px; } .header-bar__lng { position: relative; } .header-bar__lng-btn { background: none; border: none; font-size: 18px; font-weight: 500; line-height: 100%; cursor: pointer; color: #212121; } .header-bar__burger { width: 36px; height: 36px; border: 1px solid #212121; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: none; display: none; cursor: pointer; } @media (max-width: 1024px) { .header-bar { margin-bottom: 12px; } .header-bar__menu { display: none; } .header-bar__burger { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (max-width: 768px) { .header-bar__lng { display: none; } /* .header-bar__right-profile { display: none; } */ } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: black; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Black.eot"); src: local("Fixel Display Black"), local("FixelDisplay-Black"), url("../fonts/FixelDisplay-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Black.woff2") format("woff2"), url("../fonts/FixelDisplay-Black.woff") format("woff"), url("../fonts/FixelDisplay-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Bold.eot"); src: local("Fixel Display Bold"), local("FixelDisplay-Bold"), url("../fonts/FixelDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Bold.woff2") format("woff2"), url("../fonts/FixelDisplay-Bold.woff") format("woff"), url("../fonts/FixelDisplay-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Thin.eot"); src: local("Fixel Display Thin"), local("FixelDisplay-Thin"), url("../fonts/FixelDisplay-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Thin.woff2") format("woff2"), url("../fonts/FixelDisplay-Thin.woff") format("woff"), url("../fonts/FixelDisplay-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display Extra"; src: url("../fonts/FixelDisplay-ExtraBold.eot"); src: local("Fixel Display Extra Bold"), local("FixelDisplay-ExtraBold"), url("../fonts/FixelDisplay-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-ExtraBold.woff2") format("woff2"), url("../fonts/FixelDisplay-ExtraBold.woff") format("woff"), url("../fonts/FixelDisplay-ExtraBold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display Semi"; src: url("../fonts/FixelDisplay-SemiBold.eot"); src: local("Fixel Display Semi Bold"), local("FixelDisplay-SemiBold"), url("../fonts/FixelDisplay-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-SemiBold.woff2") format("woff2"), url("../fonts/FixelDisplay-SemiBold.woff") format("woff"), url("../fonts/FixelDisplay-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Medium.eot"); src: local("Fixel Display Medium"), local("FixelDisplay-Medium"), url("../fonts/FixelDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Medium.woff2") format("woff2"), url("../fonts/FixelDisplay-Medium.woff") format("woff"), url("../fonts/FixelDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display Extra"; src: url("../fonts/FixelDisplay-ExtraLight.eot"); src: local("Fixel Display Extra Light"), local("FixelDisplay-ExtraLight"), url("../fonts/FixelDisplay-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-ExtraLight.woff2") format("woff2"), url("../fonts/FixelDisplay-ExtraLight.woff") format("woff"), url("../fonts/FixelDisplay-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Regular.eot"); src: local("Fixel Display Regular"), local("FixelDisplay-Regular"), url("../fonts/FixelDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Regular.woff2") format("woff2"), url("../fonts/FixelDisplay-Regular.woff") format("woff"), url("../fonts/FixelDisplay-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Light.eot"); src: local("Fixel Display Light"), local("FixelDisplay-Light"), url("../fonts/FixelDisplay-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/FixelDisplay-Light.woff2") format("woff2"), url("../fonts/FixelDisplay-Light.woff") format("woff"), url("../fonts/FixelDisplay-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } body { background-color: #fff; overflow-x: hidden; color: #212121; } .container-new-main-page { width: 100%; max-width: 1280px; margin: 0 auto; height: 100%; } @media (max-width: 1280px) { .container-new-main-page { padding-left: 24px; padding-right: 24px; } } @media (max-width: 768px) { .container-new-main-page { padding-left: 20px; padding-right: 20px; } } .primary-btn { background-color: #212121; color: #ededf9; border: 1px solid #212121; border-radius: 40px; padding: 19px 42px; font-size: 18px; font-weight: 500; line-height: 140%; cursor: pointer; text-align: center; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); -webkit-transition: all 0.3s; transition: all 0.3s; } .primary-btn:hover { background-color: #fff; color: #212121; border: 1px solid #212121; -webkit-transition: all 0.3s; transition: all 0.3s; } .outlined-btn { -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); padding: 16px 42px; font-size: 18px; font-weight: 500; line-height: 140%; cursor: pointer; text-align: center; border: 1px solid #212121; background-color: #fff; color: #212121; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 40px; -webkit-transition: all 0.3s; transition: all 0.3s; } .outlined-btn:hover { background-color: #212121; color: #fff; border: 1px solid #212121; -webkit-transition: all 0.3s; transition: all 0.3s; } .secondary-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 18px; font-weight: 500; line-height: 140%; cursor: pointer; text-align: center; color: #8d59ff; -webkit-transition: color 0.3s; transition: color 0.3s; margin-left: -12px; } .secondary-btn:hover { color: rgba(141, 89, 255, 0.6980392157); -webkit-transition: color 0.3s; transition: color 0.3s; } .section-title { font-size: 40px; font-weight: 700; text-align: center; line-height: 120%; letter-spacing: -1px; } .slider-btn { width: 32px; height: 32px; border-radius: 999px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: none; background-color: #fff; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); color: #212121; cursor: pointer; } .swiper-button-disabled { color: #797979; } .slider-btn:disabled { color: #797979; } .swiper-pagination-bullet-active { background-color: #212121; } @media (max-width: 768px) { .section-title { font-size: 28px; } } .hero { margin-top: 62px; padding-bottom: 90px; overflow: hidden; } .hero__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 58px; } .hero__content { flex: 1 1 60%; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .hero__title { font-size: 72px; font-weight: 700; line-height: 120%; letter-spacing: -1px; overflow-wrap: break-word; word-break: break-word; } .hero__subtitle { font-size: 24px; line-height: 140%; letter-spacing: -1px; } .hero__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } .hero__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-self: flex-start; flex-shrink: 1; min-width: 0; padding-right: 24px; } .hero__badge { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; border: 1px solid #ededf9; border-radius: 16px; padding: 16px; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; min-height: 168px; width: 100%; min-width: 0; overflow: hidden; } .hero__badge:hover { -webkit-transform: translateX(10px); transform: translateX(10px); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .hero__badge:first-child { -webkit-transform: translateX(24px); transform: translateX(24px); } .hero__badge:first-child:hover { -webkit-transform: translateX(34px); transform: translateX(34px); } .hero__badge:nth-child(2) { -webkit-transform: translateX(24px); transform: translateX(24px); } .hero__badge:nth-child(2):hover { -webkit-transform: translateX(34px); transform: translateX(34px); } .hero__badge:last-child, .hero__badge:nth-child(3) { margin-right: 0; } .hero__badge--purple { background-color: rgba(226, 198, 255, 0.8); } .hero__badge--yellow { background-color: rgba(241, 238, 131, 0.8); } .hero__badge--green { background-color: rgba(220, 254, 188, 0.8); } .hero__badge--blue { background-color: rgba(187, 236, 255, 0.8); } .hero__badge-label { width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -ms-flex-negative: 1; flex-shrink: 1; background-color: #212121; min-width: 40px; min-height: 40px; } .hero__badge-label span { color: #fff; font-size: 24px; font-weight: 600; } .hero__badge-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; min-width: 0; overflow: hidden; flex: 1; } .hero__badge-content p { font-size: 20px; font-weight: 700; line-height: 120%; word-wrap: break-word; overflow-wrap: break-word; } .hero__badge-content span { font-size: 14px; line-height: 120%; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero__images { margin-top: 106px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 36px; width: 100%; } .hero__image { --rot: 0deg; --tx: 0px; --ty: 0px; height: 389px; width: 286px; max-width: 286px; min-width: 0; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; border-radius: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); -webkit-transition: -webkit-transform 600ms ease; transition: -webkit-transform 600ms ease; transition: transform 600ms ease; transition: transform 600ms ease, -webkit-transform 600ms ease; will-change: transform; } .hero__image-desc { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: auto; } .hero__image-desc p { font-size: 20px; font-weight: 700; line-height: 120%; color: #ffffff; } .hero__image-desc p::after { content: ""; display: block; width: 100%; height: 1.5px; background-color: rgba(255, 255, 255, 0.6); margin-top: 6px; } .hero__image-desc span { font-size: 14px; line-height: 120%; color: rgba(255, 255, 255, 0.8); } .hero__image--one { --rot: 0deg; } .hero__image--two { --rot: 9deg; } .hero__image--three { --rot: -2deg; } .hero__image--four { --rot: 11deg; } @media (max-width: 1280px) { .hero__badges { grid-template-columns: repeat(2, 1fr); gap: 20px; column-gap: 20px; padding-right: 0; } .hero__badge { height: 166px !important; min-height: 166px !important; width: 100% !important; min-width: 0 !important; margin: 0; } .hero__badge:first-child, .hero__badge:first-child:hover { -webkit-transform: none; transform: none; } .hero__badge:nth-child(2), .hero__badge:nth-child(2):hover { -webkit-transform: none; transform: none; } .hero__badge:last-child, .hero__badge:nth-child(3) { margin-right: 0; } } @media (min-width: 769px) and (max-width: 1280px) { .hero__images { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; gap: 20px; } .hero__image { height: 389px; --rot: 0deg; --tx: 0px; --ty: 0px; } } @media (max-width: 1024px) { .hero { padding-bottom: 72px; } .hero__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 64px; } .hero__title { font-size: 64px; } .hero__badges { grid-template-columns: repeat(2, 1fr); gap: 20px; } .hero__badge { height: 166px !important; min-height: 166px !important; width: 100% !important; min-width: 0 !important; margin: 0; } } @media (max-width: 768px) { .hero__title { font-size: 40px; } .hero__subtitle { font-size: 20px; } .hero__btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 24px; } .hero__badges { grid-template-columns: 1fr; gap: 16px; min-width: 35%; justify-items: center; } .hero__badge { min-height: 98px !important; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 32px; height: 98px !important; width: 350px !important; max-width: 100%; min-width: 0 !important; } .hero__badge:first-child, .hero__badge:first-child:hover { -webkit-transform: none !important; transform: none !important; } .hero__badge:nth-child(2), .hero__badge:nth-child(2):hover { -webkit-transform: none !important; transform: none !important; } .hero__badge:last-child, .hero__badge:nth-child(3) { margin-right: 0 !important; } .hero__images { position: relative; width: 100%; height: 389px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero__image:first-child { position: relative; left: auto; top: 0; width: 100%; max-width: 350px; height: 389px; --rot: 0deg; --tx: 0px; --ty: 0px; } .hero__image:not(:first-child) { display: none; } } .professions { max-width: 1400px; margin: 0 auto; padding: 60px 0; background-color: #f8f8fb; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); border-radius: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; } .professions__filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; margin-top: 32px; background-color: #fff; padding: 8px; border-radius: 40px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); justify-self: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; margin-top: 24px; } .professions__filter-item { font-size: 18px; font-weight: 500; line-height: 145%; background-color: #f2f2f2; color: #797979; padding: 12px 20px; border-radius: 40px; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; border: none; } .professions__filter-item:hover { color: #212121; -webkit-transition: all 0.3s; transition: all 0.3s; } .professions__filter-item.active { background-color: #212121; color: #fff; border: 1px solid #212121; -webkit-transition: all 0.3s; transition: all 0.3s; } .professions__filter-link { gap: 8px; padding: 12px 20px; white-space: nowrap; } .professions__list { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .professions__item { height: 420px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); border-radius: 24px; padding: 24px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .professions__item-badges { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } .professions__item-badge { font-size: 14px; font-weight: 500; line-height: 120%; color: #fff; background-color: #212121; padding: 8px; border-radius: 40px; } .professions__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; margin-top: 48px; } .professions__item-title { font-size: 24px; font-weight: 800; line-height: 120%; } .professions__item-label { font-size: 16px; font-weight: 700; line-height: 120%; color: #fff; padding: 4px; border-radius: 4px; background-color: #8d59ff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .professions__item-desc { font-size: 18px; line-height: 145%; margin-top: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .professions__item-sale { position: absolute; top: 24px; right: 24px; width: 114px; height: 68px; } .professions__item-sale--popular { background: url("../assets/images/popular-badge.svg") no-repeat center; } .professions__item-sale--top-choice { background: url("../assets/images/top-choice-badge.svg") no-repeat center; } .professions__item-sale--new { background: url("../assets/images/new-badge.svg") no-repeat center; } .professions__item-sale--hit { background: url("../assets/images/hit-badge.svg") no-repeat center; } @media (max-width: 1280px) { .professions__list { grid-template-columns: repeat(2, 1fr); } .professions__item-badges { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .professions__item-badge { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (max-width: 1024px) { .professions { overflow-x: hidden; } .professions__filter-list { overflow-x: scroll; width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (max-width: 768px) { .professions { padding: 40px 0px; } .professions__list { grid-template-columns: 1fr; gap: 20px; } .professions__item { height: auto; min-height: 420px; } .professions__item-badges { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .professions__item-title { font-size: 22px; } .professions__item-badge { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .ed-format { padding-top: 93px; padding-bottom: 96px; } .ed-format__content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; } .ed-format__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .ed-format__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; background-color: #f8f8fb; border-radius: 24px; padding: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); } .ed-format__item-icon { width: 88px; height: 88px; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); } .ed-format__item-icon--purple { background-color: rgba(226, 198, 255, 0.8); } .ed-format__item-icon--green { background-color: rgba(220, 254, 188, 0.8); } .ed-format__item-icon--blue { background-color: rgba(187, 236, 255, 0.8); } .ed-format__item-title { font-size: 24px; font-weight: 800; line-height: 120%; margin-bottom: 8px; } .ed-format__item-desc { font-size: 18px; line-height: 145%; font-weight: 500; } .ed-format__image { width: 100%; border-radius: 32px; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .ed-format__image-badge { position: absolute; bottom: 24px; left: 24px; background-color: rgba(220, 254, 188, 0.8); border-radius: 16px; padding: 12px 16px; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .ed-format__image-badge-label { width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #212121; border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0; } .ed-format__image-badge-label span { color: #fff; font-size: 24px; font-weight: 600; } .ed-format__image-badge-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 134px; } .ed-format__image-badge-content p { font-size: 20px; font-weight: 700; line-height: 120%; } .ed-format__image-badge-content span { font-size: 14px; line-height: 120%; text-align: center; } @media (max-width: 1024px) { .ed-format { padding-top: 72px; padding-bottom: 72px; } .ed-format__content { grid-template-columns: 1fr; } .ed-format__image { height: 546px; } .ed-format__image-badge { height: 114px; width: 193px; } } @media (max-width: 768px) { .ed-format { padding-top: 64px; padding-bottom: 64px; } .ed-format__image { height: 410px; } .ed-format__content { margin-top: 24px; } .ed-format__item { padding: 16px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .ed-format__item-title { font-size: 22px; } } .cta-new{ padding-top: 60px; padding-bottom: 60px; padding-left: 24px; padding-right: 24px; background-color: #8d59ff; max-width: 1400px; margin: 0 auto; border-radius: 24px; border: 1px solid #ededf9; backdrop-filter: blur(30px); -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); color: #ededf9; background-image: url("../assets/images/dec-patern.svg"); background-repeat: no-repeat; background-position: 120% 51%; } .cta__wrapper { display: grid; grid-template-columns: 70% 30%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cta__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; align-items: flex-start; } .cta__content h2 { font-size: 40px; font-weight: 700; line-height: 120%; text-align: left; } .cta__subtitle { font-size: 24px; font-weight: 800; line-height: 120%; } .cta__desc { font-size: 24px; font-weight: 400; line-height: 140%; } @media (max-width: 1280px) { .cta-new{ background-position: 185% 0%; } .cta__wrapper { grid-template-columns: 1fr; gap: 40px; } .cta__wrapper .primary-btn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media (min-width: 769px) and (max-width: 1024px) { .cta-new { position: relative; overflow: hidden; background-image: none; } .cta-new::before { content: ""; position: absolute; width: 500px; height: 520px; right: -280px; bottom: -80px; background: url(../assets/images/dec-patern.svg) no-repeat; /* background-size: contain; */ transform: rotate(20deg); z-index: 0; pointer-events: none; } .cta-new .cta__wrapper { position: relative; z-index: 1; } } @media (max-width: 768px) { .cta-new { position: relative; overflow: hidden; background-position: 240px 70px; } .cta-new::before { content: ""; position: absolute; width: 500px; height: 520px; right: -340px; bottom: -80px; background: url(../assets/images/dec-patern.svg) no-repeat; /* background-size: contain; */ transform: rotate(20deg); z-index: 0; pointer-events: none; } .cta-new .cta__wrapper { position: relative; z-index: 1; } .cta__subtitle, .cta__desc { font-size: 20px; } .cta__content h2 { font-size: 28px; } .cta__wrapper .primary-btn { width: 100%; } } .projects { max-width: 1400px; margin: 0 auto; margin-top: 96px; padding: 60px 0; background-color: #f8f8fb; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); padding-left: 24px; padding-right: 24px; } .projects .swiper { width: 100%; height: 100%; background-color: #f8f8fb; border: 1px solid #ededf9; border-radius: 24px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); padding: 10px 0; margin-top: 32px; padding-bottom: 100px; } .projects .swiper-slide { height: 446px; border-top-left-radius: 24px; border-top-right-radius: 24px; text-decoration: none; color: inherit; display: block; position: relative; } .projects .swiper-slide__plate { background-color: #fff; border-radius: 24px; padding: 16px 24px; border: 1px solid #e0e0f5; position: absolute; left: 0; bottom: -55px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 48px; min-height: 110px; box-sizing: border-box; } .projects .swiper-slide__plate-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 4px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .projects .swiper-slide__plate-arrow { -ms-flex-negative: 0; flex-shrink: 0; margin-top: 14px; } .projects .swiper-slide__plate span { font-size: 20px; font-weight: 500; line-height: 120%; color: #797979; } .projects .swiper-slide__plate span::before { content: url("../assets/images/info-circle.svg"); width: 18px; height: 18px; vertical-align: baseline; margin-right: 8px; } .projects .swiper-slide__plate p { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 120%; } .projects .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-top-left-radius: 24px; border-top-right-radius: 24px; } .projects .swiper-slide { width: 60%; } .projects .swiper-slide:nth-child(2n) { width: 60%; } /* .projects .swiper-slide:nth-child(3n) { width: 40%; } */ .swiper-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 32px; gap: 24px; } .swiper-pagination { position: static; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; } @media (max-width: 1024px) { .projects { margin-top: 72px; padding: 40px 24px; } .projects .swiper-slide { width: 100%; } .projects .swiper-slide:nth-child(2n) { width: 100%; } .projects .swiper-slide:nth-child(3n) { width: 100%; } } .contacts { margin-top: 60px; padding-bottom: 122px; } .contacts__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contacts__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; width: 50%; } .contacts__content h1 { font-size: 72px; font-weight: 700; line-height: 120%; } .contacts__content p { font-size: 24px; line-height: 140%; } .contacts__content h4 { font-size: 24px; font-weight: 800; line-height: 120%; margin-bottom: 16px; } .contacts__socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; } .contacts__form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 50px; background-color: #8d59ff; border-radius: 24px; gap: 24px; width: 50%; } .contacts__form p { font-size: 20px; line-height: 120%; font-weight: 700; color: #fff; } .contacts__form form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .contacts__form form button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .contacts__form form input { padding: 20px 30px; border-radius: 12px; outline: none; border: 1.5px solid #ededf9; font-size: 18px; line-height: 145%; font-weight: 500; color: #d6d6d6; background-color: rgba(248, 248, 251, 0.2); } .contacts__form form input::-webkit-input-placeholder { color: #d6d6d6; } .contacts__form form input::-moz-placeholder { color: #d6d6d6; } .contacts__form form input:-ms-input-placeholder { color: #d6d6d6; } .contacts__form form input::-ms-input-placeholder { color: #d6d6d6; } .contacts__form form input::placeholder { color: #d6d6d6; } .contacts__form form span { font-size: 14px; line-height: 120%; font-weight: 500; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .contacts__form form span::before { content: url("../images/contacts/check-icon.svg"); width: 22px; height: 22px; display: inline-block; margin-right: 8px; } .contacts__form form span a { color: #ffffff; text-decoration: underline; } .location { padding-top: 60px; padding-bottom: 60px; max-width: 1400px; margin: 0 auto; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); background-color: #f8f8fb; } .location__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; margin-top: 32px; } .location__contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; width: 50%; } .location__contact { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px; gap: 16px; border-radius: 24px; background-color: #f8f8fb; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); } .location__image { width: 64px; height: 64px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #b4b4c5; -ms-flex-negative: 0; flex-shrink: 0; } .location__image--blue { background-color: rgba(187, 236, 255, 0.8); } .location__image--purple { background-color: rgba(226, 198, 255, 0.8); } .location__image--yellow { background-color: rgba(241, 238, 131, 0.8); } .location__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .location__info h4 { font-size: 24px; font-weight: 800; line-height: 120%; } .location__info p { font-size: 18px; line-height: 135%; font-weight: 700; } .location__info span { font-size: 18px; line-height: 135%; font-weight: 500; } .location__details { font-size: 18px; line-height: 145%; font-weight: 700; } .location__details::before { width: 22px; height: 22px; display: inline-block; margin-right: 8px; } .location__details--phone::before { content: url("../images/contacts/phone.svg"); } .location__details--email::before { content: url("../images/contacts/email.svg"); } .map__wrapper { width: 624px; height: 630px; width: 50%; max-width: 100%; } .info__map { width: 100%; height: 100%; border: 1px solid #f8f8fb; border-radius: 48px; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); } @media (max-width: 1024px) { .contacts__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .contacts__content { width: 100%; } .contacts__content h1 { font-size: 64px; } .contacts__form { width: 100%; } .location__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .location__contacts { width: 100%; } .map__wrapper { width: 100%; height: 400px; } } @media (max-width: 768px) { .contacts__content h1 { font-size: 40px; } .contacts__content p, .contacts__content h4 { font-size: 20px; } .contacts__form { padding: 16px; } .location__contact { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 16px; } .location__info h4 { font-size: 22px; } } .contacts { margin-top: 60px; padding-bottom: 122px; } .contacts__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contacts__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; width: 50%; } .contacts__content h1 { font-size: 72px; font-weight: 700; line-height: 120%; } .contacts__content p { font-size: 24px; line-height: 140%; } .contacts__content h4 { font-size: 24px; font-weight: 800; line-height: 120%; margin-bottom: 16px; } .contacts__socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; } .contacts__form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 50px; background-color: #8d59ff; border-radius: 24px; gap: 24px; width: 50%; } .contacts__form p { font-size: 20px; line-height: 120%; font-weight: 700; color: #fff; } .contacts__form form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .contacts__form form button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .contacts__form form input { padding: 20px 30px; border-radius: 12px; outline: none; border: 1.5px solid #ededf9; font-size: 18px; line-height: 145%; font-weight: 500; color: #d6d6d6; background-color: rgba(248, 248, 251, 0.2); } .contacts__form form input::-webkit-input-placeholder { color: #d6d6d6; } .contacts__form form input::-moz-placeholder { color: #d6d6d6; } .contacts__form form input:-ms-input-placeholder { color: #d6d6d6; } .contacts__form form input::-ms-input-placeholder { color: #d6d6d6; } .contacts__form form input::placeholder { color: #d6d6d6; } .contacts__form form span { font-size: 14px; line-height: 120%; font-weight: 500; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .contacts__form form span::before { content: url("../images/contacts/check-icon.svg"); width: 22px; height: 22px; display: inline-block; margin-right: 8px; } .contacts__form form span a { color: #ffffff; text-decoration: underline; } .location { padding-top: 60px; padding-bottom: 60px; max-width: 1400px; margin: 0 auto; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); background-color: #f8f8fb; } .location__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; margin-top: 32px; } .location__contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; width: 50%; } .location__contact { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px; gap: 16px; border-radius: 24px; background-color: #f8f8fb; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); } .location__image { width: 64px; height: 64px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #b4b4c5; -ms-flex-negative: 0; flex-shrink: 0; } .location__image--blue { background-color: rgba(187, 236, 255, 0.8); } .location__image--purple { background-color: rgba(226, 198, 255, 0.8); } .location__image--yellow { background-color: rgba(241, 238, 131, 0.8); } .location__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .location__info h4 { font-size: 24px; font-weight: 800; line-height: 120%; } .location__info p { font-size: 18px; line-height: 135%; font-weight: 700; } .location__info span { font-size: 18px; line-height: 135%; font-weight: 500; } .location__details { font-size: 18px; line-height: 145%; font-weight: 700; } .location__details::before { width: 22px; height: 22px; display: inline-block; margin-right: 8px; } .location__details--phone::before { content: url("../images/contacts/phone.svg"); } .location__details--email::before { content: url("../images/contacts/email.svg"); } .map__wrapper { width: 624px; height: 630px; width: 50%; max-width: 100%; } .info__map { width: 100%; height: 100%; border: 1px solid #f8f8fb; border-radius: 48px; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); } @media (max-width: 1024px) { .contacts__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .contacts__content { width: 100%; } .contacts__content h1 { font-size: 64px; } .contacts__form { width: 100%; } .location__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .location__contacts { width: 100%; } .map__wrapper { width: 100%; height: 400px; } } @media (max-width: 768px) { .contacts__content h1 { font-size: 40px; } .contacts__content p, .contacts__content h4 { font-size: 20px; } .contacts__form { padding: 16px; } .location__contact { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 16px; } .location__info h4 { font-size: 22px; } } .about { max-width: 1400px; margin: 0 auto; margin-top: 96px; background-color: #f8f8fb; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); padding: 40px 16px; } .about-card { margin-top: 32px; background: #f8f8fb; border-radius: 16px; border: 1px solid #ededf9; padding: 40px 120px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about-card__text { position: relative; /* smooth expand/collapse */ overflow: hidden; -webkit-transition: max-height 300ms ease; transition: max-height 300ms ease; will-change: max-height; /* typography */ font-size: 18px; line-height: 145%; font-weight: 500; } .about-card__text p + p { margin-top: 8px; } /* collapsed state */ .about-card__text.is-collapsed { max-height: 100px; /* adjust to match your design */ } /* fade overlay like in screenshot */ .about-card__text.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgb(255, 255, 255))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255)); } .about-card__toggle { margin: 18px auto 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; color: #7c3aed; /* purple like your UI */ font-weight: 700; font-size: 18px; text-align: center; -webkit-transition: color 200ms ease; transition: color 200ms ease; } .about-card__toggle:hover { color: rgba(141, 89, 255, 0.6980392157); -webkit-transition: color 200ms ease; transition: color 200ms ease; } .about-card__icon { -webkit-transition: -webkit-transform 200ms ease; transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease; } /* rotate arrow when expanded */ .about-card__toggle.is-open .about-card__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (max-width: 1024px) { .about { margin-top: 72px; padding: 40px 0px; } .about-card { padding: 40px 16px; } } @media (max-width: 768px) { .about { margin-left: 16px; margin-right: 16px; } } .companies { margin: 0 auto; margin-top: 96px; padding: 60px 0; max-width: 1400px; background-color: #f8f8fb; border: 1px solid #ededf9; border-radius: 24px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); padding-left: 24px; padding-right: 24px; } .companies__wrapper { margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 26px; background-color: #fff; border-radius: 16px; padding: 48px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); } @media (max-width: 768px) { .companies__wrapper { padding: 48px 24px; } } .companies__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 94px; overflow: hidden; } .companies__item { max-height: 56px; } .companies__item img { max-height: 56px; max-width: 160px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 1024px) { .companies { margin-top: 72px; padding: 40px 0; } } .events { margin-top: 96px; } .events-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); } .events-wrapper img { width: 100%; border-top-left-radius: 24px; border-bottom-left-radius: 24px; height: 100%; -o-object-fit: cover; object-fit: cover; } .events-wrapper { margin-top: 32px; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); } .events-wrapper__content { padding: 24px; padding-left: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .events-wrapper__content h4 { font-size: 24px; font-weight: 800; line-height: 120%; } .events-wrapper__content p { font-size: 18px; font-weight: 500; line-height: 140%; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-clamp: 2; } .events-wrapper__content .primary-btn { margin-top: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .events-wrapper__badges { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin-bottom: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .events-wrapper__badge { display: inline-block; padding: 8px 16px; border-radius: 80px; border: 1px solid #ededf9; font-size: 14px; font-weight: 500; line-height: 120%; } .events-wrapper__badge--purple { background-color: rgba(226, 198, 255, 0.8); } .events-wrapper__badge--green { background-color: rgba(220, 254, 188, 0.8); } .events-wrapper__badge--blue { background-color: rgba(187, 236, 255, 0.8); } @media (max-width: 1024px) { .events { margin-top: 72px; } } @media (max-width: 768px) { .events-wrapper { grid-template-columns: 1fr; } .events-wrapper img { border-bottom-left-radius: 0; border-top-right-radius: 24px; } .events-wrapper__content { padding: 8px; } .events-wrapper__content h4 { font-size: 22px; } .events-wrapper__content .primary-btn { margin-top: 24px; } } #faq { margin-top: 96px; } .faq-content__list { border-radius: 24px; padding: 40px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); background-color: #f8f8fb; border: 1px solid #ededf9; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .faq-content__item { border-radius: 8px; padding: 20px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; cursor: pointer; } .faq-content__item:hover .faq-content__item-header p { color: #8d59ff; } .faq-content__item:hover .faq-content__item-header-icon { background-color: #8d59ff; } .faq-content__item:hover .faq-content__item-header::after { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .faq-content__item-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 16px; position: relative; width: 100%; padding-right: 56px; } .faq-content__item-header p { margin: 0; color: #212121; font-size: 24px; font-weight: 400; -webkit-transition: color 0.7s ease; transition: color 0.7s ease; } .faq-content__item-header::after { content: ""; position: absolute; top: 50%; right: 24px; width: 24px; height: 24px; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); background-color: #212121; mask: url("../assets/images/arrow-down.svg") no-repeat center; -webkit-mask: url("../assets/images/arrow-down.svg") no-repeat center; -webkit-transition: -webkit-transform 0.7s ease; transition: -webkit-transform 0.7s ease; transition: transform 0.7s ease; transition: transform 0.7s ease, -webkit-transform 0.7s ease; mask-size: contain; -webkit-mask-size: contain; } .faq-content__item.active { background-color: #fff; } .faq-content__item.active .faq-content__item-header p { color: #8d59ff; } .faq-content__item.active .faq-content__item-header::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .faq-content__item-header-icon { width: 40px; height: 40px; background-color: #212121; mask: url("../assets/images/question_answer.svg") no-repeat center; -webkit-mask: url("../assets/images/question_answer.svg") no-repeat center; -webkit-transition: background-color 0.7s ease; transition: background-color 0.7s ease; mask-size: contain; -webkit-mask-size: contain; -webkit-flex-shrink: 0; flex-shrink: 0; min-width: 40px; min-height: 40px; } .faq-content__item.active .faq-content__item-header-icon { background-color: #8d59ff; } .faq-content__item-body { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.7s ease, opacity 0.7s ease; transition: max-height 0.7s ease, opacity 0.7s ease; opacity: 0; margin-left: 60px; margin-top: 16px; } .faq-content__item-body p { font-size: 18px; font-weight: 500; opacity: 0.7; line-height: 133%; } .faq-content__item.active .faq-content__item-body { max-height: 300px; opacity: 1; } @media (max-width: 1024px) { #faq { margin-top: 72px; } .faq-content__list { padding: 40px 16px; } } .news { max-width: 1400px; margin: 0 auto; margin-top: 96px; padding: 60px 0; background-color: #f8f8fb; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); padding-left: 24px; padding-right: 24px; } .news__swiper-wrap { overflow: hidden; padding: 20px; margin: -20px; } .news .newsSlider { overflow: visible !important; } .news .swiper-wrapper { padding-top: 32px; padding-bottom: 32px; } .news .swiper-slide { background-color: #fff; border: 1px solid #ededf9; border-radius: 16px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); position: relative; width: auto; height: 373px; min-height: 373px; } .news .swiper-slide__label { position: absolute; top: 16px; right: 16px; background-color: #f2f2f2; display: inline-block; padding: 6px 12px; border-radius: 80px; font-size: 14px; font-weight: 500; line-height: 120%; } .news .swiper-slide img { width: 100%; max-height: 220px; -o-object-fit: cover; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } .news .swiper-slide__content { padding: 24px; height: 145px; } .news .swiper-slide__content a { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; font-size: 18px; font-weight: 700; line-height: 135%; } @media (max-width: 1024px) { .news { margin-top: 72px; padding: 40px 24px; } } .news .news-pagination-wrap { display: flex; flex-direction: row; align-items: center; padding: 3px; gap: 4px; min-width: 46px; height: 13px; background: #fff; box-shadow: 0px 1.72px 17.25px -4.31px rgba(80, 81, 196, 0.15); backdrop-filter: blur(5.17px); border-radius: 43px; } .news .news-pagination-wrap .swiper-pagination { position: static !important; display: flex !important; flex-direction: row; align-items: center; gap: 4px; width: auto !important; transform: none !important; height: auto !important; } /* Bullets: all 7×7px, active #212121, inactive #F1F1F1 - override Swiper scale(0.33) and positioning */ .news .news-pagination-wrap .swiper-pagination-bullet { position: static !important; left: auto !important; top: auto !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; margin: 0 !important; background: #F1F1F1 !important; opacity: 1 !important; border-radius: 50%; transform: scale(1) !important; flex-shrink: 0; transition: none !important; } .news .news-pagination-wrap .swiper-pagination-bullet-active { background: #212121 !important; } @media (max-width: 767px) { .news .swiper { overflow: hidden; } } .order-form { max-width: 1400px; margin: 0 auto; border-radius: 24px; background-color: #8d59ff; margin-top: 96px; padding: 60px; } .order-form__content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .order-form__content-wrapper { background-image: url("../assets/images/order-form.png"); background-repeat: no-repeat; background-position: 0 135%; } .order-form__content-wrapper .section-title { color: #fff; margin-bottom: 24px; text-align: left; max-width: 400px; } .order-form__content-desc { font-size: 24px; font-weight: 400; line-height: 140%; color: #fff; max-width: 500px; } .order-form__input { width: 100%; } .order-form__inputs-wrapper { padding: 50px; background-color: #f8f8fb; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; border-radius: 24px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); } .order-form__inputs-wrapper h4 { font-size: 20px; font-weight: 700; line-height: 120%; margin-bottom: 16px; } .order-form__inputs-wrapper input { padding: 20px 30px; border: 1px solid #ededf9; border-radius: 12px; color: #969696; backdrop-filter: blur(24px); font-size: 18px; font-weight: 500; line-height: 145%; } .order-form__inputs-wrapper button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 20px 80px; } .order-form__inputs-wrapper span { font-size: 14px; font-weight: 400; line-height: 140%; color: #797979; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2px; } .order-form__inputs-wrapper span::before { content: url("../assets/images/checkbox-circle-line.svg"); width: 22px; height: 22px; display: inline-block; margin-right: 8px; } .order-form__inputs-wrapper span a { text-decoration: underline; color: #8d59ff; } @media (max-width: 1024px) { .order-form { margin-top: 72px; padding: 40px 0; } .order-form__content { grid-template-columns: 1fr; gap: 0px; } .order-form__content-wrapper { padding-bottom: 222px; background-position: 0 146px; } .order-form__inputs-wrapper { padding: 32px; margin-top: -100px; } } @media (max-width: 768px) { .order-form { margin-right: 16px; margin-left: 16px; } .order-form__content { gap: 0px; } .order-form__content-wrapper { background-size: contain; background-position: center bottom; padding-bottom: 220px; } .order-form__inputs-wrapper { padding: 16px; margin-top: 0; } .order-form__content-desc { font-size: 20px; } } .phone-form { margin-top: 96px; } .phone-form__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .phone-form__image { /* background-color: #7c90ff; */ border: 1px solid #ededf9; border-radius: 24px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.1490196078); /* padding: 50px 40px; */ } .phone-form__image img { height: 100%; } .phone-form__content { padding: 55px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .phone-form__content .section-title { text-align: left; } .phone-form__content-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; } .phone-form__content-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .phone-form__content-desc span { font-size: 18px; line-height: 140%; font-weight: 500; } .phone-form__button { padding-left: 80px; padding-right: 80px; position: absolute; top: 0; right: 0px; } .phone-form__input-wrapper { position: relative; } .phone-form__input-wrapper .intl-tel-input { width: 100%; border-radius: 300px; overflow: hidden; border: 1px solid #6c6c6c; background-color: rgba(249, 249, 252, 0.8); -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); } .phone-form__input-wrapper .intl-tel-input input { padding-right: 200px; border: none; background: transparent; box-shadow: none; } .phone-form__input-wrapper input { width: 100%; padding: 20px; font-size: 18px; border-radius: 300px; background-color: rgba(249, 249, 252, 0.8); border: 1px solid #6c6c6c; -webkit-box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); box-shadow: 0px 4px 40px -10px rgba(80, 81, 196, 0.1490196078); backdrop-filter: blur(24px); color: #969696; } @media (max-width: 1280px) { .phone-form__image img { width: 100%; max-width: 420px; } } @media (max-width: 1024px) { .phone-form { margin-top: 72px; } .phone-form__wrapper { grid-template-columns: 1fr; } .phone-form__image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .phone-form__content { padding: 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; } } @media (max-width: 768px) { .phone-form__content { padding: 0px 0; } .phone-form__input-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .phone-form__input-wrapper .intl-tel-input input { padding-right: 20px; } .phone-form__button { position: static; } } .sayAboutUs { margin-top: 96px; } .sayAboutUs__swiper-wrap { overflow: hidden; padding: 20px; margin: -20px; } .sayAboutUs__content { margin-top: 32px; overflow: visible !important; } .sayAboutUs__content .swiper-wrapper { align-items: stretch; } .sayAboutUs__content .swiper-slide { height: auto; } .sayAboutUs__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 16px; border: 1px solid #ededf9; -webkit-box-shadow: 0px 2px 16px 0px rgba(80, 81, 196, 0.12); box-shadow: 0px 2px 16px 0px rgba(80, 81, 196, 0.12); background-color: #fff; height: 100%; } .sayAboutUs__item:hover .sayAboutUs__item-desc-icon { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .news .swiper-slide:hover .sayAboutUs__item-desc-icon, .news .swiper-slide__content a:hover .sayAboutUs__item-desc-icon { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sayAboutUs__item img { max-height: 220px; -o-object-fit: cover; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; width: 100%; } .sayAboutUs__item-desc { font-size: 18px; line-height: 135%; font-weight: 700; padding: 24px; } .sayAboutUs__item-desc a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 16px; } .sayAboutUs__item-title { min-width: 0; } .sayAboutUs__item-desc-icon { width: 48px; height: 48px; background-color: #eaedf2; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: -webkit-transform 200ms ease; transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease; -webkit-transform-origin: center; transform-origin: center; } /* Say about us swiper bottom - same design as news/projects */ .sayAboutUs .say-about-us-pagination-wrap { display: flex; flex-direction: row; align-items: center; padding: 3px; gap: 4px; min-width: 46px; height: 13px; background: #fff; box-shadow: 0px 1.72px 17.25px -4.31px rgba(80, 81, 196, 0.15); backdrop-filter: blur(5.17px); border-radius: 43px; } .sayAboutUs .say-about-us-pagination-wrap .swiper-pagination { position: static !important; display: flex !important; flex-direction: row; align-items: center; gap: 4px; width: auto !important; transform: none !important; height: auto !important; } .sayAboutUs .say-about-us-pagination-wrap .swiper-pagination-bullet { position: static !important; left: auto !important; top: auto !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; margin: 0 !important; background: #F1F1F1 !important; opacity: 1 !important; border-radius: 50%; transform: scale(1) !important; flex-shrink: 0; transition: none !important; } .sayAboutUs .say-about-us-pagination-wrap .swiper-pagination-bullet-active { background: #212121 !important; } @media (max-width: 768px) { .sayAboutUs { margin-top: 64px; } .sayAboutUs__content { margin-top: 24px; } .sayAboutUs .swiper-bottom--say-about-us { gap: 24px; } .sayAboutUs__item-desc a { flex-direction: column; align-items: flex-start; } .sayAboutUs__item-title { width: 100%; } .sayAboutUs__item-desc-icon { margin-top: 8px; } } .students-history { margin: 0 auto; margin-top: 96px; padding: 60px 0; max-width: 1400px; background-color: #f8f8fb; border: 1px solid #ededf9; border-radius: 24px; -webkit-box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); box-shadow: 0px 4px 40px 0px rgba(80, 81, 196, 0.2); backdrop-filter: blur(24px); } .students-history .swiper-wrapper { margin-top: 32px; } .students-history .swiper { overflow: hidden; } .students-history .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 390px; width: calc((100% - 30px) / 2); } .students-history .swiper-slide:hover .swiper-slide__content-link img { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .students-history .swiper-slide .swiper-slide__content-link img { -webkit-transition: -webkit-transform 200ms ease; transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease; -webkit-transform-origin: center; transform-origin: center; } .students-history .swiper-slide__image { position: relative; border-top-left-radius: 16px; border-bottom-left-radius: 0px; height: 390px; min-width: 40%; } .students-history .swiper-slide__image-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; object-position: center top; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .students-history .swiper-slide__linkedin { position: absolute; top: 24px; left: 24px; } .students-history .swiper-slide__plate { position: absolute; bottom: 0; left: 0; padding: 24px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); color: #fff; border-bottom-left-radius: 16px; width: 100%; } .students-history .swiper-slide__plate p { font-size: 20px; line-height: 120%; font-weight: 700; } .students-history .swiper-slide__plate span { color: #d9d9d9; font-size: 14px; line-height: 120%; font-weight: 500; } .students-history .swiper-slide__content { padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; min-width: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .students-history .swiper-slide__content h3 { font-size: 24px; line-height: 120%; font-weight: 800; } .students-history .swiper-slide__content p { font-size: 18px; line-height: 145%; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .students-history .swiper-slide__content--green { background-color: rgba(220, 254, 188, 0.8); } .students-history .swiper-slide__content--purple { background-color: rgba(226, 198, 255, 0.8); } .students-history .swiper-slide__content--blue { background-color: rgba(188, 220, 254, 0.8); } .students-history .swiper-slide__content-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 18px; font-weight: 700; line-height: 145%; } /* Students history swiper bottom - same design as news/projects */ .students-history .students-history-pagination-wrap { display: flex; flex-direction: row; align-items: center; padding: 3px; gap: 4px; min-width: 46px; height: 13px; background: #fff; box-shadow: 0px 1.72px 17.25px -4.31px rgba(80, 81, 196, 0.15); backdrop-filter: blur(5.17px); border-radius: 43px; } .students-history .students-history-pagination-wrap .swiper-pagination { position: static !important; display: flex !important; flex-direction: row; align-items: center; gap: 4px; width: auto !important; transform: none !important; height: auto !important; } .students-history .students-history-pagination-wrap .swiper-pagination-bullet { position: static !important; left: auto !important; top: auto !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; margin: 0 !important; background: #F1F1F1 !important; opacity: 1 !important; border-radius: 50%; transform: scale(1) !important; flex-shrink: 0; transition: none !important; } .students-history .students-history-pagination-wrap .swiper-pagination-bullet-active { background: #212121 !important; } @media (max-width: 768px) { .students-history { padding: 40px 0; } .students-history .swiper-bottom--students-history { gap: 24px; } .students-history .swiper-slide { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; width: 100%; } .students-history .swiper-slide__image { min-width: 100%; width: 100%; } .students-history .swiper-slide__image-img { border-top-right-radius: 16px; border-bottom-left-radius: 0; } .students-history .swiper-slide__image { border-bottom-left-radius: 0; } .students-history .swiper-slide__plate { border-bottom-left-radius: 0; } .students-history .swiper-slide__content { border-top-right-radius: 0; border-bottom-left-radius: 0px; } } /* Projects swiper bottom - same design as news: 94px gap, white bg, 4 bullets 7px */ .projects .projects-pagination-wrap { display: flex; flex-direction: row; align-items: center; padding: 3px; gap: 4px; min-width: 46px; height: 13px; background: #fff; box-shadow: 0px 1.72px 17.25px -4.31px rgba(80, 81, 196, 0.15); backdrop-filter: blur(5.17px); border-radius: 43px; } .projects .projects-pagination-wrap .swiper-pagination { position: static !important; display: flex !important; flex-direction: row; align-items: center; gap: 4px; width: auto !important; transform: none !important; height: auto !important; } .projects .projects-pagination-wrap .swiper-pagination-bullet { position: static !important; left: auto !important; top: auto !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; margin: 0 !important; background: #F1F1F1 !important; opacity: 1 !important; border-radius: 50%; transform: scale(1) !important; flex-shrink: 0; } .projects .projects-pagination-wrap .swiper-pagination-bullet-active, .projects .projects-pagination-wrap .swiper-pagination-bullet-active-main { background: #212121 !important; } /* Hide only far edge bullets, keep prev/next so 3 slides = 3 visible bullets */ .projects .projects-pagination-wrap .swiper-pagination-bullet-active-prev-prev, .projects .projects-pagination-wrap .swiper-pagination-bullet-active-next-next { display: none !important; } @media (max-width: 768px) { .projects .swiper-bottom--projects { gap: 24px; } } @keyframes professionsFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Projects filter styles */ .projects-wrapper { position: relative; } .projects .projectsSwiper { display: none; } .projects .projectsSwiper.active { display: block; animation: professionsFadeIn 0.3s ease; } @media (min-width: 1025px) { .page-header__nav { display: none !important; } } .page-header__nav-header { display: none; } @media (max-width: 1024px) { .page-header__nav-header { display: flex !important; align-items: center; justify-content: space-between; width: 100%; } .page-header__nav-close { display: block !important; } } @media (max-width: 1024px) { .hero { margin-top: 62px; } } @media (max-width: 768px) { .hero { margin-top: 24px; } } @media (max-width: 768px) { .header-bar__right-profile-main-page { display: none; } }