/* #region HEADER */
.header {
	display: flex;
	position: fixed;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);

	padding: 20px 32px;
	border-radius: 130px;
	backdrop-filter: blur(16px);
	border: var(--border-white);
	background: var(--bg-gr-main);
	box-shadow: var(--box-shadow);

	max-width: 1192px;
	width: 100%;
	max-height: 78px;
	overflow: hidden;
	transition: all 0.6s ease;
	z-index: 100;

	&.active {
		border-radius: 80px;
		max-height: 100dvh;
		height: 90%;

		.header__menu-list {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.header__wrapper {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

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

.header__logo {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--fw-700);
	font-size: var(--text-22);
	margin-right: auto;
	transition: color var(--transition);
	text-wrap: nowrap;

	.header__logo-icon {
		height: 28px;
	}
}

.header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;

	span {
		display: block;
		width: 28px;
		height: 3px;
		background: var(--white);
		border-radius: 2px;
		transition: transform var(--transition), opacity var(--transition),
			width var(--transition), background var(--transition);

		&:nth-child(2) {
			transform-origin: right center;
		}
	}

	&:hover span {
		background: var(--green);

		&:nth-child(2) {
			transform: scaleX(0.5);
		}
	}

	&.active span {
		&:nth-child(1) {
			transform: rotate(45deg) translate(6px, 5px);
		}
		&:nth-child(2) {
			opacity: 0;
		}
		&:nth-child(3) {
			transform: rotate(-45deg) translate(8px, -6px);
		}
	}
}
.header__menu {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header__menu-list {
	display: flex;
	align-items: center;
	gap: 24px;
	transition: all 0.4s ease;
	opacity: 1;

	a {
		width: 100%;
		text-align: center;
		padding: 8px 16px;
		text-transform: uppercase;
		font-weight: var(--fw-600);
		transition: transform var(--transition), color var(--transition);

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

	.header__cta {
		padding: 3px;
	}
}

@media (max-width: 1200px) {
	.header {
		max-width: 92%;
		max-height: 68px;

		&.active {
			height: 94%;
			border-radius: 60px;
		}
	}

	.header__burger {
		display: flex;
		width: 28px;
		height: 28px;
	}

	.header__logo {
		font-size: var(--text-18);

		.header__logo-icon {
			height: 23px;
		}
	}

	.header__wrapper {
		flex-direction: column;
		justify-content: flex-start;
	}

	.header__nav {
		width: 100%;
	}

	.header__menu {
		margin-top: 15%;
	}

	.header__menu-list {
		display: flex;
		flex-direction: column;
		gap: 64px;
		opacity: 0;
		transform: translateY(-100%);
		max-width: 242px;
		width: 100%;

		li {
			width: 100%;
		}

		.header__menu-cta {
			display: none;
		}

		a {
			&:hover {
				color: var(--black);
			}
		}
	}
}

@media (max-width: 834px) {
	.header {
		max-height: 44px;
		padding: 10px 16px;

		&.active {
			height: 80%;
			border-radius: 45px;
		}
	}

	.header__burger {
		width: 24px;
		height: 24px;

		span {
			width: 24px;
		}
	}

	.header__menu {
		margin-top: 25%;
	}
}

@media (max-width: 546px) {
	.header__menu {
		margin-top: 35%;
	}
}

/* #endregion Header */

/* #region STATS SECTION */
.stats {
	position: relative;
	overflow: hidden;
	padding-block: 120px;
}

.stats__circle {
	right: 0;
}
.stats__circle-mobile {
	display: none;
}
.stats__bg {
	position: absolute;
	top: 15%;
	right: -20%;
	width: 778px;
	height: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	z-index: -1;
}

.stats__bg-row {
	font-size: var(--text-42);
	font-weight: var(--fw-800);
	line-height: var(--lh-12);
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--bg-gr-main);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: moveRow 30s linear infinite;

	&:nth-child(even) {
		animation-direction: reverse;
	}
}

@keyframes moveRow {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.stats__content {
	position: relative;
	display: flex;
	justify-content: space-around;
	gap: 32px;
	z-index: 1;
	padding: 32px 64px;
	border-radius: 25px;
	border: var(--border-white);
	background: var(--bg-gr-main);
	box-shadow: var(--box-shadow);
	backdrop-filter: blur(4px);
}

.stats__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	font-size: var(--text-42);
	font-weight: var(--fw-700);
	line-height: var(--lh-12);
	text-align: center;
}

.stats__label {
	font-size: var(--text-16);
	font-weight: var(--fw-400);
	text-transform: capitalize;
}

@media (max-width: 1200px) {
	.stats {
		padding-block: 80px;
	}
	.stats__content {
		padding: 16px;
	}
	.stats__item {
		font-size: var(--text-26);
	}
	.stats__label {
		max-width: 120px;
	}
	.stats__bg {
		top: 30%;
		right: -45%;
	}
	.stats__bg-row {
		font-size: var(--text-22);
	}
}

@media (max-width: 834px) {
	.stats {
		padding-block: 64px;
	}
	.stats__content {
		flex-direction: column;
		align-items: center;
		gap: 64px;
		padding-block: 34px;
	}
	.stats__label {
		max-width: 100%;
	}
	.stats__circle {
		right: 0;
		width: 350px;
		height: 350px;
	}
	.stats__circle-mobile {
		display: block;
		right: -20%;
		top: 62%;
	}

	.stats__bg {
		top: 20%;
		right: -55%;
	}
}

@media (max-width: 576px) {
	.stats__bg {
		top: 22%;
		right: -90%;
	}
}

/* #endregion STATS SECTION */

/* #region FAQ SECTION */
.faq {
	padding-block: 120px;
	position: relative;
	overflow: hidden;
}

.faq__circle-blue {
	left: 0;
	top: 30%;
	z-index: -1;
}
.faq__circle-green {
	right: 0;
	bottom: 0;
	z-index: -1;
}
.faq__title,
.faq__subtitle {
	text-transform: capitalize;
}

.faq__subtitle {
	text-align: end;
	margin-bottom: 32px;
}

.faq__list {
	padding: 32px;
	border-radius: var(--radius-25);
	background: var(--bg-gr-main);
	backdrop-filter: blur(4px);
}

.faq__item {
	border-bottom: var(--border-gray-100);

	&:last-child {
		border-bottom: none;

		.faq__answer-inner {
			padding-bottom: 0;
		}
	}

	&:first-child {
		.faq__header {
			padding-top: 0;
		}
	}
}

.faq__header {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 20px;
	padding-left: 16px;
	padding-block: 32px;
}

.faq__number {
	color: var(--green);
	font-size: var(--text-28);
	font-weight: var(--fw-700);
}

.faq__question {
	flex: 1;
	font-size: var(--text-32);
	font-weight: var(--fw-700);
}

.faq__toggle {
	color: var(--green);
	font-size: 24px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition), opacity var(--transition);
}

.faq__item--open {
	.faq__toggle {
		color: #00bfff;
		transform: rotate(45deg);
		transform: rotate(360deg) scale(1.2);
		opacity: 0.8;
	}
}

.faq__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition);
	font-size: var(--text-20);
	text-transform: capitalize;
}

