@charset "UTF-8";

/* ----- Базовые стили ----- */

@font-face {
	font-weight: 700;
	font-style: normal;
	font-family: "NTSomic";
	src: url("../fonts/NTSomic-Bold.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 500;
	font-style: normal;
	font-family: "NTSomic";
	src: url("../fonts/NTSomic-Medium.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 400;
	font-style: normal;
	font-family: "NTSomic";
	src: url("../fonts/NTSomic-Regular.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 400;
	font-style: normal;
	font-family: "NTSomic";
	src: url("../fonts/NTSomic-VF.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 700;
	font-style: normal;
	font-family: "Roboto";
	src: url("../fonts/Roboto-Bold.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 300;
	font-style: normal;
	font-family: "Roboto";
	src: url("../fonts/Roboto-Light.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 500;
	font-style: normal;
	font-family: "Roboto";
	src: url("../fonts/Roboto-Medium.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 400;
	font-style: normal;
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-weight: 600;
	font-style: normal;
	font-family: "Roboto";
	src: url("../fonts/Roboto-SemiBold.woff2") format("woff2");
	font-display: swap;
}

:root {
	--font-family-default: "Roboto", sans-serif;
	--font-family-title: "NTSomic", sans-serif;
	--color-default: #252525;
	--color-dark: #222222;
	--color-light: #fff;
	--color-accent: #4fff9e;
	--color-accent-hover: #17e573;
	--color-accent-active: #76ffb4;
	--color-primary: #5156dd;
	--container-padding: 32px;
	--container: calc(1672px + (var(--container-padding) * 2));
	--container-minus: calc(
		var(--container-padding) - (var(--container-padding) * 2)
	);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

p {
	margin: 0;
}

p:not(:last-child) {
	margin-bottom: 1rem;
}

a {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

ul,
menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	border-style: none;
	vertical-align: middle;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
}

button,
input,
textarea {
	overflow: visible;
}

button,
select {
	text-transform: none;
	cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

textarea {
	overflow: auto;
	resize: vertical;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	outline-offset: -2px;
	-webkit-appearance: textfield;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button;
}

[hidden] {
	display: none !important;
}

/* ----- Основные стили ----- */

.size--one {
	font-family: var(--font-family-title);
	font-size: 96px;
	font-weight: 700;
	line-height: 92px;
	letter-spacing: -2px;
}

.size--two {
	font-family: var(--font-family-title);
	font-size: 64px;
	font-weight: 700;
	line-height: 64px;
}

.size--three {
	font-family: var(--font-family-title);
	font-size: 48px;
	font-weight: 500;
	line-height: 48px;
}

.size--four {
	font-family: var(--font-family-title);
	font-size: 28px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 0px;
}

.title-decor {
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: center right;
	padding-right: 64px;
}

.title-decor--1 {
	background-image: url("../img/title-icons/1.svg");
}

.title-decor--2 {
	background-image: url("../img/title-icons/2.svg");
}

.title-decor--3 {
	background-image: url("../img/title-icons/3.svg");
}

.title-decor--4 {
	background-image: url("../img/title-icons/4.svg");
}

.button {
	padding: 0;
	border: none;
	cursor: pointer;
}

.button:disabled {
	opacity: 0.5;
}

.button--border {
	padding: 14px 28px;
	border: 1px solid var(--color-default);
	border-radius: 32px;
	font-size: 22px;
	font-weight: 400;
	line-height: 140%;
	background-color: transparent;
	text-align: center;
	transition:
		background 0.2s linear,
		color 0.2s linear;
}

.button--border:hover {
	background-color: var(--color-default);
	color: var(--color-light);
}

.button--border:active {
	background-color: #3d3d3d;
	color: #c7c7c7;
}

.button--accent {
	padding: 14px 28px;
	border-radius: 32px;
	background-color: var(--color-accent);
	box-shadow: 0px 2px 8px 0px rgba(9, 206, 98, 0.25);
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	line-height: 150%;
	transition: background 0.2s ease-out;
	color: #3d3d3d;
}

.button--accent:hover {
	background-color: var(--color-accent-hover);
}

.button--accent:active {
	background-color: var(--color-accent-active);
	color: #1fad5e;
}

.button--burger {
	--burger-line-height: 3px;
	position: relative;
	overflow: hidden;
	padding: 0;
	width: 27px;
	height: 27px;
	border: none;
	background-color: transparent;
	color: var(--color-default);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.button--burger > span,
.button--burger::before,
.button--burger::after {
	display: block;
	width: 100%;
	height: var(--burger-line-height);
	border-radius: 5px;
	background-color: currentColor;
}

.button--burger > span {
	margin: 4px auto;
	transition: transform 0.2s ease-in-out;
}

.button--burger > span::before {
	display: block;
	width: 100%;
	height: var(--burger-line-height);
	border-radius: 5px;
	background-color: currentColor;
	content: "";
	transition: transform 0.2s ease-in-out;
}

.button--burger::before,
.button--burger::after {
	content: "";
	transition:
		transform 0.3s ease-in-out,
		opacity 0.4s;
}

.button--burger.active {
	z-index: 99;
}

.button--burger.active::before {
	opacity: 0;
	transform: translateX(-100%);
}

.button--burger.active::after {
	top: 50%;
	opacity: 0;
	transform: translateX(100%);
}

.button--burger.active > span {
	transform: rotate(45deg);
}

.button--burger.active > span::before {
	transform: rotate(-90deg);
}

.button--arrow {
	display: inline-block;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-default);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.88246 0.15C7.08246 0.35 7.08246 0.66 6.88246 0.86L1.73246 6.01H14.5225C14.8125 6.01 15.0225 6.23 15.0225 6.51C15.0225 6.79 14.8125 7.01 14.5225 7.01H1.73246L6.88246 12.15C7.08246 12.35 7.08246 12.66 6.88246 12.86C6.68246 13.06 6.37246 13.06 6.17246 12.86L0.172461 6.86C-0.0575394 6.62 -0.0575394 6.39 0.172461 6.15L6.17246 0.15C6.37246 -0.05 6.68246 -0.05 6.88246 0.15Z' fill='%23222222'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: 16px 13px;
	background-position: center;
}

.button--arrow::after {
	content: none;
}

.button--arrow.swiper-button-disabled {
	opacity: 0.5;
}

html {
	overflow-x: hidden;
	height: 100%;
	-ms-overflow-style: scrollbar;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: none;
}

html.lock {
	overflow: hidden;
}

html.lock .header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body {
	margin: 0;
	background-color: var(--color-light);
	color: var(--color-default);
	font-family: var(--font-family-default);
}

body.home .about-front__container::after {
	content: "";
	position: absolute;
	top: -440px;
	left: -380px;
	display: inline-block;
	width: 780px;
	height: 780px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(30px);
	background-color: #f1f1fe;
	z-index: -1;
}

body.home .header:not(.header--scroll),
body.single .header:not(.header--scroll) {
	background-color: transparent;
}

.container {
	margin: 0 auto;
	padding-right: var(--container-padding);
	padding-left: var(--container-padding);
	max-width: var(--container);
	width: 100%;
}

.wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wrapper > .main {
	flex: 1 1 auto;
}

.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	padding-top: 28px;
	padding-bottom: 28px;
	border-radius: 0px 0px 24px 24px;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 99;
}

.header__container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.header__logo {
	display: block;
	width: 130px;
	height: 47px;
	margin-right: 72px;
}

.header__logo img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.header__feedback {
	margin-left: auto;
}

.header__burger {
	margin-left: auto;
}

.header--scroll {
	position: fixed;
}

.about-front {
	padding-top: calc(68px + var(--hh));
	padding-bottom: 64px;
}

.about-front__container {
	position: relative;
	display: grid;
	grid-template-columns: minmax(auto, 693px) minmax(auto, 829px);
	justify-content: space-between;
	align-items: center;
	gap: 12px 40px;
}

.about-front__content {
	margin-left: 143px;
}

.about-front__title {
	margin-bottom: 32px;
}

.about-front__title > span {
	display: block;
	color: var(--color-primary);
}

.about-front__description {
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
	max-width: 342px;
}

.about-front__action {
	margin-top: 64px;
}

.about-front__img > video {
	max-width: 100%;
}

.bank-list {
	padding-top: 68px;
	padding-bottom: 68px;
	background-color: #f9f9ff;
	overflow: hidden;
}

.bank-slider__wrapper {
	align-items: center;
	justify-content: space-between;
}

.bank-slider__item {
	max-width: 360px;
	height: auto;
	width: auto;
	text-align: center;
}

.bank-slider__item img {
	display: inline-block;
	max-width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.technologies {
	padding-top: 48px;
	padding-bottom: 48px;
}

.technologies__title {
	margin-bottom: 64px;
}

.technologies__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.technologies-article {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 32px;
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	background-color: var(--color-light);
	overflow: hidden;
}

.technologies-article::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #fff 0%, #f0f0fd 100%);
	opacity: 0;
	transition: opacity 0.2s linear;
	z-index: 2;
	pointer-events: none;
}

.technologies-article__head {
	position: relative;
	padding: 48px 48px 16px 48px;
	z-index: 3;
}

.technologies-article__title {
	margin-bottom: 24px;
	text-transform: uppercase;
}

.technologies-article__stack {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.technologies-article__stack span {
	display: inline-block;
	border: 1px solid rgb(37, 37, 37);
	border-radius: 32px;
	padding: 10px 16px 10px 16px;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.technologies-article__img {
	flex-grow: 1;
	display: block;
	z-index: 1;
}

.technologies-article__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.technologies-article__wrapper {
	position: relative;
}

.technologies-article__description {
	position: absolute;
	font-size: 22px;
	font-weight: 300;
	top: 30px;
	right: 0;
	left: 0;
	padding: 16px 48px 48px 48px;
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease-out,
		visibility 0.2s ease-out,
		top 0.2s linear;
}

.technologies-article__description b {
	font-weight: 400;
}

.projects {
	padding-bottom: 48px;
	padding-top: 48px;
}

.projects__title {
	margin-bottom: 64px;
}

.projects-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	grid-auto-rows: 566px;
}

.projects-list__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	border-radius: 32px;
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	padding: 24px 15px;
	background-color: #f9f9ff;
	overflow: hidden;
	transition: background 0.2s ease-out;
}

.projects-list__img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	display: block;
}

.projects-list__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.projects-list__description {
	position: relative;
	font-size: 22px;
	font-weight: 400;
	line-height: 150%;
	max-width: 414px;
	z-index: 2;
	background-color: var(--color-dark);
	color: var(--color-light);
	border-radius: 24px;
	padding: 32px;
	transition:
		background 0.2s ease-out,
		color 0.2s ease-out;
	max-width: 414px;
}

.cooperation {
	padding-top: 48px;
	padding-bottom: 48px;
}

.cooperation__title {
	margin-bottom: 64px;
}

.cooperation__action {
	margin-top: 64px;
	text-align: center;
}

.cooperation-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: num;
	display: grid;
	grid-template-columns: 100%;
	gap: 24px;
}

.cooperation-list__item {
	position: relative;
	border: 1px solid #7d7d7d;
	border-radius: 32px;
	background-color: var(--color-light);
	padding: 48px;
	display: flex;
	gap: 24px;
	overflow: hidden;
}

.cooperation-list__item::after {
	content: counter(num, decimal-leading-zero);
	counter-increment: num;
	font-size: 48px;
	font-weight: 500;
	line-height: 48px;
}

.cooperation-list__content.init .cooperation-list__down {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	-moz-column-gap: 12px;
	column-gap: 12px;
}

.cooperation-list__content.init .cooperation-list__down::after {
	content: "";
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.0078 8.00415' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='vector' d='M1.71 0.29C1.31 -0.1 0.69 -0.1 0.29 0.29C-0.1 0.69 -0.1 1.31 0.29 1.71L6.29 7.71C6.49 7.9 6.72 8 7 8C7.28 8 7.51 7.9 7.71 7.71L13.71 1.71C14.1 1.31 14.1 0.69 13.71 0.29C13.31 -0.1 12.69 -0.1 12.29 0.29L7 5.58L1.71 0.29Z' fill='%23222222' fill-opacity='1.000000' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 14px 8px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s linear;
}

.cooperation-list__content.init .cooperation-list__down.active::after {
	transform: rotate(180deg);
}

.cooperation-list__content.init .cooperation-list__text {
	padding-top: 24px;
}

.cooperation-list__down {
	margin-bottom: 48px;
}

.cooperation-list__title {
	display: inline-flex;
	align-items: center;
	-moz-column-gap: 16px;
	column-gap: 16px;
	margin-bottom: 0;
	text-transform: uppercase;
}

.cooperation-list__title::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--color-accent);
	flex-shrink: 0;
}

.cooperation-list__description {
	font-size: 22px;
	font-weight: 300;
	line-height: 150%;
}

.cooperation-list__description b {
	font-weight: 400;
}

.cooperation-list__labels {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cooperation-list__labels > span {
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
	padding: 10px 16px 10px 16px;
	border: 1px solid #7d7d7d;
	border-radius: 32px;
}

.cooperation-list__img {
	display: block;
	max-width: 468px;
	width: 100%;
}

.cooperation-list__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.cooperation-list__action {
	margin-top: 36px;
	text-align: center;
}

.review {
	padding-top: 48px;
	padding-bottom: 48px;
	overflow: hidden;
}

.review__title {
	margin-bottom: 64px;
}

.review-slider {
	overflow: visible;
}

.review-slider__slide {
	height: auto;
	border-radius: 32px;
	background-color: var(--color-light);
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	padding: 48px;
}

.review-slider__img {
	display: block;
	width: 73px;
	height: 73px;
	border-radius: 24px;
	background-color: #898888;
	margin-bottom: 24px;
	overflow: hidden;
}

.review-slider__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.review-slider__description {
	font-size: 16px;
	font-weight: 300;
	line-height: 150%;
}

.review-slider__description p:not(:last-child) {
	margin-bottom: 0.2rem;
}

.review-slider__name {
	font-size: 22px;
	font-weight: 400;
	line-height: 150%;
	text-align: right;
	margin-top: 24px;
}

.review-slider__footer {
	position: relative;
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.review-slider__logo {
	width: 130px;
	height: 47px;
}

.review-slider__pagination {
	--swiper-pagination-color: var(--color-accent);
	--swiper-pagination-bullet-size: 12px;
	--swiper-pagination-bullet-horizontal-gap: 2px;
}

.review-slider__pagination.swiper-pagination-horizontal {
	position: static;
	width: auto;
}

.review-slider__pagination .swiper-pagination-bullet {
	flex-shrink: 0;
}

.review-slider__navigation {
	display: flex;
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.review-slider__arrow.js-review-slider-next {
	transform: rotate(180deg);
}

.front-feedback {
	background-color: #7f7fff;
	border-radius: 48px 48px 0px 0px;
	padding-top: 64px;
	padding-bottom: 64px;
	background-image: url("../img/front-feedback-bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.front-feedback__body {
	position: relative;
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	border-radius: 32px;
	background-color: var(--color-light);
	padding: 48px;
	max-width: 762px;
	margin-left: auto;
	margin-right: auto;
}

.front-feedback__title {
	font-weight: 500;
	margin-bottom: 16px;
	text-align: center;
	text-transform: uppercase;
}

.front-feedback__description {
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.front-feedback__form {
	margin-top: 32px;
}

.page-header {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2918c6;
	color: var(--color-light);
	padding-top: calc(193px + var(--hh));
	padding-bottom: 193px;
}

.page-header__container {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-header__title {
	margin-bottom: 32px;
}

.page-header__description {
	font-size: 18px;
	font-weight: 400;
	line-height: 150%;
	max-width: 527px;
}

.page-header__action {
	margin-top: 64px;
}

.page-header--1 {
	background-image: url("../img/page-header-bg.jpeg");
}

.page-header--2 {
	background-image: url("../img/service-header-bg.jpeg");
}

.forensics {
	padding-top: 64px;
	padding-bottom: 64px;
}

.forensics__title {
	margin-bottom: 32px;
}

.forensics__description {
	font-size: 22px;
	font-weight: 300;
	line-height: 150%;
}

.forensics__body {
	margin-top: 64px;
}

.work-out {
	overflow: hidden;
	padding-top: 48px;
	padding-bottom: 48px;
}

.work-out__title {
	margin-bottom: 64px;
}

.work-out-slider {
	overflow: visible;
}

.work-out-slider__slide {
	padding: 48px 32px 48px 48px;
	border-radius: 32px;
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	justify-content: space-between;
	height: auto;
}

.work-out-slider__content.init .work-out-slider__down {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	-moz-column-gap: 12px;
	column-gap: 12px;
}

.work-out-slider__content.init .work-out-slider__down::after {
	content: "";
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.0078 8.00415' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='vector' d='M1.71 0.29C1.31 -0.1 0.69 -0.1 0.29 0.29C-0.1 0.69 -0.1 1.31 0.29 1.71L6.29 7.71C6.49 7.9 6.72 8 7 8C7.28 8 7.51 7.9 7.71 7.71L13.71 1.71C14.1 1.31 14.1 0.69 13.71 0.29C13.31 -0.1 12.69 -0.1 12.29 0.29L7 5.58L1.71 0.29Z' fill='%23222222' fill-opacity='1.000000' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 14px 8px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s linear;
}

.work-out-slider__content.init .work-out-slider__down.active::after {
	transform: rotate(180deg);
}

.work-out-slider__content.init .work-out-slider__title {
	margin-bottom: 0;
}

.work-out-slider__content.init .work-out-slider__text {
	padding-top: 12px;
}

.work-out-slider__title {
	text-transform: uppercase;
	margin-bottom: 48px;
}

.work-out-slider__img {
	display: block;
}

.work-out-slider__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.work-out-slider__navigation {
	margin-top: 24px;
	display: flex;
	-moz-column-gap: 24px;
	column-gap: 24px;
	justify-content: center;
}

.work-out-slider__arrow.js-work-out-slider-next {
	transform: rotate(180deg);
}

.approach {
	padding-top: 48px;
	padding-bottom: 48px;
}

.approach__title {
	margin-bottom: 64px;
}

.approach-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.approach-list__item {
	border-radius: 32px;
	background-color: #2918c6;
	color: var(--color-light);
	padding: 16px 16px 24px 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.approach-list__img {
	display: block;
	max-height: 433px;
	margin-bottom: 32px;
	height: 100%;
}

.approach-list__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.approach-list__content {
	padding-left: 26px;
	padding-right: 26px;
}

.approach-list__title {
	margin-bottom: 8px;
	text-transform: uppercase;
}

.approach-list__description {
	font-size: 22px;
	font-weight: 400;
	line-height: 150%;
}

.stack {
	padding-top: 48px;
	padding-bottom: 48px;
}

.stack__title {
	margin-bottom: 64px;
}

.stack-list {
	display: grid;
	grid-template-columns: 100%;
	gap: 8px;
}

.stack-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 48px;
	border-radius: 16px;
	border: 1px solid #252525;
}

.stack-list__title {
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

.stack-list__label {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.stack-list__label > span {
	padding: 10px 16px;
	border-radius: 32px;
	border: 1px solid #252525;
}

.make-up {
	padding-top: 64px;
	padding-bottom: 48px;
}

.make-up__title {
	margin-bottom: 32px;
}

.make-up__description {
	font-size: 22px;
	font-weight: 300;
	line-height: 150%;
	max-width: 980px;
}

.make-up__body {
	margin-top: 64px;
}

.make-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: num;
}

.make-list__item {
	position: relative;
	padding: 48px;
	border-radius: 32px;
	background-color: var(--color-light);
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
}

.make-list__item.init .make-list__down {
	margin-bottom: 0;
}

.make-list__item.init .make-list__down::after {
	content: "";
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.0078 8.00415' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='vector' d='M1.71 0.29C1.31 -0.1 0.69 -0.1 0.29 0.29C-0.1 0.69 -0.1 1.31 0.29 1.71L6.29 7.71C6.49 7.9 6.72 8 7 8C7.28 8 7.51 7.9 7.71 7.71L13.71 1.71C14.1 1.31 14.1 0.69 13.71 0.29C13.31 -0.1 12.69 -0.1 12.29 0.29L7 5.58L1.71 0.29Z' fill='%23222222' fill-opacity='1.000000' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 14px 8px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s linear;
}

.make-list__item.init .make-list__down.active::after {
	transform: rotate(180deg);
}

.make-list__item.init .make-list__content {
	padding-top: 12px;
}

.make-list__item--feedback {
	background-color: #2918c6;
	color: var(--color-light);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.make-list__item--feedback::before {
	content: "";
	background-image: url("../img/make-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 330px;
	height: 250px;
	max-width: 100%;
	pointer-events: none;
}

.make-list__item--feedback .make-list__title::after {
	content: none;
}

.make-list__description {
	position: relative;
	margin-top: 16px;
	font-size: 18px;
	font-weight: 400;
	line-height: 150%;
}

.make-list__action {
	position: relative;
	margin-top: 32px;
	text-align: center;
}

.make-list__down {
	display: flex;
	align-items: baseline;
	margin-bottom: 24px;
}

.make-list__down::before {
	content: counter(num, decimal-leading-zero);
	counter-increment: num;
	font-size: 44px;
	font-weight: 500;
	color: var(--color-primary);
	order: 2;
	margin-left: auto;
	padding-left: 10px;
}

.make-list__title {
	text-transform: uppercase;
	margin-bottom: 0;
}

.make-list__content .custom-list {
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
}

.projects-archive {
	padding-top: calc(64px + var(--hh));
	padding-bottom: 64px;
}

.projects-archive__title {
	margin-bottom: 64px;
}

.single-head {
	padding-top: calc(24px + var(--hh));
	padding-bottom: 96px;
	background-color: #f1f1fe;
	background-image: url("../img/single-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.single-head__container {
	display: grid;
	grid-template-columns: minmax(60%, auto) minmax(30%, auto);
	gap: 12px;
}

.single-head__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.single-head__label {
	font-size: 48px;
	font-weight: 300;
	color: #1b0f92;
}

.single-head__title {
	margin-bottom: 0;
}

.single-head__img {
	display: block;
	width: 605px;
	height: 605px;
}

.single-head__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.single-body {
	padding-top: 96px;
	padding-bottom: 96px;
}

.single-body__container {
	--container: 864px;
	display: grid;
	grid-template-columns: 100%;
	gap: 96px;
}

.single-content {
	display: grid;
	grid-template-columns: 100%;
	gap: 96px;
}

.single-content__title {
	margin-bottom: 48px;
}

.single-content__description {
	font-size: 22px;
	font-weight: 300;
	line-height: 150%;
}

.single-content__description b,
.single-content__description strong {
	font-weight: 400;
}

.single-content__images {
	display: grid;
	grid-template-columns: 100%;
	gap: 16px;
	margin-top: 48px;
}

.single-content__img {
	display: block;
	border-radius: 32px;
	overflow: hidden;
}

.single-content__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.single-result__title {
	margin-bottom: 48px;
}

.projects-results__item:not(:first-child) {
	margin-top: 48px;
}

.projects-results__item.init .projects-results__down {
	margin-bottom: 0;
}

.projects-results__item.init .projects-results__down::after {
	content: "";
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.0078 8.00415' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='vector' d='M1.71 0.29C1.31 -0.1 0.69 -0.1 0.29 0.29C-0.1 0.69 -0.1 1.31 0.29 1.71L6.29 7.71C6.49 7.9 6.72 8 7 8C7.28 8 7.51 7.9 7.71 7.71L13.71 1.71C14.1 1.31 14.1 0.69 13.71 0.29C13.31 -0.1 12.69 -0.1 12.29 0.29L7 5.58L1.71 0.29Z' fill='%23222222' fill-opacity='1.000000' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 14px 8px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s linear;
}

.projects-results__item.init .projects-results__down.active::after {
	transform: rotate(180deg);
}

.projects-results__down {
	display: flex;
	align-items: center;
	justify-content: space-between;
	-moz-column-gap: 12px;
	column-gap: 12px;
}

.projects-results__title {
	text-transform: uppercase;
}

.projects-results__description {
	padding-top: 24px;
}

.page-error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #2918c6;
	background-image: url("../img/page-error-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-light);
	text-align: center;
	padding-top: calc(140px + var(--hh));
	padding-bottom: 140px;
}

.page-error__img {
	display: block;
	max-width: 618px;
	margin-bottom: 48px;
	margin-left: auto;
	margin-right: auto;
}

.page-error__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.page-error__title {
	margin-bottom: 32px;
}

.page-error__button {
	display: inline-block;
}

.feedback-form__body {
	display: grid;
	grid-template-columns: 100%;
	gap: 24px;
}

.feedback-form__body input,
.feedback-form__body textarea {
	display: block;
	width: 100%;
	border: 1px solid #6a6a6a;
	border-radius: 24px;
	padding: 12px 20px 12px 20px;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.feedback-form__body textarea {
	height: 130px;
}

.feedback-form__info {
	margin-top: 32px;
	padding-left: 14px;
	padding-right: 14px;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.feedback-form__info > span {
	display: block;
}

.feedback-form__info--gray {
	color: #979797;
}

.feedback-form__action {
	text-align: center;
	margin-top: 32px;
}

.feedback-form .wpcf7-spinner {
	position: absolute;
	right: 24px;
	bottom: 24px;
}

.feedback-form .wpcf7-not-valid {
	border-color: #b22727;
}

.feedback-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 300;
	line-height: 150%;
	padding: 0 20px;
	color: #b22727;
}

.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0 0;
	padding: 12px;
}

.custom-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	font-weight: 300;
	line-height: 160%;
}

.custom-list b,
.custom-list strong {
	font-weight: 400;
}

.custom-list li {
	position: relative;
	display: block;
	padding-left: 20px;
}

.custom-list li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	display: inline-block;
	background-color: #666bff;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.custom-list li:not(:first-child) {
	margin-top: 20px;
}

.projects-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: num;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.single-related {
	counter-reset: num;
	display: grid;
	grid-template-columns: 100%;
	gap: 24px;
}

.project-article {
	position: relative;
	border-radius: 32px;
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	background-color: var(--color-light);
	display: grid;
	grid-template-columns: minmax(440px, auto) minmax(auto, 489px);
	justify-content: space-between;
	overflow: hidden;
	transition: background 0.1s linear;
}

.project-article__content {
	padding: 48px 0px 48px 48px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.project-article__title {
	text-transform: uppercase;
}

.project-article__title.list::before {
	content: counter(num, decimal-leading-zero);
	display: block;
	margin-bottom: 16px;
	counter-increment: num;
	font-size: 28px;
	font-weight: 500;
	line-height: 32px;
	color: var(--color-accent);
}

.project-article__label {
	font-size: 28px;
	font-weight: 300;
	color: #1b0f92;
}

.project-article__label::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.project-article__img {
	display: block;
	max-height: 100%;
	height: 400px;
}

.project-article__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.footer {
	background-color: #222222;
	padding-top: 96px;
	color: var(--color-light);
	background-image: url("../img/footer-bg.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
}

.footer__body {
	padding-bottom: 32px;
}

.footer-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.footer-body__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 40px;
}

.footer-body__logo {
	display: block;
	width: 128px;
	height: 46px;
}

.footer-body__logo img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.footer-body__contacts {
	flex-grow: 1;
}

.footer-contacts {
	font-size: 16px;
	font-weight: 300;
	line-height: 140%;
}

.footer-contacts__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 24px 48px;
	font-size: 16px;
	font-weight: 300;
	line-height: 140%;
}

.footer-contacts__link {
	display: inline-flex;
	-moz-column-gap: 12px;
	column-gap: 12px;
	align-items: center;
}

.footer-contacts__link::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-accent);
	flex-shrink: 0;
}

.footer-contacts__link svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	flex-shrink: 0;
}

.footer-contacts__info {
	margin-top: 24px;
	font-size: 16px;
	font-weight: 300;
	line-height: 140%;
	text-align: right;
}

.footer-contacts__info p {
	margin: 0;
}

.footer-contacts__info p:not(:last-child) {
	margin-bottom: 0;
}

.footer-bottom {
	padding-top: 56px;
	padding-bottom: 18px;
}

.footer-bottom__year {
	font-size: 16px;
	font-weight: 300;
	line-height: 140%;
	text-align: center;
	color: #6a6a6a;
}

/* ----- Стили элементов ----- */

/* ----- Модальное окно ----- */

.modal-window {
	--transition-time: 0.3s;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	visibility: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(12, 9, 39, 0.7);
	opacity: 0;
	cursor: pointer;
	transition: all var(--transition-time);
	align-items: center;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
}

.modal-window__container {
	position: relative;
	max-width: 100%;
	max-height: 100%;
}

.modal-window__content {
	position: relative;
	cursor: default;
}

.modal-window__close {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 24px;
	right: 24px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border: none;
	padding: 5px;
	background-color: transparent;
	padding: 0;
}

.modal-window__close > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: rotate(45deg);
}

.modal-window__close > span::before,
.modal-window__close > span::after {
	display: inline-block;
	width: 100%;
	height: 2px;
	background-color: var(--color-default);
	content: "";
	transition: background-color 0.2s ease-out;
}

.modal-window__close > span::after {
	margin-top: -2px;
	transform: rotate(90deg);
}

.modal-window.is-open {
	visibility: visible;
	opacity: 1;
}

.modal-feedback__body {
	box-shadow:
		0px 4px 12px 0px rgba(118, 117, 153, 0.15),
		0px 0px 2px 0px rgba(33, 33, 33, 0.25);
	border-radius: 32px;
	background-color: var(--color-light);
	padding: 48px;
	max-width: 762px;
}

.modal-feedback__title {
	font-size: 48px;
	font-weight: 500;
	line-height: 48px;
	margin-bottom: 16px;
	text-align: center;
}

.modal-feedback__description {
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.modal-feedback__form {
	margin-top: 32px;
}

.modal-window-effect--1 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: scale(0.7);
}

.modal-window-effect--1.is-open .modal-window__container {
	opacity: 1;
	transform: scale(1);
}

.modal-window-effect--2 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time) cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transform: translateX(20%);
}

.modal-window-effect--2.is-open .modal-window__container {
	opacity: 1;
	transform: translateX(0);
}

.modal-window-effect--3 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: translateY(30%);
}

.modal-window-effect--3.is-open .modal-window__container {
	opacity: 1;
	transform: translateY(0);
}

.modal-window-effect--4 .modal-window__container {
	opacity: 0;
	transform: scale(0) rotate(720deg);
}

.modal-window-effect--4.is-open,
.modal-window-effect--4 .modal-window__container {
	transition: all var(--transition-time);
}

.modal-window-effect--4.is-open .modal-window__container {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.modal-window-effect--5.modal-window {
	perspective: 1300px;
}

.modal-window-effect--5 .modal-window__container {
	opacity: 0;
	transform: translateZ(600px) rotateX(20deg);
	transform-style: preserve-3d;
}

.modal-window-effect--5.is-open .modal-window__container {
	opacity: 1;
	transition: all var(--transition-time) ease-in;
	transform: translateZ(0px) rotateX(0deg);
}

.modal-window-effect--6 {
	top: 0;
}

.modal-window-effect--6 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: translateY(-200%);
}

.modal-window-effect--6.is-open .modal-window__container {
	opacity: 1;
	transform: translateY(0%);
}

.modal-window-effect--7.modal-window {
	perspective: 1300px;
}

.modal-window-effect--7 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: rotateY(-70deg);
	transform-style: preserve-3d;
}

.modal-window-effect--7.is-open .modal-window__container {
	opacity: 1;
	transform: rotateY(0deg);
}

.modal-window-effect--8.modal-window {
	perspective: 1300px;
}

.modal-window-effect--8 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: rotateX(-70deg);
	transform-style: preserve-3d;
}

.modal-window-effect--8.is-open .modal-window__container {
	opacity: 1;
	transform: rotateX(0deg);
}

.modal-window-effect--9.modal-window {
	perspective: 1300px;
}

.modal-window-effect--9 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: rotateX(-60deg);
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}

.modal-window-effect--9.is-open .modal-window__container {
	opacity: 1;
	transform: rotateX(0deg);
}

.modal-window-effect--10 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: scale(2);
}

.modal-window-effect--10.is-open .modal-window__container {
	opacity: 1;
	transform: scale(1);
}

.modal-window-effect--11.modal-window {
	perspective: 1300px;
}

.modal-window-effect--11 .modal-window__container {
	opacity: 0;
	transition: all var(--transition-time);
	transform: translateZ(100px) translateX(-30%) rotateY(90deg);
	transform-origin: 0 100%;
	transform-style: preserve-3d;
}

.modal-window-effect--11.is-open .modal-window__container {
	opacity: 1;
	transform: translateZ(0px) translateX(0%) rotateY(0deg);
}

.menu-header__footer {
	background-color: #222222;
	color: var(--color-light);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 360px;
	padding-top: 48px;
	padding-bottom: 48px;
	background-image: url("../img/footer-bg-mobile.png");
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 15px;
	padding-right: 15px;
}

.menu-header__logo {
	width: 128px;
	height: 46px;
	margin-bottom: 32px;
}

.menu-header__logo img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.menu-header__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	font-size: 12px;
	font-weight: 300;
	line-height: 160%;
}

