:root {
	--font: 'Museo Sans Cyrl', sans-serif;
	--font-secondary: 'Merriweather', sans-serif;
	--clr-black: #191919;
	--clr-blue: #4269f5;
	--clr-white: #fff;
	--clr-grey: #929396;
	--clr-red: #ed1e24;
	--clr-red-gradient: radial-gradient(314.73% 103.43% at 56.09% 57.29%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.00) 43.74%), #ED1E24;

	--clr-bg-grey: #f5f5f5;
	--clr-bg-white: #fff;
	--clr-border: rgba(146, 147, 150, 0.35);

	--fs-general: 17;
}

html {
	overflow-x: hidden;
	scroll-padding-top: 140px;
}

body {
	font-family: var(--font);
	font-weight: 500;
	font-size: calc(var(--fs-general) * 1px);
	line-height: 135%;
	color: var(--clr-black);
	background: var(--clr-bg-white);
	// overflow-x: hidden;
}

html.fixed,
body.fixed {
	overflow: hidden;
}

*[class*='__container']:not(.fancybox__container) {
	width: 100%;
	max-width: 1284px;
	margin: 0 auto;
	padding: 0 42px;
}

a {
	color: var(--clr-black);
	text-decoration: none;

	&.modal__open {
		text-decoration: underline;
	}
}

p {

	b,
	strong {
		font-weight: 700;
	}
}

h1 {
	font-size: 62px;
	font-size: calc((var(--fs-general) + 43) * 1px);
	font-weight: 900;
	line-height: 110%;
}

h2 {
	font-size: calc((var(--fs-general) + 23) * 1px);
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 1.2px;
}

hr {
	border: none;
	width: 100%;
	height: 1px;
	background: var(--clr-border)
}

a {
	&.btn {
		text-decoration: none;
	}
}

/* Sections */
.section {
	padding-top: 112px;
	padding-bottom: 112px;

	&:last-child {
		&:not(.similar) {
			padding-bottom: 112px !important;
		}
	}

	&--nopadding {
		padding: 0 !important;
	}

	&--bg {
		background: var(--clr-bg-grey);
	}

	&__header {
		margin-bottom: 46px;

		&--jcsb {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 42px;
		}
	}

	&__title {
		p {
			font-size: 40px;
			font-weight: 700;
			line-height: 120%;
			letter-spacing: 1.2px;
		}

		&--540 {
			max-width: 540px;
		}

		&--620 {
			max-width: 620px;
		}

		&--720 {
			max-width: 720px;
		}

		&--840 {
			max-width: 840px !important;
		}

		&--920 {
			max-width: 920px !important;
		}

		&--center {
			text-align: center;
		}

		&-46 {
			h1 {
				font-size: calc((var(--fs-general) + 29) * 1px);
			}
		}
	}

	&__grid {
		display: grid;
		gap: 24px;

		&-2 {
			grid-template-columns: repeat(auto-fit, minmax(490px, 1fr));

			@media screen and (max-width: 1070px) {
				grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
			}
		}

		&-3 {
			grid-template-columns: repeat(3, minmax(320px, 1fr));

			@media screen and (max-width: 1070px) {
				grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
			}
		}

		&-4 {
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		}
	}

	&__item {
		border-radius: 16px;
		background: var(--clr-bg-grey);
		padding: 32px;

		p {
			font-size: calc((var(--fs-general) + 3)* 1px);
			font-weight: 700;
			line-height: 130%;
			margin-right: 16px;
		}

		span {
			font-size: calc((var(--fs-general) - 1)* 1px);
			font-weight: 500;
			line-height: 135%;
			color: var(--clr-grey);
			margin-right: 10px;
		}
	}

	&__links {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 22px 32px;
		margin-top: 42px;

		a {
			font-weight: 500;
			line-height: 125%;
			letter-spacing: 0.175px;
			position: relative;
			transition: color 0.2s ease-in-out;

			&::after {
				content: '';
				position: absolute;
				bottom: -2px;
				left: 0;
				width: 100%;
				height: 1.5px;
				background: var(--clr-blue);
				transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out;
			}

			@media (hover:hover) {
				&:hover {
					color: var(--clr-blue);

					&::after {
						bottom: -5px;
						opacity: 0.3;
					}
				}
			}
		}
	}

	&__thumbnail {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 620px;
		border-radius: 24px;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;

		img {
			width: auto;
			min-width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__pagenavi {
		margin-top: 74px;
	}
}

/* Buttons */
.btn {
	padding: 24px 58px;
	border-radius: 90px;
	font-size: calc((var(--fs-general) + 1) * 1px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.54px;
	color: var(--clr-white);
	text-align: center;

	&--red {
		background: var(--clr-red-gradient);
	}

	&--blue {
		background: var(--clr-blue);
	}

	&--white {
		background: var(--clr-bg-white);
		color: var(--clr-black);
	}

	&--border {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		background: none;
		font-size: calc((var(--fs-general) - 1) * 1px);
		font-weight: 700;
		color: var(--clr-black);
		padding: 22px;
		border-radius: 40px;
		border: 1px solid var(--clr-border);
		position: relative;
		transition: gap 0.2s ease-in-out, background 0.1s ease-in-out,
			border-color 0.1s ease-in-out;

		&::after {
			content: '';
			display: inline-block;
			width: 21px;
			height: 18px;
			background: url('../icons/i-btn-arrow.svg') center no-repeat;
		}

		@media (hover:hover) {
			&:hover {
				gap: 26px;
				background: var(--clr-bg-white);
				border-color: #fff;
			}
		}
	}

	&--icon {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 14px;
		padding: 37px 58px;
		transition: gap 0.15s ease-in-out;

		&::after {
			content: '';
			width: 20px;
			min-width: 20px;
			height: 20px;
			background: url('../icons/i-arrow.svg') center no-repeat;
			opacity: .5;
			transition: opacity 0.3s ease-in-out;
		}

		@media (hover:hover) {
			&:hover {
				gap: 22px;

				&::after {
					opacity: 1;
				}
			}
		}
	}
}

/* Section After BG */
.services,
.quiz,
.reviews,
.team {
	.section__container {
		position: relative;
		z-index: 1;

		&::after {
			content: '';
			width: 765px;
			height: 765px;
			transform: rotate(-15deg);
			flex-shrink: 0;
			border-radius: 900px;
			opacity: 0.4;
			background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0.00) 85.65%);
			position: absolute;
			left: -140px;
			top: -60px;
			z-index: -2;
		}
	}
}

.cases,
.why,
.steps,
.page__company .page__hero,
.page__reviews .page__hero {
	.section__container {
		position: relative;
		z-index: 1;

		&::after {
			content: '';
			width: 644px;
			height: 644px;
			transform: rotate(15deg);
			flex-shrink: 0;
			border-radius: 900px;
			opacity: 0.3;
			background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0.00) 85.65%);
			position: absolute;
			right: -110px;
			top: -50px;
			z-index: -2;
		}
	}
}

