/*!
Theme Name: ИЭЦ
Author: ABMarketing
Author URI: https://abmarketing.pro
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: abm_iec
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
	--color-background-primary: #fff;
	--color-background-secondary: #f0f3fb;
	--color-background-intense: #8c94a3;
	--color-text-primary: #131d2f;
	--color-text-secondary: #8c94a3;
	--color-text-intense: #fff;
	--color-text-error: #d91946;
	--color-brand-primary: #ec621b;
	--color-brand-secondary: #993909;
	--color-brand-intense: #3a3f48;
	--color-additional-accent: #1c3354;
	--color-additional-accent-1: #5577aa;
	--container-width: 1720px;
	--gap: 28px;
	--fs-nav: 20px;
	--fs-button: 20px;
	--fs-hero-main: 170px;
	--lh-hero-main: 160px;
	--h-banner: 396px;
	--mt-banner: 74px;
	--mb-banner: 64px;
	--pt-page: 76px;
	--pb-page: 96px;
	--p-button: 12px 16px;
	--p-header: 28px 0;
	--gap-header: 60px;
	--fs-hero-span: 53px;
	--h-hero-span: 68px;
	--w-logo: 367px;
	--fs-services-title: 40px;
	--lh-services-title: 50px;
	--calculated-padding: calc(0.5 * (100vw - var(--container-width)));
}

@font-face {
	font-family: "Onest";
	src: url("./fonts/Onest-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("./fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html {
	margin: 0;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Onest";
	font-weight: 400;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: unset;
	color: inherit;
}

/* Structure */
.container {
	max-width: var(--container-width);
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.page {
	padding-top: var(--pt-page);
	padding-bottom: var(--pb-page);
}

.button {
	padding: var(--p-button);
	border-radius: 8px;
	cursor: pointer;
	background: var(--color-additional-accent-1);
	color: var(--color-text-intense);
	transition: 0.3s;
	font-size: var(--fs-button);
}

.button:is(:hover, :focus) {
	background: var(--color-additional-accent);
}

/* Header */

.header {
	position: sticky;
	top: 0;
	border-bottom: solid 1px var(--color-background-intense);
	background: var(--color-background-primary);
	padding: var(--p-header);
	z-index: 1;
	min-height: 94px;
}

.header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__logo {
	display: flex;
	width: var(--w-logo);
	align-items: center;
}

.header__logo img {
	width: 100%;
}

.header__contacts {
	display: flex;
	align-items: center;
	display: flex;
	gap: var(--gap);
	font-size: var(--fs-nav);
}

.header__main {
	display: flex;
	align-items: center;
	gap: var(--gap-header);
}

.header__nav {
	display: flex;
	gap: var(--gap);
	font-size: var(--fs-nav);
}

/* Hero */

.hero__wrapper{
	position:relative;
	overflow: hidden;
	margin-bottom: 60px;
	border-radius: 8px;
}

.hero__bg{
	position: absolute;
    height: 100%;
    width: auto;
    min-width: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.hero__title {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--gap);
}

.hero__row {
	display: flex;
	position: relative;
	z-index: 1;
	padding: 48px 32px 24px;
}

.hero__line {
	display: flex;
}

.hero__bottom {
	gap: 32px;
	align-items: center;
}

.hero__column {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 auto;
}

.hero__main {
	color: #ec621b;
	font-size: var(--fs-hero-main);
	font-weight: 300;
	text-align: right;
	text-transform: uppercase;
	line-height: var(--lh-hero-main);
}

.hero__span {
	color: var(--color-brand-intense);
	font-size: var(--fs-hero-span);
	font-weight: 400;
	height: var(--h-hero-span);
	display: flex;
	align-items: center;
}

.hero__span-top {
	margin-top: 4px;
}

.hero__button {
	height: max-content;
	flex-grow: 1;
	text-align: center;
}

/* Banner */

.banner {
	width: 100%;
	height: var(--h-banner);
	margin: var(--mt-banner) 0 var(--mb-banner);
}

.banner img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Services */

.services__title {
	font-size: var(--fs-services-title);
	line-height: var(--lh-services-title);
	font-weight: 600;
	margin-bottom: 52px;
	color: var(--color-brand-intense);
	text-transform: uppercase;
}

.services__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.service {
	height: 100%;
	padding: 8px 8px 24px;
	background-color: var(--color-background-secondary);
	border-radius: 8px;
}

.service__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 246px;
	border-radius: 8px;
	overflow: hidden;
}

.service__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service__title {
	margin: 24px 0 20px;
	font-size: 24px;
	font-weight: 500;
	padding: 0 4px;
}

.service__extra {
	list-style: none;
	padding-left: 0;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.service__extra li {
	display: flex;
	position: relative;
	align-items: center;
	gap: 8px;
}

.service__extra li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.1179 12.158C15.9891 12.158 15.8846 12.0535 15.8846 11.9246V3.03782C15.8846 2.81313 15.5982 2.71827 15.4641 2.89853L6.52645 14.9105C6.24012 15.2953 6.51478 15.842 6.99445 15.842H11.8821C12.0109 15.842 12.1154 15.9465 12.1154 16.0754V24.9622C12.1154 25.1869 12.4018 25.2818 12.5359 25.1015L21.4735 13.0895C21.7599 12.7047 21.4852 12.158 21.0055 12.158H16.1179Z' fill='%23EC621B'/%3E%3Cpath d='M14.89 2.23096C15.5644 1.57919 16.7595 2.03729 16.7597 3.0376V11.2829H21.0059C22.2047 11.2832 22.8913 12.6497 22.176 13.6117L13.238 25.6235C12.601 26.4796 11.2412 26.0296 11.2408 24.9627V16.7174H6.99454C5.7955 16.7174 5.10901 15.3507 5.82445 14.3887L14.7624 2.37565L14.89 2.23096ZM12.9908 23.0236L20.4249 13.0329H16.1182C15.5061 13.0329 15.0097 12.5364 15.0097 11.9243V4.97444L7.57445 14.9674H11.8822C12.4941 14.9675 12.9905 15.4631 12.9908 16.0749V23.0236Z' fill='%23EC621B'/%3E%3C/svg%3E");
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	min-height: 28px;
	min-width: 28px;
	width: 28px;
	background-size: cover;
	content: "";
}