.faq__answer-inner {
	padding-bottom: 32px;
}

.faq__bg {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: -1;
	width: 653px;
}
.faq__bg-text {
	font-size: var(--text-42);
	font-weight: var(--fw-800);
	line-height: var(--lh-12);
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--bg-gr-main);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: moveRow 30s linear infinite;

	&:nth-child(even) {
		animation-direction: reverse;
	}
}

@media (max-width: 1200px) {
	.faq {
		padding-block: 80px;
	}
	.faq__header {
		align-items: flex-start;
	}
	.faq__answer-inner {
		font-size: var(--text-18);
	}
}

@media (max-width: 834px) {
	.faq {
		padding-block: 64px;
	}
	.faq__list {
		padding: 20px;
	}
	.faq__header {
		align-items: center;
		gap: 8px;
		padding-left: 0;
	}
	.faq__question {
		font-size: var(--text-18);
	}
	.faq__number {
		font-size: var(--text-18);
	}
	.faq__answer-inner {
		font-size: var(--text-14);
	}
	.faq__circle-green,
	.faq__circle-blue {
		width: 300px;
		height: 300px;
		filter: blur(80px);
		right: -25%;
		bottom: 70%;
	}

	.faq__circle-green {
		right: -25%;
		bottom: 70%;
	}
}

/* #endregion FAQ SECTION */

/* #region PARTNERS SECTION  */
.partners {
	padding-block: 50px;
	border-radius: 25px;
	background: var(--white);
	overflow: hidden;
	position: relative;

	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		width: 157px;
		height: 100%;
		z-index: 1;
		pointer-events: none;
	}

	&::before {
		left: 0;
		border-radius: 0 25px 25px 0;
		background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
	}

	&::after {
		right: 0;
		border-radius: 25px 0 0 25px;
		background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
	}
}

