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

:root {
	--text-white: #fff;
	--main-font: "Onest", Arial, sans-serif;
}

body {
	font-family: var(--main-font);
}

h1,
h2,
h3,
p {
	padding: 0;
	margin: 0;
}

.main {
	margin: 0 auto;
	width: 100%;
	max-width: 1600px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.head {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	background-image: url("./assets/images/head-bg.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	padding-bottom: 135px;
}

.info-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.info-wrap {
	padding: 128px 0 0 210px;
	display: flex;
	align-items: flex-start;
	position: relative;

	.info-text-wrap {
		max-width: 652px;
		position: relative;
		z-index: 2;

		h1 {
			font-weight: 700;
			font-size: 65.11px;
			line-height: 108%;
			letter-spacing: 0;
			color: var(--text-white);
		}

		span {
			font-weight: 400;
			font-size: 58.6px;
			line-height: 120%;
			letter-spacing: 0;
			color: var(--text-white);
		}

		& > p {
			margin-top: 13px;
			font-weight: 400;
			font-size: 26px;
			line-height: 126%;
			letter-spacing: 0;
			color: var(--text-white);
		}
	}

	.info-wrap-img {
		position: absolute;
		top: 12%;
		right: 3%;
	}
}

.info-text-list-wrap {
	position: relative;
	z-index: 2;
	border-radius: 20px;
	padding: 16px 61px 17px 37px;
	margin-top: 40px;
}

.info-text-list-wrap::before {
	border-radius: 20px;
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		130.56deg,
		#ffffff -36.87%,
		rgba(255, 255, 255, 0) 62.34%,
		#ffffff 171.57%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.info-text-list {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.info-text-list-item {
	color: var(--text-white);
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 400;
	font-size: 26px;
	line-height: 100%;
	letter-spacing: 0;

	img {
		height: 31px;
		width: 31px;
	}
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #444;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider-head {
	display: flex;
	flex-direction: row;
}

.slider-head {
	display: flex;
	align-items: center;
	margin-bottom: 33px;

	h2 {
		font-weight: 400;
		font-size: 48px;
		line-height: 120%;
		letter-spacing: 0;
		color: var(--text-white);
	}

	p {
		margin-top: 10px;
		max-width: 613px;
		font-weight: 400;
		font-size: 26px;
		line-height: 119%;
		letter-spacing: 0;
		color: var(--text-white);
	}
}

.slider-wrap {
	padding: 138px 0px 0px 210px;
}

.swiper-slide {
	width: auto !important;
	background: none !important;
	border-radius: 10px !important;
	margin-right: 13px !important;
}

.slider-btns {
	margin-left: 37px;
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 9px;
}

.my-swiper-button-next,
.my-swiper-button-prev {
	cursor: pointer;
	transition: 0.3s;
}

.swiper-button-disabled {
	opacity: 0.5;
	transition: 0.3s;
}

.my-swiper-button-prev {
	padding: 19px 20px 12px 24px;
	position: relative;
	border-radius: 14px 0 14px 14px;
	border: 1px solid transparent;
	cursor: pointer;
}

.my-swiper-button-prev::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px; /* толщина рамки */
	border-radius: inherit;
	background: linear-gradient(
		130.56deg,
		#ffffff -36.87%,
		rgba(255, 255, 255, 0) 62.34%,
		#ffffff 171.57%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.my-swiper-button-next {
	padding: 22px 21px 10px 21px;
	position: relative;
	border-radius: 0 14px 14px 14px;
	border: 1px solid transparent;
	cursor: pointer;
}

.my-swiper-button-next::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		130.56deg,
		#ffffff -36.87%,
		rgba(255, 255, 255, 0) 62.34%,
		#ffffff 171.57%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.swiper-navigation-icon {
	display: none;
}

.slide-img-1 {
	max-width: 311px;
	height: 144px;
}

.slide-img-2 {
	max-width: 257px;
	height: 220px;
}

.slide-img-3 {
	max-width: 294px;
	height: 288px;
}

.slide-img-4 {
	max-width: 277px;
	height: 216px;
}

.content {
	width: 100%;
	max-width: 1600px;
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-title {
	font-weight: 700;
	font-size: 58.6px;
	line-height: 98%;
	letter-spacing: 0%;
	text-align: center;
}

.content-subtitle {
	font-weight: 400;
	font-size: 58.6px;
	line-height: 98%;
	letter-spacing: 0%;
}

.content-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 20px;
	column-gap: 20px;
	margin-top: 38px;
}

.content-card {
	position: relative;
	width: 580px;
	height: 555px;
	/* padding-bottom: 20px; */
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */

	img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		border-radius: 33px;
	}

	.content-card-text {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 325px;

		h3 {
			font-weight: 400;
			font-size: 32px;
			line-height: 97%;
			letter-spacing: 0;
			text-align: center;
			color: var(--text-white);
			max-width: 380px;
			margin: 0;
			margin-bottom: 13px;
		}

		p {
			font-weight: 400;
			font-size: 20px;
			line-height: 130%;
			letter-spacing: 0;
			text-align: center;
			color: var(--text-white);
			max-width: 423px;
		}

		ul {
			margin-top: 9px;
			padding: 0;
			list-style: none;
			font-weight: 400;
			font-size: 20px;
			line-height: 130%;
			letter-spacing: 0;
			color: var(--text-white);
		}
	}
}

