@font-face {
    font-family: 'Be Vietnam';
    src: url('../fonts/BeVietnam-Regular.eot');
    src: url('../fonts/BeVietnam-Regular.eot') format('embedded-opentype'),
        url('../fonts/BeVietnam-Regular.woff2') format('woff2'),
        url('../fonts/BeVietnam-Regular.woff') format('woff'),
        url('../fonts/BeVietnam-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam';
    src: url('../fonts/BeVietnam-SemiBold.eot');
    src: url('../fonts/BeVietnam-SemiBold.eot') format('embedded-opentype'),
        url('../fonts/BeVietnam-SemiBold.woff2') format('woff2'),
        url('../fonts/BeVietnam-SemiBold.woff') format('woff'),
        url('../fonts/BeVietnam-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root{
	--dark: #152435;
	--white: #ffffff;
	--blue: #00aeef;
	--red: #EA0000;
	--sky: #dcecff;
	--ocean: #285775;
	--pink: #ff6b79;
	--grey: #f8f8f8;
	--blue_10: rgba(0, 174, 239, 0.1);
	--white_10: rgba(255, 255, 255, 0.1);
	--white_40: rgba(255, 255, 255, 0.4);
	--sky_20: rgba(220, 236, 255, 0.2);
	--sky_50: rgba(220, 236, 255, 0.5);
	--sky_70: rgba(220, 236, 255, 0.7);
	--ocean_20: rgba(21, 36, 53, 0.2);
	--ocean_40: rgba(21, 36, 53, 0.4);
	--ocean_50: rgba(21, 36, 53, 0.5);
	--pink_10: rgba(255, 107, 121, 0.1);

	--font-family: "Be Vietnam", sans-serif;

	--h1: max(48px, 80rem);
	--h2: max(40px, 52rem);
	--h3: max(24px, 32rem);
	--h4: max(48px, 70rem);

	--subheading: max(20px, 24rem);
	--text: max(18px, 18rem);
	--caption: max(16px, 16rem);
	--min: max(14px, 16rem);

    --ease: cubic-bezier(.38, .005, .215, 1);
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}
::selection {
	color: var(--white);
	background-color: var(--blue);
}
.button22 ::selection {
	color: var(--black);
	background-color: var(--white);
}
/************************* reset *************************/
html{
	height: 100%;
	margin: 0;
	padding: 0;width: 100%;
	background: var(--ocean);
	font-size: 0.0625vw;
	scrollbar-gutter: stable;
}
body{
	height: 100%;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--dark);
	font-weight: 400;
	font-size: var(--text);
	line-height: 120%;
	letter-spacing: -0.02em;
	font-family: var(--font-family), Arial, Helvetica, sans-serif;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, ul, li, a, span, div, input, textarea, select, form, fieldset, button, dl, dd, dt, figure, figcaption, blockquote, caption, aside, section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}
img {
	margin: 0;
	padding: 0;
	border-style: none;
	vertical-align: bottom;
}
input, textarea, select, button {
	font-weight: 400;
	font-family: var(--font-family), Arial, Helvetica, sans-serif;
	vertical-align:middle;
	border: 0;
	outline: 0;
	background: none;
}
a:hover {text-decoration: none;}
ul li {list-style: none;}
/************************* common styles *************************/
.holder {
	padding: 0 max(16px, 40rem);
}
h1, .h1 {
	display: block;
	font-weight: 400;
	font-size: var(--h1);
	line-height: 110%;
	letter-spacing: -0.06em;
}
h2, .h2 {
	display: block;
	font-weight: 400;
	font-size: var(--h2);
	line-height: 110%;
	letter-spacing: -0.06em;
}
h3, .h3 {
	display: block;
	font-weight: 400;
	font-size: var(--h3);
	line-height: 120%;
	letter-spacing: -0.04em;
}
h4, .h4 {
	display: block;
	font-weight: 400;
	font-size: var(--h4);
	line-height: 100%;
	letter-spacing: -0.06em;
}
a {transition: all 0.4s;}
p {margin: 0 0 max(22px, 22rem);}
p:last-child {margin: 0;}
p a, .article li a {color: var(--blue);}
.center {text-align: center;}
.upper {text-transform: uppercase;}
.button-holder {text-align: center;}
.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: max(15px, 15rem) max(32px, 32rem) max(19px, 19rem);
	gap: max(4px, 4rem);	
	font-weight: 600;
	font-size: var(--button);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--ocean);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--white);
	border: 1px solid var(--white);
	border-radius: 100px;
	transition: all .3s ease-out;
}
.button::after {
	content: '';
	width: max(14px, 14rem);
	height: max(14px);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right-ocean.svg) 0 0 no-repeat, url(../img/arrow-right.svg) min(-14px, -14rem) max(14px, 14rem) no-repeat;
    background-size: max(14px, 14rem);
	transition: all 0.3s ease-out;
}
.button:hover {
	color: var(--white);
	background: var(--blue);
	border-color: var(--blue);
}
.button:hover::after {
    background-position: max(14px, 14rem) min(-14px, -14rem), 0 0;
}
.button-border {
	color: var(--blue);
	background: transparent;
	border-color: var(--blue);
}
.button-border::after {
    background: url(../img/arrow-right-blue.svg) 0 0 no-repeat, url(../img/arrow-right.svg) min(-14px, -14rem) max(14px, 14rem) no-repeat;
    background-size: max(14px, 14rem);
}
.button-border:hover {
	color: var(--white);
	background-color: var(--blue);
}
.button-border:hover::after {
    background-position: max(14px, 14rem) min(-14px, -14rem), 0 0;
}
.button-simple::after {
	display: none;
}

/************************* form-block *************************/
.wpcf7-form-control-wrap label {
	display: block;
	margin: 0 0 max(8px, 10rem);
}
.pink {color: var(--pink);}
.wpcf7-form-control-wrap input {
	display: block;
	width: 100%;
	height: max(46px, 46rem);
	padding: 0 max(15px, 15rem) max(4px, 4rem);
	margin: 0 0 max(16px, 20rem);
	font-size: var(--text);
	line-height: 120%;
	letter-spacing: -0.02em;
	color: var(--dark);
	background: var(--white);
	border: 1px solid var(--ocean_20);
	border-radius: max(4px, 4rem);
	transition: all 0.4s ease-in-out;
}
.wpcf7-form-control-wrap textarea {
	display: block;
	width: 100%;
	height: max(120px, 140rem);
	padding: max(19px, 19rem);
	margin: 0 0 max(10px, 10rem);
	font-size: var(--text);
	line-height: 120%;
	letter-spacing: -0.02em;
	resize: vertical;
	color: var(--dark);
	background: var(--white);
	border: 1px solid var(--ocean_20);
	border-radius: max(4px, 4rem);
	transition: all 0.4s ease-in-out;
}
.wpcf7-form-control-wrap input:hover,
.wpcf7-form-control-wrap textarea:hover,
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
	border-color: var(--blue);
}
.inactive {
	opacity: 0.4;
	pointer-events: none;
}
::-webkit-input-placeholder {color: var(--ocean_50);}
:-moz-placeholder {color: var(--ocean_50); opacity: 1;}
::-moz-placeholder {color: var(--ocean_50); opacity: 1;}
:-ms-input-placeholder {color: var(--ocean_50);}
.wpcf7-form-control-wrap.error input,
.wpcf7-form-control-wrap.error textarea {
	border-color: var(--red);
}
.error-msg {
	display: none;
	margin: min(-13px, -17rem) 0 max(16px, 20rem);
	color: var(--red);
	font-size: max(14px, 14rem);
	line-height: 100%;
	letter-spacing: -0.02em;
}
.error .error-msg {
	display: block;
}
.input-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.input-box .wpcf7-form-control-wrap {
	width: calc(50% - max(5px, 5rem));
}
.check-item {
	position: relative;
	margin: 0 0 max(10px, 10rem);
}
.check-input {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.check-label {
	display: block;
	padding: 0 0 0 max(34px, 34rem);
	cursor: pointer;
}
.check-label:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: '';
	width: max(24px, 24rem);
	height: max(24px, 24rem);
	background: url(../img/checkbox.svg) 50% 50% no-repeat;
	background-size: contain;
}
.check-input:checked + .check-label:after {
	background: url(../img/checkbox-active.svg) 50% 50% no-repeat;
	background-size: contain;
}
.form-check {
	margin: 0 0 max(32px, 36rem);
}
.form-check .check-item {
	margin: 0 0 max(16px, 20rem);
}
.form-note {
	font-size: var(--min);
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--ocean_50);
}
.form-note a {
	color: var(--blue);
	text-decoration: none;
}
.form-note a:hover {
	text-decoration: underline;
}
/************************* wrapper *************************/
#wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	padding-top: max(94px, 130rem);
	background: var(--white);
}
body.lock {overflow: hidden;}
/************************* header *************************/
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	height: max(68px, 94rem);
	background: var(--white);
	transition: all 0.6s var(--ease);
}
.header.animate {
	top: min(-68px, -94rem);
	background: var(--white);
}
.header.ani_start {
	top: 0;
}
.header-delay.ani_start {
	transition-delay: 1s;
}
.header.header-up {
    top: min(-68px, -94rem);
	background: var(--white);
}
.header-fixed {
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.header-fixed.header-up {
	box-shadow: none;
}
.header-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: max(68px, 94rem);
	position: relative;
}
.header-logo {
	position: relative;
	z-index: 550;
}
.header-logo img {
	width: max(160px, 171rem);
	transition: all 0.4s ease-in;
}
.logo-white {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.logo-blue {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.header-nav-wrap {
	display: flex;
	align-items: center;
	gap: max(100px, 140rem);
}
.header-nav-list {
	position: relative;
	display: flex;
	padding: max(8px, 8rem);
}
.header-nav-list::before {
	position: absolute;
	inset: 0;
	content: '';
	backdrop-filter: blur(40px);
	background: var(--sky_50);
	border-radius: 100px;
}
.header-nav-list li {
	position: relative;
}
.nav-link {
	position: relative;
	display: block;
	padding: max(8px, 8rem) max(16px, 20rem) max(12px, 12rem);
	font-weight: 600;
	font-size: max(16px, 18rem);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--dark);
	text-decoration: none;
}
.nav-link:hover {
	color: var(--blue);
}
.has-banner .header:not(.header-fixed) .nav-link:hover {
	color: var(--white);
}
.active .nav-link {
	color: var(--white);
	background: var(--ocean);
	border-radius: 100px;
}
.nav-link::before {
	position: absolute;
	top: 50%;
	left: 0;
	content: '';
	width: 1px;
	height: 19px;
	margin-top: -9px;
	background: var(--ocean_20);
}
.header-nav-list li:first-child a::before,
.active .nav-link::before,
.active + li .nav-link::before {display: none;}
.nav-parent::after {
	display: inline-block;
	vertical-align: bottom;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(4px, 4rem);
	background: url(../img/nav-arrow.svg) 0 100% no-repeat;
	background-size: max(12px, 12rem);
	transition: all 0.4s;
}
.nav-link:hover::after,
.active .nav-link::after {
	background-image: url(../img/nav-arrow-white.svg);
}

.subnav {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + max(12px, 12rem));
	width: fit-content;
    padding: max(20px, 20rem) max(10px, 10rem);
    backdrop-filter: blur(40px);
    background: var(--sky_50);
    border-radius: max(10px, 10rem);
	transition: all 0.4s;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
}
.subnav::before {
	position: absolute;
	left: 0;
	right: 0;
	top: min(-12px, -12rem);
	height: max(12px, 12rem);
	content: '';
}
.subnav-list {
	display: flex;
	flex-direction: column;
	gap: max(8px, 8rem);
}
.subnav-item {
	padding: max(4px, 4rem) max(20px, 20rem) max(8px, 8rem);
	font-weight: 600;
    font-size: max(16px, 18rem);
    line-height: 100%;
    letter-spacing: -0.04em;
	color: var(--dark);
	text-decoration: none;
	white-space: nowrap;
	border-radius: max(8px, 8rem);
}
.subnav-item:hover {
	color: var(--white);
	background-color: var(--ocean);
}
.nowrap {
	white-space: nowrap;
}
.subnav-item::after {
	display: inline-block;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right.svg) min(-12px, -12rem) max(12px, 12rem) no-repeat;
    transition: all 0.3s ease-out;
}
.subnav-item:hover::after {
    background-position: 0 0;
}

