/home/bdqbpbxa/demo-subdomains/magnetiq.goodface.com.ua/css/ui-blocks.css
/*
Here are css blocks that are duplicated twice or more
or may be duplicated twice or more in future
*/
/* .industry-card */
.industry-card {
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-green, #45ED94);
padding: 2.196vw
/*32px*/
;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
color: var(--Black);
aspect-ratio: 4/5;
}
.industry-card.-grey {
background: var(--Grey);
}
.industry-card.-violet {
background: var(--Violet);
}
.industry-card.-white-text {
color: var(--White);
}
.industry-card .img,
.industry-card img {
display: block;
width: 100%;
}
.industry-card .title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 2.608vw
/*38px*/
;
transition: opacity 0.4s, transform 0.4s;
}
.industry-card .title:after {
content: '';
display: block;
position: absolute;
right: 0;
width: 2.196vw
/*32px*/
;
aspect-ratio: 1/1;
transform: translateX(calc(100% - 0.549vw
/*8px*/
));
opacity: 0;
transition: opacity 0.4s, transform 0.4s;
margin-top: 0.275vw
/*4px*/
;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMyAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjEgOS42MDAxTDIwLjUgMTYuMDAwMUwxNC4xIDIyLjQwMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
}
body.-apple .industry-card .title:after {
margin-top: -1px;
}
.industry-card.-white-text .title:after {
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMyAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjEgOS42MDAxTDIwLjUgMTYuMDAwMUwxNC4xIDIyLjQwMDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
/* .statistic-card */
.statistic-card {
position: relative;
z-index: 1;
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-grey);
padding: 1.441vw
/*21px*/
2.196vw
/*32px*/
2.196vw
/*32px*/
2.196vw
/*32px*/
;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.549vw
/*8px*/
;
}
.statistic-card__text .text {
margin-top: 0.618vw
/*9px*/
;
}
.statistic-card .img {
border-radius: 5.491vw
/*80px*/
;
background: var(--Grey);
padding: 1.647vw
/*24px*/
;
width: 5.491vw
/*80px*/
;
margin-top: 7.344vw
/*107px*/
;
aspect-ratio: 1/1;
border-radius: 50%;
}
.statistic-card .img img {
display: block;
width: 100%;
}
.statistic-card.-dark {
background: var(--Grey);
}
.statistic-card.-darker {
background: var(--Dark-grey-2);
color: var(--White);
}
.statistic-card.-darker .text {
color: var(--White-70);
}
.statistic-card.-dark .img {
background: var(--Light-grey);
}
.statistic-card.-darker .img {
background: var(--Dark-grey);
}
/*header*/
.header {
position: fixed;
z-index: 100;
left: 0;
top: 0;
right: 0;
background: var(--White);
transition: transform 0.4s;
transform: translate3d(0, 0, 0);
}
.header.-hide {
transform: translateY(-100%);
}
body.-scroll-lock .header {
padding-right: var(--scrollbar-width);
}
.header__wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 2.745vw
/*40px*/
;
padding: 1.647vw
/*24px*/
0;
}
.lang-changer {
display: flex;
justify-content: center;
align-items: center;
gap: 0.549vw
/*8px*/
;
padding: 0.343vw
/*5px*/
0.618vw
/*9px*/
0.206vw
/*3px*/
0.618vw
/*9px*/
;
border-radius: 2.745vw
/*40px*/
;
height: 2.059vw
/*30px*/
;
border: 1px solid var(--Grey, #B4C3D3);
transition: border 0.4s;
}
body.-apple .lang-changer {
padding: 6px 9px 3px 9px;
}
.lang-changer .lang:not(.-current) {
color: var(--Grey);
cursor: pointer;
}
.lang-changer .lang.-current {
color: var(--Black);
pointer-events: none;
}
.header .link,
.header__wrapper .lang {
color: var(--Black);
cursor: pointer;
transition: opacity 0.4s;
user-select: none;
}
.header .link {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.275vw
/*4px*/
;
}
.header__wrapper .link:has(+.menu-opener) {
margin-right: -0.206vw
/*3px*/
;
}
.header .link img {
width: 1.647vw
/*24px*/
;
aspect-ratio: 1/1;
display: block;
margin-top: 0.206vw
/*3px*/
;
}
body.-apple .header .link:not(.menu-opener) {
padding-top: 3px;
}
body.-apple .header .menu-opener .text {
padding-top: 3px;
}
body.-apple .header .link img {
margin-top: -1px;
}
.header__wrapper .logo {
position: absolute;
z-index: 101;
height: 2.745vw
/*40px*/
;
width: auto;
}
.header__wrapper .logo svg {
display: block;
height: 100%;
}
.header .logo path {
transition: fill 0.5s;
}
.header__wrapper .link.menu-opener {
gap: 0.549vw
/*8px*/
;
}
.header__wrapper-left,
.header__wrapper-right {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 2.745vw
/*40px*/
;
}
.header__wrapper-left {
margin: 0 auto 0 0;
}
.header__wrapper-right {
margin: 0 0 0 auto;
}
.menu-opener .burger {
position: relative;
width: 2.745vw
/*40px*/
;
padding-top: 0.137vw
/*2px*/
;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
}
.menu-opener .burger:before,
.menu-opener .burger:after {
content: '';
position: absolute;
display: block;
width: 2.196vw
/*32px*/
;
height: 0.137vw
/*2px*/
;
background: var(--Black);
transition: transform 0.4s, width 0.4s;
}
.menu-opener .burger:before {
transform: translateY(-0.343vw
/*5px*/
);
}
.menu-opener .burger:after {
transform: translateY(0.343vw
/*5px*/
);
}
.menu-opener.-active span:before {
width: 1.647vw
/*24px*/
;
transform: translate(0.014vw
/*0.2px*/
, 0.0549vw
/*8px*/
) rotate(45deg);
}
.menu-opener.-active span:after {
width: 1.647vw
/*24px*/
;
transform: translate(-0.014vw
/*0.2px*/
, 0.0549vw
/*8px*/
) rotate(-45deg);
}
.menu-opener.-hidden {
opacity: 0;
pointer-events: none;
}
.header-hidden-menu {
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100vw;
height: var(--window-inner-height);
background: var(--White);
overflow-y: scroll;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.header-hidden-menu.-active {
opacity: 1;
pointer-events: auto;
}
.mobile-scroll {
height: 100%;
}
.header-hidden-menu__top {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-hidden-menu__top-left,
.header-hidden-menu__top-right {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 2.745vw
/*40px*/
;
padding: 1.647vw
/*24px*/
0;
}
.header-hidden-menu__top-left .lang-changer {
display: none;
}
.header-hidden-menu__bottom {
position: relative;
height: 100%;
overflow: hidden;
margin: 0 -2.745vw
/*40px*/
0 0;
padding: 0 2.745vw
/*40px*/
0 0;
}
.header-hidden-menu .container {
height: 100%;
display: flex;
flex-direction: column;
}
.header-hidden-menu__bottom:before {
content: '';
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 0.549vw
/*8px*/
;
background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
display: none;
}
.header-hidden-menu__bottom:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2.196vw
/*32px*/
;
background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
display: none;
}
.header-hidden-menu__inner {
padding: 0.549vw
/*8px*/
0 2.196vw
/*32px*/
0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.098vw
/*16px*/
;
}
@media screen and (max-height:760px) and (min-width: 1024px) and (max-width: 1500px) {
.header-hidden-menu__inner {
padding-bottom: 0;
}
.header-hidden-menu__bottom:after {
display: none;
}
}
.search-input input {
border-radius: 0.549vw
/*8px*/
;
border: 1px solid var(--Light-grey, #D1DDE8);
padding: 0.480vw
/*7px*/
1.579vw
/*23px*/
0.480vw
/*7px*/
4.324vw
/*63px*/
;
line-height: 100% !important;
width: 100%;
height: 4.942vw
/*72px*/
;
}
body.-apple .search-input input {
padding-top: 0;
padding-bottom: 0;
}
.search-input {
grid-column: span 3;
width: 100%;
margin-bottom: 0 !important;
}
.search-input .input__wrapper {
width: 100%;
}
.search-input .input__wrapper .submit {
display: block;
position: absolute;
left: 1.647vw
/*24px*/
;
width: 1.647vw
/*24px*/
;
aspect-ratio: 1/1;
border: none;
outline: none;
cursor: pointer;
transition: opacity 0.4s;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMThDMTQuNjQyMSAxOCAxOCAxNC42NDIxIDE4IDEwLjVDMTggNi4zNTc4NiAxNC42NDIxIDMgMTAuNSAzQzYuMzU3ODYgMyAzIDYuMzU3ODYgMyAxMC41QzMgMTQuNjQyMSA2LjM1Nzg2IDE4IDEwLjUgMThaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTUuODAzNyAxNS44MDM3TDE4LjgwMzcgMTguODAzNyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
.header-menu-group {
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-grey);
padding: 1.510vw
/*22px*/
1.647vw
/*24px*/
1.784vw
/*26px*/
1.647vw
/*24px*/
;
gap: 1.098vw
/*16px*/
;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.header-menu-group .title {
margin-bottom: 0.275vw
/*4px*/
;
}
.header-menu-group a {
opacity: 0.7;
}
.header-hidden-menu__inner-col {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.549vw
/*8px*/
;
}
.header-hidden-menu__inner-col>* {
width: 100%;
}
.header-hidden-menu__inner-col .page-link {
padding: 1.647vw
/*24px*/
1.647vw
/*24px*/
1.647vw
/*24px*/
1.647vw
/*24px*/
;
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-grey);
transition: background 0.4s;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1.098vw
/*16px*/
;
width: 100%;
color: var(--Black);
}
.header-hidden-menu__inner-col .page-link img {
display: block;
width: 1.647vw
/*24px*/
;
aspect-ratio: 1/1;
/* margin-top: 0.275vw
/*4px*/
;
}
body.-apple .header-hidden-menu__inner-col .page-link {
padding-top: 24px;
padding-bottom: 20px;
}
body.-apple .header-hidden-menu__inner-col .page-link img {
margin-top: -5px;
}
.header-hidden-menu .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
top: 0.549vw
/*8px*/
;
bottom: 2.196vw
/*32px*/
;
padding: 0;
width: 0.206vw
/*3px*/
;
}
.header-hidden-menu .os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,
.header-hidden-menu .os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before {
left: 0;
right: 0;
}
/* footer */
.footer__container {
border-radius: 1.098vw
/*16px*/
;
background: var(--Light-grey-2, #D1DDE8);
padding: 4.393vw
/*64px*/
;
overflow: hidden;
}
.footer-form {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4.393vw
/*64px*/
;
}
.footer-form__right .img {
position: relative;
width: 30.199vw
/*440px*/
;
aspect-ratio: 1/1;
margin-right: 2.471vw
/*36px*/
;
}
.footer-form__right .img:after {
content: '';
position: absolute;
right: 0;
top: 0;
display: block;
height: 100%;
width: 6.863vw
/*100px*/
;
transform: translateX(100%);
background: var(--Grey, #B4C3D3);
}
.footer-form__right .img img {
display: block;
width: 100%;
aspect-ratio: 1/1;
}
.footer-form__left .title {
margin-top: 1.030vw
/*15px*/
;
}
.footer-form__left .title img {
vertical-align: middle;
margin-top: -0.343vw
/*-5px*/
;
margin-right: -0.275vw
/*-4px*/
;
margin-left: 0.069vw
/*1px*/
;
height: 4.667vw
/*68px*/
;
}
.footer-form__left .form-wrapper {
margin-top: 2.814vw
/*31px*/
;
}
.footer-form .button {
margin-top: 1.647vw
/*24px*/
;
width: 100%;
}
.footer-form .--checkbox,
.footer-form .description {
margin-top: 2.745vw
/*40px*/
;
}
.footer-form .description {
opacity: 0.4;
}
.footer__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4.942vw
/*72px*/
;
}
.footer__row .col {
grid-column: span 1;
}
.footer__row:not(:first-child) {
padding: 5.491vw
/*80px*/
0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer__top:not(:first-child) {
margin-top: 5.491vw
/*80px*/
;
}
.footer__row .title {
opacity: 0.4;
}
.footer__top .link {
margin-top: 1.098vw
/*16px*/
;
}
.footer a.link {
display: block;
width: fit-content;
transition: opacity 0.4s;
color: var(--Black);
}
.footer__main .title {
margin-bottom: 1.647vw
/*24px*/
;
}
.footer__main .link+.link {
margin-top: 1.098vw
/*16px*/
;
}
.footer .app-link {
display: block;
width: fit-content;
height: 3.294vw
/*48px*/
;
transition: opacity 0.4s;
}
.footer .app-link img {
display: block;
height: 100%;
width: auto;
}
.footer .app-link+.app-link {
margin-top: 0.549vw
/*8px*/
;
}
.circle-border-link {
border-radius: 5.491vw
/*80px*/
;
border: 1px solid var(--Grey, #B4C3D3);
padding: 0 1.647vw
/*24px*/
;
gap: 0.686vw
/*10px*/
;
height: 3.844vw
/*56px*/
;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
color: var(--Black);
transition: border 0.4s;
}
.circle-border-link img {
display: block;
width: 1.647vw
/*24px*/
;
aspect-ratio: 1/1;
}
body.-apple .circle-border-link {
padding-top: 4px;
padding-bottom: 1px;
}
body.-apple .circle-border-link img {
margin-top: -2px;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 2.745vw
/*40px*/
;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer__bottom-left .footer__bottom-copyright {
margin-top: 0.549vw
/*8px*/
;
opacity: 0.4;
}
.footer__bottom-menu {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 1.647vw
/*24px*/
;
}
.social-list {
display: flex;
justify-content: flex-end;
gap: 0.549vw
/*8px*/
;
}
.social-item {
border-radius: 50%;
padding: 0.824vw
/*12px*/
;
border-radius: 5.491vw
/*80px*/
;
width: 3.294vw
/*48px*/
;
background: var(--Black);
}
.social-item svg {
display: block;
width: 100%;
height: 100%;
}
.social-item svg path {
transition: fill 0.4s;
}
/* service-card */
.service-card__inner {
padding: 1.098vw
/*16px*/
;
border-radius: 1.098vw
/*16px*/
;
background: var(--Light-grey, #E8EDF1);
display: flex;
justify-content: space-between;
}
.service-card__text {
padding: 1.647vw
/*24px*/
;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
min-height: 100%;
text-align: left;
}
.service-card__text .img {
width: 4.942vw
/*72px*/
;
aspect-ratio: 1/1;
}
.service-card__text .img img {
display: block;
width: 100%;
border-radius: 50%;
}
.service-card__text .title {
margin-top: 2.402vw
/*35px*/
;
}
.service-card__text .text {
margin: 1.235vw
/*18px*/
0;
color: var(--Black-70);
}
.service-card__text .button {
margin: auto 0 0 0;
width: fit-content;
}
.service-card__img {
width: 46.671vw
/*680px*/
;
min-width: 46.671vw
/*680px*/
;
border-radius: 0.549vw
/*8px*/
;
max-height: 100%;
}
.service-card__img img {
display: block;
width: 100%;
max-height: 100%;
object-fit: cover;
border-radius: 0.549vw
/*8px*/
;
}
/* conveyor */
.conveyor-belt__belt {
position: relative;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
user-select: none;
}
.conveyor-belt__belt-part {
position: relative;
z-index: 1;
display: flex;
align-items: center;
white-space: nowrap;
}
.conveyor-belt__belt.-in-viewport .conveyor-belt__belt-part {
animation-play-state: running !important;
}
.conveyor-belt__belt .conveyor-belt__belt-part {
animation-play-state: paused !important;
}
.conveyor-belt__belt.-reverse {
display: flex;
justify-content: flex-end;
align-items: center;
}
@keyframes conveyor-part {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes conveyor-part-reverse {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
/* rebrand-banner */
body.-has-banner {
padding-top: 2.745vw
/*40px*/
;
}
body.-has-banner .header {
top: 2.745vw
/*40px*/
;
}
body.-has-banner .header-hidden-menu {
height: calc(var(--window-inner-height) - 2.745vw
/*40px*/
);
}
body.-has-banner .header.-hide {
transform: translateY(calc(-100% - 2.745vw));
}
.rebrand-banner {
position: fixed;
z-index: 100;
left: 0;
top: 0;
right: 0;
background: var(--Light-green);
height: 2.745vw
/*40px*/
;
overflow: hidden;
transition: transform 0.4s;
}
.rebrand-banner:has(+.header.-hide) {
transform: translateY(calc(-100% - 2.745vw));
}
.rebrand-banner .close {
position: absolute;
z-index: 3;
right: 0;
top: 0;
width: 3.294vw
/*48px*/
;
height: 100%;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
background: var(--Light-green);
}
.rebrand-banner .close:before {
content: '';
display: block;
width: 1.098vw
/*16px*/
;
aspect-ratio: 1/1;
transition: transform 0.4s;
transform: translateZ(0);
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjUgMy41TDMuNSAxMi41IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjUgMTIuNUwzLjUgMy41IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
.rebrand-banner .conveyor-belt__belt {
height: 100%;
display: flex;
justify-content: center;
}
.rebrand-banner .conveyor-belt__belt-part {
gap: 0.686vw
/*10px*/
;
}
.rebrand-banner:after {
content: '';
position: absolute;
z-index: 2;
right: 3.294vw
/*48px*/
;
top: 0;
display: block;
width: 2.745vw
/*40px*/
;
height: 100%;
background: linear-gradient(90deg, rgba(69, 237, 148, 0.00) 0%, #45ED94 100%);
}
body.-scroll-lock .rebrand-banner {
right: var(--scrollbar-width);
}
body.-apple .rebrand-banner .conveyor-belt__belt-part {
padding-top: 3px;
}
/* article-preview */
.article-preview .img {
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-grey-2, #D1DDE8);
overflow: hidden;
aspect-ratio: 416/256;
}
.article-preview .img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.article-preview .section-tag {
margin-top: 1.647vw
/*24px*/
;
}
.article-preview .title {
margin-top: 0.961vw
/*14px*/
;
color: var(--Black);
transition: opacity 0.4s;
}
.article-preview .date {
margin-top: 1.167vw
/*17px*/
;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.275vw
/*4px*/
;
color: var(--Dark-grey-2, #586977);
}
.article-preview .date:before {
content: '';
display: block;
width: 1.373vw
/*20px*/
;
aspect-ratio: 1/1;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjMwNzcgNFY1LjU3MTQzTTcuNjkyMzEgNFY1LjU3MTQzTTUgNy45Mjg1N0gxNU01LjQ1NDU1IDQuNzg1NzFIMTQuNTQ1NUMxNC43OTY1IDQuNzg1NzEgMTUgNC45OTM1OCAxNSA1LjI1VjE0LjUzNTdDMTUgMTQuNzkyMSAxNC43OTY1IDE1IDE0LjU0NTUgMTVINS40NTQ1NUM1LjIwMzUxIDE1IDUgMTQuNzkyMSA1IDE0LjUzNTdWNS4yNUM1IDQuOTkzNTggNS4yMDM1MSA0Ljc4NTcxIDUuNDU0NTUgNC43ODU3MVoiIHN0cm9rZT0iIzU4Njk3NyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz4KPC9zdmc+Cg==);
}
/* event-card */
.event-card {
padding: 1.647vw
/*24зч*/
1.647vw
/*24зч*/
1.647vw
/*24зч*/
0;
border-radius: 0.549vw
/*8px*/
;
background: var(--Light-grey, #E8EDF1);
gap: 2.196vw
/*32px*/
;
display: flex;
justify-content: flex-start;
align-items: center;
transition: background 0.4s;
}
.event-card .img {
position: relative;
border-radius: 50%;
width: 6.589vw
/*96px*/
;
aspect-ratio: 1/1;
margin-left: 2.745vw
/*40px*/
;
}
.event-card .img img {
display: block;
width: 100%;
border-radius: 50%;
}
.event-card .img:before {
content: '';
position: absolute;
left: 0;
top: 0;
transform: translateX(-100%);
display: block;
height: 100%;
width: 2.745vw
/*40px*/
;
background: var(--Grey);
}
.event-card .title {
margin-top: 0.549vw
/*8px*/
;
color: var(--Black);
}
.event-card .date {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.549vw
/*8px*/
;
color: var(--Dark-grey-2, #586977);
}
.event-card .date:before {
content: '';
display: block;
width: 1.098vw
/*16px*/
;
aspect-ratio: 16/24;
background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAxNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjc2OTIgNC41VjYuMzU3MTRNNS4yMzA3NyA0LjVWNi4zNTcxNE0yIDkuMTQyODZIMTRNMi41NDU0NSA1LjQyODU3SDEzLjQ1NDVDMTMuNzU1OCA1LjQyODU3IDE0IDUuNjc0MjMgMTQgNS45NzcyN1YxNi45NTEzQzE0IDE3LjI1NDMgMTMuNzU1OCAxNy41IDEzLjQ1NDUgMTcuNUgyLjU0NTQ1QzIuMjQ0MjEgMTcuNSAyIDE3LjI1NDMgMiAxNi45NTEzVjUuOTc3MjdDMiA1LjY3NDIzIDIuMjQ0MjEgNS40Mjg1NyAyLjU0NTQ1IDUuNDI4NTdaIiBzdHJva2U9IiM1ODY5NzciIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+Cjwvc3ZnPgo=);
}
@media screen and (max-width: 1024px) {
/*header*/
.header.-mobile-menu-active .logo svg>path {
fill: rgba(0, 0, 0, 0);
}
.header__wrapper {
padding: clamp(15px, 4.103vw, 17px)
/*16px*/
0;
justify-content: space-between;
}
.header__wrapper-left {
display: none;
}
.header__wrapper .link:not(.menu-opener) {
display: none;
}
.header .link {
gap: clamp(3px, 1.026vw, 5px)
/*4px*/
;
}
.header .link img {
width: clamp(23px, 6.154vw, 25px)
/*24px*/
;
margin-top: clamp(2.5px, 0.769vw, 3.5px)
/*3px*/
;
}
.header__wrapper .logo {
height: clamp(38px, 10.256vw, 42px)
/*40px*/
;
width: clamp(196px, 50.769vw, 200px)
/*198px*/
;
display: flex;
align-items: center;
position: relative;
}
.header__wrapper .logo svg {
display: block;
width: 100%;
height: auto;
}
.header__wrapper .logo svg path {
transition: fill 0.5s;
}
.header__wrapper .link.menu-opener {
gap: clamp(7px, 2.051vw, 9px);
position: relative;
z-index: 101;
margin-top: clamp(-4px, -1.282vw, -6px);
}
.menu-opener .burger {
width: clamp(38px, 10.256vw, 42px)
/*40px*/
;
padding-top: clamp(1.5px, 0.513vw, 2.5px);
}
.menu-opener .burger:before,
.menu-opener .burger:after {
width: clamp(31px, 8.205vw, 33px);
height: clamp(1.5px, 0.513vw, 2.5px);
}
.menu-opener .burger:before {
transform: translateY(clamp(-4px, -1.282vw, -6px));
}
.menu-opener .burger:after {
transform: translateY(clamp(4px, 1.282vw, 6px));
}
.menu-opener.-active span:before {
width: clamp(23px, 6.154vw, 25px);
transform: translate(0.2px, 0.8px) rotate(45deg);
}
.menu-opener.-active span:after {
width: clamp(23px, 6.154vw, 25px);
transform: translate(-0.2px, 0.8px) rotate(-45deg);
}
.lang-changer {
gap: clamp(7px, 2.051vw, 9px);
padding: clamp(4px, 1.282vw, 6px) clamp(8px, 2.308vw, 10px) 3px clamp(8px, 2.308vw, 10px);
border-radius: clamp(38px, 10.256vw, 42px)
/*40px*/
;
height: 30px;
}
body.-apple .lang-changer {
padding: 6px 9px 4px 9px;
}
.header-hidden-menu {
padding-top: clamp(70px, 18.462vw, 74px);
}
.header-hidden-menu .mobile-scroll {
overflow: auto;
}
.header-hidden-menu .container {
height: auto;
}
.header-hidden-menu .container .header-hidden-menu__bottom {
height: auto;
}
.header-hidden-menu__top {
padding-top: 5px;
flex-direction: column;
gap: clamp(20px, 5.385vw, 22px);
}
.header-hidden-menu__top-left .lang-changer {
display: flex;
}
.header-hidden-menu__top-right .menu-opener {
display: none;
}
.header-hidden-menu__top-left {
gap: clamp(11px, 3.077vw, 13px);
padding: 0;
justify-content: space-between;
}
.header-hidden-menu__top-left .lang-changer {
order: 2;
}
.header-hidden-menu__top-left,
.header-hidden-menu__top-right {
padding: 0;
width: 100%;
flex-wrap: wrap;
}
.header-hidden-menu__top-left .link {
white-space: nowrap;
}
.header-hidden-menu__top-left a:last-child {
order: 1;
}
.header-hidden-menu__top-left a:nth-child(2) {
order: 2;
}
.header-hidden-menu__top-right {
gap: clamp(15px, 4.103vw, 17px);
flex-direction: row-reverse;
justify-content: flex-end;
}
.header-hidden-menu__top-right .link {
border-radius: clamp(38px, 10.256vw, 42px)
/*40px*/
;
border: 1px solid var(--Grey, #B4C3D3);
height: clamp(38px, 10.256vw, 42px)
/*40px*/
;
padding: 0 clamp(9px, 2.564vw, 11px);
width: calc(50% - calc(clamp(15px, 4.103vw, 17px) / 2));
/* min-width: 150px; */
width: 100%;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.header-hidden-menu__bottom {
margin: clamp(12px, 3.333vw, 14px) 0 0 0;
padding: 0;
}
.header-hidden-menu__bottom:before {
/* height: clamp(30px, 8.205vw, 34px); */
height: clamp(19px, 5.128vw, 21px);
display: none;
}
.header-hidden-menu__bottom:after {
height: clamp(19px, 5.128vw, 21px);
}
.header-hidden-menu__inner {
padding: clamp(19px, 5.128vw, 21px) 0 clamp(19px, 5.128vw, 21px) 0;
gap: clamp(23px, 6.154vw, 25px);
grid-template-columns: repeat(3, 1fr);
}
.search-input {
order: 1;
}
.search-input input {
border-radius: clamp(7px, 2.051vw, 9px);
padding: clamp(6px, 1.795vw, 8px) clamp(14px, 3.846vw, 16px) clamp(6px, 1.795vw, 8px) clamp(45px, 12.051vw, 49px);
height: 56px;
}
.search-input .input__wrapper .submit {
left: clamp(15px, 4.103vw, 17px);
width: 20px;
}
.header-menu-group {
padding: clamp(14px, 3.846vw, 16px) clamp(15px, 4.103vw, 17px) clamp(17px, 4.615vw, 19px) clamp(15px, 4.103vw, 17px);
gap: clamp(15px, 4.103vw, 17px);
border-radius: clamp(7px, 2.051vw, 9px);
}
.header-menu-group .title {
margin-bottom: clamp(2.5px, 0.769vw, 3.5px);
}
.header-hidden-menu__inner-col {
gap: clamp(7px, 2.051vw, 9px);
grid-column: span 3;
}
.header-hidden-menu__inner-col:nth-child(2) {
order: 2;
}
.header-hidden-menu__inner-col:nth-child(3) {
order: 4;
}
.header-hidden-menu__inner-col:nth-child(4) {
order: 3;
}
.header-hidden-menu__inner-col .page-link {
padding: clamp(15px, 4.103vw, 17px);
border-radius: clamp(7px, 2.051vw, 9px);
gap: clamp(11px, 3.077vw, 13px);
min-height: 56px;
}
.header-hidden-menu__inner-col .page-link img {
width: clamp(19px, 5.128vw, 21px);
margin-top: -1px;
}
body.-apple .header-hidden-menu__inner-col .page-link {
padding-top: clamp(15px, 4.103vw, 17px)
;
padding-bottom: clamp(15px, 4.103vw, 17px)
;
}
body.-apple .header-hidden-menu__inner-col .page-link img {
margin-top: clamp(-2.5px, -0.769vw, -3.5px);
}
.header-hidden-menu .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
top: clamp(12px, 3.333vw, 14px);
bottom: clamp(19px, 5.128vw, 21px);
}
.header-hidden-menu .os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,
.header-hidden-menu .os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before {
left: 0;
right: 0;
}
body.-apple .circle-border-link {
padding-top: 3px;
padding-bottom: 0;
}
body.-apple .circle-border-link img {
margin-top: -1px;
}
/* footer */
.footer__container {
border-radius: clamp(15px, 4.103vw, 17px) clamp(15px, 4.103vw, 17px) 0px 0px;
padding: clamp(38px, 10.256vw, 42px) clamp(19px, 5.128vw, 21px);
}
.footer-form {
gap: 0;
}
.footer-form__right {
display: none;
}
.footer-form__left .title {
margin-top: clamp(12px, 3.333vw, 15px);
}
.footer-form__left .title img {
margin-top: -5px;
margin-right: -4px;
margin-left: 1px;
height: clamp(31px, 8.205vw, 33px);
}
.footer-form__left .form-wrapper {
margin-top: clamp(34px, 8.974vw, 36px);
}
.footer-form .button {
margin-top: clamp(23px, 6.154vw, 25px);
}
.footer-form .--checkbox,
.footer-form .description {
margin-top: clamp(31px, 8.205vw, 33px);
}
.footer__row {
grid-template-columns: repeat(2, 1fr);
gap: clamp(38px, 10.256vw, 42px);
}
.footer__row:not(:first-child) {
padding: clamp(35px, 9.487vw, 39px) 0 clamp(40px, 10.769vw, 44px) 0;
}
.footer__top:not(:first-child) {
margin-top: clamp(38px, 10.256vw, 42px);
}
.footer__top .link {
margin-top: clamp(15px, 4.103vw, 17px);
}
.footer__main .title {
margin-bottom: clamp(15px, 4.103vw, 17px);
}
.footer__main .link+.link {
margin-top: clamp(15px, 4.103vw, 17px);
}
.footer .app-link {
height: clamp(46px, 12.308vw, 50px);
}
.footer .app-link+.app-link {
margin-top: clamp(7px, 2.051vw, 9px);
}
.circle-border-link {
border-radius: clamp(78px, 20.513vw, 82px);
padding: 0 clamp(22px, 5.897vw, 24px);
gap: clamp(9px, 2.564vw, 11px);
height: clamp(46px, 12.308vw, 50px);
}
.circle-border-link img {
width: clamp(19px, 5.128vw, 21px);
}
.footer__bottom {
padding-top: clamp(38px, 10.000vw, 40px);
gap: clamp(38px, 10.256vw, 42px);
}
.footer__bottom-left .footer__bottom-copyright {
margin-top: clamp(38px, 10.256vw, 42px);
}
.footer__bottom-menu {
flex-wrap: wrap;
gap: clamp(11px, 3.077vw, 13px);
}
.social-list {
gap: clamp(7px, 2.051vw, 9px);
}
.social-item {
padding: clamp(11px, 3.077vw, 13px);
border-radius: 50%;
width: clamp(46px, 12.308vw, 50px);
}
/* service-card */
.service-card {
max-width: 500px;
}
.service-card__inner {
padding: clamp(15px, 4.103vw, 17px);
border-radius: clamp(15px, 4.103vw, 17px);
flex-direction: column-reverse;
}
.service-card__text {
padding: clamp(30px, 8.205vw, 34px) 0 0 0;
}
.service-card__text .img {
display: none;
}
.service-card__text .title {
margin-top: 0;
}
.service-card__text .text {
margin: clamp(11px, 3.077vw, 13px) 0 clamp(30px, 8.205vw, 34px) 0;
}
.service-card__text .button {
width: 100%;
}
.service-card__img {
width: 100%;
min-width: 100%;
border-radius: clamp(7px, 2.051vw, 9px);
}
.service-card__img img {
aspect-ratio: 318/266;
border-radius: clamp(7px, 2.051vw, 9px);
}
/* rebrand-banner */
body.-has-banner .header {
top: clamp(38px, 10.256vw, 42px);
}
body.-has-banner {
padding-top: clamp(38px, 10.256vw, 42px);
}
body.-has-banner .header-hidden-menu {
height: calc(var(--window-inner-height) - clamp(38px, 10.256vw, 42px));
}
.rebrand-banner:has(+.header.-hide) {
transform: translateY(calc(-100% - clamp(38px, 10.256vw, 42px)));
}
body.-has-banner .header.-hide {
transform: translateY(calc(-100% - clamp(38px, 10.256vw, 42px)));
}
.rebrand-banner {
height: clamp(38px, 10.256vw, 42px);
}
.rebrand-banner .close {
width: clamp(50px, 13.333vw, 54px);
padding-right: clamp(3px, 1.026vw, 5px);
align-items: center;
justify-content: center;
}
.rebrand-banner .close:before {
width: clamp(15px, 4.103vw, 17px);
}
.rebrand-banner .conveyor-belt__belt {
position: relative;
z-index: 0;
justify-content: flex-start;
}
.rebrand-banner .conveyor-belt__belt-part {
gap: clamp(9px, 2.564vw, 11px);
padding-right: clamp(9px, 2.564vw, 11px);
}
.rebrand-banner:after {
right: clamp(50px, 13.333vw, 54px);
width: clamp(78px, 20.513vw, 82px);
}
.rebrand-banner .mobile-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
/* .industry-card */
.industry-card {
border-radius: clamp(5px, 1.538vw, 7px);
padding: clamp(23px, 6.154vw, 25px);
aspect-ratio: auto;
}
.industry-card .title {
margin-top: clamp(34px, 9.231vw, 38px);
}
.industry-card .title:after {
position: relative;
opacity: 1;
width: 25px;
transform: none;
margin-top: 1px;
}
body.-apple .industry-card .title:after {
margin-top: 0;
}
/* .statistic-card */
.statistic-card {
border-radius: clamp(7px, 2.051vw, 9px);
padding: clamp(15px, 4.103vw, 17px);
gap: clamp(7px, 2.051vw, 9px);
}
.statistic-card__text .text {
margin-top: clamp(8px, 2.308vw, 10px);
}
.statistic-card .img {
border-radius: 50%;
padding: clamp(15.8px, 4.308vw, 17.8px);
width: clamp(54px, 14.359vw, 58px);
margin-top: clamp(70px, 18.462vw, 74px);
}
/* article-preview */
.article-preview .img {
border-radius: clamp(7px, 2.051vw, 9px)
/*8px*/
;
}
.article-preview .section-tag {
margin-top: clamp(19px, 5.128vw, 21px)
/*20px*/
;
}
.article-preview .title {
margin-top: clamp(15px, 4.103vw, 17px);
}
.article-preview .date {
margin-top: clamp(15px, 4.103vw, 17px);
gap: clamp(3px, 1.026vw, 5px);
}
.article-preview .date:before {
width: clamp(17px, 4.615vw, 19px);
}
/* event-card */
.event-card {
padding: clamp(15px, 4.103vw, 17px) clamp(15px, 4.103vw, 17px) clamp(15px, 4.103vw, 17px) 0;
border-radius: clamp(7px, 2.051vw, 9px);
gap: clamp(23px, 6.154vw, 25px);
}
.event-card .img {
width: clamp(70px, 18.462vw, 74px);
margin-left: clamp(28px, 7.692vw, 32px);
}
.event-card .img:before {
width: clamp(28px, 7.692vw, 32px);
}
.event-card .title {
margin-top: clamp(7px, 2.051vw, 9px);
text-align: left;
}
.event-card .date {
gap: clamp(7px, 2.051vw, 9px);
}
.event-card .date:before {
width: clamp(13px, 3.590vw, 15px);
}
}
@media screen and (max-width: 760px) {
.footer__row {
display: flex;
flex-direction: column;
}
.footer__top {
gap: clamp(30px, 8.205vw, 34px);
}
.footer__bottom {
flex-direction: column-reverse;
}
.footer__bottom-menu {
flex-direction: column;
}
}