* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
    scroll-behavior: smooth;
}
html, body {
    font-family:'Caladea', Arial, Helvetica, sans-serif;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

header, main, footer, section{
    width:100%;
    margin: 0px;
    padding:0px;
}

.bggreen {
    background:rgb(1,152,117);
}
.green {
    color:rgb(1,101,78);
}

.hidden {
	display:none!important;
}
.anchor {
    height:0px; width:0px; margin:0px; padding:0px;
}

.separator {
	margin:30px 0 30px 0;
	height:6px;
	width:120px;
	background:rgb(204, 255, 243);
}
.small-separator {
	margin:10px auto 30px auto;
	height:3px;
	width:50px;
	background:rgb(1,152,117);
}
.rotate {
    transform:matrix(0.996195, -0.0871557, 0.0871557, 0.996195, 0, 0) rotate(-5deg);
    margin-left:-20px;
}
.ontop {
	z-index:9999;
}

#home-section{
    display:flex;
    flex-direction:row;
    justify-content: center;
    gap:50px;
    padding-top: 100px;
    padding-bottom: 100px;
    color:rgb(204, 255, 243);color:rgb(204, 255, 243);
}

#home-testo{
	width:33%;
	padding-top:200px;
}
#home-immagini {
	width:50%;
}
#home-testo>h1 {
	font-size:49px;
	font-style:italic;
	font-weight:400;
}
#home-immagini {
	display:flex;
	height:400px;
}
.home-immagini-container {
	overflow:hidden;
}
.home-immagini-container>img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* CRUCIALE: evita deformazioni ritagliando l'immagine */
	display: block;
	transition: transform 300ms ease-in-out;
}

.home-immagini-container>img:hover {
	transform: scale(1.1);
}


@media (max-width: 800px) {
	#home-section {
		flex-direction: column; /* Testo va sotto le immagini */
		height: auto;
	}

	#home-immagini {
		width: 100%; /* La griglia occupa tutto lo spazio */
		height: 200px; /* Riduciamo l'altezza su mobile */
		order:1;
		
	}
	.home-immagini-container {
		text-align:center;
		margin:0px auto;
	}

	#home-testo {
		width: 90%;
		text-align: center;
		order: 2; /* Forza il testo in basso */
		padding: 20px 0;
		margin:0px auto;
	}
	#home-testo>h1 {
		font-size:40px;
	}
	#home-testo>p {
		font-size:30px;
	}
	.separator {
		margin:20px auto;
	}
	.footer-row {
		font-size:20px;
	}
}

footer {
	display:flex;
	height:100px;
	color:black;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin:50px 0 50px 0;
}