.has-banner .header:not(.header-fixed) .logo-def {opacity: 0;}
.has-banner .header:not(.header-fixed) .logo-white {opacity: 1;}
.has-banner .header:not(.header-fixed) .button-border {
	color: var(--ocean);
	background: var(--white);
	border-color: var(--white);
}
.has-banner .header:not(.header-fixed) .button-border::after {
    background: url(../img/arrow-right-dark.svg) 0 0 no-repeat, url(../img/arrow-right.svg) min(-14px, -14rem) max(14px, 14rem) no-repeat;
    background-size: max(14px, 14rem);
}

@media screen and (min-width: 1025px){
	
	li:hover .nav-parent {color: var(--blue);}
	li:hover .nav-parent::after {transform: rotate(180deg);}
	li:hover .nav-parent::after {
		background-image: url(../img/nav-arrow-blue.svg);
	}
	.has-banner .header:not(.header-fixed) li:hover .nav-parent {
		color: var(--white);
	}
	.has-banner .header:not(.header-fixed) li:hover .nav-parent::after {
		background-image: url(../img/nav-arrow-white.svg);
	}
	li.active:hover .nav-parent {
		color: var(--white);
	}
	li.active:hover .nav-parent::after {
		background-image: url(../img/nav-arrow-white.svg);
	}
	li:hover .subnav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
	}
	.has-banner .header:not(.header-fixed) .button-border:hover {
		color: var(--white);
		background: var(--blue);
		border-color: var(--blue);
	}
	.has-banner .header:not(.header-fixed) .button-border:hover::after {
		background-position: max(14px, 14rem) min(-14px, -14rem), 0 0;
	}
}

.mob-nav-icon {
	display: none;
	position: relative;
	z-index: 550;
	padding: 10px 0;
}
.mob-nav-block {
    position: relative;
	display: block;
    width: 32px;
    height: 2px;
    margin: 8px 0;
	background: var(--dark);
	transition: all .3s linear;
}
.mob-nav-block:after {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--dark);
	transition: all .3s linear;
}
.mob-nav-block:before {
    content: "";
    position: absolute;
    top: 8px;
	left: 10px;
    width: 22px;
    height: 2px;
    background: var(--dark);
	transition: all .3s linear;
}
.mob-nav-icon.active .mob-nav-block {
    background: none;
}
.mob-nav-icon.active .mob-nav-block:before {
    top: 0;
	left: 0;
	width: 32px;
    transform: rotate(45deg);
}
.mob-nav-icon.active .mob-nav-block:after {
    top: 0;
    transform: rotate(-45deg);
}

/************************* hero *************************/
.hero-main {
	position: relative;
}
.hero-slider {
	background: var(--dark);
}
.hero-slide {
	position: relative;
}
.hero-slide-bg {
	position: relative;
	overflow: hidden;
	height: 100dvh;
}
.hero-slide-bg img,
.hero-slide-bg video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-slide-bg::after {
	position: absolute;
	inset: 0;
	content: '';
	z-index: 10;
	background: url(../img/hero-main-mask.png) 50% 50% no-repeat;
	background-size: cover;
}
.hm-content {
	position: absolute;
	left: max(16px, 40rem);
	right: max(16px, 40rem);
	bottom: max(32px, 40rem);
	z-index: 20;
	padding: 0 0 0 max(300px, 380rem)
}
.hm-title {
	position: relative;
	margin: 0 0 max(20px, 38rem);
	font-size: var(--h1);
	line-height: 90%;
	letter-spacing: -0.06em;
	color: var(--white);
}
.hm-title .hm-0 {
	max-width: max(480px, 840rem);
}
.hm-title .hm-1 {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 100%;
}
.hm-title-item {
	display: flex;
	flex-direction: column;
	user-select: none;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}
.hm-title-item.vis {
	user-select: all;
	opacity: 1;
	transition-delay: 0.3s;
}
.hm-text {
	position: absolute;
	left: 0;
	top: max(10px, 28rem);
	width: 100%;
	max-width: max(260px, 320rem);
	font-size: var(--subheading);
	line-height: 120%;
	letter-spacing: -0.04em;
	color: var(--white);
}
.hm-text-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}
.hm-text-item.vis {
	opacity: 1;
	transition-delay: 0.3s;
}
.hm-text-item:first-child {
	max-width: max(240px, 280rem);
}
.hm-controls {
	position: absolute;
	right: max(16px, 40rem);
	bottom: max(32px, 40rem);
	z-index: 20;
	display: flex;
	gap: max(8px, 8rem);
	color: var(--white);
}
.hm-controls-item {
	display: flex;
	align-items: center;
	gap: max(8px, 8rem);
}
.hm-controls-item:last-child {
	flex-direction: row-reverse;
}
.hm-controls-all {display: none;}
.hm-controls-num {
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
}
.hm-controls-line {
	position: relative;
	overflow: hidden;
	width: 66px;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
}
.hm-controls-line::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	content: '';
	width: 0;
	background: var(--white);
}
.vis .hm-controls-line::before {
	width: 100%;
	transition: all linear 17s;
}
.hm-arrow.slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: auto;
	margin-top: 0;
}
.hm-arrow.slick-arrow::before, .hm-arrow.slick-arrow::after {
	display: none;
}
.hm-arrow.hm-prev {
	left: 0;
	width: calc(50% - 4px);
}
.hm-arrow.hm-next {
	right: 0;
	width: calc(50% - 4px);
}

/************************* demo *************************/
.demo {
	position: relative;
}
.demo-title {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: max(16px, 16rem);
}
.demo-tabs {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	max-width: 1179px;
	width: 73.6%;
	display: flex;
	justify-content: center;
}
.demo-tabs-block {
	padding: max(6px, 6rem);
	background: var(--sky_50);
	border-radius: 100px;
}
.demo-tabs-wrap {
	display: flex;
	position: relative;
}
.demo-tabs-bg {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 33%;
	height: 100%;
	background: #ccc;
	border-radius: 100px;
	transition: all 0.4s ease-in-out;
}
.demo-tabs-bg::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 200%;
	content: '';
	background: linear-gradient(95deg, #00AEEF 0%, #0085B7 50%, #00AEEF 100%);
	border-radius: 100px;
	transition: all 0.5s ease-in-out;
}
.demo-tabs-bg::after {
	position: absolute;
	inset: 0;
	content: '';
	box-shadow: inset 0 0 10px 0 rgba(222, 248, 253, 0.8), inset 0 0 10px 0 #00aeef;
	border-radius: 100px;
}
.demo-tabs-bg.hover::before {
	left: 0;
}
.demo-tabs-link {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--ocean_50);
	text-decoration: none;
	padding: max(13px, 13rem) max(40px, 40rem) max(17px, 17rem);
	border-radius: 100px;
}
.demo-tabs-link:hover {
	color: var(--dark);
}
.demo-tabs-link.active {
	color: var(--white);
}
.demo-tabs-link span {
	position: relative;
}
.demo-tabs-link svg {
	position: relative;
	width: 24px;
	height: 24px;
	margin: -4px 0;
	display: none;
}
.demo-tabs-link path {
	stroke: var(--ocean_50);
	transition: all 0.4s ease-in-out;
}
.demo-tabs-link.active path {
	stroke: var(--white);
}
.demo-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.s-delay .slick-slide:not(.slick-active) {
    transition-delay: 500ms !important;
}
.demo-item {
	display: none;
}
.demo-item.vis {
	display: block;
}
.demo-item-wrap {
	position: relative;
	display: flex;
	justify-content: flex-end;
}
.demo-img {
	max-width: 1179px;
	width: 73.6%;
}
.demo-img-item {display: none;}
.demo-img-item.vis {display: block;}
.demo-side {
	position: absolute;
	top: 0;
	left: 0;
}
.demo-top {
	position: relative;
	display: flex;
	margin: 0 0 max(16px, 28rem);
}
.demo-top-link {
	padding: max(16px, 16rem) max(16px, 24rem);
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
	color: var(--ocean_40);
	text-decoration: none;
	border-bottom: 1px solid rgba(21, 36, 53, 0.2);
}
.demo-top-link:hover {
	color: var(--dark);
}
.demo-top-link:last-child:hover {
	color: var(--blue);
}
.demo-top-link.active {
	color: var(--dark);
	border-bottom: 1px solid var(--dark);
}
.demo-top-link:last-child.active {
	color: var(--blue);
	border-bottom: 1px solid var(--blue);
}
.demo-list {display: none;}
.demo-list.vis {display: block;}
.demo-list-item {
	position: relative;
	padding: 0 0 max(3px, 3rem) max(18px, 18rem);
	margin: 0 0 max(16px, 16rem);
}
.demo-list-item:last-child {margin: 0;}
.demo-list-link::before,
.demo-list-link::after {
	position: absolute;
	top: 0;
	left: 0;
	width: max(4px, 4rem);
	height: 100%;
	content: '';
	border-radius: 5px;
	pointer-events: none;
	transition: all 0.4s ease-in-out;
}
.demo-list-link::before {
	background: rgba(0, 13, 29, 0.2);
}
.demo-list-link::after {
	background: var(--pink);
	height: 0;
}
.demo-list:last-child .demo-list-link::after {
	background: var(--blue);
}
.demo-list-link.active::after {
	height: 100%;
}
.demo-list-link {
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
	color: var(--ocean_40);
	text-decoration: none;
}
.demo-list-link:hover,
.demo-list-link.active {
	color: var(--dark);
}
.demo-list-text {
	display: none;
	max-width: max(480px, 480rem);
	padding: max(8px, 12rem) 0 0;
}
.demo-list-text.vis {
	display: block;
}

