:root {
	--shadow-sm: 0 1px 2px rgba(19, 19, 19, .06), 0 2px 8px rgba(19, 19, 19, .05);
	--shadow-md: 0 4px 12px rgba(19, 19, 19, .06), 0 12px 32px rgba(19, 19, 19, .08);
	--shadow-lg: 0 8px 20px rgba(19, 19, 19, .08), 0 24px 48px rgba(19, 19, 19, .10);
	--ring-blue: 0 0 0 4px rgba(0, 120, 215, .18);
	--radius-card: 20px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--transition: all .25s var(--ease) 0s;
	--line-height: 1.7
}

html {
	scroll-padding-top: 0
}

::selection {
	background: var(--l-blue);
	color: var(--d-blue)
}

a {
	transition: color .2s var(--ease), opacity .2s var(--ease)
}

:focus-visible {
	outline: none;
	border-radius: 4px
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: 0
}

section > .container > h2,
section > .container > h1 {
	position: relative;
	margin-bottom: 2.25rem;
	padding-bottom: 1rem
}

section > .container > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%)
}

section {
	margin: 96px 0 64px
}

.btn {
	padding: 11px 24px;
	letter-spacing: .01em;
	box-shadow: 0 6px 16px rgba(204, 44, 17, .28);
	transform: translateY(0);
	transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}

.btn:hover {
	box-shadow: 0 10px 22px rgba(204, 44, 17, .34);
	transform: translateY(-2px)
}

.btn:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(204, 44, 17, .3)
}

.btn.disabled {
	box-shadow: none
}

.btn-hr:before,
.btn-hr:after {
	background: linear-gradient(90deg, transparent, var(--gray) 40%)
}

.btn-hr:after {
	background: linear-gradient(270deg, transparent, var(--gray) 40%)
}

header {
	border-top: 0;
	background: rgba(var(--rgb-white), .92);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 rgba(19, 19, 19, .06), 0 8px 24px rgba(19, 19, 19, .04)
}

header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--d-blue), var(--blue) 55%, var(--red))
}

#region {
	margin: 8px 0 12px;
	font-size: .85rem
}

#topbar a.phone {
	transition: color .2s var(--ease)
}

#topbar a.phone:hover {
	color: var(--d-blue)
}

#topbar a.phone span {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .7rem
}

header nav {
	border: 0;
	border-top: 1px solid var(--gray)
}

header nav li {
	background: transparent
}

header nav li {
	transition: var(--transition)
}

@media (min-width: 992px) {
	header nav ul {
		background: transparent
	}

	header nav li a {
		position: relative;
		border-top: 0;
		padding: 12px 8px;
		font-size: .88rem;
		letter-spacing: .01em
	}

	header nav li a::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 0;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--blue);
		transform: translateX(-50%);
		transition: width .25s var(--ease)
	}

	header nav li a:hover,
	header nav li a[aria-current="page"] {
		color: var(--d-blue);
		background: transparent
	}

	header nav li a:hover::after,
	header nav li a[aria-current="page"]::after {
		width: 40%
	}
}

#slider li img {
	height: 540px
}

#slider .overlay {
	display: flex;
	align-items: center;
	padding: 0;
	background: linear-gradient(100deg, rgba(var(--rgb-white), .95) 0, rgba(var(--rgb-white), .9) 36%, rgba(var(--rgb-white), .6) 52%, rgba(var(--rgb-white), 0) 72%);
	z-index: 2;
	pointer-events: none
}

#slider .overlay .container {
	width: 100%
}

#slider .overlay .text {
	width: auto;
	max-width: 650px;
	padding: 24px 0;
	color: #171b22
}

#slider .text .slide-eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	padding-left: 16px;
	border-left: 3px solid #1689e8;
	color: #147bd1;
	font-family: var(--font-bold);
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase
}

#slider .text .slide-title {
	display: block;
	max-width: 650px;
	margin: 0 0 20px;
	color: #171b22;
	font-family: var(--font-bold);
	font-size: clamp(32px, 3.1vw, 54px);
	font-weight: normal;
	line-height: 1.12;
	letter-spacing: -.035em;
	text-transform: none;
	text-wrap: balance
}

#slider .text .slide-description {
	max-width: 510px;
	margin: 0;
	color: #343b46;
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: 400;
	line-height: 1.65
}

#slider .dots li {
	transition: var(--transition)
}

