/* #region Header */

.header__hero {
	max-width: 1120px;
	width: 100%;
	padding-inline: 30px;
}

.header__hero-btn {
	font-size: var(--text-30);
	font-weight: var(--fontWeightExtraBold);
	color: currentColor;
	background-color: transparent;
	border: var(--border-white);
	padding-block: 28px;

	&:hover {
		background-color: var(--white);
		color: var(--primary);
	}
}
.header__hero-video {
	padding-block: 44px 30px;
	width: 100%;
}

@media (max-width: 744.98px) {
	.header__hero-video {
		padding-block: 40px 26px;
	}
}

@media (max-width: 575.98px) {
	.header__hero {
		padding-inline: 16px;
	}

	.header__hero-btn {
		font-size: var(--text-16);
		padding-block: 23px;
	}
}
/* #endregion Header */

/* #region Getting Started */
.get-started {
	padding-top: 100px;
	text-align: center;
}

.get-started__title {
	margin-bottom: 116px;
}

.get-started__steps {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin-bottom: 52px;
}

.get-started__step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--primary);
	color: var(--white);
	padding-inline: 38px;
	max-width: 410px;
	height: 292px;
	border-radius: var(--radius-40);
	flex: 1;
	position: relative;
}
.get-started__step:hover {
	.get-started__step-number {
		background-color: var(--green-50);
	}
}
.get-started__step-number {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--primary);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: var(--text-24);
	font-weight: var(--fontWeightBold);
	transition: background-color var(--transition);
}

.get-started__step-number::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	width: 80px;
	height: 80px;
	border: 10px solid var(--green-50);
	background-color: var(--green-50);
	border-radius: 50%;
	z-index: -1;
}

.get-started__step-number::after {
	content: "";
	position: absolute;
	top: -20px;
	left: -20px;
	width: 100px;
	height: 100px;
	border: 10px solid var(--green-100);
	border-radius: 50%;
	z-index: 1;
}

.get-started__step-title {
	margin-bottom: 10px;
}

.get-started__step-description {
	color: currentColor;
}

.get-started__actions {
	gap: 26px;
	flex-direction: row;
}

.get-started__encryption-info {
	background-color: var(--gray-50);
	color: var(--primary);
	padding: 31px 41px;
	border-radius: var(--radius-50);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--text-20);
	max-width: 694px;
	width: 100%;
}

.get-started__btn {
	border-color: transparent;
}

.get-started__btn:hover {
	border-color: currentColor;
}
@media (max-width: 1199.98px) {
	.get-started__actions {
		flex-wrap: wrap;
		width: fit-content;
		margin-inline: auto;
	}
	.get-started__btn {
		max-width: 694px;
	}
}

@media (max-width: 991.98px) {
	.get-started__title {
		margin-bottom: 87px;
	}

	.get-started__steps {
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 86px;
		column-gap: 16px;

		& > *:nth-child(3) {
			grid-column: 1 / -1;
		}
	}

	.get-started__step {
		max-width: unset;
	}
}

@media (max-width: 744.98px) {
	.get-started__steps {
		margin-bottom: 26px;
	}
}

@media (max-width: 575.98px) {
	.get-started {
		padding-bottom: 190px;
	}

	.get-started__actions {
		width: auto;
	}

	.get-started__steps {
		grid-template-columns: 1fr;
		row-gap: 67px;
		margin-bottom: 30px;
	}

	.get-started__encryption-info {
		align-items: flex-start;
		border-radius: 0;
		text-align: left;
		position: absolute;
		left: 50%;
		padding: 20px 16px;
		transform: translateX(-50%);
		width: 100%;
		font-size: var(--text-14);
	}

	.get-started__btn {
		top: 120px;
	}
}
/* #endregion Getting Started */

/* #region Stats */
.stats__bg {
	box-shadow: var(--box-shadow);
	padding-block: 20px 28px;
}

.stats__inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	gap: 53px;
	text-align: center;
	max-width: 1053px;
	margin-inline: auto;
}

.stat__value {
	background: linear-gradient(
		90deg,
		#a3cc5e,
		#00473c,
		#a3cc5e,
		#00473c,
		#a3cc5e
	);
	background-size: 400% 100%;
	background-repeat: repeat;
	animation: gradientLoop 8s linear infinite;

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;

	line-height: var(--lineHeightRegular);
	font-weight: var(--fontWeightSemiBold);
}

@keyframes gradientLoop {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 200% 50%;
	}
}

.stat__label {
	font-weight: var(--fontWeightLight);
}

@media (max-width: 744.98px) {
	.stat__value {
		font-size: var(--text-30);
	}
	.stat__label {
		font-size: var(--text-16);
	}
}
@media (max-width: 575.98px) {
	.stats__inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: start;
	}
}
/* #endregion Stats */

/* #region Service */

.service__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 40px;
}
.service__wrapper {
	display: flex;
	column-gap: 26px;
}

.service__image {
	width: 517px;
	height: 547px;
	flex-shrink: 0;
}

.service__image img {
	border-radius: var(--radius-50);
	width: 100%;
	height: 100%;
}

.service__title {
	margin-bottom: 30px;
}

.service__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.service__item {
	position: relative;
	padding-left: 54px;
}

.service__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	aspect-ratio: 1;
	background-image: url("/img/check-ring.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.service__btn {
	max-width: 410px;
}

@media (max-width: 1199.98px) {
	.service__wrapper {
		flex-direction: column;
		row-gap: 26px;
	}

	.service__image {
		order: 2;
		margin-inline: auto;
		width: 100%;
		height: 530px;
	}
}

@media (max-width: 575.98px) {
	.service__inner {
		row-gap: 20px;
	}
	.service__image {
		display: none;
	}
	.service__list {
		gap: 16px;
	}
}
/* #endregion Service */