.partners__wrapper {
	padding-block: 16px;
	overflow: hidden;
	position: relative;
}

.partners__line {
	display: flex;
	gap: 64px;
	align-items: center;
}

.partners__logo {
	height: 100px;
	flex-shrink: 0;
}

.partners__decor--left {
	left: 10%;
	bottom: -20px;
	transform: rotate(90deg);
}

.partners__decor--right {
	right: 10%;
	top: -20px;
	transform: rotate(90deg);
}

@media (max-width: 992px) {
	.partners {
		padding-block: 22px;
	}

	.partners__logo {
		height: 70px;
	}

	.partners__decor--right {
		top: -30px;
	}

	.partners__decor--left {
		bottom: -30px;
	}
}

@media (max-width: 768px) {
	.partners {
		padding-block: 20px;
	}
}

@media (max-width: 576px) {
	.partners__decor--right {
		top: -10px;
	}
	.partners__decor--left {
		bottom: -10px;
	}
}

/* #endregion PARTNERS SECTION */

/* #region FOOTER */
.footer {
	background: var(--white);
	border-top-left-radius: 150px;
	border-top-right-radius: 150px;
	position: relative;
	overflow: hidden;
	color: var(--black);
	position: relative;
	z-index: 1;

	.container {
		border-inline: var(--border-gray-100);
	}

	&::before {
		content: "";
		position: absolute;
		top: 122px;
		width: 100dvw;
		height: 2px;
		background-color: var(--gray-100);
		z-index: -1;
	}
}

.footer__wrapper {
	padding-block: 80px 32px;
}

.footer__title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36px;
}

.footer__title-right {
	color: var(--green);
	margin-top: 34px;
}

.footer__content {
	display: grid;
	row-gap: 32px;
	margin-bottom: 32px;
}

.footer__disclaimer,
.footer__notice {
	text-transform: capitalize;
	text-wrap: balance;

	h4 {
		color: var(--green);
		margin-bottom: 8px;
	}
}

.footer__notice {
	grid-area: 2 / 2;
	margin-left: -210px;
	text-align: end;
}

.footer__bottom {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: var(--text-22);
	font-weight: var(--fw-800);
}

.footer__links {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	max-width: 542px;
	width: 100%;
	margin-inline: auto;
	font-size: var(--text-22);
	font-weight: var(--fw-800);
}

.footer__link {
	color: var(--green);

	&:hover {
		text-decoration: underline;
	}
}
.footer__decor--left,
.footer__decor--right {
	top: -35px;
	transform: rotate(90deg);
}

.footer__decor--left {
	left: 5%;
}

.footer__decor--right {
	right: 5%;
}

@media (max-width: 1200px) {
	.footer {
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;

		.container {
			border-inline: none;
		}

		&::before {
			top: 70px;
		}
	}

	.footer__wrapper {
		padding-block: 32px;
		border-inline: var(--border-gray-100);
	}
	.footer__title {
		font-size: var(--text-32);
		margin-bottom: 46px;
	}

	.footer__content {
		row-gap: 50px;
	}
	.footer__decor--left,
	.footer__decor--right {
		top: -15px;
		gap: 12px;
	}
}

@media (max-width: 834px) {
	.footer {
		border-top-left-radius: 80px;
		border-top-right-radius: 80px;

		&::before {
			top: 55px;
		}
	}
	.footer__wrapper {
		padding-block: 32px 40px;
	}
	.footer__title {
		font-size: var(--text-22);
		flex-direction: column;
		margin-bottom: 32px;
	}
	.footer__title-right {
		text-align: end;
		margin-top: 0;
	}
	.footer__content {
		display: flex;
		flex-direction: column;
		row-gap: 16px;
	}

	.footer__disclaimer,
	.footer__notice {
		grid-area: unset;

		h4 {
			font-size: var(--text-18);
		}
		p {
			font-size: var(--text-14);
		}
	}
	.footer__notice {
		margin-left: 0;
	}
	.footer__bottom {
		text-align: center;
		font-size: var(--text-16);
	}

	.footer__links {
		font-size: var(--text-16);
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.footer__decor--left,
	.footer__decor--right {
		top: 0;
	}

	.footer__decor--left {
		left: 12%;
	}

	.footer__decor--right {
		right: 12%;
	}
}

/* #endregion FOOTER */