/************************* box *************************/
.box {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: max(530px, 800rem);
	max-height: 100dvh;
	margin: 0 min(-16px, -40rem);
	background: var(--sky_50);
}
.box::after {
	position: absolute;
	inset: 0;
	z-index: 10;
	content: '';
	backdrop-filter: blur(50px);
	background: rgba(254, 254, 255, 0.1);
}
.box-content {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(16px, 32rem);
	text-align: center;
}
.box-content h2 {
	max-width: max(320px, 500rem);
}
.box-content .subheading {
	max-width: max(500px, 610rem);
}
.box-content::after {
	position: absolute;
	left: 50%;
	bottom: min(-116px, -116rem);
	content: '';
	margin-left: min(-6px, -6rem);
	width: max(11px, 11rem);
	height: max(66px, 66rem);
	background: url(../img/down.svg) 50% 50% no-repeat;
	background-size: contain;
	animation: move 2s infinite ease-in-out;
}
.page404-img .page404-mask {
	width: max(74px, 127rem);
}
@keyframes move {
  0% {transform: translateY(0px);}
  45% {transform: translateY(36px);}
  100% {transform: translateY(0px);}
}
.box-wrap {
	position: absolute;
	inset: 0;
}
.box-1 {
	position: absolute;
	top: -10%;
	left: -55%;
	width: max(372px, 1253rem);
	height: max(288px, 1010rem);
	animation: box1 24s infinite linear;
}
@keyframes box1 {
  0% {left: -55%; top: -10%; transform: rotate(0);}
  15% {left: -20%; top: 90%; transform: rotate(-90deg);}
  35% {left: 50%; top: 80%; transform: rotate(-120deg);}
  52% {left: 55%; top: -100%; transform: rotate(-215deg);}
  65% {left: 10%; top: -90%; transform: rotate(-260deg);}
  80% {left: -30%; top: -120%; transform: rotate(-295deg);}
  90% {left: -50%; top: -40%; transform: rotate(-360deg);}
  100% {left: -55%; top: -10%; transform: rotate(-360deg);}
}
.box-2 {
	position: absolute;
	top: -10%;
	left: -55%;
	width: max(372px, 1253rem);
	height: max(288px, 1010rem);
	animation: box2 24s infinite linear;
}
@keyframes box2 {
  0% {left: 50%; top: 80%; transform: rotate(-120deg);}
  17% {left: 55%; top: -100%; transform: rotate(-215deg);}
  30% {left: 10%; top: -90%; transform: rotate(-260deg);}
  45% {left: -30%; top: -120%; transform: rotate(-295deg);}
  55% {left: -50%; top: -40%; transform: rotate(-360deg);}
  65% {left: -55%; top: -10%; transform: rotate(-360deg);}
  85% {left: -20%; top: 90%; transform: rotate(-90deg);}
  100% {left: 50%; top: 80%; transform: rotate(-120deg);}
}
.box-3 {
	position: absolute;
	left: -30%;
	top: -120%;
	transform: rotate(-295deg);
	width: max(372px, 1253rem);
	height: max(288px, 1010rem);
	animation: box3 24s infinite linear 2s;
}
@keyframes box3 {
  0% {left: -30%; top: -120%; transform: rotate(-295deg);}
  10% {left: -50%; top: -40%; transform: rotate(-360deg);}
  20% {left: -55%; top: -10%; transform: rotate(-360deg);}
  35% {left: -40%; top: 90%; transform: rotate(-90deg);}
  55% {left: 50%; top: 80%; transform: rotate(-120deg);}
  72% {left: 55%; top: -100%; transform: rotate(-215deg);}
  85% {left: 10%; top: -90%; transform: rotate(-260deg);}
  100% {left: -30%; top: -120%; transform: rotate(-295deg);}
}

/************************* promo *************************/
.promo {
	display: flex;
	margin: 0 min(-16px, -40rem);
}
.promo-slider {
	width: 50%;
	background: var(--dark);
}
.promo-slider::after {
	position: absolute;
	inset: 0;
	content: '';
	background: var(--blue_10);
	pointer-events: none;
}
.promo-slide img {
	width: 100%;
	height: max(600px, 800rem);
	max-height: 100vh;
	object-fit: cover;
}
.promo-slider .slick-dots {
	left: max(16px, 20rem);
	right: max(16px, 20rem);
	bottom: max(16px, 30rem);
	justify-content: stretch;
}
.promo-slider .slick-dots li {
	flex: 1;
}
.promo-slider .slick-dots button {
	position: relative;
	width: 100%;
	background: rgba(255, 255, 255, 0.3);
}
.promo-slider .slick-dots button::before {
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: 0;
	right: 0;
	content: '';
}
.promo-slider .slick-dots button::after {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	content: '';
	background: var(--white);
}
.promo-slider .slick-dots button:hover {
	background: var(--white);
	opacity: 1;
}
.promo-slider .slick-dots .slick-active button {
	width: 100%;
	background: rgba(255, 255, 255, 0.3);
	opacity: 1;
}
.promo-slider .slick-dots .slick-active button::after {
	width: 100%;
	transition: width 4s linear;
}
.promo-content {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: max(40px, 48rem);
	padding: 0 max(16px, 20rem);
}
.promo-content h2 {
	max-width: max(320px, 430rem);
}
.promo-text {
	max-width: max(450px, 450rem);
	margin-top: min(-4px, -16rem);
}
.promo-slogan {
	display: flex;
	gap: max(6px, 6rem);
}
.promo-slogan h3 {
	color: var(--ocean_20);
	transition: all 0.5s ease-in-out;
}
.ani_start .promo-slogan h3 {
	color: var(--dark);
}
.promo-slogan h3:nth-child(2){transition-delay: 0.6s;}
.promo-slogan h3:nth-child(3){transition-delay: 1.2s;}

/************************* main-blog *************************/
.main-blog.blog-section h2 {
    margin: 0 0 max(36px, 40rem);
}
.partner {
	padding: max(36px, 50rem) 0 0;
}
.partner-text {
	margin: 0 0 max(16px, 20rem);
	text-align: center;
	color: var(--ocean_40);
}
.partner-line {
	overflow: hidden;
	margin: 0 min(-16px, -40rem);
}
.partner-wrap {
	display: flex;
	align-items: center;
	gap: max(40px, 100rem);
	padding: 0 max(40px, 100rem) 0 0;
}
.partner-logo {
	position: relative;
}
.partner-logo img {
	transition: all 0.4s ease-in-out;
}
.partner-hover {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	opacity: 0;
}
.partner-logo:hover .partner-def {opacity: 0;}
.partner-logo:hover .partner-hover {opacity: 1;}

/************************* hero inner page *************************/
.has-banner #wrapper {
	padding-top: 0;
}
.has-banner .header {
	background: transparent;
}
.has-banner .header-fixed {
    background: var(--white);
}
.hero {
	position: relative;
	overflow: hidden;
	height: max(670px, 800rem);
	max-height: 100dvh;
	margin: 0 0 max(100px, 130rem);
}
.hero-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero::before {
	position: absolute;
	inset: 0;
	content: '';
	background: url(../img/bg.png) 0 0 no-repeat;
	background-size: cover;
}
.hero::after {
	position: absolute;
	inset: 0;
	content: '';
	background: url(../img/hero-bg-1.png) 0 0 no-repeat, url(../img/hero-bg-2.png) 100% 0 no-repeat;
	background-size: max(375px, 671rem), max(400px, 591rem);
}
.hero-block {
	position: absolute;
	inset: 0;
	z-index: 20;
	padding: 0 max(16px, 40rem) max(32px, 40rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: max(20px, 30rem);
	color: var(--white);
}
.hero-block h1 {
	max-width: max(400px, 800rem);
}
.hero-block .subheading {
	max-width: max(610px, 720rem);
}
.hero-block .button {
	margin-top: max(10px, 10rem);
}
.hero-1 .hero-block .subheading {
	max-width: max(480px, 580rem);
}
.hero-2 .hero-block h1 {
	max-width: max(400px, 680rem);
}
.hero-2 .hero-block .subheading {
	max-width: max(550px, 650rem);
}
.hero-3 .hero-block .subheading {
	max-width: max(550px, 650rem);
}
.hero-4 .hero-block h1 {
	max-width: max(300px, 560rem);
}
.hero-4 .hero-block .subheading {
	max-width: max(550px, 650rem);
}
.hero-5 .hero-block .subheading {
	max-width: max(530px, 620rem);
}

/************************* section *************************/
.section {
	margin: 0 0 max(100px, 130rem);
}

/************************* breadcrumbs *************************/
.breadcrumbs {
	position: relative;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: max(4px, 4rem);
	padding: 0 max(16px, 40rem);
	margin: 0 0 max(36px, 50rem);
}
.breadcrumbs li {
	padding: 0;
	margin: 0;
	font-size: var(--min);
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--dark);
	list-style: none;
}
.breadcrumbs a {
	position: relative;
	display: inline-flex;
	gap: max(4px, 4rem);
	color: var(--ocean_50);
	text-decoration: none;
}
.breadcrumbs a:hover {
	color: var(--ocean);
}
.breadcrumbs a::after {
	display: block;
	content: '';
	width: max(14px, 14rem);
	height: max(14px, 14rem);
	margin: max(1px, 2rem) 0 0;
	background: url(../img/crumb-arrow.svg) 50% 100% no-repeat;
	background-size: 14px auto;
	transition: all .3s ease-out;
}
.breadcrumbs li:last-child a::after {display: none;}
.breadcrumbs a:hover::after {
	background: url(../img/crumb-arrow-blue.svg) 50% 100% no-repeat;
	background-size: 14px auto;
}
.has-banner .breadcrumbs {
	position: absolute;
	top: max(94px, 131rem);
	left: 0;
	right: 0;
	z-index: 200;
}
.has-banner .breadcrumbs li {
	color: var(--white);
}
.has-banner .breadcrumbs a {
	color: var(--sky);
}
.has-banner .breadcrumbs a:hover {
	color: var(--white);
}
.has-banner .breadcrumbs a::after {
	background: url(../img/crumb-arrow-sky.svg) 50% 100% no-repeat;
	background-size: 14px auto;
}
.has-banner .breadcrumbs a:hover::after {
	background: url(../img/crumb-arrow-white.svg) 50% 100% no-repeat;
	background-size: 14px auto;
}

/************************* problem *************************/
.top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(32px, 32rem);
	margin: 0 0 max(36px, 50rem);
	text-align: center;
}
.top .subheading {
	max-width: max(680px, 820rem);
}
.problem-block {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(20px, 20rem);
}
.problem-item {
	padding: max(19px, 27rem);
	background: var(--white);
	box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
}
.problem-top {
	display: flex;
	align-items: center;
	gap: max(16px, 16rem);
	margin: 0 0 max(16px, 40rem);
}
.problem-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(66px, 66rem);
	min-width: max(66px, 66rem);
	height: max(66px, 66rem);
	background: var(--pink_10);
	border-radius: max(10px, 10rem);
}
.problem-icon img {
	width: max(40px, 40rem);
}

