@charset "UTF-8";

/* Definindo a fonte usando @font-face para cada variação */
@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: "Darker Grotesque";
	src: url("../fonts/static/DarkerGrotesque-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
}

/* Aplica a fonte a todos os elemento */

/* html {
  scroll-behavior: smooth;
}

* {
  font-family: "Darker Grotesque", sans-serif;
} */

.letter-gradient {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(to right, #fed12f, #ff5c03);
}

.gradient-default {
	background-image: linear-gradient(to right, #fed12f, #ff5c03);
}

.header-banner {
	background-image: url(../images/capa-lp-web.webp);
	background-size: 2478px auto;
	background-repeat: no-repeat;
	background-position: center center;
}

@media screen and (max-width: 500px) {
	.header-banner {
		background-image: url(../images/capa-lp-mobile.webp);
		background-position: top top;
		background-size: cover;
	}

	.space-desktop {
		height: 140px !important;
	}
}

.header-background {
	background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.082) 60%);
}

.carrossel-feedbacks .carrossel-descricao {
	background: linear-gradient(
		180deg,
		rgba(19, 18, 18, 0) 36.97%,
		rgba(19, 18, 18, 0.85) 76.78%,
		#131212 99.3%
	);
}

.bar-vertical {
	animation: barVertical 0.8s linear infinite;
	border-right: 2px solid white;
}

@keyframes barVertical {
	0% {
		border-color: transparent;
	}

	50% {
		border-color: white;
	}

	100% {
		border-color: transparent;
	}
}

.ball-gradient {
	background: linear-gradient(
		90deg,
		#fed12f 0%,
		#fed12f 24.21%,
		#ff5c03 101.04%
	);
	border-radius: 100%;
	filter: blur(100px);
	width: 200px;
	height: 200px;
	opacity: 0.3;
}

.shadow-icon {
	box-shadow: 0 0 25px rgba(254, 209, 47, 0.2745098039);
}

.equipe-banner {
	background-image: url(../images/arte-ecomplus-pc.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

.equipe-banner .gradient-equipe {
	background: linear-gradient(
		180deg,
		rgba(105, 105, 105, 0) -39.07%,
		#131313 86.25%
	);
}

@media screen and (max-width: 500px) {
	.equipe-banner {
		background-image: url(../images/mobile-img.png);
	}
}

.tag-equipe {
	border: 1px solid rgba(255, 255, 255, 0.1019607843);
	background-color: rgba(255, 255, 255, 0.1019607843);
	backdrop-filter: blur(20px);
}

.scroll-effect-equipe {
	animation: scrollAnimation 20s linear infinite;
	white-space: nowrap;
	/* impede que os itens quebrem em várias linhas */
	overflow: hidden;
	/* esconde os itens que excedem a largura do contêiner */
}

@keyframes scrollAnimation {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-350px);
		/* Largura total (2500px) */
	}
}

#cursor {
	font-weight: normal;
	animation: blink 0.5s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.faq-modal {
	backdrop-filter: blur(10px);
	background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.872));
	display: none;
}

.close-modal-button:hover svg {
	fill: black;
}

.background-color-change {
	animation: color-change 1s ease-in-out infinite;
}


@keyframes color-change {
	0% {
		background: hsl(25, 100%, 52%);
	}

	50% {
		background: hsl(47, 100%, 50%);
	}

	100% {
		background: hsl(25, 100%, 52%);
	}
}

.slide-video .carrossel-descricao {
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	opacity: 1;
	visibility: visible;
}

.slide-video:hover .carrossel-descricao {
	opacity: 0;
	visibility: hidden;
}

.brands-container-scroll {
	animation: scroll 20s linear infinite;
}

.brands-container-scroll img {
	flex-shrink: 0;
	height: auto;
}

@keyframes scroll {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}

.team-modal {
	display: none;
}

.close-modal-button-team:hover svg {
	fill: black;
}

.gradient-icon {
	background-image: linear-gradient(to bottom right, #fed12f, #ff5c03);
}

/*# sourceMappingURL=style.css.map */

@media (max-width: 766px) {
	.visual-prop {
		text-align: center;
	}
}

.outer-container {
	display: flex;
	justify-content: center;
	align-items: end;
	height: 122px;
	width: fit-content;
	background: linear-gradient(to right, #fed12f, #ff5c03);
	padding: 5px;
	width: 100vw;
}

.progress-wrapper {
	display: flex;
	align-items: center;
}

.progress-container {
	width: 120px;
	/* Small slider */
	height: 10px;
	/* Adjust height to fit the image */
	background-color: #d6d6d6;
	border-radius: 5px;
	overflow: hidden;
	margin-right: 10px;
	/* Space between slider and text */
}

#progress-bar {
	width: 0;
	height: 100%;
	background-color: rgb(255, 255, 255);
	/* White with transparency */
	transition: width 0.5s ease;
}

.remaining-text {
	color: white;
	font-weight: 800;
	font-size: 1.2rem;
	/* Adjust to fit the image */
}

@media (max-width: 500px) {
	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}

	.outer-container {
		padding: 20px;
	}
}

@media (max-width: 400px) {
	.outer-container {
		padding: 40px;
	}
}