/* Header */
.header {
	width: 100%;
	background: var(--clr-bg-grey);
	padding: 32px 0;
	padding: 24px 0;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 155;
	transition: padding 0.15s ease-in-out;

	&.sticky {
		padding: 20px 0;
		background: var(--clr-bg-white);
		box-shadow: 0 9px 26px rgb(51 51 51 / 4%);
		border-bottom: 1px solid #efefef;
	}

	&__container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		position: relative;
	}

	&__logo {
		position: relative;
		z-index: 355;
	}

	&__nav {
		&-contacts {
			display: none;
		}

		&-list {
			ul {
				display: flex;
				align-items: center;

				li {
					padding-left: 12px;
					padding-right: 12px;

					&.current-menu-item {
						a {
							&::after {
								width: 100%;
							}
						}
					}

					a {
						position: relative;
						padding-top: 24px;
						padding-bottom: 24px;

						&::after {
							content: '';
							position: absolute;
							bottom: 20px;
							left: 0;
							width: 0;
							height: 2px;
							background: var(--clr-red);
							transition: width 0.2s ease-in-out;
						}

						@media (hover:hover) {
							&:hover {
								&::after {
									width: 100%;
								}
							}
						}
					}

					&.submenu {
						position: relative;

						&::after {
							content: '';
							display: inline-block;
							width: 8px;
							height: 8px;
							background: url('../icons/i-submenu.svg') center no-repeat;
							margin-left: 2px;
							position: relative;
							bottom: 1px;
							transition: transform 0.22s ease-in-out, background 0.1s ease-in-out;
						}

						&:hover {
							&::after {
								transform: rotate(180deg);
								background: url('../icons/i-submenu-hover.svg') center no-repeat;
							}
						}

						&>a {
							&:after {
								display: none;
							}
						}

						ul {
							display: none;
							flex-direction: column;
							align-items: flex-start;
							gap: 0;
							min-width: 240px;
							position: absolute;
							top: 35px;
							left: 0;
							background: var(--clr-bg-white);
							box-shadow: 0 9px 26px rgb(51 51 51 / 10%);
							border-bottom: 1px solid #e1e1e1;
							padding-top: 15px;
							padding-bottom: 15px;
							border-radius: 12px;

							li {
								padding-left: 24px;
								padding-right: 24px;
								width: 100%;

								&:has(b) {
									a {
										font-size: calc((var(--fs-general) - 1) * 1px);
										font-weight: 700;
										padding-bottom: 6px;
									}

									&:not(:first-child) {
										padding-top: 12px;
										margin-top: 12px;
										border-top: 1px solid var(--clr-border);
									}
								}

								@media (hover:hover) {
									&:hover {
										a {
											color: var(--clr-red);
										}
									}
								}

								a {
									display: flex;
									width: max-content;
									font-size: calc((var(--fs-general) - 1) * 1px);
									font-weight: 500;
									padding-top: 2px;
									padding-bottom: 2px;
									transition: color 0.15s ease-in-out;

									&::after {
										bottom: 4px;
										display: none;
									}
								}
							}
						}

						&:hover {
							ul {
								display: flex;
							}
						}
					}
				}
			}

			&.visible {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background: var(--clr-bg-white);
				z-index: 255;
				// margin-top: 40px;
				padding-top: 40px;
				padding: 0 24px;

				ul {
					flex-direction: column;
					width: 100%;
					justify-content: center;
					align-items: flex-start;
					gap: 3.5vh;

					li {
						padding-left: 0;

						a {
							padding: 16px 10px;
							padding-left: 0;
							font-size: calc((var(--fs-general) + 4)* 1px);
						}

						&.submenu {
							&:hover {
								ul {
									position: fixed;
									width: calc(100vw - 48px);
									height: calc(100vh - 48px);
									top: 24px;
									left: 24px;
									z-index: 455;
									background: var(--clr-bg-white);
									box-shadow: none;
									overflow-y: scroll;
									padding-top: 130px;
									padding-bottom: 140px;
									margin-top: 60px;
									margin-bottom: 20px;
									border-radius: 0;

									li {
										font-size: calc((var(--fs-general) + 2)* 1px) !important;
										padding-left: 0;
										padding-right: 0;

										a {
											width: 100%;
											font-size: calc((var(--fs-general) + 2)* 1px) !important;
											line-height: 135%;
										}
									}
								}
							}
						}
					}
				}

				.header__nav-contacts {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					gap: 14px;
					margin-top: 32px;

					a.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: calc((var(--fs-general) + 1)* 1px);
						width: auto;
						height: 48px;
						font-weight: 500;
						padding: 0;
						padding-left: 20px;
						padding-right: 20px;
					}
				}

				.header__socials {
					display: flex;
					gap: 10px;
				}

				.header__tel {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					&-bottom {
						display: flex;
						align-items: center;
						gap: 12px;
					}

					a {
						display: flex;
						font-size: calc((var(--fs-general) + 7)* 1px);
					}

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: auto;
						height: 48px;
						font-weight: 500;
						padding-left: 20px;
						padding-right: 20px;
						background: none;
						border: 1px solid var(--clr-black);

						&::before {
							display: none;
						}

						p {
							display: inline-block;
							font-size: calc((var(--fs-general) + 1)* 1px);
							font-weight: 500;
							color: var(--clr-black)
						}
					}
				}
			}
		}

		&-burger {
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 52px;
			height: 52px;
			border-radius: 60px;
			padding: 16px 13px;
			background: var(--clr-red);
			position: absolute;
			right: 42px;
			bottom: 1px;
			z-index: 355;

			&::after {
				content: '';
				position: absolute;
				width: 16px;
				height: 16px;
				background: url('../icons/i-burger-close.svg') center no-repeat;
				background-size: cover;
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.1s ease-in-out
			}

			&.opened {
				&::after {
					opacity: 1;
				}

				span {
					opacity: 0;
				}
			}

			span {
				display: inline-block;
				width: 100%;
				height: 2px;
				border-radius: 10px;
				background: var(--clr-bg-white);
				transition: opacity 0.1s ease-in-out
			}
		}
	}

	&__contacts {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 355;
	}

	&__socials {
		margin-right: 36px;

		a {
			transition: opacity 0.2s ease-in-out;

			@media (hover:hover) {
				&:hover {
					opacity: 0.78;
				}
			}
		}
	}

	&__tel {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		a {
			text-align: right;
			font-size: calc((var(--fs-general) + 7) * 1px);
			font-weight: 700;
			letter-spacing: -0.72px;
			transition: color 0.15s ease-in-out;

			@media (hover:hover) {
				&:hover {
					color: var(--clr-red);
				}
			}
		}

		button {
			font-size: calc((var(--fs-general) - 1) * 1px);
			font-weight: 500;
			line-height: normal;
			color: var(--clr-blue);
			margin-top: 8px;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -2px;
				left: 0;
				width: 100%;
				height: 1px;
				background: var(--clr-blue);
				transition: bottom 0.15s ease-in-out, opacity 0.15s ease-in-out;
			}

			@media (hover:hover) {
				&:hover {
					&::after {
						bottom: -6px;
						opacity: .3;
					}
				}
			}
		}
	}
}