/************************* pillars *************************/
.pillars .top {
	margin: 0 0 max(36px, 65rem);
}
.pillars-block {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(20px, 20rem);
	counter-reset: pillar;
}
.pillars-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: max(19px, 27rem);
	color: var(--dark);
	text-decoration: none;
	background: var(--white);
	box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
	counter-increment: pillar;
}
.animate .pillars-item {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.ani_start .pillars-item {
	opacity: 1;
}
.animate .pillars-item:nth-child(2){transition-delay: 0.1s;}
.animate .pillars-item:nth-child(3){transition-delay: 0.2s;}
.animate .pillars-item:nth-child(4){transition-delay: 0.3s;}
.animate .pillars-item:nth-child(5){transition-delay: 0.4s;}
.animate .pillars-item:nth-child(6){transition-delay: 0.5s;}
.pillars-top {
	display: flex;
	align-items: center;
	width: 100%;
	gap: max(13px, 16rem);
	margin: 0 0 max(16px, 40rem);
}
.pillars-top::after {
	margin-left: auto;
	content: '/'counter(pillar, decimal-leading-zero);
	font-size: var(--subheading);
    line-height: 130%;
    letter-spacing: -0.04em;
    color: var(--ocean_20);
}
.pillars-top h3 {
	padding-bottom: max(2px, 8rem);
	color: var(--blue);
}
.pillars-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(66px, 66rem);
	min-width: max(66px, 66rem);
	height: max(66px, 66rem);
	background: var(--sky_50);
	border-radius: max(10px, 10rem);
}
.pillars-icon img {
	width: max(40px, 40rem);
}
.pillars-text {
	margin: 0 0 max(16px, 28rem);
}
.pillars-main {
	display: flex;
	align-items: center;
	flex: 1;
	width: 100%;
	gap: max(28px, 28rem);
	padding: max(16px, 20rem);
	margin: auto 0 max(16px, 28rem);
	background: var(--grey);
	border-radius: max(10px, 10rem);
}
.pillars-img {
	display: flex;
	align-items: center;
	width: max(60px, 116rem);
	min-width: max(60px, 116rem);
	aspect-ratio: 1/1;
}
.pillars-img img {
	width: 100%;
}
.pillars-info {
	display: flex;
	flex-direction: column;
	gap: max(10px, 10rem);
}
.pillars-info h3 {
	color: var(--ocean);
}
.pillars-main .pillars-text {
	margin: 0;
}
.pillars-item:hover .button-border {
	color: var(--white);
	background-color: var(--blue);
}
.pillars-item:hover .button-border::after {
    background-position: max(14px, 14rem) min(-14px, -14rem), 0 0;
}

/************************* why *************************/
.why .top {
	margin: 0 0 max(36px, 65rem);
}
.why-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.why-col {
	width: calc(50% - 30px);
}
.why-img {
	position: relative;
	overflow: hidden;
	height: max(400px, 500rem);
}
.why-img img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
	transform: scale(1.2);
}
.ani_start .why-img img {
	transform: scale(1);
}
.why-img::before {
	position: absolute;
	inset: 0;
	z-index: 10;
	content: '';
	background: var(--blue_10);
}
.faq {
	border-bottom: 1px solid var(--sky);
}
.faq-item {
	padding: max(24px, 24rem) 0;
	border-top: 1px solid var(--sky);
}
.faq-top {
	display: block;
	position: relative;
	padding: 0 max(40px, 100rem) 0 0;
	color: var(--dark);
	text-decoration: none;
}
.faq-top::before,
.faq-top::after {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -14px;
	width: 28px;
	height: 28px;
	content: '';
	transition: all 0.4s ease-in-out;
}
.faq-top::before {
	background: url(../img/plus.svg) 50% 50% no-repeat;
}
.faq-top::after {
	background: url(../img/minus.svg) 50% 50% no-repeat;
}
.faq-top.active::before {
	height: 0;
	margin-top: 0;
}
.faq-hidden {
	display: none;
	padding: max(20px, 20rem) 0 0;
}
.faq-hidden.vis {
	display: block;
}

/************************* approach *************************/
.ecm .top .subheading {
    max-width: max(860px, 1000rem);
}
.scheme-img {
	overflow: hidden;
	margin: 0 min(-16px, -40rem);
}
.scheme-img img {
	width: 100%;
}
.scheme-mob {display: none;}
.scheme-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 258px;
	margin: 0 0 28px;
	background: #fff;
	border: 1px solid var(--sky);
	box-shadow: 0 7px 52px 0 rgba(21, 36, 53, 0.04);
	border-radius: 9px;
}
.scheme-box:last-child {margin: 0;}
.scheme-box::after {
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top: -31px;
	width: 6px;
	height: 31px;
	content: '';
	background: url(../img/scheme/arrow-1.svg) 50% 50% no-repeat; 
}
.scheme-box:first-child::after {display: none;}
.scheme-logo {width: 148px;}
.dropdown {
	position: relative;
	height: 80px;
	margin: 0 0 28px;
}
.above {z-index: 50;}
.dropdown:last-child {margin: 0;}
.dropdown::after {
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top: -31px;
	width: 6px;
	height: 31px;
	content: '';
	background: url(../img/scheme/arrow-1.svg) 50% 50% no-repeat; 
}
.dropdown:first-child::after {display: none;}
.dropdown-block {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border: 1px solid var(--sky);
	box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
	border-radius: 8px;
}
.dropdown-top {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 78px;
	padding: 0 50px 0 19px;
	font-size: 20px;
	line-height: 120%;
	letter-spacing: -0.04em;
	color: var(--dark);
	text-decoration: none;
}
.dropdown-top::after {
	position: absolute;
	top: 50%;
	right: 20px;
	content: '';
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url(../img/dropdown-arrow.svg) 50% 50% no-repeat;
	background-size: contain;
}
.dropdown-top.active::after {
	transform: rotate(180deg);
}
.dropdown-icon {
	width: 40px;
}
.dropdown-icon img {
	width: 40px;
}
.dropdown-list {
	display: none;
	padding: 20px 0;
	margin: 0 19px;
	border-top: 1px solid var(--sky);
}
.dropdown-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 120%;
	letter-spacing: -0.02em;
}
.dropdown-item:last-child {
	margin: 0;
}

/************************* tracing *************************/
.tracing-block {
	display: flex;
	justify-content: center;
	gap: max(24px, 50rem);
	max-width: 1480px;
	margin: 0 auto;
	padding: 10px 0 max(50px, 68rem);
}
.tracing-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: max(100px, 194rem);
	gap: max(12px, 12rem);
}
.tracing-item::after {
	position: absolute;
	top: max(34px, 34rem);
	right: min(-40px, -66rem);
	content: '';
	width: max(60px, 83rem);
	height: 8px;
	background: url(../img/scheme/arrow-2.svg) 100% 50% no-repeat;
}
.tracing-item:last-child::after {
	position: absolute;
	top: 100%;
	right: 50%;
	content: '';
	width: max(600px, 981rem);
	max-width: 980px;
	height: 50px;
	margin-top: 8px;
	background: url(../img/scheme/arrow-3.svg) 0% 50% no-repeat;
}
.tracing-item:last-child::before {
	position: absolute;
	right: 50%;
	top: 100%;
	margin-top: 8px;
	content: '';
	width: 3px;
	height: 50px;
	background: url(../img/scheme/arrow-5.svg) 100% 50% no-repeat;
}
.tracing-item.active {color: var(--blue);}
.tracing-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(76px, 76rem);
	height: max(76px, 76rem);
	background: var(--sky_50);
	border-radius: max(10px, 10rem);
}
.tracing-icon img {
	width: max(40px, 40rem);
}
.tracing-item h3 {
	margin: 0 0 max(4px, 4rem);
}

/************************* how *************************/
.how .top .subheading {
    max-width: none;
}
.how-block {
	margin: min(-30px, -60rem) 0 0;
}
.how-nav {
	display: flex;
	flex-direction: column;
	gap: max(10px, 10rem);
}
.how-nav-line {
	display: flex;
	align-items: center;
	height: max(72px, 72rem);
	background: #fff;
	box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
	border: 1px solid var(--sky);
	border-radius: 100px;
}
.how-nav-item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 15px 0 max(40px, 80rem);
	gap: max(16px, 16rem);
	font-weight: 600;
	font-size: var(16px, 18rem);
	line-height: 120%;
	letter-spacing: -0.04em;
}
.how-nav-item::after {
	position: absolute;
	right: 0;
	top: 50%;
	content: '';
	margin-top: -15px;
	height: 30px;
	border-right: 1px solid var(--sky);
}
.how-nav-icon {
	width: max(32px, 32rem);
}
.how-nav-item img {width: 100%;}
.scheme-box-min {
	width: 100px;
	height: 90px;
	margin: 0 auto 28px;
}
.scheme-box-min img {
	max-width: 64px;
	max-height: 64px;
}
.scheme-item {
	position: relative;
    display: flex;
	align-items: flex-start;
    gap: 16px;
    padding: 19px;
    margin: 0 0 28px;
    background: #fff;
    border: 1px solid var(--sky);
    box-shadow: 0 7px 52px 0 rgba(21, 36, 53, 0.04);
    border-radius: 9px;
}
.scheme-item:last-child {margin: 0;}
.scheme-item::after {
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: -31px;
    width: 6px;
    height: 31px;
    content: '';
    background: url(../img/scheme/arrow-1.svg) 50% 50% no-repeat;
}
.scheme-item:first-child::after {display: none;}
.scheme-item-icon {
	width: 70px;
	min-width: 70px;
}
.scheme-item-icon img {width: 100%;}
.scheme-item .subheading {margin: 0 0 10px;}

/************************* cloud *************************/
.cloud-block {
	margin: min(-30px, -60rem) 0 0;
}

/************************* erp *************************/
.scheme-note {
	display: flex;
	gap: 100px;
	margin: -18px 0 10px;
	padding: 4px 0;
	background: url(../img/scheme/arrow-6.svg) 50% 50% no-repeat;
}
.scheme-note-item:first-child {
	text-align: right;
}
.scheme-note-item {
	flex: 1;
}
.scheme-note-item .subheading {
	margin: 0 0 8px;
	color: var(--blue);
}
.scheme-note + .scheme-box::after {display: none;}
.dropdown-big .dropdown-list .dropdown-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	background: var(--sky_50);
	border-radius: 10px;
}

/************************* timeline *************************/
.timeline .top .subheading {
    max-width: max(840px, 960rem);
}
.timeline-block {
	max-width: max(1100px, 1300rem);
	margin: 0 auto;
	display: flex;
}
.timeline-week {
	position: relative;
	display: flex;
	width: 60%;
}
.timeline-item {
	width: 20%;
	border-left: 1px solid var(--sky);
}
.timeline-week .timeline-item:nth-child(2){
	margin-top: max(72px, 80rem);
}
.timeline-week .timeline-item:nth-child(3){
	margin-top: max(144px, 160rem);
}
.timeline-item:nth-child(2){
	margin-top: max(216px, 240rem);
}
.timeline-item:nth-child(3){
	margin-top: max(288px, 320rem);
}
.timeline-week .timeline-item {
	width: 33.33%;
}
.timeline-top {
	padding: max(10px, 10rem) max(24px, 24rem) max(14px, 14rem);
	margin: 0 0 3px;
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
	border-radius: max(10px, 10rem);
	background: var(--blue);
}
.timeline-top .timeline-time {display: none;}
.timeline-week .timeline-top {
	background: var(--sky);
}
.timeline-week .timeline-item:first-child .timeline-top {
	color: var(--white);
	background: var(--dark);
}
.timeline-content {
	padding: max(19px, 21rem) max(20px, 24rem) 0;
}
.timeline-time {
	margin: 0 0 max(16px);
	color: var(--ocean_50);
}
.timeline-text {
	max-width: max(200px, 200rem);
}
.timeline-week .timeline-item:nth-child(2) .timeline-top,
.timeline-week .timeline-item:nth-child(3) .timeline-top,
.timeline-item:nth-child(2) .timeline-top{
	width: 120%;
}
.timeline-item:last-child {
	border-left: 0;
}
.timeline-week-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: max(10px, 10rem) max(24px, 24rem) max(14px, 14rem);
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
	text-align: center;
	border-radius: max(10px, 10rem);
	background: var(--grey);
}

