/* ################################################## */
/* Misc */
/* ################################################## */

@font-face {
	font-family: "Geist - Local";
	src: url("../misc/font/geist.ttf") format("truetype-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* body::-webkit-scrollbar {
	width: 12px;
}

body::-webkit-scrollbar-track {
	background: var(--color-brand-secondary);
}

body::-webkit-scrollbar-thumb {
	background: var(--color-brand-primary);
	border-radius: 9999px;
	border: 2px solid var(--color-brand-secondary);
} */

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--spacing-section-md);
}

body {
	font-family: "Geist - Local", sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-weight: 400;
	letter-spacing: -0.001em;
	line-height: 1.8;
	font-size: var(--fz-sm);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* body.logged-in {} */

/*
::selection {
	background-color: var(--color-brand-secondary);
	color: var(--color-brand-secondary);
}
*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	color: var(--color-heading);
	letter-spacing: -0.005em;
	text-wrap: balance;
	line-height: 1.2;
}

h1 {
	font-size: var(--fz-4xl);
	text-wrap: pretty;
}

h2 {
	font-size: var(--fz-2xl);
}

h3 {
	font-size: var(--fz-xl);
}

h4 {
	font-size: var(--fz-lg);
}

p {
	text-wrap: pretty;
	font-size: var(--fz-sm);
}

a {
	text-decoration: none;
}

/* ################################################## */
/* Helpers */
/* ################################################## */

.color-brand {
	color: var(--color-brand-primary);
}

.text-bold {
	font-weight: 600;
}

.text-underline {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-color: var(--color-brand-secondary);
}

/* ######################### */
/* Underline Hover */
/* ######################### */

.underline-hover {
	position: relative;
	transition: transform 0.3s;
	will-change: transform;
}

.underline-hover::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background-color: var(--color-brand-primary);
	will-change: transform;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s;
}

.underline-hover:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}

/* ################################################## */
/* Components */
/* ################################################## */

/* Eyebrow text */

.eyebrow-text {
	margin-bottom: var(--spacing-xs);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* Separator lines */

.separator-line-vertical {
	width: 1px;
	background-image: linear-gradient(
		to bottom,
		rgba(248, 0, 0, 0) 0%,
		rgba(248, 0, 0, 1) 50%,
		rgba(248, 0, 0, 0) 100%
	);
}

.separator-line-horizontal {
	height: 1px;
	background-image: linear-gradient(
		to right,
		rgba(248, 0, 0, 0) 0%,
		rgba(248, 0, 0, 1) 50%,
		rgba(248, 0, 0, 0) 100%
	);
}

/* Bullet point */

.bullet-point__container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.bullet-point {
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
}

.bullet-point__icon {
	flex-shrink: 0;
	width: 2.125rem;
	height: 2.125rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--color-brand-secondary);
	border-radius: 9999px;
	color: var(--color-brand-primary);
}

.bullet-point__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.bullet-point__text {
	font-weight: 500;
}

/* Section bg alt */

.section-bg-alt {
	background-image:
		linear-gradient(
			to bottom,
			rgba(250, 250, 250, 1) 0%,
			rgba(250, 250, 250, 0) 10%,
			rgba(250, 250, 250, 0) 90%,
			rgba(250, 250, 250, 1) 100%
		),
		radial-gradient(
			rgba(255, 255, 255, 1) 15%,
			rgba(255, 255, 255, 0.5) 60%,
			rgba(255, 255, 255, 0) 100%
		),
		linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
		url("../misc/grid-pattern-black.svg");
	background-size: cover, cover, cover, 7.5%;
	background-color: var(--color-bg-alt);
}

@media (max-width: 1279px) {
	.section-bg-alt {
		background-size: cover, cover, cover, 10%;
	}
}

@media (max-width: 1119px) {
	.section-bg-alt {
		background-size: cover, cover, cover, 12.5%;
	}
}

@media (max-width: 767px) {
	.section-bg-alt {
		background-image:
			linear-gradient(
				to bottom,
				rgba(250, 250, 250, 1) 0%,
				rgba(250, 250, 250, 0) 10%,
				rgba(250, 250, 250, 0) 90%,
				rgba(250, 250, 250, 1) 100%
			),
			linear-gradient(
				-60deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255) 50%
			),
			linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
			url("../misc/grid-pattern-black.svg");
		background-size: cover, cover, cover, 15%;
	}
}

@media (max-width: 479px) {
	.section-bg-alt {
		background-image: linear-gradient(
			to bottom,
			rgba(250, 250, 250, 1) 0%,
			rgba(250, 250, 250, 0) 10%,
			rgba(250, 250, 250, 0) 90%,
			rgba(250, 250, 250, 1) 100%
		);
		background-size: cover;
	}
}

/* ################################################## */
/* Grid container (wrapper) */
/* ################################################## */

.grid-container {
	display: grid;
	grid-template-columns:
		[full-start] 1fr [wrapper-start] minmax(0, 80rem)
		[wrapper-end] 1fr [full-end];
	grid-column-gap: var(--spacing-md);
	/* contain: paint; */
}

.grid-container > * {
	grid-column: wrapper;
	border-left: 1px solid var(--color-gray);
	border-right: 1px solid var(--color-gray);
	border: none;
}

.grid-container--fill {
	grid-column: full;
}

@media (max-width: 479px) {
	.grid-container > * {
		border: none;
	}
}

/* ################################################## */
/* Custom link */
/* ################################################## */

.custom-link {
	position: relative;
	display: inline;
	align-items: center;
	color: var(--color-brand-secondary);
	font-weight: 600;
	overflow: hidden;
	z-index: 0;
	text-decoration: underline solid var(--color-brand-primary) 1px;
	text-underline-offset: 5px;
}

.custom-link:hover {
	text-decoration-thickness: 3px;
}

.custom-link--nav {
	padding: var(--spacing-sm);
	text-decoration: none;
}

.custom-link svg {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: text-top;
}

/* ######################### */
/* Subpage center text container */
/* ######################### */

.subpage-center-text__container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.subpage-center-text__heading {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-2xl);
}

.subpage-center-text__text {
	margin-bottom: var(--spacing-2xl);
	font-size: var(--fz-md);
	text-align: center;
	width: 50%;
}

@media (max-width: 1279px) {
	.subpage-center-text__text {
		width: 60%;
	}
}

/* @media (max-width: 1119px) {} */

@media (max-width: 1023px) {
	.subpage-center-text__text {
		width: 75%;
	}
}

@media (max-width: 767px) {
	.subpage-center-text__container {
		text-align: left;
		align-items: start;
	}

	.subpage-center-text__text {
		width: 85%;
		text-align: left;
	}
}

@media (max-width: 479px) {
	.subpage-center-text__text {
		width: 100%;
	}
}

/* ################################################## */
/* Custom button */
/* ################################################## */

.btn {
	cursor: pointer;
	user-select: none;
	padding: 1.125rem 1.875rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-2xs);
	background-color: var(--color-brand-secondary);
	border-radius: 9999px;
	color: var(--color-text-alt);
	transition:
		transform 0.3s,
		background-color 0.3s,
		border-color 0.3s,
		color 0.3s;
	will-change: transform;
}

