@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geologica:wght,CRSV@100..900,0&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

img,
iframe,
audio,
video,
canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

ul,
ol {
	list-style-type: none;
}

:root {
	--font-dm-sans: "DM Sans", sans-serif;
	--font-geologica: "Geologica", sans-serif;
	--font-inter: "Inter", sans-serif;
	--font-jost: "Jost", sans-serif;
	--font-roboto: "Roboto", sans-serif;
	--font-rubik: "Rubik", sans-serif;
}

body {
	font-family: var(--font-geologica);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	background-color: #fff;
	color: #252525;
}

.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1.5rem;

	@media screen and (min-width: 576px) {
		max-width: calc(540px + 1.5rem * 2);
	}

	@media screen and (min-width: 768px) {
		max-width: calc(720px + 1.5rem * 2);
	}

	@media screen and (min-width: 992px) {
		max-width: calc(960px + 1.5rem * 2);
	}

	@media screen and (min-width: 1200px) {
		max-width: calc(1040px + 1.5rem * 2);
	}

	@media screen and (min-width: 1536px) {
		max-width: calc(1320px + 1.5rem * 2);
	}
}

.no-scroll {
	overflow: hidden;
}

.btn {
	display: inline-block;
	padding: 15px 38px;
	border-radius: 14px;
	background-color: #ffd618;
	font-family: var(--font-jost);
	font-size: 18px;
	font-weight: 500;
	color: #5e479c;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color 0.1s ease-in-out,
		background-color 0.1s ease-in-out;

	&.btn-white {
		border: 1px solid #19ab01;
		color: #1d1d1b;
		background-color: #fff;
		font-weight: 700;

		&:hover {
			border-color: transparent;
		}
	}

	&:hover {
		background-color: #e5bf14;
		color: #043873;
	}

	@media (max-width: 991px) {
		padding: 12px 24px;
		font-size: 16px;
	}

	@media (max-width: 575px) {
		padding: 9px 16px;
	}
}