/************************* approach *************************/
.approach {
	display: flex;
	gap: max(40px, 130rem);
	padding: max(32px, 50rem) max(40px, 20rem);
	color: var(--white);
	background: linear-gradient(90.94deg, #00aeef 0.42%, #285775 99.2%);
	border-radius: max(10px, 10rem);
}
.approach-side {
	width: max(320px, 340rem);
	min-width: max(320px, 340rem);
}
.approach-side h2 {
	margin: 0 0 max(24px, 30rem);
}
.approach-content {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(30px, 30rem) max(20px, 30rem);
}
.approach-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(66px, 66rem);
	min-width: max(66px, 66rem);
	height: max(66px, 66rem);
	margin: 0 0 max(24px, 28rem);
	background: var(--sky_20);
	border-radius: max(10px, 10rem);
}
.approach-icon img {
	width: max(40px, 40rem);
}
.approach-item h3 {
	margin: 0 0 max(16px, 16rem);
}

/************************* cap *************************/
.cap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: max(20px, 20rem);
}
.cap-item {
	position: relative;
	padding: max(19px, 23rem);
	background: var(--white);
	box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
}
.animate .cap-item {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.ani_start .cap-item {
	opacity: 1;
}
.animate .cap-item:nth-child(2){transition-delay: 0.1s;}
.animate .cap-item:nth-child(3){transition-delay: 0.2s;}
.animate .cap-item:nth-child(4){transition-delay: 0.3s;}
.animate .cap-item:nth-child(5){transition-delay: 0.4s;}
.animate .cap-item:nth-child(6){transition-delay: 0.5s;}
.animate .cap-item:nth-child(7){transition-delay: 0.6s;}
.animate .cap-item:nth-child(8){transition-delay: 0.7s;}
.animate .cap-item:nth-child(9){transition-delay: 0.8s;}
.animate .cap-item:nth-child(10){transition-delay: 0.9s;}
.cap-icon {
	width: max(40px, 40rem);
	height: max(40px, 40rem);
	margin: 0 0 max(24px, 28rem);
}
.cap-icon img {
	width: 100%;
}
.cap-item .subheading {
	margin: 0 0 max(16px, 16rem);
}
.cap-3x {
	grid-template-columns: repeat(3, 1fr);
}
.cap-3x .cap-item {
	padding: max(19px, 27rem);
}
.cap-3x .cap-icon {
	width: max(44px, 44rem);
	height: max(44px, 44rem);
	margin: 0 0 max(24px, 30rem);
}
.cap-text {
	max-width: max(420px, 420rem);
}
.cap-numeric {
	counter-reset: cap;
}
.cap-numeric .cap-item {
	counter-increment: cap;
}
.cap-numeric .cap-item::before {
	position: absolute;
	top: max(19px, 27rem);
	right: max(19px, 27rem);
	height: max(44px, 44rem);
	display: flex;
	align-items: center;
	content: counter(cap, decimal-leading-zero);
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
	color: var(--ocean_20);
}

/************************* calc *************************/
.calc-form {
	max-width: max(540px, 600rem);
	margin: 0 auto;
}
.calc-form .select-item {
    margin: 0 0 max(20px, 24rem);
}
.calc-form .button-holder {
	padding-top: max(1px, 6rem);
}
.calc-num {
	display: flex;
	align-items: flex-end;
	gap: max(4px, 4rem);
	margin: 0 0 max(20px, 24rem);
}
.calc-num .wpcf7-form-control-wrap {
	flex: 1;
}
.calc-num .wpcf7-form-control-wrap input {
    margin: 0;
}
.plus, .minus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(46px, 46rem);
	min-width: max(46px, 46rem);
	height: max(46px, 46rem);
	border: 1px solid var(--ocean_20);
    border-radius: max(4px, 4rem);
    transition: all 0.4s ease-in-out;
}
.plus:hover, .minus:hover {
	border-color: var(--blue);
}
.plus svg, .minus svg {
	opacity: 0.5;
	transition: all 0.4s ease-in-out;
}
.plus:hover svg, .minus:hover svg {
	opacity: 1;
}

/************************* info *************************/
.info {
	display: flex;
	justify-content: space-between;
}
.info-col {
	width: calc(50% - 30px);
}
.info-img {
	position: relative;
	overflow: hidden;
	height: max(400px, 540rem);
}
.info-img img {
	position: relative;
	width: 100%;
	/*height: 100%;*/
	height:auto;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
	transform: scale(1.2);
}
.ani_start .info-img img {
	transform: scale(1);
}

.info-img.overlay::before {
	position: absolute;
	inset: 0;
	z-index: 10;
	content: '';
	background: var(--blue_10);
}

.info-img.imagehover:hover img {
	transform: scale(1.05);
}

.info-content .buttons {
	margin:44rem 0 0 0;
}

.info-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.info-content h2 {
	margin: 0 0 max(36px, 50rem);
}
.info-reverse {
	flex-direction: row-reverse;
}
.info-center .info-content {
	text-align: center;
}
.info-center .info-text {
	max-width: max(580px, 580rem);
	margin: 0 auto;
}
.info-text ul {
	margin: 0 0 max(22px, 22rem);
}
.info-text ul:last-child {margin: 0;}
.info-text ul li {
	position: relative;
	padding: 0 0 0 max(27px, 27rem);
}
.info-text ul li::before {
	position: absolute;
	top: max(11px, 11rem);
	left: max(11px, 11rem);
	content: '';
	width: max(4px, 4rem);
	height: max(4px, 4rem);
	background: var(--dark);
	border-radius: 50%;
}

/************************* case-top *************************/
.case-top {
	position: relative;
	overflow: hidden;
	height: max(380px, 613rem);
	border-radius: max(10px, 10rem);
}

.case-top::before {
    position: absolute;
    inset: 0;
    content: '';
    background: url(../img/case-mask.png) 0 0 no-repeat;
    background-size: cover;
}
.case-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-top-wrap {
	position: absolute;
	inset: 0;
	z-index: 20;
	padding: 0 max(16px, 40rem) max(32px, 40rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: max(20px, 30rem);
	color: var(--white);
}
.case-top-wrap .subheading {
	max-width: max(480px, 580rem);
	margin: 0;
}

/************************* case-main *************************/
.case-main {
    max-width: max(720px, 800rem);
    margin: 0 auto;
}
.case-main .article-block {
	margin: 0 0 max(60px, 60rem);
}
.case-main .article-block:last-child {margin: 0;}
.author {
	display: flex;
	align-items: center;
	gap: max(24px, 40rem);
	padding: max(32px, 40rem) max(24px, 40rem);
	margin: 0 0 max(60px, 60rem);
	background: var(--grey);
	border-radius: max(10px, 10rem);
}
.author:last-child {margin: 0;}
.author-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: max(120px, 120rem);
	min-width: max(120px, 120rem);
}
.author-side .review-photo {
	width: max(120px, 120rem);
	height: max(136px, 136rem);
	margin: 0 auto max(10px, 10rem);
}
.author-side .subheading {
	margin: 0 0 max(8px, 8rem);
}
.author-status {
	color: var(--blue);
	opacity: 0.67;
}
.author-content {
	flex: 1;
}
.case-video {
	position: relative;
	overflow: hidden;
	height: max(210px, 451rem);
}
.case-video::before {
	position: absolute;
    inset: 0;
    content: '';
    background: var(--blue_10);
}
.case-video-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-play svg {
	width: max(54px, 54rem);
	height: max(54px, 54rem);
}
.video-play path {
	fill: var(--white);
	transition: all 0.4s ease-in-out;
}
.video-play circle {
	stroke: var(--white);
	transition: all 0.4s ease-in-out;
}
.video-play:hover path {
	fill: var(--blue);
}
.video-play:hover circle {
	stroke: var(--blue);
}
.case-video-time {
	position: absolute;
	right: max(12px, 24rem);
	bottom: max(12px, 24rem);
	padding: max(4px, 4rem) max(8px, 8rem) max(6px, 6rem);
	color: var(--ocean);
	background: var(--sky);
	border-radius: 100px;
}


/************************* case-section *************************/
.case-section h2 {
	margin: 0 0 max(36px, 50rem);
	text-align: center;
}

/************************* results *************************/
.results-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(32px, 32rem);
	margin: 0 0 max(36px, 50rem);
	text-align: center;
}
.results-block {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: max(20px, 20rem);
}
.results-item {
	padding: max(19px, 27rem);
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
}
.results-num {
	margin: 0 0 max(12px, 12rem);
	color: var(--blue);
}
.results-title {
	margin: 0 0 max(24px, 24rem);
	font-weight: 600;
}



/************************* blog *************************/
.blog h1 {
	margin: 0 0 max(36px, 65rem);
}

.case-section h1 {
	margin: 0 0 max(36px, 65rem);
}

.blog-block {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(20px, 20rem);
	margin: 0 0 max(36px, 50rem);
}
.blog-block:last-child {margin: 0;}
.blog-item {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--dark);
	text-decoration: none;
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
}
.animate .blog-item {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.ani_start .blog-item {
	opacity: 1;
}
.animate .blog-item:nth-child(2){transition-delay: 0.1s;}
.animate .blog-item:nth-child(3){transition-delay: 0.2s;}
.animate .blog-item:nth-child(4){transition-delay: 0.3s;}
.animate .blog-item:nth-child(5){transition-delay: 0.4s;}
.animate .blog-item:nth-child(6){transition-delay: 0.5s;}
.animate .blog-item:nth-child(7){transition-delay: 0.6s;}
.animate .blog-item:nth-child(8){transition-delay: 0.7s;}
.animate .blog-item:nth-child(9){transition-delay: 0.8s;}
.animate .blog-item:nth-child(10){transition-delay: 0.9s;}
.blog-img {
	position: relative;
	overflow: hidden;
	height: max(240px, 284rem);
}
.blog-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}
.blog-item:hover .blog-img img {
	transform: scale(1.2);
}
.blog-img::after {
	position: absolute;
	inset: 0;
	content: '';
	background: var(--blue_10);
}
.blog-label {
	position: absolute;
	top: max(10px, 10rem);
	right: max(10px, 10rem);
	width: max(44px, 44rem);
}
.blog-label img {
	height: auto;
}
.blog-item:hover .blog-label img {
	transform: none;
}
.blog-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: max(19px, 27rem) max(19px, 19rem);
}
.blog-date {
	margin: 0 0 max(16px, 16rem);
	font-size: var(--min);
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--ocean_50);
}
.subheading {
	margin: 0 0 max(16px, 20rem);
	font-weight: 400;
	font-size: var(--subheading);
	line-height: 130%;
	letter-spacing: -0.04em;
}
.blog-content h3 {
	margin: 0 0 max(16px, 16rem);
}
.blog-text {
	margin: 0 0 max(20px, 20rem);
}
.blog-content .more {
	margin: auto 0 0;
}
.more {
	font-weight: 600;
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--blue);
	text-decoration: none;
}
.more::after {
	display: inline-block;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right-blue.svg) min(-12px, -12rem) max(12px, 12rem) no-repeat;
    transition: all 0.3s ease-out;
}
.more:hover::after {
    background-position: 0 0;
}
.blog-item:hover .more::after {
    background-position: 0 0;
}
.blog-section h2 {
	margin: 0 0 max(36px, 70rem);
	text-align: center;
}

