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

@font-face {
	font-family: AeonikTRIAL-Bold;
	src: url(../font/AeonikTRIAL-Bold.otf);
}

@font-face {
	font-family: AeonikTRIAL-Light;
	src: url(../font/AeonikTRIAL-Light.otf);
}

@font-face {
	font-family: AeonikTRIAL-Regular;
	src: url(../font/AeonikTRIAL-Regular.otf);
}

@font-face {
	font-family: Gilroy-Black;
	src: url(../font/Gilroy-Black.ttf);
}

.Gilroy-Black {font-family: Gilroy-Black;}

html {scroll-behavior: smooth;}

body {color: #000000;}

a {cursor: pointer;}

h1 {
	font-size: 3rem;
	line-height: normal;
	font-family: Gilroy-Black;
}

h2 {font-size: 2rem;}

.bowl-txt h1 {font-size: 2rem;}


.map-eff {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.img-map {position: relative;}

.text-eff {width: 100%;}

.brand img {width: 10vw;}

#brand .container {max-width: fit-content;}

/* product */
#products .card .product-image {
	background-color: #f5f5f4;
	height: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#products .card:hover .img-af {
	opacity: 1;
	transform: scale(1.25);
}

#products .head-card {font-family: AeonikTRIAL-Bold;}

#products img.img-af {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: scale(0.75);
}

#products a {font-family: AeonikTRIAL-Regular;}

#products button.tag {
	position: relative;
	border: 2px solid #fec204;
	border-radius: 10rem;
	margin: 0.5rem 0.25rem;
	background-color: transparent;
	overflow: hidden;
	transition: all 0.3s ease;
}

#products button.tag.active {
	color: #fff;
	border: 2px solid rgb(218 125 27);
}

#products button.tag::after {
	position: absolute;
	content: '';
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(218 125 27);
	z-index: -1;
	transition: all 0.5s ease;
}

#products button.tag.active::after {width: 100%;}

/* quality */
#quality .card-q {
	display: block;
	position: relative;
}

#quality .card-q::after {
	content: '';
	position: absolute;
	top: 70%;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: -1;
}

#quality .card-q span {font-family: AeonikTRIAL-Bold;}

.btn-custom:after {
	position: absolute;
	border-radius: 10rem;
	background-color: #eaf818;
	background-image: linear-gradient(to left, rgb(247 195 29) 0%, rgb(218 125 27) 150%);
}

@media screen and (min-width: 3580px) {
h1 {font-size: 4vw;}
}

@media screen and (min-width: 4000px) {
	.container {min-width: fit-content !important;}

	.py-12 {padding-block: calc(var(--spacing)* 30) !important;}

	body {font-size: 3rem !important;}

	img {width: 100% !important;}

	h1 {font-size: 10rem !important;}

	span {font-size: 10rem !important;}

	nav {font-size: 3rem !important;}

	nav ul li a img {
		width: 20rem !important;
		height: 20rem !important;
	}

	nav a.link-contact {
		padding: calc(var(--spacing)* 8) !important;
		border-width: 10px !important;
		margin-inline: calc(var(--spacing) * 10) !important;
	}

	.bowl-txt h1 {font-size: 3rem !important;}

	.head-card span {font-size: 10rem !important;}

	#market .text-eff span {font-size: 3rem !important;}

	#market .map .img-logo img {width: calc(1/4 * 100%) !important;}

	#market .text-eff .export,
	#market .text-eff .unlock {
		padding: calc(var(--spacing) * 12) !important;
		border-radius: 4rem !important;
	}

	#market .text-eff .export::before,
	#market .text-eff .unlock::before {
		border-radius: 3.5rem;
	}

	/* link page frozen / dry */
	#products #big-sup a,
	#products #big-sup p {font-size: 3rem;}
	#products #big-sup p {transform: translateY(-15%);}

	#products .tag-menu button.tag div {
		margin: 0 3rem;
		margin-bottom: 0.5rem;
	}

	#products .card .forzen-img,
	#products .card .dry-img {
		width: 100% !important;
	}

	#products .card a {
		font-size: 5rem !important;
		border-width: 5px !important;
	}

	#products .card .head-card,
	#products .card a {
		margin-block: calc(var(--spacing) * 20) !important;
	}

	/* img modal popup product_page */
	.image-modal img {
		max-width: fit-content !important;
	}

	#quality .card-slide .card-q {
		height: calc(var(--spacing) * 120) !important;
		padding-left: calc(var(--spacing) * 30) !important;
		padding-top: calc(var(--spacing) * 30) !important;
		border-start-start-radius: 15rem !important;
	}

	#recipes .container {
		max-width: calc(9/10 * 100%) !important;
		min-width: calc(9/10 * 100%) !important;
	}

	#recipes .post-img {
		width: 95% !important;
		height: auto !important;
	}

	#contact .contact span {font-size: 15rem !important;}

	#contact .contact h2 {font-size: 7rem !important;}

	#contact .contact img,
	#contact .location img {
		width: calc(var(--spacing)* 40) !important;
		height: calc(var(--spacing)* 40) !important;
	}
}

@media screen and (min-width: 6000px) {
	
	#quality .card-slide {
		width: 100%;
	}

	#quality .card-slide .card-q {
		padding-inline: calc(var(--spacing) * 30) !important;
	}
}

@media screen and (max-width: 1540px) {
	.bowl-txt h1 {font-size: 1.75rem !important;}
}

@media screen and (max-width: 1280px) {
	.bowl-txt h1 {font-size: 1.25rem !important;}
}