@import "./assets/styles/normalize.css";
@import "./assets/styles/fonts.css";

:root {
	font-family: "Bounded", sans-serif;
	--text-white: #ffffff;
	--text-black: #111314;
	--text-yellow: #deff04;
	--text-green: #13df5e;
}

.main-link {
	color: var(--text-green);
	cursor: pointer;
	transition: 0.4s;
}
.main-link:visited {
	color: #13df5e;
}

.main-link:hover {
	color: #00ff5e;
}

.main-link:active {
	color: #0aa344;
}

.hero-wrap {
	width: 100%;
	background: var(--text-black);

	.hero {
		padding: 4.6% 0% 9% 13.1%;
		background: url("./assets/images/hero_bg.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: right;
		& > span {
			color: var(--text-white);
			font-weight: 500;
			font-size: 81px;
			line-height: 114%;
			letter-spacing: 0;
			margin-bottom: 3px;
			display: block;
			text-transform: uppercase;
		}
		.hero-text {
			color: var(--text-white);
			font-family: "Inter";
			font-weight: 400;
			font-size: 31px;
			line-height: 114%;
			letter-spacing: 2px;
			max-width: 430px;
			width: 100%;
			margin-bottom: 38px;
		}

		h1 {
			font-weight: 500;
			font-size: 81px;
			line-height: 114%;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--text-green);
			margin-bottom: 6px;
		}

		ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 16px;

			li {
				display: flex;
				gap: 23px;
				.text-wrap {
					color: var(--text-white);
					font-family: Inter;
					font-weight: 400;
					font-size: 22px;
					line-height: 120%;
					letter-spacing: 0;
					max-width: 460px;
					width: 100%;
				}
			}
		}
	}
}