/************************* pagination *************************/
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: max(10px, 10rem);
}
.pagination-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: max(10px, 10rem);
}
.pagination-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(40px, 40rem);
	height: max(40px, 40rem);
	padding: 0 0 max(3px, 3rem);
	color: var(--dark);
	text-decoration: none;
	border: 1px solid var(--sky);
	border-radius: max(10px, 10rem);
}
.pagination-link:hover {
	border-color: var(--blue);
}
.pagination-link.active {
	color: var(--white);
	background-color: var(--blue);
	border-color: var(--blue);
}
.pagination-arrow {
	position: relative;
	width: max(14px, 14rem);
	height: max(14px, 14rem);
}
.pagination-arrow::before,
.pagination-arrow::after {
	position: absolute;
	inset: 0;
	content: '';
	transition: all 0.3s linear;
}
.pagination-arrow::before {
	background: url(../img/pag-arrow.svg) 50% 50% no-repeat;
	background-size: contain;
}
.pagination-arrow::after {
	background: url(../img/pag-arrow-hover.svg) 50% 50% no-repeat;
	background-size: contain;
	opacity: 0;
}
.pagination-arrow:hover::before {opacity: 0;}
.pagination-arrow:hover::after {opacity: 1;}
.pagination-prev::before,
.pagination-prev::after {
	transform: scale(-1, 1);
}

/************************* review *************************/
.review {
	overflow: hidden;
	margin: 0 min(-16px, -40rem);
}
.review h2 {
	margin: 0 0 max(36px, 50rem);
	text-align: center;
}
.review-slider {
	max-width: max(680px, 760rem);
	margin: 0 auto max(58px, 70rem);
}
.review-slider:last-child {margin: 0 auto max(26px, 30rem);}
.review-slider .slick-list {
    overflow: visible;
}
.review-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(24px, 24rem);
	padding: max(40px, 55rem) max(90px, 110rem);
	text-align: center;
	background: var(--grey);
	border-radius: max(10px, 10rem);
	transition: all 0.4s ease-in-out;
}
.slick-slide .review-item {
	transform: scale(0.75);
}
.slick-center .review-item {
	transform: scale(1);
}
.review-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: max(97px, 97rem);
	height: max(110px, 110rem);
	margin: 0 auto max(16px, 16rem);
	clip-path: shape(nonzero from 0% 24.51%, line to 50% 0%, line to 100% 24.51%, line to 100% 75.49%, line to 50% 100%, line to 0% 75.49%, line to 0% 24.51%, close);
	background: var(--dark);
}
.review-photo-wrap {
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	clip-path: shape(nonzero from 0% 24.51%, line to 50% 0%, line to 100% 24.51%, line to 100% 75.49%, line to 50% 100%, line to 0% 75.49%, line to 0% 24.51%, close);
}
.review-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
a.review-photo::before {
	position: absolute;
	inset: 0;
	z-index: 10;
	content: '';
	background: var(--ocean_50) url(../img/shape.svg) 50% 50% no-repeat;
	background-size: max(86px, 86rem);
	transition: all 0.3s ease-in-out;
}
a.review-photo::after {
	position: absolute;
	inset: 0;
	z-index: 20;
	content: '';
	background: url(../img/play.svg) 50% 50% no-repeat;
	background-size: max(13px, 13rem);
	transition: all 0.3s ease-in-out;
}
a.review-photo .review-photo-wrap {
	width: 100%;
	height: 100%;
}
a.review-photo:hover::before {
	background-image: url(../img/shape-blue.svg);
}
a.review-photo:hover::after {
	background-image: url(../img/play-blue.svg);
}
.review-top h3 {
	margin: 0 0 max(8px, 8rem);
}
.review-status {
	color: var(--blue);
	opacity: 0.67;
}
.review-text {
	max-width: max(390px, 390rem);
}
.review-company {
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--blue);
}
.slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: min(-26px, -30rem);
	display: flex;
	justify-content: center;
	gap: max(10px, 10rem);
}
.slick-dots button {
	display: block;
	width: max(20px, 20rem);
	height: max(2px, 2rem);
	font-size: 0;
	cursor: pointer;
	border-radius: 50px;
	background: var(--ocean_20);
	transition: 0.3s ease-out;
}
.slick-dots button:hover {
	background: var(--blue);
}
.slick-dots .slick-active button {
	width: max(60px, 60rem);
	background: var(--blue);
}
.slick-arrow {
	position: absolute;
	top: 0;
	z-index: 10;
	top: 50%;
	margin-top: min(-21px, -21rem);
	width: max(42px, 42rem);
	height: max(42px, 42rem);
	cursor: pointer;
	font-size: 0;
	transition: 0.3s ease-out;
}
.slick-arrow::before,
.slick-arrow::after {
	position: absolute;
	inset: 0;
	content: '';
	transition: 0.4s ease-out;
}
.slick-arrow::before {
	background: url(../img/slider-arrow.svg) 50% 50% no-repeat;
	background-size: contain;
}
.slick-arrow::after {
	background: url(../img/slider-arrow-blue.svg) 50% 50% no-repeat;
	background-size: contain;
	opacity: 0;
}
.slick-arrow:hover::before {
	opacity: 0;
}
.slick-arrow:hover::after {
	opacity: 1;
}
.slick-prev {
	left: max(22px, 22rem);
	transform: scale(-1, 1);
}
.slick-next {
	right: max(22px, 22rem);
}

/************************* review-block *************************/
.review-page h1 {
	margin: 0 0 max(36px, 50rem);
}
.review-block {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: max(20px, 20rem);
	margin: 0 0 max(36px, 50rem);
}
.review-block:last-child {margin: 0;}

/************************* article *************************/
.article-top {
	position: relative;
	overflow: hidden;
	height: max(380px, 587rem);
	margin: 0 0 max(100px, 130rem);
	border-radius: max(10px, 10rem);
}
.article-top-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-top::before {
	position: absolute;
	inset: 0;
	content: '';
	background: url(../img/article-mask.png) 0 0 no-repeat;
}
.article-label {
	position: absolute;
	top: max(16px, 40rem);
	left: max(16px, 40rem);
	width: max(44px, 89rem);
}
.article-label img {
	width: 100%;
}
.article-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 max(16px, 40rem) max(32px, 40rem);
	color: var(--white);
}
.article-line {
	display: flex;
	align-items: center;
	gap: max(20px, 44rem);
	margin: 0 0 max(16px, 20rem);
	font-size: var(--min);
	line-height: 100%;
}
.article-time {
	padding: max(6px, 6rem) max(12px, 12rem) max(8px, 8rem);
	color: var(--ocean);
	background: var(--sky);
	border-radius: 50px;
}
.article-block {
	max-width: max(720px, 800rem);
	margin: 0 auto;
}
.article-block h2 {
	margin: 0 0 max(24px, 40rem);
	padding-top: max(34px, 38rem);
}
.article-block h3 {
	margin: 0 0 max(20px, 20rem);
	padding-top: max(2px, 18rem);
}
.article-block h2:first-child,
.article-block h3:first-child {padding-top: 0;}
.article-block .subheading {
	margin: 0 0 max(16px, 20rem);
}
.article-block ul {
	margin: 0 0 max(22px, 22rem);
}
.article-block ul:last-child {margin: 0;}
.article-block ul li {
	position: relative;
	padding: 0 0 0 max(27px, 27rem);
}
.article-block ul li::before {
	position: absolute;
	top: max(11px, 11rem);
	left: max(11px, 11rem);
	content: '';
	width: max(4px, 4rem);
	height: max(4px, 4rem);
	background: var(--dark);
	border-radius: 50%;
}
.article-block a {
	color: var(--dark);
}

/************************* contact *************************/
.contact-block {
	display: flex;
	justify-content: space-between;
}

.contact-block.reverse {
	flex-direction: row-reverse;
}

.contact-side {
	width: calc(50% - 20px);
}
.contact-top {
	display: flex;
	flex-direction: column;
	gap: max(24px, 32rem);
	margin: 0 0 max(44px, 50rem);
}
.contact-top .subheading {
	margin: 0;
}
.contact-info-item {
	margin: 0 0 max(32px, 32rem);
}
.contact-info-item:last-child {margin: 0;}
.contact-info-item .subheading {
    margin: 0 0 max(12px, 12rem);
}
.contact-address {
	display: flex;
	gap: max(32px, 32rem);
}
.contact-link {
	color: var(--dark);
	text-decoration: none;
}
.contact-link::after {
	display: inline-block;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right-dark.svg) min(-12px, -12rem) max(12px, 12rem) no-repeat;
    transition: all 0.3s ease-out;
}
.contact-link:hover::after {
    background-position: 0 0;
}
.contact-form {
	width: calc(50% - 20px);
}
.contact-form .contact-top {
	display: none;
}

/************************* policy *************************/
.policy {
	max-width: max(720px, 800rem);
	margin: 0 auto;
}
.policy h1 {
	margin: 0 0 max(24px, 32rem);
	text-align: center;
}
.policy .subheading {
	margin: 0 0 max(56px, 60rem);
	text-align: center;
}
.policy-block {
	counter-reset: h2, h3;
}
.policy h2 {
	margin: 0 0 max(24px, 40rem);
	padding-top: max(34px, 38rem);
	counter-increment: h2;
}
.policy h2::before {
	content: counter(h2)". ";
}
.policy h3 {
	margin: 0 0 max(20px, 20rem);
	padding-top: max(2px, 18rem);
	counter-increment: h3;
}
.policy h3::before {
	content: counter(h3, lower-latin)". ";
}
.policy h2:first-child,
.policy h3:first-child {padding-top: 0;}
.policy-block .subheading {
	margin: 0 0 max(16px, 20rem);
	text-align: left;
}
.policy ul {
	margin: 0 0 max(22px, 22rem);
}
.policy ul:last-child {margin: 0;}
.policy ul li {
	position: relative;
	padding: 0 0 0 max(27px, 27rem);
}
.policy ul li::before {
	position: absolute;
	top: max(11px, 11rem);
	left: max(11px, 11rem);
	content: '';
	width: max(4px, 4rem);
	height: max(4px, 4rem);
	background: var(--dark);
	border-radius: 50%;
}
.policy a {
	color: var(--dark);
}

/************************* sitemap *************************/
.sitemap {
	max-width: max(560px, 610rem);
	margin: 0 auto;
}
.sitemap h1 {
	margin: 0 0 max(60px, 60rem);
	text-align: center;
}
.sitemap-block {
	display: flex;
	flex-direction: column;
	gap: max(60px, 60rem);
}
.sitemap h2 {
	margin: 0 0 max(24px, 36rem);
}
.sitemap h2 a {
	color: var(--dark);
	text-decoration: none;
}
.sitemap h2 a::after {
	display: inline-block;
	content: '';
	width: max(20px, 24rem);
	height: max(20px, 24rem);
	margin: 0 0 0 max(14px, 14rem);
    background: url(../img/arrow-right-dark.svg) min(-20px, -24rem) max(20px, 24rem) no-repeat;
	background-size: max(20px, 24rem);
    transition: all 0.3s ease-out;
}
.sitemap h2 a:hover::after {
    background-position: 0 0;
}
.sitemap-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(12px, 12rem);
}
.sitemap-link {
	font-weight: 600;
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--dark);
}

