@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..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-golos-text: "Golos Text", sans-serif;
	--font-inter: "Inter", sans-serif;
	--font-lexend: "Lexend", sans-serif;
	--font-montserrat: "Montserrat", sans-serif;
	--font-roboto: "Roboto", sans-serif;

	--color-primary: #ee1d23;
	--color-black: #000;
	--color-white: #fff;
	--color-dark: #2f2e3d;
	--color-grey: #b3b3b3;
	--color-bg-grey: #f2f2f7;
}

@keyframes animloader {
	0% {
		top: 50%;
		color: var(--color-primary);
	}
	50% {
		top: calc(50% + 30px);
		color: rgba(0, 0, 0, 0.2);
	}
	100% {
		top: 50%;
		color: var(--color-primary);
	}
}

body {
	font-family: var(--font-montserrat);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	background-color: var(--color-white);
	color: var(--color-dark);
}

.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: 11px 37px;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: var(--color-primary);
	font-family: var(--font-montserrat);
	font-size: 20px;
	font-weight: 500;
	color: var(--color-white);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color 0.1s ease-in-out,
		border-color 0.1s ease-in-out,
		background-color 0.1s ease-in-out;

	&.btn-white {
		border: 1px solid var(--color-primary);
		color: var(--color-dark);
		background-color: var(--color-white);
		font-weight: 400;

		&:hover {
			border-color: transparent;
			background-color: var(--color-primary);
			color: var(--color-white);
		}
	}

	&:hover {
		background-color: var(--color-white);
		border-color: var(--color-primary);
		color: var(--color-dark);
	}

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

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

