@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url('https://fonts.cdnfonts.com/css/antique-olive');
@import url('https://fonts.googleapis.com/css?family=Mulish');

body,
html {
	font-family: "poppins", sans-serif;
	/* font-family: 'Mulish'; */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 20px;
	scroll-behavior: smooth;
	margin: 0;
	color: var(--text-col);
	overflow-x: hidden;
}

::-webkit-scrollbar {
	width: 18px;
}

::-webkit-scrollbar-track {
	background: #eee;
}

::-webkit-scrollbar-thumb {
	background: var(--third-color);
	border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
	background: #2F358B;
}

:root {
	scrollbar-color: var(--identity-color) #eee;
	scrollbar-width: 18px;
	--identity-color: #3EB953;
	--secondary-color: #7ABBFC;
	--third-color: #5abf8d;


	--color-1: #3EB953;
	--color-2: #7ABBFC;
	--color-3: #6b2331;
	--color-1-75: rgba(229, 71, 83, 0.75);
	--text-col: #231f20;
	--container-space: 10%;
}

.site_container {
	margin: 0 var(--container-space);
	width: calc(100% - var(--container-space) * 2);
}

@media (max-width: 2200px) {
	:root {
		--container-space: 5%;
	}
}

@media (max-width: 1950px) {

	body,
	html {
		font-size: 18px;
	}
}

@media (max-width: 1550px) {
	:root {
		--container-space: 4%;
	}
}

@media (max-width: 1200px) {
	:root {
		--container-space: 1rem;
	}
}

@media (max-width: 1000px) {
	:root {
		--container-space: 8px;
	}
}

@media (max-width: 1000px) {
	::-webkit-scrollbar {
		width: 8px;
	}

	:root {
		scrollbar-width: 8px;
	}
}

@media all and (max-width: 1000px) {
	::-webkit-scrollbar {
		width: 8px;
	}

	:root {
		scrollbar-width: 8px;
	}
}

.text_col {
	color: var(--identity-color);
}

.__nuxt-error-page {
	z-index: 100;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: 0.3s ease;
}

p {
	margin: 0;
}

.fade_page-enter-active,
.fade_page-leave-active {
	transition: opacity 0.5s;
}

.fade_page-enter,
.fade_page-leave-active {
	opacity: 0;
}

#information__product:before {
	display: block;
	content: "";
	height: 190px;
	margin: -190px 0 0;
}



/* .btn {
	border: 2px var(--identity-color) solid;
	padding: 0.5em 0.7em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	z-index: 2;
	--waooh: 0;
	position: relative;
	text-align: center;
}
.btn.active:hover {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}
.btn img {
	margin-right: 0.5em;
	height: 100%;
}
.btn.active {
	background: var(--identity-color);
	color: white;
}
.btn.active.bigpeach {
	background: var(--identity-color);
	border: 2px var(--identity-color) solid;
	font-size: 1.2em;
	padding: 0.5em 1.3em;
}
.btn.active.bigpeach:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color) ;


}
.btn::before,
.btn::after {
	content: "";
	position: absolute;
	background: #222;
	width: 0px;
	height: 0px;
	opacity: 0;
	transition: 0.3s ease;
}
.btn::before {
	clip-path: polygon(100% 7%, 11% 11%, 7% 100%, 0 100%, 0 0, 100% 0);
	top: -4px;
	left: -4px;
}
.btn::after {
	clip-path: polygon(100% 7%, 11% 11%, 7% 100%, 0 100%, 0 0, 100% 0);
	transform: scale(-1, -1);
	right: -4px;
	bottom: -4px;
}
.btn:hover::before,
.btn:hover::after {
	opacity: 1;
	width: 50px;
	height: 30px;
} */
.bigBigTitle {
	font-size: 7em;
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
	margin: 0;
}

.bigBigTitle span {
	color: var(--identity-color);
}

.btn.bigpeach::before {
	background: var(--secondary-color);
	width: 50px;
	height: 30px;
}

.btn.bigpeach:hover::before {
	top: -10px;
	left: -12px;
}

.btn.bigpeach::after {
	background: var(--secondary-color);
	height: 30px;
	width: 50px;
}

.btn.bigpeach:hover::after {
	right: -12px;
	bottom: -10px;
}

.bigWord {
	color: var(--identity-color);
	font-weight: bold;
}

@media all and (max-width: 1950px) {
	.bigBigTitle {
		font-size: 3em;
	}
}

@media all and (max-width: 1200px) {
	.bigBigTitle {
		font-size: 4em;
	}
}

@media all and (max-width: 768px) {
	.bigBigTitle {
		font-size: 2.5em;
	}
}

@media all and (max-width: 400px) {
	.bigBigTitle {
		font-size: clamp(1rem, 4vw + 1rem, 3rem);
	}
}

.to_animate {
	transition: 2s ease-in-out;
	opacity: 0.5;
}

.FIRE {
	animation: 1s nicelyfade ease-in-out;
	opacity: 1;
}

@keyframes nicelyfade {
	from {
		opacity: 0.8;
		transform: scale3d(0.95, 0.95, 1);
		transform-origin: center;
	}
}

.noview {
	display: none;
}