.menu-header__link {
	display: inline-flex;
	-moz-column-gap: 8px;
	column-gap: 8px;
	align-items: center;
}

.menu-header__link::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-accent);
	flex-shrink: 0;
}

.menu-header__link svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	flex-shrink: 0;
}

.menu-header__year {
	margin-top: 32px;
	color: #6a6a6a;
}

.menu-header__list {
	font-size: 18px;
	font-weight: 400;
	line-height: 140%;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
}

.menu-header__list li a {
	text-underline-offset: 4px;
	transition: -webkit-text-decoration 0.2s ease-out;
	transition: text-decoration 0.2s ease-out;
	transition:
		text-decoration 0.2s ease-out,
		-webkit-text-decoration 0.2s ease-out;
}

.menu-header__feedback {
	margin-top: 16px;
}

.menu-header__feedback .button {
	width: 100%;
}

.menu-footer {
	font-size: 18px;
	font-weight: 400;
	line-height: 140%;
}

.menu-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.menu-footer__list li a {
	text-underline-offset: 4px;
	transition: -webkit-text-decoration 0.2s ease-out;
	transition: text-decoration 0.2s ease-out;
	transition:
		text-decoration 0.2s ease-out,
		-webkit-text-decoration 0.2s ease-out;
}

.webp .front-feedback {
	background-image: url(../img/front-feedback-bg.webp);
}