/* Footer */

.footer {
	border-top: 1px solid var(--color-background-intense);
	padding: 28px 0 16px;
	display: flex;
	flex-direction: column;
}

.footer__nav {
	display: flex;
	gap: var(--gap);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 58px;
}

.footer__main {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: solid 1px var(--color-brand-intense);
}

.footer__totop {
	width: 48px;
	min-width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-additional-accent-1);
	border-radius: 100px;
}

.footer__contacts {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	width: 100%;
}

.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer__type {
	color: var(--color-text-secondary);
	line-height: 1;
	text-transform: uppercase;
	font-size: 14px;
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	color: var(--color-text-secondary);
}

.popup {
	z-index: 99999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	display: flex;
	justify-content: end;
	background: #5577aab2;
	transition: 0.3s;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

.popup#menu {
	top: 94px;
	height: calc(100vh - 94px);
}

.popup.active {
	opacity: 1;
	visibility: visible;
}

.popup-content {
	height: 100vh;
	width: calc(524px + var(--calculated-padding));
	max-width: 100vw;
	max-width: 100vw;
	align-self: flex-end;
	background: #fff;
	transition: 0.3s;
	transform: translateX(100vw);
	padding: 28px var(--calculated-padding) 28px 24px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}

.popup-content:after {
	content: ' ';
	position: absolute;
	display: flex;
	background: #fff;
	top: 0;
	left: 100%;
	width: 100vw;
	transform: translateX(100vw);
	transition: 0.3s;
	height: 100%;
}

.popup#menu .popup-content {
	height: 100%;
	width: 100%;
}

.popup-nav {
	display: flex;
	gap: 16px;
	font-size: 17px;
	flex-direction: column;
	margin-bottom: 32px;
}

.popup .header__button {
	width: 100%;
}

.popup-contacts {
	display: flex;
	gap: 16px;
	font-size: 17px;
	flex-direction: column;
}

.popup.active .popup-content {
	transform: translateX(0);
}

.popup.active .popup-content:after {
	transform: translateX(0);
}

.popup-top {
	display: flex;
	align-items: top;
	margin-bottom: 32px;
}

.popup-close {
	cursor: pointer;
}

.popup-title {
	font-weight: 600;
	font-size: 32px;
	text-transform: uppercase;
}

.popup-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-group {
	position: relative;
}

.form-input,
.form-textarea {
	width: 100%;
	padding: 16px;
	border: 1px solid var(--color-background-intense);
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s;
	font-family: 'Onest';
	font-size: 16px;
	;
}

.form-input:focus,
.form-textarea:focus {
	border-color: var(--color-brand-primary);
	outline: none;
}

.form-input.error,
.form-textarea.error {
	border-color: var(--color-text-error);
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}



.form-error {
	color: #ff4d4f;
	font-size: 12px;
	margin-top: 5px;
	opacity: 0;
}

input.error+.form-error {
	opacity: 1;
}

.form-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-counter {
	font-size: 12px;
	color: #999;
}

.form-submit {
	margin-top: 10px;
}

.form-checkbox {
	margin-top: 15px;
}

.checkbox-input {
	position: absolute;
	opacity: 0;
}

.checkbox-label {
	cursor: pointer;
	font-size: 14px;
	position: relative;
	padding-left: 25px;
}

.checkbox-label svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	padding: 3px;
	transition: all 0.2s;
	border: solid 1px var(--color-brand-primary);
}

.checkbox-input:checked+.checkbox-label svg {
	background: var(--color-brand-primary);
}

.checkbox-label svg path {
	opacity: 0;
	transition: all 0.2s;
}

.checkbox-input:checked+.checkbox-label svg path {
	opacity: 1;
}

.checkbox-label:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	background: var(--color-brand-primary);
	border-radius: 3px;
	padding: 3px;
	border: solid 1px var(--color-brand-primary);
}

.checkbox-label a {
	color: #5577AA;
	text-decoration: underline;
}

.form-submit {
	min-width: 100% !important;
	background: var(--color-additional-accent-1);
	border: 0;
	font-family: 'Onest';
}

@media (max-width: 1919px) {
	:root {
		--container-width: 1440px;
		--gap: 16px;
		--fs-nav: 18px;
		--fs-button: 18px;
		--fs-hero-main: 140px;
		--lh-hero-main: 146px;
		--pt-page: 56px;
		--fs-hero-span: 46px;
		--h-hero-span: 60px;
		--gap-header: 36px;
	}
}

@media (max-width: 1599px) {
	:root {
		--container-width: 1340px;
		--fs-nav: 16px;
		--gap-header: 24px;
		--w-logo: 300px;
		--p-header: 20px 0;
		--fs-hero-main: 130px;
		--lh-hero-main: 140px;
		--fs-hero-span: 42px;
		--h-hero-span: 54px;
	}
}

@media (max-width: 1439px) {
	:root {
		--container-width: 1140px;
		--fs-button: 16px;
		--p-button: 8px 12px;
		--fs-nav: 14px;
		--w-logo: 240px;
		--fs-hero-main: 110px;
		--lh-hero-main: 120px;
		--fs-hero-span: 34px;
		--h-hero-span: 44px;
	}
}

