:root { --font: "Museo Sans Cyrl", sans-serif; --font-secondary: "Merriweather", sans-serif; --clr-black: #191919; --clr-blue: #4269f5; --clr-white: #fff; --clr-grey: #929396; --clr-red: #ed1e24; --clr-red-gradient: radial-gradient(314.73% 103.43% at 56.09% 57.29%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.00) 43.74%), #ED1E24; --clr-bg-grey: #f5f5f5; --clr-bg-white: #fff; --clr-border: rgba(146, 147, 150, 0.35); --fs-general: 17; } html { overflow-x: hidden; scroll-padding-top: 140px; } body { font-family: var(--font); font-weight: 500; font-size: calc(var(--fs-general) * 1px); line-height: 135%; color: var(--clr-black); background: var(--clr-bg-white); } html.fixed, body.fixed { overflow: hidden; } *[class*=__container]:not(.fancybox__container) { width: 100%; max-width: 1284px; margin: 0 auto; padding: 0 42px; } a { color: var(--clr-black); text-decoration: none; } a.modal__open { text-decoration: underline; } p b, p strong { font-weight: 700; } h1 { font-size: 62px; font-size: calc((var(--fs-general) + 43) * 1px); font-weight: 900; line-height: 110%; } h2 { font-size: calc((var(--fs-general) + 23) * 1px); font-weight: 700; line-height: 120%; letter-spacing: 1.2px; } hr { border: none; width: 100%; height: 1px; background: var(--clr-border); } a.btn { text-decoration: none; } /* Sections */ .section { padding-top: 112px; padding-bottom: 112px; } .section:last-child:not(.similar) { padding-bottom: 112px !important; } .section--nopadding { padding: 0 !important; } .section--bg { background: var(--clr-bg-grey); } .section__header { margin-bottom: 46px; } .section__header--jcsb { 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; gap: 42px; } .section__title p { font-size: 40px; font-weight: 700; line-height: 120%; letter-spacing: 1.2px; } .section__title--540 { max-width: 540px; } .section__title--620 { max-width: 620px; } .section__title--720 { max-width: 720px; } .section__title--840 { max-width: 840px !important; } .section__title--920 { max-width: 920px !important; } .section__title--center { text-align: center; } .section__title-46 h1 { font-size: calc((var(--fs-general) + 29) * 1px); } .section__grid { display: grid; gap: 24px; } .section__grid-2 { grid-template-columns: repeat(auto-fit, minmax(490px, 1fr)); } @media screen and (max-width: 1070px) { .section__grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } .section__grid-3 { grid-template-columns: repeat(3, minmax(320px, 1fr)); } @media screen and (max-width: 1070px) { .section__grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } .section__grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .section__item { border-radius: 16px; background: var(--clr-bg-grey); padding: 32px; } .section__item p { font-size: calc((var(--fs-general) + 3) * 1px); font-weight: 700; line-height: 130%; margin-right: 16px; } .section__item span { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 135%; color: var(--clr-grey); margin-right: 10px; } .section__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 22px 32px; margin-top: 42px; } .section__links a { font-weight: 500; line-height: 125%; letter-spacing: 0.175px; position: relative; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .section__links a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1.5px; background: var(--clr-blue); -webkit-transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out; transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out; } @media (hover: hover) { .section__links a:hover { color: var(--clr-blue); } .section__links a:hover::after { bottom: -5px; opacity: 0.3; } } .section__thumbnail { 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; width: 100%; height: 620px; border-radius: 24px; overflow: hidden; margin-left: auto; margin-right: auto; } .section__thumbnail img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .section__pagenavi { margin-top: 74px; } /* Buttons */ .btn { padding: 24px 58px; border-radius: 90px; font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 700; line-height: normal; letter-spacing: 0.54px; color: var(--clr-white); text-align: center; } .btn--red { background: var(--clr-red-gradient); } .btn--blue { background: var(--clr-blue); } .btn--white { background: var(--clr-bg-white); color: var(--clr-black); } .btn--border { 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; gap: 12px; background: none; font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 700; color: var(--clr-black); padding: 22px; border-radius: 40px; border: 1px solid var(--clr-border); position: relative; -webkit-transition: gap 0.2s ease-in-out, background 0.1s ease-in-out, border-color 0.1s ease-in-out; transition: gap 0.2s ease-in-out, background 0.1s ease-in-out, border-color 0.1s ease-in-out; } .btn--border::after { content: ""; display: inline-block; width: 21px; height: 18px; background: url("../icons/i-btn-arrow.svg") center no-repeat; } @media (hover: hover) { .btn--border:hover { gap: 26px; background: var(--clr-bg-white); border-color: #fff; } } .btn--icon { 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: 14px; padding: 37px 58px; -webkit-transition: gap 0.15s ease-in-out; transition: gap 0.15s ease-in-out; } .btn--icon::after { content: ""; width: 20px; min-width: 20px; height: 20px; background: url("../icons/i-arrow.svg") center no-repeat; opacity: 0.5; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } @media (hover: hover) { .btn--icon:hover { gap: 22px; } .btn--icon:hover::after { opacity: 1; } } /* Section After BG */ .services .section__container, .quiz .section__container, .reviews .section__container, .team .section__container { position: relative; z-index: 1; } .services .section__container::after, .quiz .section__container::after, .reviews .section__container::after, .team .section__container::after { content: ""; width: 765px; height: 765px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); -ms-flex-negative: 0; flex-shrink: 0; border-radius: 900px; opacity: 0.4; background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E7), color-stop(85.65%, rgba(255, 255, 255, 0))); background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0) 85.65%); position: absolute; left: -140px; top: -60px; z-index: -2; } .cases .section__container, .why .section__container, .steps .section__container, .page__company .page__hero .section__container, .page__reviews .page__hero .section__container { position: relative; z-index: 1; } .cases .section__container::after, .why .section__container::after, .steps .section__container::after, .page__company .page__hero .section__container::after, .page__reviews .page__hero .section__container::after { content: ""; width: 644px; height: 644px; -webkit-transform: rotate(15deg); transform: rotate(15deg); -ms-flex-negative: 0; flex-shrink: 0; border-radius: 900px; opacity: 0.3; background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E7), color-stop(85.65%, rgba(255, 255, 255, 0))); background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0) 85.65%); position: absolute; right: -110px; top: -50px; z-index: -2; } /* Header */ .header { width: 100%; background: var(--clr-bg-grey); padding: 32px 0; padding: 24px 0; position: fixed; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 155; -webkit-transition: padding 0.15s ease-in-out; transition: padding 0.15s ease-in-out; } .header.sticky { padding: 20px 0; background: var(--clr-bg-white); -webkit-box-shadow: 0 9px 26px rgba(51, 51, 51, 0.04); box-shadow: 0 9px 26px rgba(51, 51, 51, 0.04); border-bottom: 1px solid #efefef; } .header__container { 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; gap: 32px; position: relative; } .header__logo { position: relative; z-index: 355; } .header__nav-contacts { display: none; } .header__nav-list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header__nav-list ul li { padding-left: 12px; padding-right: 12px; } .header__nav-list ul li.current-menu-item a::after { width: 100%; } .header__nav-list ul li a { position: relative; padding-top: 24px; padding-bottom: 24px; } .header__nav-list ul li a::after { content: ""; position: absolute; bottom: 20px; left: 0; width: 0; height: 2px; background: var(--clr-red); -webkit-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } @media (hover: hover) { .header__nav-list ul li a:hover::after { width: 100%; } } .header__nav-list ul li.submenu { position: relative; } .header__nav-list ul li.submenu::after { content: ""; display: inline-block; width: 8px; height: 8px; background: url("../icons/i-submenu.svg") center no-repeat; margin-left: 2px; position: relative; bottom: 1px; -webkit-transition: background 0.1s ease-in-out, -webkit-transform 0.22s ease-in-out; transition: background 0.1s ease-in-out, -webkit-transform 0.22s ease-in-out; transition: transform 0.22s ease-in-out, background 0.1s ease-in-out; transition: transform 0.22s ease-in-out, background 0.1s ease-in-out, -webkit-transform 0.22s ease-in-out; } .header__nav-list ul li.submenu:hover::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); background: url("../icons/i-submenu-hover.svg") center no-repeat; } .header__nav-list ul li.submenu > a:after { display: none; } .header__nav-list ul li.submenu ul { display: none; -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: 0; min-width: 240px; position: absolute; top: 35px; left: 0; background: var(--clr-bg-white); -webkit-box-shadow: 0 9px 26px rgba(51, 51, 51, 0.1); box-shadow: 0 9px 26px rgba(51, 51, 51, 0.1); border-bottom: 1px solid #e1e1e1; padding-top: 15px; padding-bottom: 15px; border-radius: 12px; } .header__nav-list ul li.submenu ul li { padding-left: 24px; padding-right: 24px; width: 100%; } .header__nav-list ul li.submenu ul li:has(b) a { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 700; padding-bottom: 6px; } .header__nav-list ul li.submenu ul li:has(b):not(:first-child) { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--clr-border); } @media (hover: hover) { .header__nav-list ul li.submenu ul li:hover a { color: var(--clr-red); } } .header__nav-list ul li.submenu ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; padding-top: 2px; padding-bottom: 2px; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .header__nav-list ul li.submenu ul li a::after { bottom: 4px; display: none; } .header__nav-list ul li.submenu:hover ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .header__nav-list.visible { 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; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--clr-bg-white); z-index: 255; padding-top: 40px; padding: 0 24px; } .header__nav-list.visible ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 3.5vh; } .header__nav-list.visible ul li { padding-left: 0; } .header__nav-list.visible ul li a { padding: 16px 10px; padding-left: 0; font-size: calc((var(--fs-general) + 4) * 1px); } .header__nav-list.visible ul li.submenu:hover ul { position: fixed; width: calc(100vw - 48px); height: calc(100vh - 48px); top: 24px; left: 24px; z-index: 455; background: var(--clr-bg-white); -webkit-box-shadow: none; box-shadow: none; overflow-y: scroll; padding-top: 130px; padding-bottom: 140px; margin-top: 60px; margin-bottom: 20px; border-radius: 0; } .header__nav-list.visible ul li.submenu:hover ul li { font-size: calc((var(--fs-general) + 2) * 1px) !important; padding-left: 0; padding-right: 0; } .header__nav-list.visible ul li.submenu:hover ul li a { width: 100%; font-size: calc((var(--fs-general) + 2) * 1px) !important; line-height: 135%; } .header__nav-list.visible .header__nav-contacts { 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: center; -ms-flex-pack: center; justify-content: center; gap: 14px; margin-top: 32px; } .header__nav-list.visible .header__nav-contacts a.btn { 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; font-size: calc((var(--fs-general) + 1) * 1px); width: auto; height: 48px; font-weight: 500; padding: 0; padding-left: 20px; padding-right: 20px; } .header__nav-list.visible .header__socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .header__nav-list.visible .header__tel { 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; } .header__nav-list.visible .header__tel-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .header__nav-list.visible .header__tel a { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: calc((var(--fs-general) + 7) * 1px); } .header__nav-list.visible .header__tel button { 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; width: auto; height: 48px; font-weight: 500; padding-left: 20px; padding-right: 20px; background: none; border: 1px solid var(--clr-black); } .header__nav-list.visible .header__tel button::before { display: none; } .header__nav-list.visible .header__tel button p { display: inline-block; font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 500; color: var(--clr-black); } .header__nav-burger { display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 52px; height: 52px; border-radius: 60px; padding: 16px 13px; background: var(--clr-red); position: absolute; right: 42px; bottom: 1px; z-index: 355; } .header__nav-burger::after { content: ""; position: absolute; width: 16px; height: 16px; background: url("../icons/i-burger-close.svg") center no-repeat; background-size: cover; pointer-events: none; opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } .header__nav-burger.opened::after { opacity: 1; } .header__nav-burger.opened span { opacity: 0; } .header__nav-burger span { display: inline-block; width: 100%; height: 2px; border-radius: 10px; background: var(--clr-bg-white); -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } .header__contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 355; } .header__socials { margin-right: 36px; } .header__socials a { -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } @media (hover: hover) { .header__socials a:hover { opacity: 0.78; } } .header__tel { 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: end; -ms-flex-align: end; align-items: flex-end; } .header__tel a { text-align: right; font-size: calc((var(--fs-general) + 7) * 1px); font-weight: 700; letter-spacing: -0.72px; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } @media (hover: hover) { .header__tel a:hover { color: var(--clr-red); } } .header__tel button { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: normal; color: var(--clr-blue); margin-top: 8px; position: relative; } .header__tel button::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--clr-blue); -webkit-transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out; transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out; } @media (hover: hover) { .header__tel button:hover::after { bottom: -6px; opacity: 0.3; } } /* Hero */ .hero { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 160px; padding-bottom: 42px; overflow: hidden; } @media screen and (min-width: 1200px) { .hero { min-height: 960px; } } .hero .section__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; position: relative; z-index: 1; } .hero__content { 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; gap: 50px; width: 100%; max-width: 620px; max-width: 720px; } .hero__desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 440px; } .hero__desc::before { content: ""; width: 32px; min-width: 32px; height: 32px; background: url("../icons/i-check-blue.svg") center no-repeat; margin-right: 12px; } .hero__btn { 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; } .hero__btn p { color: var(--clr-grey); font-weight: 500; line-height: 130%; max-width: 400px; } .hero__btn p b { font-weight: 500; color: var(--clr-black); } .hero__btn a, .hero__btn button { margin-top: 24px; } .hero__privilege { 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; gap: 26px; padding: 24px; border-radius: 20px; background: var(--clr-bg-white); margin-top: 90px; } .hero__privilege-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; min-width: 190px; max-width: 330px; } .hero__privilege-item p { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 130%; } .hero__bg { position: absolute; right: 0; bottom: -46px; z-index: -1; pointer-events: none; } .hero__bg::after { content: ""; width: 765px; height: 765px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -ms-flex-negative: 0; flex-shrink: 0; border-radius: 900px; opacity: 0.5; background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E7), color-stop(85.65%, rgba(255, 255, 255, 0))); background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0) 85.65%); position: absolute; left: -30px; bottom: -100px; z-index: -2; -webkit-animation: herobgafter 2s ease-in-out; animation: herobgafter 2s ease-in-out; } @-webkit-keyframes herobgafter { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); opacity: 0.1; } 100% { -webkit-transform: scale(1) rotate(30deg); transform: scale(1) rotate(30deg); opacity: 0.5; } } @keyframes herobgafter { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); opacity: 0.1; } 100% { -webkit-transform: scale(1) rotate(30deg); transform: scale(1) rotate(30deg); opacity: 0.5; } } .hero__bg img { pointer-events: none; } .hero__expert { 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; gap: 8px; width: 210px; padding: 18px 22px; border-radius: 12px; background: var(--clr-bg-white); position: absolute; left: -10px; bottom: 330px; z-index: 2; } .hero__expert p { font-size: calc((var(--fs-general) + 5) * 1px); font-weight: 700; line-height: 110%; letter-spacing: 0.44px; } .hero__expert span { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 130%; color: var(--clr-grey); } /* Privilege */ .privilege:has(+ .why) { padding-bottom: 0; } .privilege__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 14px; } .privilege__item img { margin-bottom: 6px; } /* Services */ .services__rows { margin-top: 72px; } .services__row:not(:last-child) { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #E7E7E7; } .services__row-title { margin-bottom: 20px; } .services__row-title p { font-size: calc((var(--fs-general) + 3) * 1px); font-weight: 600; line-height: 125%; letter-spacing: 0.4px; } .services__row-item { 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; gap: 20px; padding: 24px; border-radius: 14px; background: var(--clr-bg-white); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } @media (hover: hover) { .services__row-item:hover { -webkit-transform: scale(1.03); transform: scale(1.03); } .services__row-item:hover .services__item-btn { background: var(--clr-red-gradient); } .services__row-item:hover .services__item-btn::after { background: url("../icons/i-services-arrow-hover.svg") center no-repeat; -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .services__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 46px; width: 100%; } .services__item-content p { font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 500; line-height: 140%; } .services__item-btn { 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; width: 42px; min-width: 42px; height: 42px; border-radius: 8px; background: var(--clr-bg-grey); position: relative; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .services__item-btn::after { content: ""; position: absolute; width: 16px; height: 16px; background: url("../icons/i-services-arrow.svg") center no-repeat; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } /* Why */ .why__item { 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; padding: 12px 12px 0 12px; border-radius: 20px; background: var(--clr-bg-white); -webkit-box-shadow: 0px 12px 72px 0px rgba(137, 137, 137, 0.16); box-shadow: 0px 12px 72px 0px rgba(137, 137, 137, 0.16); } .why__item-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 100%; height: 200px; padding: 24px; border-radius: 16px; overflow: hidden; position: relative; z-index: 1; } .why__item-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 36px; } .why__item-number { 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; position: relative; z-index: 1; } .why__item-number::after { content: ""; width: 19px; height: 56px; background: url("../icons/i-why-after.svg") center no-repeat; position: absolute; left: 100%; } .why__item-number::before { content: ""; width: 142px; height: 142px; -webkit-transform: rotate(90deg); transform: rotate(90deg); position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(#ED1E24), color-stop(85.65%, rgba(237, 30, 36, 0))); background: linear-gradient(180deg, #ED1E24 0%, rgba(237, 30, 36, 0) 85.65%); opacity: 0.5; border-radius: 200px; z-index: -1; -webkit-animation: whynumberafter 1s ease-in-out; animation: whynumberafter 1s ease-in-out; } @-webkit-keyframes whynumberafter { 0% { -webkit-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); opacity: 0; } 100% { -webkit-transform: scale(1) rotate(90deg); transform: scale(1) rotate(90deg); opacity: 0.5; } } @keyframes whynumberafter { 0% { -webkit-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); opacity: 0; } 100% { -webkit-transform: scale(1) rotate(90deg); transform: scale(1) rotate(90deg); opacity: 0.5; } } .why__item-number p { color: var(--clr-white); text-align: right; font-size: calc((var(--fs-general) + 13) * 1px); font-weight: 700; line-height: 130%; } .why__item-title { max-width: 360px; position: relative; z-index: 1; } .why__item-title p { color: var(--clr-white); font-family: var(--font-secondary); font-size: calc((var(--fs-general) + 4) * 1px); font-weight: 700; line-height: 140%; letter-spacing: 1px; } .why__item-img { 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; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1; } .why__item-img::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(25, 25, 25, 0.75)), color-stop(75%, rgba(25, 25, 25, 0))); background: linear-gradient(0deg, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0) 75%); } .why__item-img img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .why__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 37px; -ms-flex-item-align: stretch; align-self: stretch; padding: 20px 32px; position: relative; margin: auto 0; } .why__item-content::before { content: ""; width: 42px; min-width: 42px; height: 42px; background: url("../icons/i-check-blue.svg") center no-repeat; } .why__item-content p { font-size: calc(var(--fs-general) * 1px); font-style: normal; font-weight: 500; line-height: 140%; } .why__item-content p b, .why__item-content p strong { font-weight: 700; } .why__partners { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 46px; border-radius: 20px; background: var(--clr-blue); margin-top: 32px; } .why__partners p { color: var(--clr-white); font-size: calc(var(--fs-general) * 1px); font-weight: 500; line-height: 145%; max-width: 260px; } .why__partners p b { font-weight: 700; } .why__partners-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 46px; background: var(--clr-white); border-radius: 14px; width: 100%; } .why__partners-logo img { width: auto; max-height: 25px; } /* Quiz */ .quiz__content { width: 100%; max-width: 1160px; border-radius: 20px; margin-left: auto; margin-right: auto; overflow: hidden; } .quiz__demo { width: 100%; height: 560px; background: var(--clr-bg-white); } /* Cases */ .cases__header-number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .cases__header-number span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; position: relative; color: var(--clr-red); font-size: calc((var(--fs-general) + 38) * 1px); font-weight: 600; line-height: normal; letter-spacing: 0.55px; } .cases__header-number span::after { content: ""; width: 4px; height: 64px; background: var(--clr-red); border-radius: 4px; -webkit-transform: rotate(14deg); transform: rotate(14deg); } .cases__header-number p { width: 140px; } .cases__content { margin-top: 92px; border-radius: 22px; background: var(--clr-bg-grey); padding: 24px; } .cases__content:not(:has(a.btn)) { row-gap: 76px; } .cases__item { 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; gap: 42px; background: var(--clr-bg-white); border-radius: 20px; } .cases__item span { font-size: calc((var(--fs-general) - 1) * 1px); color: var(--clr-grey); } .cases__item p { font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 600; } .cases__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 55px; } .cases__img { width: 185px; min-width: 185px; margin-top: -90px; } .cases__img img { width: 100%; height: auto; } .cases__info { 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; gap: 20px; } .cases__info-item { 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; gap: 4px; } .cases__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; width: 100%; } .cases__bottom > div { 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; gap: 4px; padding: 14px 20px; padding-right: 12px; border-radius: 12px; width: inherit; } .cases__requested { background: var(--clr-bg-grey); } .cases__recovered { background: var(--clr-blue); } .cases__recovered p, .cases__recovered span { color: var(--clr-bg-white); } .cases a.btn { grid-column: 1/3; } /* Reviews */ .reviews__header { 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; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; margin-bottom: 46px; } .reviews__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; } .reviews__btns-item { 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: center; -ms-flex-align: center; align-items: center; gap: 8px; } .reviews__btns-item button { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 600; padding: 20px 36px; min-width: 190px; -webkit-transition: background 0.15s ease-in-out, color 0.15s ease-in-out; transition: background 0.15s ease-in-out, color 0.15s ease-in-out; } @media (hover: hover) { .reviews__btns-item button:hover:not(.btn--blue) { background: var(--clr-blue); color: var(--clr-white); } } .reviews__btns-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; line-height: 140%; } .reviews__btns-info span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2px; font-size: calc((var(--fs-general) + 3) * 1px); font-weight: 700; } .reviews__btns-info span::after { content: ""; width: 20px; height: 20px; background: url("../icons/i-rating.svg") center no-repeat; } .reviews__btns-info p { font-size: calc((var(--fs-general) - 4) * 1px); font-weight: 500; text-decoration-line: underline; } .reviews__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .reviews__nav button { 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; width: 46px; height: 46px; background: var(--clr-bg-white); border-radius: 90px; position: relative; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .reviews__nav button::before { content: ""; position: absolute; width: 8px; height: 18px; background: url("../icons/i-nav-arrow.svg") center no-repeat; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } @media (hover: hover) { .reviews__nav button:hover { background: var(--clr-red); } .reviews__nav button:hover::before { background: url("../icons/i-nav-arrow-hover.svg") center no-repeat; } } .reviews__nav-prev::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .reviews__tab--hidden { display: none; } .reviews__item a { display: inline-block; width: 100%; border-radius: 20px; overflow: hidden; } .reviews__item a img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .reviews__item-video { height: 260px !important; border-radius: 20px; overflow: hidden; } .reviews__item-video iframe { width: 100%; height: 100%; } /* Steps */ .steps__item { 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; gap: 20px; padding: 32px; border-radius: 16px; border: 1px solid var(--clr-border); } .steps__item-highlight { background: url("../img/step__highlight.webp") bottom right no-repeat, var(--clr-blue); background-size: contain; } @media screen and (min-width: 1040px) { .steps__item-highlight { grid-column: 2/4; } } .steps__item-highlight .steps__item-title, .steps__item-highlight .steps__item-info { max-width: 390px; } .steps__item-highlight .steps__item-title p, .steps__item-highlight .steps__item-title span, .steps__item-highlight .steps__item-info p, .steps__item-highlight .steps__item-info span { color: var(--clr-bg-grey); } .steps__item-highlight .steps__item-title span::after { background: url("../icons/i-step-after-white.svg") center no-repeat; opacity: 0.5; } .steps__item-highlight .steps__item-info p { opacity: 0.7; } .steps__item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; -ms-flex-item-align: stretch; align-self: stretch; line-height: 130%; font-weight: 700; } .steps__item-title span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; color: var(--clr-blue); text-align: right; font-size: calc((var(--fs-general) + 7) * 1px); } .steps__item-title span::after { content: ""; width: 19px; height: 56px; background: url("../icons/i-step-after.svg") center no-repeat; } .steps__item-title p { font-size: calc((var(--fs-general) + 2) * 1px); } .steps__item-info p { color: var(--clr-grey); font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 135%; } /* Form CTA */ .cta .section__container { border-radius: 32px; background: url("../img/form_bg.webp") center no-repeat, var(--clr-bg-grey); background-size: cover; padding: 64px 76px; } .cta .section__desc { margin-bottom: 14px; } .cta .section__desc p { font-weight: 500; line-height: 135%; color: var(--clr-grey); } .cta__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; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; width: 100%; max-width: 420px; } .cta__form form input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-item-align: stretch; align-self: stretch; width: 100%; border: none; outline: none; padding: 30px 32px; border-radius: 70px; background: var(--clr-bg-white); -webkit-box-shadow: 0px 10px 42px 0px rgba(137, 137, 137, 0.04); box-shadow: 0px 10px 42px 0px rgba(137, 137, 137, 0.04); color: var(--clr-black); font-family: var(--font); font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 500; letter-spacing: 0.5px; -webkit-transition: padding 0.2s ease-in-out; transition: padding 0.2s ease-in-out; } .cta__form form input::-webkit-input-placeholder { color: var(--clr-grey); -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .cta__form form input::-moz-placeholder { color: var(--clr-grey); -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .cta__form form input:-ms-input-placeholder { color: var(--clr-grey); -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .cta__form form input::-ms-input-placeholder { color: var(--clr-grey); -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .cta__form form input::placeholder { color: var(--clr-grey); -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } @media (hover: hover) { .cta__form form input:hover { padding-left: 40px; } .cta__form form input:hover::-webkit-input-placeholder { color: var(--clr-black); } .cta__form form input:hover::-moz-placeholder { color: var(--clr-black); } .cta__form form input:hover:-ms-input-placeholder { color: var(--clr-black); } .cta__form form input:hover::-ms-input-placeholder { color: var(--clr-black); } .cta__form form input:hover::placeholder { color: var(--clr-black); } } .cta__form form button { width: 100%; height: 92px; -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } @media (hover: hover) { .cta__form form button:hover { opacity: 0.9; -webkit-transform: scale(0.99); transform: scale(0.99); } .cta__form form button:active { -webkit-transform: scale(0.97); transform: scale(0.97); } } /* Articles */ .articles__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .articles__nav button { 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; width: 46px; height: 46px; background: var(--clr-bg-grey); border-radius: 90px; position: relative; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .articles__nav button::before { content: ""; position: absolute; width: 8px; height: 18px; background: url("../icons/i-nav-arrow.svg") center no-repeat; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } @media (hover: hover) { .articles__nav button:hover { background: var(--clr-red); } .articles__nav button:hover::before { background: url("../icons/i-nav-arrow-hover.svg") center no-repeat; } } .articles__nav-prev::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .articles__slider { overflow: visible !important; margin-bottom: 46px; } @media (hover: hover) { .articles a.btn:hover { background: var(--clr-bg-grey); } } .articles__items:has(+ a.articles__link) { margin-bottom: 32px; } /* Article */ .similar { padding-top: 0 !important; } .similar .articles__slider { overflow: hidden !important; } .article__item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 20px; overflow: hidden; background: var(--clr-bg-grey); -webkit-transition: opacity 0.2s ease-in-out !important; transition: opacity 0.2s ease-in-out !important; } @media (hover: hover) { .article__item:hover { opacity: 1 !important; } } .article__item-img { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; height: 210px; overflow: hidden; } .article__item-img img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } @media (hover: hover) { .article__item-img:hover img { -webkit-transform: rotate(1deg) scale(1.08); transform: rotate(1deg) scale(1.08); } } .article__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; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; padding: 20px 24px; -ms-flex-item-align: stretch; align-self: stretch; } .article__item-title { font-size: calc((var(--fs-general) + 3) * 1px); font-weight: 700; line-height: 130%; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } @media (hover: hover) { .article__item-title:hover { color: var(--clr-red); } } .article__item-footer { 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; -ms-flex-item-align: stretch; align-self: stretch; padding-top: 20px; border-top: 1px solid var(--clr-border); } .article__item-footer:has(+ *) { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--clr-border); } .article__item-footer > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .article__item-footer > div::before { content: ""; width: 22px; height: 22px; } .article__item-footer > div p { color: var(--clr-grey); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; line-height: 140%; } .article__item-btn { 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; width: 100%; background: var(--clr-bg-white); font-size: calc((var(--fs-general) - 1) * 1px); padding: 18px 20px; border-radius: 40px; -webkit-transition: background 0.15s ease-in-out, color 0.15s ease-in-out; transition: background 0.15s ease-in-out, color 0.15s ease-in-out; } @media (hover: hover) { .article__item-btn:hover { background: var(--clr-blue); color: var(--clr-white); } } .article__item-date::before { background: url("../icons/i-date.svg") center no-repeat; } .article__item-min::before { background: url("../icons/i-min.svg") center no-repeat; } .article__item-count::before { background: url("../icons/i-count.svg") center no-repeat; } .article__item.swiper-slide:not(.swiper-slide-active, .swiper-slide-next) { opacity: 0.5; } .article__item.swiper-slide-next + article { opacity: 1 !important; } /* Team */ .team__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .team__nav button { 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; width: 46px; height: 46px; background: var(--clr-bg-white); border-radius: 90px; position: relative; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .team__nav button::before { content: ""; position: absolute; width: 8px; height: 18px; background: url("../icons/i-nav-arrow.svg") center no-repeat; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } @media (hover: hover) { .team__nav button:hover { background: var(--clr-red); } .team__nav button:hover::before { background: url("../icons/i-nav-arrow-hover.svg") center no-repeat; } } .team__nav-prev::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .team__slider { padding-bottom: 20px !important; } .team__item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -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: 12px; padding: 12px; border-radius: 20px; background: var(--clr-bg-white); height: auto !important; } .team__item-img { 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; width: 100%; height: 270px; border-radius: 16px; overflow: hidden; } .team__item-img img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .team__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; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 14px; -ms-flex-item-align: stretch; align-self: stretch; padding: 12px; } .team__item-name { font-size: calc((var(--fs-general) + 3) * 1px); font-weight: 700; line-height: 130%; } .team__item-info { color: var(--clr-grey); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; line-height: 140%; } /* Socials */ .socials__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; gap: 24px 12px; padding: 24px; -ms-flex-item-align: stretch; align-self: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 22px; background: var(--clr-bg-grey); } .socials__channels { width: 100%; } .socials__channel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; padding: 24px; border-radius: 20px; background: var(--clr-bg-white); } .socials__channel:hover .socials__channel-info span { background: var(--clr-blue); color: var(--clr-bg-white); border-color: var(--clr-blue); } .socials__channel-icon { 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; min-width: 64px; width: 64px; height: 64px; } .socials__channel-icon img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .socials__channel-info { 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; gap: 16px; } .socials__channel-info p { font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 700; line-height: 140%; } .socials__channel-info span { 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: center; -ms-flex-align: center; align-items: center; gap: 4px; padding: 8px 20px; border-radius: 12px; border: 1px solid var(--clr-border); background: var(--clr-bg-white); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; -webkit-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.15s ease-in-out; transition: background 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.15s ease-in-out; } .socials__chats { grid-template-columns: 1fr 2fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .socials__chats-info { 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: center; -ms-flex-pack: center; justify-content: center; gap: 6px; position: relative; padding-left: 62px; } .socials__chats-info::before { content: ""; width: 42px; height: 42px; background: url("../icons/i-socials-info.svg") center no-repeat; position: absolute; left: 0; } .socials__chats-info p { font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 700; line-height: 140%; } .socials__chats-info span { color: var(--clr-grey); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; line-height: 150%; max-width: 260px; } .socials__chats-links { grid-template-columns: repeat(3, 1fr); gap: 12px; } .socials__chat { 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: 12px; padding: 20px; border-radius: 12px; background: var(--clr-bg-white); } .socials__chat:hover span { background: var(--clr-blue); color: var(--clr-bg-white); border-color: var(--clr-blue); } .socials__chat p { font-size: calc((var(--fs-general) - 3) * 1px); font-weight: 700; line-height: 140%; } .socials__chat span { 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: center; -ms-flex-align: center; align-items: center; gap: 4px; padding: 8px 20px; border-radius: 12px; border: 1px solid var(--clr-border); background: var(--clr-bg-white); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; -webkit-transition: background 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.15s ease-in-out; transition: background 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.15s ease-in-out; } .socials__chat-logo { 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; width: auto; height: 32px; } .socials__chat-logo img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Faq */ .faq__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .faq__item { margin-bottom: 20px; border-radius: 20px; } .faq__item.active { background: var(--clr-bg-grey); } .faq__item.active .faq__question p { background: var(--clr-blue); color: var(--clr-bg-white); } .faq__item.active .faq__question .faq__icon { background: rgba(255, 255, 255, 0.1); } .faq__item.active .faq__question .faq__icon::after { background: url("../icons/i-faq-icon-hover.svg") center no-repeat; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .faq__item.active .faq__answer { display: inline-block; } .faq__question { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; } .faq__question p { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 32px; padding-right: 90px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 20px; background: var(--clr-bg-grey); color: var(--clr-black); width: 100%; cursor: pointer; -webkit-transition: background 0.05s ease-in-out; transition: background 0.05s ease-in-out; } .faq__question:hover .faq__icon { background: var(--clr-blue); } .faq__question:hover .faq__icon::after { background: url("../icons/i-faq-icon-hover.svg") center no-repeat; } .faq__icon { 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; position: absolute; right: 32px; width: 42px; height: 42px; background: var(--clr-bg-white); border-radius: 60px; pointer-events: none; z-index: 2; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .faq__icon::after { content: ""; position: absolute; width: 20px; height: 18px; background: url("../icons/i-faq-icon.svg") center no-repeat; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; } .faq__answer { display: none; -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: 12px; padding: 24px 32px 32px 32px; width: 100%; } .faq__answer p { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 160%; } /* SEO */ .information__content { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 160%; } .information__content h2 { font-size: calc((var(--fs-general) + 5) * 1px); margin-bottom: 24px; } .information__content h2, .information__content h3, .information__content h4 { font-size: calc((var(--fs-general) + 3) * 1px); margin-bottom: 20px; } .information__content p, .information__content span, .information__content ul { display: inline-block; margin-bottom: 14px; } .information__content.half { max-height: 180px; position: relative; z-index: 1; overflow: hidden; -webkit-transition: max-height 0.7s linear; transition: max-height 0.7s linear; } .information__content.half::after { content: ""; width: 100%; height: 120px; position: absolute; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%); z-index: 2; opacity: 1; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; pointer-events: none; } .information__content.half.visible { max-height: 10000px; -webkit-transition: max-height 1s linear; transition: max-height 1s linear; } .information__content.half.visible::after { opacity: 0; } #information__more { display: inline-block; color: var(--clr-grey); font-size: calc((var(--fs-general) - 2) * 1px); font-weight: 500; line-height: 160%; text-decoration: underline; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } @media (hover: hover) { #information__more:hover { color: var(--clr-red); } } /* Footer */ .footer { background: var(--clr-black); padding-top: 62px; } .footer p, .footer a, .footer span, .footer li { color: var(--clr-bg-white); } .footer__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 62px; } .footer__columns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 32px; } .footer__info { 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; gap: 30px; width: 100%; max-width: 240px; } .footer__contacts { 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; gap: 24px; } .footer__tel { font-size: calc((var(--fs-general) + 7) * 1px); font-weight: 600; line-height: normal; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .footer__tel:hover { color: var(--clr-red); } .footer__socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .footer__socials a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 42px; height: 42px; } .footer__socials a img { width: 100%; height: 100%; } .footer__call { padding: 20px 42px; font-size: calc((var(--fs-general) - 2) * 1px); -webkit-transition: background 0.15s ease-in-out, color 0.15s ease-in-out; transition: background 0.15s ease-in-out, color 0.15s ease-in-out; } .footer__call:hover { background: var(--clr-bg-white); color: var(--clr-black); } .footer__email { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 140%; text-decoration: underline; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .footer__email:hover { color: var(--clr-red); } .footer__navigations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 120px; } .footer__navigations nav ul { 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; gap: 10px; } .footer__navigations nav ul li:not(:has(a)) { font-size: calc(var(--fs-general) * 1px); color: var(--clr-grey); } .footer__navigations nav ul li a { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: normal; -webkit-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; position: relative; } .footer__navigations nav ul li a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--clr-white); -webkit-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } @media (hover: hover) { .footer__navigations nav ul li a:hover::after { width: 100%; } } .footer__address { 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; gap: 14px; width: 100%; max-width: 200px; font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: 140%; } .footer__address span { font-size: calc(var(--fs-general) * 1px); color: var(--clr-grey); } .footer__address p { color: var(--clr-white); } .footer__address p span { color: var(--clr-white); } .footer__address p:nth-child(2):not(:last-child) { padding-bottom: 14px; border-bottom: 1px solid var(--clr-border); } .footer__bottom { 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; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 64px; padding: 24px 0; border-top: 1px solid var(--clr-border); font-weight: 300; font-size: calc((var(--fs-general) - 2) * 1px); } .footer__bottom p, .footer__bottom a { color: var(--clr-grey); } .footer__bottom a { text-decoration: underline; } @media (hover: hover) { .footer__bottom a:hover { text-decoration: none; } } .footer__agency { background: var(--clr-bg-grey); padding-top: 20px; padding-bottom: 20px; } .footer__agency .section__container { 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; gap: 12px; } .footer__agency p { font-size: calc((var(--fs-general) - 3) * 1px); color: var(--clr-grey); } .footer__agency a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } @media (hover: hover) { .footer__agency a:hover { opacity: 0.65; } } /* Swiper */ .swiper:has(.swiper-scrollbar) { padding-bottom: 20px !important; } .swiper-button-disabled { pointer-events: none; opacity: 0.3; } .swiper-scrollbar { width: 100% !important; border-radius: 6px !important; left: 0 !important; background: rgba(0, 0, 0, 0.1) !important; } .swiper-scrollbar .swiper-scrollbar-drag { background: rgba(0, 0, 0, 0.1); } /* Modal */ .modal { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2555; } .modal.opened { display: -webkit-box; display: -ms-flexbox; display: flex; } .modal__form { width: 100%; } .modal__call { width: calc(100% - 46px); max-width: 520px; } .modal__wrapper { border-radius: 20px; padding: 32px; background: var(--clr-bg-white); -webkit-box-shadow: 0 16px 42px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 16px 42px 0 rgba(0, 0, 0, 0.06); position: relative; } .modal__close { position: absolute; top: 32px; right: 32px; width: 16px; height: 16px; background: url("../icons/i-modal-close.svg") center no-repeat; background-size: cover; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } @media (hover: hover) { .modal__close:hover { opacity: 0.3; } } .modal__content { 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: center; -ms-flex-align: center; align-items: center; gap: 12px; } .modal__title p { font-weight: 600; font-size: calc((var(--fs-general) + 25) * 1px); line-height: 110%; text-align: center; } .modal__desc p { font-weight: 400; font-size: calc((var(--fs-general) - 1) * 1px); line-height: 130%; text-align: center; } .modal__form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; } .modal__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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 10px 0; width: 100%; } .modal__form form input, .modal__form form button { font-family: var(--font); width: 100%; height: 70px; border: none; outline: none; } .modal__form form input { border-radius: 90px; padding: 24px 32px; background: var(--clr-bg-grey); font-weight: 400; font-size: calc((var(--fs-general) - 1) * 1px); line-height: 130%; color: var(--clr-black); } .modal__form form input::-webkit-input-placeholder { color: var(--clr-grey); } .modal__form form input::-moz-placeholder { color: var(--clr-grey); } .modal__form form input:-ms-input-placeholder { color: var(--clr-grey); } .modal__form form input::-ms-input-placeholder { color: var(--clr-grey); } .modal__form form input::placeholder { color: var(--clr-grey); } .modal__form form button { font-size: calc(var(--fs-general) * 1px); } .modal__offera p { font-weight: 400; font-size: calc((var(--fs-general) - 4) * 1px); line-height: 130%; text-align: center; color: var(--clr-grey); } /* Modal BG */ #modal__bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(25, 25, 25, 0.14); z-index: 1555; } #modal__bg.opened { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /* Pages */ main.page { padding-top: 160px; } .page__single .breadcrumbs { margin-bottom: 32px; } .page__single .breadcrumbs__wrapper { padding: 0; border: none; border-radius: 0; } .page__reviews .reviews__nav button { background: var(--clr-red); -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } @media (hover: hover) { .page__reviews .reviews__nav button:hover { opacity: 0.8; } } .page__reviews .reviews__nav button::before { background: url("../icons/i-nav-arrow-hover.svg") center no-repeat; background-size: contain; } .page__reviews .reviews__screenshot .reviews__item a { border: 1px solid var(--clr-border); } .page__reviews button.btn--white { background: var(--clr-bg-grey); } .page__hero { padding-top: 0 !important; } .page__hero:has(+ .socials), .page__hero:has(+ .blog) { padding-bottom: 0 !important; } .page__hero .section__title { max-width: 920px; margin-bottom: 42px; } .page__hero .section__title h1 b, .page__hero .section__title h1 strong { color: var(--clr-red); } .page__hero .section__title-46 { max-width: 790px; } /* Breadcrumbs */ .breadcrumbs { margin-bottom: 46px; max-width: 100%; } .breadcrumbs__wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; padding: 14px 24px; border-radius: 12px; border: 1px solid var(--clr-border); } .breadcrumbs__wrapper a, .breadcrumbs__wrapper span, .breadcrumbs__wrapper p { font-size: calc((var(--fs-general) - 1) * 1px); font-weight: 500; line-height: normal; } .breadcrumbs__wrapper a { color: var(--clr-grey); } @media (hover: hover) { .breadcrumbs__wrapper a { -webkit-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } .breadcrumbs__wrapper a:hover { color: var(--clr-red); } } .breadcrumbs__wrapper span { color: var(--clr-grey); } /* Page Company */ .company__info { margin-top: 46px; } .company__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } .company__item-icon img { width: 46px; height: 46px; } .company__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; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 14px; } .awards:has(+ section) { padding-bottom: 0; } .awards__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 42px; } .awards__content { 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; gap: 32px; width: 100%; max-width: 520px; height: 100%; } .awards__years { 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; } .awards__years span { 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; padding: 12px 20px; border-radius: 8px; border: 1px solid var(--clr-border); } .awards__years span::before { content: ""; width: 8px; min-width: 8px; height: 8px; border-radius: 10px; background: var(--clr-red); } .awards__desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin-top: auto; margin-bottom: 20px; max-width: 480px; } .awards__desc::before { content: ""; width: 32px; min-width: 32px; height: 32px; background: url("../icons/i-check-blue.svg") center no-repeat; } .awards__desc p { line-height: 165%; } .awards__img { 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; width: 100%; max-width: 620px; height: 465px; border-radius: 16px; overflow: hidden; } .awards__img img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Page Navi */ .pagenavi__wrapper { 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; gap: 12px; } .pagenavi__wrapper li:has(.pagenavi__arrow) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0 20px; } .pagenavi__wrapper li a { -webkit-transition: color 0.1s ease-in-out, background 0.15s ease-in-out; transition: color 0.1s ease-in-out, background 0.15s ease-in-out; } .pagenavi__wrapper li a:not(.pagenavi__arrow) { 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: center; -ms-flex-align: center; align-items: center; gap: 10px; width: 46px; height: 46px; border-radius: 60px; background: var(--clr-bg-grey); font-size: calc((var(--fs-general) + 3) * 1px); } .pagenavi__wrapper li a:hover, .pagenavi__wrapper li a.pagenavi__active { background: var(--clr-blue); color: var(--clr-bg-white); } .pagenavi__wrapper li a.pagenavi__arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 22px; height: 16px; background: url("../icons/i-pagenavi-arrow.svg") center no-repeat; background-size: cover; } .pagenavi__wrapper li a.pagenavi__arrow-next { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* Contacts */ .contacts__wrapper { 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: center; -ms-flex-align: center; align-items: center; gap: 62px; } .contacts__section { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; padding: 24px; border-radius: 22px; background: var(--clr-bg-grey); width: 100%; } .contacts__info { 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; gap: 24px; padding: 32px; border-radius: 20px; background: var(--clr-bg-white); } .contacts__info-row { 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: 6px; } .contacts__info-row span { color: var(--clr-grey); font-size: calc(var(--fs-general) * 1px); } .contacts__info-row a { font-size: calc((var(--fs-general) + 6) * 1px); font-weight: 700; } .contacts__info-row p { font-size: calc(var(--fs-general) * 1px); line-height: 155%; } .contacts__info-row button { font-family: var(--font); font-size: calc((var(--fs-general) - 3) * 1px); font-weight: 700; line-height: 140%; color: var(--clr-blue); border-bottom: 1px solid; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } @media (hover: hover) { .contacts__info-row button:hover { color: var(--clr-red); } } .contacts__maps { 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; width: 100%; height: auto; max-width: 750px; border-radius: 20px; border: 6px solid var(--clr-bg-white); overflow: hidden; } .contacts__maps iframe { width: 100%; height: 100%; } .contacts__requisites { width: 100%; max-width: 740px; border-radius: 22px; border: 1px solid var(--clr-border); overflow: hidden; } .contacts__requisites span { 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; font-size: calc((var(--fs-general) + 7) * 1px); font-weight: 900; line-height: 110%; letter-spacing: 0.72px; text-align: center; padding: 32px; } .contacts__requisites-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contacts__requisites-row { display: grid; grid-template-columns: 1.5fr 2fr; padding: 20px 32px; } .contacts__requisites-row:nth-child(odd) { background: var(--clr-bg-grey); } .contacts__requisites-row p:nth-child(1) { color: var(--clr-grey); } /* Author */ .blog__author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; width: 100%; background: var(--clr-bg-grey); border-radius: 20px; padding: 32px; margin-bottom: 62px; } .blog__author-img { 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; width: 144px; min-width: 144px; height: 144px; border-radius: 90px; overflow: hidden; } .blog__author-img img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog__author-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: 6px; max-width: 720px; } .blog__author-name { font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 700; } .blog__author-job { font-size: calc((var(--fs-general) - 2) * 1px); color: var(--clr-grey); } .blog__author-desc { margin-top: 8px; } .blog__author-desc p { font-size: calc((var(--fs-general) - 1) * 1px); } /* Single */ .single { margin-top: 62px; } .single__title { 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: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 42px; padding: 64px; width: 100%; height: 440px; border-radius: 24px; position: relative; overflow: hidden; z-index: 1; } .single__title::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(33.52%, rgba(25, 25, 25, 0)), to(rgba(25, 25, 25, 0.6))), -webkit-gradient(linear, left bottom, left top, from(rgba(25, 25, 25, 0.2)), to(rgba(25, 25, 25, 0.2))); background: linear-gradient(180deg, rgba(25, 25, 25, 0) 33.52%, rgba(25, 25, 25, 0.6) 100%), linear-gradient(0deg, rgba(25, 25, 25, 0.2) 0%, rgba(25, 25, 25, 0.2) 100%); z-index: 1; } .single__title h1 { color: var(--clr-white); font-size: calc((var(--fs-general) + 29) * 1px); font-weight: 900; line-height: 115%; letter-spacing: 1.38px; max-width: 770px; position: relative; z-index: 2; } .single__thumbnail { 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; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .single__thumbnail img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .single__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; width: 100%; background: var(--clr-bg-grey); padding: 20px 32px; border-radius: 14px; margin-top: 10px; } .single__meta p, .single__meta a { font-size: calc((var(--fs-general) - 1) * 1px); } .single__meta > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .single__meta > div::before { content: ""; width: 22px; height: 22px; } .single__date::before { background: url("../icons/i-date.svg") center no-repeat; } .single__author::before { background: url("../icons/i-author.svg") center no-repeat; } .single__min { margin-left: auto; } .single__min::before { background: url("../icons/i-min.svg") center no-repeat; } .single__count::before { background: url("../icons/i-count.svg") center no-repeat; } .single__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 72px; } .single__content { width: calc(100% - 320px - 72px); font-size: calc((var(--fs-general) + 1) * 1px); font-weight: 400; line-height: 165%; } .single__content p:not(:last-child) { margin-bottom: 32px; } .single__sidebar { 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; width: 310px; } .single__call { position: sticky; min-height: 2em; top: 150px; z-index: 15; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 32px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; background: var(--clr-bg-grey); border-radius: 20px; text-align: center; } .single__call-info { 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: center; -ms-flex-align: center; align-items: center; gap: 12px; } .single__call-socials { margin: 12px 0; } .single__call-btn { width: 100%; margin-top: 12px; } .single__call-btn button { padding-left: 4px; padding-right: 4px; width: 100%; font-size: calc((var(--fs-general) - 1) * 1px); background: var(--clr-bg-white); color: var(--clr-black); -webkit-transition: background 0.15s ease-in-out, color 0.15s ease-in-out; transition: background 0.15s ease-in-out, color 0.15s ease-in-out; } .single__call-btn button:hover { background: var(--clr-red); color: var(--clr-white); } .single h2, .single h3, .single h4, .single h5, .single h6 { margin-bottom: 32px; } .single h2 { font-size: calc((var(--fs-general) + 25) * 1px); } .single h3 { font-size: calc((var(--fs-general) + 19) * 1px); } .single h4, .single h5 { font-size: calc((var(--fs-general) + 15) * 1px); } .single p i { font-weight: 700; font-style: italic; } .single p b, .single p strong { font-weight: bold; } .single p a { color: var(--clr-blue); text-decoration: underline; } @media (hover: hover) { .single p a:hover { text-decoration: none; } } .single blockquote { padding: 32px; border-radius: 20px; background: var(--clr-bg-grey); font-size: calc(var(--fs-general) * 1px); margin-top: 32px; } .single blockquote:has(+ *) { margin-bottom: 32px; } .single blockquote.blockquote__warning, .single blockquote.blockquote__info, .single blockquote.blockquote__check { padding-left: 106px; position: relative; } .single blockquote.blockquote__warning::before, .single blockquote.blockquote__info::before, .single blockquote.blockquote__check::before { content: ""; position: absolute; top: 50%; left: 32px; width: 42px; height: 42px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single blockquote.blockquote__warning { background: #FAEAE9; } .single blockquote.blockquote__warning::before { background: url("../icons/i-quote-warning.svg") center no-repeat; background-size: cover; } .single blockquote.blockquote__info { background: #FEF8E6; } .single blockquote.blockquote__info::before { background: url("../icons/i-quote-info.svg") center no-repeat; background-size: cover; } .single blockquote.blockquote__check { background: #E9F8EB; } .single blockquote.blockquote__check::before { background: url("../icons/i-quote-check.svg") center no-repeat; background-size: cover; } .single ol, .single ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; margin-top: 32px; margin-bottom: 32px; } .single ol li, .single ul li { position: relative; padding-left: 22px; } .single ol li::before, .single ul li::before { content: ""; width: 10px; height: 10px; background: var(--clr-red); border-radius: 3px; position: absolute; left: 0; top: 10px; } .single ol { counter-reset: ol; } .single ol li { padding-left: 38px; counter-increment: ol 1; } .single ol li::before { content: counter(ol); 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; width: 26px; height: 26px; color: var(--clr-white); text-align: center; font-family: var(--font); font-size: calc((var(--fs-general) - 3) * 1px); font-weight: 700; line-height: 165%; border-radius: 5px; left: 0; top: 2px; } .single img { max-width: 100%; height: auto; border-radius: 20px; } .single__gallery { position: relative; margin-top: 46px; margin-bottom: 46px; } .single__slider { height: 490px; } .single__slider a { 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; width: 100%; height: 100%; } .single__slider a img { width: auto; min-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .single__slider-nav button { 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; width: 56px; height: 56px; border-radius: 90px; background: url("../icons/i-nav-arrow-hover.svg") center no-repeat, rgba(66, 105, 245, 0.8); background-size: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; -webkit-transition: scale 0.1s ease-in-out, background 0.1s ease-in-out; transition: scale 0.1s ease-in-out, background 0.1s ease-in-out; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media (hover: hover) { .single__slider-nav button:hover { scale: 1.02; background: url("../icons/i-nav-arrow-hover.svg") center no-repeat, var(--clr-blue); background-size: 10px; } } .single__slider-nav button.swiper-button-disabled { background: url("../icons/i-nav-arrow-hover.svg") center no-repeat, rgba(66, 105, 245, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 1; pointer-events: none; } .single__slider-prev { left: -30px; -webkit-transform: translateY(-50%) rotate(180deg) !important; transform: translateY(-50%) rotate(180deg) !important; } .single__slider-next { right: -30px; }/*# sourceMappingURL=gp-style-desktop.css.map */