/* обнулення */
@import url("reset.css");
/* шрифти */
@import url("https://fonts.googleapis.com/css?family=Roboto:regular,500,700,900&display=swap");

:root {
	scroll-behavior: smooth;
}

body {
	font-family: "Roboto", serif;
	color: #505F98;
}

.wrapper {
	min-block-size: 100%;

	display: flex;
	flex-direction: column;
	overflow: clip;
}

.wrapper>main {
	flex-grow: 1;
}

[class*="__container"] {
	max-width: 1140px;
	padding-inline: 15px;
	margin-inline: auto;
}

.text {
	color: #505F98;
	font-size: 18px;
	line-height: 1.67;
}

.text--small {
	font-size: 16px;
	line-height: 1.63;
}

@media (max-width: 767.98px) {
	.text {
		font-size: 16px;
		line-height: 1.63;
		/* 26/16 */
	}

	.text--small {
		font-size: 14px;
		line-height: 1.86;
		/* 26/14 */
	}
}

.title {
	color: #091133;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.33;
}

.title--big {
	font-size: 50px;
	line-height: 1.32;
	letter-spacing: 1px;
}

@media (max-width: 479.98px) {
	.title {
		font-size: 30px;
		line-height: 1.6;
	}

	.title--big {
		font-size: 44px;
		line-height: 1.2;
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(9, 17, 51, 0.501);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(9, 17, 51, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(9, 17, 51, 0);
	}
}

.button {
	color: #FFF;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;

	padding: 9px;
	min-width: 160px;

	border-radius: 2px;
	background-color: #111B47;

	will-change: transform;
	transition: background-color 0.6s ease-out, color 0.6s ease-out, transform 0.6s ease-out;
}

.button--transparent {
	color: #091133;
	background-color: transparent;
	border: 2px solid #091133;
}

.logo {
	color: #37447E;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.46;

	will-change: transform;
	transition: transform 0.6s ease-out;
}

@media (any-hover: hover) {
	.button:hover {
		transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
		background-color: #FFD166;
		color: #091133;
		transform: scale(1.03);
		animation: none;
	}

	.button--transparent:hover {
		background-color: transparent;
	}

	.logo:hover {
		transform: scale(1.1);
		transition: transform 0.3s ease;
	}
}

.button:active {
	background-color: #FFD166;
	transform: scale(0.92);
	transition: background-color 0.06s ease, transform 0.06s ease;
}

.button--transparent:active {
	background-color: transparent;
}

.logo:active {
	transform: scale(0.95);
	transition: transform 0.06s ease;
}


/** - header - - - - - - - - - -  */

.header {
	position: fixed;
	width: 100%;
	z-index: 100;
	border-bottom: 1px solid #091133;
	background-color: rgba(255, 255, 255, 0.958);
}

.header__container {
	display: grid;
	grid-template-columns: 1fr 120px 1fr;
	align-items: center;
	padding-block: 12px;
	min-height: 60px;
	column-gap: 22px
}

.menu__list {
	display: flex;
	justify-content: space-between;
}

@media (min-width: 767.98px) {
	.menu__list {
		max-width: 246px;
		column-gap: 16px;
	}
}

@media (min-width: 620.98px) and (max-width: 767.98px) {
	.menu__list {
		max-width: 200px;
	}
}

.menu__link {
	font-size: 14px;
	line-height: 1.71;
	will-change: transform;
	transition: color 0.6s ease-out, transform 0.6s ease-out;
}

@media (any-hover: hover) {
	.menu__link:hover {
		color: #091133;
		transform: translateY(-1px);
		transition: color 0.3s ease, transform 0.3s ease;
	}
}

.menu__link:active {
	transform: scale(0.92);
	transition: transform 0.06s ease;
}

.header__logo {
	position: relative;
	z-index: 5;
	justify-self: center;
}


.header__actions {
	display: flex;
	justify-content: flex-end;
	column-gap: 8px;
}

.actions__button {
	position: relative;
	z-index: 5;
	padding-block: 8px;
	animation: pulse 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.menu-icom {
	display: none;
}


@media (max-width: 620.98px) {
	.header__container {
		display: flex;
		justify-content: space-between;
		column-gap: 10px;
	}

	.header__logo {
		order: 1;
	}

	.header__menu {
		order: 2;
	}

	.header__actions {
		order: 3;
	}

	.menu__body {
		position: fixed;
		z-index: 2;

		inset-block-start: 0;
		inset-inline-start: 100%;

		block-size: 100%;
		inline-size: 100%;

		padding: 110px 18px 40px;

		background-color: rgba(231, 236, 255, 0.98);
		overflow: auto;

		transition: inset-inline-start 0.3s ease-in-out;
	}

	.menu__body::before {
		content: "";
		position: fixed;
		z-index: 3;

		inset-block-start: 0;
		inset-inline-start: 100%;

		block-size: 61.95px;
		inline-size: 100%;

		background-color: #FFF;
		border-bottom: 1px solid #091133;
		transition: inset-inline-start 0.3s ease-in-out;
	}

	.menu__list {
		flex-direction: column;
		align-items: flex-end;
		text-align: end;
		row-gap: 26px;
	}

	.menu__link {
		font-size: 42px;
		line-height: 1.33;
		color: #091133;
	}

	.menu-icom {
		display: flex;
		z-index: 5;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;

		color: #091133;
		border-radius: 2px;
		border: 2px solid #091133;

		width: 34px;
		height: 34px;
		transition: background-color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.menu-icom__button {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-basis: 18px;
		height: 14.8px;
	}

	.menu-icom__button span,
	.menu-icom__button::before,
	.menu-icom__button::after {
		content: "";
		height: 2px;
		width: 100%;
		background-color: #091133;
		border-radius: 6px;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.open-menu .menu__body,
	.open-menu .menu__body::before {
		inset-inline-start: 0;
	}

	.open-menu .menu-icom {
		background-color: #FFD166;

	}

	.open-menu .menu-icom__button::before {
		transform: translateY(6.7px) rotate(45deg);
	}

	.open-menu .menu-icom__button span {
		transform: translateX(-8px);
		opacity: 0;
	}

	.open-menu .menu-icom__button::after {
		transform: translateY(-5.7px) rotate(-45deg);
	}
}

@media (max-width: 374.98px) {
	.actions__button {
		min-width: 100px;
	}
}

/*! - hero - - - - - - - - - -  */

.hero {
	padding-block-start: 120px;
}

.hero__container {
	display: flex;
	column-gap: 24px;
}

@media (min-width: 767.98px) {
	.hero__text-block {
		padding-block-start: 60px;
		flex: 0 1 540px;
	}

	.hero__image-block {
		flex: 0 1 975px;
		margin-inline-end: -480px;
	}
}

.hero__text-block>* {
	margin-block-end: 20px;
}

.hero__text>* {
	margin-block-end: 30px;
}

.hero__text {
	margin-block-end: 70px;
}

.hero__text> :last-child {
	margin-block-end: 0;
}

.hero__actions {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.hero__button {
	min-width: 190px;
	font-size: 16px;
	line-height: 1.6;
	padding: 4px 9px;
}

.hero__text-block> :last-child {
	margin-block-end: 0;
}


.hero__image-block {
	aspect-ratio: 975 / 780;
	position: relative;

}

.hero__image-block::before {
	content: "";
	position: absolute;
	bottom: -11.153846%;
	/* -87/780 */
	left: -32.205128%;
	/* -314/975 */
	width: 152.820513%;
	/* 1490/975 */
	height: 148.846154%;
	/* 1161/780 */
	z-index: -1;

	background: url(../img/1_hero_img_bg.png) 0 0 / 100% no-repeat;
}

.hero__image-block>img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 990.98px) {
	.hero__container {
		column-gap: 16px;
	}

	.hero__text>* {
		margin-block-end: 16px;
	}

	.hero__text {
		margin-block-end: 40px;
	}
}

@media (max-width: 767.98px) {
	.hero {
		padding-block-start: 100px;
	}

	.hero__container {
		flex-direction: column;
		gap: 40px;
	}

	.hero__text {
		margin-block-end: 24px;
	}

}

@media (max-width: 479.98px) {
	.hero__text {
		margin-block-end: 16px;
	}

	.hero__actions {
		flex-direction: column;
		row-gap: 16px;

	}

	.hero__button {
		min-width: 190px;
		font-size: 16px;
		line-height: 1.6;
		padding: 4px 9px;
	}
}


/*! - about-us - - - - - - - - - -  */

.about-us {
	padding-block: 158px 195px;
}

.about-us__container {
	display: flex;
	align-items: center;
	column-gap: 30px;
}

@media (min-width: 767.98px) {
	.about-us__description {
		flex: 0 1 540px;
	}
}

.description>* {
	margin-block-end: 16px;
}

.description__text>* {
	margin-block-end: 25px;
}

.description__text> :last-child {
	margin-block-end: 0;
}

.description__text {
	margin-block-end: 80px;
}

.elements {
	display: flex;
	column-gap: 28px;
	row-gap: 16px;
}

.elements__item>* {
	margin-block-end: 6px;
}

.elements__img {
	width: 36px;
	aspect-ratio: 1 / 1;
	margin-block-end: 14px;
}

.elements__img img {
	width: 100%;
	height: 100%;
}

.elements__title {
	color: #091133;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.63;
}

.elements__text {
	color: #5D6970;
	font-size: 12px;
	line-height: 1.5;
}

.description> :last-child {
	margin-block-end: 0;
}
.about-us__img {
	aspect-ratio: 540 / 524;
}

@media (min-width: 767.98px) {
	.about-us__img {
		flex: 0 1 540px;
	}
}
@media (max-width: 767.98px) {
	.about-us__img {
		max-width: 540px;
	}
}


.about-us__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 990.98px) {
	.about-us__container {
		column-gap: 14px;
	}

	.description__text>* {
		margin-block-end: 16px;
	}

	.description__text {
		margin-block-end: 40px;
	}
}

@media (max-width: 767.98px) {
	.about-us {
		padding-block: 80px;
	}

	.about-us__container {
		flex-direction: column;
		row-gap: 24px;
	}

	.description__text {
		margin-block-end: 24px;
	}
}

@media (max-width: 479.98px) {
	.about-us {
		padding-block: 60px;
	}
}

@media (max-width: 350.98px) {

	.about-us__container {
		row-gap: 16px;
	}

	.description__text {
		margin-block-end: 16px;
	}

	.elements {
		flex-direction: column;
		row-gap: 16px;
	}
}

/*! - services - - - - - - - - - -  */
.services {
	padding-block-end: 160px;
}

.services__container>* {
	margin-block-end: 125px;
}

.services__block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(354px, 1fr));
	align-items: center;
	gap: 30px;
}

@media (min-width: 767.98px) {
	.block-services__description {
		max-width: 445px;
		justify-self: end;
	}
}

.block-services__description {
	order: 2;
}

.block-services__description>.description__text {
	margin-block-end: 40px;
}

.block-services__description>.description__text:last-child {
	margin-block-end: 0;
}

.block-services__img {
	justify-self: center;
	order: 1;
}

.block-services__img--1 {
	max-width: 480px;
	aspect-ratio: 480 / 316;
}

.block-services__img--2 {
	max-width: 540px;
	aspect-ratio: 540 / 387;
}

.block-services__img--3 {
	max-width: 445px;
	aspect-ratio: 445 / 312;
}

.block-services__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.description__button {
	min-width: 150px;
}

.services__container> :last-child {
	margin-block-end: 0;
}

@media (max-width: 990.98px) {
	.services__block {
		gap: 14px;
	}
}

@media (max-width: 767.98px) {
	.services {
		padding-block-end: 80px;
	}

	.services__container>* {
		margin-block-end: 80px;
	}

	.services__block {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.block-services__description>.description__text {
		margin-block-end: 24px;
	}

	.block-services__description {
		order: 1;
	}

	.block-services__img {
		order: 2;
	}
}

@media (max-width: 479.98px) {
	.services {
		padding-block-end: 60px;
	}

	.services__container>* {
		margin-block-end: 60px;
	}

	.description__button {
		width: 100%;
	}
}

/*! - price - - - - - - - - - -  */

.price {
	position: relative;
	padding-block: 210px 170px;
	background-color: rgba(231, 236, 255, 0.5);
}

.price::before {
	content: "";
	position: absolute;

	top: -35px;
	left: 50%;
	transform: translateX(-50%);

	width: 100%;
	height: 70px;

	border-radius: 70%;
	background-color: #fff;
}

.price__container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.price__block {
	max-width: 600px;
}

.price__block>* {
	margin-block-end: 16px;
}

.price__text {
	margin-block-end: 36px;
}

.price__value {
	color: #222F65;
	font-weight: 500;
	font-size: 50px;
	line-height: 1.32;
	letter-spacing: 1px;
	margin-block-end: 0;
}

.price__bundle {
	color: #37447E;
	line-height: 1.63;
	margin-block-end: 60px;
}

.price__quote {
	color: #5D6970;
	font-size: 14px;
	line-height: 1.71;
	margin-block-end: 10px;
}

.price__button {
	min-width: 190px;
	animation: pulse 4s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.price__block> :last-child {
	margin-block-end: 0;
}

@media (max-width: 767.98px) {
	.price {
		padding-block: 80px;
	}

	.price::before {
		top: -20px;
		height: 40px;
	}

	.price__text {
		margin-block-end: 24px;
	}

	.price__bundle {
		margin-block-end: 24px;
	}
}

@media (max-width: 479.98px) {
	.price {
		padding-block: 60px;
	}

	.price::before {
		top: -12px;
		height: 24px;
	}

	.price__button {
		width: 100%;
	}
}


/*! - footer - - - - - - - - - -  */

.footer {
	padding-block: 60px 30px;
	background-color: #E7ECFF;
}

.footer__body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 26px;

	padding-block-end: 40px;
	border-bottom: 1px solid #CDD1D4;
	margin-block-end: 20px;
}

.footer__copy {
	color: #939EA4;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.71;
}

.footer__button {
	justify-self: end
}

.footer__button>a {
	padding-block: 4px;
	min-width: 110px;
}

.footer__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 14px;
}

.menu-footer {
	display: inline-flex;
	flex-basis: 245px;
	justify-content: space-between;
	column-gap: 14px;
}

.menu-footer__link {
	color: #929ECC;
	font-size: 14px;
	line-height: 1.71;
	will-change: transform;
	transition: color 0.6s ease-out, transform 0.6s ease-out;
}


.footer__social {
	display: inline-flex;
	column-gap: 18px;
}

.footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;

	border-radius: 2px;
	will-change: transform;
	transition: background-color 0.6s ease-out, transform 0.6s ease-out;
}
.footer__social-link img {
	max-width: 16px;
	aspect-ratio: 1 / 1;
}