/* Hero */
.hero {
	display: flex;
	// align-items: flex-end;
	padding-top: 160px;
	padding-bottom: 42px;
	overflow: hidden;

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

	.section__container {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
		z-index: 1;
	}

	&__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 50px;
		width: 100%;
		max-width: 620px;
		max-width: 720px;
	}

	&__title {}

	&__desc {
		display: flex;
		align-items: center;
		max-width: 440px;

		&::before {
			content: '';
			width: 32px;
			min-width: 32px;
			height: 32px;
			background: url('../icons/i-check-blue.svg') center no-repeat;
			margin-right: 12px;
		}
	}

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

		p {
			color: var(--clr-grey);
			font-weight: 500;
			line-height: 130%;
			max-width: 400px;

			b {
				font-weight: 500;
				color: var(--clr-black);
			}
		}

		a,
		button {
			margin-top: 24px;
		}
	}

	&__privilege {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 26px;
		padding: 24px;
		border-radius: 20px;
		background: var(--clr-bg-white);
		margin-top: 90px;

		&-item {
			display: flex;
			align-items: center;
			gap: 14px;
			min-width: 190px;
			max-width: 330px;

			p {
				font-size: calc((var(--fs-general) - 1) * 1px);
				font-weight: 500;
				line-height: 130%;
			}
		}
	}

	&__bg {
		position: absolute;
		right: 0;
		bottom: -46px;
		z-index: -1;
		pointer-events: none;

		&::after {
			content: '';
			width: 765px;
			height: 765px;
			transform: rotate(30deg);
			flex-shrink: 0;
			border-radius: 900px;
			opacity: 0.5;
			background: linear-gradient(180deg, #E6E6E7 0%, rgba(255, 255, 255, 0.00) 85.65%);
			position: absolute;
			left: -30px;
			bottom: -100px;
			z-index: -2;
			animation: herobgafter 2s ease-in-out;
		}

		@keyframes herobgafter {
			0% {
				transform: scale(0) rotate(0deg);
				opacity: 0.1;
			}

			100% {
				transform: scale(1) rotate(30deg);
				opacity: 0.5;
			}
		}

		img {
			pointer-events: none;
		}
	}

	&__expert {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		width: 210px;
		padding: 18px 22px;
		border-radius: 12px;
		background: var(--clr-bg-white);
		position: absolute;
		left: -10px;
		bottom: 330px;
		z-index: 2;

		p {
			font-size: calc((var(--fs-general) + 5) * 1px);
			font-weight: 700;
			line-height: 110%;
			letter-spacing: 0.44px;
		}

		span {
			font-size: calc((var(--fs-general) - 1) * 1px);
			font-weight: 500;
			line-height: 130%;
			color: var(--clr-grey);
		}
	}
}

/* Privilege */
.privilege {
	&:has(+ .why) {
		padding-bottom: 0;
	}

	&__item {
		display: flex;
		flex-direction: column;
		gap: 14px;

		img {
			margin-bottom: 6px;
		}

		// p {
		// 	font-size: calc((var(--fs-general) + 3) * 1px);
		// 	font-weight: 700;
		// 	line-height: 130%;
		// 	margin-right: 16px;
		// }

		// span {
		// 	font-size: calc((var(--fs-general) - 1) * 1px);
		// 	font-weight: 500;
		// 	line-height: 135%;
		// 	color: var(--clr-grey);
		// 	margin-right: 10px;
		// }
	}
}

/* Services */
.services {
	&__rows {
		margin-top: 72px;
	}

	&__row {
		&:not(:last-child) {
			padding-bottom: 32px;
			margin-bottom: 32px;
			border-bottom: 1px solid #E7E7E7;
		}

		&-title {
			margin-bottom: 20px;

			p {
				font-size: calc((var(--fs-general) + 3) * 1px);
				font-weight: 600;
				line-height: 125%;
				letter-spacing: 0.4px;
			}
		}

		&-items {}

		&-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			padding: 24px;
			border-radius: 14px;
			background: var(--clr-bg-white);
			transition: transform 0.2s ease-in-out;

			@media (hover:hover) {
				&:hover {
					transform: scale(1.03);

					.services__item-btn {
						background: var(--clr-red-gradient);

						&::after {
							background: url('../icons/i-services-arrow-hover.svg') center no-repeat;
							transform: rotate(90deg);
						}
					}
				}
			}
		}
	}

	&__item {

		&-content {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 46px;
			width: 100%;

			p {
				font-size: calc((var(--fs-general) + 1) * 1px);
				font-weight: 500;
				line-height: 140%;
			}
		}

		&-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			min-width: 42px;
			height: 42px;
			border-radius: 8px;
			background: var(--clr-bg-grey);
			position: relative;
			transition: background 0.2s ease-in-out;

			&::after {
				content: '';
				position: absolute;
				width: 16px;
				height: 16px;
				background: url('../icons/i-services-arrow.svg') center no-repeat;
				transition: transform 0.2s ease-in-out;
			}
		}
	}
}

/* Why */
.why {
	&__item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 12px 0 12px;
		border-radius: 20px;
		background: var(--clr-bg-white);
		box-shadow: 0px 12px 72px 0px rgba(137, 137, 137, 0.16);

		&-header {
			display: flex;
			align-items: flex-end;
			width: 100%;
			height: 200px;
			padding: 24px;
			border-radius: 16px;
			overflow: hidden;
			position: relative;
			z-index: 1;
		}

		&-bottom {
			display: flex;
			align-items: center;
			gap: 36px;
		}

		&-number {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 1;

			&::after {
				content: '';
				width: 19px;
				height: 56px;
				background: url('../icons/i-why-after.svg') center no-repeat;
				position: absolute;
				left: 100%;
			}

			&::before {
				content: '';
				width: 142px;
				height: 142px;
				transform: rotate(90deg);
				position: absolute;
				background: linear-gradient(180deg, #ED1E24 0%, rgba(237, 30, 36, 0.00) 85.65%);
				opacity: 0.5;
				border-radius: 200px;
				z-index: -1;
				animation: whynumberafter 1s ease-in-out;
			}

			@keyframes whynumberafter {
				0% {
					transform: scale(0) rotate(90deg);
					opacity: 0;
				}

				100% {
					transform: scale(1) rotate(90deg);
					opacity: 0.5;
				}
			}

			p {
				color: var(--clr-white);
				text-align: right;
				font-size: calc((var(--fs-general) + 13) * 1px);
				font-weight: 700;
				line-height: 130%;
			}
		}

		&-title {
			max-width: 360px;
			position: relative;
			z-index: 1;

			p {
				color: var(--clr-white);
				font-family: var(--font-secondary);
				font-size: calc((var(--fs-general) + 4) * 1px);
				font-weight: 700;
				line-height: 140%;
				letter-spacing: 1px;
			}
		}

		&-img {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(0deg, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.00) 75%);
			}

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-content {
			display: flex;
			align-items: center;
			gap: 37px;
			align-self: stretch;
			padding: 20px 32px;
			position: relative;
			margin: auto 0;

			&::before {
				content: "";
				width: 42px;
				min-width: 42px;
				height: 42px;
				background: url('../icons/i-check-blue.svg') center no-repeat;
			}

			p {
				font-size: calc(var(--fs-general) * 1px);
				;
				font-style: normal;
				font-weight: 500;
				line-height: 140%;

				b,
				strong {
					font-weight: 700;
				}
			}
		}
	}

	&__partners {
		display: flex;
		padding: 32px;
		align-items: center;
		gap: 46px;
		border-radius: 20px;
		background: var(--clr-blue);
		margin-top: 32px;

		p {
			color: var(--clr-white);
			font-size: calc(var(--fs-general) * 1px);
			;
			font-weight: 500;
			line-height: 145%;
			max-width: 260px;

			b {
				font-weight: 700;
			}
		}

		&-logo {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 20px;
			align-items: center;
			padding: 20px 46px;
			background: var(--clr-white);
			border-radius: 14px;
			width: 100%;

			img {
				width: auto;
				max-height: 25px;
			}
		}
	}
}

