/* Import fonts */
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

:root {
	--mc-black-1: #181820;
	--mc-black-op-1: #181820c0;
	--mc-black-2: #12121b;
	--mc-black-3: #202029;
	--mc-white-1: #ffffff;

	--ac-green-1: #04d9a2;
	--ac-purple-1: #855fc7;
	--ac-orange-1: #fe9947;
	--ac-pink-1: #f172b5;

	--font-style-1: "PT Sans", sans-serif;
	--font-style-2: "Anton", sans-serif;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Global HTML */
html {
	font-size: 10px;
	scroll-behavior: smooth;
	font-family: var(--font-style-1);
}

@media only screen and (min-width: 1370px) {
	html {
		font-size: 12px;
	}
}

body {
	font-size: 1.6rem;
	background-color: var(--mc-black-1);
	overflow: initial;
	position: relative;
	animation: overflowBody 16s ease forwards;
}

@keyframes overflowBody {
	from {
		overflow: hidden;
	}

	to {
		overflow: initial;
	}
}

.body-responsive {
	overflow: hidden !important;
}

body::-webkit-scrollbar {
	width: 0.5rem;
}

body::-webkit-scrollbar-track {
	background-color: var(--mc-black-2);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--ac-green-1);
}

p,
a {
	color: var(--mc-white-1);
	text-decoration: none;
}

.text-green {
	color: var(--ac-green-1);
}

.bg-purple {
	background-color: var(--ac-purple-1) !important;
}

.bg-orange {
	background-color: var(--ac-orange-1) !important;
}

.bg-pink {
	background-color: var(--ac-pink-1) !important;
}

/* GLOBAL STYLING */
.button-green {
	background-color: var(--ac-green-1);
	padding: 1rem 3rem;
	border-radius: 1rem;
	text-align: center;
	font-weight: 700;
	border: 2px solid var(--ac-green-1);
	transition: all 0.3s ease;
}

.button-green:hover {
	border: 2px solid var(--ac-green-1);
	background-color: var(--mc-black-1);
	color: var(--ac-green-1);
	transition: all 0.3s ease;
}

.button-green:hover p {
	color: var(--ac-green-1);
	transition: all 0.3s ease;
}

.button-wa {
	position: fixed;
	bottom: 2rem;
	right: 8rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 20;
}

/* Responsive */
@media only screen and (max-width: 1024px) {
	.button-wa {
		bottom: 2rem;
		right: 8rem;
	}
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 540px) {
	.button-wa {
		bottom: 2rem;
		right: 2rem;
	}
}

@media only screen and (max-width: 425px) {
}

@media only screen and (max-width: 320px) {
}

@media only screen and (max-width: 280px) {
}

/* STYLING */

.preloader {
	position: fixed;
	z-index: 50;
	background-color: var(--mc-black-1);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: preloader 3s ease forwards;
}

@keyframes preloader {
	0% {
		opacity: 1;
		pointer-events: initial;
	}

	90% {
		opacity: 1;
	}

	95% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		pointer-events: none;
	}
}

.preloader img {
	width: 100%;
	max-width: 18rem;
}

.after-loader {
	position: fixed;
	z-index: 25;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overflow-y: hidden;
	pointer-events: none;
}

.after-loader .wrapper-layer {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.after-loader .layer {
	width: 100%;
	height: 50vh;
	background-color: var(--mc-black-1);
	z-index: 30;
}

.after-loader .layer:nth-child(1) {
	animation: layerMoveTop 2s ease 3s forwards;
}

.after-loader .layer:nth-child(2) {
	animation: layerMoveBot 2s ease 3s forwards;
}

@keyframes layerMoveTop {
	0% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(-40vh);
	}

	100% {
		transform: translateY(-50vh);
	}
}

@keyframes layerMoveBot {
	0% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(40vh);
	}

	100% {
		transform: translateY(50vh);
	}
}

.client-image {
	width: 90vw;
	height: 36vw;
	max-width: 1200px;
	max-height: 475px;
	background-size: contain;
	background-repeat: no-repeat;
}