.btn:hover {
	transform: translateY(-4px);
	background-color: var(--color-brand-primary);
	/* color: var(--color-text-alt); */
}

.btn span {
	font-weight: 500;
	font-size: var(--fz-md);
	line-height: normal;
	/* letter-spacing: normal; */
}

/* ######################### */
/* Variants */
/* ######################### */

.btn--variant-secondary {
	background-color: transparent;
	border: 2px solid var(--color-brand-secondary);
	color: var(--color-brand-secondary);
}

.btn--variant-secondary:hover {
	background-color: transparent;
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
	/* color: var(--color-text-alt); */
}

/* ######################### */
/* Colors */
/* ######################### */

.btn--color-white {
	background-color: var(--color-bg-alt);
	color: var(--color-brand-secondary);
}

.btn--color-white:hover {
	color: var(--color-text-alt);
	/* color: var(--color-text-alt); */
}

.btn--variant-secondary.btn--color-white {
	background-color: transparent;
	border-color: var(--color-bg-alt);
	color: var(--color-bg-alt);
}

.btn--variant-secondary.btn--color-white:hover {
	/* background-color: transparent; */
	/* border-color: var(--color-bg-alt); */
	/* color: var(--color-bg-alt); */
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

.btn--color-red {
	background-color: var(--color-brand-primary);
	color: var(--color-bg-alt);
}

.btn--color-red:hover {
	background-color: var(--color-bg-alt);
	color: var(--color-brand-secondary);
}

.btn--variant-secondary.btn--color-red {
	background-color: transparent;
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

/* ######################### */
/* Sizes */
/* ######################### */

/* Small */
.btn--size-sm {
	padding: 0.75rem 1.5rem;
}

.btn--size-sm span {
	font-size: var(--fz-sm);
}

.btn--size-sm svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ######################### */
/* Nav */
/* ######################### */

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3000;
	/* height: 6rem; */
	/* contain: none; */
	/* will-change: transform; */
	/* transition: transform 0.3s; */
}

.nav__top-container {
	padding: var(--spacing-3xs);
	background-color: var(--color-brand-secondary);
}

.nav__top-container-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	color: var(--color-text-alt);
}

.nav__main-container {
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

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

.nav__link-container-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* gap: var(--spacing-md); */
}

.nav__logo {
	display: flex;
}

.nav__link-container {
	display: flex;
	/* gap: var(--spacing-lg); */
	align-items: center;
}

.nav__link-container .custom-link,
.nav__burger-menu-container-inner .custom-link {
	color: var(--color-brand-secondary);
}

.nav__link-container .custom-link:hover,
.nav__burger-menu-container-inner .custom-link:hover {
	color: var(--color-brand-primary);
}

.nav__dropdown {
	position: relative;
	padding: var(--spacing-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-3xs);
}

.nav__dropdown:hover {
	color: var(--color-brand-primary);
}

.nav__dropdown .custom-link {
	padding: 0;
}

.nav__dropdown:hover .custom-link {
	cursor: default;
	color: var(--color-brand-primary);
}

.nav__dropdown svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-secondary);
	transition: color 0.3s;
}

/* .nav__dropdown-con */
.nav__dropdown-container {
	position: absolute;
	top: 5.25rem;
	left: 0;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s;
}

.nav__dropdown:hover > .nav__dropdown-container {
	grid-template-rows: 1fr;
}

/* .nav__link-dropdown:hover {
	cursor: auto;
} */

.nav__dropdown-container-wrapper {
	/* width: max-content; */
	overflow: hidden;
}

.nav__dropdown-container-wrapper-inner {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	display: flex;
	flex-direction: column;
	align-items: start;
	/* gap: var(--spacing-3xs); */
}

.nav__dropdown-container-wrapper .custom-link {
	padding: var(--spacing-sm);
}

.nav__dropdown-container-wrapper .custom-link:hover {
	cursor: pointer;
	color: var(--color-brand-primary) !important;
}

.nav__dropdown-container-wrapper .custom-link:first-of-type {
	padding-bottom: 0;
}

.nav__dropdown:hover > .nav__dropdown-container .custom-link {
	color: var(--color-brand-secondary);
}

/* .nav__link-dropdown-link {
	margin: 0 var(--spacing-sm);
	color: var(--color-secondary-500);
	font-weight: 600;
	line-height: 1.4;
}

.nav__link-dropdown-link:first-of-type {
	margin-top: var(--spacing-sm);
}

.nav__link-dropdown-link:last-of-type {
	margin-bottom: var(--spacing-sm);
}

.nav__link-dropdown-link:hover {
	cursor: pointer;
} */

.nav__separator-line {
	margin: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
		var(--spacing-3xs);
	width: 3px;
	background-color: var(--color-bg-dark);
	align-self: stretch;
	border-radius: 9999px;
}

.nav__btn-container {
	display: flex;
	gap: var(--spacing-xs);
}

.nav__burger-menu-icon {
	padding: var(--spacing-3xs);
	display: none;
	width: 2.5rem;
	height: 3rem;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-3xs);
	cursor: pointer;
	display: none;
}

.nav__burger-menu-icon-line {
	width: 100%;
	height: 3px;
	background-color: var(--color-brand-secondary);
	border-radius: 9999px;
	will-change: transform, opacity;
	transition:
		transform 0.3s,
		opacity 0.3s;
	transform-origin: center center;
}

.nav__burger-menu-icon--active .nav__burger-menu-icon-line:nth-of-type(1) {
	transform: translateY(calc(3px + var(--spacing-3xs))) rotate(45deg);
}

.nav__burger-menu-icon--active .nav__burger-menu-icon-line:nth-of-type(2) {
	opacity: 0;
	transform: translateX(10px);
}

.nav__burger-menu-icon--active .nav__burger-menu-icon-line:nth-of-type(3) {
	transform: translateY(calc(-3px - var(--spacing-3xs))) rotate(-45deg);
}

.nav__burger-menu-container {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-bg-alt);
	will-change: transform;
	transform: translateX(100%);
	transition: transform 0.3s;
	z-index: 2000;
}

.nav__burger-menu-container--active {
	transform: translateX(0);
}

.nav__burger-menu-container-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nav__burger-menu-container-inner .custom-link {
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--fz-xl);
	font-weight: 700;
}

@media (max-width: 1279px) {
	.nav__link-container-box {
		display: none;
	}

	.nav__burger-menu-icon {
		display: flex;
	}

	.nav__main-container-inner {
		height: 4rem;
	}
}

/* @media (max-width: 1119px) {} */

/* @media (max-width: 1023px) {} */

@media (max-width: 767px) {
	.nav__top-container-inner {
		font-size: var(--fz-sm);
		gap: var(--spacing-2xs);
	}
}

/* @media (max-width: 479px) {} */

/* ######################### */
/* Hero */
/* ######################### */

.hero {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
	background-image:
		linear-gradient(
			to bottom,
			rgba(250, 250, 250, 0) 80%,
			rgba(250, 250, 250) 100%
		),
		url("../img/hero.png"),
		linear-gradient(
			-60deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255) 15%,
			rgba(255, 255, 255) 60%,
			rgba(255, 255, 255, 0) 100%
		),
		linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
		url("../misc/grid-pattern-black.svg");
	background-size: cover, 100%, cover, cover, 7.5%;
	background-position:
		0 0,
		right,
		0 0,
		0 0,
		0 0;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-color: var(--color-bg-alt);
}