/* Quiz */
.quiz {
	&__content {
		width: 100%;
		max-width: 1160px;
		border-radius: 20px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

	&__demo {
		width: 100%;
		height: 560px;
		background: var(--clr-bg-white);
	}
}

/* Cases */
.cases {

	&__header {

		&-number {
			display: flex;
			align-items: center;
			gap: 24px;

			span {
				display: flex;
				align-items: center;
				gap: 24px;
				position: relative;
				color: var(--clr-red);
				font-size: calc((var(--fs-general) + 38) * 1px);
				font-weight: 600;
				line-height: normal;
				letter-spacing: 0.55px;

				&::after {
					content: '';
					width: 4px;
					height: 64px;
					background: var(--clr-red);
					border-radius: 4px;
					transform: rotate(14deg);
				}
			}

			p {
				width: 140px;
			}
		}
	}

	&__content {
		margin-top: 92px;
		border-radius: 22px;
		background: var(--clr-bg-grey);
		padding: 24px;

		&:not(:has(a.btn)) {
			row-gap: 76px;
		}
	}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 42px;
		background: var(--clr-bg-white);
		border-radius: 20px;

		span {
			font-size: calc((var(--fs-general) - 1) * 1px);
			color: var(--clr-grey);
		}

		p {
			font-size: calc((var(--fs-general) + 1) * 1px);
			font-weight: 600;
		}
	}

	&__top {
		display: flex;
		align-items: flex-end;
		gap: 55px;
	}

	&__img {
		width: 185px;
		min-width: 185px;
		margin-top: -90px;

		img {
			width: 100%;
			height: auto;
		}
	}

	&__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
		}
	}

	&__bottom {
		display: flex;
		gap: 12px;
		width: 100%;

		&>div {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
			padding: 14px 20px;
			padding-right: 12px;
			border-radius: 12px;
			width: inherit;
		}
	}

	&__requested {
		background: var(--clr-bg-grey);
	}

	&__recovered {
		background: var(--clr-blue);

		p,
		span {
			color: var(--clr-bg-white);
		}
	}

	a.btn {
		grid-column: 1 / 3;
	}
}

/* Reviews */
.reviews {

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 24px;
		margin-bottom: 46px;
	}

	&__btns {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 12px;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;

			button {
				font-size: calc((var(--fs-general) - 1) * 1px);
				font-weight: 600;
				padding: 20px 36px;
				min-width: 190px;
				transition: background 0.15s ease-in-out, color 0.15s ease-in-out;

				@media (hover:hover) {
					&:hover:not(.btn--blue) {
						background: var(--clr-blue);
						color: var(--clr-white);
					}
				}
			}
		}

		&-info {
			display: flex;
			align-items: center;
			gap: 12px;
			line-height: 140%;

			span {
				display: flex;
				align-items: center;
				gap: 2px;
				font-size: calc((var(--fs-general) + 3) * 1px);
				font-weight: 700;

				&::after {
					content: '';
					width: 20px;
					height: 20px;
					background: url('../icons/i-rating.svg') center no-repeat;
				}
			}

			p {
				font-size: calc((var(--fs-general) - 4) * 1px);
				font-weight: 500;
				text-decoration-line: underline;
			}
		}
	}

	&__nav {
		display: flex;
		align-items: center;
		gap: 12px;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 46px;
			height: 46px;
			background: var(--clr-bg-white);
			border-radius: 90px;
			position: relative;
			transition: background 0.15s ease-in-out;

			&::before {
				content: '';
				position: absolute;
				width: 8px;
				height: 18px;
				background: url('../icons/i-nav-arrow.svg') center no-repeat;
				transition: background 0.15s ease-in-out;
			}

			@media (hover:hover) {
				&:hover {
					background: var(--clr-red);

					&::before {
						background: url('../icons/i-nav-arrow-hover.svg') center no-repeat;
					}
				}
			}
		}

		&-prev {
			&::before {
				transform: rotate(180deg);
			}
		}

		&-next {}
	}

	&__tabs {}

	&__tab {
		&--hidden {
			display: none;
		}
	}

	&__video {}

	&__grid {}

	&__item {

		a {
			display: inline-block;
			width: 100%;
			border-radius: 20px;
			overflow: hidden;

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

		&-video {
			height: 260px !important;
			border-radius: 20px;
			overflow: hidden;

			iframe {
				width: 100%;
				height: 100%;
			}
		}
	}
}

/* Steps */
.steps {

	&__grid {}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 32px;
		border-radius: 16px;
		border: 1px solid var(--clr-border);

		&-highlight {
			background: url('../img/step__highlight.webp') bottom right no-repeat, var(--clr-blue);
			background-size: contain;

			@media screen and (min-width: 1040px) {
				grid-column: 2 / 4;
			}

			.steps__item-title,
			.steps__item-info {
				max-width: 390px;

				p,
				span {
					color: var(--clr-bg-grey);
				}
			}

			.steps__item-title {
				span {
					&::after {
						background: url('../icons/i-step-after-white.svg') center no-repeat;
						opacity: 0.5;
					}
				}
			}

			.steps__item-info {
				p {
					opacity: 0.7;
				}
			}
		}

		&-title {
			display: flex;
			align-items: center;
			gap: 20px;
			align-self: stretch;
			line-height: 130%;
			font-weight: 700;

			span {
				display: flex;
				align-items: center;
				gap: 6px;
				color: var(--clr-blue);
				text-align: right;
				font-size: calc((var(--fs-general) + 7) * 1px);

				&::after {
					content: '';
					width: 19px;
					height: 56px;
					background: url('../icons/i-step-after.svg') center no-repeat;
				}
			}

			p {
				font-size: calc((var(--fs-general) + 2) * 1px);
			}
		}

		&-info {
			p {
				color: var(--clr-grey);
				font-size: calc((var(--fs-general) - 1) * 1px);
				font-weight: 500;
				line-height: 135%;
			}
		}
	}
}

/* Form CTA */
.cta {
	.section__container {
		border-radius: 32px;
		background: url('../img/form_bg.webp') center no-repeat, var(--clr-bg-grey);
		background-size: cover;
		padding: 64px 76px;
	}

	.section__desc {
		margin-bottom: 14px;

		p {
			font-weight: 500;
			line-height: 135%;
			color: var(--clr-grey);
		}
	}

	&__form {
		form {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			width: 100%;
			max-width: 420px;

			input {
				display: flex;
				align-items: center;
				gap: 10px;
				align-self: stretch;
				width: 100%;
				border: none;
				outline: none;
				padding: 30px 32px;
				border-radius: 70px;
				background: var(--clr-bg-white);
				box-shadow: 0px 10px 42px 0px rgba(137, 137, 137, 0.04);
				color: var(--clr-black);
				font-family: var(--font);
				font-size: calc((var(--fs-general) + 1) * 1px);
				font-weight: 500;
				letter-spacing: 0.5px;
				transition: padding .2s ease-in-out;

				&::placeholder {
					color: var(--clr-grey);
					transition: color .2s ease-in-out;
				}

				@media (hover:hover) {
					&:hover {
						padding-left: 40px;

						&::placeholder {
							color: var(--clr-black);
						}
					}
				}
			}

			button {
				width: 100%;
				height: 92px;
				transition: opacity .2s ease-in-out, transform .2s ease-in-out;

				@media (hover:hover) {
					&:hover {
						opacity: 0.9;
						transform: scale(0.99);
					}

					&:active {
						transform: scale(0.97);
					}
				}
			}
		}
	}
}