@media (max-width: 1199px) {
	:root {
		--fs-hero-main: 60px;
		--lh-hero-main: 1.1;
		--container-width: 720px;
		--pt-page: 32px;
		--h-banner: 232px;
		--mt-banner: 28px;
		--mb-banner: 32px;
		--fs-services-title: 24px;
		--lh-services-title: 30px;
	}

	.d-pc {
		display: none;
	}

	.services__row {
		grid-template-columns: repeat(1, 1fr);
	}

	.header__row {
		justify-content: center;
	}

	body:not(.menu__opened) .header__menu .close {
		display: none;
	}

	body.menu__opened .header__menu .open {
		display: none;
	}

	.hero__main {
		text-align: left;
	}

	.hero__line {
		flex-direction: column;
	}

	.hero__column {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.hero__span-top {
		margin-top: 0;
	}

	.button {
		max-width: max-content;
	}

	.hero__title {
		gap: 4px;
	}

	.hero__column {
		align-items: start;
		margin: 0 0 8px;
	}

	.service__title {
		margin: 16px 0 16px;
		font-size: 20px;
	}

	.service__extra {
		font-size: 17px;
		gap: 8px;
	}

	.popup-title {
		font-size: 24px;
	}

	body[data-openmenu="menu"] .header__menu .open {
		display: none;
	}

	body[data-openmenu="menu"] .header__menu .close {
		display: block;
	}

}

@media (max-width: 768px) {
	:root {
		--container-width: 340px;
		--fs-hero-main: 48px;
		--gap: 8px;
		--fs-hero-span: 24px;
	}

	.hero__button {
		max-width: 100%;
	}

	.footer>.container {
		position: relative;
	}

	.footer__nav {
		flex-direction: column;
		align-items: start;
		padding-bottom: 24px;
	}

	.footer__contacts {
		flex-direction: column;
	}

	.footer__totop {
		position: absolute;
		right: 0;
		top: 0;
	}

	.footer__bottom {
		flex-direction: column;
		font-size: 14px;
		gap: 4px;
	}

	.header__main {
		width: 100%;
		gap: 12px;
	}

	.footer__contacts {
		gap: var(--gap);
	}

	.footer__contact {
		gap: 4px;
	}

	.footer {
		padding: 16px 0;
	}

	.footer__nav {
		padding-bottom: 16px;
	}

	.services__title {
		margin-bottom: 24px;
	}
	
	.hero__row{
		padding: 12px;
	}
	.hero__main{
		font-size: 36px!important;
	}
}

@media (min-width: 1200px) {
	.d-mob {
		display: none;
	}
}

.ie .container {
	max-width: 1720px;
	padding: 0;
}

.ie .page {
	padding-top: 76px;
	padding-bottom: 96px;
}

@media (max-width: 1919px) {
	.ie .container {
		max-width: 1440px;
	}

	.ie .page {
		padding-top: 56px;
	}
}

@media (max-width: 1599px) {
	.ie .container {
		max-width: 1340px;
	}
}


@media (max-width: 1199px) {
	.ie .container {
		max-width: 720px;
	}

	.ie .page {
		padding-top: 32px;
		padding-bottom: 32px;
	}

}


@media (max-width: 768px) {
	.ie .container {
		max-width: 340px;
		padding: 0 10px;
	}
}

/* IE Fallback for .button */
.ie .button {
	padding: 12px 16px;
	border-radius: 8px;
	cursor: pointer;
	background: #5577aa;
	color: #fff;
	transition: 0.3s;
	font-size: 20px;
}

/* Media queries fallback for IE */
@media (max-width: 1919px) {
	.ie .button {
		font-size: 18px;
		padding: 12px 16px;
	}
}

@media (max-width: 1599px) {
	.ie .button {
		font-size: 16px;
	}
}

@media (max-width: 1439px) {
	.ie .button {
		font-size: 16px;
		padding: 8px 12px;
	}
}

@media (max-width: 1199px) {
	.ie .button {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.ie .button {
		font-size: 16px;
	}
}

.ie {
	padding-top: 132px !important;
}

.ie .button:hover,
.ie .button:focus {
	background: #1c3354;
	/* --color-additional-accent - замена var() для IE */
}

.ie .header {
	position: fixed;
	/* IE не поддерживает sticky */
	top: 0;
	width: 100vw;
	min-height: 132px;
	background: #fff;
	padding: 28px 0;
	border-bottom: solid 1px #8c94a3;
}

.ie .header__row {
	text-align: center;
}

.ie .header__logo {
	width: 367px;
	margin: 0 auto;
}

.ie .header__logo img {
	width: 100%;
}

.ie .header__contacts {
	font-size: 20px;
	margin: 10px 0;
}

.ie .header__main {
	margin: 10px 0;
}

.ie .header__nav {
	font-size: 20px;
	margin: 10px 0;
}

.header__contacts>* {
	margin-left: 32px;
}

@media (max-width: 1919px) {
	.ie .header__logo {
		width: 300px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 18px;
	}
}

@media (max-width: 1599px) {
	.ie .header__logo {
		width: 300px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 16px;
	}

	.ie .header {
		min-height: auto;
		padding: 20px 0;
	}
}

@media (max-width: 1439px) {
	.ie .header__logo {
		width: 240px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 14px;
	}
}

@media (max-width: 1199px) {
	.ie .header {
		padding: 28px 0;
	}
}

@media (max-width: 768px) {
	.ie .header__logo {
		width: 240px;
	}
}

.ie .banner {
	width: 100%;
	height: 396px;
	/* --h-banner fallback */
	margin: 74px 0 64px;
	/* --mt-banner and --mb-banner fallback */
	position: relative;
	overflow: hidden;
}

.ie .banner img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	width: 100%;
}

@media (max-width: 1919px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1599px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1439px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1199px) {
	.ie .banner {
		height: 232px;
		/* --h-banner fallback */
		margin: 28px 0 32px;
		/* --mt-banner and --mb-banner fallback */
	}
}

@media (max-width: 768px) {
	.ie .banner {
		height: 232px;
		margin: 28px 0 32px;
	}
}

.ie .services__title {
	font-size: 40px;
	/* --fs-services-title fallback */
	line-height: 50px;
	/* --lh-services-title fallback */
	font-weight: 700;
	margin-bottom: 52px;
	color: #3a3f48;
	/* --color-brand-intense fallback */
	text-transform: uppercase;
}

@media (max-width: 1199px) {
	.ie .services__title {
		font-size: 24px;
		/* --fs-services-title fallback */
		line-height: 30px;
		/* --lh-services-title fallback */
	}
}

.ie .header a {
	text-decoration: none;
}

.ie .hero__title {
	display: -ms-flexbox;
	-ms-flex-direction: column;
	justify-content: center;
	width: 100%;
	/* gap property removed for IE compatibility */
	margin-bottom: 28px;
	/* --gap fallback replacement */
}

.ie .hero__row {
	display: flex;
}

.ie .hero__line {
	display: -ms-flexbox;
}

.ie .hero__bottom {
	/* gap property removed for IE compatibility */
	align-items: center;
	margin: -16px;
	/* Negative margin to compensate for inline-block spacing */
}

.ie .hero__bottom .hero__span {
	display: inline-block;
	margin: 16px;
	/* Manual gap replacement */
}

.ie .hero__bottom .hero__button {
	margin: 16px;
	/* Manual gap replacement */
}

.ie .hero__column {
	display: -ms-flexbox;
	-ms-flex-direction: column;
	/* gap property removed for IE compatibility */
	margin: 0 auto;
}

.ie .hero__column>* {
	margin-bottom: 2px;
	/* Manual gap replacement */
}

.ie .hero__column>*:last-child {
	margin-bottom: 0;
}

.ie .hero__main {
	color: #ec621b;
	/* --color-brand-primary fallback */
	font-size: 170px;
	/* --fs-hero-main fallback */
	font-weight: 300;
	text-align: right;
	width: 100%;
	text-transform: uppercase;
	line-height: 160px;
	/* --lh-hero-main fallback */
}

.ie .hero__span {
	color: #3a3f48;
	/* --color-brand-intense fallback */
	font-size: 53px;
	/* --fs-hero-span fallback */
	font-weight: 400;
	height: 68px;
	/* --h-hero-span fallback */
	display: flex;
	align-items: center;
}

.ie .hero__span-top {
	margin-top: 4px;
}

.ie .hero__button {
	height: auto;
	/* max-content fallback */
	flex-grow: 1;
	text-align: center;
}

@media (max-width: 1919px) {
	.ie .hero__main {
		font-size: 140px;
		line-height: 160px;
	}

	.ie .hero__span {
		font-size: 46px;
		height: 60px;
	}
}

@media (max-width: 1599px) {
	.ie .hero__main {
		font-size: 130px;
		line-height: 140px;
	}

	.ie .hero__span {
		font-size: 42px;
		height: 54px;
	}
}

@media (max-width: 1439px) {
	.ie .hero__main {
		font-size: 110px;
		line-height: 120px;
	}

	.ie .hero__span {
		font-size: 34px;
		height: 44px;
	}
}

@media (max-width: 1199px) {
	.ie .hero__main {
		font-size: 60px;
		line-height: 66px;
		/* 1.1 fallback */
		text-align: center;
	}

	.ie .hero__span {
		font-size: 34px;
		height: 44px;
	}
}

@media (max-width: 768px) {
	.ie .hero__main {
		font-size: 38px;
		line-height: 43px;
	}

	.ie .hero__span {
		font-size: 24px;
		height: 28px;
		margin-bottom: 8px;
	}

	.ie .hero__title {
		margin-bottom: 8px;
		/* --gap fallback replacement */
	}
}

/*!
Theme Name: ИЭЦ
Author: ABMarketing
Author URI: https://abmarketing.pro
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: abm_iec
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
	--color-background-primary: #fff;
	--color-background-secondary: #f0f3fb;
	--color-background-intense: #8c94a3;
	--color-text-primary: #131d2f;
	--color-text-secondary: #8c94a3;
	--color-text-intense: #fff;
	--color-text-error: #d91946;
	--color-brand-primary: #ec621b;
	--color-brand-secondary: #993909;
	--color-brand-intense: #3a3f48;
	--color-additional-accent: #1c3354;
	--color-additional-accent-1: #5577aa;
	--container-width: 1720px;
	--gap: 28px;
	--fs-nav: 20px;
	--fs-button: 20px;
	--fs-hero-main: 170px;
	--lh-hero-main: 160px;
	--h-banner: 396px;
	--mt-banner: 74px;
	--mb-banner: 64px;
	--pt-page: 76px;
	--pb-page: 96px;
	--p-button: 12px 16px;
	--p-header: 28px 0;
	--gap-header: 60px;
	--fs-hero-span: 53px;
	--h-hero-span: 68px;
	--w-logo: 367px;
	--fs-services-title: 40px;
	--lh-services-title: 50px;
	--calculated-padding: calc(0.5 * (100vw - var(--container-width)));
}

@font-face {
	font-family: "Onest";
	src: url("./fonts/Onest-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("./fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html {
	margin: 0;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Onest";
	font-weight: 400;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: unset;
	color: inherit;
}

/* Structure */
.container {
	max-width: var(--container-width);
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.page {
	padding-top: var(--pt-page);
	padding-bottom: var(--pb-page);
}

.button {
	padding: var(--p-button);
	border-radius: 8px;
	cursor: pointer;
	background: var(--color-additional-accent-1);
	color: var(--color-text-intense);
	transition: 0.3s;
	font-size: var(--fs-button);
}

.button:is(:hover, :focus) {
	background: var(--color-additional-accent);
}

/* Header */

.header {
	position: sticky;
	top: 0;
	border-bottom: solid 1px var(--color-background-intense);
	background: var(--color-background-primary);
	padding: var(--p-header);
	z-index: 50;
	min-height: 94px;
}

.header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__logo {
	display: flex;
	width: var(--w-logo);
	align-items: center;
}

.header__logo img {
	width: 100%;
}

.header__contacts {
	display: flex;
	align-items: center;
	display: flex;
	gap: var(--gap);
	font-size: var(--fs-nav);
}

.header__main {
	display: flex;
	align-items: center;
	gap: var(--gap-header);
}

.header__nav {
	display: flex;
	gap: var(--gap);
	font-size: var(--fs-nav);
}

/* Hero */
.hero__title {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--gap);
}

.hero__row {
	display: flex;
}

.hero__line {
	display: flex;
}

.hero__bottom {
	gap: 32px;
	align-items: center;
}

.hero__column {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 auto;
}

.hero__main {
	color: #ec621b;
	font-size: var(--fs-hero-main);
	font-weight: 300;
	text-align: right;
	text-transform: uppercase;
	line-height: var(--lh-hero-main);
}

.hero__span {
	color: var(--color-brand-intense);
	font-size: var(--fs-hero-span);
	font-weight: 400;
	height: var(--h-hero-span);
	display: flex;
	align-items: center;
}

.hero__span-top {
	margin-top: 4px;
}

.hero__button {
	height: max-content;
	flex-grow: 1;
	text-align: center;
}

/* Banner */

.banner {
	width: 100%;
	height: var(--h-banner);
	margin: var(--mt-banner) 0 var(--mb-banner);
}

.banner img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Services */

.services__title {
	font-size: var(--fs-services-title);
	line-height: var(--lh-services-title);
	font-weight: 600;
	margin-bottom: 52px;
	color: var(--color-brand-intense);
	text-transform: uppercase;
}

.services__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.service {
	height: 100%;
	padding: 8px 8px 24px;
	background-color: var(--color-background-secondary);
	border-radius: 8px;
}

.service__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 246px;
	border-radius: 8px;
	overflow: hidden;
}