.webp .page-header--1 {
	background-image: url(../img/page-header-bg.webp);
}

.webp .page-header--2 {
	background-image: url(../img/service-header-bg.webp);
}

.webp .make-list__item--feedback::before {
	background-image: url(../img/make-bg.webp);
}

.webp .single-head {
	background-image: url(../img/single-bg.webp);
}

.webp .page-error {
	background-image: url(../img/page-error-bg.webp);
}

.webp .footer {
	background-image: url(../img/footer-bg.webp);
}

.webp .menu-header__footer {
	background-image: url(../img/footer-bg-mobile.webp);
}

@media (min-width: 768px) {
	.cooperation-list__action {
		display: none;
	}
}

@media (min-width: 992px) {
	.header__burger {
		display: none;
	}

	.bank-slider__item {
		flex-shrink: 1;
	}

	.approach-list__item {
		padding: 26px 22px 48px 22px;
		flex: 1 1 calc(50% - 24px);
	}

	.footer-body {
		gap: 24px;
	}

	.footer-body__logo {
		width: 164px;
		height: 59px;
		margin-right: 72px;
	}

	.menu-header__footer {
		display: none;
	}

	.menu-header__feedback {
		display: none;
	}
}

@media (min-width: 1280px) {
	.projects-list__item {
		padding: 32px;
	}

	.projects-list__item:first-child {
		grid-row: span 2;
	}

	.make-list__item--feedback {
		padding-left: 38%;
	}

	.make-list__item--feedback::before {
		width: 546px;
		height: 412px;
		transform: rotate(30deg);
		position: absolute;
		top: 0;
		left: -120px;
	}

	.make-list__action .button {
		width: 100%;
	}
}