.hero__inner {
	/* border: 1px solid red; */
}

.hero__text-container {
	width: 60%;
}

.hero__heading {
	margin-bottom: var(--spacing-md);
}

.hero__text {
	margin-bottom: var(--spacing-xl);
	width: 70%;
	font-size: var(--fz-md);
}

.hero__bullet-point-container {
	margin-bottom: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.hero__bullet-point {
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
}

.hero__bullet-point-icon {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--color-brand-secondary);
	border-radius: 9999px;
	color: var(--color-brand-primary);
}

.hero__bullet-point-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hero__bullet-point-text {
	font-size: var(--fz-md);
	font-weight: 500;
}

.hero__btn-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

@media (max-width: 1279px) {
	.hero {
		padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
		background-image:
			linear-gradient(
				to bottom,
				rgba(250, 250, 250, 0) 80%,
				rgba(250, 250, 250) 100%
			),
			url("../img/hero.png"),
			linear-gradient(
				-60deg,
				rgba(255, 255, 255, 0) 0%,
				/* rgba(255, 255, 255) 60%, */ rgba(255, 255, 255) 70%
			),
			linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
			url("../misc/grid-pattern-black.svg");
		background-size: cover, 100%, cover, cover, 10%;
		background-position:
			0 0,
			right,
			0 0,
			0 0,
			0 0;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
		background-color: var(--color-bg-alt);
	}
}

/* @media (max-width: 1119px) {} */

@media (max-width: 1023px) {
	.hero {
		padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
		background-image:
			linear-gradient(
				to bottom,
				rgba(250, 250, 250, 0) 80%,
				rgba(250, 250, 250) 100%
			),
			linear-gradient(
				-60deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255) 70%
			),
			linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
			url("../misc/grid-pattern-black.svg");
		background-size: cover, cover, cover, 12.5%;
		background-position:
			0 0,
			0 0,
			0 0,
			0 0;
		background-repeat: no-repeat, no-repeat, no-repeat, repeat;
		background-color: var(--color-bg-alt);
	}

	.hero__text-container {
		width: 75%;
	}

	.hero__text {
		width: 80%;
	}
}

@media (max-width: 767px) {
	.hero {
		padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
		background-image:
			linear-gradient(
				to bottom,
				rgba(250, 250, 250, 0) 80%,
				rgba(250, 250, 250) 100%
			),
			linear-gradient(
				-60deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255) 50%
			),
			linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
			url("../misc/grid-pattern-black.svg");
		background-size: cover, cover, cover, 15%;
	}

	.hero__text-container {
		width: 100%;
	}
}

@media (max-width: 479px) {
	.hero {
		background-image: linear-gradient(
			to bottom,
			rgba(250, 250, 250, 0) 80%,
			rgba(250, 250, 250) 100%
		);
		background-size: cover;
		background-position: 0 0;
		background-repeat: no-repeat;
	}
	.hero__text {
		width: 100%;
	}
}

/* ######################### */
/* Image section */
/* ######################### */

.image-section {
	padding: var(--spacing-section-md) 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.image-section__text-container {
	grid-column: 1 / 7;
	grid-row: 1 / -1;
}

.image-section--reverse-order .image-section__text-container {
	grid-column: 7 / 13;
}

.image-section__heading {
	margin-bottom: var(--spacing-md);
}

.image-section__text {
	margin: var(--spacing-sm) 0;
	width: 90%;
	font-size: var(--fz-md);
}

.image-section .bullet-point__container {
	/* margin: var(--spacing-sm) 0; */
}

.image-section__text:last-of-type {
	/* margin-bottom: 0; */
}

.image-section__img-container {
	grid-column: 8 / 13;
	grid-row: 1 / -1;
	display: flex;
	align-items: start;
}

.image-section--reverse-order .image-section__img-container {
	grid-column: 1 / 6;
}

.image-section__img {
	max-width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.15);
}

.image-section__img-container--metatrader .image-section__img {
	border: none;
	border-radius: none;
	box-shadow: none;
}

@media (max-width: 1279px) {
	.image-section__text-container {
		grid-column: 1 / 8;
	}

	.image-section--reverse-order .image-section__text-container {
		grid-column: 6 / 13;
	}

	.image-section__text {
		width: 80%;
	}

	.image-section__img-container {
		grid-column: 9 / 13;
	}

	.image-section--reverse-order .image-section__img-container {
		grid-column: 1 / 5;
	}
}

@media (max-width: 1119px) {
	.image-section__text-container {
		grid-column: 1 / 7;
	}

	.image-section--reverse-order .image-section__text-container {
		grid-column: 7 / 13;
	}

	.image-section__text {
		width: 100%;
	}

	.image-section__img-container {
		grid-column: 8 / 13;
	}

	.image-section--reverse-order .image-section__img-container {
		grid-column: 1 / 6;
	}
}

@media (max-width: 1023px) {
	.image-section {
		display: flex;
		flex-direction: column;
	}

	.image-section__text-container {
		margin-bottom: var(--spacing-xl);
	}

	.image-section__text {
		width: 75%;
	}

	/* .image-section__img-container {
		margin-left: auto;
		width: 60%;
	}

	.image-section--reverse-order .image-section__img-container {
		margin-left: 0;
		margin-right: auto;
	} */
}

@media (max-width: 767px) {
	.image-section__text {
		width: 85%;
	}

	.image-section__img-container {
		width: 100%;
	}
}

@media (max-width: 479px) {
	.image-section__text {
		width: 100%;
	}
}

/* ######################### */
/* How Forex Simulator works */
/* ######################### */

.how-it-works {
	padding: var(--spacing-section-md) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.how-it-works__heading {
	margin-bottom: var(--spacing-2xl);
}

.how-it-works__box-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* grid-template-rows: 1fr 1fr; */
	grid-auto-rows: min-content;
	gap: var(--spacing-md);
}

.how-it-works__box {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
}

.how-it-works__box--highlight {
	background-color: var(--color-bg-dark);
}

.how-it-works__box--highlight .how-it-works__box-heading {
	color: var(--color-text-alt);
}

.how-it-works__box--highlight .how-it-works__box-text {
	color: var(--color-text-alt);
}

.how-it-works__box:nth-of-type(1) {
	grid-column: 1 / 6;
	grid-row: 1 / 2;
}

.how-it-works__box:nth-of-type(2) {
	grid-column: 6 / 13;
	grid-row: 1 / 2;
}

.how-it-works__box:nth-of-type(3) {
	grid-column: 1 / 8;
	grid-row: 2 / 3;
}

.how-it-works__box:nth-of-type(4) {
	grid-column: 8 / 13;
	grid-row: 2 / 3;
}

.how-it-works__box:nth-of-type(1) .how-it-works__box-text,
.how-it-works__box:nth-of-type(4) .how-it-works__box-text {
	width: 80%;
}

.how-it-works__box-heading {
	margin-bottom: var(--spacing-md);
}

.how-it-works__box-text-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.how-it-works__box-text {
	margin-bottom: var(--spacing-sm);
	/* width: 75%; */
}