.service__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service__title {
	margin: 24px 0 20px;
	font-size: 24px;
	font-weight: 500;
	padding: 0 4px;
}

.service__extra {
	list-style: none;
	padding-left: 0;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.service__extra li {
	display: flex;
	position: relative;
	align-items: center;
	gap: 8px;
}

.service__extra li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M16.1179 12.158C15.9891 12.158 15.8846 12.0535 15.8846 11.9246V3.03782C15.8846 2.81313 15.5982 2.71827 15.4641 2.89853L6.52645 14.9105C6.24012 15.2953 6.51478 15.842 6.99445 15.842H11.8821C12.0109 15.842 12.1154 15.9465 12.1154 16.0754V24.9622C12.1154 25.1869 12.4018 25.2818 12.5359 25.1015L21.4735 13.0895C21.7599 12.7047 21.4852 12.158 21.0055 12.158H16.1179Z' fill='%23EC621B'/%3E%3Cpath d='M14.89 2.23096C15.5644 1.57919 16.7595 2.03729 16.7597 3.0376V11.2829H21.0059C22.2047 11.2832 22.8913 12.6497 22.176 13.6117L13.238 25.6235C12.601 26.4796 11.2412 26.0296 11.2408 24.9627V16.7174H6.99454C5.7955 16.7174 5.10901 15.3507 5.82445 14.3887L14.7624 2.37565L14.89 2.23096ZM12.9908 23.0236L20.4249 13.0329H16.1182C15.5061 13.0329 15.0097 12.5364 15.0097 11.9243V4.97444L7.57445 14.9674H11.8822C12.4941 14.9675 12.9905 15.4631 12.9908 16.0749V23.0236Z' fill='%23EC621B'/%3E%3C/svg%3E");
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: 28px;
	background-size: cover;
	content: "";
}