.breadcrumbs {
	padding: 56px 0 44px;
	background: radial-gradient(circle at 90% 0, rgba(0, 120, 215, .10), transparent 45%), linear-gradient(180deg, var(--l-blue), var(--white))
}

.breadcrumbs h1 {
	margin-bottom: 1.25rem;
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem)
}

.breadcrumbs span {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem;
	font-size: .9rem;
	color: var(--d-gray)
}

.breadcrumbs a {
	color: var(--d-blue)
}

.breadcrumbs a:hover {
	color: var(--blue);
	text-decoration: underline
}

.annotation {
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	transition: box-shadow .3s var(--ease), transform .3s var(--ease)
}

.annotation:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px)
}

.annotation .no-img {
	height: 170px;
	padding: 0 20px;
	font-family: var(--geometria-medium);
	font-size: 1.05rem;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--d-blue);
	background: radial-gradient(circle at 100% 0, rgba(0, 120, 215, .16), transparent 55%), linear-gradient(135deg, var(--l-blue), var(--white))
}

.annotation .text {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 24px
}

.annotation .text .property {
	margin-bottom: 16px;
	font-size: .92rem;
	line-height: 1.55
}

.annotation .text .property strong,
.annotation .text .property span:first-child {
	color: var(--d-gray);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em
}

.annotation .text > a {
	margin: auto 0 0;
	padding-top: 6px;
	font-size: 1rem
}

.annotation .text > a::after {
	width: 24px;
	height: 3px
}

.annotation .text > a:hover::after,
.annotation:hover .text > a::after {
	width: 56px
}

.vacancy,
#callme,
.quote {
	border: 0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md)
}

#callme {
	padding: 28px 24px;
	background: var(--white)
}

.vacancy {
	padding: 2rem
}

.vacancy .title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.25
}

.vacancy .subtitle {
	font-size: 1.3rem
}

#callme p.title {
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	line-height: 1.35
}

.form-group input,
.form-group select,
.form-group textarea {
	border: 1.5px solid #dcdcdc;
	border-radius: 12px;
	background: var(--l-gray)
}

.form-group input:hover,
.form-group textarea:hover {
	border-color: #bdbdbd
}

.form-group > input:focus,
.form-group > select:focus,
.form-group > textarea:focus {
	border-color: var(--blue);
	background: var(--white);
	box-shadow: var(--ring-blue)
}

.form-group > input,
.form-group > select,
.form-group > textarea,
.form-group > label {
	height: 50px;
	padding: 12px 14px
}

.form-group em,
.form-group > label em {
	color: var(--red)
}

.advantages .block {
	position: relative;
	height: 160px;
	padding: 18px 20px;
	border-radius: var(--radius-card);
	font-size: .92rem;
	letter-spacing: .02em;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.advantages .block::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .22), transparent 60%);
	pointer-events: none
}

.advantages .block:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg)
}

.advantages .block.yellow {
	background-color: var(--d-yellow)
}

.advantages .block.exclamation,
.advantages .block.cloth,
.advantages .block.ruble,
.advantages .block.education {
	background-size: 72px 72px;
	background-position: bottom 4px right 8px
}

.advantages .block.exclamation {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v.01' /%3E%3Cpath d='M12 15v-10' /%3E%3C/svg%3E")
}

.advantages .block.cloth {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6a2 2 0 1 0 -4 0c0 1.667 .67 3 2 4h-.008l7.971 4.428a2 2 0 0 1 1.029 1.749v.823a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-.823a2 2 0 0 1 1.029 -1.749l7.971 -4.428' /%3E%3C/svg%3E")
}

.advantages .block.ruble {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19v-14h6a3 3 0 0 1 0 6h-8' /%3E%3Cpath d='M14 15h-8' /%3E%3C/svg%3E")
}

.advantages .block.education {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9l-10 -4l-10 4l10 4l10 -4v6' /%3E%3Cpath d='M6 10.6v5.4a6 3 0 0 0 12 0v-5.4' /%3E%3C/svg%3E")
}

.advantages > .container > h4,
.advantages > .container > p,
.advantages > .container > ul {
	max-width: 52rem
}

.advantages > .container > h4 {
	margin: 2.25rem 0 .8rem !important;
	font-family: var(--font-semibold);
	font-size: 1.3rem;
	line-height: 1.35;
	color: var(--black);
	text-wrap: balance
}

.advantages > .container > .row + h4 {
	margin-top: 2.75rem !important
}