.how-it-works__box-text:last-of-type {
	margin-bottom: 0;
}

.how-it-works__box-item-container {
	display: grid;
	/* grid-auto-flow: column; */
	grid-template-columns: 1fr 1px 0.85fr;
	gap: var(--spacing-md);
}

.how-it-works__box-item-container .separator-line-horizontal {
	display: none;
}

.how-it-works__box-item {
	/* width: fit-content; */
}

/* .how-it-works__box-item:last-of-type {
	background-color: red;
} */

/* .how-it-works__box-item:first-of-type {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
} */

.how-it-works__box-item-text {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-md);
	font-weight: 600;
}

.how-it-works__box-svg-container {
	/* margin-top: auto; */
	position: relative;
	width: 8rem;
	height: 8rem;
	transition: transform 0.3s;
	will-change: transform;
}

.how-it-works__box:hover .how-it-works__box-svg-container {
	transform: translate(10%, -10%);
}

.how-it-works__box-svg-container::before {
	z-index: 1;
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.35) 100%
	);
}

.how-it-works__box-svg-container svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* @media (max-width: 1279px) {} */

@media (max-width: 1119px) {
	.how-it-works__box:nth-of-type(1) {
		grid-column: 1 / 7;
		grid-row: 1 / 2;
	}

	.how-it-works__box:nth-of-type(2) {
		grid-column: 5 / 13;
		grid-row: 2 / 3;
	}

	.how-it-works__box:nth-of-type(3) {
		grid-column: 1 / 8;
		grid-row: 3 / 4;
	}

	.how-it-works__box:nth-of-type(4) {
		grid-column: 7 / 13;
		grid-row: 4 / 5;
	}

	.how-it-works__box-svg-container {
		margin-top: var(--spacing-2xl);
	}
}

@media (max-width: 1023px) {
	.how-it-works__box:nth-of-type(1) {
		grid-column: 1 / 8;
	}

	.how-it-works__box:nth-of-type(2) {
		grid-column: 4 / 13;
	}

	.how-it-works__box:nth-of-type(3) {
		grid-column: 1 / 9;
	}

	.how-it-works__box:nth-of-type(4) {
		grid-column: 6 / 13;
	}
}

@media (max-width: 767px) {
	.how-it-works {
		align-items: start;
	}

	.how-it-works__box:nth-of-type(1) {
		grid-column: 1 / -1;
	}

	.how-it-works__box:nth-of-type(2) {
		grid-column: 1 / -1;
	}

	.how-it-works__box:nth-of-type(3) {
		grid-column: 1 / -1;
	}

	.how-it-works__box:nth-of-type(4) {
		grid-column: 1 / -1;
	}

	.how-it-works__box-item-container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content;
		gap: var(--spacing-md);
	}

	.how-it-works__box:nth-of-type(1) .how-it-works__box-text,
	.how-it-works__box:nth-of-type(4) .how-it-works__box-text,
	.how-it-works__box-item-container .how-it-works__box-text {
		width: 80%;
	}

	.how-it-works__box-item-container .how-it-works__box-svg-container {
		display: none;
	}

	.how-it-works__box-item-container .separator-line-vertical {
		display: none;
	}

	.how-it-works__box-item-container .separator-line-horizontal {
		display: block;
	}
}

@media (max-width: 479px) {
	.how-it-works__box:nth-of-type(1) .how-it-works__box-text,
	.how-it-works__box:nth-of-type(4) .how-it-works__box-text,
	.how-it-works__box-item-container .how-it-works__box-text {
		width: 100%;
	}
}

/* ######################### */
/* Why you should use it */
/* ######################### */

.why {
	padding: var(--spacing-section-md) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.why__top-container {
	margin-bottom: var(--spacing-2xl);
	display: grid;
	grid-template-columns: 8fr 4fr;
	align-items: end;
}

.why__top-container-text {
	margin-bottom: var(--spacing-sm);
	font-size: var(--fz-md);
}

.why__top-container-text:last-of-type {
	margin-bottom: 0;
}

.why__video-contaier {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	overflow: hidden;
}

.why__video-contaier iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 1279px) {
	.why__top-container {
		grid-template-columns: 7fr 5fr;
	}
}

@media (max-width: 1119px) {
	.why__top-container {
		grid-template-columns: 1fr;
	}

	.why__heading {
		margin-bottom: var(--spacing-md);
	}

	.why__top-container-text {
		width: 60%;
	}
}

@media (max-width: 1023px) {
	.why__top-container-text {
		width: 75%;
	}
}

@media (max-width: 767px) {
	.why__top-container-text {
		width: 85%;
	}
}

@media (max-width: 479px) {
	.why__top-container-text {
		width: 100%;
	}
}

/* ######################### */
/* High-quality historical data */
/* ######################### */

.data {
	padding: var(--spacing-section-md) 0;
}

.data__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.data__heading {
	margin-bottom: var(--spacing-md);
}

.data__text {
	margin-bottom: var(--spacing-sm);
	width: 60%;
	text-align: center;
	font-size: var(--fz-md);
}

.data__text:last-of-type {
	margin-bottom: var(--spacing-xl);
}

.data__logo-container {
	margin-bottom: var(--spacing-2xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2xl);
}

.data__logo {
	height: 2rem;
}

@media (max-width: 1279px) {
	.data__logo {
		height: 1.75rem;
	}
}

@media (max-width: 1119px) {
	.data__text {
		width: 75%;
	}
}

@media (max-width: 1023px) {
	.data__text {
		width: 85%;
	}
}

@media (max-width: 767px) {
	.data__inner {
		align-items: start;
	}

	.data__text {
		text-align: left;
	}

	.data__logo-container {
		gap: var(--spacing-xl);
	}
}

@media (max-width: 479px) {
	.data__text {
		width: 100%;
	}
}

/* ######################### */
/* Tabs section */
/* ######################### */

.tabs {
	padding: var(--spacing-section-md) 0;
}

.tabs__main-container {
	overflow: hidden;
}