.section-title {
	font-family: var(--font-golos-text);
	font-size: 48px;
	font-weight: 600;
	color: var(--color-black);
	text-align: center;

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

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

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

.section-subtitle {
	margin-top: 16px;
	font-family: var(--font-golos-text);
	font-size: 24px;
	font-weight: 400;
	color: var(--color-dark);
	text-align: center;

	@media (max-width: 991px) {
		margin-top: 12px;
		font-size: 20px;
	}

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

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

	.logo {
		order: 1;

		img {
			max-width: 160px;

			@media (max-width: 575px) {
				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: var(--color-primary);
					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 var(--color-primary);
				}

				&::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: var(--color-bg-grey);
				z-index: 15;
				overflow-y: auto;
				transition: left 0.3s ease-in-out;
			}

			> li {
				@media (min-width: 992px) {
					&:hover {
						> a {
							color: var(--color-primary);

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

				@media (max-width: 991px) {
					&.active {
						> a {
							color: var(--color-primary);

							&::after {
								border-right-color: var(--color-primary);
								border-bottom-color: var(--color-primary);
								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 var(--color-black);
							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: 10px;
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 400;
					color: var(--color-black);
					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 var(--color-primary);
						border-radius: 12px;
						border-top-left-radius: 0;
						background-color: var(--color-white);
						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: var(--color-primary);
						}

						@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;
		padding: 9px 19px;
		font-size: 16px;

		@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 {
	.container {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-top: 20px;
		overflow-y: hidden;

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

		.hero-left {
			width: 45%;

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

			h1 {
				font-family: var(--font-golos-text);
				font-size: 56px;
				font-weight: 700;
				color: var(--color-black);

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

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

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

			p {
				margin-top: 24px;
				font-family: var(--font-montserrat);
				font-size: 18px;
				font-weight: 400;
				color: var(--color-black);
			}

			.btn {
				margin-top: 48px;

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

		.hero-right {
			img {
				transform: translateY(25px);

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

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

section.tariffs {
	padding-bottom: 68px;
	background-color: var(--color-bg-grey);

	@media (max-width: 1199px) {
		padding-bottom: 50px;
	}

	.container {
		padding-top: 60px;
		position: relative;

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

		.switch-provider {
			display: block;
			width: 273px;
			height: 149px;
			padding: 24px 35px 51px 39px;
			position: absolute;
			right: 1.5rem;
			top: 0;
			margin-top: -85px;
			border-radius: 23px;
			background-image: url("../images/switch-provider-border.svg");
			background-size: 100% 100%;
			font-family: var(--font-montserrat);
			font-size: 18px;
			font-weight: 400;
			color: var(--color-black);
			line-height: 1.2;
			text-decoration: none;
			transition: transform 0.1s ease-in-out;

			@media (max-width: 991px) {
				position: static;
				margin-top: 0;
				margin-bottom: 20px;
				margin-inline: auto;
			}

			&::after {
				content: url("../images/arrow.svg");
				margin-left: 20px;
			}

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

		.tariffs-list {
			margin-top: 60px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			text-align: center;

			@media (max-width: 991px) {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				column-gap: 20px;
				row-gap: 40px;
			}

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

			> li {
				border: 1px solid var(--color-grey);
				border-radius: 16px;
				background-color: var(--color-white);
				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
				padding: 28px 32px;
				position: relative;
				transition: transform 0.1s ease-in-out;

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

				.tariff-bage {
					display: block;
					padding: 5px 14px;
					position: absolute;
					left: 50%;
					top: 0;
					transform: translateX(-50%) translateY(-50%);
					background-color: var(--color-primary);
					border-radius: 9999px;
					font-family: var(--font-montserrat);
					font-size: 20px;
					font-weight: 700;
					color: var(--color-white);
					line-height: 1.4;
				}

				h3 {
					font-weight: 700;
					font-size: 20px;
					color: var(--color-black);
					line-height: 1.4;
				}

				.tariff-speed {
					margin-top: 8px;
					font-family: var(--font-golos-text);
					font-size: 38px;
					font-weight: 700;
					color: var(--color-primary);

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

				.tariff-price {
					margin-top: 8px;
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 400;
					color: var(--color-dark);
					line-height: 1.5;

					span {
						font-size: 20px;
						font-weight: 500;
						color: var(--color-black);
					}
				}

				.tariff-tv-variants {
					width: 100%;
					margin-top: 20px;
					padding: 10px 35px 10px 15px;
					border: 1px solid var(--color-primary);
					border-radius: 8px;
					appearance: none;
					outline: none;
					color: var(--color-black);
					background-color: var(--color-white);
					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: 32px;

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

					li {
						display: flex;
						gap: 16px;
						font-family: var(--font-montserrat);
						font-size: 16px;
						font-weight: 400;
						color: var(--color-black);
						line-height: 1.5;
						text-align: left;

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

							@media (max-width: 575px) {
								margin-bottom: 8px;
							}
						}

						&::before {
							content: url("../images/check.svg");
							display: block;
							line-height: 1;
						}
					}
				}

				.btn {
					margin-top: 24px;
					padding: 9px 19px;
					font-size: 16px;
				}
			}
		}
	}
}

section.cinema {
	padding: 83px 0 40px 0;

	@media (max-width: 1199px) {
		padding-top: 60px;
	}

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

	.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;
			}

			h2 {
				font-family: var(--font-lexend);
				font-size: 48px;
				font-weight: 500;
				color: var(--color-black);
				line-height: 1.33;

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

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

			p {
				margin-top: 10px;
				font-family: var(--font-inter);
				font-size: 24px;
				font-weight: 400;
				color: #767676;
				line-height: 1.17;

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

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

			ul {
				margin-top: 20px;

				li {
					display: flex;
					align-items: center;
					gap: 24px;
					font-family: var(--font-inter);
					font-size: 18px;
					font-weight: 400;
					color: #767676;
					line-height: 1.56;

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

			.btn {
				margin-top: 32px;
				padding-inline: 23px;

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

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

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

section.features {
	margin-bottom: 20px;
	padding-top: 40px;

	@media (max-width: 1199px) {
		padding-top: 30px;
	}

	.features-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;

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

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

		li {
			text-align: center;

			.feature-name {
				font-family: var(--font-golos-text);
				font-size: 46px;
				font-weight: 700;
				color: var(--color-primary);
				line-height: 1.2;
			}

			.feature-descripion {
				margin-top: 8px;
				font-family: var(--font-montserrat);
				font-size: 18px;
				font-weight: 400;
				color: var(--color-dark);
				line-height: 1.5;
			}
		}
	}
}

section.reasones {
	margin-top: 20px;
	padding-bottom: 40px;
	background: url("../images/features-bg.svg") left 20px top 120px no-repeat;

	@media (max-width: 1199px) {
		padding-bottom: 30px;
	}

	.section-title {
		margin-top: 20px;

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

	.reasones-list {
		margin-top: 80px;
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(6, 1fr);

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

		li {
			padding: 28px 18px 18px 18px;
			border: 1px solid rgba(120, 120, 120, 0.2);
			border-radius: 16px;
			background-color: var(--color-white);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
			grid-column: span 2;

			@media (max-width: 767px) {
				grid-column: span 6;
			}

			&:nth-child(5n + 4),
			&:nth-child(5n + 5) {
				grid-column: span 3;

				@media (max-width: 767px) {
					grid-column: span 6;
				}
			}

			.reasone-name {
				display: flex;
				align-items: center;
				gap: 10px;

				span {
					font-family: var(--font-golos-text);
					font-size: 18px;
					font-weight: 600;
					color: var(--color-dark);
					line-height: 1.2;
				}
			}

			.reasone-description {
				margin-top: 24px;
				font-family: var(--font-montserrat);
				font-size: 16px;
				font-weight: 500;
				color: #505052;
				line-height: 1.2;
				opacity: 0.8;
			}
		}
	}
}

section.coverage {
	padding-block: 40px;

	@media (max-width: 1199px) {
		padding-block: 30px;
	}

	form {
		margin-top: 60px;
		padding: 28px 90px;
		display: flex;
		flex-wrap: wrap;
		align-items: start;
		justify-content: space-between;
		column-gap: 20px;
		row-gap: 36px;
		border: 1px solid var(--color-primary);
		border-radius: 8px;

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

		@media (max-width: 767px) {
			row-gap: 20px;
		}

		@media (max-width: 575px) {
			flex-direction: column;
			column-gap: 0;
			padding-inline: 30px;
		}

		.coverage-form-title {
			width: 100%;
			font-family: var(--font-golos-text);
			font-size: 24px;
			font-weight: 500;
			color: var(--color-dark);
			text-align: center;

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

		.form-input {
			flex-grow: 1;

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

			input[type="text"] {
				display: block;
				width: 100%;
				padding: 12px 20px;
				border: none;
				border-radius: 14px;
				background-color: var(--color-bg-grey);
				font-family: var(--font-inter);
				font-size: 14px;
				color: var(--color-black);
				outline: none;

				&::placeholder {
					color: var(--color-dark);
				}
			}

			.input-helper {
				margin-top: 8px;
				font-family: var(--font-golos-text);
				font-size: 15px;
				color: var(--color-grey);
				line-height: 1.2;

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

		button {
			padding: 10px 28px;
			font-size: 16px;
			font-weight: 400;

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

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

section.includes {
	padding-top: 40px;
	padding-bottom: 60px;
	background: url("../images/includes-bg.svg") right top no-repeat;

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

	@media (max-width: 575px) {
		background-size: 35% auto;
	}

	.container {
		display: flex;
		gap: 20px;

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

		.includes-left {
			width: 50%;

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

			h2 {
				font-family: var(--font-golos-text);
				font-size: 48px;
				font-weight: 700;
				color: var(--color-black);
				line-height: 1.2;

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

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

			ul {
				margin-top: 24px;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				column-gap: 20px;
				row-gap: 16px;
				counter-reset: counter;

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

				li {
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 400;
					color: var(--color-dark);
					line-height: 1.68;
					counter-increment: counter;

					&::before {
						content: counter(counter, decimal-leading-zero);
						display: block;
						margin-bottom: 5px;
						font-family: var(--font-montserrat);
						font-size: 32px;
						font-weight: 700;
						color: #f25c49;
					}
				}
			}
		}

		.includes-right {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

section.faqs {
	padding-block: 60px;

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

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

	.section-title {
		font-weight: 700;
		color: var(--color-primary);
	}

	ul {
		margin-top: 40px;

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

		.faqs-item {
			border-bottom: 1px solid var(--color-dark);

			details {
				overflow: hidden;

				summary {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 16px;
					padding: 5px 0;
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 400;
					color: var(--color-dark);
					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: var(--color-primary);

							&::after {
								color: var(--color-primary);
							}
						}
					}

					&::after {
						content: url("../images/arrow-down.svg");
						display: block;
						height: 46px;
						transition: transform 0.3s ease;
					}
				}

				&[open] {
					summary {
						color: var(--color-black);

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

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

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

section.switch {
	margin-block: 60px;
	padding-block: 60px;
	background-color: var(--color-primary);

	@media (max-width: 1199px) {
		margin-block: 40px;
	}

	.container {
		text-align: center;

		.section-title,
		.section-subtitle {
			color: var(--color-white);
		}

		.btn {
			margin-top: 37px;
			padding: 18px 31px;
			font-family: var(--font-roboto);
			font-size: 20px;
			font-weight: 500;
			color: var(--color-primary);
			transition: opacity 0.1s ease-in-out;

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

			&:hover {
				border-color: var(--color-primary);
				background-color: var(--color-white);
				opacity: 0.9;
			}
		}
	}
}

section.phones {
	padding-top: 60px;
	margin-bottom: 40px;

	.container {
		position: relative;
		padding: 50px 186px 50px 87px;
		background-color: var(--color-bg-grey);
		border-radius: 20px;

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

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

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

		> span {
			display: flex;
			width: 120px;
			height: 120px;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 21px;
			top: 0;
			transform: translateY(-50%);
			background-color: var(--color-primary);
			border-radius: 50%;
			font-family: var(--font-montserrat);
			font-size: 15px;
			color: var(--color-white);
			line-height: 1.53;
			text-transform: uppercase;
			text-align: center;

			@media (max-width: 575px) {
				right: auto;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}

		ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30px;

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

			li {
				display: grid;
				grid-template-columns: 56px auto;
				grid-template-rows: auto auto;
				column-gap: 20px;
				flex-grow: 1;

				.operator-logo {
					grid-column: 1 / 1;
					grid-row: span 2;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 56px;
					height: 56px;
					background-color: var(--color-white);
					border-radius: 50%;
				}

				.operator-name {
					grid-column: 2 / 2;
					grid-row: 1 / 1;
					font-family: var(--font-montserrat);
					font-size: 15px;
					font-weight: 400;
					color: var(--color-black);
				}

				.phone-number {
					grid-column: 2 / 2;
					grid-row: 2 / 2;

					a {
						font-family: var(--font-montserrat);
						font-size: 21px;
						font-weight: 600;
						color: var(--color-black);
						text-decoration: none;
						transition: color 0.1s ease-in-out;

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

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

	.empty-list {
		margin-top: 30px;
		text-align: center;
		color: var(--color-dark);
	}

	.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: var(--color-black);
				text-decoration: none;

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

			.news-date {
				margin-top: 5px;
				font-size: 13px;
				color: var(--color-grey);
			}

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

				.news-detail-link {
					color: var(--color-primary);

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

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

	.news-date {
		margin-top: 5px;
		color: var(--color-grey);
		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 {
	margin-top: 40px;
	padding-block: 50px;

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

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

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

		.footer-left {
			@media (max-width: 575px) {
				img {
					max-width: 60%;
					margin-inline: auto;
				}
			}

			.copyright {
				margin-top: 10px;
				font-family: var(--font-montserrat);
				font-size: 17px;
				color: var(--color-grey);
			}
		}

		.footer-center {
			.footer-menu {
				li {
					margin-bottom: 8px;

					a {
						font-family: var(--font-montserrat);
						font-size: 16px;
						color: #070527;
						line-height: 1.625;
						text-decoration: none;

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

			.payment-methods {
				display: flex;
				align-items: center;
				gap: 12px;

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

		.footer-right {
			p {
				margin-top: 3px;

				a {
					font-family: var(--font-montserrat);
					font-size: 18px;
					text-decoration: none;

					.footer-email & {
						font-weight: 600;
						color: var(--color-dark);
						line-height: 1.44;
						text-transform: uppercase;
					}

					.footer-phone & {
						font-weight: 500;
						color: var(--color-black);
						line-height: 1.83;
					}

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

.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: var(--color-white);
		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: var(--color-primary);
				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: var(--color-primary);
					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: var(--color-black);
			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: var(--color-dark);
			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: var(--color-dark);
					margin-bottom: 6px;
					margin-left: 8px;
					text-align: left;

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

				input[type="text"],
				input[type="tel"],
				select {
					display: block;
					width: 100%;
					padding: 12px 20px;
					border: none;
					border-radius: 14px;
					background-color: var(--color-bg-grey);
					font-family: var(--font-inter);
					font-size: 14px;
					color: var(--color-black);
					outline: none;

					&::placeholder {
						color: var(--color-dark);
					}
				}

				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: var(--color-primary);
					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;

				#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: var(--color-primary);
				background-color: rgba(242, 92, 73, 0.1);
				color: var(--color-primary);
			}
		}
	}
}