/************************* 404 *************************/
.page404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: max(32px, 32rem);
}
.page404-num {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0 0 min(-12px, -12rem);
	padding: 0 max(20px, 30rem) 0 0;
}
.page404-num span {
	font-weight: 400;
	font-size: max(156px, 270rem);
	line-height: 110%;
	letter-spacing: -0.06em;
}
.page404-img {
	position: relative;
	width: max(168px, 290rem);
	margin: 0 min(-28px, -50rem) max(4px, 6rem) min(-13px, -23rem);
}
.page404-img img {
	width: 100%;
}
.page404-mask-wrap {
	position: absolute;
	top: 0;
	left: 18%;
	mix-blend-mode: plus-lighter;
	transform: rotateX(60deg);
}
.page404-mask-inner {
	position: relative;
	width: max(104px, 177rem);
	height: max(104px, 177rem);
	border-radius: 50%;
	animation: rotate 2s infinite linear;
}
.page404-mask {
	position: absolute;
	top: 0;
	left: 0;
	animation: rotate2 2s infinite linear;
}
.page404-img .page404-mask {
	width: max(74px, 127rem);
}
@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes rotate2 {
  from {transform: rotate(0deg);}
  to {transform: rotate(-360deg);}
}

/************************* footer *************************/
.footer {
	position: relative;
	overflow: hidden;
	padding: max(15px, 15rem) 0 max(22px, 22rem);
}
.footer::after {
	position: absolute;
	top: max(294px, 294rem);
	left: 0;
	right: 0;
	content: '';
	height: max(740px, 740rem);
	background: url(../img/footer-bg.png) 50% 0 no-repeat;
	background-size: cover;
}
.footer::before {
	position: absolute;
	top: max(540px, 540rem);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	content: '';
	background: var(--ocean);
}
.footer .holder {
	position: relative;
	z-index: 50;
}
.footer-request {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(32px, 36rem);
	padding: 0 0 max(160px, 222rem);
	text-align: center;
}
.footer-request h2 {
	max-width: max(380px, 460rem);
}
.blue {
	color: var(--blue);
}
.footer-block {
	display: flex;
	gap: max(10px, 10rem);
	padding: 0 0 max(50px, 50rem);
	color: var(--white);
}
.footer-logo {
	margin: 0 auto 0 0;
}
.footer-logo img {
	width: max(160px, 364rem);
}
.footer-col {
	width: max(230px, 246rem);
}
.footer-nav {
	display: flex;
	flex-direction: column;
	gap: max(13px, 13rem);
	margin: 0 0 max(32px, 44rem);
}
.footer-nav:last-child {margin: 0;}
.footer-nav li {
	font-weight: 600;
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
}
.footer-nav a {
	color: var(--white);
	text-decoration: none;
}
.footer-nav a::after {
	display: inline-block;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right.svg) min(-12px, -12rem) max(12px, 12rem) no-repeat;
    transition: all 0.3s ease-out;
}
.footer-nav a:hover::after {
    background-position: 0 0;
}
.footer-webs {
	display: flex;
	align-items: center;
	gap: max(20px, 20rem);
}
.footer-web path {
	fill: var(--white);
	transition: all 0.3s ease-out;
}
.footer-web:hover path {
	fill: var(--dark);
}
.footer-bottom {
	display: flex;
	font-weight: 600;
	font-size: var(--text);
	line-height: 100%;
	letter-spacing: -0.04em;
	color: var(--sky_70);
}
.footer-links {
	display: flex;
	gap: max(10px, 10rem);
	margin: 0 max(10px, 10rem) 0 auto;
}
.footer-link-item {
	width: max(230px, 246rem);
}
.footer-studio {
	width: max(230px, 246rem);
}
.footer-studio img {
	width: max(25px, 25rem);
	margin: 0 max(2px, 2rem);
}
.footer-studio a, .footer-link {
	position: relative;
	color: var(--sky_70);
	text-decoration: none;
}
.footer-studio a::after,
.footer-link::after {
	display: inline-block;
	content: '';
	width: max(12px, 12rem);
	height: max(12px, 12rem);
	margin: 0 0 0 max(8px, 8rem);
    background: url(../img/arrow-right-sky.svg) min(-12px, -12rem) max(12px, 12rem) no-repeat;
    transition: all 0.3s ease-out;
}
.footer-studio a:hover::after,
.footer-link:hover::after {
    background-position: 0 0;
}