.tabs__top-container {
	position: relative;
	padding: var(--spacing-md);
	background-color: var(--color-bg-dark);
	border: 1px solid var(--color-brand-primary);
	border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.tabs__top-container:active {
	cursor: grabbing;
}

.tabs__top-container::-webkit-scrollbar {
	display: none; /* Ukrywa scrollbar Chrome/Safari */
}

.tabs__btn-container {
	/* position: relative; */
	display: flex;
	gap: var(--spacing-md);
	width: max-content;
	flex-wrap: nowrap;
}

.tabs__btn {
	border-color: var(--color-bg-alt);
	color: var(--color-bg-alt);
}

.tabs__btn--active {
	background-color: var(--color-bg-alt);
	color: var(--color-brand-secondary);
}

.tabs__btn--active:hover {
	border-color: var(--color-bg-alt);
	background-color: var(--color-bg-alt);
	color: var(--color-brand-secondary);
}

.tabs__bottom-container {
	position: relative;
	overflow: hidden;
	padding: var(--spacing-xl) var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
	will-change: height;
}

.tabs__bottom-container-item {
	display: none;
	padding: 0;
}

.tabs__bottom-container-item--active {
	display: grid;
}

.tabs__bottom-container-item .image-section__text {
	font-size: var(--fz-sm);
}

/* @media (max-width: 1279px) {} */

/* @media (max-width: 1119px) {} */

@media (max-width: 1023px) {
	.tabs__bottom-container-item--active {
		display: flex;
	}

	.tabs__bottom-container-item .image-section__img-container {
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.tabs {
		margin: 0 calc(var(--spacing-md) * -1) 0 calc(var(--spacing-md) * -1);
	}

	.tabs__top-container,
	.tabs__bottom-container {
		border: none;
		border-radius: 0;
	}
}

/* @media (max-width: 479px) {} */

/* ######################### */
/* Pricing */
/* ######################### */

.pricing {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.pricing__container {
	width: 100%;
	/* border: 1px solid blue; */
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--spacing-md);
}

.pricing__box {
	grid-column: 2 / 7;
	padding: var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
}

.pricing__box:last-of-type {
	position: relative;
	grid-column: 7 / 12;
	box-shadow: 0 0 0 3px var(--color-brand-primary);
}

/* .pricing__box:last-of-type::before {
	content: "Recommended for you";
	position: absolute;
	top: 0;
	left: -5px;
	transform: translateY(calc((100% * -1) + var(--spacing-2xs)));
	width: calc(100% + 10px);
	padding: var(--spacing-2xs) 0 calc(var(--spacing-2xs) * 2) 0;
	text-align: center;
	font-weight: 600;
	border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
	background-color: var(--color-brand-primary);
	color: var(--color-text-alt);
	z-index: -1;
} */

.pricing__box-heading {
	font-size: var(--fz-xl);
	margin-bottom: var(--spacing-xs);
}

.pricing__box-below-heading{
	margin-bottom: var(--spacing-xl);
	width: 75%;
	font-size: var(--fz-md);
}

.pricing__box-text {
	margin-bottom: var(--spacing-xl);
	width: 75%;
}

.pricing__box-text--mb {
	margin-bottom: 0;
}

.pricing__box-price-container {
	margin-bottom: var(--spacing-md);
	display: flex;
}

.pricing__box-price {
	font-size: 4rem;
}

.pricing__box-price--tax {
	font-size: var(--fz-sm);
	font-weight: 400;
}

.pricing__box-line {
	margin-bottom: var(--spacing-md);
}

.pricing__box-btn {
	margin-bottom: var(--spacing-md);
}

.pricing__box-btn--mb {
	margin-bottom: var(--spacing-xs);
}

.pricing__box-input-container {
	margin-bottom: var(--spacing-md);
	padding-right: 1.875rem;
	display: flex;
	align-items: center;
	/* background-color: rgb(56, 43, 43); */
	border: 2px solid var(--color-brand-secondary);
	border-radius: 9999px;
}

.pricing__box-input {
	padding: 1.125rem 1.875rem;
	width: 100%;
	background-color: transparent;
	border: none;
	outline: none;
	font-size: var(--fz-md);
	font-weight: 500;
}

.pricing__box-input-apply {
	/* padding: 0 1.875rem; */
	background-color: transparent;
	border: none;
	outline: none;
	font-size: var(--fz-md);
	font-weight: 600;
}

.pricing__box-input-apply:hover {
	cursor: pointer;
}

.pricing__box-bullet-point-heading {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-md);
	font-weight: 600;
}

.pricing__box-bullet-point-heading--mb {
	margin-bottom: var(--spacing-xs);
}

.pricing__box-bullet-point-container {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	gap: 1.25rem;
}

.pricing__box-bullet-point-container--mb {
	margin-bottom: var(--spacing-md);
}

.pricing__box-bullet-point {
	display: flex;
	gap: var(--spacing-2xs);
	align-items: center;
}

.pricing__box-bullet-point--mb {
	margin-bottom: var(--spacing-lg);
}

.pricing__box-bullet-point-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-primary);
}

.pricing__box-bullet-point-icon-cross {
	color: var(--color-brand-secondary);
}

.pricing__box-bullet-point-icon svg {
	width: 100%;
	height: 100%;
	/* width: 1.125rem; */
	/* height: 1.125rem; */
}

.pricing__box-bullet-point-text {
	font-weight: 500;
}

.pricing__box-alert {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
}

.pricing__box-alert-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-text-alt);
}

.pricing__box-alert-fail {
	background-color: rgb(192, 0, 0);
}

.pricing__box-alert-success {
	background-color: rgb(0, 109, 0);
}

.pricing__box-alert-icon svg {
	width: 100%;
	height: 100%;
}

.pricing__box-alert-heading {
	color: var(--color-text-alt);
}


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

	.pricing__box {
		grid-column: auto;
	}

	.pricing__box:last-of-type {
		grid-column: auto;
	}
}

@media (max-width: 1119px) {
}

@media (max-width: 1023px) {
	.pricing__box-text {
		width: 85%;
	}
}

@media (max-width: 767px) {
	.pricing__container {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.pricing__box:last-child {
		order: -1;
	}
}

@media (max-width: 479px) {
	.pricing__box-text {
		width: 100%;
	}
}

/* ######################### */
/* FAQ */
/* ######################### */

.faq {
	padding: var(--spacing-section-md) 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.faq__heading {
	margin-bottom: var(--spacing-md);
}

.faq__text {
	font-size: var(--fz-md);
	width: 75%;
}

.faq__box-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.faq__box {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	transition: background-color 0.3s;
	overflow: hidden;
	user-select: none;
}

.faq__box--active {
	background-color: var(--color-bg-alt);
}

.faq__box-top-container {
	cursor: pointer;
	padding: var(--spacing-sm) var(--spacing-md);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq__box-heading {
	font-size: var(--fz-md);
	color: var(--color-heading);
	transition: color 0.3s;
}

.faq__box--active .faq__box-heading {
	color: var(--color-text-heading);
}

.faq__box-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-brand-primary);
}

.faq__box-icon-plus {
	/* display: none; */
}

.faq__box--active .faq__box-icon-plus {
	display: none;
}

.faq__box-bottom-container {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s;
}

.faq__box-bottom-container-wrapper {
	overflow: hidden;
}

.faq__box--active .faq__box-bottom-container {
	grid-template-rows: 1fr;
}

.faq__box-text {
	padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);
	color: var(--color-text);
}

@media (max-width: 1279px) {
	.faq {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}
}

/* @media (max-width: 1119px) {} */

/* @media (max-width: 1023px) {} */

@media (max-width: 767px) {
	.faq__text {
		width: 85%;
	}
}

@media (max-width: 479px) {
	.faq__text {
		width: 100%;
	}
}

/* ######################### */
/* Download */
/* ######################### */

.download {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.download__container {
	width: 100%;
	/* border: 1px solid blue; */
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--spacing-md);
}

.download__box {
	grid-column: 2 / 7;
	padding: var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
}

.download__box:last-of-type {
	grid-column: 7 / 12;
}

.download__box-heading {
	margin-bottom: var(--spacing-lg);
	width: 50%;
	font-size: var(--fz-lg);
}

.download__box-line {
	margin-bottom: var(--spacing-md);
}

.download__box-btn {
	margin-bottom: var(--spacing-2xs);
}

