:root {
	--color-white: #ffffff;
	--color-border: #e5e7eb;
	--color-success: #16a34a;
	--color-primary-dark: #0b1f3a;
	--color-primary-main: #1e3a8a;
	--color-accent-blue: #2e6bff;
	--color-accent-hover: #1d4ed8;
	--color-background-light: #f5f7fa;
	--color-text-primary: #111827;
	--color-text-secondary: #6b7280;

	--font-size-h1: clamp(1.75rem, calc(1.75rem + 1.75vw), 3.5rem);
	--font-size-h2: clamp(1.5rem, calc(1.5rem + 1vw), 2.5rem);
	--font-size-h3: clamp(1.3125rem, calc(1.3125rem + 0.4375vw), 1.75rem);
	--font-size-h4: clamp(1.104rem, calc(1.104rem + 0.276vw), 1.38rem);
	--font-size-body-l: 1.13rem;
	--font-size-body: 1rem;
	--font-size-small: 0.88rem;
	--font-size-caption: 0.75rem;

	--gap-4: 4px;
	--gap-8: 8px;
	--gap-12: clamp(6px, 0.375rem + 0.5634vw, 12px);
	--gap-16: clamp(8px, 0.5rem + 0.7512vw, 16px);
	--gap-24: clamp(12px, 0.75rem + 1.1268vw, 24px);
	--gap-32: clamp(16px, 1rem + 1.5023vw, 32px);
	--gap-48: clamp(24px, 1.5rem + 2.2535vw, 48px);
	--gap-64: clamp(32px, 2rem + 3.0047vw, 64px);
	--gap-96: clamp(48px, 3rem + 4.507vw, 96px);

	--border-radius-base: 10px;
	--border-radius-l: calc(var(--border-radius-base) + var(--gap-4) + var(--gap-32));
}

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

html {
	font-family: 'Onest', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	font-size: var(--font-size-body);
	line-height: 1.5;
	color: var(--color-text-primary);
}

body {
	padding: var(--gap-12) var(--gap-12) 0 var(--gap-12);

	& > * {
		margin-bottom: var(--gap-12);
	}
}

h1,
.h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Onest', sans-serif;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-wrap: balance;
	margin: 0;
}

h1,
.h1 {
	font-size: var(--font-size-h1);
	line-height: 1.1;
}

h2 {
	font-size: var(--font-size-h2);
	line-height: 1.2;
}

h3 {
	font-size: var(--font-size-h3);
	line-height: 1.3;
}

h4 {
	font-size: var(--font-size-h4);
	line-height: 1.3;
}

.font-body-l {
	font-size: var(--font-size-body-l);
}

.font-small {
	font-size: var(--font-size-small);
	line-height: 1.4;
}

.font-caption {
	font-size: var(--font-size-caption);
	line-height: 1.3;
}

address,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
	margin: 0;
	padding: 0;
}

a {
	display: inline-block;
	color: var(--color-text-primary);

	&:hover {
		color: var(--color-accent-blue);
		text-decoration: none;
	}
}

button[disabled],html input[disabled] {
	cursor: default;
	opacity: .5;
}



.link-arrow {
	font-weight: 500;
	font-size: var(--font-size-body-l);
	line-height: 1.1;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--gap-12);

	&.link-arrow-tr::after {
		content: '';
		width: 18px;
		height: 18px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%232e6bff' d='M18 9a1 1 0 1 1-2 0V3.414L1.707 17.707a1 1 0 1 1-1.414-1.414L14.586 2H9a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	&.link-arrow-r::after {
		content: '';
		width: 24px;
		height: 14px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' fill='none' viewBox='0 0 24 14'%3E%3Cpath fill='%232E6BFF' d='M16.293.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L20.586 8H1a1 1 0 1 1 0-2h19.586l-4.293-4.293a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}
}

