* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #ffe8d6;
	height: 100%;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
p,
a {
	color: #224573;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	font-weight: 400;
}

p {
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1.5em;
}

h1 {
	font-weight: 700;
	font-size: 60px;
}

img {
	max-width: 100%;
}

.servizi .titolo h1,
.bacheca .titolo h1,
#about .titolo h1,
#team .titolo h1,
#centro .titolo h1,
.recensioni .titolo h1 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 48px;
	letter-spacing: -0.01em;
}

/*------ TRANSIZIONI ------*/
.trasla-dx {
	left: 0;
	position: relative;
	transition: all 0.5s;
}

.trasla-dx:hover {
	left: 8px;
}

.container_underline {
	position: relative;
}

.underline::before {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 0%;
	height: 1px;
	background-color: #224573;
	transition: all 0.5s;
}

.underline:hover::before {
	width: 100%;
}

.shadow {
	box-shadow:
		rgba(0, 0, 0, 0.05) 0px 0.8px 2.4px -0.6px,
		rgba(0, 0, 0, 0.05) 0px 2.4px 7.2px -1.2px,
		rgba(0, 0, 0, 0.05) 0px 6.4px 19.1px -1.9px,
		rgba(0, 0, 0, 0.05) 0px 20px 60px -2.5px;
}

/*------ PULSANTI ------*/
.bg-color1 {
	background-color: #daddd7;
}

.bg-color1-hover:hover {
	background-color: #daddd7;
}

.bg-color2 {
	background-color: white;
}

.bg-color2-hover:hover {
	background-color: white;
}

.bg-color3 {
	background-color: rgb(192, 183, 164);
}

.bg-color3-hover:hover {
	background-color: rgb(192, 183, 164);
}

.bg-color4 {
	background-color: rgb(206, 184, 187);
}

.bg-color4-hover:hover {
	background-color: rgb(206, 184, 187);
}

.button {
	position: relative;
	padding: 15px;
	text-align: center;
	border-radius: 24px;
	transition: all 0.5s;
	left: 0;
	cursor: pointer;
}

.button:hover {
	left: 10px;
}

/*------ LOGO ------ */
#logo {
	cursor: default;
}

#logo p {
	font-family: "Nanum Myeongjo", serif;
	text-align: center;
}

#titolo_logo {
	margin-bottom: 0;
	font-size: 22px;
}

#sottotitolo_logo {
	margin-top: 0;
	font-size: 9px;
	letter-spacing: 0.6em;
}

/*------ NAVBAR ------*/

/* TEXT */
nav {
	position: fixed;
	width: 100%;
	background-color: #ffe8d6;
	z-index: 10;
}

#nav_items {
	flex-flow: row;
	flex: none;
	place-content: center space-between;
	align-items: center;
	height: min-content;
	padding: 15px 40px;
	/* padding: 15px 0; */
	display: flex;
	position: relative;
	/* overflow: visible; */
	overflow: hidden; /* Fondamentale per evitare che il contenuto traballi durante l'animazione */
	transition: height 0.4s ease-in-out;
}

#nav_items.nav_items_small {
	height: 300px;
}

nav a {
	text-align: center;
}

#parent_sezioni {
	flex-flow: row;
	flex: none;
	place-content: center;
	align-items: center;
	gap: 24px;
	/* width: min-content; */
	height: min-content;
	padding: 0;
	display: flex;
	position: relative;
	overflow: visible;
}

#sezioni {
	/* display: grid;
	grid-template-rows: 60px;
	grid-template-columns: 15% 15% 15%;
	align-items: center; */
	flex-flow: row;
	flex: none;
	place-content: center;
	align-items: center;
	gap: 48px;
	/* width: min-content;? */
	height: min-content;
	padding: 0;
	display: flex;
	position: relative;
	overflow: visible;
}

.sezione,
.contatti {
	flex: none;
	width: auto;
	position: relative;
	height: 17px;
}

#linea_menu {
	display: none;
}

/* CONTATTI */
#contact_button {
	padding: 20px;
}

/* HAMBG */
#hambg_div {
	display: none;
	height: 24px;
	width: 24px;
}

#hambg_svg {
	stroke: #224573;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	height: 100%;
	width: 100%;
}