.download__box-btn:last-of-type {
	justify-self: start;
	margin-bottom: 0;
}

.download__box-version {
	margin-bottom: var(--spacing-md);
	text-align: center;
}

.download__box-bullet-point-heading {
	margin-bottom: var(--spacing-xs);
	font-size: var(--fz-md);
	font-weight: 600;
}

.download__box-bullet-point-container {
	margin-bottom: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	gap: 1.25rem;
}

.download__box-bullet-point {
	display: flex;
	gap: var(--spacing-2xs);
	align-items: center;
}

.download__box-bullet-point-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-primary);
}

.download__box-bullet-point-icon svg {
	width: 100%;
	height: 100%;
	/* width: 1.125rem; */
	/* height: 1.125rem; */
}

.download__box-bullet-point-text {
	font-weight: 500;
}

@media (max-width: 1279px) {
	.download__text {
		width: 60%;
	}

	.download__container {
		grid-template-columns: 1fr 1fr;
	}

	.download__box {
		grid-column: auto;
	}

	.download__box:last-of-type {
		grid-column: auto;
	}
}

/* @media (max-width: 1119px) {} */

/* @media (max-width: 1023px) {} */

@media (max-width: 767px) {
	.download__container {
		grid-template-columns: 1fr;
		/* gap: var(--spacing-2xl); */
	}
}

/* ######################### */
/* Affiliate program */
/* ######################### */

.affiliate {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.affiliate__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.affiliate__box {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
}

.affiliate__box:last-of-type {
	grid-column: 1 / -1;
	background-color: var(--color-bg-dark);
}

.affiliate__box:last-of-type .custom-link {
	color: var(--color-text-alt);
}

.affiliate__box:last-of-type .affiliate__box-heading,
.affiliate__box:last-of-type .affiliate__box-text {
	color: var(--color-text-alt);
}

.affiliate__box-heading {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-xl);
}

.affiliate__box-text,
.affiliate__box-text > li:last-of-type {
	margin-bottom: var(--spacing-sm);
}

.affiliate__box-text:last-of-type {
	margin-bottom: 0;
}

/* .affiliate__box:first-of-type .affiliate__box-text:last-of-type { */
/* margin-bottom: max-content; */
/* } */

.affiliate__box-btn {
	margin-top: auto;
}

.affiliate__box-svg-container {
	/* margin-top: auto; */
	position: absolute;
	bottom: var(--spacing-md);
	right: var(--spacing-md);
	width: 12rem;
	height: 12rem;
	transition: transform 0.3s;
	will-change: transform;
}

.affiliate__box:hover .affiliate__box-svg-container {
	transform: translate(-10%, -10%);
}

.affiliate__box-svg-container::before {
	z-index: 1;
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		-45deg,
		rgba(20, 20, 20, 1) 0%,
		rgba(20, 20, 20, 0.35) 100%
	);
}

.affiliate__box-svg-container svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* @media (max-width: 1279px) {} */

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

	.affiliate__box-text {
		width: 60%;
	}

	.affiliate__box-btn {
		margin-top: var(--spacing-md);
	}
}

@media (max-width: 1023px) {
	.affiliate__box-text {
		width: 75%;
	}
}

@media (max-width: 767px) {
	.affiliate__box-text {
		width: 85%;
	}

	.affiliate__box-svg-container {
		display: none;
	}
}

@media (max-width: 479px) {
	.affiliate__box-text {
		width: 100%;
	}
}

/* ######################### */
/* Contact */
/* ######################### */

.contact {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.contact__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.contact__box {
	position: relative;
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: start;
	background-color: var(--color-bg-alt);
	border-radius: var(--border-radius-main);
	border: 1px solid var(--color-border);
}

.contact__box:last-of-type {
	grid-column: 2 / 3;
	grid-row: 1 / 4;
	background-color: var(--color-bg-dark);
}

.contact__box-heading {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-xl);
}

.contact__box:last-of-type .contact__box-heading {
	margin-bottom: var(--spacing-lg);
	color: var(--color-text-alt);
}

.contact__box-text {
	margin-bottom: var(--spacing-xs);
}

.contact__box-text:last-of-type {
	margin-bottom: 0;
}

.contact__box .custom-link {
	margin-bottom: var(--spacing-xs);
}

.contact__box .custom-link:last-child {
	margin-bottom: 0;
}

.contact__box-svg-container {
	/* margin-top: auto; */
	position: absolute;
	bottom: var(--spacing-md);
	right: var(--spacing-md);
	width: 6rem;
	height: 6rem;
	transition: transform 0.3s;
	will-change: transform;
}

.contact__box:hover .contact__box-svg-container {
	transform: translate(-10%, -10%);
}

.contact__box-svg-container::before {
	z-index: 1;
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		-45deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.35) 100%
	);
}

.contact__box-svg-container svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contact__box-form {
	width: 100%;
}

.contact__box-input-container {
	margin-bottom: var(--spacing-md);
	width: 100%;
	position: relative;
	/* background-color: gray; */
	border-radius: 9999px;
	border: 2px solid var(--color-border);
}

.contact__box-input-container--textarea {
	border-radius: 24px;
}

.contact__box-input {
	width: 100%;
	padding: 1rem 1.75rem;
	font-size: var(--fz-sm);
	color: var(--color-text-alt);
	/* font-weight: 500; */
}

.contact__box-input--textarea {
	/* background-color: red; */
	min-height: 9rem;
	resize: vertical;
}

.contact__box-input--textarea::-webkit-resizer {
	/* border-radius: 4px;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 3px,
		red 3px,
		red 4px
	); */
	display: none;
}

.contact__box-input-label {
	position: absolute;
	top: 50%;
	left: 1.75rem;
	transform: translate(0, -50%);
	color: var(--color-text-alt);
	background-color: var(--color-bg-dark);
	pointer-events: none;
	transition:
		top 0.3s,
		left 0.3s,
		padding 0.3s,
		font-size 0.3s;
}

.contact__box-input-label--textarea {
	top: 1.75rem;
}

.contact__box-input-label--active {
	top: 0;
	left: 1.5rem;
	padding: 0 0.5rem;
	font-size: var(--fz-xs);
}

.contact__box-input-captcha-img {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	border-left: 2px solid var(--color-border);
	border-radius: 0 9999px 9999px 0;
}

.contact__box-input-captcha-refresh {
	margin-bottom: var(--spacing-lg) !important;
	display: flex;
	justify-self: end;
	font-size: var(--fz-sm);
	 color: var(--color-text-alt); 
}

.contact__box-alert {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
}

.contact__box-alert-fail {
	background-color: var(--color-alert-fail);
}

.contact__box-alert-success {
	background-color: var(--color-alert-success);
}

.contact__box-alert-warning {
	background-color: var(--color-alert-warning);
}

.contact__box-alert-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-text-alt);
}

.contact__box-alert-icon svg {
	width: 100%;
	height: 100%;
}

.contact__box-alert-heading {
	color: var(--color-text-alt);
}

.contact__box-alert-link {
	color: var(--color-text-alt);
}

.contact__box-form-bottom-container {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: var(--spacing-md);
}

.contact__box-form-privacy-text {
	width: 50%;
	color: var(--color-text-alt);
	/* line-height: normal; */
}