.link-dowload {
	color: var(--color-accent-blue);
	display: inline-flex;
	align-items: center;
	gap: var(--gap-4);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}

	&::after {
		content: '';
		width: 13px;
		height: 13px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' viewBox='0 0 13 13'%3E%3Cpath fill='%232e6bff' d='M0 11.167V8.5a.5.5 0 0 1 1 0v2.666a.834.834 0 0 0 .833.834h9.333a.834.834 0 0 0 .834-.834V8.5a.5.5 0 0 1 1 0v2.666A1.834 1.834 0 0 1 11.166 13H1.834A1.834 1.834 0 0 1 0 11.166M6 .5a.5.5 0 0 1 1 0v6.793l2.48-2.48a.5.5 0 0 1 .707.707L6.854 8.854a.5.5 0 0 1-.708 0L2.813 5.52a.5.5 0 0 1 .707-.707L6 7.293z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
}

ol,
ul {
	list-style: none;
}

button {
	font-family: 'Onest', sans-serif;
	transform: none;
	border: none;
	background-color: transparent;
	cursor: pointer;

	&.link-arrow:hover {
		color: var(--color-accent-blue);
	}
}

.button {
	font-weight: 500;
	font-size: var(--font-size-body);
	line-height: 1.5;
	padding: var(--gap-12) var(--gap-16);
	border-radius: var(--border-radius-base);
	background: var(--color-accent-blue);
	color: var(--color-white);

	&.button-icon {
		display: flex;
		align-items: center;
		gap: var(--gap-12);

		&::after {
			content: '';
			width: 24px;
			height: 14px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' fill='none' viewBox='0 0 24 14'%3E%3Cpath fill='%23fff' d='M16.293.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L20.586 8H1a1 1 0 1 1 0-2h19.586l-4.293-4.293a1 1 0 0 1 0-1.414'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
		}
	}

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

.button-close {
	position: fixed;
	top: var(--gap-24);
	right: var(--gap-24);
	width: 24px;
	height: 24px;
	border: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230b1f3a' d='M22.293.293a1 1 0 1 1 1.414 1.414L13.414 12l10.293 10.293a1 1 0 1 1-1.414 1.414L12 13.414 1.707 23.707a1 1 0 1 1-1.414-1.414L10.586 12 .293 1.707A1 1 0 1 1 1.707.293L12 10.586z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.section-header {
	column-gap: calc(var(--gap-12) + var(--gap-64));
	row-gap: var(--gap-32);
	align-items: end;
	padding: var(--gap-32);
	min-height: 250px;

	& > *:first-child {
		max-width: 720px;
	}

	& > div > * + * {
		margin-top: var(--gap-32);
	}

	@media screen and (max-width: 960px) {
		min-height: auto;
	}
}

.color-text-secondary {
	color: var(--color-text-secondary);
}

.menu {
	margin-bottom: 0;

	&.uk-offcanvas-overlay::before {
		background: rgba(30, 58, 138, 0.75);
		backdrop-filter: blur(5px);
	}

	& > .uk-offcanvas-bar {
		background: var(--color-white);

		& > .uk-close {
			color: initial;
		}

		& > nav {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--gap-16);

			& > a {
				color: var(--color-text-primary);
				font-weight: 500;
				font-size: 18px;
				line-height: 1.1;
				text-decoration: none;

				&:hover {
					color: var(--color-accent-hover);
				}
			}
		}
	}
}

div:has(.form-modal) {
	margin-bottom: 0;
	background: rgba(30, 58, 138, 0.75);
	backdrop-filter: blur(5px);
}

.form-modal {
	padding: var(--gap-32);
	border-radius: var(--border-radius-l);

	& > .uk-modal-close-default {
		top: var(--gap-32);
		right: var(--gap-32);
	}

	& > form {
		padding: 0;

		& > h3 {
			margin-right: var(--gap-32);
		}
	}
}

.menu-bar {
	display: flex;
	gap: var(--gap-4);
	position: fixed;
	top: calc(var(--gap-12) + var(--gap-32));
	right: calc(var(--gap-12) + var(--gap-32));
	border-radius: calc(var(--border-radius-base) + var(--gap-4));
	padding: var(--gap-4);
	background-color: var(--color-white);
	z-index: 1;

	& > .button-menu {
		width: 48px;
		height: 48px;
		border: 1px solid var(--color-accent-blue);
		border-radius: var(--border-radius-base);
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' fill='none' viewBox='0 0 28 24'%3E%3Cpath fill='%232e6bff' d='M27 22a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zM27 11a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zM27 0a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	@media screen and (max-width: 450px) {
		& > .button {
			display: none;
		}
	}
}

.grid-2-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	@media screen and (max-width: 960px) {
		grid-template-columns: 1fr;
	}
}

header {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-blend-mode: normal, exclusion, normal;
	border-radius: var(--border-radius-l);
	min-height: 796px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;

	& > .logo {
		padding: var(--gap-32);
		position: absolute;
		left: 0px;
		top: 0px;
		background: var(--color-white);
		border-radius: 0px 0px var(--border-radius-l) 0px;
	}

	& > .text-content {
		padding: 0 var(--gap-32) var(--gap-32) var(--gap-32);
		color: var(--color-white);
		display: flex;
		flex-direction: column;
		gap: var(--gap-16);
		max-width: 920px;

		h1,
		h2,
		p {
			color: var(--color-white);
		}
	}

	& > .link-group {
		display: flex;
		align-items: center;
		gap: var(--gap-32);
		padding: var(--gap-32);
		border-radius: var(--border-radius-l) 0 0 0;
		background-color: var(--color-white);
		margin-left: auto;

		@media screen and (max-width: 768px) {
			flex-direction: column;
			align-items: flex-end;
		}
	}

	&.second-header {
		min-height: 530px;
		h1 {
			font-size: var(--font-size-h2);
		}
	}

	@media screen and (max-width: 768px) {
		min-height: 530px;
		padding-top: calc(120px + var(--gap-32));
	}

	@media screen and (max-width: 550px) {
		min-height: auto;
	}
}

.company-directions {
	gap: var(--gap-12);

	& > li {
		min-height: 395px;
		border-radius: var(--border-radius-l);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center, center, center;
		background-size: auto, auto, cover;
		background-blend-mode: normal, exclusion, normal;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		@media screen and (min-width: 1440px) {
			aspect-ratio: 694.5 / 395;
		}

		@media screen and (max-width: 450px) {
			min-height: auto;
		}

		& > .text-content {
			padding: var(--gap-32);
			color: var(--color-white);

			& > h3 {
				color: var(--color-white);
			}

			& > * + * {
				margin-top: var(--gap-16);
			}
		}

		& > .link-group {
			display: flex;
			align-items: center;
			justify-content: space-between;

			& > a,
			& > button {
				padding: var(--gap-32);
			}

			& > *:first-child {
				order: 1;
				border-radius: 0 var(--border-radius-l) 0 0;
				background-color: var(--color-white);
			}

			& > *:last-child {
				order: 2;
				color: var(--color-white);

				&::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%23ffffff' d='M18 9a1 1 0 1 1-2 0V3.414L1.707 17.707a1 1 0 1 1-1.414-1.414L14.586 2H9a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
				}

				&:hover {
					opacity: 0.75;
				}
			}
			@media screen and (max-width: 450px) {
				flex-direction: column;
				align-items: flex-start;

				& > *:first-child {
					order: 2;
				}

				& > *:last-child {
					order: 1;
				}
			}
		}
	}
}

