/* Container principale della Hero Section */
.hero-section {
	width: 100%;
	/* Puoi cambiare 100vh in un'altezza fissa (es. 600px) se preferisci */
	height: 80vh;
	position: relative;
	overflow: hidden;
	/* Fondamentale per non far uscire le animazioni */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* Gradiente di sfondo animato */
	background: linear-gradient(45deg,
			#f0e9dc 0%,
			#d4cabb 25%,
			#eae1d2 51%,
			#d3cac2 100%);
	background-size: 400% 400%;
	animation: Gradient 15s ease infinite;
}

/* Gestione del contenuto (testo/bottoni) per stare sopra lo sfondo */
.hero-content {
	position: relative;
	z-index: 10;
	/* Assicura che il testo sia sopra le forme animate */
	width: 100%;
	max-width: 1200px;
	/* O la larghezza del container del tuo sito */
	padding: 20px;
	text-align: center;

}

.hero-content p {

	color: rgba(16, 32, 65, 0.7);

}

/* Le forme animate (Blobs) */
.hero-section::before,
.hero-section::after {
	content: "";
	position: absolute;
	width: 70vmax;
	/* Usa vmax per adattarsi sia a mobile che desktop */
	height: 70vmax;
	background: rgba(255, 255, 255, 0.07);
	/* Effetto vetro leggero */
	left: -20vmin;
	top: -20vmin;
	animation: morph 15s linear infinite alternate, spin 20s linear infinite;
	z-index: 1;
	/* Stanno sotto il contenuto ma sopra il background */
	will-change: border-radius, transform;
	transform-origin: 55% 55%;
	pointer-events: none;
	/* Permette di cliccare attraverso le forme se necessario */
}

.hero-section::after {
	width: 70vmin;
	height: 70vmin;
	left: auto;
	right: -10vmin;
	top: auto;
	bottom: 0;
	animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
	transform-origin: 20% 20%;
}

/* Keyframes (rimasti invariati) */
@keyframes Gradient {
	0% {
		background-position: 0 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

@keyframes morph {
	0% {
		border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
	}

	100% {
		border-radius: 40% 60%;
	}
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}