.slider {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: -5.2%;
	margin-left: 1.5%;
	margin-bottom: 72px;
	.slider-container {
		position: relative;
		width: 100%;
		max-width: 1093px;
	}

	.swiper {
		width: 100%;
		height: 336px;
		border-radius: 23px;
		overflow: hidden;
	}

	.swiper-slide {
		background: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2rem;
		border-radius: 23px;
		width: 261px !important;
		height: 336px !important;
		border: var(--text-white) 2px solid;

		img {
			object-fit: cover;
			max-width: 100%;
			border-radius: 23px;
			width: 261px !important;
			height: 336px !important;
		}
	}

	/* Кастомные кнопки */
	.slider-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);

		background: rgba(255, 255, 255, 0.2);
		border: none;
		color: #fff;
		font-size: 2rem;
		cursor: pointer;
		transition: background 0.3s ease;
		z-index: 10;
		width: 79px;
		height: 79px;
	}

	.prev-btn,
	.prev-btn_second {
		left: -45px;
		background: url("./assets/images/slider-btn.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.next-btn,
	.next-btn_second {
		right: -40px;
		background: url("./assets/images/slider-btn-next.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.swiper-button-lock {
		display: block !important;
	}
}

.about {
	margin: 0 auto;
	text-align: center;
	max-width: 935px;
	margin-bottom: 57px;

	h2 {
		font-weight: 700;
		font-size: 53px;
		line-height: 120%;
		letter-spacing: 0;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 12px;
	}
	p {
		font-family: "Inter";
		font-weight: 400;
		font-size: 35px;
		line-height: 120%;
		letter-spacing: 1px;
		text-align: center;
	}
}

.preferences {
	margin: 0 auto;
	margin-bottom: 48px;
	.cards {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}

	.card-img-wrap {
		max-width: 417px;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.card {
		padding: 10px 130px 10px 48px;
		box-sizing: border-box;
		width: 100%;
		max-width: 1180px;
		height: 350px;
		border-radius: 30px;
		background-image: url("./assets/images/card-bg.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		justify-content: space-between;
		color: var(--text-white);
		align-items: center;
		gap: 12px;
	}

	.card_three {
		background-image: url("./assets/images/card_three.png");
		background-position: left;
	}

	.card-text {
		max-width: 584px;

		h3 {
			font-family: "Inter";
			font-weight: 700;
			font-size: 35px;
			line-height: 120%;
			letter-spacing: 0;
			margin-bottom: 12px;
		}
		p {
			font-family: "Inter";
			font-weight: 400;
			font-size: 20px;
			line-height: 120%;
			letter-spacing: 0%;
			margin-bottom: 19px;
		}

		span {
			font-family: "Inter";
			font-weight: 500;
			font-size: 18px;
			line-height: 120%;
			letter-spacing: 0;
		}

		ul {
			margin-top: 10px;
			list-style: none;
			padding-left: 0;
		}

		ul {
			list-style: none;
			padding-left: 0;
		}

		ul li {
			position: relative;
			padding-left: 18px;
		}

		ul li::before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 11px;
			height: 11px;
			background: url("./assets/images/lst_marker.svg") no-repeat center /
				contain;
		}

		li {
			margin-bottom: 10px;
			font-family: "Inter";
			font-weight: 400;
			font-size: 18px;
			line-height: 103%;
			letter-spacing: 0;
		}
	}
}

.free {
	padding: 160px 0 160px 0;
	background-image: url("./assets/images/free_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	h3 {
		font-weight: 700;
		font-size: 53px;
		line-height: 120%;
		letter-spacing: 0;
		text-align: center;
		text-transform: uppercase;
		color: var(--text-white);
		margin-top: 16px;
	}
	span {
		color: var(--text-green);
	}
	p {
		color: var(--text-white);
		font-family: "Inter";
		font-weight: 400;
		font-size: 35px;
		line-height: 120%;
		letter-spacing: 0;
		text-align: center;
	}
}

.slider-text {
	margin: 0 auto;
	text-align: center;
	p {
		font-family: "Inter";
		font-weight: 400;
		font-size: 35px;
		line-height: 120%;
		letter-spacing: 0;
		margin-bottom: 10px;
	}
	span {
		font-family: "Bounded";
		font-weight: 700;
		font-size: 59px;
		line-height: 120%;
		letter-spacing: 0;
		text-transform: uppercase;
	}
}

.mySwiper_slider {
	margin-top: 3% !important;
}

.mySwiper_slider .mySwiper_second .swiper-slide {
	align-items: flex-start;
	img {
		height: auto !important;
	}
}

.footer-wrap {
	margin-bottom: 80px;
}

.footer {
	margin-top: 2rem;
	padding-top: 11rem;
	position: relative;
	background: url("./assets/images/footer-b-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 862px;
	position: relative;
	.footer-text {
		max-width: 707px;
		padding-left: 206px;

		h2 {
			font-family: "Bounded";
			font-weight: 700;
			font-size: 56px;
			line-height: 104%;
			letter-spacing: 0;
			color: var(--text-green);
			margin-bottom: 31px;
		}

		h3 {
			font-family: "Stolzl";
			font-weight: 500;
			font-size: 27px;
			line-height: 104%;
			letter-spacing: 8%;
			color: var(--text-white);
			margin-bottom: 20px;
		}

		ol {
			font-family: "Stolzl";
			padding-left: 20px;
			color: white;
			font-weight: 400;
			font-size: 22px;
			line-height: 112.99999999999999%;
			letter-spacing: 0;
			max-width: 703px;
			margin-bottom: 45px;
			li {
				margin-bottom: 8px;

				&:last-child {
					margin-bottom: 0;
				}

				span {
					color: var(--text-green);
				}
			}

			li::marker {
				color: var(--text-green);
			}
		}

		.wrap-text {
			display: flex;
			align-items: center;
			gap: 14px;
			background: linear-gradient(90deg, #132c20 0%, #1e4732 100%);
			border-radius: 14px;
			padding: 22px;
			max-width: 514px;
			margin-bottom: 36px;

			p {
				font-family: "Stolzl";
				color: var(--text-white);
				font-weight: 400;
				font-size: 18px;
				line-height: 104%;
				letter-spacing: 0;
				max-width: 492px;
			}
		}

		a {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
			padding: 28px 36px;
			background: var(--text-green);
			color: var(--text-black);
			border-radius: 14px;
			font-family: "Bounded";
			font-weight: 600;
			font-size: 21px;
			line-height: 149%;
			/* letter-spacing: 1px; */
			text-align: center;
			text-transform: uppercase;
			text-decoration: none;
		}
	}

	.author {
		font-family: "Stolzl";
		background: #2b2e34ba;
		backdrop-filter: blur(15.800000190734863px);
		max-width: 344px;
		border-radius: 29px;
		padding: 27px 38px;
		position: absolute;
		right: 13%;
		bottom: 0%;

		h4 {
			font-family: "Stolzl";
			color: var(--text-white);
			font-weight: 300;
			font-size: 16px;
			line-height: 104%;
			letter-spacing: 2.8px;
			margin-bottom: 5px;
		}

		p {
			font-family: "Stolzl";
			font-weight: 600;
			font-size: 20px;
			line-height: 104%;
			letter-spacing: 0;
			color: var(--text-green);
			margin-bottom: 16px;
		}

		ul {
			font-family: "Stolzl";
			font-weight: 400;
			font-size: 16px;
			line-height: 104%;
			letter-spacing: 0;

			list-style: none;
			max-width: 270px;
			padding-left: 15px;
			li {
				list-style-image: url("./assets/images/lst_marker.svg");
				font-weight: 400;
				font-size: 16px;
				line-height: 104%;
				letter-spacing: 0;
				color: var(--text-white);
				margin-bottom: 8px;

				li::last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.hero-wrap {
		.hero {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10.3% 2% 94% 5.4%;
			background: url("./assets/images/hero_bg_mobile.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: bottom;

			& > span {
				font-weight: 500;
				font-size: 43px;
				line-height: 114%;
				letter-spacing: 0;
				text-align: center;

				margin-bottom: 0px;
				align-items: center;
			}
			.hero-text {
				font-weight: 400;
				font-size: 22px;
				line-height: 113%;
				letter-spacing: 0;
				text-align: center;
				margin-bottom: 20px;
			}

			h1 {
				font-weight: 500;
				font-size: 43px;
				line-height: 114%;
				letter-spacing: 0;
				text-align: center;

				margin-bottom: 11px;
				align-items: center;
			}

			ul {
				list-style: none;
				display: flex;
				flex-direction: column;
				margin-left: -2px;
				max-width: 263px;
				gap: 13px;

				li {
					gap: 15px;

					img {
						width: 35px;
						height: 35px;
					}
					.text-wrap {
						color: var(--text-white);
						font-weight: 400;
						font-size: 15px;
						line-height: 119%;
						letter-spacing: 0px;
						text-align: left;

						span {
							font-weight: 500;
							font-size: 15px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
			}
		}
	}

	.slider {
		margin-top: -12.5%;
		margin-left: 7.8%;
		margin-bottom: 35px;

		.swiper {
			height: 192px;
		}
		.swiper-slide {
			width: 149px !important;
			height: 192px !important;
			border-radius: 14px;

			img {
				width: 149px !important;
				height: 192px !important;
			}
		}

		.slider-btn {
			width: 50px;
			height: 50px;
			display: none !important;
		}

		.prev-btn {
			left: -26px;
		}

		.next-btn {
			right: 14px;
		}
	}

	.about {
		width: 318px;
		margin-bottom: 31px;

		h2 {
			font-size: 28px;
			margin-bottom: 12px;
			max-width: 275px;
			margin: 0 auto;
		}
		p {
			font-size: 21px;
			letter-spacing: 0;
		}
	}

	.preferences {
		margin: 0 auto;
		margin-bottom: 48px;
		.cards {
			gap: 10px;
		}

		.card {
			padding: 15px 20px 15px 20px;
			width: 100%;
			max-width: 350px;
			height: auto;
			min-height: 508px;
			overflow: hidden;
			display: flex;
			flex-direction: column-reverse;
			justify-content: flex-end;
			gap: 12px;

			img {
				display: block;
				height: auto;
				max-width: 100%;
			}

			ul li {
				font-size: 14px;
				margin-bottom: 5px;
			}
		}

		.card_three {
			background-image: url("./assets/images/card_three_mobile.png");
			background-position: left;
		}

		.card-text {
			max-width: 292px;
			width: 100%;
			flex: 0 0 auto;

			h3 {
				font-size: 25px;
				line-height: 107%;
				text-align: center;
				margin-bottom: 6px;
			}
			p {
				font-size: 18px;
				margin-bottom: 10px;
				text-align: center;
			}

			span {
				font-family: "Inter";
				font-weight: 500;
				font-size: 20px;
				line-height: 120%;
				letter-spacing: 0;
			}

			ul {
				margin-top: 10px;
				list-style: none;
				padding-left: 0;
			}

			ul {
				list-style: none;
				padding-left: 0;
			}

			ul li {
				position: relative;
				padding-left: 18px;
			}

			ul li::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 11px;
				height: 11px;
				background: url("./assets/images/lst_marker.svg") no-repeat center /
					contain;
			}

			li {
				margin-bottom: 10px;
				font-family: "Inter";
				font-weight: 400;
				font-size: 18px;
				line-height: 103%;
				letter-spacing: 0;
			}
		}
	}

	.free {
		padding: 75px 0;
		background-image: url("./assets/images/free_bg_mobilr.png");

		h3 {
			font-size: 35px;
			line-height: 104%;
			margin-top: 16px;
			text-transform: none;
		}
		p {
			font-family: "Inter";
			font-weight: 400;
			font-size: 22px;
		}
	}

	.slider-text {
		margin: 40px 0 20px 0;
		p {
			font-size: 19px;
			margin-bottom: 10px;
		}
		span {
			font-size: 35px;
			line-height: 104%;
		}
	}

	.mySwiper_slider {
		margin-top: 3% !important;
	}

	.mySwiper_slider .mySwiper_second .swiper-slide {
		align-items: flex-start;
		img {
			height: auto !important;
			border-radius: 0px !important;
		}
	}
	.mySwiper_second {
		border-radius: 0px !important;
	}

	.footer-wrap {
		margin-bottom: 40px;
	}

	.footer {
		margin-top: 29px;
		padding-top: 0;
		background: url("./assets/images/footer-m-bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom center;
		padding: 0 33px;
		box-sizing: border-box;
		min-height: 1150px;

		.footer-text {
			margin: 0 auto;
			max-width: 307px;
			padding-left: 0;
			padding-top: 34px;
			h2 {
				font-family: "Bounded";
				font-size: 28px;
				margin-bottom: 23px;
				text-align: center;
			}

			h3 {
				font-size: 21px;
				margin-bottom: 16px;
				text-align: center;
			}

			ol {
				padding-left: 20px;
				color: white;
				font-weight: 400;
				font-size: 16px;
				line-height: 112.99999999999999%;
				letter-spacing: 0;
				max-width: 307px;
				margin-bottom: 12px;
				li {
					margin-bottom: 8px;

					&:last-child {
						margin-bottom: 0;
					}

					span {
						color: var(--text-green);
					}
				}

				li::marker {
					color: var(--text-green);
				}
			}

			.wrap-text {
				max-width: 320px;
				margin-bottom: -10px;

				p {
					font-size: 15px;
					max-width: 239px;
				}
			}

			a {
				font-size: 18px;
				display: block;
				width: 208px;
				padding: 23px 30px;
				margin: 0 auto;
			}
			a img {
				vertical-align: middle;
			}
		}

		.author {
			font-family: "Stolzl";
			width: 301px;
			padding: 23px 12px 23px 32px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0%;

			h4 {
				font-size: 14px;
				margin-bottom: 4px;
			}

			p {
				font-size: 18px;
				margin-bottom: 13px;
			}

			ul {
				font-family: "Stolzl";
				font-weight: 400;
				font-size: 14px;
				line-height: 104%;
				letter-spacing: 0%;

				max-width: 290px;
				padding-left: 15px;
				padding-right: 15px;
				li {
					font-size: 14px;
				}
			}
		}
	}
}