.section-title {
	position: relative;
	margin-top: 8px;
	font-family: var(--font-jost);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: #5e479c;
	text-transform: uppercase;

	@media (max-width: 991px) {
		font-size: 30px;
		text-align: center;
	}

	@media (max-width: 575px) {
		font-size: 24px;
	}

	&::before {
		content: "";
		max-width: 140px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 16px;
		margin-top: -20px;
		background:
			radial-gradient(8px circle at 8px 50%, #fff 100%, transparent 100%),
			radial-gradient(8px circle at calc(100% - 8px) 50%, #c3dd82 100%, transparent 100%),
			linear-gradient(to right, #fff, #c3dd82) left 50% / 100% 3px no-repeat;
		background-repeat: no-repeat;

		@media (max-width: 991px) {
			left: 50%;
			transform: translateX(-50%);
		}

		@media (max-width: 575px) {
			max-width: 100px;
			height: 12px;
			background:
				radial-gradient(6px circle at 6px 50%, #fff 100%, transparent 100%),
				radial-gradient(6px circle at calc(100% - 6px) 50%, #c3dd82 100%, transparent 100%),
				linear-gradient(to right, #fff, #c3dd82) left 50% / 100% 2px no-repeat;
		}
	}
}

.section-subtitle {
	margin-top: 16px;

	@media (max-width: 991px) {
		margin-top: 10px;
		text-align: center;
	}

	@media (max-width: 575px) {
		margin-top: 5px;
		font-size: 14px;
	}
}

header {
	position: relative;
	padding-block: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	.logo {
		order: 1;

		img {
			max-width: 100px;
		}
	}

	nav {
		order: 2;

		@media (max-width: 991px) {
			order: 3;
		}

		#header-burger {
			display: none;

			@media (max-width: 991px) {
				--w: 36px;
				--h: 4px;
				--gap: 7px;

				display: block;
				border: none;
				width: var(--w);
				height: calc(var(--h) * 3 + var(--gap) * 2);
				position: relative;
				background: none;
				border-radius: 2px;
				cursor: pointer;
				z-index: 20;

				&::before,
				&::after {
					content: "";
					display: block;
					width: var(--w);
					height: var(--h);
					position: absolute;
					background-color: #19ab01;
					border-radius: 2px;
					transition:
						transform 0.3s ease,
						top 0.3s ease,
						bottom 0.3s ease,
						box-shadow 0.3s ease;
				}

				&::before {
					top: 0;
					box-shadow: 0 calc(var(--h) + var(--gap)) 0 #19ab01;
				}

				&::after {
					bottom: 0;
				}

				&.active {
					&::before {
						top: 50%;
						transform: translateY(-50%) rotate(45deg);
						box-shadow: 0 0 0 transparent;
					}

					&::after {
						bottom: 50%;
						transform: translateY(50%) rotate(-45deg);
					}
				}

				&.active + ul {
					left: 0;
				}
			}
		}

		> ul {
			display: flex;

			@media (max-width: 991px) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: fixed;
				top: 0;
				left: 100vw;
				width: 100%;
				height: 100vh;
				background-color: #5e479c;
				z-index: 15;
				overflow-y: auto;
				transition: left 0.3s ease-in-out;
			}

			> li {
				@media (min-width: 992px) {
					&:hover {
						> a {
							color: #46be4e;

							&::after {
								border-right-color: #46be4e;
								border-bottom-color: #46be4e;
								transform: rotate(225deg) translateY(-5px) translateX(-5px);
							}
						}
					}
				}

				@media (max-width: 991px) {
					&.active {
						> a {
							color: #46be4e;

							&::after {
								border-right-color: #46be4e;
								border-bottom-color: #46be4e;
								transform: rotate(225deg) translateY(-5px) translateX(-5px);
							}
						}
					}
				}

				&:has(ul) {
					position: relative;

					> a {
						&::after {
							content: "";
							display: block;
							width: 10px;
							height: 10px;
							margin-top: -8px;
							margin-left: 0.75rem;
							border: 1px solid #000;
							border-left-color: transparent;
							border-top-color: transparent;
							transform: rotate(45deg);
							transition:
								border-color 0.1s ease-in-out,
								transform 0.1s ease-in-out;
						}
					}
				}

				a {
					display: flex;
					align-items: center;
					padding: 16px;
					font-family: var(--font-dm-sans);
					font-size: 18px;
					font-weight: 500;
					color: #000;
					text-decoration: none;
					transition: color 0.1s ease-in-out;

					@media (max-width: 991px) {
						justify-content: center;
						font-size: 24px;
					}
				}

				ul {
					@media (min-width: 992px) {
						position: absolute;
						opacity: 0;
						visibility: hidden;
						padding: 8px;
						border: 1px solid #46be4e;
						border-radius: 14px;
						border-top-left-radius: 0;
						background-color: #fff;
						transform: translateY(20px);
						transition:
							opacity 0.1s ease-in-out,
							visibility 0.1s ease-in-out,
							transform 0.1s ease-in-out;
						z-index: 100;
					}

					@media (max-width: 991px) {
						display: none;
						box-shadow: none;
					}

					a {
						padding-block: 7px;

						&:hover {
							color: #46be4e;
						}

						@media (max-width: 991px) {
							padding-block: 5px;
							font-size: 20px;
						}
					}
				}

				@media (min-width: 992px) {
					&:hover ul,
					&:focus-within ul {
						opacity: 1;
						visibility: visible;
						transform: translateY(0);
					}
				}

				@media (max-width: 991px) {
					&.active ul {
						display: block;
						position: static;
					}
				}
			}
		}
	}

	.btn {
		order: 3;

		@media (max-width: 991px) {
			order: 2;
		}

		@media (max-width: 575px) {
			display: flex;
			padding: 9px;
			text-indent: -9999px;

			&::after {
				content: "";
				display: block;
				width: 25px;
				height: 25px;
				background: url("../images/user.svg") center center no-repeat;
			}
		}
	}
}

section.hero {
	background-image: url("../images/hero-bg-lines.svg"), linear-gradient(116deg, #4db848, #00ff87);
	background-position:
		0 -83px,
		0 0;

	.slider-wrapper {
		position: relative;
		padding-block: 70px;

		@media (max-width: 1199px) {
			padding-inline: 1.5rem;
		}

		@media (max-width: 991px) {
			padding-top: 40px;
			padding-bottom: 50px;
		}

		.swiper {
			width: 100%;
			height: 478px;

			@media (max-width: 1199px) {
				height: 400px;
			}

			@media (max-width: 991px) {
				height: auto;
			}

			.swiper-slide {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20px;

				@media (max-width: 991px) {
					flex-direction: column-reverse;
					align-items: center;
					text-align: center;
				}

				.swiper-slide-left {
					padding-top: 50px;
					display: flex;
					flex-direction: column;
					align-items: start;
					justify-content: center;
					gap: 20px;

					@media (max-width: 991px) {
						padding-top: 10px;
						gap: 10px;
					}

					h1 {
						font-family: var(--font-jost);
						font-size: 42px;
						font-weight: 700;
						color: #5e479c;
						line-height: 1.38;
						text-transform: uppercase;
						white-space: nowrap;

						@media (max-width: 1199px) {
							font-size: 36px;
						}

						@media (max-width: 991px) {
							white-space: normal;
						}

						@media (max-width: 767px) {
							font-size: 30px;
						}

						@media (max-width: 575px) {
							font-size: 24px;

							br {
								display: none;
							}
						}
					}

					p {
						font-family: var(--font-geologica);
						font-size: 20px;
						font-weight: 500;
						color: #252525;
						line-height: 1.2;

						@media (max-width: 767px) {
							font-size: 16px;
						}

						@media (max-width: 575px) {
							br {
								display: none;
							}
						}
					}

					.btn {
						display: inline-flex;
						margin-top: 90px;
						padding-inline: 68px;

						@media (max-width: 1199px) {
							margin-top: 50px;
						}

						@media (max-width: 991px) {
							margin-inline: auto;
						}

						@media (max-width: 767px) {
							margin-top: 30px;
						}
					}
				}

				.swiper-slide-right {
					img {
						border-radius: 50%;
						border: 3px solid #fff;

						@media (max-width: 991px) {
							max-width: 50%;
							margin-inline: auto;
						}
					}
				}
			}
		}

		.swiper-pagination {
			display: flex;
			gap: 8px;
			bottom: 62px;

			@media (max-width: 991px) {
				justify-content: center;
				bottom: 25px;
			}

			.swiper-pagination-bullet {
				width: 20px;
				height: 3px;
				background-color: #fff;
				border-radius: 1.5px;
				margin: 0;
			}
		}

		.swiper-button-prev,
		.swiper-button-next {
			width: auto;
			height: auto;
			padding: 15px;

			svg {
				height: 15px;

				path {
					fill: #fff;
				}
			}
		}

		.swiper-button-prev {
			left: -65px;

			@media (max-width: 1199px) {
				left: -20px;
			}
		}

		.swiper-button-next {
			right: -65px;

			@media (max-width: 1199px) {
				right: -20px;
			}
		}
	}
}

section.tariffs {
	padding-block: 65px;
	background: url("../images/tariffs-bg-lines.svg") right top no-repeat;

	@media (max-width: 575px) {
		padding-block: 45px;
	}

	.container {
		position: relative;

		.tariffs-tip {
			position: absolute;
			top: -25px;
			right: 0;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: url("../images/tariffs-bg-tip.svg") right top no-repeat;
			z-index: 10;

			@media (max-width: 991px) {
				display: none;
			}

			> span {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: var(--font-jost);
				font-size: 24px;
				font-weight: 700;
				color: #fff;
				position: absolute;
				right: 5px;
				top: 5px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: #5e479c;
				cursor: pointer;
				z-index: 1;
				transform: translateY(0.5px) translateX(-0.5px);
			}

			.tariffs-tip-content {
				padding: 56px 56px 23px 12px;
				opacity: 0;
				visibility: hidden;
				transform: translateY(10px);
				transition:
					visibility 0.1s ease-in-out,
					transform 0.1s ease-in-out;

				.tariffs-tip-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 6px;
					background-color: #fff;
					border-radius: 9999px;
					text-decoration: none;

					span:nth-child(1),
					span:nth-child(3) {
						width: 28px;
						height: 28px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}

					span:nth-child(1) {
						background-color: #f0f0f0;
					}

					span:nth-child(2) {
						font-family: var(--font-geologica);
						font-size: 15px;
						color: #000;
						letter-spacing: -0.5px;
					}

					span:nth-child(3) {
						background-color: #6ad76c;
					}
				}

				p {
					margin-top: 16px;
					padding-inline: 12px;
					font-family: var(--font-inter);
					font-size: 16px;
					color: #252525;
					line-height: 1.375;
					letter-spacing: -0.5px;
				}
			}

			&.active {
				width: 289px;
				height: 250px;
				border-radius: 0;

				.tariffs-tip-content {
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
				}

				> span {
					text-indent: -9999px;
					background-image: url("../images/close.svg");
					background-position: center;
				}
			}
		}

		.tabs {
			display: flex;
			gap: 10px;
			margin-top: 70px;

			@media (max-width: 991px) {
				margin-top: 45px;
			}

			@media (max-width: 767px) {
				margin-top: 30px;
				flex-direction: column;
				align-items: center;
			}

			.tab-btn {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 9px 16px;
				font-family: var(--font-roboto);
				font-size: 16px;
				font-weight: 500;
				color: #252525;
				background: none;
				border: none;
				border-radius: 8px;
				cursor: pointer;
				transition:
					color 0.1s ease-in-out,
					background-color 0.1s ease-in-out;

				&:hover,
				&.active {
					color: #fff;
					background-color: #19ab01;

					img {
						filter: brightness(0) invert(1);
					}
				}

				img {
					transition: filter 0.1s ease-in-out;
				}
			}
		}

		.tab-panels {
			margin-top: 40px;

			.tab-panel {
				display: none;

				&.active {
					display: block;
				}
			}
		}

		.tariffs-list {
			--gap: 20px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--gap);

			> li {
				width: calc((100% - (var(--gap) * 2)) / 3);
				padding: 16px 8px;
				position: relative;
				background-color: #fff;
				border-radius: 14px;
				box-shadow: 2px 11px 33px rgba(0, 0, 0, 0.08);
				transition: transform 0.1s ease-in-out;

				@media (max-width: 991px) {
					width: calc((100% - (var(--gap) * 2)) / 2);
				}

				@media (max-width: 767px) {
					width: auto;
				}

				&::after {
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 14px;
					position: absolute;
					left: 0;
					top: 0;
					box-shadow: 0px 12px 15px -4px rgba(70, 178, 239, 0.35);
					z-index: -1;
				}

				&:hover {
					transform: translateY(-10px);
				}

				h3 {
					position: relative;
					padding-block: 37px;
					border: 2px solid #c7ff97;
					border-radius: 14px;
					font-family: var(--font-geologica);
					font-size: 17px;
					font-weight: 600;
					color: #2c3640;
					text-align: center;

					&::after {
						content: "";
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background-color: #fff;
						border-radius: 14px;
						z-index: 2;
					}

					span:first-child {
						position: relative;
						z-index: 3;
					}

					.battery {
						position: absolute;
						right: 11px;
						bottom: -55px;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 45px;
						height: 45px;
						border-radius: 50%;
						border: 1px solid #19ab01;
						background-color: #fff;
						box-shadow: 0 1px 50px #6cb42f;
						z-index: 1;

						.battery-tip {
							display: none;
							position: absolute;
							top: 50px;
							right: 0;
							padding: 10px 15px;
							border-radius: 14px;
							background-image: linear-gradient(135deg, #c4e3c9, #cbeeef);
							font-size: 14px;
							color: #000;
							z-index: 5;
							box-shadow: 2px 11px 33px rgba(0, 0, 0, 0.2);

							.battery:hover & {
								display: block;
								animation: fadeIn 0.3s ease-in-out;
							}
						}
					}
				}

				.tariff-speed {
					width: 52%;
					aspect-ratio: 164/136;
					margin-top: 20px;
					margin-inline: auto;
					padding-bottom: 6%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 2px;
					border-radius: 50%;
					background-image: radial-gradient(white 0, white 67%, transparent 0%), conic-gradient(#44c150 0deg, #0af67f var(--gauge-degree), white var(--gauge-degree), white 230deg, #0af67f 230deg, #44c150 360deg);
					background-size:
						100% 100%,
						100% 100%;
					background-position:
						center center,
						center center;
					background-origin: border-box;

					p {
						font-family: var(--font-geologica);
						font-size: 12px;
						font-weight: 500;
						color: #838383;
					}

					strong {
						font-family: var(--font-roboto);
						font-size: 28px;
						color: #19ab01;
					}
				}

				.tariff-price {
					margin-top: -20px;
					font-family: var(--font-geologica);
					font-size: 16px;
					font-weight: 900;
					color: #000;
					text-align: center;
				}

				.tariff-tv-variants {
					display: flex;
					width: calc(100% - 60px);
					margin-top: 20px;
					margin-inline: auto;
					padding: 10px 15px;
					border: 1px solid #19ab01;
					border-radius: 8px;
					background-color: #fff;
					appearance: none;
					outline: none;
					color: #000;
					background-color: #fff;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='95.925 223.925 448.15 256.05' width='448.15px' height='256.05px'%3E%3Cpath d='M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z' fill='%23000000' /%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-size: auto 20%;
					background-position: right 12px center;
				}

				ul {
					margin-top: 28px;
					padding-inline: 30px;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-auto-rows: auto;
					column-gap: 8px;
					row-gap: 25px;

					li {
						display: flex;
						align-items: center;
						gap: 8px;
						font-family: var(--font-geologica);
						font-size: 14px;
						font-weight: 600;
						color: #000;
						white-space: nowrap;
					}
				}

				.btn {
					display: block;
					margin-top: 28px;
					text-align: center;
				}
			}
		}
	}
}

section.cinema {
	padding-block: 26px;
	background-color: #46bf4e;

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;

		@media (max-width: 991px) {
			flex-direction: column-reverse;
			gap: 50px;
		}

		@media (max-width: 575px) {
			align-items: initial;
		}

		.cinema-left {
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: center;
			gap: 16px;

			@media (max-width: 991px) {
				align-items: center;
				text-align: center;
			}

			p {
				margin-top: 0;
			}

			.btn {
				margin-top: 96px;
				padding-inline: 85px;

				@media (max-width: 991px) {
					margin-top: 30px;
					margin-inline: auto;
				}

				@media (max-width: 575px) {
					padding-inline: 50px;
				}
			}
		}

		.cinema-right {
			img {
				@media (max-width: 991px) {
					max-width: 50%;
					margin-inline: auto;
				}
			}
		}
	}
}

section.why-choose {
	padding-top: 82px;
	padding-bottom: 41px;

	@media (max-width: 575px) {
		padding-top: 45px;
		padding-bottom: 25px;
	}

	.reasons {
		margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;

		@media (max-width: 991px) {
			flex-direction: column;
			align-items: initial;
		}

		li {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 17px 39px;
			border-radius: 8px;
			background-image: linear-gradient(104deg, #c3dd82, #42c4dc);
			transition: transform 0.1s ease-in-out;

			@media (max-width: 991px) {
				justify-content: center;
			}

			@media (max-width: 575px) {
				padding: 10px 25px;
				font-size: 18px;
			}

			&:hover {
				transform: translateY(-5px);
			}

			span {
				font-family: var(--font-geologica);
				font-size: 20px;
				font-weight: 700;
				color: #2f2163;
				text-transform: uppercase;
			}
		}
	}
}

section.coverage {
	padding-block: 40px;

	@media (max-width: 575px) {
		padding-block: 25px;
	}

	.section-subtitle {
		margin-top: 28px;

		@media (max-width: 575px) {
			margin-top: 15px;
		}
	}

	form {
		margin-top: 36px;
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 20px;

		@media (max-width: 575px) {
			flex-direction: column;
		}

		.form-input {
			width: 100%;

			label {
				display: block;
				margin-bottom: 8px;
				font-family: var(--font-geologica);
				font-size: 18px;
				font-weight: 500;
				color: #252525;
			}

			input[type="text"] {
				display: block;
				width: 100%;
				padding: 19px 24px;
				border: none;
				border-radius: 14px;
				background-color: #e9e9e9;
				font-family: var(--font-geologica);
				font-size: 16px;
				color: #000;
				outline: none;

				@media (max-width: 991px) {
					padding: 14px 20px;
				}

				&::placeholder {
					color: #464646;
				}
			}
		}

		button {
			padding-inline: 110px;

			@media (max-width: 991px) {
				padding-inline: 70px;
			}

			@media (max-width: 767px) {
				padding-inline: 40px;
			}

			@media (max-width: 575px) {
				width: 100%;
			}
		}
	}
}

section.included {
	padding-top: 40px;
	padding-bottom: 80px;

	@media (max-width: 991px) {
		padding-bottom: 40px;
	}

	@media (max-width: 575px) {
		padding-block: 40px;
	}

	.included-list {
		margin-top: 40px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(200px, auto);
		row-gap: 40px;
		column-gap: 20px;

		@media (max-width: 991px) {
			display: flex;
			flex-direction: column;
		}

		li {
			position: relative;
			padding: 38px 42px;

			@media (max-width: 767px) {
				padding: 30px 35px;
			}

			&:hover {
				&::before {
					opacity: 1;
				}
			}

			&::before {
				content: "";
				display: block;
				opacity: 0;
				position: absolute;
				left: 0;
				top: 0;
				width: 82.75%;
				height: 100%;
				box-shadow: 0 4px 30px #5e479c;
				z-index: -2;
				transition: opacity 0.1s ease-in-out;
			}

			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				background-image: linear-gradient(to bottom, rgba(94, 71, 156, 0.5), #2f2163 82%);
			}

			&:nth-child(2n + 2) {
				transform: translateY(40px);

				@media (max-width: 991px) {
					transform: none;
				}
			}

			img {
				position: absolute;
				left: 0;
				top: 0;
				object-fit: cover;
				object-position: center;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			h3 {
				font-family: var(--font-geologica);
				font-size: 32px;
				font-weight: 900;
				color: #fff;

				@media (max-width: 767px) {
					font-size: 28px;
				}

				@media (max-width: 575px) {
					font-weight: 600;
					font-size: 24px;
				}
			}

			p {
				margin-top: 20px;
				font-family: var(--font-geologica);
				font-size: 18px;
				font-weight: 900;
				color: #fff;

				@media (max-width: 767px) {
					font-size: 16px;
				}

				@media (max-width: 575px) {
					margin-top: 15px;
					font-weight: 600;
					font-size: 14px;
				}
			}
		}
	}
}

section.faqs {
	padding-block: 40px;

	@media (max-width: 575px) {
		padding-block: 25px;
	}

	ul {
		margin-top: 40px;

		@media (max-width: 575px) {
			margin-top: 25px;
		}

		.faqs-item {
			border-bottom: 1px solid #e7e7e7;

			&:last-of-type {
				border-bottom: none;
			}

			details {
				overflow: hidden;

				summary {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 16px;
					padding: 16px 0;
					font-family: var(--font-geologica);
					font-size: 20px;
					font-weight: 500;
					color: #46be4e;
					cursor: pointer;
					transition: color 0.1s ease-in-out;

					@media (max-width: 575px) {
						padding: 10px 0;
						font-size: 18px;
					}

					&:hover {
						@media (min-width: 576px) {
							color: #000;

							&::after {
								color: #000;
							}
						}
					}

					&::after {
						content: "+";
						font-size: 40px;
						font-weight: 200;
						line-height: 25px;
						color: #46be4e;
						transition: transform 0.3s ease;

						@media (max-width: 575px) {
							font-size: 30px;
						}
					}
				}

				&[open] {
					summary {
						color: #000;

						&::after {
							color: #000;
						}

						&::after {
							transform: rotate(225deg);
						}
					}
				}
			}

			.faqs-content {
				padding: 0 24px 24px;
				font-size: 16px;

				@media (max-width: 575px) {
					padding: 0 18px 18px;
				}
			}
		}
	}
}

.switching-contacts-wrapper {
	margin-top: 40px;
	position: relative;

	@media (max-width: 575px) {
		margin-top: 25px;
	}

	&::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url("../images/switching-contacts-bg.svg") right center no-repeat;
		z-index: 1;
		opacity: 1;

		@media (max-width: 991px) {
			opacity: 0.3;
		}
	}
}

section.switching {
	padding-block: 60px;
	background-image: url("../images/switching-bg.png"), linear-gradient(to right, #c3dd82, #42c4dc);
	background-position:
		center center,
		0 0;
	background-size: cover, auto;

	@media (max-width: 575px) {
		padding-block: 40px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;

		.section-title {
			text-align: center;

			&::before {
				display: none;
			}
		}

		.section-subtitle {
			text-align: center;
		}

		.btn {
			margin-top: 56px;
			margin-inline: auto;

			@media (max-width: 575px) {
				margin-top: 30px;
			}
		}
	}
}

section.contacts {
	padding-top: 70px;
	padding-bottom: 80px;
	background-color: #5e479c;

	@media (max-width: 575px) {
		padding-block: 50px;
	}

	.container {
		position: relative;
		z-index: 2;

		.section-title {
			color: transparent;
			background-image: linear-gradient(to right, #c3dd82, #42c4dc);
			background-clip: text;
			position: relative;

			&::before {
				max-width: 132px;
				height: 6px;
				margin-top: -10px;
				background:
					radial-gradient(3px circle at 3px 50%, #c3dd82 100%, transparent 100%),
					radial-gradient(3px circle at calc(100% - 3px) 50%, #42c4dc 100%, transparent 100%),
					linear-gradient(to right, #c3dd82, #42c4dc) left 50% / 100% 2px no-repeat;
			}
		}

		.contacts-wrapper {
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
			gap: 20px;

			@media (max-width: 991px) {
				flex-direction: column;
			}

			.contacts-item {
				display: flex;
				align-items: center;
				gap: 35px;

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

				img {
					@media (max-width: 991px) {
						max-width: 50px;
					}

					@media (max-width: 575px) {
						max-width: 40px;
					}
				}

				span,
				p {
					font-family: var(--font-geologica);
					font-size: 20px;
					color: #fff;

					@media (max-width: 991px) {
						font-size: 18px;
					}

					@media (max-width: 575px) {
						font-size: 16px;
					}

					a {
						color: inherit;
						text-decoration: none;

						&:hover {
							text-decoration: underline;
						}
					}
				}

				p:not(:last-of-type) {
					margin-bottom: 5px;
				}

				p:first-of-type {
					margin-top: 16px;
				}
			}
		}
	}
}

section.all-news {
	padding-top: 50px;

	.empty-list {
		margin-top: 30px;
		color: #777;
	}

	.news-list {
		--gap: 30px;
		--column-count: 3;
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--gap);
		row-gap: 50px;

		@media (max-width: 991px) {
			--column-count: 2;
		}

		@media (max-width: 767px) {
			--column-count: 1;
		}

		> li {
			width: calc((100% - (var(--gap) * (var(--column-count) - 1))) / var(--column-count));
			transition: transform 0.1s ease-in-out;

			&:hover {
				transform: translateY(-10px);
			}

			.preview-img {
				width: 100%;
				height: auto;
				object-fit: cover;
				aspect-ratio: 4/3;
			}

			.news-title {
				display: inline-block;
				margin-top: 16px;
				font-size: 20px;
				font-weight: 500;
				color: #000;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			.news-date {
				margin-top: 5px;
				font-size: 13px;
				color: #777;
			}

			.news-excerpt {
				margin-top: 8px;

				.news-detail-link {
					color: #46be4e;

					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}
}

section.news-detail {
	padding-top: 50px;
	padding-bottom: 100px;

	.news-date {
		margin-top: 5px;
		color: #777;

		@media (max-width: 991px) {
			text-align: center;
		}
	}

	.news-content {
		margin-top: 30px;
		font-size: 18px;
		line-height: 1.5;

		.news-img {
			max-width: 50%;
			float: left;
			margin-right: 30px;
			margin-bottom: 30px;

			@media (max-width: 767px) {
				max-width: 100%;
				float: none;
			}
		}

		p:not(:last-of-type) {
			margin-bottom: 10px;
		}
	}
}

footer {
	padding-top: 60px;
	padding-bottom: 15px;

	@media (max-width: 991px) {
		padding-top: 40px;
	}

	.footer-top {
		display: flex;
		justify-content: space-between;
		gap: 20px;

		@media (max-width: 991px) {
			flex-direction: column;
		}

		.footer-logo {
			padding-top: 25px;

			@media (max-width: 991px) {
				padding-top: 0;
				text-align: center;
			}

			img {
				@media (max-width: 991px) {
					display: inline-block;
				}

				@media (max-width: 575px) {
					max-width: 30%;
				}
			}
		}

		.footer-menu {
			flex-grow: 1;
			display: flex;
			justify-content: center;

			> ul {
				display: grid;
				grid-auto-flow: column;
				grid-template-rows: auto auto auto;
				column-gap: 6vw;

				@media (max-width: 991px) {
					display: flex;
					flex-direction: column;
				}

				> li {
					@media (max-width: 991px) {
						margin-bottom: 0 !important;
					}

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

					&:hover {
						> a {
							@media (min-width: 992px) {
								color: #46be4e;

								&::after {
									border-right-color: #46be4e;
									border-bottom-color: #46be4e;
									transform: rotate(225deg) translateY(-5px) translateX(-5px);
								}
							}
						}
					}

					@media (max-width: 991px) {
						&.active > a {
							color: #46be4e;

							&::after {
								border-right-color: #46be4e;
								border-bottom-color: #46be4e;
								transform: rotate(225deg) translateY(-5px) translateX(-5px);
							}
						}
					}

					&:has(ul) {
						position: relative;

						> a::after {
							content: "";
							display: block;
							width: 10px;
							height: 10px;
							margin-top: -8px;
							margin-left: 0.75rem;
							border: 1px solid #000;
							border-left-color: transparent;
							border-top-color: transparent;
							transform: rotate(45deg);
							transition:
								border-color 0.1s ease-in-out,
								transform 0.1s ease-in-out;
						}
					}

					a {
						display: flex;
						align-items: center;
						font-family: var(--font-dm-sans);
						font-size: 18px;
						font-weight: 500;
						color: #000;
						text-decoration: none;
						transition: color 0.1s ease-in-out;

						@media (max-width: 991px) {
							padding: 10px;
							justify-content: center;
						}

						@media (min-width: 992px) {
							&:hover {
								color: #46be4e;
							}
						}
					}

					ul {
						position: absolute;
						bottom: 100%;
						opacity: 0;
						visibility: hidden;
						padding: 8px;
						border: 1px solid #46be4e;
						border-radius: 14px;
						border-bottom-left-radius: 0;
						background-color: #fff;
						transform: translateY(-20px);
						transition:
							opacity 0.1s ease-in-out,
							visibility 0.1s ease-in-out,
							transform 0.1s ease-in-out;
						z-index: 100;

						@media (max-width: 991px) {
							display: none;
							opacity: 1;
							border: none;
							padding: 0;
							visibility: visible;
							position: static;
							transform: none;
							text-align: center;

							li.active & {
								display: block;
							}

							li a {
								padding: 5px 16px;
								font-size: 16px;
							}
						}

						li:hover & {
							opacity: 1;
							visibility: visible;
							transform: translateY(0);
						}

						a {
							padding: 7px 16px;
						}
					}
				}
			}
		}

		.footer-socials {
			h3 {
				font-family: var(--font-geologica);
				font-size: 24px;
				font-weight: 400;
				color: #000;

				@media (max-width: 991px) {
					text-align: center;
				}

				@media (max-width: 575px) {
					font-size: 22px;
				}
			}

			ul {
				margin-top: 20px;
				display: flex;
				align-items: center;
				gap: 16px;

				@media (max-width: 991px) {
					justify-content: center;
				}

				li {
					padding: 7px;

					@media (max-width: 575px) {
						padding: 0;
					}

					&:first-child {
						padding-left: 0;
					}

					&:last-child {
						padding-right: 0;
					}

					a {
						display: block;
						padding: 7px;

						img {
							transition: filter 0.1s ease-in-out;

							a:hover & {
								filter: brightness(0) saturate(100%) invert(99%) sepia(89%) saturate(3948%) hue-rotate(333deg) brightness(97%) contrast(107%);
							}
						}
					}
				}
			}
		}
	}

	.footer-bottom {
		margin-top: 30px;
		display: flex;
		align-items: center;
		gap: 15px;

		@media (max-width: 767px) {
			flex-direction: column;
		}

		@media (max-width: 575px) {
			margin-top: 15px;
		}

		@media (max-width: 991px) {
			flex-wrap: wrap;
			justify-content: center;
		}

		span {
			font-family: var(--font-geologica);
			font-size: 16px;
			color: #000;
		}

		img {
			display: inline-block;
		}
	}
}

.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	align-items: center;
	justify-content: center;
	z-index: 100;

	.popup-content {
		position: relative;
		padding: 30px;
		width: 600px;
		max-width: 95%;
		border-radius: 12px;
		background-color: #fff;
		text-align: center;

		#coverage-popup & {
			width: 1000px;
		}

		@media (max-width: 575px) {
			width: 90%;
			padding: 20px;
		}

		&:has(form.submitting),
		.loading & {
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 12px;
				z-index: 10;
			}

			.wpcf7-spinner,
			.loader {
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(calc(50% - 46px)) translateY(-50%);
				width: 16px;
				height: 16px;
				box-shadow:
					0 30px,
					0 -30px;
				border-radius: 4px;
				background: currentColor;
				margin: -50px auto 0;
				color: #19ab01;
				box-sizing: border-box;
				animation: animloader 2s ease infinite;
				z-index: 11;

				&::before,
				&::after {
					content: "";
					box-sizing: border-box;
					width: 16px;
					height: 16px;
					box-shadow:
						0 30px,
						0 -30px;
					border-radius: 4px;
					background: currentColor;
					color: #19ab01;
					position: absolute;
					left: 30px;
					top: 0;
					animation: animloader 2s 0.2s ease infinite;
				}

				&::before {
					animation-delay: 0.4s;
					left: 60px;
				}
			}
		}

		.popup-close {
			position: absolute;
			top: 10px;
			right: 10px;
			margin: 0;
			padding: 10px;
			border: none;
			cursor: pointer;
			background: none;

			&::before {
				content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/%3E%3C/svg%3E");
				display: block;
				width: 20px;
				height: 20px;
			}
		}

		h2 {
			font-family: var(--font-golos-text);
			font-size: 36px;
			font-weight: 500;
			color: #000;
			line-height: 1.2;

			@media (max-width: 575px) {
				font-size: 20px;
			}
		}

		p {
			margin-top: 16px;
			font-family: var(--font-montserrat);
			font-size: 16px;
			font-weight: 400;
			color: #252525;
			line-height: 1.5;

			@media (max-width: 575px) {
				font-size: 14px;
			}
		}

		.form-result-wrapper {
			display: flex;
			align-items: end;
			gap: 16px;

			.coverage-status {
				text-align: center;
				flex-grow: 1;
				font-size: 26px;
				font-weight: 500;

				span {
					display: none;
					justify-content: center;

					&.available {
						color: green;
					}

					&.not-available {
						color: red;
					}

					&.not-found {
						color: orange;
					}
				}
			}
		}

		form {
			margin-top: 24px;
			display: flex;
			flex-direction: column;
			gap: 16px;

			&#popup-coverage-form {
				flex-direction: row;
				width: 60%;
			}

			.form-input {
				flex-grow: 1;

				label {
					display: block;
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 500;
					color: #252525;
					margin-bottom: 6px;
					margin-left: 8px;
					text-align: left;

					.form-input:has([required]) &::after,
					.form-input:has([aria-required="true"]) &::after {
						content: "*";
						color: red;
						margin-left: 4px;
					}
				}

				input[type="text"],
				input[type="tel"],
				input[type="email"],
				select {
					display: block;
					width: 100%;
					padding: 12px 20px;
					border: 1px solid #19ab01;
					border-radius: 14px;
					font-family: var(--font-inter);
					font-size: 14px;
					color: #000;
					outline: none;

					&::placeholder {
						color: #252525;
					}
				}

				select {
					appearance: none;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='95.925 223.925 448.15 256.05' width='448.15px' height='256.05px'%3E%3Cpath d='M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z' fill='%23000000' /%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-size: auto 20%;
					background-position: right 12px center;
					padding-right: 40px;
				}

				span.wpcf7-not-valid-tip {
					margin-top: 5px;
					margin-left: 8px;
					font-family: var(--font-golos-text);
					font-size: 14px;
					color: red;
					line-height: 1.2;
					text-align-last: left;

					form.init & {
						display: none;
					}

					@media (max-width: 767px) {
						font-size: 13px;
					}
				}
			}
		}

		.form-button {
			display: flex;
			justify-content: center;

			#popup-coverage-form & {
				align-items: end;
			}

			button[type="submit"],
			input[type="submit"] {
				margin-top: 10px;
				padding: 10px 28px;
				font-size: 16px;
				border: none;

				#popup-coverage-form & {
					margin-top: 0;
				}
			}

			.loader {
				display: none;
			}
		}

		#coverage-map {
			height: 500px;
			margin-top: 30px;
		}
	}
}

.wpcf7-spinner {
	display: none;
}

.wpcf7 {
	form {
		.wpcf7-response-output {
			margin-top: 1rem;
			margin-inline: 0;
			padding: 10px;
			border: 1px solid transparent;
			border-radius: 12px;

			.wpcf7-form.invalid & {
				border-color: red;
				background-color: rgba(242, 92, 73, 0.1);
				color: red;
			}
		}
	}
}