/* Footer */

.footer {
	border-top: 1px solid var(--color-background-intense);
	padding: 28px 0 16px;
	display: flex;
	flex-direction: column;
}

.footer__nav {
	display: flex;
	gap: var(--gap);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 58px;
}

.footer__main {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: solid 1px var(--color-brand-intense);
}

.footer__totop {
	width: 48px;
	min-width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-additional-accent-1);
	border-radius: 100px;
}

.footer__contacts {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	width: 100%;
}

.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer__type {
	color: var(--color-text-secondary);
	line-height: 1;
	text-transform: uppercase;
	font-size: 14px;
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	color: var(--color-text-secondary);
}

.popup {
	z-index: 99999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	max-height: 100vh;
	display: flex;
	justify-content: end;
	background: #5577aab2;
	transition: 0.3s;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

.popup#menu {
	top: 94px;
	height: calc(100vh - 94px);
}

.popup.active {
	opacity: 1;
	visibility: visible;
}

.popup-content {
	height: 100vh;
	width: calc(524px + var(--calculated-padding));
	max-width: 100vw;
	max-width: 100vw;
	align-self: flex-end;
	background: #fff;
	transition: 0.3s;
	transform: translateX(100vw);
	padding: 28px var(--calculated-padding) 28px 24px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}

.popup-content:after {
	content: ' ';
	position: absolute;
	display: flex;
	background: #fff;
	top: 0;
	left: 100%;
	width: 100vw;
	transform: translateX(100vw);
	transition: 0.3s;
	height: 100%;
}

.popup#menu .popup-content {
	height: 100%;
	width: 100%;
}

.popup-nav {
	display: flex;
	gap: 16px;
	font-size: 17px;
	flex-direction: column;
	margin-bottom: 32px;
}

.popup .header__button {
	width: 100%;
}

.popup-contacts {
	display: flex;
	gap: 16px;
	font-size: 17px;
	flex-direction: column;
}

.popup.active .popup-content {
	transform: translateX(0);
}

.popup.active .popup-content:after {
	transform: translateX(0);
}

.popup-top {
	display: flex;
	align-items: top;
	margin-bottom: 32px;
}

.popup-close {
	cursor: pointer;
}

.popup-title {
	font-weight: 600;
	font-size: 32px;
	text-transform: uppercase;
}

.popup-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-group {
	position: relative;
}

.form-input,
.form-textarea {
	width: 100%;
	padding: 16px;
	border: 1px solid var(--color-background-intense);
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s;
	font-family: 'Onest';
	font-size: 16px;
	;
}

.form-input:focus,
.form-textarea:focus {
	border-color: var(--color-brand-primary);
	outline: none;
}

.form-input.error,
.form-textarea.error {
	border-color: var(--color-text-error);
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}



.form-error {
	color: #ff4d4f;
	font-size: 12px;
	margin-top: 5px;
	opacity: 0;
}

input.error+.form-error {
	opacity: 1;
}

.form-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-counter {
	font-size: 12px;
	color: #999;
}