/* Articles */
.articles {
	&__nav {
		display: flex;
		align-items: center;
		gap: 12px;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 46px;
			height: 46px;
			background: var(--clr-bg-grey);
			border-radius: 90px;
			position: relative;
			transition: background 0.15s ease-in-out;

			&::before {
				content: '';
				position: absolute;
				width: 8px;
				height: 18px;
				background: url('../icons/i-nav-arrow.svg') center no-repeat;
				transition: background 0.15s ease-in-out;
			}

			@media (hover:hover) {
				&:hover {
					background: var(--clr-red);

					&::before {
						background: url('../icons/i-nav-arrow-hover.svg') center no-repeat;
					}
				}
			}
		}

		&-prev {
			&::before {
				transform: rotate(180deg);
			}
		}

		&-next {}
	}

	&__slider {
		overflow: visible !important;
		margin-bottom: 46px;
	}

	a.btn {
		@media (hover:hover) {
			&:hover {
				background: var(--clr-bg-grey);
			}
		}
	}

	&__items {
		&:has(+a.articles__link) {
			margin-bottom: 32px;
		}
	}
}

/* Article */
.similar {
	padding-top: 0 !important;

	.articles__slider {
		overflow: hidden !important;
	}

	// .section__header {
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @media screen and (min-width: 720px) {


	// 	.articles__nav {
	// 		display: none;
	// 	}
	// }
}

.article {
	&__item {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		border-radius: 20px;
		overflow: hidden;
		background: var(--clr-bg-grey);
		transition: opacity 0.2s ease-in-out !important;

		@media (hover:hover) {
			&:hover {
				opacity: 1 !important;
			}
		}

		&-img {
			display: inline-flex;
			width: 100%;
			height: 210px;
			overflow: hidden;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.2s ease-in-out
			}

			@media (hover:hover) {
				&:hover {
					img {
						transform: rotate(1deg) scale(1.08);
					}
				}
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			padding: 20px 24px;
			align-self: stretch;
		}

		&-title {
			font-size: calc((var(--fs-general) + 3) * 1px);
			font-weight: 700;
			line-height: 130%;
			transition: color 0.15s ease-in-out;

			@media (hover:hover) {
				&:hover {
					color: var(--clr-red);
				}
			}
		}

		&-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-self: stretch;
			padding-top: 20px;
			border-top: 1px solid var(--clr-border);

			&:has(+ *) {
				padding-top: 14px;
				padding-bottom: 14px;
				border-bottom: 1px solid var(--clr-border);
			}

			&>div {
				display: flex;
				align-items: center;
				gap: 6px;

				&::before {
					content: '';
					width: 22px;
					height: 22px;
				}

				p {
					color: var(--clr-grey);
					font-size: calc((var(--fs-general) - 2) * 1px);
					font-weight: 500;
					line-height: 140%;
				}
			}
		}

		&-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			background: var(--clr-bg-white);
			font-size: calc((var(--fs-general) - 1) * 1px);
			padding: 18px 20px;
			border-radius: 40px;
			transition: background 0.15s ease-in-out, color 0.15s ease-in-out;

			@media (hover:hover) {
				&:hover {
					background: var(--clr-blue);
					color: var(--clr-white);
				}
			}
		}

		&-date {
			&::before {
				background: url('../icons/i-date.svg') center no-repeat;
			}
		}

		&-min {
			&::before {
				background: url('../icons/i-min.svg') center no-repeat;
			}
		}

		&-count {
			&::before {
				background: url('../icons/i-count.svg') center no-repeat;
			}
		}

		&.swiper-slide:not(.swiper-slide-active, .swiper-slide-next) {
			opacity: .5;
		}

		&.swiper-slide-next+article {
			opacity: 1 !important;
		}
	}
}

/* Team */
.team {
	&__nav {
		display: flex;
		align-items: center;
		gap: 12px;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 46px;
			height: 46px;
			background: var(--clr-bg-white);
			border-radius: 90px;
			position: relative;
			transition: background 0.15s ease-in-out;

			&::before {
				content: '';
				position: absolute;
				width: 8px;
				height: 18px;
				background: url('../icons/i-nav-arrow.svg') center no-repeat;
				transition: background 0.15s ease-in-out;
			}

			@media (hover:hover) {
				&:hover {
					background: var(--clr-red);

					&::before {
						background: url('../icons/i-nav-arrow-hover.svg') center no-repeat;
					}
				}
			}
		}

		&-prev {
			&::before {
				transform: rotate(180deg);
			}
		}

		&-next {}
	}

	&__slider {
		padding-bottom: 20px !important;

		&-wrapper {}
	}

	&__item {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 12px;
		border-radius: 20px;
		background: var(--clr-bg-white);
		height: auto !important;

		&-img {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 270px;
			border-radius: 16px;
			overflow: hidden;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 14px;
			align-self: stretch;
			padding: 12px;
		}

		&-name {
			font-size: calc((var(--fs-general) + 3) * 1px);
			font-weight: 700;
			line-height: 130%;
		}

		&-info {
			color: var(--clr-grey);
			font-size: calc((var(--fs-general) - 2) * 1px);
			font-weight: 500;
			line-height: 140%;
		}
	}
}

/* Socials */
.socials {
	&__content {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 24px 12px;
		padding: 24px;
		align-self: stretch;
		flex-wrap: wrap;
		border-radius: 22px;
		background: var(--clr-bg-grey);
	}

	&__channels {
		width: 100%;
	}

	&__channel {
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 24px;
		border-radius: 20px;
		background: var(--clr-bg-white);

		&:hover {
			.socials__channel-info span {
				background: var(--clr-blue);
				color: var(--clr-bg-white);
				border-color: var(--clr-blue);
			}
		}

		&-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 64px;
			width: 64px;
			height: 64px;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;

			p {
				font-size: calc((var(--fs-general) + 1) * 1px);
				font-weight: 700;
				line-height: 140%;
			}

			span {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 4px;
				padding: 8px 20px;
				border-radius: 12px;
				border: 1px solid var(--clr-border);
				background: var(--clr-bg-white);
				font-size: calc((var(--fs-general) - 2) * 1px);
				font-weight: 500;
				transition: background 0.1s ease-in-out, color 0.1s ease-in-out,
					border-color 0.15s ease-in-out;
			}
		}
	}

	&__chats {
		grid-template-columns: 1fr 2fr;
		align-items: center;
		width: 100%;

		&-info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 6px;
			position: relative;
			padding-left: 62px;

			&::before {
				content: '';
				width: 42px;
				height: 42px;
				background: url('../icons/i-socials-info.svg') center no-repeat;
				position: absolute;
				left: 0;
			}

			p {
				font-size: calc((var(--fs-general) + 1) * 1px);
				font-weight: 700;
				line-height: 140%;
			}

			span {
				color: var(--clr-grey);
				font-size: calc((var(--fs-general) - 2) * 1px);
				font-weight: 500;
				line-height: 150%;
				max-width: 260px;
			}
		}

		&-links {
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
		}
	}

	&__chat {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
		border-radius: 12px;
		background: var(--clr-bg-white);

		&:hover {
			span {
				background: var(--clr-blue);
				color: var(--clr-bg-white);
				border-color: var(--clr-blue);
			}
		}

		p {
			font-size: calc((var(--fs-general) - 3) * 1px);
			font-weight: 700;
			line-height: 140%;
		}

		span {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;
			padding: 8px 20px;
			border-radius: 12px;
			border: 1px solid var(--clr-border);
			background: var(--clr-bg-white);
			font-size: calc((var(--fs-general) - 2) * 1px);
			font-weight: 500;
			transition: background 0.1s ease-in-out, color 0.1s ease-in-out,
				border-color 0.15s ease-in-out;
		}

		&-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			width: auto;
			height: 32px;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

/* Faq */
.faq {
	&__content {
		display: flex;
		flex-direction: column;
	}

	&__item {
		margin-bottom: 20px;

		border-radius: 20px;

		&.active {
			background: var(--clr-bg-grey);

			.faq__question {
				p {
					background: var(--clr-blue);
					color: var(--clr-bg-white);
				}

				.faq__icon {
					background: rgba(255, 255, 255, 0.10);

					&::after {
						background: url('../icons/i-faq-icon-hover.svg') center no-repeat;
						transform: rotate(45deg);
					}
				}
			}

			.faq__answer {
				display: inline-block;
			}
		}
	}

	&__question {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		p {
			display: flex;
			padding: 30px 32px;
			padding-right: 90px;
			justify-content: flex-start;
			align-items: center;
			border-radius: 20px;
			background: var(--clr-bg-grey);
			color: var(--clr-black);
			width: 100%;
			cursor: pointer;
			transition: background 0.05s ease-in-out;
		}

		&:hover {
			.faq__icon {
				background: var(--clr-blue);

				&::after {
					background: url('../icons/i-faq-icon-hover.svg') center no-repeat;
				}
			}
		}
	}

	&__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 32px;
		width: 42px;
		height: 42px;
		background: var(--clr-bg-white);
		border-radius: 60px;
		pointer-events: none;
		z-index: 2;
		transition: background 0.15s ease-in-out;

		&::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 18px;
			background: url('../icons/i-faq-icon.svg') center no-repeat;
			transition: transform 0.15s ease-in-out;
		}
	}

	&__answer {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 12px;
		padding: 24px 32px 32px 32px;
		width: 100%;

		p {
			font-size: calc((var(--fs-general) - 1) * 1px);
			font-weight: 500;
			line-height: 160%;
		}
	}
}

