.head-mobile {display: none;}

.comp.mobile {display: none;}

.content-brand {display: grid;}

.content-brand.mobile {display: none;}

#products .mobile {display: none;}

#market .text-exp.mobile {display: none;}

.recipe-container.mobile {display: none;}

#contact .mobile {display: none;}

#navbar.mobile {display: none;}

#navbar.mobile label .menu {
	position: relative;
	right: 0;
	top: 0;
	z-index: 100;
	height: 50px;
	transition: .5s ease-in-out;
	cursor: pointer;
}

#navbar.mobile label .hamburger {
	position: relative;
	width: 30px;
	height: 4px;
	top: 50%;
	background: #101010;
	border-radius: 1rem;
	display: block;
	transform-origin: center;
	transition: .5s ease-in-out;
}

#navbar.mobile label .hamburger:after,
#navbar.mobile label .hamburger:before {
	transition: .5s ease-in-out;
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: #101010;
	border-radius: 1rem;
}

#navbar.mobile label .hamburger:before {
	width: 40px;
	top: -10px;
	left: -5px;
}

#navbar.mobile label .hamburger:after {
	width: 20px;
	bottom: -10px;
	left: 5px;
}

#navbar.mobile label .menu:hover .hamburger::before {
	left: -5px;
}

#navbar.mobile label .menu:hover .hamburger::after {
	left: 5px;
}

#navbar.mobile label input {display: none;}

#navbar.mobile label input:checked+.menu {
	border-radius: 0;
}

#navbar.mobile label input:checked+.menu .hamburger {
	transform: rotate(45deg);
}

#navbar.mobile label input:checked+.menu .hamburger:after {
	transform: rotate(90deg);
	bottom: 0;
	left: 0;
	width: 30px;
}

#navbar.mobile label input:checked+.menu .hamburger:before {
	transform: rotate(90deg);
	top: 0;
	left: 0;
	width: 30px;
}

#market.mobile {display: none;}

#text-delight .mobile {display: none;}

#products .mobile {display: none;}

#big-sup.mobile {display: none;}

@media screen and (max-width: 1024px) {
	p {font-size: 2vw;}

	h1 {font-size: 7vw;}

	header {display: none;}

	.head-mobile {display: flex;}

	/* company */
	.comp {display: none;}

	.comp.mobile {display: block;}

	/* brand */
	.content-brand {display: none;}

	.content-brand.mobile {display: block;}

	/* product */
	#products .text-head.desktop {display: none;}

	#products #big-sup p {
		font-size: 1.5rem;
		transform: translateY(-12%);
	}

	#products .text-head.mobile {display: block;}

	#products .head-card {font-size: 6vw;}

	#products .content {
		width: 95% ;
		padding: 1rem;
		row-gap: calc(var(--spacing) * 6);
		column-gap: calc(var(--spacing) * 6);
	}

	#products .card {margin-inline: auto !important;}

	#products .card .product-image {height: fit-content;}

	#market .text-eff {display: none;}

	#market .text-exp.mobile {display: block;}

	#market .text-exp.mobile span {font-size: 2rem;}

	#quality .card-q {
		padding: 6vw;
		border-top-left-radius: 5rem;
		height: 25vw;
	}

	#quality .card-q span {font-size: 5vw;}

	/* recipe */
	#text-delight p {font-size: 5vw;}

	#text-delight .container {height: fit-content;}

	.recipe-container {display: none;}

	.recipe-container.mobile {display: block;}

	/* contact */
	#contact .container {display: none;}

	#contact .mobile {display: block;}

	#contact .mobile span {font-size: 12vw;}

	#contact .mobile .t-mail {font-size: 4vw;}

	#contact .background-eff.active {transform: translateY(40%);}
}

/* ipad mini 5 to mobile */
@media screen and (max-width: 768px) {
	#quality .card-q {height: fit-content;}
}