.form-submit {
	margin-top: 10px;
}

.form-checkbox {
	margin-top: 15px;
}

.checkbox-input {
	position: absolute;
	opacity: 0;
}

.checkbox-label {
	cursor: pointer;
	font-size: 14px;
	position: relative;
	padding-left: 25px;
}

.checkbox-label svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	padding: 3px;
	transition: all 0.2s;
	border: solid 1px var(--color-brand-primary);
}

.checkbox-input:checked+.checkbox-label svg {
	background: var(--color-brand-primary);
}

.checkbox-label svg path {
	opacity: 0;
	transition: all 0.2s;
}

.checkbox-input:checked+.checkbox-label svg path {
	opacity: 1;
}

.checkbox-label:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	background: var(--color-brand-primary);
	border-radius: 3px;
	padding: 3px;
	border: solid 1px var(--color-brand-primary);
}

.checkbox-label a {
	color: #5577AA;
	text-decoration: underline;
}

.form-submit {
	min-width: 100% !important;
	background: var(--color-additional-accent-1);
	border: 0;
	font-family: 'Onest';
}

@media (max-width: 1919px) {
	:root {
		--container-width: 1440px;
		--gap: 16px;
		--fs-nav: 18px;
		--fs-button: 18px;
		--fs-hero-main: 140px;
		--lh-hero-main: 150px;
		--pt-page: 56px;
		--fs-hero-span: 46px;
		--h-hero-span: 60px;
		--gap-header: 36px;
	}
}

@media (max-width: 1599px) {
	:root {
		--container-width: 1340px;
		--fs-nav: 16px;
		--gap-header: 24px;
		--w-logo: 300px;
		--p-header: 20px 0;
		--fs-hero-main: 130px;
		--lh-hero-main: 140px;
		--fs-hero-span: 42px;
		--h-hero-span: 54px;
	}
}

@media (max-width: 1439px) {
	:root {
		--container-width: 1140px;
		--fs-button: 16px;
		--p-button: 8px 12px;
		--fs-nav: 14px;
		--w-logo: 240px;
		--fs-hero-main: 110px;
		--lh-hero-main: 120px;
		--fs-hero-span: 34px;
		--h-hero-span: 44px;
	}
}