.gray-section {
	background-color: var(--color-background-light);
	border-radius: var(--border-radius-l);

	& > ul {
		display: grid;
		overflow: hidden;
	}

	&.about-company > ul {
		grid-template-columns: repeat(3, 1fr);

		@media screen and (max-width: 960px) {
			grid-template-columns: 1fr;
		}
	}

	& > ul > li {
		display: flex;
		flex-direction: column;
		gap: var(--gap-32);
		justify-content: space-between;
		min-height: 200px;
		padding: var(--gap-32);
		margin-right: -1px;
		border-top: 1px solid var(--color-border);
		border-right: 1px solid var(--color-border);
	}
}

.advantages {
	gap: var(--gap-12);

	& > li {
		padding: var(--gap-32);
		border-radius: var(--border-radius-l);
		background-color: var(--color-background-light);
		display: flex;
		gap: var(--gap-32);
		justify-content: space-between;

		@media screen and (min-width: 1440px) {
			aspect-ratio: 694.5 / 233;
		}

		@media screen and (max-width: 450px) {
			flex-direction: column;

			& > img {
				height: 200px;
				align-self: flex-end;
			}
		}

		& > .text-content {
			display: flex;
			flex-direction: column;
			gap: var(--gap-32);
			justify-content: space-between;

			@media screen and (max-width: 450px) {
				justify-content: flex-start;
				gap: var(--gap-12);
			}
		}
	}
}