/* ipad - mobile 540-430 px */
@media screen and (max-width: 540px) {
	h1 {font-size: 9vw;}

	p {font-size: 4vw;}

	.comp.mobile h1 {font-size: 10vw;}

	.section {
		transform: translateY(-5vh);
		view-timeline-name: --section;
		view-timeline-axis: block;
	}

	.opa {
		animation: opaAnim linear;
		animation-timeline: --section;
		animation-range: entry 10% exit 40%;
		height: 100%;
	}

	@keyframes opaAnim {
		from {height: 0%;}
	}

	.comp.mobile .bowl-eff h1 {font-size: 7vw;}

	.swiper-slide .card-recipe {padding: 1rem;}

	.name-recipe {font-size: 6vw;}

	#market .map {height: 90vw !important;}

	#navbar.desktop {display: none;}

	#navbar.mobile {display: flex;}

	#products .mobile {display: block;}

	#products .desktop {display: none;}

	#products .content {width: 100% !important;}

	#products .content .con .--img {
		width: 265px;
		height: 300px;
	}

	#market.desktop {display: none !important;}

	#market.mobile {display: block;}

	#market.mobile .text-head {color: #FFC107;}

	#market.mobile .cont {opacity: 1;}

	#market.mobile .run-number {transition-delay: 0s;}

	#market.mobile .year::after,
	#market.mobile .export::after,
	#market.mobile .SKU::after {
		color: #df8500;
	}

	#market.mobile .export {color: #df8500;}

	#market.mobile .map,
	#market.mobile .logo-inmap,
	#market.mobile .loca,
	#market.mobile .run-number {
		opacity: 1;
	}

	#market.mobile .run-number .year.active {
		animation: counter-year 5s alternate ease-in-out;
		--num-year: 50;
	}

	#market.mobile .run-number .export.active {
		animation: counter-export 5s alternate ease-in-out;
		--num-export: 70;
	}

	#market.mobile .run-number .SKU.active {
		animation: counterSKU 5s alternate ease-in-out;
		--numSKU: 737;
	}

	@keyframes counter-year {
		0% {--num-year: 0;}
		100% {--num-year: 50;}
	}

	@keyframes counter-export {
		0% {--num-export: 0;}
		100% {--num-export: 70;}
	}

	@keyframes counterSKU {
		0% {--numSKU: 0;}
		100% {--numSKU: 737;}
	}

	#products #itemList {
		padding: 1.5rem;
		row-gap: 2rem;
		column-gap: 0.75rem;
	}

	#market.mobile .cont img {width: 100%;}

	#text-delight .desktop {display: none;}

	#text-delight .mobile {display: block;}

	#text-delight p {font-size: 8vw;}

	#contact .mobile span {font-size: 10vw;}

	#contact .mobile .t-mail {
		font-size: 5vw;
		font-weight: 700;
	}

	.contact-button {
		width: 3.5rem !important;
		height: 3.5rem !important;
		bottom: 2rem;
		right: 2rem;
	}

	#products .desktop {display: none;}

	#products .mobile {
		display: block;
		padding-left: 1.5rem;
		margin-bottom: 2.5rem;
	}

	section#products {font-size: 12px;}

	#big-sup.desktop {display: none;}

	#big-sup.mobile {display: flex;}

	#big-sup.mobile .frozen::after {
		position: absolute;
		content: '';
		width: 2px;
		height: 4vw;
		background-color: black;
		top: 60%;
		transform: translateY(-50%);
		right: 0;
	}

	#products .container {
		padding: 0;
		margin: 0;
	}

	#products .card {
		width: 100%;
		height: 100%;
	}

	#products .head-card {font-size: 7vw;}

	#products a {
		font-size: 4vw;
		margin: 1rem 0;
	}

	#recipes {padding: 0;}

	#text-delight p {margin: 0 0.25rem;}

	#market.active .text-head {color: black !important;}

	#products.text-white {color: black !important;}

	#myContact .contact-content {
		width: 90%;
		margin: auto;
		padding: 2rem 2rem;
		border-radius: 1.5rem;
	}

	#myContact #from-contact {
		display: flex;
		flex-direction: column;
	}

	#myContact.form-popup .eff-contact {padding: 0;}

	#myContact.form-popup .eff-contact .text-head {
		text-align: left;
		padding-bottom: 1rem;
	}

	#myContact.form-popup .eff-contact .text-head span {
		font-size: 10vw;
	}

	#myContact.form-popup .eff-contact .text-head p {
		font-size: 18px;
		text-transform: none;
		margin-top: 1rem;
	}

	#myContact.form-popup .eff-contact .marquee__item span {
		font-size: 18px;
		text-transform: none;
	}

	#myContact.form-popup .eff-contact .marquee__item img.icon-phone {
		width: 25px;
		height: 25px;
	}

	#myContact.form-popup .eff-contact .marquee__item div {
		height: fit-content;
		margin-block: 0.5rem;
	}

	#myContact.form-popup .eff-contact .marquee {
		max-height: 15vh;
	}

	#myContact.form-popup .eff-contact br.mobile {
		display: none;
	}

	#myContact #inMycontact{margin-top: 5.5rem;}

	#myContact form#contact-form {margin-top: 1rem;}

	#myContact form#contact-form div {
		display: flex;
		flex-direction: column;
		width: 100%;
		text-align: left;
		margin-top: 1rem;
	}

	#myContact form#contact-form label {
		font-size: 18px;
		width: 100%;
		text-align: left;
		font-size: 14px;
	}

	#myContact form#contact-form input,
	#myContact form#contact-form textarea {
		width: 100%;
		margin: 0;
		max-width: none;
		min-width: none;
		font-size: 12px;
	}

	#myContact form#contact-form textarea {
		height: 60px;
	}

	#myContact form#contact-form .btn-contact {
		border-radius: 1.2em;
	}

	#quality .card-q {
		height: 42vw;
		border-top-left-radius: 3.5rem;
		padding-top: 2rem;
		padding-left: 2rem;
	}

	#quality .card-q::after {top: 80%;}

	#products button.tag {margin-inline: 0;}
}

@media screen and (max-width: 430px) {
	body {color: black;}

	nav {
		padding: 0;
		padding-right: 1rem;
	}

	#quality .container {margin: 0;}

	#quality .card-q::after {top: 99%;}

	#quality .card-q:nth-child(2):after {top: 65%;}

	#quality .card-q p {
		margin-top: 0.25rem;
		font-size: 3vw;
	}
}