html:has(.scrollPage) header {
	position: absolute;
}
header {
	padding-top: 30px;
	.wrapper {
		justify-content: end;
		> :is(.logo, .location) {
			display: none;
		}
		> .buttons svg {
			fill: var(--text-color);
		}
	}
	.return {
		position: absolute;
		top: 40px;
		right: 610px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 24px;
		aspect-ratio: 1 / 1;
		cursor: pointer;
		z-index: 3;
		&::before {
			font-family: icon;
			content: '\e90e';
			font-size: 24px;
			line-height: 1;
			cursor: pointer;
			color: var(--text-color);
			transition: color .2s linear;
		}
	}
}
footer {
	display: none;
}
.service {
	padding: 70px 0 0 0;
	position: relative !important;
	z-index: 9;
	& * {
		color: var(--text-color);
	}
	&:after {
		content: '';
		position: absolute;
		height: 100%;
		top: 0;
		right: 0;
		width: 50%;
		box-shadow: -4px 0px 12px 0px rgba(102, 103, 103, 0.1);
		z-index: 1;
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 3;
		.title {
			max-width: 670px;
			display: grid;
			grid-template-columns: 70px auto 1fr;
			gap: 20px;
			align-items: center;
			color: var(--text-color);
			font-family: Lato;
			font-size: 32px;
			font-weight: 300;
			line-height: 100%;
			text-transform: uppercase;
			margin-bottom: 68px;
			&::before,
			&::after {
				content: '';
				height: 1px;
				width: 100%;
				background-color: var(--dark);
			}
		}
		.content {
			display: grid;
			grid-template-columns: 1fr 690px;
			.img {
				width: 100%;
				aspect-ratio: 1 / 1;
				overflow: hidden;
				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
					object-position: top;
				}
			}
			.info {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 30px;
				padding-left: 34px;
				nav {
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					gap: 18px 12px;
					width: 100%;
					margin-top: 10px;
					padding: 10px 10px 10px 20px;
					a {
						font-family: Lato;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
						text-transform: uppercase;
						cursor: pointer;
						transition: .3s linear;
						&.active {
							font-weight: 700;
						}
					}
				}
				.service-list {
					display: flex;
					flex-direction: column;
					gap: 18px;
					width: 100%;
					padding: 0 10px;
					.spoiler {
						display: flex;
						flex-direction: column;
						width: 100%;
						transition: .3s linear;
						padding: 0 10px;
						border-radius: 3px;
						margin-bottom: 0;
						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;
							cursor: pointer;
							&::after {
								font-family: icon;
								width: 32px;
								aspect-ratio: 1 / 1;
								display: flex;
								justify-content: center;
								align-items: center;
								content: '\e90f';
								transform: rotate(-90deg);
								font-size: 16px;
								transition: .3s linear;
								color: var(--text-color);
							}
							h3 {
								font-family: Lato;
								font-size: 20px;
								font-weight: 400;
								line-height: 80%;
								transition: color .3s linear;
							}
						}
						.box {
							overflow: hidden;
							display: flex;
							flex-direction: column;
							gap: 24px;
							width: 100%;
							max-height: 0px;
							transition: .3s linear;
							font-weight: 300;
							line-height: normal;
							:where(p, li, div) {
								font-size: inherit;
								font-weight: inherit;
								line-height: inherit;
							}
							> :where(p, ul, div):first-child {
								margin-top: 24px;
							}
							ul {
								display: flex;
								flex-direction: column;
								gap: 10px;
							}
							div.bottom {
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 100%;
								margin: 12px 0 16px;
								span {
									line-height: 1.25;
								}
								.transparent-btn {
									border-color: #2d2f2e;
								}
							}
						}
						&.open {
							padding-top: 10px;
							margin-bottom: 22px;
							box-shadow: 0px 6px 10px 0px rgba(45, 47, 46, 0.1);
							.top::after {
								transform: rotate(90deg);
							}
							.box {
								max-height: 200px;
							}
						}
					}
				}
			}
		}
	}
}
.seo-text {
	margin-top: 30px;
}
@media screen and (max-width: 1500px) {
	header {
		padding-top: 40px;
		.return {
			right: calc(50% - 55px);
		}
	}
	main:after {
		right: auto;
		left: calc(50% - 40px);
		width: calc(50% + 40px);
	}
	.service {
		padding: 80px 0 0 0;
		.wrapper {
			display: flex;
			flex-direction: column;
			.title {
				margin-left: -60px;
				max-width: 600px;
			}
			.content {
				grid-template-columns: 0.467fr 0.533fr;
				.img {
					aspect-ratio: 540 / 570;
				}
				.info nav {
					gap: 18px 30px;
				}
				.spoiler {
					padding-left: 50px;
					nav {
						flex-wrap: wrap;
						gap: 10px 12px;
						justify-content: start;
					}
					.service-list {
						gap: 12px;
						.item {
							.top h3 {
								font-size: 15px;
								line-height: 105%;
							}
							.box p {
								font-size: 15px;
							}
							&.open {
								margin-bottom: 18px;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1279px) {
	header {
		width: fit-content;
		left: initial;
		right: 0;
		padding-top: 20px;
		.return {
			position: static;
			margin-right: 20px;
			&::before {
				font-size: 20px;
			}
		}
		.wrapper > .buttons:not(.mob) > *:not(.burger) {
			display: flex;
		}
	}
	main:after {
		display: none;
	}
	.service {
		padding: 60px 0 0 0;
		&:after {
			width: 100%;
		}
		.wrapper {
			display: flex;
			flex-direction: column;
			.title {
				margin-left: -30px;
				max-width: 62%;
				font-size: 24px;
				line-height: 32px;
			}
			.content {
				display: flex;
				flex-direction: column;
				gap: 40px;
				padding-bottom: 65px;
				.img {
					margin-inline: -30px;
					width: calc(100% + 60px);
					aspect-ratio: 7 / 4;
					img {
						object-position: center 15%;
					}
				}
				.info {
					padding-left: 0;
					width: 100%;
					nav {
						justify-content: center;
						gap: 18px 23px;
					}
					.service-list {
						gap: 16px;
						.item {
							.top h3 {
								font-size: 18px;
								line-height: 88%;
							}
							.box p {
								font-size: 16px;
							}
							&.open {
								margin-bottom: 16px;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 767px) {
	header {
		padding: 10px 10px 0 0;
		.return {
			width: 20px;
			&::before {
				font-size: 18px;
			}
		}
	}
	.vertical header {
		padding: 10px 20px 0;
	}
	.service {
		padding: 48px 0 0 0;
		.wrapper {
			.title {
				margin-left: -10px;
				grid-template-columns: 30px auto 1fr;
				max-width: calc(100% - 170px);
				font-size: 20px;
				line-height: 24px;
				margin-bottom: 20px;
				gap: 10px;
			}
			.content {
				display: flex;
				flex-direction: column;
				gap: 0;
				.img {
					margin-left: -10px;
					margin-right: -10px;
					width: calc(100% + 20px);
					/* aspect-ratio: 39 / 16; */
				}
				.info {
					padding-left: 0;
					width: 100%;
					gap: 24px;
					nav {
						gap: 18px 20px;
						justify-content: center;
						padding: 10px 0;
						a {
							font-size: 12px;
							line-height: 14px;
						}
					}
					.service-list {
						gap: 10px;
						.spoiler {
							.top h3 {
								font-size: 14px;
								line-height: 32px;
							}
							.box {
								gap: 0;
								font-size: 13px;
							}
							&.open {
								margin-bottom: 14px;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1024px) and (max-height:431px) {
	header {
		padding-top: 10px;
		> .wrapper {
			height: initial;
			gap: 2px 10px;
		}
		.return {
			top: 0;
		}
	}
	.service {
		padding: 11px 0 0 0;
		.wrapper .content .img {
			aspect-ratio: 35 / 10;
		}
	}
}
@media screen and (hover: hover) {
	header .return:hover::before {
		color: var(--hover);
	}
	.service .wrapper .content .info {
		nav:has(a:hover) a {
			opacity: 0.3;
			&:hover {
				opacity: 1;
			}
		}
		.service-list .spoiler .top:hover {
			&::after,
			h3 {
				color: var(--hover);
			}
		}
	}
}