@font-face {
font-display: swap;
font-family: 'Gilroy-Light';
src: url(//hr-888.ru/wp-content/themes/hresurs/assets/fonts/Gilroy-Light.woff) format('woff'),
url(//hr-888.ru/wp-content/themes/hresurs/assets/fonts/Gilroy-Light.ttf) format('truetype'),
url(//hr-888.ru/wp-content/themes/hresurs/assets/fonts/Gilroy-Light.eot) format('embedded-opentype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: 'AlterBiom-Regular';
src: url(//hr-888.ru/wp-content/themes/hresurs/assets/fonts/AlterBiom.otf) format('opentype');
font-weight: 400;
font-style: normal;
}
html {
scroll-behavior: smooth;
font-family: 'Gilroy-Light', sans-serif;
font-weight: 400;
box-sizing: border-box;
overflow-x: hidden;
margin: 0;
padding: 0;
}
body, ul, li, p, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
div {
box-sizing: border-box;
}
a {
text-decoration: none;
}
:root {
--color-bg: #9B9B9B;
--color-white: #ffffff;
--color-dark: #0F0F0F;
--color-blue:#508FE7;
--color-green: #53D2BB;
--color-light: #EEF4FD;
--color-secondary-blue: #D1DBEA;
--color-secondary-stroke: rgba(255, 255, 255, 0.35);
}
.color-white {
color: var(--color-white);
}
.color-blue {
color: var(--color-blue);
}
.color-dark {
color: var(--color-dark);
}
.bg-dark {
background-color: var(--color-dark);
} .container {
width: calc(100% - 96px);
margin-inline: auto;
}
.privacy-container {
width: calc(100% - 17.7vw);
margin-inline: auto;
}
.flex {
display: flex;
}
.direction-column {
flex-direction: column;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.align-items-center {
align-items: center;
}
.align-items-start {
align-items: flex-start;
}
.align-items-end {
align-items: flex-end;
}
.align-items-stretch {
align-items: stretch;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap72 {
gap: 72px;
}
.gap60{
gap: 60px;
}
.gap48 {
gap: 48px;
}
.gap40 {
gap: 40px;
}
.gap32 {
gap: 32px;
}
.gap24 {
gap: 24px;
}
.gap8 {
gap: 8px;
}
.text-center {
text-align: center;
}
.text-end {
text-align: end;
}
.uppercase {
text-transform: uppercase;
}
.underline {
text-decoration: underline;
}
.font-size-94 {
font-size: clamp(25px, 4.9vw, 4.9vw);
line-height: 100%;
font-weight: 300;
}
.font-size-74 {
font-size: 74px;
line-height: 100%;
font-weight: 300;
}
.font-size-64 {
font-size: 64px;
line-height: 100%;
font-weight: 400;
}
.font-size-48 {
font-size: 48px;
line-height: 140%;
font-weight: 300;
}
.font-size-40 {
font-size: 40px;
line-height: 100%;
font-weight: 300;
}
.font-size-36 {  
font-size: 36px;
line-height: 100%;
font-weight: 300;
}
.font-size-28 {
font-size: 28px;
line-height: 100%;
font-weight: 300;
}
.font-size-20 {
font-size: 20px;
line-height: 140%;
font-weight: 300;
}
.font-size-18 {
font-size: 18px;
line-height: 140%;
font-weight: 300;
}
.font-size-14 {
font-size: 14px;
line-height: 110%;
font-weight: 300;
}
.alter {
font-family: 'AlterBiom-Regular', sans-serif;
font-weight: 400;
}
body {
background-color: var(--color-dark);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(100%);
white-space: nowrap;
border: 0;
} .header {
position: relative;
z-index: 3;
opacity: 0;
transition: all 1s;
}
.loaded .header {
opacity: 1;
}
.header-wrap {
padding-top: 32px;
gap: 72px;
}
#header-menu {
display: flex;
gap: 48px;
padding-top: 8px;
}
#header-menu a {
height: 25px;
display: inline-block;
overflow: hidden;
font-size: 18px;
line-height: 140%;
font-family: 'AlterBiom-Regular', sans-serif;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
transition: all .5s;
}
#header-menu a span {
display: block;
position: relative;
top: 0;
transition: all .5s;
}
#header-menu a:hover span {
top: -25px;
} body .gt_float_switcher, 
body .gt_float_switcher .gt-selected {
background-color: transparent;
min-width: 122px;
}
#gt_float_wrapper {
max-height: 26px;
}
body .gt_float_switcher .gt-selected .gt-current-lang,
body .gt_float_switcher .gt_options a {
font-weight: 400;
font-size: 18px;
line-height: 140%;
font-family: 'Gilroy-Light', sans-serif;
color: var(--color-white);
padding: 0;
}
body .gt_float_switcher .gt_options a {
padding-top: 10px;
}
body .gt_float_switcher .gt_options a:hover {
background-color: transparent;
}
body .gt_float_switcher img {
margin-right: 10px;
}
body .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
margin-left: 10px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23FFFFFF'/></svg>");
transform: rotate(0deg);
}
body .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.gt_arrow_rotate {
transform: rotate(180deg);
}
.header-btn-animated {
margin-left: -22px;
max-height: 48px;
}
.block-header {
align-items: flex-end;
}
.header-logo {
display: none;
} .header {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: transparent;
padding-bottom: 32px;
}
body.home .header.header--hidden,
body.home .header.header--scrolled {
position: sticky;
background-color: var(--color-dark);
transition: transform 0.6s;
}
body.home.scroll-header .header-logo {
display: block;
position: absolute;
left: 48px;
top: 32px;
opacity: 0;
transition: opacity 0.6s;
max-height: 48px;
}
body.home .header-logo.show {
opacity: 1;
}
body.home.scroll-header .header-logo svg {
width: 230px;
height: 48px;
}
.header {
transform: translateY(0);
}
.header--hidden {
transform: translateY(-100%);
}   .header-mobile {
display: none;
height: 60px;
width: 100%;
}
.home .header-mobile {
justify-content: flex-end;
}
.header-mobile__logo {
position: relative;
z-index: 1;
}
.home .header-mobile__logo {
opacity: 0;
position: absolute;
left: 16px;
transition: opacity 0.6s;
}
.home.menu-mobile-open .header-mobile__logo {
opacity: 1;
}
.header-mobile__logo svg path {
transition: all 1s;
}
body.home.scroll-header .header-mobile__logo {
display: block;
position: absolute;
left: 16px;
top: 16px;
opacity: 1;
}
.header-mobile__menu-btn {
width: 40px;
height: 40px;
cursor: pointer;
position: relative;
z-index: 1;
}
.header-mobile .header-btn-animated {
margin-inline: auto;
width: 100%;
}
.header-mobile__menu > div {
width: 100%;
}
.header-mobile__line {
position: relative;
width: 100%;
height: 2px;
background-color: var(--color-white);
transition: all 0.6s;
}
.header-mobile__menu {
position: absolute;
top: -100vh;
left: 0;
right: 0;
background-color: var(--color-light);
padding: 100px 16px 40px;
opacity: 0;
transition: all 0.6s;
}
.header-mobile__menu > div:nth-child(1) {
gap: 60px;
}
.header-mobile__menu > div:nth-child(2) {
gap: 140px;
}
.menu-mobile-open .header-mobile__menu {
top: 0;
opacity: 1;
z-index: 99;
}
.menu-mobile-open .header-mobile__logo svg path:nth-child(1),
.menu-mobile-open .header-mobile__logo svg path:nth-child(2),
.menu-mobile-open .header-mobile__logo svg path:nth-child(3),
.menu-mobile-open .header-mobile__logo svg path:nth-child(4),
.menu-mobile-open .header-mobile__logo svg path:nth-child(5) {
fill: var(--color-dark);
}
.menu-mobile-open .header-mobile__line:nth-child(1) {
transform: translateY(5px) rotate(45deg);
background-color: var(--color-dark);
}
.menu-mobile-open .header-mobile__line:nth-child(2) {
transform: translateY(-5px) rotate(-45deg);
background-color: var(--color-dark);
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 98;
opacity: 0;
visibility: hidden;
transition: all 0.6s;
}
.menu-mobile-open .mobile-menu-overlay {
opacity: 1;
visibility: visible;
}
.menu-mobile-open .header-mobile__logo,
.menu-mobile-open .header-mobile__menu-btn {
z-index: 100;
}
body.menu-mobile-open .gt_float_switcher {
box-shadow: none;
min-width: 85px;
}
body.menu-mobile-open .gt_float_switcher .gt-selected .gt-current-lang,
body.menu-mobile-open .gt_float_switcher .gt_options a {
color: var(--color-dark);
padding: 0;
}
body.menu-mobile-open .gt_float_switcher img {
width: 18px;
}
body.menu-mobile-open .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%230F0F0F'/></svg>");
}
body.menu-mobile-open .gt_float_switcher .gt_options a:hover {
color: var(--color-dark);
}
.header-mobile__menu .header-nav .menu-item span {
font-family: 'AlterBiom-Regular', sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 100%;
letter-spacing: 0;
text-transform: uppercase;
}
.header-mobile__soc {
font-family: 'Gilroy-Light', sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 140%;
letter-spacing: 0;
color: var(--color-dark);
text-decoration: underline;
}  .cookie-wrap {
background-color: var(--color-white);
position: fixed;
right: 48px;
bottom: 48px;
max-width: 624px;
width: 100%;
padding: 20px;
display: none;
z-index: 5;
box-shadow: 0px 0px 20px rgb(0 0 0/10%);
transition: all 1s;
opacity: 0;
}
.loaded .cookie-wrap {
opacity: 1;
}
.cookie-wrap a {
text-decoration: none;
border-bottom: 1px solid transparent;
width: fit-content;
transition: all .3s;
}
.cookie-close, .cookie-policy {
position: relative;
top: 8px;
margin-top: -10px;
overflow: hidden;
display: inline-block;
height: 25px;
}
.cookie-close span, .cookie-policy span {
display: block;
position: relative;
top: 0;
transition: all .5s;
}
.cookie-close:hover span, .cookie-policy:hover span {
top: -25px;
}  #preloader,
.top-row {
width: 100%;
z-index: 2;
display: flex;
}
#preloader{
background-color: #0f0f0f;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 100vh;
overflow: hidden;
}
.loader-content{
text-align: center;
position: relative;
width: 100%;
height: 100%;
}
.top-row {
position: relative;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
align-items: center;
justify-content: center;
gap: 20px;
transition: all 1s;
}
.top-row.start {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
}
.loaded .center-line {
width: 100vw;
}
#main-svg {
width: 27.34vw;
height: auto;
transition: all 1s;
}
.loaded #main-svg {
width: calc(100vw - 96px);
}
.top-row.finish {
transform: translate(-50%, 0);
top: 72px;
}
.loading-word,
.processing-word {
width: 100px;
transition: all 1s;
}
.pace-progress-text {
width: 100%;
height: fit-content;
text-align: center;
margin-top: 24px;
transition: all 1s;
}
.loaded.loading-word,
.loaded.processing-word,
.loaded.pace-progress-text {
opacity: 0;
}
.progress-text {
margin-top: 5px;
}
body:not(.home).loaded #preloader {
z-index: -1;
}
body:not(.home) .bottom-block {
display: none;
}
body:not(.home) .top-row.finish {
opacity: 0;
}
body:not(.home).loaded .header-wrap {
position: relative;
}
body:not(.home).loaded .header-logo {
display: block;
position: absolute;
left: 0;
}
.bottom-block {
position: absolute;
top: 100vh;
width: 100%;
height: 100px;
max-height: 22vw;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
transition: width 1s ease, margin-left 1s ease, top 1s ease, min-height 1s ease;
}
.bottom-block.up {
top: 12vw;
}
.bottom-block.finish {
width: calc(100% - 40px);
min-height: 142px;
height: 100%;
margin-left: 20px;
transition: width 1s ease, margin-left 1s ease, top 1s ease, min-height 1s ease;
}
.bottom-block img {
transition: all 1s;
}
.bottom-block .lazy-video {
width: 447px;
height: 100%;
object-fit: cover;
transition: width 1s ease;
}
.bottom-block.finish .lazy-video {
width: 100%;
}
.bottom-block .lazy-video-svg {
position: absolute;
width: 460px;
height: 100px;
transition: width 1s ease, min-height 1s ease;
}
.bottom-block.finish .lazy-video-svg {
width: 100vw;
height: auto;
min-height: 142px;
}
.center-line__subtitle {
display: none;
}
.home .center-line__subtitle {
display: block;
text-align: left;
opacity: 0;
transition: all 1s;
}
.home.loaded .center-line__subtitle {
opacity: 1;
}   .btn-animated-white, 
.btn-animated-blue {
padding: 10px 30px 10px 10px;
border-radius: 40px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
transition: all .3s;
}
.btn-animated-white,
.btn-animated-blue:hover {
background-color: var(--color-white);
color: var(--color-dark);
}
.btn-animated-blue,
.btn-animated-white:hover {
background-color: var(--color-blue);
color: var(--color-white);
}
.btn-animated__circle {
position: relative;
z-index: 1;
width: 32px;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.btn-animated-white .btn-animated__circle {
background-color: var(--color-blue);
transition: background-color .3s;
}
.btn-animated-white:hover .btn-animated__circle {
background-color: var(--color-white);
}
.btn-animated-white:hover .btn-animated__circle svg path {
fill: var(--color-blue);
}
.btn-animated-blue .btn-animated__circle {
background-color: var(--color-white);
transition: background-color .3s;
}
.btn-animated-blue:hover .btn-animated__circle {
background-color: var(--color-blue);
}
.btn-animated-blue .btn-animated__circle svg path {
fill: var(--color-blue);
}
.btn-animated-blue:hover .btn-animated__circle svg path {
fill: var(--color-white);
}
.btn-animated__text {
line-height: 1;
}  .text-reveal-section {
overflow: hidden;
}
.text-reveal-line {
overflow: hidden;
}
.text-reveal__word {
display: inline-block;
}
.text-reveal__word-inner {
display: inline-block;
transform: translateY(100%);
will-change: transform;
}   .main-section {
position: relative;
z-index: 2;
opacity: 0;
margin-top: 34vw;
transition: all 1s;
}
.loaded .main-section {
opacity: 1;
transition: opacity 2s;
}
.block-header__circle,
.block-header__circle svg {
width: 120px;
height: 120px;
}
.block-header__center {
max-width: 500px;
}
.block-header__center .btn-animated {
width: fit-content;
margin: 0;
}
.block-header__right p:nth-child(2n) {
margin-left: -12vw;
}
.block-header-mobile {
display: none;
}
.people-wrap {
width: 100%;
}
.people {
margin: 220px 40px;
gap: 1.875vw;
}  .gallery-wrap {
position: relative;
overflow: hidden;
}
.gallery-section {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
z-index: 1;
}
.gallery-section.fixed {
position: fixed !important;
transform: translate(0, 0) !important;
}
.gallery-container {
position: relative;
width: 100%;
height: 100%;
padding-top: 86px;
padding-bottom: 86px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.gallery-item {
flex-shrink: 0;
}
.gallery-item img {
width: inherit;
height: inherit;
object-fit: cover;
}
.gallery-item--main,
.feat-item__content {
position: relative;
z-index: 1;
transform-origin: center center;
will-change: transform;
}
.gallery-item--main.one {
transform: scale(1.5);
}
.gallery-item--main.two {
transform: scale(1.5);
}
.gallery-item--main.one::after,
.feat-item__content::after {
content: "";
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 15, 15, 0.1);  
transition: all .8s;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: all .8s;
}
.gallery-item--main.one::after {
background-color: rgba(15, 15, 15, 0.1); 
opacity: 1;
}
.gallery-item--main.two::after,
.feat-item__content::after  {
background-color: rgba(15, 15, 15, 0.2);
opacity: 1;
}
.gallery-item--main::before,
.feat-item__content::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/gallery-before.png); background-size: 28vw;
background-position: 50% 4vw;
background-repeat: no-repeat;
z-index: 2;
transition: all .8s;
opacity: 0;   }
.feat-item__content::before {
background-size: 80vw;
background-position: 50% 50%;
}
.gallery-item--main.one::before {
opacity: 1;
}
.show-round .feat-item__content::before {
opacity: 1;
}
.gallery-caption {
position: absolute;
width: 100%;
opacity: 0;
z-index: 3;
padding: 20px;
box-sizing: border-box;
will-change: transform, opacity;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 48px;
}
.gallery-caption--top { 
top: 0; 
left: 0;
padding: 48px;
}
.gallery-caption--bottom { 
bottom: 0; 
left: 0;
padding: 48px;
}
.gallery-caption--top-right {
width: 50%;
}
.position {
opacity: 30%;
}
.avtor {
width: fit-content;
}
.avtor > div:first-child {
margin-bottom: 16px;
}
.gallery-caption--bottom-item {
width: calc((100% - 48px - 48px)/3);
}
.feat-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1;
top: 0 !important;
transform: translate(0px, 0px) !important;
}
.pin-spacer:has(.feat-wrap) {
height: 100vh !important;
padding: 0 !important;
}
.feat-item {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
z-index: 1;
transform: translateY(100%);
}
.feat-item:first-child {
transform: translateY(0);
}
.feat-item__content {
width: 100%;
height: 100%;
position: relative;
}
.feat-item__content img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feat-item .gallery-caption {
opacity: 0 !important;
transition: all .8s;
}
.feat-item.show-caption .gallery-caption {
opacity: 1 !important;
} .feat-item:nth-child(1) { z-index: 1; }
.feat-item:nth-child(2) { z-index: 2; }
.feat-item:nth-child(3) { z-index: 3; }
.feat-item:nth-child(4) { z-index: 4; }
.feat-item:nth-child(5) { z-index: 5; }
.feat-item__first, .feat-item__last {
z-index: 1;
opacity: 0;
}
.feat-item:nth-child(1) img {
object-position: 100% 19%;
}
.feat-item:nth-child(2) img{
object-position: 100% 22%;
}
.feat-item:nth-child(3) img{
object-position: 100% 6%;
}
@media (prefers-reduced-motion: reduce) {
.feat-item {
transform: none;
}
}
.gallery-mobile {
display: none;
}  .questions-wrap {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
.questions-container {
position: relative;
height: 100vh;
width: 100%;
background-color: var(--color-light);
z-index: 1;
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
}
.questions-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--color-dark);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.questions {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.question {
position: absolute;
visibility: hidden;
transition: none;
}
.question:first-child {
opacity: 1;
}
.question p {
margin: 0;
line-height: 1.2;
height: 5.1vw;
line-height: 1;
}
.question:first-child p {
opacity: 1;
}
.question .line-mask:nth-child(odd) p {
margin-left: 7.3vw;
}
.questions-title__text {
width: 37.7vw;
min-width: 200px;
margin-inline: auto;
gap: 16px;
}
.questions-title__text p:last-child {
text-align: end;
}
.line-mask {
overflow: hidden;
line-height: 1;
display: flex;
height: 5.1vw;
margin-bottom: 1.5vw;
}
.line-mask p {
transform: translateY(100%);
}  .recruitment-container {
position: relative;
}
.recruitment-sticky-text {
width: 62vw;
position: sticky;
top: 170px;
padding-top: 0;
padding-bottom: 0;
z-index: -1;
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: column;
margin-inline: auto;
transition: all .8s;
}
.recruitment-sticky-text p {
font-size: 10.73vw;
line-height: 1;
}
.recruitment-sticky-text p:first-child {
position: relative;
left: -2.5vw;
}
.recruitment-cards {
display: flex;
flex-wrap: wrap;
margin: 170px 0 130px;
}
.recruitment-card {
width: calc(100% / 3);
height: calc((100vw - 96px - 15px) / 3);
padding: 48px;
border: 1px solid rgba(255, 255, 255, 0.35);
position: relative;
background-color: var(--color-dark);
}
.recruitment-card::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 80%;
height: 80%;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/recruitment.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.recruitment-card__empty {
border: none;
background-color: transparent;
}
.recruitment-card__empty::after,
.recruitment-card__gradient::after,
.recruitment-card__last::after {
display: none;
}
.recruitment-card__gradient {
background: linear-gradient(
to bottom,
rgba(15, 15, 15, 0) 0%,
rgba(15, 15, 15, 0.3) 40%,
rgba(15, 15, 15, 0.5) 50%,
rgba(15, 15, 15, 0.7) 60%,
rgba(15, 15, 15, 0.9) 70%,
rgba(15, 15, 15, 1) 80%,
rgba(15, 15, 15, 1) 100%
);
border-bottom: 1px solid #636363;
}
.recruitment-card__last {
border-right: none;
border-bottom: none;
}
.recruitment-card > div:first-child > p:first-child {
font-size: 2.5vw;
}
.recruitment-card div,
.recruitment-card p {
position: relative;
z-index: 1;
}  .services {
width: 100%;
background-color: var(--color-light);
padding-bottom: 300px;
}
.services-title__wrap {
position: relative;
height: 100vh;
margin: 0;
padding: 10vh 0;
display: flex;
align-items: flex-start;
}
.services-title {
font-size: 10.73vw;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
will-change: transform;
}
.services-title p:last-child {
margin-left: 15.05vw;
}
.services-list {
width: 40vw;
height: 100%;
}
.service-item {
cursor: pointer;
}
.service-item .font-size-74 {
font-size: 3.85vw;
}
.service-item p {
color: #D1DBEA;
transition: all .8s;
}
.service-item__icon {
width: 40px;
height: 40px;
opacity: 0;
transition: all .8s;
}
.service-item.active p {
color: var(--color-dark);
}
.service-item.active .service-item__icon {
opacity: 1;
}
.service-detail {
display: none;
}
.service-detail.active {
display: flex;
}
.service-detail .item {
position: relative;
width: calc((100% - 24px) / 2);
min-height: 120px;
padding: 24px;
background-color: var(--color-light);
border: 1px solid var(--color-dark);
overflow: hidden;
transition: all .8s;
}
.service-detail .item:hover {
background-color: var(--color-blue);
border: 1px solid var(--color-white);
}
.service-detail .item p {
position: relative;
z-index: 1;
transition: all .8s;
}
.service-detail .item:hover p {
color: var(--color-white);
}
.service-detail .item::after {
content: "";
position: absolute;
bottom: -300%;
left: 0;
width: 100%;
height: 5vw;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/service-item-bg.png);
background-size: 100%;
background-repeat: repeat-x;
background-position: center bottom;
z-index: 0;
opacity: 0;
transition: all .8s;
}
.service-detail .item:hover::after {
opacity: 1;
bottom: 0;
display: block;
}
.services-wrap__vertical {
display: none;
}  .work {
min-height: 100vh;
background-color: var(--color-dark);
position: relative;
padding: 75px 48px;
height: auto;
}
.work-title {
gap: 56px;
height: inherit;
position: relative;
z-index: 1;
}
.work-title__top p:last-child {
margin-left: 8.6vw;
}
.work-title__bottom {
width: fit-content;
}
.work-tabs {
height: 100%;
}
.tabs-nav {
margin-left: 8.6vw;
margin-top: 56px;
gap: 16px;
}
.tab-link {
width: 110px;
height: 48px;
cursor: pointer;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
border: 1px solid var(--color-blue);
transition: all .8s;
}
.tab-link:hover, .tab-link.active {
background-color: var(--color-blue);
}
.tab-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
}
.tab-list-img {
display: block;
position: absolute;
bottom: 76px;  
left: 31vw;
width: 22.66vw;
z-index: 1;
pointer-events: none;
}
.tab-pane { display: none; }
.tab-pane.active {
display: block;
width: 100%;
height: 100%;
}
.tab-pane[data-tab="companies"] {
padding-left: 60vw;
height: 100%;
overflow: hidden;
position: relative;
}
.map-container { position: relative; }
.map { width: 100%; height: auto; }
.map-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.map-dot { opacity: 1; }
.map-container {
position: relative;
width: 100%;
}
.map {
width: 100%;
height: auto;
display: block; }
.map-dots {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.map-dot {
position: absolute;
width: 8px; height: 8px;
background: #508FE7;
border-radius: 50%;
transform: translate(-50%, -50%); }
.map-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 17px; height: 17px;
border: 1px solid #508FE7;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.map-bottom {
width: 100%;
height: 15.625vw;
background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #0F0F0F 100%);
position: absolute;
bottom: 0;
left: 0;
}
.companies-list {
width: 34vw;
gap: 56px;
max-height: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 70px 0;
}
.companies-list::-webkit-scrollbar {
display: none;
}
.company-item {
flex-direction: column;
gap: 32px;
color: white;
padding-top: 24px;
}
.company-line {
height: 1px;
background-color: var(--color-white);
opacity: 0.35;
margin-top: 24px;
}  .why-we-title {
height: 100vh;
display: flex;
align-items: center;
}
.why-we-title .full-text__content {
display: flex;
flex-direction: column;
gap: 36px;
width: 60.73vw;
margin-inline: auto;
}
.why-we-title .full-text__content p:nth-child(2) {
margin-left: 8.02vw;
}
.why-we-title .full-text__content p:nth-child(3) {
margin-left: 15.156vw;
}
.why-we-title .full-text__content p:last-child {
text-align: end;
}
.why-we {
position: relative;
background-color: var(--color-dark);
overflow: hidden;
min-height: 100vh;
}
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
max-height: 100%; z-index: 1;
overflow: hidden; }
.parallax-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 15, 15, 0.2);
z-index: 2;
}
.parallax-bg img {
width: 100%;
height: 100vh; object-fit: cover;
object-position: center;
max-height: 100vh; }
.parallax-content {
position: relative;
z-index: 2;
padding: 48px;
}
.parallax-items {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.parallax-item {
width: 33.33%;
aspect-ratio: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 48px;
padding: 48px;
border: 1px solid var(--color-white);
position: relative;
overflow: hidden;
z-index: 1;
}
.parallax-item::after {
content: '';
position: absolute;
right: 0px;
bottom: 0px;
width: 25vw;
height: 25vw;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/why-we-after.png);
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
.parallax-item .font-size-48 {
font-size: clamp(28px, 2.5vw, 2.5vw);
}
.parallax-item__empty {
border: none;
height: 0;
padding: 0;
}
.parallax-item__empty::after {
display: none;
} @media (min-width: 1024px) {
.parallax-item:nth-child(n+4):nth-child(-n+6) {
margin-top: -1px;
}
.parallax-item:nth-child(n+7):nth-child(-n+9) {
margin-top: -1px;
}
.parallax-item:nth-child(n+10):nth-child(-n+12) {
margin-top: -1px;
}
.parallax-item:nth-child(n+13):nth-child(-n+15) {
margin-top: -1px;
}
.parallax-item:nth-child(4), .parallax-item:nth-child(6), .parallax-item:nth-child(10), .parallax-item:nth-child(12) {
width: calc(33.33% - 1px) !important;
}
.parallax-item:nth-child(5), .parallax-item:nth-child(11) {
width: calc(33.33% + 2px);
}
}  .reviews {
background-color: var(--color-light);
position: relative;
width: 100%;
overflow: hidden; }
.reviews-title {
width: 72vw;
margin-inline: auto;
padding-top: 10vw;
padding-bottom: 10vw;
}
.reviews-title p:first-child {
width: 69vw;
}
.reviews-container {
display: flex;
padding-top: 48px;
padding-bottom: 170px;
}
.review-card {
position: relative;
width: 544px;
margin-right: 8px;
flex-shrink: 0;
padding: 32px;
border: 1px solid var(--color-dark);
transition: all .8s;
color: var(--color-dark);
overflow: hidden;
}
.reviews-container, .review-card {
will-change: transform;
}
.review-card:hover, 
.review-card.active {
background-color: var(--color-blue);
border: 1px solid var(--color-blue);
color: var(--color-white);
}
.review-card:last-child {
margin-right: 0;
}
.review-card::after {
content: "";
position: absolute;
bottom: -300%;
left: 0;
width: 100%;
height: 14vw;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/service-item-bg.png);
background-size: 100%;
background-repeat: repeat-x;
background-position: center bottom;
z-index: 0;
opacity: 0;
transition: all .8s;
}
.review-card:hover::after,
.review-card.active::after {
opacity: 1;
bottom: 0;
display: block;
}
.review-content {
position: relative;
display: flex;
flex-direction: column;
gap: 120px;
z-index: 2;
} .reviews-container {
padding-left: calc(50% - 544px / 2);
} .reviews-section {
padding-right: calc(50% - 544px / 2);
}
.content-after-reviews { padding: 50px;
background-color: #f0f0f0;
text-align: center;
}  .faq-wrap {
max-width: 1080px;
width: calc(100% - 96px);
margin: 0 auto;
gap: 120px;
padding-top: 170px;
padding-bottom: 170px;
}
.faq-title .font-size-94 {
font-size: 94px;
}
.faq-question {
cursor: pointer;
}
.faq-item__line {
width: 100%;
height: 1px;
background-color: var(--color-white);
opacity: 0.35;
margin: 56px 0;
}
.faq-item__line:last-child {
display: none;
}
.faq-question__icon svg {
transform: rotate(180deg);
transition: all 1s;
}
.faq-item .faq-question__icon svg path {
transition: all 1s;
}
.faq-item.active .faq-question__icon svg {
transform: rotate(0deg);
}
.faq-item:hover .faq-question__icon svg path,
.faq-item.active .faq-question__icon svg path {
fill: var(--color-blue);
}
.faq-answer {
height: 0;
overflow: hidden;
transition: height 1s ease;
will-change: height;
}
.faq-item.active .faq-answer {
height: var(--faq-answer-height);
}
.faq-answer-content {
margin-top: 56px;
}  .form {
background-color: var(--color-light);
position: relative;
min-height: 160vh;
}
.form-title {
height: 100vh;
position: sticky;
top: 0;
z-index: 1;
}
.form-title__text {
width: 61vw;
}
.form-block {
height: 100vh;
min-height: 700px;
position: relative;
z-index: 2;
}
.form-wrap {
width: 512px;
height: auto;
padding: 48px;
}
.form-bottom_last-line {
position: relative;
padding: 0 14px;
width: fit-content;
margin-inline: auto;
}
.form-bottom_last-line::before {
content: '';
position: absolute;
left: 0;
top: 60%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1737_1207)%22%3E%3Cpath%20d%3D%22M10.2954%2011.2519C10.3927%2011.1765%2010.4813%2011.004%2010.532%2010.8683C11.8764%207.17973%2012.001%203.9546%2010.4719%201.98181C9.20122%200.342367%207.17823%200.0568243%205.6777%201.21988C4.81638%201.88748%204.51662%202.93556%204.70654%204.04124C3.68649%203.58627%202.58889%203.61398%201.73212%204.27806C0.231581%205.44111%200.00356225%207.47138%201.27428%209.11083C2.80337%2011.0836%205.96175%2011.8012%209.8604%2011.3888C10.0089%2011.3699%2010.1982%2011.3272%2010.2954%2011.2519Z%22%20fill%3D%22%23508FE7%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1737_1207%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.form-bottom_last-line::after {
content: '';
position: absolute;
right: 0;
top: 60%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1737_1209)%22%3E%3Cpath%20d%3D%22M3.70457%2011.2519C3.60735%2011.1765%203.51867%2011.004%203.46797%2010.8683C2.12357%207.17973%201.99897%203.9546%203.52806%201.98181C4.79878%200.342367%206.82177%200.0568243%208.3223%201.21988C9.18362%201.88748%209.48338%202.93556%209.29346%204.04124C10.3135%203.58627%2011.4111%203.61398%2012.2679%204.27806C13.7684%205.44111%2013.9964%207.47138%2012.7257%209.11083C11.1966%2011.0836%208.03825%2011.8012%204.1396%2011.3888C3.99108%2011.3699%203.80178%2011.3272%203.70457%2011.2519Z%22%20fill%3D%22%23508FE7%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1737_1209%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22white%22%20transform%3D%22matrix(-1%200%200%201%2014%200)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.forminator-field button[type="submit"].btn-animated {
outline: none;
border: none;
width: 100%;
margin: 0;
font-family: 'Gilroy-Light', sans-serif;
}
.forminator-field button[type="submit"].btn-animated .btn-animated__circle {
width: 54px;
min-width: 54px;
height: 54px;
}
.forminator-field button[type="submit"].btn-animated .btn-animated__circle svg {
width: 24px;
height: 24px;
}
.forminator-ui .forminator-row-inside:not(:last-child), 
.forminator-ui .forminator-row:not(:last-child) {
margin-bottom: 24px !important;
}
.forminator-ui .forminator-row.forminator-row-last {
margin-bottom: 0 !important;
}
body .forminator-input {
background-color: transparent !important;
}
.forminator-ui .forminator-input,
.selection .select2-selection {
padding: 18px 24px !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 1 !important;
border: 1px solid var(--color-white) !important;
color: var(--color-white) !important;
opacity: 0.5 !important;
transition: all .8s !important;
}
.forminator-ui .forminator-input:hover,
.selection .select2-selection:hover {
opacity: 1 !important;
}
.forminator-ui .forminator-input:focus,
.selection .select2-selection:focus {
opacity: 1 !important;
border: 1px solid var(--color-blue) !important;
}
.forminator-select-dropdown-container--open forminator-dropdown--default {
background-color: var(--color-dark) !important;
}
.forminator-select .select2-results__options {
padding: 20px 24px !important;
height: 100% !important;
max-height: fit-content !important;
}
.selection .select2-selection {
padding: 10px 14px 10px 24px !important;
background-color: transparent !important;
}
.selection .select2-selection__rendered {
color: var(--color-white) !important;
}
.select2-selection__rendered {
padding: 0 !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 1 !important;
transition: all .8s !important;
}
.forminator-select-dropdown {
border: 1px solid var(--color-blue) !important;
border-top: none !important;
}
ul.select2-results__options li {
color: var(--color-white) !important;
background-color: #9B9B9B !important;
padding: 8px 20px !important;
margin-bottom: 8px !important;
transition: all .8s;
}
ul.select2-results__options li:last-child {
margin-bottom: 0 !important;
}
ul.select2-results__options li:hover {
background-color: var(--color-blue) !important;
}
.forminator-ui .forminator-icon-chevron-down:before {
content: "" !important;
display: inline-block !important;
width: 16px;
height: 16px;
background-image: url(//hr-888.ru/wp-content/themes/hresurs/assets/img/arrow-down.png);
background-size: contain;
background-repeat: no-repeat;
}
.forminator-select-dropdown-container--open .forminator-dropdown--default {
background-color: var(--color-dark) !important;
}
.forminator-ui .forminator-button.forminator-button-submit {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: auto !important;
cursor: pointer !important;
margin: 0 !important;
margin-top: 48px !important;
padding: 10px 30px 10px 10px !important;
border: 0 !important;
border-radius: 40px !important;
background-image: none !important;
line-height: 1 !important;
text-align: inherit !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
-webkit-transition: all .8s !important;
transition: all .8s !important;
}
.forminator-checkbox__wrapper {
align-items: center !important;
}
.forminator-checkbox-box {
background-color: transparent !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
border-radius: 0 !important;
}
.forminator-consent input:checked + .forminator-checkbox-box {
border-color: var(--color-blue) !important;
}
.forminator-checkbox .forminator-checkbox-box:before {
content: "" !important;
display: inline-block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20width%3D%2212%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m4.94960124%207.88894106-1.91927115-1.91927115c-.29289322-.29289321-.76776696-.29289321-1.06066018%200-.29289321.29289322-.29289321.76776696%200%201.06066018l2.5%202.5c.31185072.31185071.82415968.28861186%201.10649605-.05019179l5.00000004-6c.265173-.31820767.22218-.7911312-.0960277-1.05630426s-.7911312-.22218001-1.05630426.09602766z%22%20fill%3D%22%23508FE7%22%2F%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.form-link {
position: relative;
top: 2px;
}
.link-14 {
position: relative;
top: 2px;
height: 14px;
display: inline-block;
overflow: hidden;
transition: all .5s;
}
.link-14 span {
display: block;
position: relative;
top: 0;
padding-bottom: 1px;
transition: all .5s;
}
.link-14:hover span {
top: -15px;
}   .privacy-title {
margin-top: 8.85vw;
margin-bottom: 8.85vw;
gap: 1.875vw;
}
.privacy-content {
padding-bottom: 8.85vw;
}
.privacy-content .font-size-48 span {
font-size: 70px;
line-height: 1;
}
.privacy-content > div p {
opacity: 0;
transform: translateY(100%);
will-change: transform;
}  .footer {
position: relative;
overflow: hidden;
padding-top: 48px;
padding-bottom: 32px;
opacity: 0;
transition: all 1s;
}
.loaded .footer {
opacity: 1;
}
.footer-column {
gap: 125px;
}
#footer-menu {
gap: 40px;
}
#footer-menu a {
height: 60px;
display: inline-block;
overflow: hidden;
font-size: 48px;
line-height: 140%;
font-family: 'AlterBiom-Regular', sans-serif;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
transition: all .5s;
}
#footer-menu a span {
display: block;
position: relative;
top: 0;
transition: all .5s;
}
#footer-menu a:hover span {
top: -60px;
}
.footer-link {
height: 25px;
display: inline-block;
overflow: hidden;
transition: all .5s;
}
.footer-link span {
display: block;
position: relative;
top: 0;
transition: all .5s;
}
.footer-link:hover span {
top: -25px;
}
.footer-link-14 {
height: 14px;
display: inline-block;
overflow: hidden;
transition: all .5s;
}
.footer-link-14 span {
display: block;
position: relative;
top: 0;
transition: all .5s;
}
.footer-link-14:hover span {
top: -16px;
}
#scrollToTopBtn {
width: 74px;
height: 74px;
border-radius: 50%;
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .5s;
}
#scrollToTopBtn:hover {
background-color: var(--color-blue);
}
#scrollToTopBtn svg {
width: 24px;
height: 24px;
}
#scrollToTopBtn svg path {
transition: all .5s;
}
#scrollToTopBtn:hover svg path {
fill: var(--color-white);
}
#footer-svg {
width: 100%;
height: 19.84vw;
}
.footer .smartunit {
display: flex;
align-items: center;
gap: 10px;
}
.footer .smartunit:hover .footer-link-14 span {
top: -16px;
}
.footer .smartunit svg path {
transition: all .5s;
}
.footer .smartunit:hover svg path:last-child {
fill: #9dd90d;
}
.footer .animated-block,
.section-404 .animated-block {
position: absolute;
z-index: -1;
width: 70vw;
height: 60vw;
bottom: -31vw;
right: -34vw;
border-radius: 50%;
background: linear-gradient(270deg, #508FE7, #6EC6FF, #508FE7);
background-size: 600% 600%;
backdrop-filter: blur(274px);
-webkit-backdrop-filter: blur(274px);
box-shadow: 0px 0px 60px 60px rgba(80, 143, 231, 0.5);
filter: blur(40px);
transition: all 0.5s ease; animation: gradientShift 15s ease-in-out infinite, shapeShift 5s ease-in-out infinite, shadowShift 5s ease-in-out infinite;
} @keyframes shapeShift {
0%, 100% {
border-radius: 50%;
}
50% {
border-radius: 40% 60% 55% 45% / 50% 50% 55% 45%;
}
} @keyframes shadowShift {
0%, 100% {
box-shadow: 0px 0px 60px 60px rgba(80, 143, 231, 0.5);
}
50% {
box-shadow: 0px 0px 80px 80px rgba(80, 143, 231, 0.7);
}
} @keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}  .section-404 {
padding-top: 48px;
padding-bottom: 48px;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.section-404-content {
min-height: calc(100vh - 96px);
}
.logo-404 #svg-404 {
width: 100%;
height: 19.84vw;
}
.content-404 {
width: fit-content;
margin-left: 20vw;
align-items: baseline;
}
.content-404 h1,
.content-404 h2 {
line-height: 1;
}
.content-404 .btn-animated {
width: fit-content;
}
.page-404 .header,
.page-404 .footer {
display: none;
} @media (max-width: 1600px) {  
.slider-slide:nth-child(1) img {
top: -10vw;
}
.slider-slide:nth-child(2) img {
top: -15vw;
}
.slider-slide:nth-child(3) img {
top: -10vw;
}
}
@media (max-width: 1550px) {
.block-header__right p:nth-child(2n) {
margin-left: -9vw;
}
body:not(.home).loaded .header-wrap {
gap: 48px;
}
body.home.scroll-header .header-logo svg {
width: 180px;
}
}
@media (max-width: 1440px) {
.header-wrap {
gap: 40px;
}
#header-menu {
gap: 24px;
}
body.home.scroll-header .header-logo svg {
width: 12vw;
}
.block-header__right p:nth-child(2n) {
margin-left: -6vw;
}
body:not(.home).loaded .header-wrap {
gap: 32px;
}
body:not(.home).loaded .header-wrap #header-menu {
gap: 24px;
}
body:not(.home).loaded .header-logo svg {
width: 160px;
}
.recruitment-card {
padding: 24px;
}
.recruitment-card .font-size-18 {
font-size: 16px;
}
}
@media (max-width: 1320px) {
.block-header__center {
max-width: 37vw;
}
.services-wrap, .service-item {
gap: 24px;
}
}
@media (max-width: 1200px) {
.header {
padding-bottom: 0;
}
.header-wrap,
.block-header {
display: none;
}
.header-mobile,
.block-header-mobile {
display: flex;
} .main-section {
transition: padding 0s;
}
.block-header__center {
max-width: 100%;
}
.block-header__circle,
.block-header__circle svg {
width: 102px;
height: 102px;
}
.footer-policy-wrap {
gap: 24px;
}
.recruitment-card {
width: 100%;
height: 320px;
padding: 48px;
}
.recruitment-card__empty,
.recruitment-card__gradient,
.recruitment-card > div:first-child > p:first-child br {
display: none;
}
.recruitment-card__last {
border-left: none;
}
.recruitment-card > div:first-child > p:first-child {
font-size: 28px;
}
.recruitment-card::after {
width: 300px;
height: 300px;
}
.services-wrap {
display: none;
}
.services-wrap__vertical {
display: flex;
}
.services-list {
width: 100%;
}
.parallax-item {
padding: 24px;
}
}
@media (max-width: 1024px) {
.container {
width: calc(100% - 32px);
}
.font-size-74 {
font-size: 32px;
}
.font-size-48 {
font-size: 28px;
}  
.font-size-40 {
font-size: 28px;
}
.font-size-28 {
font-size: 20px;
}
.font-size-18 {
font-size: 16px;
}
.gap72 {
gap: 36px;
}
.header {
padding-bottom: 0;
}
.loaded #main-svg {
width: calc(100vw - 32px);
}
.privacy-content .font-size-48 span {
font-size: 40px;
}
.gallery-container {
padding-top: 0;
padding-bottom: 80px;
width: calc(100% - 32px);
}
.footer-column {
gap: 70px;
}
.footer-bottom {
align-items: flex-end;
}
.footer-policy-wrap {
flex-direction: column;
}
.footer-top {
column-gap: 32px;
row-gap: 70px;
}
#footer-menu a {
font-size: 32px;
height: 40px;
}
#footer-menu a:hover span {
top: -40px;
}
.content-404 .font-size-74 {
font-size: 74px;
}
.gallery-caption {
flex-direction: column;
}
.gallery-caption--top {
gap: 32px;
padding: 48px 16px;
}
.gallery-caption--top-right {
width: 100%;
}
.gallery-caption--bottom {
padding: 48px 16px;
}
.gallery-caption--bottom-item {
width: 100%;
gap: 16px;
}
.faq-wrap {
width: calc(100% - 32px);
padding-top: 80px;
padding-bottom: 80px;
gap: 60px;
}
.faq-title .font-size-94 {
font-size: 8vw;
}
.faq-item__line {
margin: 32px 0;
}
.faq-answer-content {
margin-top: 32px;
}
.service-item .font-size-74 {
font-size: 32px;
}
.services {
padding-bottom: 170px;
}
.services-title {
height: fit-content;
padding: 160px 0 80px;
font-size: 64px;
}
.services-wrap__vertical {
padding-top: 100px;
position: relative;
z-index: 2;
}
.service-detail .item::after {
height: 130px;
}
.service-item__icon {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.service-item.active .service-item__icon {
transform: rotate(180deg);
}
.service-item__icon svg path {
transition: all 1s;
}
.service-item.active .service-item__icon svg path {
fill: var(--color-blue);
}
.cookie-close, .cookie-policy {
height: 22.4px;
}
.cookie-close:hover span, .cookie-policy:hover span {
top: -22.4px;
}
.work {
padding: 170px 16px 0;
}
.tab-content {
position: static;
margin-top: -64vw;
}
.work-title {
gap: 50vw;
}
.work-title__top, .work-title__bottom {
gap: 16px;
}
.tabs-nav { 
display: none; 
}
.tab-pane[data-tab="companies"] .title, .tab-pane[data-tab="companies"] .subtitle {
display: none;
}
.tab-pane[data-tab="companies"] {
display: flex;
flex-direction: column;
gap: 40px;
position: relative !important;
transform: none !important;
padding-left: 0;
padding-top: 120px;
}
.map-container {
position: relative !important;
transform: none !important;
width: 100%;
height: auto;
}
.companies-list {
width: 100%;
position: relative !important;
transform: none !important;
max-height: none;
overflow-y: visible;
padding-right: 0;
}
.company-item {
opacity: 1 !important;
transform: none !important;
}
.tab-list-img {
display: none;
}
.parallax-content {
padding: 0;
}  
.parallax-item {
width: 100%;
min-height: 320px;
aspect-ratio: auto;
border-left: none;
border-right: none;
border-bottom: none;
}
.parallax-item:nth-child(even) {
display: none;
}
.parallax-item::after {
width: 316px;
height: 320px;
}
}
@media (max-width: 768px) {
.home .center-line__subtitle {
display: none;
}
.top-row.start {
gap: 6px;
}
.loading-word, .processing-word {
font-size: 14px;
width: 77px;
}
.cookie-wrap {
right: 16px;
bottom: 16px;
width: calc(100% - 32px);
max-width: none;
}
.bottom-block {
margin: 0;
}
.bottom-block.finish {
width: 100%;
max-height: 34vw;
margin-left: 0;
}
.bottom-block .lazy-video {
width: 40vw;
height: 100%;
}
.bottom-block .lazy-video-svg {
width: 40vw;
}
.bottom-block.finish .lazy-video-svg {
width: 150vw;
}
.top-row.finish {
top: 60px;
}
.bottom-block.up {
top: calc(60px + 19vw + 40px);
}
.main-section {
margin-top: calc(60px + 42vw + 80px);
}
.people {
margin: 170px 16px;
}
.footer-top {
column-gap: 20vw;
}
.content-404 {
margin-left: 0;
}
.feat-item .gallery-caption, 
.gallery-caption {
gap: 20px;
opacity: 1 !important;
transform: translate(0, 0) !important;
}
.gallery-caption .font-size-28 {
font-size: 18px;
}
.gallery-caption--top {
gap: 16px;
padding: 16px;
}
.gallery-caption--top-right {
width: 100%;
}
.gallery-caption--bottom {
padding: 16px;
}
.gallery-caption--bottom-item {
gap: 16px;
}
.feat-item:nth-child(1) img {
object-position: 50% 19%;
}
.feat-item:nth-child(2) img {
object-position: 40% 22%;
}
.feat-item:nth-child(3) img {
object-position: 50% 19%;
}
.feat-item:nth-child(4) img {
object-position: 57% 0%;
}
.gallery-caption--top > div:first-child {
width: 100%;
text-align: center;
}
.gallery-section,
.feat-wrap {
display: none;
}
.gallery-mobile {
display: block;
position: relative;
height: 100vh;
min-height: 100dvh;
width: 100%;
overflow: hidden;
}
.gallery-mobile__wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: max-content;
position: relative;
}
#gallery-mobile, #gallery-mobile * {
will-change: transform;
}
.gallery-mobile__swiper,
.gallery-mobile .swiper-wrapper {
width: 100%;
height: 100%;
}
.gallery-mobile__slide {
position: relative;
width: 100%;
max-width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.feat-item {
transform: translateY(0%);
}
.gallery-mobile__slide::before,
.feat-item__content::before {
background-size: 150vw;
background-position: 50% 50%;
}
.gallery-mobile__image {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.gallery-mobile__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-mobile__content {
flex: 1;
padding: 20px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.gallery-mobile__title {
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
color: #000;
}
.gallery-mobile__text {
font-size: 16px;
line-height: 1.5;
color: #666;
}
.gallery-mobile__pagination {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 10px;
}
.gallery-mobile__pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.5);
opacity: 1;
transition: all 0.3s ease;
}
.gallery-mobile__pagination .swiper-pagination-bullet-active {
background: #fff;
transform: scale(1.2);
}
.recruitment-container {
width: 100%;
}
.recruitment-card {
padding: 24px;
border-right: none;
border-left: none;
}
.recruitment-sticky-text {
position: relative;
top: 0;
width: 100%;
align-items: flex-start;
padding: 16px;
}
.recruitment-cards {
margin: 72px 0;
}
.recruitment-card__last {
height: fit-content;
padding: 72px 16px 0;
}
.recruitment-sticky-text p:first-child {
left: 0;
}
.recruitment-card > .gap32 {
gap: 16px;
}
.services-list {
gap: 24px;
}
.service-detail {
gap: 16px;
}
.service-detail .item {
width: 100%;
min-height: auto;
}
.services-title p:last-child {
margin-left: 0;
}
.services-title__wrap {
height: 90vh;
padding: 0;
}
.services-title {
padding: 170px 0;
}
.review-card {
width: 382px;
padding: 24px;
margin: 16px 0 !important;
}
.review-card::after {
height: 130px;
background-size: 170%;
}
.reviews-container {
padding-left: 16px;
}
.reviews-title p:first-child {
margin-left: 10vw;
width: fit-content;
}
.work-title {
gap: 38vw;
}
.tab-content {
margin-top: -60vw;
}
.work-title__top p:last-child {
margin-left: 0;
}
.work-title__bottom .font-size-64 {
font-size: 28px;
}
.work-title__bottom .font-size-28 {
font-size: 16px;
}
.tab-pane[data-tab="companies"] {
padding-top: 60px;
}
.company-item .font-size-40 {
font-size: 24px;
}
.companies-list {
padding-bottom: 0;
}
.company-item:last-child .company-line {
display: none;
}
.why-we-title .full-text__content {
width: 100%;
}
.why-we-title .full-text__content p:first-child {
margin-left: 26.6vw;
}
.why-we-title .full-text__content p:nth-child(2) {
text-align: end;
margin-right: 26.6vw;
}
.why-we-title .full-text__content p:nth-child(3) {
margin-left: 26.6vw;
}
.why-we-title .full-text__content p:last-child {
margin-right: 26.6vw;
}
.reviews-title {
width: 100%;
padding: 24vh 0 14vh;
}
}
@media (max-width: 600px) {
.form-wrap {
width: calc(100% - 32px);
padding: 40px 24px;
gap: 32px;
margin-bottom: 170px;
}
.forminator-field button[type="submit"].btn-animated .btn-animated__circle {
width: 32px;
min-width: 32px;
height: 32px;
}
.forminator-field button[type="submit"].btn-animated .btn-animated__circle svg {
width: 16px;
height: 16px;
}
.faq-title .font-size-94 {
font-size: 32px;
}
.faq-title {
gap: 16px;
}
}
@media (max-width: 520px) {
.line-mask {
height: auto;
margin-bottom: 16px;
}
.question p {
height: auto;
}
.line-mask .font-size-94 {
font-size: 5vw;
}
}
@media (max-width: 480px) {
.header-mobile__menu > div:nth-child(1),
.header-mobile__menu > div:nth-child(2) {
gap: 24px;
}
.footer-top {
column-gap: 32px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.form-title__text {
width: calc(100% - 32px);
gap: 16px;
}
.why-we-title .full-text__content p:first-child {
margin-left: 16vw;
}
.why-we-title .full-text__content p:nth-child(2) {
text-align: end;
margin-right: 16vw;
}
.why-we-title .full-text__content p:nth-child(3) {
margin-left: 16vw;
}
.why-we-title .full-text__content p:last-child {
margin-right: 16vw;
}
.map-dot {
width: 2px;
height: 2px;
}
.map-dot::after {
width: 4px;
height: 4px;
}
.faq-title .text-end {
text-align: start;
}
.reviews-container {
padding-top: 8px;
gap: 16px;
}
.reviews-title {
padding: 20vh 0 12vh;
}
}
@media (max-width: 380px) {
.block-header__right .font-size-74 {
font-size: 30px;
}
.privacy-title .font-size-74 {
font-size: 28px;
}
.faq-question .font-size-40 {
font-size: 24px;
}
.recruitment-card > div:first-child > p:first-child {
font-size: 24px;
line-height: 1;
}  
.why-we-title .full-text__content p:first-child {
margin-left: 12vw;
}
.why-we-title .full-text__content p:nth-child(2) {
text-align: end;
margin-right: 12vw;
}
.why-we-title .full-text__content p:nth-child(3) {
margin-left: 12vw;
}
.why-we-title .full-text__content p:last-child {
margin-right: 12vw;
}
.reviews-title {
width: 100%;
padding: 18vh 0 10vh;
}
}
@media (min-width: 1800px) {  
.services-title__wrap {
min-height: 38vw;
}
}
@media (min-width: 1600px) {  
.services-title__wrap {
min-height: 42vw;
}
}
@media (min-width: 1400px) {
.reviews-title {
padding: 140px 0;
}
.services-title__wrap {
min-height: 50vw;
}
}
@media (min-width: 1200px) {
.services-wrap {
position: relative;
}
.services-details {
height: fit-content;
position: sticky;
top: 48px;
width: 60%;
}
}
@media (max-height: 700px) { }
@media (min-height: 800px) and (max-width: 1024px) {
.reviews {
gap: 6vh;
}
}
@media (min-height: 880px) and (max-width: 1024px) {
.reviews {
gap: 10vh;
}
}