.second-row {
	margin-top: 352px !important;
}

.content-card-horizontal {
	position: relative;
	z-index: 2;
	width: 1180px;
	height: 319px;
	/* padding-bottom: 20px; */
	border-radius: 10px;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;

	.content-card-text {
		margin-top: 0 !important;
		align-items: flex-start !important;
		margin-right: 152px;

		h3,
		p {
			text-align: left;
		}

		p {
			max-width: 331px;
		}
	}
}

.horizontal-mobile {
	display: none;
}

.video {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 86px;
	width: 100%;

	.video-title {
		font-weight: 400;
		font-size: 58.6px;
		line-height: 98%;
		letter-spacing: 0%;
		text-align: center;
	}

	.video-container {
		border-radius: 21px;
		position: relative;
		width: 100%;
		max-width: 1000px;
		aspect-ratio: 1000 / 552;
		margin-top: 39px;
	}

	iframe {
		border-radius: 21px;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

.prices {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 90px;

	.price-title {
		font-weight: 400;
		font-size: 58.6px;
		line-height: 98%;
		letter-spacing: 0;
		text-align: center;
		margin-bottom: 29px;
	}
	.price-cards {
		display: flex;
		align-items: center;
		gap: 35px;
	}
	.price-card-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.price-card {
		background: #f5f5f5;
		border-radius: 18px;
		padding: 47px 42px;
		color: #252525;
		margin-bottom: 15px;
		box-sizing: border-box;
		width: 304px;
	}

	.price-card-title {
		font-weight: 500;
		font-size: 23.82px;
		line-height: 105%;
		letter-spacing: 0;
		text-align: center;
		margin-bottom: 18px;
	}

	.price-card-subtitle {
		font-weight: 400;
		font-size: 20.42px;
		line-height: 105%;
		text-align: center;
		margin-bottom: 25px;

		span {
			font-weight: 700;
			font-size: 45.37px;
			line-height: 105%;
			letter-spacing: 0;
			text-align: center;
		}
	}
	.price-card-mount {
		cursor: pointer;
		display: block;
		font-weight: 600;
		font-size: 18.15px;
		line-height: 105%;
		letter-spacing: 0;
		text-align: center;
		color: #1d62e3;
		transition: 0.3s;
		text-decoration: none;
	}

	.price-card-button {
		border-radius: 12px;
		background: #1d62e3;
		font-weight: 500;
		font-size: 21px;
		line-height: 149%;
		letter-spacing: 2%;
		text-align: center;
		vertical-align: middle;
		color: var(--text-white);
		padding: 14px 46px;
		border: none;
		cursor: pointer;
		transition: 0.3s;
	}

  .inner-card{
    font-size: 12px;
    padding: 14px;
  }

	.price-card-active {
		background: linear-gradient(to bottom, #2d69d9, #080c1b);
		color: var(--text-white);
		position: relative;

		&::after {
			content: "";
			background: url("./assets/images/icons/card-active.svg");
			background-repeat: no-repeat;
			width: 40px;
			height: 39px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

.about {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 85px;
	margin-top: 29px;

	.about-text-wrap {
		margin-top: 108px;
		max-width: 624px;
		h3 {
			font-weight: 400;
			font-size: 58.6px;
			line-height: 98%;
			letter-spacing: 0;
		}

		span {
			display: block;
			font-weight: 700;
			font-size: 58.6px;
			line-height: 98%;
			letter-spacing: 0;
			margin-bottom: 25px;
		}

		p {
			max-width: 590px;
			font-weight: 400;
			font-size: 20px;
			line-height: 119%;
			letter-spacing: 0;
			margin-bottom: 25px;
		}

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

	.about-image-wrap {
		position: relative;
	}

	.about-image-text-wrap {
		padding: 28px 101px 24px 36px;
		position: absolute;
		left: -89px;
		bottom: -23px;
		border-radius: 21.49px;
		border: 1px solid #98a0c1;
		background: linear-gradient(
			180deg,
			rgba(42, 50, 80, 0.79) 0%,
			rgba(39, 49, 85, 0.3555) 100%
		);

		h4 {
			font-weight: 700;
			font-size: 25px;
			line-height: 100%;
			letter-spacing: 0;
			color: var(--text-white);
			margin: 0;
		}

		ul {
			margin: 0;
			margin-top: 10px;
			padding-left: 25px;
			color: var(--text-white);
		}
		li {
			font-weight: 400;
			font-size: 16px;
			line-height: 130%;
			letter-spacing: 0;
			margin-bottom: 5px;
		}

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

.test-wrap {
	margin-top: 91px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1180px;
	height: 432px;
	background-image: url("./assets/images/test/1.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	padding-top: 82px;
	border-radius: 32px;

	.test {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: var(--text-white);
		margin-bottom: 40px;
		h3 {
			font-weight: 700;
			font-size: 58.6px;
			line-height: 98%;
			letter-spacing: 0;
			margin-bottom: 10px;
		}
		p {
			font-weight: 400;
			font-size: 22px;
			line-height: 130%;
			letter-spacing: 0;
			text-align: center;
			max-width: 403px;
		}
	}

	a {
		background: #1d62e3;
		color: var(--text-white);
		font-weight: 500;
		font-size: 21px;
		line-height: 149%;
		letter-spacing: 2%;
		text-align: center;
		padding: 25px 30px;
		border-radius: 15px;
		text-decoration: none;
		transition: 0.3s;
	}
}

.footer {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;

	a:first-child {
		margin-bottom: 10px;
	}
	a {
		font-weight: 400;
		font-size: 14px;
		line-height: 130%;
		letter-spacing: 0%;
		text-align: center;
		text-decoration: underline;
		text-decoration-style: solid;
		color: #292929;
	}
}

.heading-desktop {
	max-width: 100% !important;
	display: block;
}

.heading-mobile {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.my-swiper-button-prev:not(.swiper-button-disabled):hover,
	.my-swiper-button-next:not(.swiper-button-disabled):hover {
		transform: scale(1.05);
		background-color: #ffffff11;
	}
	.price-card-button:hover,
	.test-wrap a:hover {
		transform: scale(1.02);
		background-color: #206bf8;
	}

	.price-card-mount:hover {
		color: #fa3d3d;
	}
}

@media (max-width: 1250px) {
	.info-wrap {
		padding-left: 55px;
	}
	.slider-wrap {
		padding-left: 55px;
	}

	.horizontal-desktop {
		display: none;
	}
	.horizontal-mobile {
		display: block;
		width: 580px;
		height: 555px;
	}

	.content-cards {
		display: flex;
		flex-direction: column;
	}

	.content-card-horizontal {
		flex-direction: column;
		align-items: center;
		width: 580px !important;
		height: 555px;
		.content-card-text {
			margin-top: 0 !important;
			align-items: center !important;
			margin-right: 0;
			margin-top: 285px !important;

			h3,
			p {
				text-align: center;
			}

			p {
				max-width: 331px;
			}
		}
	}

	.price-cards {
		flex-direction: column;
	}
	.about {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.head {
		width: 100%;
		max-width: 768px;
		background-image: url("./assets/images/head-mobile-bg.png");
		padding-bottom: 7px;
		overflow: hidden;
	}

	.info-wrap {
		padding: 60px 20px 0 20px;
		flex-direction: column;
    align-items: center;

		.info-text-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 335px;
			position: relative;
			z-index: 2;

			h1 {
				font-size: 33.42px;
				line-height: 120%;
				text-align: center;
			}

			span {
				font-size: 30.8px;
			}

			& > p {
				margin-top: 13px;
				font-size: 18px;
				text-align: center;
			}
		}

		.info-text {
			align-items: center;
		}

		.info-wrap-img {
			position: relative;
			top: -25px;
			left: -19px;
		}

		.info-text-list-wrap {
			padding: 8px 43px 23px 29px;
			margin-top: 13px;
		}

		.info-text-list {
			gap: 8px;
		}

		.info-text-list-item {
			gap: 9px;
			font-size: 16px;

			img {
				height: 21px;
				width: 21px;
			}
		}
	}

	.slider-head {
		margin-bottom: 26px;
    justify-content: center;

		.slider-head-text {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		h2 {
			font-size: 29px;
			line-height: 109%;
			text-align: center;
		}

		p {
			display: block;
			margin-top: 5px;
			max-width: 319px;
			font-size: 16px;
			line-height: 119%;
			text-align: center;
		}
	}

	.slider-wrap {
		position: relative;
		z-index: 1;
		margin-top: -93px;
		padding: 0px 0px 0px 2px;
	}

	.slider-btns {
		display: none;
	}
	.swiper-wrapper {
		padding-left: 25px;
	}
	.slide-img-1 {
		max-width: 242px;
	}

	.slide-img-2 {
		max-width: 199px;
		height: 220px;
	}

	.slide-img-3 {
		max-width: 234px;
		height: 288px;
	}

	.slide-img-4 {
		max-width: 217px;
		height: 216px;
	}

	.content {
		max-width: 375px;
		margin-top: 68px;
	}

	.content-title {
		font-size: 29px;
	}

	.content-subtitle {
		font-size: 29px;
	}

	.content-cards {
		margin-top: 25px;
		row-gap: 13px;
	}

	.content-card {
		position: relative;
		width: 352px;
		height: 337px;

		img {
			width: 100%;
			object-fit: cover;
			border-radius: 10px;
		}

		.content-card-text {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 192px;

			h3 {
				font-size: 22px;
				line-height: 100%;
				max-width: 230px;
				margin: 0;
				margin-bottom: 6px;
			}

			p {
				font-size: 14px;
				max-width: 282px;
			}

			ul {
				margin-top: 9px;
				font-size: 14px;
			}
		}
	}

	.second-row {
		margin-top: 207px !important;
		max-width: auto !important;
	}

	.heading-desktop {
		display: none;
	}

	.heading-mobile {
		display: block;
	}

	.mobile-space {
		margin-top: 186px !important;
	}

	.content-card-horizontal {
		width: 352px !important;
		height: 337px;
		align-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.horizontal-mobile {
			width: 352px !important;
			height: 337px;
		}

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

		.content-card-text {
			margin-top: 161px !important;
			align-items: center !important;
			margin-right: 0;

			h3 {
				margin-bottom: 8px;
			}

			h3,
			p {
				text-align: center;
			}

			p {
				max-width: 260px;
			}
		}
	}

	.video {
		padding-top: 50px;
		width: 100%;

		.video-title {
			font-size: 29px;
		}

		.video-container {
			margin-top: 23px;
		}
	}

	.prices {
		padding-top: 39px;

		.price-title {
			font-size: 29px;
			margin-bottom: 25px;
		}

		.price-card {
			padding: 51px 44px 51px 32px;
			margin-bottom: 18px;
			width: 317px;
		}

		.price-card-title {
			font-size: 23.82px;
			margin-bottom: 18px;
		}

		.price-card-subtitle {
			margin-bottom: 29px;
		}

		.price-card-button {
			padding: 14px 53px;
		}
    .inner-card{
      padding: 14px;
    }
	}

	.about {
		flex-direction: column-reverse;
		gap: 0px;
		margin-top: 52px;

		.about-text-wrap {
			margin-top: 108px;
			max-width: 320px;
			text-align: center;

			h3 {
				font-size: 29px;
			}

			span {
				font-size: 29px;
				margin-bottom: 16px;
			}

			p {
				max-width: 318px;
				font-size: 17px;
				margin-bottom: 19px;
			}

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

		.about-image-wrap {
			position: relative;
			padding: 0 20px;
			.about-image {
				width: 100%;
				object-fit: cover;
			}
		}

		.about-image-text-wrap {
			max-width: 320px;
			box-sizing: border-box;
			padding: 10px 5px 20px 5px;
			left: 26px;
			bottom: -86px;
			border-radius: 9.49px;

			h4 {
				margin-top: 10px;
				font-size: 17px;
				text-align: center;
			}

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

	.test-wrap {
		margin-top: 50px;
		height: 345px;
		padding-top: 94px;
		border-radius: 21px;
		background-image: url("./assets/images/test/1-mobile.png");

		.test {
			margin-bottom: 20px;
			h3 {
				font-size: 33px;
				margin-bottom: 10px;
			}
			p {
				font-size: 18px;
				text-align: center;
				max-width: 335px;
			}
		}

		a {
			font-size: 15px;
			padding: 16px 30px;
			border-radius: 8px;
		}
	}

	.footer {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;

		a:first-child {
			margin-bottom: 10px;
		}
		a {
			font-weight: 400;
			font-size: 14px;
			line-height: 130%;
			letter-spacing: 0%;
			text-align: center;
			text-decoration: underline;
			text-decoration-style: solid;
			color: #292929;
		}
	}
}

.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.6s ease-out;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}