.contact__box-form-privacy-text a {
	display: inline-block;
	color: var(--color-text-alt);
	/* line-height: normal; */
	vertical-align: bottom;
}

.contact__box-form-send-btn {
	font-size: var(--fz-sm);
	font-weight: 500;
	line-height: normal;
}

/* @media (max-width: 1279px) {} */

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

	.contact__box:last-of-type {
		grid-column: auto;
		grid-row: auto;
	}
}

/* @media (max-width: 1023px) {} */

/* @media (max-width: 767px) {} */

@media (max-width: 479px) {
	.contact__box-svg-container {
		display: none;
	}

	.contact__box-form-bottom-container {
		flex-direction: column;
		align-items: start;
	}

	.contact__box-form-privacy-text {
		width: 100%;
	}

	.contact__box-form-send-btn {
		/* align-self: end; */
		width: 100%;
	}
}

/* ######################### */
/* Tutorials select */
/* ######################### */

.tutorials-select {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.tutorials-select__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

.tutorials-select__box {
	position: relative;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-alt);
	border-radius: var(--border-radius-main);
	transition: background-color 0.3s;
}

.tutorials-select__box:hover {
	cursor: pointer;
	background-color: var(--color-bg-dark);
}

.tutorials-select__box-heading {
	font-size: var(--fz-lg);
}

.tutorials-select__box:hover .tutorials-select__box-heading,
.tutorials-select__box:hover .tutorials-select__box-text {
	color: var(--color-text-alt);
}

.tutorials-select__box-heading-container {
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
}

.tutorials-select__box-icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	color: var(--color-brand-primary);
}

.tutorials-select__box-icon svg {
	width: 100%;
	height: 100%;
	/* width: 1.125rem; */
	/* height: 1.125rem; */
}

.tutorials-select__box-text {
	width: 75%;
}

@media (max-width: 1279px) {
	.tutorials-select__box-text {
		width: 85%;
	}
}

/* @media (max-width: 1119px) {} */

@media (max-width: 1023px) {
	.tutorials-select__container {
		grid-template-columns: 1fr;
	}

	.tutorials-select__box-text {
		width: 60%;
	}
}

@media (max-width: 767px) {
	.tutorials-select__box-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.tutorials-select__box-text {
		width: 85%;
	}
}

@media (max-width: 479px) {
	.tutorials-select__box-text {
		width: 100%;
	}
}

/* ######################### */
/* Tutorials subpage */
/* ######################### */

.tutorials {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.tutorials__container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--spacing-md);
}

.tutorials__nav {
	align-self: start;
	position: sticky;
	top: var(--spacing-section-lg);
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xs);
	overflow-y: auto;
	max-height: calc(100vh - var(--spacing-section-lg));
	/* background-color: gray; */
}

.tutorials__nav::-webkit-scrollbar {
	width: 12px;
}

.tutorials__nav::-webkit-scrollbar-track {
	background: var(--color-bg);
	border-radius: 9999px;
}

.tutorials__nav::-webkit-scrollbar-thumb {
	background: var(--color-brand-primary);
	border-radius: 9999px;
	border: 4px solid var(--color-bg);
}

.tutorials__nav-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xs);
}

.tutorials__nav-item-main {
	padding: var(--spacing-3xs);
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--border-radius-sm);
	transition:
		background-color 0.3s,
		border-color 0.3s;
}

.tutorials__nav-item-main:hover {
	cursor: pointer;
	background-color: var(--color-bg-alt);
	border-color: var(--color-border);
}

.tutorials__nav-item-secondary-container {
	margin-left: var(--spacing-md);
	display: none;
}

.tutorials__nav-item--active .tutorials__nav-item-secondary-container {
	display: flex;
	flex-direction: column;
}

.tutorials__nav-item-secondary {
	padding: var(--spacing-3xs) var(--spacing-2xs);
	border: 1px solid transparent;
	border-left: 1px solid var(--color-border);
	background-color: transparent;
	transition:
		background-color 0.3s,
		border 0.3s,
		border-radius 0.3s;
}

.tutorials__nav-item-secondary:hover {
	cursor: pointer;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
}

.tutorials__nav-item-secondary--active {
	border: 1px solid transparent;
	border-left: 1px solid var(--color-brand-primary);
}

.tutorials__nav-item-secondary--active.tutorials__nav-item-secondary:hover {
	border: 1px solid var(--color-brand-primary);
	border-radius: var(--border-radius-sm);
}

.tutorials__nav-item-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-primary);
}

.tutorials__nav-item-icon svg {
	width: 100%;
	height: 100%;
	/* width: 1.125rem; */
	/* height: 1.125rem; */
}

.tutorials__nav-item-text {
	font-weight: 600;
	transition: color 0.3s;
}

.tutorials__nav-item-text--secondary {
	font-size: var(--fz-xs);
}

.tutorials__nav-item-secondary--active .tutorials__nav-item-text--secondary {
	color: var(--color-brand-primary);
}

.tutorials__main {
	grid-column: 4 / 13;
	/* background-color: black; */
}

.tutorials__main-nav {
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-2xs);
	display: none;
}

.tutorials__main-nav-item {
	font-weight: 600;
}

.tutorials__main-nav-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-primary);
}

.tutorials__main-nav-icon svg {
	width: 100%;
	height: 100%;
	/* width: 1.125rem; */
	/* height: 1.125rem; */
}

.tutorials__main-wrapper {
	max-width: 80ch;
}

/* .tutorials__main .custom-link {
	display: inline-block;
	vertical-align: middle;
} */

.tutorials__main h1 {
	margin-bottom: var(--spacing-xl);
	font-size: var(--fz-2xl);
}

.tutorials__main h2 {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-sm);
	font-size: var(--fz-xl);
}

.tutorials__main h3 {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
	font-size: var(--fz-md);
}

.tutorials__main p {
	margin: var(--spacing-xs) 0;
	font-size: var(--fz-md);
}

.tutorials__main p.download__box-bullet-point-text {
	margin: 0;
}

.tutorials__main ul, .tutorials__main ol {
	margin: var(--spacing-xs) 0;
	padding-left: var(--spacing-lg);
	font-size: var(--fz-md);
	list-style-position: outside;
}

.tutorials__main ul li, .tutorials__main ol li {
	margin: var(--spacing-xs) 0;
}

.tutorials__main-img {
	margin-top: var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
	box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.15);
	max-width: 100%;
}

.tutorials__block {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-main);
}

.tutorials__block--success {
	border-color: var(--color-success);
}

.tutorials__block--info {
	border-color: var(--color-info);
}

.tutorials__block--warning {
	border-color: var(--color-warning);
}

.tutorials__block-top-container {
	margin-bottom: var(--spacing-xs);
	display: flex;
	align-items: center;
	gap: var(--spacing-3xs);
}

.tutorials__block-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-brand-primary);
}

.tutorials__block--success .tutorials__block-icon {
	color: var(--color-success);
}

.tutorials__block--info .tutorials__block-icon {
	color: var(--color-info);
}

.tutorials__block--warning .tutorials__block-icon {
	color: var(--color-warning);
}

.tutorials__block-icon svg {
	width: 100%;
	height: 100%;
}