/* Transizioni e punti di rotazione per le linee */
#hambg_svg line {
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
	transform-box: fill-box;
	transform-origin: center;
}

/* Scomparsa della linea centrale */
#hambg_div.is-active .line-mid {
	opacity: 0;
}

/* Rotazione e traslazione della linea superiore */
#hambg_div.is-active .line-top {
	transform: translateY(6px) rotate(45deg);
}

/* Rotazione e traslazione della linea inferiore */
#hambg_div.is-active .line-bot {
	transform: translateY(-6px) rotate(-45deg);
}

/* NAV RESPONSIVE */
@media (max-width: 825px) {
	#top {
		display: flex;
		flex-flow: row;
		width: 100%;
		align-items: center;
		flex: none;
		height: min-content;
		padding: 0;
		position: relative;
		place-content: center space-between;
	}

	.linea_menu {
		display: block;
		width: 100%;
	}

	.framer-FlFv9 .framer-3ptf2t {
		flex: none;
		width: 100%;
		height: 1px;
		position: relative;
		overflow: visible;
	}

	#nav_items,
	#sezioni {
		flex-flow: column;
	}

	#sezioni,
	#parent_sezioni {
		width: 100%;
	}

	#sezioni a {
		width: 100%;
		text-align: left;
	}

	.parent_sezioni,
	.contact_button {
		display: none !important;
	}

	#hambg_div {
		display: block;
	}

	.sezioni_small,
	.contatti_small {
		display: block;
	}
}

/*------ MAIN ------*/
.main {
	display: grid;
	grid-auto-rows: auto;
	/* grid-template-rows: 1fr 1fr 1fr 1fr 1fr; */
	grid-template-columns: 100%;
}

/* PRIMA */
#prima {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
	flex: 1 0 0;
}

#testo_inizio {
	align-content: center;
	padding:0 60px;
}

#pulsante_prenota {
    display: flex;
    a {
        margin: auto;
    }
}

#prima h1 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 60px;
	font-weight: 800;
}

#prima h6 {
	margin-bottom: 50px;
}

/* SERVIZI */
.servizi {
	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: 100px auto;
	margin: 64px 3em 0;
	gap: 20px;
}

.servizi > .titolo {
	grid-area: 1 / 1 / 1 / 1;
}

.sections {
	grid-area: 1 / 2 / 1 /2;
	display: grid;
	grid-template-rows: 50px 50px;
	grid-template-columns: 100%;
}

.servizi > .content {
	grid-area: 2 / 2 / 2 / 2;
}

.servizi .button {
	position: relative;
	padding: 8px;
	margin: 5px;
	text-align: center;
	border-radius: 8px;
	transition: all 0.5s;
	left: 0;
}

.servizi .button:hover {
	left: 5px;
}

.servizi .descrizione {
	color: rgb(136, 136, 136);
}

.servizi .sottotitolo {
	display: flex;
	justify-content: space-between;
}
.servizi hr {
	margin: 4px 0;
}

/* BACHECA */

.bg-color_bacheca1 {
	/* background: #e2c69f; */
	background: rgba(219, 222, 215, 0.8);
}

.bg-color_bacheca2 {
	/* background: #d3d7a7; */
	background: rgba(207, 176, 124, 0.61);
}

.bg-color_bacheca3 {
	/* background: #bbd7a7; */
	background: rgba(255, 255, 255, 0.73);
}

.bacheca {
	margin: 3em;
}

.bacheca .items {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: minmax(523px, auto);
	grid-gap: 3em;
}

.bacheca .item {
	border-radius: 20px;
	padding: 30px;
	display: grid;
	grid-template-rows: auto 50px;
	grid-gap: 4em;
}

.bacheca .top-text {
	display: grid;
	grid-auto-rows: auto;
	grid-gap: 5px;
}

.bacheca .item h6 {
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	color: rgb(71, 66, 64);
}

.bacheca .item h1 {
	font-size: 48px;
	letter-spacing: -0.05em;
	color: rgb(34, 69, 115);
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
}

.bacheca .item p {
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1.5em;
	color: rgb(71, 66, 64);
}

.bacheca .item .checkbox-wrapper p {
	margin-left: 5px;
}

.cb-bacheca:not(.switch) {
	border-radius: 50%;
}

.checkbox-wrapper {
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	gap: 10px;
}

