:root {
	--main-color: black;
	--main-gradient-color: rgba(255, 0, 85, 0.8);
	--secondary-gradient-color: rgba(111, 151, 255, 0.74);
	--gradient-bg: linear-gradient(
		91deg,
		var(--main-gradient-color) 0.91%,
		var(--secondary-gradient-color) 98.79%
	);
}

header {
	background: var(--main-gradient-color);
	background: var(--gradient-bg);
	justify-content: flex-end;
	padding-right: 5%;
}

header .logo {
	width: 10rem;
}

.steps {
	background: var(--main-gradient-color);
	background: var(--gradient-bg);
}

.load-element > * {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.load-element > *.loaded {
	opacity: 1;
	transform: translateY(0);
}

.step:not(.active) {
	display: none !important;
}



@media only screen and (max-width: 767px) {
	.steps {
		position: absolute;
		bottom: 10%;
		width: 90%;
	}

	.dots {
		position: absolute;
		top: -8px;
		transform: translateY(-100%) !important;
	}

	.bg > img {
		object-position: 35% !important;
	}

	.bg--right {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.bg {
		display: flex;
	}

	.bg > img {
		width: 50% !important;
	}

	.bg > img:first-child {
		object-position: 0 5%;
	}

	.bg > img:last-child {
		object-position: left 5%;
	}

	.content {
		padding: 0;
		align-items: center;
	}

	.steps p {
		font-size: 0.75rem;
	}

	.dot:not(.dot-active) {
		background: none;
		border: 1px solid #b9b9b9;
	}
}