/* SEO */
.information {
	&__content {
		font-size: calc((var(--fs-general) - 1) * 1px);
		font-weight: 500;
		line-height: 160%;

		h2 {
			font-size: calc((var(--fs-general) + 5) * 1px);
			margin-bottom: 24px;
		}

		h2,
		h3,
		h4 {
			font-size: calc((var(--fs-general) + 3) * 1px);
			margin-bottom: 20px;
		}

		p,
		span,
		ul {
			display: inline-block;
			margin-bottom: 14px;
		}

		&.half {
			max-height: 180px;
			position: relative;
			z-index: 1;
			overflow: hidden;
			transition: max-height 0.7s linear;

			&::after {
				content: "";
				width: 100%;
				height: 120px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
				z-index: 2;
				opacity: 1;
				transition: opacity 0.3s ease-in-out;
				pointer-events: none;
			}

			&.visible {
				max-height: 10000px;
				transition: max-height 1s linear;

				&::after {
					opacity: 0;
				}
			}
		}
	}
}

#information__more {
	display: inline-block;
	color: var(--clr-grey);
	font-size: calc((var(--fs-general) - 2) * 1px);
	font-weight: 500;
	line-height: 160%;
	text-decoration: underline;
	transition: color 0.15s ease-in-out;

	@media (hover:hover) {
		&:hover {
			color: var(--clr-red);
		}
	}

	.visible {}

	.hidden {}
}