.advantages > .container > p,
.advantages > .container > ul {
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #2b2b2b;
	text-wrap: pretty;
	hyphens: none
}

.advantages > .container > p {
	margin: 0 0 1rem
}

.advantages > .container > p strong,
.advantages > .container > p b {
	font-family: var(--font-semibold);
	font-weight: normal;
	color: var(--black)
}

.advantages > .container > ul {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none
}

.advantages > .container > ul > li {
	position: relative;
	margin: 0 0 .55rem;
	padding-left: 1.5rem
}

.advantages > .container > ul > li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .72em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--blue)
}

.tabs label.tab {
	border: 1.5px solid transparent;
	border-radius: var(--radius-card);
	box-shadow: inset 0 0 0 1000px rgba(var(--rgb-white), .92), var(--shadow-sm)
}

.tabs label.tab:hover,
.tabs label.tab.active {
	box-shadow: inset 0 0 0 1000px rgba(var(--rgb-white), .55), var(--shadow-md)
}

.tabs label.tab.active {
	border-color: var(--green)
}

.quote {
	padding: 1.4rem 1.6rem
}

.review img {
	border-radius: 50%;
	box-shadow: var(--shadow-md)
}

.slider.gallery a,
.slider.substation a {
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.slider.gallery a:hover,
.slider.substation a:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--shadow-md)
}

.slider.gallery img,
.slider.substation img {
	transition: transform .5s var(--ease)
}

.slider.gallery a:hover img,
.slider.substation a:hover img {
	transform: scale(1.06)
}

.useful .item {
	padding: 20px 16px;
	border-radius: var(--radius-card);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.useful .item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.useful img {
	height: 80px;
	margin-bottom: 16px
}

.useful a {
	color: var(--d-blue)
}

.useful a:hover {
	color: var(--blue)
}

.contact .block {
	margin: 0;
	padding: 36px 20px;
	border-radius: var(--radius-card);
	background: linear-gradient(135deg, var(--l-blue), var(--white));
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

div[class*="col-"].contact:nth-child(even) .block {
	background: linear-gradient(135deg, var(--l-gray), var(--white))
}

.contact .block:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.contact h3 {
	font-size: 1.1rem;
	margin: .5rem 0 .75rem
}

#wanttowork {
	box-shadow: 0 10px 28px rgba(204, 44, 17, .38)
}

#popup .wrapper {
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(28px) scale(.97);
	transition: opacity .3s var(--ease), transform .35s var(--ease)
}

#popup ul li {
	border-radius: 10px;
	transition: background .2s var(--ease), color .2s var(--ease)
}

.page-link {
	margin: 0 3px;
	border: 0;
	border-radius: 12px !important;
	color: var(--d-blue);
	background: var(--l-blue)
}

.page-link:hover {
	background: var(--blue);
	color: var(--white)
}

.page-item.active .page-link {
	background: var(--blue);
	color: var(--white);
	box-shadow: 0 6px 14px rgba(0, 120, 215, .32)
}

footer {
	margin-top: 64px;
	padding-top: 64px;
	background: radial-gradient(circle at 0 0, rgba(0, 120, 215, .06), transparent 40%), var(--l-gray)
}

footer a {
	transition: var(--transition)
}

footer #copyright {
	background: linear-gradient(90deg, var(--d-blue), var(--blue))
}

.error-page .error-code {
	background: linear-gradient(135deg, var(--red), var(--d-red));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent
}

#message {
	border-radius: 14px;
	box-shadow: var(--shadow-lg)
}

@media (max-width: 991px) {
	section {
		margin: 64px 0 40px
	}

	#slider li img {
		height: 420px
	}

	#slider .overlay {
		background: linear-gradient(180deg, rgba(var(--rgb-white), .92) 0, rgba(var(--rgb-white), .82) 55%, rgba(var(--rgb-white), .35) 100%)
	}

	header nav::after {
		content: "";
		position: absolute;
		top: 100%;
		left: -100vw;
		width: 300vw;
		height: 100vh;
		z-index: -1;
		background: rgba(var(--rgb-black), .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s var(--ease), visibility .25s var(--ease)
	}

	header nav.open::after {
		opacity: 1;
		visibility: visible
	}

	.breadcrumbs {
		padding: 40px 0 28px
	}

	.vacancy {
		padding: 1.5rem
	}
}