@media (min-width: 1800px) {
	.about-front__img {
		margin-right: 172px;
	}

	.approach-list__item {
		flex: 1 1 calc(33.33% - 48px);
	}

	.approach-list__item:nth-child(n + 4) {
		flex-basis: calc(50% - 24px);
	}

	.project-article__img img {
		transform: scale(1.2);
	}
}

@media (max-width: 1799.98px) {
	.about-front__content {
		margin-left: 29px;
	}

	.technologies__body {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}

	.projects-archive-list {
		grid-template-columns: 100%;
	}

	.project-article {
		padding-right: 48px;
	}
}

@media (max-width: 1279.98px) {
	.size--one {
		font-size: 32px;
		line-height: 36px;
		letter-spacing: -1px;
	}

	.size--two {
		font-size: 26px;
		line-height: 28px;
	}

	.size--three {
		font-size: 22px;
		line-height: 30px;
	}

	.size--four {
		font-size: 20px;
	}

	.title-decor {
		background-size: 24px;
		padding-right: 32px;
	}

	.button--border {
		font-size: 17px;
	}

	.button--accent {
		font-size: 17px;
	}

	.header {
		padding-top: 21px;
		padding-bottom: 21px;
	}

	.header__logo {
		width: 82px;
		height: 30px;
		z-index: 10;
	}

	.about-front {
		padding-top: var(--hh);
		padding-bottom: 32px;
	}

	.about-front__action {
		margin-top: 24px;
	}

	.bank-list {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.bank-slider {
		overflow: visible;
	}

	.bank-slider__item {
		max-width: 150px;
	}

	.technologies {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.technologies__title {
		margin-bottom: 32px;
	}

	.technologies-article {
		border-radius: 24px;
	}

	.technologies-article__head {
		padding: 16px;
	}

	.technologies-article__title {
		margin-bottom: 12px;
	}

	.technologies-article__stack {
		gap: 8px;
	}

	.technologies-article__stack span {
		font-size: 15px;
		padding: 8px 12px;
	}

	.projects {
		padding-top: 32px;
		padding-bottom: 3px;
	}

	.projects__title {
		margin-bottom: 32px;
	}

	.projects-list {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 480px;
	}

	.projects-list__description {
		font-size: 17px;
		padding: 24px;
		border-radius: 16px;
		max-width: 302px;
	}

	.cooperation__title {
		margin-bottom: 32px;
	}

	.cooperation__action {
		display: none;
	}

	.cooperation-list__item::after {
		font-size: 20px;
		font-weight: 500;
		line-height: 26px;
		position: absolute;
		top: 24px;
		right: 24px;
	}

	.cooperation-list__down {
		margin-bottom: 24px;
	}

	.cooperation-list__title {
		gap: 4px;
		line-height: 1;
	}

	.cooperation-list__title::after {
		width: 8px;
		height: 8px;
	}

	.cooperation-list__description {
		font-size: 17px;
	}

	.cooperation-list__labels {
		margin-top: 24px;
	}

	.cooperation-list__labels > span {
		padding: 8px 12px;
		font-size: 15px;
	}

	.cooperation-list__img {
		order: -1;
		max-width: 344px;
		flex-shrink: 0;
	}

	.cooperation-list__img img {
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: right;
		object-position: right;
	}

	.review {
		padding-top: 32px;
		padding-bottom: 64px;
	}

	.review__title {
		margin-bottom: 32px;
	}

	.review-slider__slide {
		padding: 24px;
	}

	.front-feedback {
		background-size: cover;
	}

	.work-out-slider__wrapper {
		flex-wrap: wrap;
		gap: 24px;
	}

	.work-out-slider__slide {
		padding: 8px 16px 24px 16px;
		gap: 0;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-end;
		flex: 1 1 calc(33.3% - 48px);
	}

	.work-out-slider__title {
		margin-bottom: 12px;
	}

	.work-out-slider__img {
		height: 240px;
	}

	.work-out-slider__navigation {
		display: none;
	}

	.make-up {
		padding-bottom: 32px;
	}

	.make-up__description {
		font-size: 17px;
	}

	.make-up__body {
		margin-top: 32px;
	}

	.make-list {
		align-items: start;
	}

	.make-list__item {
		padding: 24px 16px;
		border-radius: 24px;
	}

	.make-list__item--feedback {
		align-items: center;
		text-align: center;
	}

	.make-list__item--feedback::before {
		margin-bottom: 48px;
	}

	.make-list__description {
		font-size: 15px;
	}

	.make-list__down {
		align-items: center;
	}

	.make-list__down::before {
		font-size: 20px;
		color: var(--color-dark);
	}

	.make-list__title {
		display: inline-flex;
		align-items: center;
		-moz-column-gap: 7px;
		column-gap: 7px;
	}

	.make-list__title::after {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--color-accent);
		flex-shrink: 0;
	}

	.make-list__content .custom-list {
		font-size: 12px;
		font-weight: 300;
		line-height: 160%;
	}

	.single-head {
		padding-bottom: 64px;
	}

	.single-head__container {
		grid-template-columns: 100%;
		justify-items: center;
	}

	.single-head__content {
		flex-direction: column-reverse;
		gap: 24px;
		max-width: 620px;
	}

	.single-head__label {
		font-size: 28px;
		text-align: right;
	}

	.single-head__img {
		order: -1;
		width: 532px;
		height: 532px;
	}

	.single-body {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.single-body__container {
		gap: 64px;
	}

	.single-content {
		gap: 64px;
	}

	.single-content__title {
		margin-bottom: 24px;
	}

	.single-content__description {
		font-size: 17px;
	}

	.single-content__images {
		margin-top: 48px;
	}

	.single-result__title {
		margin-bottom: 32px;
	}

	.projects-results__item:not(:first-child) {
		margin-top: 32px;
	}

	.projects-results__title {
		display: flex;
		align-items: center;
		-moz-column-gap: 7px;
		column-gap: 7px;
	}

	.projects-results__description {
		padding-top: 16px;
	}

	.custom-list li:not(:first-child) {
		margin-top: 12px;
	}

	.projects-archive-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.single-related {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-article {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px 16px 24px 16px;
	}

	.project-article__content {
		padding: 0;
		flex-direction: column-reverse;
	}

	.project-article__title {
		line-height: 28px;
	}

	.project-article__title.list::before {
		position: absolute;
		top: 24px;
		right: 16px;
		font-size: 20px;
	}

	.project-article__label {
		font-size: 20px;
	}

	.project-article__img {
		order: -1;
	}

	.project-article__img {
		height: 240px;
		width: 240px;
	}
}

@media (max-width: 1279.98px) and (max-width: 991.98px) {
	.make-list__title {
		-moz-column-gap: 4px;
		column-gap: 4px;
		line-height: 28px;
	}
}

@media (max-width: 1110px) {
	.projects-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991.98px) {
	:root {
		--container-padding: 24px;
	}

	body.home .about-front__container::after {
		top: -420px;
		left: -170px;
		width: 400px;
		height: 400px;
	}

	.header {
		border-radius: 0px 0px 12px 12px;
	}

	.header__feedback {
		display: none;
	}

	.about-front__container {
		grid-template-columns: minmax(auto, 343px) auto;
	}

	.about-front__title {
		margin-bottom: 16px;
	}

	.bank-slider__item img {
		max-height: 50px;
	}

	.technologies-article__description {
		font-size: 17px;
		line-height: 150%;
		padding: 8px 16px 24px 16px;
	}

	.review-slider__description {
		font-size: 12px;
		line-height: 160%;
	}

	.review-slider__name {
		font-size: 17px;
	}

	.review-slider__footer {
		margin-top: 70px;
	}

	.review-slider__logo {
		width: 84px;
		height: 30px;
	}

	.review-slider__pagination.swiper-pagination-horizontal {
		position: absolute;
		top: -50px;
		bottom: auto;
		left: 0;
		right: 0;
	}

	.review-slider__navigation {
		-moz-column-gap: 16px;
		column-gap: 16px;
	}

	.front-feedback__body {
		padding: 24px 16px 32px 16px;
	}

	.front-feedback__title {
		margin-bottom: 4px;
	}

	.front-feedback__description {
		font-size: 12px;
		line-height: 160%;
	}

	.front-feedback__description > span {
		display: block;
	}

	.front-feedback__form {
		margin-top: 24px;
	}

	.page-header {
		padding-top: calc(188px + var(--hh));
		padding-bottom: 236px;
	}

	.page-header__title {
		margin-bottom: 16px;
	}

	.page-header__description {
		font-size: 15px;
		font-weight: 300;
	}

	.page-header__action {
		margin-top: 24px;
	}

	.page-header--1 {
		background-image: url("../img/page-header-bg-table.jpeg");
	}

	.page-header--2 {
		background-image: url("../img/service-header-bg-table.jpeg");
	}

	.forensics {
		padding-bottom: 32px;
	}

	.forensics__title {
		margin-bottom: 16px;
	}

	.forensics__description {
		font-size: 17px;
	}

	.forensics__body {
		margin-top: 32px;
	}

	.work-out {
		padding-top: 32px;
	}

	.work-out__title {
		margin-bottom: 32px;
	}

	.work-out-slider__slide {
		flex: 1 1 calc(50% - 24px);
		border-radius: 24px;
	}

	.approach {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.approach__title {
		margin-bottom: 32px;
	}

	.approach-list__content {
		text-align: center;
	}

	.approach-list__description {
		font-size: 17px;
	}

	.stack {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.stack__title {
		margin-bottom: 32px;
	}

	.stack-list__item {
		padding: 24px 16px;
	}

	.stack-list__label {
		font-size: 15px;
		gap: 8px;
	}

	.stack-list__label > span {
		padding: 8px 12px;
	}

	.make-up__title {
		margin-bottom: 16px;
	}

	.make-list {
		grid-template-columns: 100%;
	}

	.projects-archive__title {
		margin-bottom: 32px;
	}

	.single-head__content {
		max-width: 480px;
	}

	.page-error {
		padding-top: calc(64px + var(--hh));
		padding-bottom: 64px;
	}

	.page-error__title {
		margin-bottom: 24px;
	}

	.feedback-form__body {
		gap: 12px;
	}

	.feedback-form__body input,
	.feedback-form__body textarea {
		padding: 10px 16px;
		font-size: 15px;
	}

	.feedback-form__body textarea {
		height: 111px;
	}

	.feedback-form__info {
		text-align: center;
		font-size: 12px;
		line-height: 160%;
		margin-top: 24px;
	}

	.feedback-form__info > span > span {
		display: block;
	}

	.feedback-form__action {
		margin-top: 24px;
	}

	.custom-list {
		font-size: 14px;
	}

	.custom-list li {
		padding-left: 14px;
	}

	.custom-list li::before {
		width: 6px;
		height: 6px;
		top: 0.5em;
	}

	.projects-archive-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer {
		padding-top: 64px;
		background-image: url("../img/footer-bg-mobile.png");
	}

	.footer-body {
		flex-direction: column;
		align-items: center;
	}

	.footer-body__left {
		flex-direction: column;
	}

	.footer-body__menu {
		font-size: 15px;
		line-height: 150%;
	}

	.footer-contacts__links {
		margin-top: 48px;
		flex-direction: column;
		align-items: center;
	}

	.footer-contacts__info {
		margin-top: 32px;
		text-align: center;
		font-size: 15px;
		line-height: 150%;
	}

	.footer-bottom {
		padding-top: 0;
		padding-bottom: 64px;
	}

	.modal-window__close {
		width: 22px;
		height: 22px;
		top: 16px;
		right: 16px;
	}

	.modal-feedback__body {
		padding: 24px 16px 32px 16px;
	}

	.modal-feedback__title {
		margin-bottom: 4px;
	}

	.modal-feedback__description {
		font-size: 12px;
		line-height: 160%;
	}

	.modal-feedback__description > span {
		display: block;
	}

	.modal-feedback__form {
		margin-top: 24px;
	}

	.menu-header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		visibility: hidden;
		overflow: auto;
		padding-top: var(--hh, 0);
		height: calc(var(--vh, 1vh) * 100);
		width: 100%;
		height: 100%;
		background: var(--color-light);
		opacity: 0;
	}

	.menu-header.open {
		z-index: 5;
		visibility: visible;
		opacity: 1;
	}

	.menu-header__wrapper {
		flex-direction: column;
		max-width: 480px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 16px 15px 32px 15px;
		flex-grow: 1;
	}

	.menu-header__list {
		font-size: 20px;
		font-weight: 500;
		text-transform: uppercase;
		flex-direction: column;
	}

	.menu-header__list li a {
		display: inline-block;
		border-radius: 32px;
		background-color: #f9f9ff;
		padding: 16px;
		width: 100%;
		text-align: center;
	}

	.webp .page-header--1 {
		background-image: url(../img/page-header-bg-table.webp);
	}

	.webp .page-header--2 {
		background-image: url(../img/service-header-bg-table.webp);
	}

	.webp .footer {
		background-image: url(../img/footer-bg-mobile.webp);
	}
}

@media (max-width: 767.98px) {
	:root {
		--container-padding: 15px;
	}

	body.home .about-front__container::after {
		content: none;
	}

	.about-front__container {
		grid-template-columns: 100%;
		justify-items: center;
	}

	.about-front__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 0;
	}

	.about-front__title {
		text-align: center;
	}

	.about-front__description {
		max-width: 314px;
		font-size: 15px;
		text-align: center;
	}

	.about-front__img {
		order: -1;
	}

	.technologies__body {
		grid-template-columns: 100%;
	}

	.projects-list {
		grid-template-columns: 100%;
	}

	.cooperation-list__item {
		padding: 16px 16px 32px 16px;
		border-radius: 24px;
		flex-direction: column;
		gap: 24px;
	}

	.cooperation-list__item::after {
		top: 16px;
		right: 16px;
	}

	.cooperation-list__img {
		max-width: 298px;
		margin-left: auto;
		margin-right: auto;
	}

	.page-header--1 {
		background-image: url("../img/page-header-bg-mobile.jpeg");
	}

	.page-header--2 {
		background-image: url("../img/service-header-bg-mobile.jpeg");
	}

	.work-out-slider__slide {
		flex: 0 0 100%;
	}

	.stack-list__item {
		flex-direction: column;
		align-items: flex-start;
	}

	.projects-archive-list {
		grid-template-columns: 100%;
	}

	.single-related {
		grid-template-columns: 100%;
	}

	.webp .page-header--1 {
		background-image: url(../img/page-header-bg-mobile.webp);
	}

	.webp .page-header--2 {
		background-image: url(../img/service-header-bg-mobile.webp);
	}
}

@media (max-width: 575.98px) {
	.page-error__button {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.about-front__container {
		min-height: 355px;
	}

	.bank-slider__item {
		max-width: 120px;
	}
}

@media (min-width: 768px) and (max-width: 1110px) {
	.projects-list__item:nth-child(3) {
		grid-column: span 2;
	}
}

@media (min-width: 768px) and (max-width: 1279.98px) {
	.cooperation-list__item {
		padding: 0;
	}

	.cooperation-list__content {
		padding: 48px 24px 32px 0;
	}

	.approach-list__item:nth-child(5) {
		flex-basis: 100%;
	}
}

@media (min-width: 992px) and (max-width: 1279.98px) {
	.cooperation-list__img img {
		height: 118%;
	}

	.work-out-slider__slide:nth-child(n + 4) {
		flex-basis: calc(50% - 24px);
	}

	.make-list__item--feedback {
		grid-column: 2;
		grid-row: 1/6;
	}
}

@media not all and (hover: none) {
	.technologies-article:hover .technologies-article__description {
		opacity: 1;
		top: 0;
		visibility: visible;
	}

	.technologies-article:hover::after {
		opacity: 1;
	}

	.projects-list__item:hover {
		background-color: #666bff;
	}

	.projects-list__item:hover .projects-list__description {
		background-color: var(--color-light);
		color: var(--color-default);
	}

	.project-article:hover {
		background-color: #666bff;
		color: var(--color-light);
	}

	.project-article:hover .project-article__label {
		color: var(--color-light);
	}

	.project-article:hover .project-article__title::before {
		color: var(--color-light);
	}

	.menu-header__list li a:hover {
		text-decoration: underline;
	}

	.menu-footer__list li a:hover {
		text-decoration: underline;
	}
}