@media (any-hover: hover) {
	.menu-footer__link:hover {
		color: #091133;
		transform: translateY(-1px);
		transition: color 0.3s ease, transform 0.3s ease;
	}

	.footer__social-link:hover {
		background-color: #111B47;
		transform: scale(1.1);
		transition: background-color 0.3s ease, transform 0.3s ease;
	}
}

.menu-footer__link:active {
	transform: scale(0.92);
	transition: transform 0.06s ease;
}

.footer__social-link:active {
	transform: scale(0.92);
	transition: transform 0.06s ease;
}

@media (max-width: 767.98px) {
	.menu-footer {
		flex-basis: 180px;
	}

	.footer__social {
		column-gap: 14px;
	}
}

@media (max-width: 479.98px) {
	.footer {
		padding-block: 40px 30px;
	}

	.footer__body {
		grid-template-columns: 1fr;
		row-gap: 20px;
		padding-block-end: 30px;
	}

	.footer__logo {
		text-align: center;
		order: 1;
	}

	.footer__copy {
		text-align: center;
		order: 3;
	}

	.footer__button {
		justify-self: center;
		order: 2;
	}

	.footer__button>a {
		min-width: 160px;
	}

	.footer__actions {
		flex-direction: column;
		row-gap: 20px;
	}

	.menu-footer {
		flex-basis: 0;
		column-gap: 44px;
	}

}