@media (max-width: 767px) {
	#slider .overlay .text {
		max-width: 100%;
		padding: 20px 0
	}

	#slider .text .slide-eyebrow {
		max-width: 100%;
		margin-bottom: 14px;
		font-size: 10px;
		letter-spacing: .05em
	}

	#slider .text .slide-title {
		max-width: 450px;
		margin-bottom: 14px;
		font-size: clamp(27px, 6.5vw, 38px);
		line-height: 1.15;
		letter-spacing: -.025em
	}

	#slider .text .slide-description {
		max-width: 400px;
		font-size: 15px;
		line-height: 1.5
	}
}

@media (max-width: 575px) {
	section > .container > h2 {
		margin-bottom: 1.75rem
	}

	.advantages .block {
		height: 130px
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important
	}
}

.slider .owl-stage-outer {
	padding: 10px 12px 30px;
	margin: -10px -12px -22px
}

.advantages > .container > .row {
	margin-bottom: 2rem
}

#popup {
	background: rgba(var(--rgb-black), .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity .3s var(--ease), visibility .3s var(--ease)
}

#popup.show .wrapper.active {
	opacity: 1;
	transform: none
}

#popup .close {
	width: 2rem;
	height: 2rem;
	top: .75rem;
	right: .75rem;
	border-radius: 50%;
	transition: background-color .2s var(--ease), transform .2s var(--ease)
}

#popup .close:hover {
	background-color: var(--gray);
	transform: rotate(90deg)
}

.ts-wrapper {
	min-height: 0
}

.ts-control,
.ts-control input,
.ts-dropdown {
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--black)
}

.form-group .ts-wrapper.single .ts-control {
	height: 50px;
	padding: 20px 44px 4px 14px !important;
	flex-wrap: nowrap;
	align-items: center;
	border: 1.5px solid #dcdcdc;
	border-radius: 12px;
	background: var(--l-gray);
	box-shadow: none;
	cursor: pointer;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease)
}

.form-group .ts-wrapper.single .ts-control:hover {
	border-color: #bdbdbd
}

.form-group .ts-wrapper.focus .ts-control,
.form-group .ts-wrapper.dropdown-active .ts-control {
	border-color: var(--blue);
	border-radius: 12px;
	background: var(--white);
	box-shadow: var(--ring-blue)
}

.ts-wrapper.single .ts-control > .item {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.ts-wrapper.single .ts-control > input {
	min-width: 0 !important
}

.ts-wrapper.single .ts-control::after {
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border: 0;
	border-right: 2px solid var(--d-gray);
	border-bottom: 2px solid var(--d-gray);
	transform: rotate(45deg);
	transition: transform .25s var(--ease), border-color .2s var(--ease), margin .25s var(--ease)
}

.ts-wrapper.single.dropdown-active .ts-control::after {
	margin-top: -2px;
	border-width: 0 2px 2px 0;
	border-color: var(--blue);
	transform: rotate(-135deg)
}

.form-group > label {
	z-index: 2
}

.ts-dropdown {
	z-index: 20;
	margin-top: 8px;
	padding: 6px;
	border: 0;
	border-radius: 14px;
	background: var(--white);
	box-shadow: var(--shadow-lg);
	animation: ts-dropdown-in .18s var(--ease)
}

.ts-dropdown .option {
	padding: 10px 12px;
	border-radius: 10px;
	transition: background .15s var(--ease), color .15s var(--ease)
}

.ts-dropdown .active {
	background: var(--l-blue);
	color: var(--d-blue)
}

.ts-dropdown .selected {
	font-family: var(--font-medium)
}

.ts-dropdown .no-results {
	padding: 10px 12px;
	color: var(--d-gray)
}

.ts-dropdown-content {
	max-height: 260px;
	scrollbar-width: thin;
	scrollbar-color: var(--d-gray) transparent
}

.ts-wrapper.single .ts-control > input::placeholder,
.ts-control > input::placeholder {
	color: var(--d-gray)
}

@keyframes ts-dropdown-in {
	from {
		opacity: 0;
		transform: translateY(-6px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px
}

.theme-switch span {
	margin-right: 6px;
	opacity: .8
}

.theme-switch a {
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	opacity: 1;
	transition: background .2s var(--ease), color .2s var(--ease)
}

.theme-switch a:hover {
	background: rgba(var(--rgb-white), .16)
}

.theme-switch a.active {
	background: var(--white);
	color: var(--d-blue);
	text-decoration: none
}