.checkbox-wrapper .cb-bacheca {
	min-width: 21px;
	min-height: 21px;
	width: 21px;
	height: 21px;
}
/* 
.checkbox-wrapper .cb-bacheca:after {
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	height: 9px;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: var(--active-inner);
	left: 7px;
	top: 4px;
	transform: rotate(var(--r, 20deg));
}
*/
.checkbox-wrapper label {
	margin-left: 8px;
}

/* ABOUT SU DI NOI */

#about {
	margin: 3em;
}

#about .up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

#about .titolo h1 {
	margin: 0.5em 0;
}

#about .titolo a {
	margin: 0 0.5em;
}

#about h3 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 26px;
	letter-spacing: -0.04em;
	line-height: 1.6em;
}

.about_btns {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 20px;
}

#about .img_ingresso {
	height: 486px;
	margin: 50px 0;
}

#about .img_ingresso img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-position: center bottom;
	object-fit: cover;
}

#about .testo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

/* TEAM */
#team {
	margin: 0 3em;
}

#team {
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: 1fr 1fr;
}

#team h3 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 26px;
	letter-spacing: -0.04em;
	line-height: 1.6em;
}

#team .operatori {
	grid-column: 1/3;
	display: grid;
	grid-template-columns: repeat(auto-fit, 500px);
	grid-auto-rows: auto;
	gap: 20px;
	/* width: 200%; */
}

#team .operatore {
	padding: 15px;
}

#team .operatore .img_container {
	position: relative;
	height: 278px;
	width: 100%;
}

#team .operatore img {
	width: 100%;
	height: 100%;
	object-position: 52.2% 39.8%;
	object-fit: cover;
	align-items: center;
}

.img_container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.img_container img {
	width: 100%;
	height: auto;
	display: block;
}

/* Livello che copre tutta l'immagine e centra il box al suo interno */
.img_container .trasparente {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center; /* Centra orizzontalmente il box `.profile-card` */
	align-items: center; /* Centra verticalmente il box `.profile-card` */
	padding: 0 50px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.img_container:hover .trasparente {
	opacity: 1;
	visibility: visible;
}

/* Box centrale che contiene il testo */
.profile-card {
	background-color: rgba(255, 255, 255, 0.6);
	width: 100%;
	height: 100%;
	max-width: 650px;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centra verticalmente il testo nel box */
	align-items: center; /* Centra orizzontalmente il testo nel box */
	text-align: center; /* Allinea al centro le righe multiple */
	gap: 20px;
	box-sizing: border-box;
}

.profile-card p {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

#team .operatore .nome {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 26px;
	letter-spacing: -0.04em;
	line-height: 1.6em;
	margin-top: 20px;
}

#team .operatore .titolo {
	margin: 20px 0 20px;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	color: #474240;
}

#team .operatore .descrizione {
	font-size: 17px;
	letter-spacing: 0.04em;
	line-height: 1.5em;
}

/* CENTRO */
#centro {
	margin: 3em;
}

.quadro {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: repeat(
		4,
		250px
	); /* Altezza fissa per riga, adattala tu */
	gap: 10px; /* Spaziatura opzionale */
	width: 100%;
	margin-top: 25px;
}

/* Regola fondamentale: l'immagine riempie tutta la cella/area assegnata */
.quadro img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ritaglia l'immagine per riempire tutto lo spazio senza deformazioni */
	display: block;
}

.studio1 {
	grid-row: 1/3;
	grid-column: 1/3;
}

.studio2 {
	grid-row: 1/2;
	grid-column: 3/4;
}

.studio3 {
	grid-row: 2/3;
	grid-column: 3/4;
}

.studio4 {
	grid-row: 3/5;
	grid-column: 1/2;
}

.studio5 {
	grid-row: 3/5;
	grid-column: 2/4;
}

/* RECENSIONI */

@keyframes slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.recensioni {
	background: #daddd7;
}

.recensioni .titolo {
	padding-top: 80px;
}

.recensioni .titolo h2 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 38px;
	letter-spacing: -0.01em;
	line-height: 1.3em;
}

.recensioni .titolo h2,
.recensioni .titolo h6 {
	text-align: center;
}

.carosello {
	display: flex;
	white-space: nowrap;
	overflow: hidden;
	padding: 60px 0;
	position: relative;
}