/************************* popup *************************/
.video-popup {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 800;
	padding: 16px;
	background: var(--dark);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.4s ease-in-out;
}
.video-popup.vis {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
.video-popup-wrap {
	width: 100%;
	max-width: max(600px, 1300rem);
	max-height: 95%;
	aspect-ratio: 16/9;
}
.video-popup-wrap .video {
	width: 100%;
	height: 100%;
}
.popup-close {
	position: absolute;
	top: max(20px, 20rem);
	right: max(20px, 20rem);
	width: max(44px, 44rem);
	height: max(44px, 44rem);
	border-radius: max(4px, 4rem);
	background: rgba(254, 254, 255, 0.1);
}
.popup-close::before {
	position: absolute;
	inset: 0;
	content: '';
	background: url(../img/close.svg) 50% 50% no-repeat;
	transition: all 0.4s ease-in-out;
}
.popup-close::after {
	position: absolute;
	inset: 0;
	content: '';
	background: url(../img/close-hover.svg) 50% 50% no-repeat;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}
.popup-close:hover::before {opacity: 0;}
.popup-close:hover::after {opacity: 1;}
.thanks-popup {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 800;
	padding: 16px;
	background: rgba(21, 36, 53, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.4s ease-in-out;
}
.thanks-popup.vis {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
.thanks-popup-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: max(480px, 600rem);
	padding: max(50px, 50rem) max(30px, 40rem);
	background: var(--white);
}
.thanks-popup-wrap h3 {
	margin: 0 0 max(20px, 24rem);
}
.thanks-popup-wrap .subheading {
	margin: 0 0 max(24px, 36rem);
	color: var(--ocean_50);
}

/************************* animations *************************/
.fadeUp {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s var(--ease);
}
.fadeUp.ani_start {
	opacity: 1;
	transform: translateY(0);
}

/************************* cookies *************************/
.cookies {
	position: fixed;
	right: max(20px, 20rem);
	bottom: max(20px, 20rem);
	z-index: 800;
	width: max(364px, 364rem);
	padding: max(24px, 24rem);
	color: var(--ocean_50);
	background: var(--white);
	box-shadow: 0 6px 23px 0 rgba(20, 20, 43, 0.08);
	border-radius: max(8px, 8rem);
}
.cookies-text {
	margin: 0 0 max(24px, 24rem);
}
.cookies .button {
	width: 100%;
	color: var(--white);
	background: var(--blue);
	border-color: var(--blue);
}
.cookies .button::after {
    display: none;
}
.cookies .button:hover {
	color: var(--blue);
	background-color: var(--white);
}

/************************* media *************************/
@media screen and (min-width: 1480px) {
	.tracing-block {
		gap: 50px;
	}
}
@media screen and (max-width: 1300px) {
	.header-nav-wrap {
		gap: max(30px, 60rem);
	}
}
@media screen and (max-width: 1200px) {
	.holder {
		padding: 0 16px;
	}
	.header-nav-wrap {
		gap: 16px;
	}
	.nav-bottom .button {
		padding: max(13px, 15rem) max(14px, 20rem) max(17px, 17rem);
		gap: 1px;
		font-size: 16px;
	}
	.footer-links {
		flex-direction: column;
	}
	.footer::after {
		top: max(244px, 244rem);
	}
	.footer-copy {
		max-width: 280px;
	}
	.demo-list-text {
		max-width: 400px;
	}
	.promo, .box, .review, .partner-line,
	.scheme-img {margin: 0 -16px;}
	.how-nav-item {
		padding: 0 15px 0 max(20px, 40rem);
	}

}
@media screen and (max-width: 1024px) {
	.lock .logo-blue {opacity: 0;}
	.lock .logo-white {opacity: 1;}
	.mob-nav-icon {
		display: block;
	}
	.active .mob-nav-block:after,
	.active .mob-nav-block:before,
	.has-banner .header:not(.header-fixed) .mob-nav-block,
	.has-banner .header:not(.header-fixed) .mob-nav-block:after,
	.has-banner .header:not(.header-fixed) .mob-nav-block:before {
		background: var(--white);
	}
	.has-banner .header:not(.header-fixed) .active .mob-nav-block {
		background: none;
	}
	.header-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 540;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: none;
		display: block;
		height: 0;
		background: var(--dark);
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.header-nav.vis {
		height: 100dvh;
	}
	.header-nav-wrap {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100dvh;
		padding-top: 108px;
		padding-bottom: 94px;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
	.header-nav-list {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 0 16px;
		height: 100%;
		margin: 0;
		overflow-y: auto;
	}
	.header-nav-list::before {display: none;}
	.header-nav-list > li {
		border-bottom: 1px solid rgba(254, 254, 255, 0.1);
	}
	.header-nav-list > li > a {
		position: relative;
		display: block;
		padding: 14px 55px 18px 0;
		font-weight: 600;
		font-size: 18px;
		line-height: 100%;
		letter-spacing: -0.04em;
		color: var(--white);
		text-decoration: none;
	}
	.header-nav-list > li > a::before {display: none;}
	.nav-parent::after {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -6px;
		background: url(../img/nav-arrow-white.svg) 50% 50% no-repeat;
		transition: all 0.3s linear;
	}
	.nav-parent.nav-active::after {
		background-image: url(../img/nav-arrow-blue.svg);
		transform: rotate(180deg);
	}
	.nav-parent.nav-active {
		color: var(--blue);
	}
	.active .nav-link {
		color: var(--white);
		background: transparent;
		border-radius: 0;
	}
	.subnav {
		display: none;
		position: static;
		width: auto;
		padding: 2px 0 20px 24px;
		backdrop-filter: none;
		background: none;
		border-radius: 0;
		transition: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.subnav::before {display: none;}
	.subnav-list {
		gap: 16px;
	}
	.subnav-item {
		padding: 0;
		font-size: 18px;
		line-height: 100%;
		color: var(--white);
		border-radius: 0;
	}
	.subnav-item:hover {
		color: var(--blue);
		background-color: none;
	}
	.subnav-item::after {display: none;}
	.nav-bottom {
		position: absolute;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		padding: 20px 16px;
		align-items: center;
		transition: all 0.4s 0.3s;
		background: var(--dark);
		border-top: 1px solid rgba(254, 254, 255, 0.1);
	}
	.header-nav.vis .nav-bottom {
		opacity: 1;
		transform: translateY(0px);
		visibility: visible;
	}
	.nav-bottom .button {
		width: 100%;
		padding: 15px 20px 19px;
		font-size: 18px;
	}
	.nav-bottom .button::after {display: none;}
	.footer {padding: 0 0 20px;}
	.footer::after {
        top: 200px;
    }
	.footer-block {
		flex-direction: column;
		gap: 32px;
		padding: 0 0 40px;
	}
	.footer-nav {
		gap: 16px;
	}
	.footer-bottom {
		flex-direction: column;
		gap: 16px;
	}
	.footer-copy {
		max-width: none;
		order: 5;
	}
	.footer-links {
		margin: 0;
		gap: 16px;
	}
	.footer-link-item {
		max-width: none;
	}
	.page404 {
		padding: 51px 0 0;
	}
	.page404-num {margin: 0 0 -22px;}
	.policy-block h2 br {display: none;}
	.policy .subheading {
		text-align: left;
	}
	.contact-block {
		flex-direction: column-reverse;
		gap: 56px;
	}
	.contact-side, .contact-form {
		width: 100%;
	}
	.contact-form .contact-top {
		display: flex;
		margin: 0 0 56px;
	}
	.contact-side .contact-top {
		display: none;
	}
	.contact-top h1 {text-align: center;}
	.blog-block {
		grid-template-columns: repeat(2, 1fr);
	}
	.review-item {
		padding: 68px 20px;
	}
	.results-block {
		grid-template-columns: repeat(3, 1fr);
	}
	.hero-mob-min {
		height: 342px;
	}
	.hero::before {
		background: url(../img/bg-mob.png) 0 0 no-repeat;
		background-size: cover;
	}
	.hero::after {
		background: url(../img/hero-bg-1-mob.png) 0 0 no-repeat;
		background-size: 375px;
	}
	.pillars-block {
		grid-template-columns: repeat(2, 1fr);
	}
	.why-block {
		flex-direction: column;
		gap: 36px;
	}
	.why-col {
		width: 100%;
	}
	.why-img {
		height: max(274px, 800rem);
		margin: 0 -16px;
	}
	.faq-top::before,
	.faq-top::after {
		top: 0;
		margin-top: 0;
	}
	.faq-top.active::before {
		height: 0;
		margin-top: 14px;
	}
	.problem-block {
		grid-template-columns: repeat(2, 1fr);
	}
	.cap {
		grid-template-columns: repeat(3, 1fr);
	}
	.approach {
		flex-direction: column;
		gap: 36px;
		padding: 32px 20px;
		margin: 0 -16px;
	}
	.approach-side {
		width: auto;
		min-width: 1px;
	}
	.info {
		flex-direction: column;
		gap: 36px;
	}
	.info-col {
		width: 100%;
	}
	.info-img {
		height: max(270px, 800rem);
		margin: 0 -16px;
	}
	.info-center .info-content {
		text-align: left;
	}
	.promo {
		flex-direction: column-reverse;
		gap: 56px;
	}
	.promo-content {
		width: 100%;
	}
	.promo-slider {
		width: 100%;
	}
	.promo-slide img {
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
		max-height: 600px;
	}
	.box {
		align-items: flex-start;
	}
	.box-content {
		padding: 100px 16px 0;
	}
	.box-content::after {
		bottom: min(-94px, -94rem);
		height: max(58px, 58rem);
		background: url(../img/down-2.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.demo-title {
		position: relative;
		left: auto;
		bottom: auto;
		align-items: center;
		text-align: center;
		margin: 0 0 36px;
	}
	.demo-title-text {
		font-size: 20px;
		line-height: 120%;
	}
	.demo-tabs {
		position: relative;
		top: auto;
		right: auto;
		max-width: none;
		width: auto;
		margin: 0 0 14px;
	}
	.demo-item-wrap {
		flex-direction: column;
		justify-content: stretch;
		align-items: center;
	}
	.demo-img {
		max-width: 640px;
		width: 100%;
		margin: -30px 0;
	}
	.demo-side {
		position: relative;
		top: auto;
		left: auto;
		background: var(--white);
	}
	.demo-item.slick-slide:not(.slick-active) {
		transition-delay: 500ms !important;
	}
	.hm-content {
		padding: 0 0 0 max(260px, 320rem);
	}
	.scheme-desc {display: none;}
	.scheme-mob {display: block;}

	.tracing-block {
		flex-direction: column;
		gap: 36px;
		padding: 0;
		max-width: 440px;
	}
	.tracing-item {
		flex-direction: row;
		align-items: center;
		text-align: left;
		width: auto;
	}
	.tracing-item::after {
		top: auto;
		bottom: -30px;
		right: auto;
		left: 34px;
		width: 8px;
		height: 28px;
		background: url(../img/scheme/arrow-4.svg) 50% 50% no-repeat;
	}
	.tracing-item:last-child::after {
		top: auto;
		left: auto;
		bottom: 34px;
		right: 0;
		width: 146px;
		height: 456px;
		margin-top: 0;
		background: url(../img/scheme/arrow-5.svg) 0% 0% no-repeat;
	}
	.tracing-item:last-child::before {
		display: none;
	}
	.how-nav {
		gap: 0;
		margin: 36px 0 0;
		padding: 3px 19px;
		background: #fff;
		box-shadow: 0 8px 60px 0 rgba(21, 36, 53, 0.04);
		border: 1px solid var(--sky);
		border-radius: 10px;
	}
	.how-nav-line {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		background: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
	}
	.how-nav-item {
		padding: 16px 0;
		gap: max(16px, 16rem);
		font-size: 18px;
		line-height: 120%;
		border-bottom: 1px solid var(--sky);
	}
	.how-nav-item:last-child {
		border-bottom: 0;
	}
	.how-nav-item::after {
		display: none;
	}
	.how-nav-line:first-child {
		border-bottom: 1px solid var(--sky);
	}
	.how-block, .cloud-block {
		margin: 0;
	}
	.timeline-block {
		flex-direction: column;
	}
	.timeline-week {
		width: 100%;
		margin: 0 0 20px;
		flex-direction: column;
		background: var(--grey);
	}
	.timeline-item {
		width: 100%;
		border-left: 0;
	}
	.timeline-week .timeline-item:nth-child(2),
	.timeline-week .timeline-item:nth-child(3),
	.timeline-item:nth-child(2),
	.timeline-item:nth-child(3){
		margin-top: 0;
	}
	.timeline-week .timeline-item {
		width: 100%;
	}
	.timeline-content {
		padding: 0 24px;
	}
	.timeline-text {
		display: none;
		max-width: none;
		padding: 0 0 32px;
	}
	.timeline-item:last-child .timeline-text {
		padding: 0;
	}
	.timeline-time {display: none;}
	.timeline-top {position: relative;}
	.timeline-top .timeline-time {
		position: absolute;
		top: 12px;
		right: 24px;
		display: block;
		font-size: 18px;
		line-height: 120%;
		letter-spacing: -0.02em;
	}
	.timeline-week .timeline-item:first-child .timeline-top .timeline-time {
		color: var(--sky_70);
	}
	.timeline-week .timeline-item:nth-child(2) .timeline-top, .timeline-week .timeline-item:nth-child(3) .timeline-top, .timeline-item:nth-child(2) .timeline-top {
		width: 100%;
	}
	.timeline-week-text {
		position: static;
	}
	.cookies {
		right: 16px;
		bottom: 16px;
	}


	
}
@media screen and (max-width: 767px) {
	h1 {
		line-height: 90%;
	}
	.contact-info-item {
		display: flex;
		justify-content: space-between;
	}
	.contact-info-item .subheading {
		width: calc(50% - 8px);
		margin: 0;
	}
	.contact-link, .contact-address {
		width: calc(50% - 8px);
	}
	.contact-address {
		flex-direction: column;
	}
	.contact-link {
		margin: 3px 0 0;
	}
	.input-box .wpcf7-form-control-wrap {
		width: 100%;
	}
	.review h2 {
		max-width: 280px;
		margin: 0 auto max(36px, 50rem);
	}
	.review-slide {
		padding: 0 8px;
	}
	.review-slide .review-item {
		padding: 98px 20px;
	}
	.article-top {
		height: max(280px, 587rem);
		margin: 0 -16px max(100px, 130rem);
		border-radius: 0;
	}
	.article-top::before {
		background: url(../img/article-mask-mob.png) 50% 50% no-repeat;
		background-size: cover;
	}
	.article-label {
		top: 10px;
		right: 10px;
		left: auto;
	}
	.review-block {
		grid-template-columns: repeat(1, 1fr);
	}
	.review-page h1 {
		text-align: center;
	}
	.case-top {
		height: max(280px, 613rem);
		margin: 0 -16px;
		border-radius: 0;
	}
	.case-top-wrap {
		padding-bottom: 36px;
	}
	.case-main .article-block {
		margin: 0 0 100px;
	}
	.article-block h2 {
		text-align: center;
	}
	.author {
		flex-direction: column;
		margin: 0 -16px 100px;
		text-align: center;
		border-radius: max(10px, 10rem);
	}
	.results-block {
		grid-template-columns: repeat(2, 1fr);
	}
	.pillars-block {
		grid-template-columns: repeat(1, 1fr);
	}
	.problem-block {
		grid-template-columns: repeat(1, 1fr);
	}
	.cap {
		grid-template-columns: repeat(2, 1fr);
	}
	.approach-content {
		grid-template-columns: repeat(1, 1fr);
	}
	.top .subheading {
		text-align: left;
	}
	.info-content h2 {
		text-align: center;
	}
	.demo-tabs-block {width: 100%;}
	.demo-tabs-link {
		padding: max(13px, 13rem) 20px max(17px, 17rem);
	}
	.demo-tabs-link span {
		display: none;
		white-space: nowrap;
	}
	.demo-tabs-link.active {
		flex: 1;
	}
	.demo-tabs-link.active span {display: block;}
	.demo-tabs-link svg {display: block;}
	.demo-img {
        width: calc(100% + 32px);
		margin: -10px -16px;
    }
	.hm-content {
		padding: 0;
	}
	.hm-text {
		position: static;
		max-width: 320px;
		margin: 0 0 32px;
	}
	.hm-text-item {
		position: static;
		width: auto;
		opacity: 1;
		display: none;
		min-height: 72px;
	}
	.hm-text-item.vis {
		display: block;
	}
	.hm-text-item:first-child {
		max-width: none;
	}
	.hm-controls {
		display: block;
		top: 110px;
		left: max(16px, 40rem);
		bottom: auto;
		gap: max(8px, 8rem);
		color: var(--white);
	}
	.hm-controls-item {display: block;}
	.hm-controls-item:last-child {margin-top: -2px;}
	.hm-controls-num {display: none;}
	.hm-controls-all {
		position: absolute;
		top: 10px;
		left: 0;
		display: block;
		font-size: var(--text);
		line-height: 100%;
		letter-spacing: -0.04em;
	}
	.hm-controls-line {
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
	}
	.hm-arrow.slick-arrow {
		position: absolute;
		top: 10px;
		bottom: auto;
		height: 18px;
		background: url(../img/right.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.hm-arrow.hm-prev {
		left: auto;
		right: 34px;
		width: 22px;
		transform: scale(-1, 1);
	}
	.hm-arrow.hm-next {
		right: 0;
		width: 22px;
	}
	.demo-tabs-bg {
		width: calc(100% - 128px);
	}
	.pos-1 {left: 0;}
	.pos-2 {left: 64px;}
	.pos-3 {left: 128px;}



}
@media screen and (max-width: 576px) {
	.blog-block {
		grid-template-columns: repeat(1, 1fr);
	}
	.results-block {
		grid-template-columns: repeat(1, 1fr);
	}
	.pillars-top {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.pillars-top::after {
		position: absolute;
		top: 0;
		right: 0;
		height: max(66px, 66rem);
		display: flex;
		align-items: center;
	}
	.pillars-main .pillars-text {
		max-width: 190px;
	}
	.pillars-item .button {
		width: 100%;
	}
	.cap {
		grid-template-columns: repeat(1, 1fr);
	}
	.cap-title {
		margin: 0 0 16px;
		text-align: center;
	}
	.calc-form .wpcf7-form-control-wrap label {
		margin: 0 0 10px;
	}
	.box-wrap {
		left: -50px;
		right: -50px;
		top: 100px;
		bottom: 100px;
	}
	.promo-text {
		max-width: 330px;
	}
	.cookies {
		left: 16px;
		width: auto;
	}

}