.tutorials__block-heading {
	margin: 0 !important;
}

.tutorials__block-text:last-of-type {
	margin: 0 !important;
}

.tutorials__block .tutorials__main-img {
	margin: var(--spacing-md) 0 0 0;
}

.tutorials__main-wrapper table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-sm);
	/* border-radius: var(--border-radius-main); */
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.tutorials__main-wrapper th {
	text-align: left;
	padding: var(--spacing-2xs);
	border-bottom: 2px solid var(--color-border);
	font-weight: 600;
}

.tutorials__main-wrapper td {
	text-align: left;
	padding: var(--spacing-2xs);
	border-bottom: 1px solid var(--color-border);
}

.tutorials__main-wrapper tr:nth-child(odd) {
	background-color: var(--color-bg-alt);
	/* color: var(--color-text-alt); */
}

/* @media (max-width: 1279px) {} */

/* @media (max-width: 1119px) {} */

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

	.tutorials__nav {
		display: none;
	}

	.tutorials__main {
		grid-column: auto;
	}

	.tutorials__main-nav {
		display: flex;
	}

	.tutorials__main-img {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.tutorials__main-img {
		max-width: 100%;
	}
}

/* @media (max-width: 479px) {} */

/* ######################### */
/* Policy subpages */
/* ######################### */

.policy {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.policy .subpage-center-text__heading {
	margin-bottom: var(--spacing-2xl);
}

.policy__container {
	max-width: 80ch;
}

.policy__container h2 {
	margin-top: var(--spacing-xl);	
	margin-bottom: var(--spacing-sm);	
	font-size: var(--fz-xl);
}

.policy__container p {
	margin: var(--spacing-md) 0;
	font-size: var(--fz-md);
}

.policy__container ul {
	margin: var(--spacing-xs) 0;
	padding-left: var(--spacing-lg);
	font-size: var(--fz-md);
	list-style-position: outside;
}

/* ######################### */
/* Lost activation code */
/* ######################### */

.lac {
	padding: var(--spacing-section-lg) 0 var(--spacing-section-md) 0;
}

.lac__box {
	margin: 0 auto;
	width: 50%;
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-bg-dark);
	border-radius: var(--border-radius-main);
	border: 1px solid var(--color-border);
}

.lac__box-heading {
	margin-bottom: var(--spacing-md);
	font-size: var(--fz-xl);
	color: var(--color-text-alt);
	text-align: center;
}

.lac__box-text {
	margin-bottom: var(--spacing-2xs);
	color: var(--color-text-alt);
	text-align: center;
}

.lac__box-text:last-of-type {
	margin-bottom: var(--spacing-md);
}

.lac .contact__box-form-send-btn {
	justify-self: center;
	margin-bottom: var(--spacing-xs);
	width: 16rem;
}

/* @media (max-width: 1279px) {} */

/* @media (max-width: 1119px) {} */

@media (max-width: 1023px) {
	.lac__box {
		width: 65%;
	}
}

@media (max-width: 767px) {
	.lac__box {
		width: 100%;
	}
}


/* ######################### */
/* Historical data show */
/* ######################### */

.history__main-wrapper {
	align-items: center;
    text-align: center;
}

.history__faq-box-heading {
	font-size: var(--fz-lg);
	color: var(--color-heading);
	transition: color 0.3s;
}

.history__main-wrapper h3 {
	margin-bottom: var(--spacing-sm);
	text-align: center;	
}

.history__main-wrapper table {	
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-lg);
	font-size: var(--fz-sm);
	/* border-radius: var(--border-radius-main); */
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.history__main-wrapper th {
	text-align: left;
	font-size: var(--fz-sm);
	padding: var(--spacing-2xs);
	border-bottom: 2px solid var(--color-border);
	font-weight: 800;
}

.history__main-wrapper td {
	text-align: left;
	padding: var(--spacing-2xs);
	border-bottom: 1px solid var(--color-border);
}

.history__main-wrapper tr:nth-child(odd) {
	background-color: var(--color-bg-alt);
	/* color: var(--color-text-alt); */
}


/* ######################### */
/* Thank you page */
/* ######################### */

.thank-you__text {
    margin-bottom: var(--spacing-sm);
}

/* ######################### */
/* Footer */
/* ######################### */

.footer {
	background-color: var(--color-bg-dark);
	color: var(--color-text-alt);
}

.footer__top-container {
	padding: var(--spacing-section-sm) 0 var(--spacing-2xl) 0;
	background-image:
		linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 1) 50%),
		linear-gradient(to bottom, rgba(20, 20, 20, 0.9), rgba(20, 20, 20, 0.9)),
		url("../misc/grid-pattern-white.svg");
	background-size: cover, cover, 7.5%;
	border-top: 1px solid var(--color-brand-primary);
}

.footer__top-container-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer__cta-heading {
	margin-bottom: var(--spacing-md);
	color: var(--color-text-alt);
}

.footer__cta-text {
	margin-bottom: var(--spacing-xl);
	font-size: var(--fz-md);
}

.footer__bottom-container {
}

.footer__bottom-container-top-item,
.footer__bottom-container-bottom-item {
	/* min-height: 10vh; */
}

.footer__bottom-container-top-item {
	margin-bottom: var(--spacing-xl);
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: var(--spacing-2xl);
}

.footer__text-container {
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.footer__logo {
	display: flex;
	margin-bottom: var(--spacing-lg);
	/* width: fit-content; */
	height: 4rem;
}

.footer__text {
	width: 60%;
	margin-bottom: var(--spacing-lg);
}

.footer__btn-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.footer__link-container {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.footer__link-container-heading {
	margin-bottom: var(--spacing-xs);
	font-weight: 600;
}

.footer__link-container .footer__link {
	margin-bottom: var(--spacing-2xs);
	color: var(--color-text-alt);
}

.footer__link-container .footer__link:last-child {
	margin-bottom: 0;
}

.footer .footer__link {
	font-weight: 400;
	text-decoration: none;
}

.footer .footer__link::before {
	content: none;
}

.footer .footer__link:hover {
	color: var(--color-brand-primary);
}

.footer__bottom-container-bottom-item {
	padding: var(--spacing-sm) 0;
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.footer__bottom-container-bottom-item-link-container {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.footer__bottom-container-bottom-item-link-container a {
	color: var(--color-text-alt);
}

@media (max-width: 1279px) {
	.footer__text {
		width: 75%;
	}
}

@media (max-width: 1119px) {
	.footer__bottom-container-top-item {
		/* display: grid; */
		/* grid-template-columns: 1fr 1fr; */
	}
}

@media (max-width: 1023px) {
	.footer__cta-text {
		width: 85%;
	}

	.footer__bottom-container-top-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.footer__top-container-item {
		/* display: flex; */
		/* flex-direction: column; */
		align-items: start;
		/* justify-content: left; */
	}

	.footer__bottom-container-top-item {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.footer__cta-text,
	.footer__text {
		width: 100%;
	}
}

/* @media (max-width: 1279px) {} */

/* @media (max-width: 1119px) {} */

/* @media (max-width: 1023px) {} */

/* @media (max-width: 767px) {} */

/* @media (max-width: 479px) {} */