.carosello::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	content: "";
	background: linear-gradient(to left, rgba(218, 221, 215, 0), #daddd7);
	z-index: 2;
}

.carosello::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 250px;
	height: 100%;
	content: "";
	background: linear-gradient(to right, rgba(218, 221, 215, 0), #daddd7);
	z-index: 2;
}

.carosello:hover .slide {
	animation-play-state: paused;
}

.slide {
	display: flex;
	animation: 20s slide infinite linear;
}

.recensione {
	margin: 0 40px;
	width: 300px;
	white-space: break-spaces;
}

.stelle {
	width: 25px;
	height: 25px;
	display: flex;
}

/* CONTATTACI */
#contattaci {
	max-width: 70%;
	margin: auto;
}
#contattaci p,
#contattaci h2 {
	text-align: center;
	margin: 30px;
}

#contattaci h2 {
	font-family: "Nanum Myeongjo", "Nanum Myeongjo Placeholder", serif;
	font-size: 38px;
	letter-spacing: -0.01em;
	line-height: 1.3em;
}

/* FOOTER */
footer {
	background: linear-gradient(rgba(218, 221, 215, 0), rgba(218, 221, 215, 1));
}

.footer_content {
	display: flex;
	justify-content: space-between;
	padding: 3em;
	.orari{
	    font-size: 15px;
	}
}

.social {
	margin-bottom: 20px;
}

.social svg {
	width: 50px !important;
	height: 50px !important;
}

.social {
	display: flex;
	justify-content: space-around;
}

.about_footer {
	display: flex;
	flex-direction: column;
}

.about_footer .container_underline {
	margin: 7px;
}

.address .container_underline {
	display: flex;
	align-items: center;
}

.address svg {
	width: 24;
	height: 24;
	display: inline-block;
	user-select: none;
	fill: rgb(71, 66, 64);
	color: rgb(71, 66, 64);
	flex-shrink: 0;
}

.address > a {
	display: flex;
	height: 24px;
}

.address hr {
	margin: 20px 0;
}

/* RESPONSIVE */

.massaggio {
	width: 50%;
}

@media (max-width: 980px) {
	#team .operatori {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}
@media (max-width: 980px) {
}

@media (max-width: 860px) {
	.about_btns {
		flex-direction: column;
	}

	.quadro {
		grid-template-rows: repeat(4, 100px);
	}
}

@media (max-width: 810px) {
	.massaggio {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		corner-shape: inherit;
		object-position: center;
		object-fit: cover;
	}

	#prima {
		flex-direction: column;
	}

	#testo_inizio {
		text-align: center;
		padding: 3em;
	}

	.bacheca .items {
		grid-template-columns: 1fr 1fr;
	}

	.servizi {
		grid-template-columns: 1fr;
	}

	.servizi .titolo,
	.servizi .sections,
	.servizi .content {
		grid-area: auto / auto / auto / auto;
	}

	.carosello::before {
		width: 100px;
	}
	.carosello::after {
		width: 100px;
	}
	
	#servizi,
	#team,
	#bacheca,
	#about,
	#centro,
	#contattaci{
	    margin-left: 2em;
	    margin-right: 2em;
	}
	
	#contattaci{
	    display: flex;
	    flex-direction: column;
	    h2, p {
	        width: 100%;
	    }
	}
}

@media (max-width: 710px) {
	#team {
		grid-template-columns: 1fr;
	}

	#team .operatori {
		grid-column: 1/2;
	}

	.footer_content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.footer_content .about_footer {
		grid-column: 2/3;
		grid-row: 1/2;
	}

	.footer_content .address {
		grid-column: 1/3;
		grid-row: 2/3;
		text-align: center;
	}
	.footer_content .address .container_underline {
		justify-content: center;
	}


}

@media (max-width: 650px) {
	.bacheca .items {
		grid-template-columns: 1fr;
	}
	#about .testo {
		display: flex;
		flex-direction: column;
	}
	.profile-card p{
	    font-size: 0.9rem;
	}
	.trasparente{
	    padding: 0!important;
	}
}

@media (max-width: 500px) {
	#about .up {
		grid-template-columns: 1fr;
	}
	.profile-card p{
	    font-size: 0.8rem!important;
	}
}