/* marquee start */

.marquee6k-wrapper {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	display: block;
}

.marquee6k {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-l);
	overflow: hidden;
	width: 100%;
}

.marquee6k__copy > ul {
	display: flex;
	align-items: center;

	& > li {
		--equal-size: calc(var(--gap-96) * 3);
		width: var(--equal-size);
		height: var(--equal-size);
		border-left: 1px solid var(--color-border);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--gap-48);

		& > img {
			width: 100%;
			max-height: 150px;
			object-fit: contain;
		}
	}
}

/* marquee end */

.form {
	gap: var(--gap-12);
	margin-bottom: var(--gap-12);

	& > .image {
		width: 100%;
		height: 100%;
		min-height: 351px;
		background-repeat: no-repeat, no-repeat;
		background-position: center, center;
		background-size: auto, cover;
		background-blend-mode: exclusion, normal;
		border-radius: var(--border-radius-l);
	}
}

form {
	width: 100%;
	padding: var(--gap-32);

	& > *:not(button) {
		margin-bottom: var(--gap-24);
	}

	& > p.font-caption {
		color: var(--color-text-secondary);

		& > a {
			color: currentColor;

			&:hover {
				text-decoration: none;
				color: var(--color-accent-blue);
			}
		}
	}
}

label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--gap-16) var(--gap-12) var(--gap-12) var(--gap-16);
	gap: var(--gap-4);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);

	& > input,
	& > textarea {
		font-family: inherit;
		font-weight: 400;
		font-size: var(--font-size-body);
		line-height: 1.3;
		border: none;
		width: 100%;

		&::placeholder {
			color: var(--color-text-secondary);
		}
	}
	&:not(:has(textarea)) {
		margin-bottom: var(--gap-12);
	}
}

main {
	display: grid;
	grid-template-columns: 75% 25%;

	& > section {
		order: 1;
		padding: var(--gap-32);

		& > * + * {
			margin-top: var(--gap-48);
		}

		& > .catalog {
			gap: var(--gap-32);

			& h4 {
				margin-bottom: var(--gap-8);
			}

			& > li > ul > li {
				color: var(--color-text-secondary);
			}
		}
	}

	& > aside {
		order: 2;
		padding: var(--gap-32) var(--gap-32) var(--gap-32) 0;

		& nav {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			& > a {
				line-height: 1.3;
				padding: var(--gap-16);
				border-radius: var(--border-radius-base);
				color: var(--color-text-secondary);
				text-decoration: none;

				&.current {
					color: var(--color-text-primary);
					background-color: var(--color-background-light);
				}
			}
		}
	}

	@media screen and (max-width: 960px) {
		grid-template-columns: 100%;

		& > section {
			order: 2;

			& > .catalog {
				grid-template-columns: repeat(2, 1fr);

				@media screen and (max-width: 550px) {
					grid-template-columns: 1fr;
				}
			}
		}

		& > aside {
			order: 1;
			padding: var(--gap-32) var(--gap-32) 0 var(--gap-32);

			& > nav {
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
	}
}

.form-check-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.form-message {
	display: flex;
	align-items: center;
	min-height: 220px;
	padding: var(--gap-32);
	border-radius: var(--border-radius-base);
	background: var(--color-background-light);
}

.form-message h3 {
	margin: 0;
}

.form-message-error {
	color: #b91c1c;
}