/* Footer */
.footer {
	background: var(--clr-black);
	padding-top: 62px;

	p,
	a,
	span,
	li {
		color: var(--clr-bg-white);
	}

	&__container {
		display: flex;
		flex-direction: column;
		gap: 62px;
	}

	&__columns {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 32px;
	}

	&__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		width: 100%;
		max-width: 240px;
	}

	&__logo {}

	&__contacts {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	&__tel {
		font-size: calc((var(--fs-general) + 7) * 1px);
		font-weight: 600;
		line-height: normal;
		transition: color 0.15s ease-in-out;

		&:hover {
			color: var(--clr-red);
		}
	}

	&__socials {
		display: flex;
		align-items: center;
		gap: 8px;

		a {
			display: inline-flex;
			width: 42px;
			height: 42px;

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

	&__call {
		padding: 20px 42px;
		font-size: calc((var(--fs-general) - 2) * 1px);
		transition: background 0.15s ease-in-out, color 0.15s ease-in-out;

		&:hover {
			background: var(--clr-bg-white);
			color: var(--clr-black);
		}
	}

	&__email {
		font-size: calc((var(--fs-general) - 1) * 1px);
		font-weight: 500;
		line-height: 140%;
		text-decoration: underline;
		transition: color 0.15s ease-in-out;

		&:hover {
			color: var(--clr-red);
		}
	}

	&__navigations {
		display: flex;
		align-items: flex-start;
		gap: 120px;

		nav {
			ul {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;

				li {
					&:not(:has(a)) {
						font-size: calc(var(--fs-general) * 1px);
						;
						color: var(--clr-grey);
					}

					a {
						font-size: calc((var(--fs-general) - 1) * 1px);
						font-weight: 500;
						line-height: normal;
						transition: color 0.15s ease-in-out;
						position: relative;

						&::after {
							content: "";
							position: absolute;
							bottom: -2px;
							left: 0;
							width: 0;
							height: 2px;
							background: var(--clr-white);
							-webkit-transition: width 0.2s ease-in-out;
							transition: width 0.2s ease-in-out;
						}

						@media (hover:hover) {
							&:hover {
								&::after {
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	&__services {}

	&__pages {}

	&__address {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		width: 100%;
		max-width: 200px;
		font-size: calc((var(--fs-general) - 1) * 1px);
		font-weight: 500;
		line-height: 140%;

		span {
			font-size: calc(var(--fs-general) * 1px);
			color: var(--clr-grey);
		}

		p {
			color: var(--clr-white);

			span {
				color: var(--clr-white);
			}

			&:nth-child(2):not(:last-child) {
				padding-bottom: 14px;
				border-bottom: 1px solid var(--clr-border);
			}
		}
	}

	&__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 64px;
		padding: 24px 0;
		border-top: 1px solid var(--clr-border);
		font-weight: 300;
		font-size: calc((var(--fs-general) - 2) * 1px);

		p,
		a {
			color: var(--clr-grey);
		}

		a {
			text-decoration: underline;

			@media (hover:hover) {
				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	&__agency {
		background: var(--clr-bg-grey);
		padding-top: 20px;
		padding-bottom: 20px;

		.section__container {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
		}

		p {
			font-size: calc((var(--fs-general) - 3) * 1px);
			color: var(--clr-grey);
		}

		a {
			display: inline-flex;
			transition: opacity 0.15s ease-in-out;

			@media (hover:hover) {
				&:hover {
					opacity: .65;
				}
			}
		}
	}
}

/* Swiper */
.swiper {
	&:has(.swiper-scrollbar) {
		padding-bottom: 20px !important;
	}
}

.swiper-button-disabled {
	pointer-events: none;
	opacity: .3;
}

.swiper-scrollbar {
	width: 100% !important;
	border-radius: 6px !important;
	left: 0 !important;
	background: rgb(0 0 0 / 10%) !important;

	.swiper-scrollbar-drag {
		background: rgb(0 0 0 / 10%);
	}
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2555;

	&.opened {
		display: flex;
	}

	&__form {
		width: 100%;
	}

	&__call {
		width: calc(100% - 46px);
		max-width: 520px;
	}

	&__wrapper {
		border-radius: 20px;
		padding: 32px;
		background: var(--clr-bg-white);
		box-shadow: 0 16px 42px 0 rgba(0, 0, 0, 0.06);
		position: relative;
	}

	&__close {
		position: absolute;
		top: 32px;
		right: 32px;
		width: 16px;
		height: 16px;
		background: url('../icons/i-modal-close.svg') center no-repeat;
		background-size: cover;
		transition: opacity 0.1s ease-in-out;

		@media (hover:hover) {
			&:hover {
				opacity: .3;
			}
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	&__title {
		p {
			font-weight: 600;
			font-size: calc((var(--fs-general) + 25) * 1px);
			line-height: 110%;
			text-align: center;
		}
	}

	&__desc {
		p {
			font-weight: 400;
			font-size: calc((var(--fs-general) - 1) * 1px);
			line-height: 130%;
			text-align: center;
		}
	}

	&__form {
		flex-direction: column;
		align-items: center;
		gap: 14px;

		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			padding: 10px 0;
			width: 100%;

			input,
			button {
				font-family: var(--font);
				width: 100%;
				height: 70px;
				border: none;
				outline: none;
			}

			input {
				border-radius: 90px;
				padding: 24px 32px;
				background: var(--clr-bg-grey);
				font-weight: 400;
				font-size: calc((var(--fs-general) - 1) * 1px);
				line-height: 130%;
				color: var(--clr-black);

				&::placeholder {
					color: var(--clr-grey);
				}
			}

			button {
				font-size: calc(var(--fs-general) * 1px);
			}
		}
	}

	&__offera {
		p {
			font-weight: 400;
			font-size: calc((var(--fs-general) - 4) * 1px);
			line-height: 130%;
			text-align: center;
			color: var(--clr-grey);
		}
	}
}

/* Modal BG */
#modal__bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(12px);
	background: rgba(25, 25, 25, 0.14);
	z-index: 1555;

	&.opened {
		display: inline-flex;
	}
}

/* Pages */
main.page {
	padding-top: 160px;
}

.page {
	&__company {}

	&__single {
		.breadcrumbs {
			margin-bottom: 32px;

			&__wrapper {
				padding: 0;
				border: none;
				border-radius: 0;
			}
		}

	}

	&__reviews {
		.reviews__nav {
			button {
				background: var(--clr-red);
				transition: opacity 0.15s ease-in-out;

				@media (hover:hover) {
					&:hover {
						opacity: 0.8;
					}
				}

				&::before {
					background: url('../icons/i-nav-arrow-hover.svg') center no-repeat;
					background-size: contain;
				}
			}
		}

		.reviews__screenshot {
			.reviews__item {
				a {
					border: 1px solid var(--clr-border);
				}
			}
		}

		button {
			&.btn--white {
				background: var(--clr-bg-grey);
			}
		}
	}

	&__hero {
		padding-top: 0 !important;

		&:has(+ .socials),
		&:has(+ .blog) {
			padding-bottom: 0 !important;
		}

		.section__title {
			max-width: 920px;
			margin-bottom: 42px;

			h1 {

				b,
				strong {
					color: var(--clr-red);
				}
			}

			&-46 {
				max-width: 790px;
			}
		}
	}
}

/* Breadcrumbs */
.breadcrumbs {
	margin-bottom: 46px;
	max-width: 100%;

	&__wrapper {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		padding: 14px 24px;
		border-radius: 12px;
		border: 1px solid var(--clr-border);

		a,
		span,
		p {
			font-size: calc((var(--fs-general) - 1) * 1px);
			font-weight: 500;
			line-height: normal;
		}

		a {
			color: var(--clr-grey);

			@media (hover:hover) {
				transition: color 0.1s ease-in-out;

				&:hover {
					color: var(--clr-red)
				}
			}
		}

		span {
			color: var(--clr-grey);
		}

		p {}
	}
}

/* Page Company */
.company {
	&__info {
		margin-top: 46px;
	}


	&__item {
		display: flex;
		align-items: center;
		gap: 32px;

		&-icon {
			img {
				width: 46px;
				height: 46px;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 14px;
		}
	}
}

.awards {
	&:has(+section) {
		padding-bottom: 0;
	}

	&__wrapper {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 42px;
	}

	&__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		width: 100%;
		max-width: 520px;
		height: 100%;
	}

	&__title {}

	&__years {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			padding: 12px 20px;
			border-radius: 8px;
			border: 1px solid var(--clr-border);

			&::before {
				content: '';
				width: 8px;
				min-width: 8px;
				height: 8px;
				border-radius: 10px;
				background: var(--clr-red);
			}
		}
	}

	&__desc {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-top: auto;
		margin-bottom: 20px;
		max-width: 480px;

		&::before {
			content: '';
			width: 32px;
			min-width: 32px;
			height: 32px;
			background: url('../icons/i-check-blue.svg') center no-repeat;
		}

		p {
			line-height: 165%;
		}
	}

	&__img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 620px;
		height: 465px;
		border-radius: 16px;
		overflow: hidden;

		img {
			width: auto;
			min-width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

/* Page Navi */
.pagenavi {

	&__wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;

		li {
			&:has(.pagenavi__arrow) {
				display: inline-flex;
				margin: 0 20px;
			}

			a {
				transition: color 0.1s ease-in-out, background 0.15s ease-in-out;

				&:not(.pagenavi__arrow) {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 10px;
					width: 46px;
					height: 46px;
					border-radius: 60px;
					background: var(--clr-bg-grey);
					font-size: calc((var(--fs-general) + 3) * 1px);
				}

				&:hover,
				&.pagenavi__active {
					background: var(--clr-blue);
					color: var(--clr-bg-white);
				}

				&.pagenavi__arrow {
					display: inline-flex;
					width: 22px;
					height: 16px;
					background: url('../icons/i-pagenavi-arrow.svg') center no-repeat;
					background-size: cover;

					&-next {
						transform: rotate(180deg);
					}
				}
			}
		}
	}

	&__arrow {

		&-prev {}

		&-next {}
	}

	&__active {}
}

/* Contacts */
.contacts {
	&__wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 62px;
	}

	&__section {
		display: flex;
		gap: 24px;
		padding: 24px;
		border-radius: 22px;
		background: var(--clr-bg-grey);
		width: 100%;
	}

	&__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 32px;
		border-radius: 20px;
		background: var(--clr-bg-white);

		&-row {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 6px;

			span {
				color: var(--clr-grey);
				font-size: calc(var(--fs-general) * 1px);
			}

			a {
				font-size: calc((var(--fs-general) + 6) * 1px);
				font-weight: 700;
			}

			p {
				font-size: calc(var(--fs-general) * 1px);
				line-height: 155%;
			}

			button {
				font-family: var(--font);
				font-size: calc((var(--fs-general) - 3) * 1px);
				font-weight: 700;
				line-height: 140%;
				color: var(--clr-blue);
				border-bottom: 1px solid;
				transition: color 0.2s ease-in-out;

				@media (hover:hover) {
					&:hover {
						color: var(--clr-red)
					}
				}
			}
		}
	}

	&__maps {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		max-width: 750px;
		border-radius: 20px;
		border: 6px solid var(--clr-bg-white);
		overflow: hidden;

		iframe {
			width: 100%;
			height: 100%;
		}
	}

	&__requisites {
		width: 100%;
		max-width: 740px;
		border-radius: 22px;
		border: 1px solid var(--clr-border);
		overflow: hidden;

		span {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: calc((var(--fs-general) + 7) * 1px);
			font-weight: 900;
			line-height: 110%;
			letter-spacing: 0.72px;
			text-align: center;
			padding: 32px;
		}

		&-table {
			display: flex;
			flex-direction: column;
		}

		&-row {
			display: grid;
			grid-template-columns: 1.5fr 2fr;
			padding: 20px 32px;

			&:nth-child(odd) {
				background: var(--clr-bg-grey);
			}

			p {
				&:nth-child(1) {
					color: var(--clr-grey);
				}
			}
		}
	}
}

/* Author */
.blog {
	&__author {
		display: flex;
		align-items: center;
		gap: 32px;
		width: 100%;
		background: var(--clr-bg-grey);
		border-radius: 20px;
		padding: 32px;
		margin-bottom: 62px;

		&-img {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144px;
			min-width: 144px;
			height: 144px;
			border-radius: 90px;
			overflow: hidden;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-info {
			display: flex;
			flex-direction: column;
			gap: 6px;
			max-width: 720px;
		}

		&-name {
			font-size: calc((var(--fs-general) + 1) * 1px);
			font-weight: 700;
		}

		&-job {
			font-size: calc((var(--fs-general) - 2) * 1px);
			color: var(--clr-grey);
		}

		&-desc {
			margin-top: 8px;

			p {
				font-size: calc((var(--fs-general) - 1) * 1px);
			}
		}
	}
}

/* Single */
.single {
	margin-top: 62px;

	&__hero {}

	&__title {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 42px;
		padding: 64px;
		width: 100%;
		height: 440px;
		border-radius: 24px;
		position: relative;
		overflow: hidden;
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(25, 25, 25, 0.00) 33.52%, rgba(25, 25, 25, 0.60) 100%), linear-gradient(0deg, rgba(25, 25, 25, 0.20) 0%, rgba(25, 25, 25, 0.20) 100%);
			z-index: 1;
		}

		h1 {
			color: var(--clr-white);
			font-size: calc((var(--fs-general) + 29)* 1px);
			font-weight: 900;
			line-height: 115%;
			letter-spacing: 1.38px;
			max-width: 770px;
			position: relative;
			z-index: 2;
		}
	}

	&__thumbnail {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;

		img {
			width: auto;
			min-width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 24px;
		width: 100%;
		background: var(--clr-bg-grey);
		padding: 20px 32px;
		border-radius: 14px;
		margin-top: 10px;

		p,
		a {
			font-size: calc((var(--fs-general) - 1)* 1px);
		}

		&>div {
			display: flex;
			align-items: center;
			gap: 6px;

			&::before {
				content: "";
				width: 22px;
				height: 22px;
			}
		}
	}

	&__date {
		&::before {
			background: url('../icons/i-date.svg') center no-repeat;
		}
	}

	&__author {
		&::before {
			background: url('../icons/i-author.svg') center no-repeat;
		}
	}

	&__min {
		margin-left: auto;

		&::before {
			background: url('../icons/i-min.svg') center no-repeat;
		}
	}

	&__count {
		&::before {
			background: url('../icons/i-count.svg') center no-repeat;
		}
	}

	&__wrapper {
		display: flex;
		// align-items: flex-start;
		justify-content: space-between;
		gap: 72px;
	}

	&__content {
		width: calc(100% - 320px - 72px);
		font-size: calc((var(--fs-general) + 1)* 1px);
		font-weight: 400;
		line-height: 165%;

		p {
			&:not(:last-child) {
				margin-bottom: 32px;
			}
		}
	}

	&__sidebar {
		display: flex;
		flex-direction: column;
		gap: 32px;
		width: 310px;
	}

	&__call {
		position: sticky;
		min-height: 2em;
		top: 150px;
		z-index: 15;
		display: flex;
		padding: 32px;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		background: var(--clr-bg-grey);
		border-radius: 20px;
		text-align: center;


		&-img {}

		&-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;
		}

		&-name {}

		&-job {}

		&-socials {
			margin: 12px 0;
		}

		&-tel {}

		&-btn {
			width: 100%;
			margin-top: 12px;

			button {
				padding-left: 4px;
				padding-right: 4px;
				width: 100%;
				font-size: calc((var(--fs-general) - 1)* 1px);
				background: var(--clr-bg-white);
				color: var(--clr-black);
				transition: background 0.15s ease-in-out, color 0.15s ease-in-out;

				&:hover {
					background: var(--clr-red);
					color: var(--clr-white);
				}
			}
		}
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 32px;
	}

	h2 {
		font-size: calc((var(--fs-general) + 25)* 1px);
	}

	h3 {
		font-size: calc((var(--fs-general) + 19)* 1px);
	}

	h4,
	h5 {
		font-size: calc((var(--fs-general) + 15)* 1px);
	}

	p {
		i {
			font-weight: 700;
			font-style: italic;
		}

		b,
		strong {
			font-weight: bold;
		}

		a {
			color: var(--clr-blue);
			text-decoration: underline;

			@media (hover:hover) {
				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	blockquote {
		padding: 32px;
		border-radius: 20px;
		background: var(--clr-bg-grey);
		font-size: calc(var(--fs-general) * 1px);
		margin-top: 32px;

		&:has(+*) {
			margin-bottom: 32px;
		}

		&.blockquote {

			&__warning,
			&__info,
			&__check {
				padding-left: 106px;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 32px;
					width: 42px;
					height: 42px;
					transform: translateY(-50%);
				}
			}

			&__warning {
				background: #FAEAE9;

				&::before {
					background: url('../icons/i-quote-warning.svg') center no-repeat;
					background-size: cover;
				}
			}

			&__info {
				background: #FEF8E6;

				&::before {
					background: url('../icons/i-quote-info.svg') center no-repeat;
					background-size: cover;
				}
			}

			&__check {
				background: #E9F8EB;

				&::before {
					background: url('../icons/i-quote-check.svg') center no-repeat;
					background-size: cover;
				}
			}
		}
	}

	ol,
	ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 32px;
		margin-bottom: 32px;

		li {
			position: relative;
			padding-left: 22px;

			&::before {
				content: '';
				width: 10px;
				height: 10px;
				background: var(--clr-red);
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 10px
			}
		}
	}

	ol {
		counter-reset: ol;

		li {
			padding-left: 38px;
			counter-increment: ol 1;

			&::before {
				content: counter(ol);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 26px;
				height: 26px;
				color: var(--clr-white);
				text-align: center;
				font-family: var(--font);
				font-size: calc((var(--fs-general) - 3)* 1px);
				font-weight: 700;
				line-height: 165%;
				border-radius: 5px;
				left: 0;
				top: 2px
			}
		}
	}

	img {
		max-width: 100%;
		height: auto;
		border-radius: 20px;
	}

	&__gallery {
		position: relative;
		margin-top: 46px;
		margin-bottom: 46px;
	}

	&__carousel {}

	&__slider {
		height: 490px;

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			img {
				width: auto;
				min-width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-nav {
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 56px;
				height: 56px;
				border-radius: 90px;
				background: url('../icons/i-nav-arrow-hover.svg') center no-repeat, rgb(66 105 245 / 80%);
				background-size: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 3;
				transition: scale 0.1s ease-in-out, background 0.1s ease-in-out;
				backdrop-filter: blur(10px);

				@media (hover:hover) {
					&:hover {
						scale: 1.02;
						background: url('../icons/i-nav-arrow-hover.svg') center no-repeat, var(--clr-blue);
						background-size: 10px;
					}
				}

				&.swiper-button-disabled {
					background: url('../icons/i-nav-arrow-hover.svg') center no-repeat, rgb(66 105 245 / 20%);
					backdrop-filter: blur(10px);
					opacity: 1;
					pointer-events: none;
				}
			}
		}

		&-prev {
			left: -30px;
			transform: translateY(-50%) rotate(180deg) !important;
		}

		&-next {
			right: -30px;
		}
	}

}