@media (max-width: 1199px) {
	:root {
		--fs-hero-main: 60px;
		--lh-hero-main: 1.1;
		--container-width: 720px;
		--pt-page: 32px;
		--h-banner: 232px;
		--mt-banner: 28px;
		--mb-banner: 32px;
		--fs-services-title: 24px;
		--lh-services-title: 30px;
	}

	.d-pc {
		display: none;
	}

	.services__row {
		grid-template-columns: repeat(1, 1fr);
	}

	.header__row {
		justify-content: center;
	}

	body:not(.menu__opened) .header__menu .close {
		display: none;
	}

	body.menu__opened .header__menu .open {
		display: none;
	}

	.hero__main {
		text-align: left;
	}

	.hero__line {
		flex-direction: column;
	}

	.hero__column {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.hero__span-top {
		margin-top: 0;
	}

	.button {
		max-width: max-content;
	}

	.hero__title {
		gap: 4px;
	}

	.hero__column {
		align-items: start;
		margin: 0 0 8px;
	}

	.service__title {
		margin: 16px 0 16px;
		font-size: 20px;
	}

	.service__extra {
		font-size: 17px;
		gap: 8px;
	}

	.popup-title {
		font-size: 24px;
	}

	body[data-openmenu="menu"] .header__menu .open {
		display: none;
	}

	body[data-openmenu="menu"] .header__menu .close {
		display: block;
	}

}

@media (max-width: 768px) {
	:root {
		--container-width: 340px;
		--fs-hero-main: 48px;
		--gap: 8px;
		--fs-hero-span: 24px;
	}

	.hero__button {
		max-width: 100%;
	}

	.footer>.container {
		position: relative;
	}

	.footer__nav {
		flex-direction: column;
		align-items: start;
		padding-bottom: 24px;
	}

	.footer__contacts {
		flex-direction: column;
	}

	.footer__totop {
		position: absolute;
		right: 0;
		top: 0;
	}

	.footer__bottom {
		flex-direction: column;
		font-size: 14px;
		gap: 4px;
	}

	.header__main {
		width: 100%;
		gap: 12px;
	}

	.footer__contacts {
		gap: var(--gap);
	}

	.footer__contact {
		gap: 4px;
	}

	.footer {
		padding: 16px 0;
	}

	.footer__nav {
		padding-bottom: 16px;
	}

	.services__title {
		margin-bottom: 24px;
	}
}

@media (min-width: 1200px) {
	.d-mob {
		display: none;
	}
}

.ie .container {
	max-width: 1720px;
	padding: 0;
}

.ie .page {
	padding-top: 76px;
	padding-bottom: 96px;
}

@media (max-width: 1919px) {
	.ie .container {
		max-width: 1440px;
	}

	.ie .page {
		padding-top: 56px;
	}
}

@media (max-width: 1599px) {
	.ie .container {
		max-width: 1340px;
	}
}


@media (max-width: 1199px) {
	.ie .container {
		max-width: 720px;
	}

	.ie .page {
		padding-top: 32px;
	}

}

.ie, .ie body{
	max-width: 100vw;
}


@media (max-width: 768px) {
	.ie .container {
		max-width: 320px;
		margin: 0 auto;
	}
	.ie .header__logo, .ie .header__logo img{
		max-width: 220px;
		width: 220px;
		height: auto;
	}
	.ie .button{
		max-width: 100%;
	}
	.ie .service{
		width: 100%;
		max-width: 100%;
		margin: 0!important;
	}
	.ie .services__row{

	}
}

/* IE Fallback for .button */
.ie .button {
	padding: 12px 16px;
	border-radius: 8px;
	cursor: pointer;
	background: #5577aa;
	color: #fff;
	transition: 0.3s;
	font-size: 20px;
}

/* Media queries fallback for IE */
@media (max-width: 1919px) {
	.ie .button {
		font-size: 18px;
		padding: 12px 16px;
	}
}

@media (max-width: 1599px) {
	.ie .button {
		font-size: 16px;
	}
}

@media (max-width: 1439px) {
	.ie .button {
		font-size: 16px;
		padding: 8px 12px;
	}
}

@media (max-width: 1199px) {
	.ie .button {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.ie .button {
		font-size: 16px;
	}
}

.ie {
	padding-top: 132px !important;
}

.ie .button:hover,
.ie .button:focus {
	background: #1c3354;
	/* --color-additional-accent - замена var() для IE */
}

.ie .header {
	position: fixed;
	/* IE не поддерживает sticky */
	top: 0;
	width: 100vw;
	min-height: 132px;
	background: #fff;
	padding: 28px 0;
	border-bottom: solid 1px #8c94a3;
}

.ie .header__row {
	text-align: center;
}

.ie .header__logo {
	width: 367px;
	margin: 0 auto;
}

.ie .header__logo img {
	width: 100%;
}

.ie .header__contacts {
	font-size: 20px;
	margin: 10px 0;
}

.ie .header__main {
	margin: 10px 0;
}

.ie .header__nav {
	font-size: 20px;
	margin: 10px 0;
}

.header__contacts>* {
	margin-left: 32px;
}

@media (max-width: 1919px) {
	.ie .header__logo {
		width: 300px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 18px;
	}
}

@media (max-width: 1599px) {
	.ie .header__logo {
		width: 300px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 16px;
	}

	.ie .header {
		min-height: auto;
		padding: 20px 0;
	}
}

@media (max-width: 1439px) {
	.ie .header__logo {
		width: 240px;
	}

	.ie .header__contacts,
	.ie .header__nav {
		font-size: 14px;
	}
}

@media (max-width: 1199px) {
	.ie .header {
		padding: 0;
		min-height: 94px;
	}
}

@media (max-width: 768px) {
	.ie .header__logo {
		width: 240px;
	}
}

.ie .banner {
	width: 100%;
	height: 396px;
	/* --h-banner fallback */
	margin: 74px 0 64px;
	/* --mt-banner and --mb-banner fallback */
	position: relative;
	overflow: hidden;
}

.ie .banner img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	width: 100%;
}

@media (max-width: 1919px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1599px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1439px) {
	.ie .banner {
		height: 396px;
		margin: 74px 0 64px;
	}
}

@media (max-width: 1199px) {
	.ie .banner {
		height: 232px;
		/* --h-banner fallback */
		margin: 28px 0 32px;
		/* --mt-banner and --mb-banner fallback */
	}
}

@media (max-width: 768px) {
	.ie .banner {
		height: 232px;
		margin: 28px 0 32px;
	}
	
}

.ie .services__title {
	font-size: 40px;
	/* --fs-services-title fallback */
	line-height: 50px;
	/* --lh-services-title fallback */
	font-weight: 700;
	margin-bottom: 52px;
	color: #3a3f48;
	/* --color-brand-intense fallback */
	text-transform: uppercase;
}


@media (max-width: 1199px) {
	.ie .services__title {
		font-size: 24px;
		/* --fs-services-title fallback */
		line-height: 30px;
		/* --lh-services-title fallback */
	}
}

.ie .header a {
	text-decoration: none;
}

.ie .hero__title {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* gap property removed for IE compatibility */
	margin-bottom: 28px;
	/* --gap fallback replacement */
}

.ie .hero__row {
	display: flex;
}

.ie .hero__line {
	display: flex;
}

.ie .hero__bottom {
	/* gap property removed for IE compatibility */
	align-items: center;
	margin: -16px;
	/* Negative margin to compensate for inline-block spacing */
}

.ie .hero__bottom .hero__span {
	display: inline-block;
	margin: 16px;
	/* Manual gap replacement */
}

.ie .hero__bottom .hero__button {
	margin: 16px;
	/* Manual gap replacement */
}

.ie .hero__column {
	display: -ms-flex;
	-ms-flex-direction: column;
	/* gap property removed for IE compatibility */
	margin: 6px 0 0 32px;
}

.ie .hero__column>* {
	margin-bottom: 2px;
	/* Manual gap replacement */
}

.ie .hero__column>*:last-child {
	margin-bottom: 0;
}

.ie .hero__main {
	color: #ec621b;
	/* --color-brand-primary fallback */
	font-size: 170px;
	/* --fs-hero-main fallback */
	font-weight: 300;
	text-align: right;
	text-transform: uppercase;
	line-height: 160px;
	/* --lh-hero-main fallback */
}

.ie .hero__span {
	color: #3a3f48;
	/* --color-brand-intense fallback */
	font-size: 53px;
	/* --fs-hero-span fallback */
	font-weight: 400;
	height: 68px;
	/* --h-hero-span fallback */
	display: -ms-flex;
	align-items: center;
}

.ie .hero__span-top {
	margin-top: 4px;
}

.ie .hero__button {
	height: auto;
	/* max-content fallback */
	flex-grow: 1;
	text-align: center;
}

@media (max-width: 1919px) {
	.ie .hero__main {
		font-size: 140px;
		line-height: 150px;
	}

	.ie .hero__span {
		font-size: 46px;
		height: 60px;
	}
}

@media (max-width: 1599px) {
	.ie .hero__main {
		font-size: 130px;
		line-height: 140px;
	}

	.ie .hero__span {
		font-size: 42px;
		height: 54px;
	}
}

@media (max-width: 1439px) {
	.ie .hero__main {
		font-size: 110px;
		line-height: 120px;
	}

	.ie .hero__span {
		font-size: 34px;
		height: 44px;
	}
}

@media (max-width: 1199px) {
	.ie .hero__main {
		font-size: 60px;
		line-height: 66px;
		/* 1.1 fallback */
		text-align: center;
	}

	.ie .hero__span {
		font-size: 34px;
		height: 44px;
	}

	.ie .hero__column {
		margin: 0;
		line-height: 1;
	}
}

@media (max-width: 768px) {
	.ie .hero__main {
		font-size: 38px;
		line-height: 43px;
	}

	.ie .hero__span {
		font-size: 24px;
		height: 44px;
		margin-bottom: 12px;
	}

	.ie .hero__title {
		margin-bottom: 8px;
		/* --gap fallback replacement */
	}
}

.ie .services__row {
	display: block;
	text-align: justify;
}

.ie .services__row::after {
	content: '';
	display: inline-block;
	width: 100%;
}

.ie .service {
	display: inline-block;
	width: calc((100% - 32px * 2) / 3);
	background: #f0f3fb;
	margin: 0;
}

.ie .footer {
	border-top: 1px solid #8c94a3;
	padding: 28px 0 16px;
	display: block;
	/* IE не поддерживает flex-direction: column */
}

.ie .footer__nav {
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-pack: justify;
	/* IE space-between */
	padding-bottom: 58px;
}

.ie .footer__main {
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-align: center;
	/* IE align-items */
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: solid 1px #3a3f48;
}

.ie .footer__totop {
	width: 48px;
	min-width: 48px;
	height: 48px;
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-align: center;
	/* IE align-items */
	-ms-flex-pack: center;
	/* IE justify-content */
	background: #5577aa;
	border-radius: 100px;
}

.ie .footer__contacts {
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-pack: justify;
	/* IE space-between */
	font-size: 14px;
	width: 100%;
	margin-left: 32px;
}

.ie .footer__contact {
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-direction: column;
	/* IE11 поддерживает */
}

.ie .footer__type {
	color: #8c94a3;
	;
}

.ie .footer__bottom {
	display: -ms-flexbox;
	/* IE fallback */
	-ms-flex-pack: justify;
	/* IE space-between */
	color: #8c94a3;
}

@media (max-width: 1919px) {
	.ie .footer {
		padding: 28px 0 16px;
	}

	.ie .footer__nav {
		padding-bottom: 58px;
	}
}

@media (max-width: 1599px) {
	.ie .footer {
		padding: 28px 0 16px;
	}

	.ie .footer__nav {
		padding-bottom: 58px;
	}
}

@media (max-width: 1439px) {
	.ie .footer {
		padding: 28px 0 16px;
	}

	.ie .footer__nav {
		padding-bottom: 58px;
	}
}

@media (max-width: 768px) {
	.ie .footer__contacts {
		margin-left: 0;
	}

	.ie .footer__contact {
		margin-bottom: 12px;
	}
}

.ie .popup {
	background: transparent;
	/* IE не поддерживает hex с альфа-каналом */
	right: 0;
	display: -ms-flexbox;
	align-items: end;
	-ms-flex-align: end;
	justify-content: end;
	-ms-flex-pack: end;
}

.ie .popup-content {
	width: 524px;
	/* IE не поддерживает calc() с CSS переменными */
	padding: 28px 24px 28px 24px;
	right: 0;
	/* Замена var(--calculated-padding) */
}

.ie .popup.active .popup-content,
.ie .popup.active .popup-content:after {
	transform: none;
	/* Анимация transform может работать некорректно */
}

.ie .form-input:focus,
.ie .form-textarea:focus {
	border-color: #ec621b;
	/* Замена var(--color-brand-primary) */
}

.ie .form-input.error,
.ie .form-textarea.error {
	border-color: #d91946;
	/* Замена var(--color-text-error) */
}

.ie .checkbox-input:checked+.checkbox-label svg {
	background: #ec621b;
	/* Замена var(--color-brand-primary) */
}

.ie .checkbox-label:before {
	background: #ec621b;
	/* Замена var(--color-brand-primary) */
	border-color: #ec621b;
	/* Замена var(--color-brand-primary) */
}

.ie .checkbox-label a {
	color: #5577AA;
	/* Замена hex значения */
}

.ie .form-submit {
	background: #5577aa;
	/* Замена var(--color-additional-accent-1) */
}

@media (max-width: 1919px) {
	.ie .popup-content {
		width: 524px;
		padding: 28px 24px 28px 24px;
	}
}

@media (max-width: 1599px) {
	.ie .popup-content {
		width: 524px;
		padding: 28px 24px 28px 24px;
	}
}

@media (max-width: 1439px) {
	.ie .popup-content {
		width: 524px;
		padding: 28px 24px 28px 24px;
	}
}

@media (max-width: 1199px) {
	.ie .popup-content {
		width: 524px;
		padding: 28px 24px 28px 24px;
	}
}

@media (max-width: 768px) {
	.ie .popup-content {
		width: 340px;
		/* Замена var(--container-width) для мобильных */
		padding: 24px;
	}
}


@media (max-width: 1199px) {
	.ie .footer {
		padding: 28px 0 16px;
	}

	.ie .footer__nav {
		padding-bottom: 58px;
	}
}

@media (max-width: 768px) {
	.ie .footer {
		padding: 28px 0 16px;
	}

	.ie .footer__nav {
		padding-bottom: 58px;
	}
}


.ie .services__row::after {
	content: '';
	width: 100%;
}

.ie .service__extra li::before {
	display: -ms-flexbox;
}

.ie .service__img {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	height: max-content;
	max-height: 246px;
}

.ie .service__img img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}


.ie .services__row {
	display: -ms-flexbox;
	width: 100%;
	min-width: 100%;
	justify-content: space-between;
	align-items: space-between;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-align: stretch;
	-ms-flex-line-pack: distribute;
}


.ie .service {
	min-width: calc((100% - 32px * 2) / 3);
	background: #f0f3fb;
	
	margin: 0 calc((32px) / 3);
	text-align: left;
	height: 100%;
}

@media (max-width: 1199px) {
	.ie .services__row {
		display: block;
	}

	.ie .service {
		display: block;
		width: 100%;
		margin-bottom: 16px;
	}
}

@media (max-width: 768px) {
	.ie .service__img img {
		height: 100%;
		width: auto;
	}
	.ie .service{
		margin: 0!important;
	}
}

.ie .footer a{
	text-decoration: none;
}

.ie .footer__type{
	margin-bottom: 8px;
}