:root {
	--maxwidth: 1000px;
	--maxwidthmobile: 2000px;
	--centercolwidth: 82%;
	--maxwidthmenu: 1100px;
	--widthworkscol: 80%;
	--insideperc: 76%;
}

html {
	margin: 0;
	padding: 0;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
}

body {
	/* color: #fff; */
	background-image: url(img/bg.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: repeat-x;
	background-attachment: fixed;
	/* height: 100%; */
	margin: 0;
	padding: 0;
	/* text-align: center; */
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	/* background: #5CCAF2;
background: linear-gradient(45deg,rgba(92, 202, 242, 1) 0%, rgba(27, 134, 254, 1) 50%, rgba(116, 95, 240, 1) 100%); */
}

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #226CF9;

}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #fff;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #fff;
}


/* Anchor Link Styles */
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

#scroll-indicator-base {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	background-color: #0062cc;
	box-shadow: 9px 0px 15px -3px rgba(0, 0, 0, 0.4);
}

#scroll-indicator {
	position: fixed;
	top: 0;
	left: 0;
	width: 20px;
	height: 0;
	background-color: #7361F1;
	z-index: 9999;

	background-color: #5eccf4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(94, 204, 244)), to(rgb(110, 95, 241)));
	background-image: -webkit-linear-gradient(top, rgb(94, 204, 244), rgb(110, 95, 241));
	background-image: -moz-linear-gradient(top, rgb(94, 204, 244), rgb(110, 95, 241));
	background-image: -o-linear-gradient(top, rgb(94, 204, 244), rgb(110, 95, 241));
	background-image: -ms-linear-gradient(top, rgb(94, 204, 244), rgb(110, 95, 241));
	background-image: linear-gradient(top, rgb(94, 204, 244), rgb(110, 95, 241));
}

.gradbottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/*background-color: #002366;*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 35, 102, 0.00)), to(rgba(0, 35, 102, 1.00)));
	background-image: -webkit-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -moz-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -o-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -ms-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	pointer-events: none;
}

.gradbottom_black {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40%;
	opacity: 0.7;
	/*background-color: #000000;*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 1.00)));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 1.00));
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 1.00));
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 1.00));
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 1.00));
	background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 1.00));
}

.gradbottom_homebreak {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/*background-color: #002366;*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 35, 102, 0.00)), to(rgba(0, 35, 102, 1.00)));
	background-image: -webkit-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -moz-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -o-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: -ms-linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	background-image: linear-gradient(top, rgba(0, 35, 102, 0.00), rgba(0, 35, 102, 1.00));
	pointer-events: none;
	z-index: 10;
}

[data-scroll-container] {
	height: 100%;
}

.ripples {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url(img/bg.jpg);
	background-size: cover;
	background-position: center center;
}

.container {
	position: relative;
	width: 100%;
}

.container_inside {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
	box-sizing: border-box;
	/* max-width: var(--maxwidth); */

	/* background-color: #2dd5fc;
background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(45, 213, 252)), to(rgb(0, 123, 255)));
background-image: -webkit-linear-gradient(left top, rgb(45, 213, 252), rgb(0, 123, 255));
background-image: -moz-linear-gradient(left top, rgb(45, 213, 252), rgb(0, 123, 255));
background-image: -o-linear-gradient(left top, rgb(45, 213, 252), rgb(0, 123, 255));
background-image: -ms-linear-gradient(left top, rgb(45, 213, 252), rgb(0, 123, 255));
background-image: linear-gradient(left top, rgb(45, 213, 252), rgb(0, 123, 255)); */
}

#abouttextleft_chisiamo {
	padding: 0;
}

#descriptionchisiamo {
	margin: 0;
	column-count: 2;
	column-gap: 2rem;
}

.swiper-wrapper {
	transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
	/* simile a easeInOutExpo */
	z-index: auto !important;
}

.swiper {
	width: 100%;
	height: 100%;
	z-index: auto !important;
}

.swiper-slide:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.swiper-slide {
	text-align: center;
	justify-content: center;
	align-items: left;
	background-size: cover;
	background-position: center center;

	cursor: move;
	/* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spacer {
	position: relative;
	width: 100%;
	height: 10vh;
}

.introtext {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 4.3vw, 6rem);
	word-spacing: 1rem;
	line-height: 140%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	/* padding-top: 10vh; */
	padding: 0vh 5%;
	padding-bottom: 4rem;
	margin-bottom: 0;
}

.introtext_chisiamo {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 6vw, 10rem);
	word-spacing: 1rem;
	line-height: 140%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	/* padding-top: 10vh; */
	padding: 0vh 5%;
	padding-bottom: 4rem;
	margin-bottom: 0;
}

.introtext:after {
	display: inline-block;
	width: 100%;
	content: "";
}

.introtext_chisiamo:after {
	display: inline-block;
	width: 100%;
	content: "";
}

.introtext strong {
	/* background-color: rgb(255, 255, 255);
color: #001E79; */
	padding: 0 0.2em;

	/* text-decoration: underline; */
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(42, 211, 252, 1), 0 0 30px rgba(42, 211, 252, 1);

}

.introtext_education {
	position: relative;
	text-align: justify;
	color: #fff;
	font-size: clamp(1rem, 5vw, 6rem);
	word-spacing: 1rem;
	line-height: 140%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	/* padding-top: 10vh; */
	padding: 0vh 5%;
	margin-bottom: 0;
}

.introtext_education:after {
	display: inline-block;
	width: 100%;
	content: "";
}

.introtext_education strong {
	/* background-color: rgb(255, 255, 255);
color: #001E79; */
	padding: 0 0.2em;
	/* text-decoration: underline; */
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(42, 211, 252, 1), 0 0 30px rgba(42, 211, 252, 1);

}

.cosafacciamo {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 4.5vw, 6rem);
	word-spacing: 1rem;
	line-height: 130%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	/* padding-top: 10vh; */
	padding: 0em 5%;
	padding-bottom: 0;
	margin-bottom: 0;
}

.cosafacciamo:after {
	display: inline-block;
	width: 100%;
	content: "";
}

.leftrightpara {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	pointer-events: none;
	/* padding-top: 10vh; */
	padding: 15vh 5%;
}

.homedivisions {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	padding: 0vh 5%;
}

.textleft {
	position: relative;
	text-align: left;
	color: #fff;
	line-height: 155%;
	font-weight: 500;
	pointer-events: none;
	padding-right: 50%;
	margin-bottom: 5vh;
	font-size: clamp(1.2rem, 2vw, 6rem);
}

.textright {
	position: relative;
	text-align: right;
	color: #fff;
	line-height: 155%;
	font-weight: 500;
	pointer-events: none;
	padding-left: 50%;
	margin-bottom: 5vh;
	font-size: clamp(1.2rem, 2vw, 6rem);
}

.abouttext {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 4vw, 6rem);
	word-spacing: 1vw;
	line-height: 150%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	padding-top: 10vh;
}

.abouttext strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0 0.5em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(45, 211, 252, 1), 0 0 20px rgba(45, 211, 252, 1), 0 0 30px rgba(45, 211, 252, 1); */
}

.centertext strong {
	color: #ffffff;
	font-weight: 900;
	text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(45, 211, 252, 1), 0 0 20px rgba(45, 211, 252, 1), 0 0 30px rgba(45, 211, 252, 1);
}

.abouttext:after {
	display: inline-block;
	width: 100%;
	content: "";
}

.titoletti {
	position: relative;
	text-align: justify;
	font-size: 1.8rem;
	color: #fff;
	font-size: clamp(1rem, 4.0vw, 7rem);
	word-spacing: 1vw;
	line-height: 100%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	padding: 5% 0;
	margin: 0;
	margin-bottom: 0em;
}

/* .titoletti:after {
display: inline-block;
width: 100%;
content: "";
} */
.audiobtn {
	position: absolute;
	right: 1%;
	bottom: 2%;
	width: 35px;
	cursor: pointer;
	background-image: url(img/audio_on.png);
	background-position: center center;
	background-size: contain;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.31);
	border-radius: 4px;
}

.audiobtn:before {
	content: "";
	display: block;
	padding-top: 100%;
	/*What you want the height to be in relation to the width*/
}

.abouttextleft {
	position: relative;
	text-align: left;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1.2rem, 1.5vw, 6rem);
	line-height: 170%;
	font-weight: 400;
	pointer-events: none;
	margin-top: 1em;
	padding-right: 50%;
}

.textleft strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0em 0.4em 0.06em 0.4em; */
	/* border-radius: 0.1em; */
	/* margin-right: 0.1em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(42, 211, 252, 0.6), 0 0 30px rgba(42, 211, 252, 1); */
}

.textright strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0em 0.4em 0.06em 0.4em; */
	/* border-radius: 0.1em; */
	/* margin-right: 0.1em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(42, 211, 252, 0.6), 0 0 30px rgba(42, 211, 252, 1); */
}

.abouttextleft strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0em 0.4em 0.06em 0.4em; */
	/* border-radius: 0.1em; */
	/* margin-right: 0.1em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(42, 211, 252, 0.6), 0 0 30px rgba(42, 211, 252, 1); */
}

.abouttextleft_podcast {
	width: 90%;
	left: 5%;
	position: relative;
	text-align: left;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1.2rem, 2vw, 6rem);
	line-height: 150%;
	font-weight: 400;
	/* pointer-events: none; */
	padding-right: 40%;
	box-sizing: border-box;
}

.nostraofferta {
	padding: 20% 0;
}

.quote {
	font-size: 0.6em;
	line-height: 1.5;
	margin-top: 1em;
}

.nostraofferta strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0 0.5em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(45, 211, 252, 1), 0 0 20px rgba(45, 211, 252, 1), 0 0 30px rgba(45, 211, 252, 1); */
}

.nostraofferta a {
	/* background-color: #ffffff; */
	color: #e5f7ff;
	font-weight: 900;
	/* padding: 0 0.5em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(45, 211, 252, 1), 0 0 20px rgba(45, 211, 252, 1), 0 0 30px rgba(45, 211, 252, 1); */
	/* text-decoration: underline; */
}

.colorize {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #128CFE;
	mix-blend-mode: multiply;
	opacity: 0;
}

.home-break {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #128CFE;
	overflow: hidden;
}

.home-break-img {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(img/home-break.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.abouttextleft_chisiamo {
	position: relative;
	text-align: left;
	color: #fff;
	font-size: clamp(1.1rem, 1.4vw, 6rem);
	line-height: 150%;
	font-weight: 400;
	pointer-events: none;
	padding-right: 6%;
}

.abouttextleft_podcast img {
	width: 35%;
	display: block;
	/* margin-bottom: 1em; */
}

.podcast_2col {
	position: absolute;
	right: 0;
	top: -20%;
	width: 38%;
	height: 150%;
	background-image: url(img/podcast2col.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}

.centertext {
	position: relative;
	text-align: left;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 6vw, 10rem);
	word-spacing: 6vw;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	padding-top: 10vh;
}

.centertextright {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 5vw, 12rem);
	word-spacing: 2vw;
	line-height: 150%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	padding-left: 40%;
}

.centertextright:after {
	display: inline-block;
	width: 100%;
	content: "";
	font-size: 0;
	line-height: 0;
}

.footertext {
	position: relative;
	display: flex;
	align-items: center;
	text-align: left;
	font-size: 1.5rem;
	background-color: #0053ac;
	color: #eee;
	font-size: 0.8em;
	line-height: 180%;
	font-weight: 500;
	/* pointer-events: none; */
	padding: 3rem 5%;
	gap: 1rem;
	/* spazio tra logo e testo */
}

.footer-logo {
	height: 50px;
	/* regola in base alla dimensione desiderata */
	width: auto;
	/* border-right: 1px solid rgba(255, 255, 255, 0.317); */
	padding-right: 1.8rem;
}

.footertext strong {
	font-weight: 800;
	color: #ffffff;
}

/* Video Background */
.background,
.background__video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	-webkit-transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.background__video {
	position: relative;
	/* z-index: 1; */
	background-size: cover;
	/* display: none */
}

.can-autoplay .background__video {
	display: block
}

.background__video video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

/* || Video Background || */

.videogrid {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(img/videogrid.png);
	background-repeat: repeat;
	background-position: center center;
	mix-blend-mode: overlay;
	opacity: 0.3;
	pointer-events: none;
}

.videobar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1%;
	background-color: #000;
	mix-blend-mode: overlay;
	opacity: 0.2;
}

#swipebox-overlay {
	background-color: rgba(0, 0, 0, 0.85) !important;
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	display: inline-block;
	text-align: center;
	font-size: 2rem;
	color: #ffffff;
	/* colore tipico YouTube */
	cursor: pointer;
	transition: all 0.5s;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 1;
}

.play-button img {
	width: 7rem;
	/* height: 0.5rem; */
}

.play-button:hover {
	opacity: 0.5;
}



#choralogo {
	padding-bottom: 10%;
}

#willlogo {
	padding-bottom: 10%;
}

#logodistribuzione {
	padding-bottom: 10%;
}

#logoproduzione {
	padding-bottom: 10%;
}

/* Classe da aggiungere quando scroll > 0 */
.navbar.scrolled {
	background-color: #2dd5fc;
	background-image: -webkit-gradient(linear, left center, right center, from(rgb(45, 213, 252)), to(rgb(0, 123, 255)));
	background-image: -webkit-linear-gradient(left, rgb(45, 213, 252), rgb(0, 123, 255));
	background-image: -moz-linear-gradient(left, rgb(45, 213, 252), rgb(0, 123, 255));
	background-image: -o-linear-gradient(left, rgb(45, 213, 252), rgb(0, 123, 255));
	background-image: -ms-linear-gradient(left, rgb(45, 213, 252), rgb(0, 123, 255));
	background-image: linear-gradient(left, rgb(45, 213, 252), rgb(0, 123, 255));

}

.podcast-break1 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.podcast-break2 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.education-break1 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.education-break2 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}



/* Posizionamento bottom-center */
.arrowdown {
	position: absolute;
	bottom: 20px;
	/* distanza dal fondo */
	left: 50%;
	/* centro orizzontale */
	transform: translateX(-50%);
	pointer-events: none;
	/* lascia passare i click sotto */
	z-index: 999;
	opacity: 0.8;
	/* leggermente trasparente */
	animation: bounce 2s infinite;
	/* facoltativa: movimento di richiamo */
}

/* Stile dell’icona (puoi regolare taglia e colore) */
.arrowdown svg {
	display: block;
	width: 40px;
	height: 40px;
	color: #fff;
	/* colore freccia */
}

/* Animazione di “rimbalzo” */
@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	40% {
		transform: translateX(-50%) translateY(-10px);
	}

	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}

/* -- Icone social in basso-destra -- */
.social-icons {
	position: fixed;
	bottom: 20px;
	right: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.social-icons a {
	display: block;
}

.social-icons img {
	width: 15px;
	height: 15px;
	display: block;
	transition: transform 0.2s;
	/* Se i tuoi SVG sono neri e vuoi che diventino bianchi, puoi usare:
filter: invert(1) brightness(2);
altrimenti ometti questa riga. */
}

.social-icons a:hover img {
	transform: scale(1.1);
}

/* Contenitore a 3 colonne */
.columns {
	display: flex;
	width: 100%;
	height: 35vh;
	/* regola a piacere */
	overflow: hidden;
	padding: 10vh 0 25vh 0;
}

.column {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: flex 0.5s ease;
	position: relative;
	cursor: pointer;
}

/* Quando la colonna è hoverata, cresce */
.column:hover {
	flex: 1.2;
}

/* Se vuoi, aggiungi un po’ di colore di sfondo per distinzione */
.column:nth-child(1) {
	border-right: 2px solid #f2f2f2;
}

.column:nth-child(2) {
	border-right: 2px solid #f2f2f2;
}

.column:nth-child(3) {
	border-right: 2px solid #f2f2f2;
}

/* Logo SVG centrato e con transizione */
.column .logo {
	width: 60%;
	height: auto;
	transition: transform 0.5s ease;
}

/* Al passaggio del mouse sulla colonna, ingrandisci anche il logo */
.column:hover .logo {
	transform: scale(1.02);
}

.anim {
	opacity: 0;
	transform: translateY(0) scale(0.95);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Classe aggiunta quando l'elemento è visibile */
.anim.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
	overflow: hidden;
}

html.has-scroll-dragging {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.has-scroll-smooth body {
	overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
	min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
	height: 100vh;
	display: inline-block;
	white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	height: 100%;
}

.c-scrollbar {
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 100vh;
	transform-origin: center right;
	transition: transform 0.3s, opacity 0.3s;
	opacity: 0;
}

.c-scrollbar:hover {
	transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
	opacity: 1;
}

[data-scroll-direction="horizontal"] .c-scrollbar {
	width: 100%;
	height: 10px;
	top: auto;
	bottom: 0;
	transform: scaleY(1);
}

[data-scroll-direction="horizontal"] .c-scrollbar:hover {
	transform: scaleY(1.3);
}

.c-scrollbar_thumb {
	position: absolute;
	top: 0;
	right: 0;
	background-color: black;
	opacity: 0.5;
	width: 2px;
	border-radius: 10px;
	margin: 2px;
	cursor: -webkit-grab;
	cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
	right: auto;
	bottom: 0;
}

.hero-news {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 90vh;
	-webkit-transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.bgimage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* gradient overlay dal basso verso l'alto sul 50% inferiore */
/* .hero-news::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
pointer-events: none;
} */
.hero-news .hero-title {
	position: absolute;
	left: 5%;
	bottom: 5%;
	margin: 0;
	color: #fff;
	font-size: 3rem;
	line-height: 1.1;
	text-align: left;
	text-shadow: none;
	/* ombra rimossa */
}

#herotitlenews {
	position: absolute;
	left: 0%;
	bottom: 0%;
	margin: 0;
	color: #fff;
	font-size: 3rem;
	line-height: 1.4;
	text-align: left;
	text-shadow: none;
	/* ombra rimossa */
	padding: 4rem 20% 3rem 20%;
}


.imgdocente {
	position: relative
}

.namedocente {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 1.4rem;
	color: #fff;
	font-weight: 800;
	text-align: left;
	padding: 0 0 4% 5%;
}

.namesoci {
	position: relative;
	left: 0;
	bottom: 0;
	font-size: 1.8rem;
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 1rem 0.5rem;
}

.ruolodocente {
	position: relative;
	left: 0;
	bottom: 0;
	font-size: 0.9rem;
	color: #fff;
	font-weight: 500;
	text-align: left;
	height: auto;
}

.educationtext {
	position: relative;
	text-align: justify;
	font-size: 1.5rem;
	color: #fff;
	font-size: clamp(1rem, 4vw, 6rem);
	word-spacing: 1vw;
	line-height: 150%;
	text-transform: uppercase;
	font-weight: 800;
	pointer-events: none;
	padding-top: 10vh;
}

.educationtext strong {
	/* background-color: #ffffff; */
	color: #ffffff;
	font-weight: 900;
	/* padding: 0 0.5em; */
	/* text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(45, 211, 252, 1), 0 0 20px rgba(45, 211, 252, 1), 0 0 30px rgba(45, 211, 252, 1); */
}

.film-break1 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.film_2col {
	position: absolute;
	right: 0;
	top: 0%;
	width: 38%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}

.overlay-content-videoyt {
	position: absolute;
	bottom: 4%;
	left: 4%;
	font-weight: 600;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.2rem;
	font-style: italic;
}

.scopribtn {
	position: relative;
	width: auto;
	width: fit-content;
	display: block;
	text-align: left;
	font-weight: 700;
	color: #fff;
	font-size: clamp(1rem, 1.5vw, 6rem);
	margin-top: 5rem;
	margin-left: 5%;
	border: 0px solid #fff;
	border-radius: 10px;
	padding: 1rem 2rem;
	transition: transform 0.3s ease;
	border: 2px solid white;
}

.scopribtn:hover {
	transform: scale(1.1);
	/* zoom del 10% */
}

.news-archive {
	display: flex;
	gap: 0px;
	flex-wrap: wrap;
}

.news-preview {
	flex: 0 0 calc(50%);
	display: flex;
	flex-direction: column;
	background: #f0f4ff;
	overflow: hidden;
	min-width: 280px;
}

/* immagine 16:9 con gradiente overlay */
.news-image {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.news-image::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	/* gradiente sulla metà bassa */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.news-image .title-wrapper {
	position: absolute;
	bottom: 0em;
	padding: 3rem 5rem 1.5rem 5rem;
}

.news-image .title-wrapper h4 {
	margin: 0;
	font-size: clamp(1rem, 2vw, 6rem);
	color: #fff;
	text-shadow: none;
	/* rimosso */
	text-align: left;
	font-family: "Manrope", sans-serif;
}

.titchisiamo {
	font-size: clamp(1rem, 4vw, 6rem);
	color: #fff;
	font-weight: 800;
	text-shadow: none;
	/* rimosso */
	text-align: left;
	font-family: "Manrope", sans-serif;
	margin: 4rem 0 4rem 0rem;
}

.news-text {
	padding: 3rem 5rem 4rem 5rem;
	display: flex;
	flex-direction: column;
	text-align: left;
	font-family: "Manrope", sans-serif;
}

.news-text p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	font-family: "Manrope", sans-serif;
	line-height: 1.6;
	/* Assicurati che il valore sia coerente */
	max-height: calc(1.6em * 5);
	/* 5 righe con line-height 1.5 */
	text-decoration: none;

	/* proprietà duplicate consolidate */
	font-size: 1.2rem;
	color: #333;
	font-weight: 600;
}

.news-text .tags {
	display: flex;
	gap: 8px;
	margin-bottom: 0.75em;
}

.news-text .tags span {
	background: #fff;
	color: #333;
	font-size: 0.75rem;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 700;
	margin-bottom: 0em;
}

.news-text a {
	align-self: flex-start;
	font-size: 1.5em;
	font-weight: 800;
	color: #0066cc;
	text-decoration: none;
	margin-top: 1rem;
}

.news-text a:hover {
	/* text-decoration: underline; */
}

.continuanews {
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: 800;
	color: #0066cc;
	text-decoration: none;
	margin-top: 1rem;
}

.news-body {
	width: 60%;
	max-width: 100%;
	padding: 4rem 0rem 4rem 0rem;
	font-family: 'Manrope', sans-serif;
	color: #333;
	line-height: 1.8;
	font-size: 1.2rem;
	text-align: left;
	margin: 0 auto;
}

.backbtn {
	font-family: 'Manrope', sans-serif;
	font-size: 1.1rem;
	text-align: left;
	margin: 0 auto;
	border-radius: 10px;
	padding: 0.6rem 1.2rem;
	font-weight: 800;
	color: #fff;
	background-color: #007dff;
	background-image: -webkit-gradient(linear, left center, right center, from(rgb(0, 125, 255)), to(rgb(41, 211, 252)));
	background-image: -webkit-linear-gradient(left, rgb(0, 125, 255), rgb(41, 211, 252));
	background-image: -moz-linear-gradient(left, rgb(0, 125, 255), rgb(41, 211, 252));
	background-image: -o-linear-gradient(left, rgb(0, 125, 255), rgb(41, 211, 252));
	background-image: -ms-linear-gradient(left, rgb(0, 125, 255), rgb(41, 211, 252));
	background-image: linear-gradient(left, rgb(0, 125, 255), rgb(41, 211, 252));
	transition: transform 0.3s ease;
}

/* immagine fluttuante a sinistra */
.news-float-img {
	float: left;
	width: 45%;
	max-width: 500px;
	margin: 0 2rem 1rem 0;
	border-radius: 8px;
	height: auto;
}

/* Clear float alla fine se serve */
.news-body::after {
	content: "";
	display: table;
	clear: both;
}

/* mobile: una sola colonna */
@media (max-width: 1000px) {
	.news-preview {
		flex: 1 1 100%;
	}
}

/* CHI SIAMO */
/* CHI SIAMO */
/* CHI SIAMO */
/* CHI SIAMO */
/* CHI SIAMO */

.company-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3 colonne su desktop */
	gap: 20px;
	margin-bottom: 20px;
}

.company-card {
	position: relative;
	width: 100%;
	padding-top: 100%;
	/* quadrato */
	background-size: cover;
	background-position: center;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	transition: border-radius 0.3s ease;
}

/* gradiente per rendere più visibili nome/ruolo */
.company-card::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.company-card .company-info {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	text-align: left;
	padding: 2rem 2rem;
	line-height: 1.2;
}

.company-card .company-info h3 {
	margin: 0;
	font-size: clamp(1.6rem, 2vw + 0.8rem, 2.6rem);
	/* min | dinamico | max */
	font-weight: 700;
}

.company-card .company-info p {
	margin: 0;
	font-size: clamp(0.8rem, 0.6vw + 0.6rem, 1.5rem);
	/* min | dinamico | max */
}

.company-card:hover {
	border-radius: 40px;
}

/* overlay bio: scroll se il testo supera lo spazio */
.company-card .company-bio {
	position: absolute;
	inset: 0;
	background: rgba(15, 113, 253, 0.9);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
	padding: 2rem;
	display: flex;
	align-items: flex-start;
	/* in alto, non centrato, così si capisce che scorre */
	justify-content: flex-start;
	text-align: left;

	overflow: auto;
	/* <— abilita lo scroll */
	-webkit-overflow-scrolling: touch;
	/* scroll fluido su iOS */
	overscroll-behavior: contain;
	/* evita rimbalzi della pagina */
	scrollbar-gutter: stable;
	/* evita “salti” di layout quando appare la barra */
}

/* opzionale: stile scrollbar (WebKit) */
.company-card .company-bio::-webkit-scrollbar {
	width: 8px;
}

.company-card .company-bio::-webkit-scrollbar-track {
	background: transparent;
}

.company-card .company-bio::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.35);
	border-radius: 8px;
}

.company-card .company-bio:hover::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.6);
}

/* opzionale: stile scrollbar (Firefox) */
.company-card .company-bio {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.company-card:hover .company-bio {
	opacity: 1;
}

.company-bio {
	font-size: 1.2em;
	line-height: 1.5;
}

.soci-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4 per riga */
	/* gap: 20px; */
	border-radius: 50px;
	overflow: hidden;
}

@media (max-width: 1000px) {
	.soci-grid {
		grid-template-columns: repeat(2, 1fr);
		/* 2 per riga su tablet */
	}
}

@media (max-width: 600px) {
	.soci-grid {
		grid-template-columns: 1fr;
		/* 1 per riga su mobile */
	}
}

.socio-card {
	position: relative;
	aspect-ratio: 1 / 1;
	/* mantiene il quadrato senza usare padding-top */
	background-size: cover;
	background-position: center;
	/* border-radius: 50px; */
	overflow: hidden;
	cursor: pointer;
	transition: border-radius 0.3s ease;
	background-color: rgba(0, 0, 0, 0.188);
}

.socio-card::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.socio-card .socio-info {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	text-align: left;
	padding: 2em;
}

.socio-card .socio-info h3 {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
}

.socio-card .socio-info p {
	margin: 0;
}

.socio-card .socio-bio {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.socio-card:hover .socio-bio {
	opacity: 1;
}

.socio-bio {
	font-size: 1.3em;
}

/* rimosso display:none !important per permettere l'hover */
/* LAYOUT PROFILI */
.profiles-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.profile-card {
	display: flex;
	background: #fff;
	border-radius: 40px;
	overflow: hidden;
	/* rimuovo il flex precedente */
}

.profile-card img {
	width: 40%;
	object-fit: cover;
	min-width: 250px;
}

.profile-content {
	width: 62%;
	padding: 2em;
	display: flex;
	flex-direction: column;
	color: #000;
	text-align: left;
}

.profile-content h3 {
	margin: 0 0 8px;
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 800;
}

.profile-content p {
	margin: 0;
	flex: 1;
	font-size: 0.9rem;
	line-height: 140%;
}

/* desktop: due card per riga */
@media (min-width: 1001px) {
	.profile-card {
		flex: 0 0 calc(50% - 10px);
		/* 50% della larghezza meno metà gap */
	}
}

/* tablet/mobile: una colonna */
@media (max-width: 1000px) {
	.profiles-container {
		flex-direction: column;
	}

	.profile-card {
		flex-direction: column;
		overflow: visible;
	}

	.profile-card img {
		width: 100%;
		border-radius: 40px 40px 0 0;
	}

	.profile-content {
		width: 100%;
		padding: 20px;
		margin-top: 12px;
	}
}

/* EDUCATION */
/* EDUCATION */
/* EDUCATION */
/* EDUCATION */
/* EDUCATION */
.masonry-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, auto);
	gap: 1rem;
	max-width: 800px;
	margin: auto;
	position: absolute;
	right: 0;
	bottom: 0%;
	width: 38%;
	/* height: 150%; */
}

.masonry-item {
	padding: 2rem 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #FFFFFF;
}

.number {
	font-size: clamp(1rem, 5vw, 6rem);
	font-weight: bold;
	color: rgb(0, 83, 172);
	margin-top: 2rem;
	display: inline-block;
	font-weight: 800;
}

.label {
	margin-top: 1rem;
	/* text-transform: uppercase; */
	font-size: clamp(1rem, 1.2vw, 3rem);
	color: rgb(0, 83, 172);
	font-weight: 800;
}

/* Posizionamento */
.item-1 {
	grid-column: 1;
	grid-row: 1;
}

.item-3 {
	grid-column: 1;
	grid-row: 2;
}

.item-4 {
	grid-column: 1;
	grid-row: 3;
}

.item-2 {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.item-5 {
	grid-column: 2;
	grid-row: 3;
}

.suffix {
	font-size: 2rem;
	margin-left: 0.2em;
	vertical-align: top;
	margin-top: -1rem;
	display: inline-block;
}

.suffixlarge {
	font-size: 4rem;
	margin-left: 0.2em;
	vertical-align: top;
	display: inline-block;
}

/* PODCAST */
/* CSS */
.video-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 15px;
}

.video-container video {
	display: block;
	width: 100%;
	height: auto;
	background-color: #000;
}

/* CSS */
.video-wrapper {
	position: relative;
	width: 100%;
	/* rapporto 16:9=> 9 / 16 = 0.5625 -> 56.25% */
	padding-bottom: 56.25%;
	/* opzionale: se vuoi un po’ di margine verticale */
	/* margin: 1rem 0; */
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 15px;
}

.gridbtnpodcast {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2%;
	width: 100%;
}

.gridbtnpodcast .grid-item {
	/* background-color: blue; */
	border: 2px solid white;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-top: 5%;
	padding: 0.2rem 1rem;
	text-align: center;
}

.gridbtnpodcast .grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	/* border-radius: 10px; */
}

/* Responsive: stack vertically on small screens */
@media (max-width: 1000px) {
	.gridbtnpodcast {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Adatta il pulsante su schermi stretti */
@media (max-width: 480px) {
	.video-container .play-button {
		width: 60px;
		height: 60px;
	}
}

/* SOCI */

.namesoci .nome {
	display: block;
	line-height: 1;
	font-size: clamp(1.2rem, 1.5vw, 3rem);
}

.namesoci .cognome {
	display: block;
	line-height: 1;
	font-size: clamp(1.2rem, 1.5vw, 3rem);
	margin-bottom: 0em;
}

.namesoci .ruolodocente {
	display: block;
	line-height: 1;
	font-size: clamp(1.2rem, 1vw, 3rem);
	margin-bottom: 0.2em;
}

.mySwiperSoci .swiper-pagination {
	position: relative;
	/* non assoluta dentro lo swiper */
	margin-top: 20px;
	/* distanza dal fondo dello slider */
	text-align: center;
	/* centrata orizzontalmente */
}

/* STAFF */

.staff-section {
	margin: 2.5rem 0 0.5rem;
	padding: 0.8em 3%;
	font-size: clamp(1rem, 3rem + 1vw, 6rem);
	font-family: "bebas-neue-pro-semiexpanded", sans-serif;
	font-weight: 700;
	color: #C10D1E;
}

.staff-section-title {
	margin: 2.5rem 0 0.5rem;
	padding: 0 3%;
	font-size: clamp(1rem, 0.4rem + 0.5vw, 1.25rem);
	letter-spacing: .02em;
	font-family: "golos-text", sans-serif;
	margin: 2em 0;
}

.staff-block {
	width: 100%;
	padding: 0 3%;
	box-sizing: border-box;
	position: relative;
	margin: 1.25rem 0 1.25rem;
	font-family: "golos-text", sans-serif;
}

.staff-block .swiper {
	overflow: hidden;
	z-index: auto;
}

.staff-block .swiper-wrapper {
	align-items: stretch;
	gap: 12px !important;
	z-index: auto;
}

.staff-block .swiper-slide {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.staff-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 2em;
	border: 2px solid #E5E5E5;
	border-radius: var(--radius);
	box-sizing: border-box;
}

.staff-card .imgwrap {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: #ccc;
	margin-bottom: 1em;
}

.staff-card .imgwrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter .35s ease, transform .35s ease;
	display: block;
}

.staff-card:hover .imgwrap img {
	filter: grayscale(0%);
	transform: scale(1.03);
}

.staff-meta {
	padding-top: 6px;
	line-height: 1.2;
	text-align: left;
}

.staff-role {
	font-size: clamp(0.8rem, 0.6vw + 0.2rem, 3rem);
	font-weight: 600;
	margin-bottom: 1em;
	color: #C30E1F;
	text-transform: uppercase;
}

.staff-name {
	font-weight: 500;
	font-size: clamp(1rem, 0.9vw + 0.8rem, 3rem);
}

.staff-name .first,
.staff-name .last {
	display: block;
}

.staff-block:not(.has-arrows) .swiper-button-prev,
.staff-block:not(.has-arrows) .swiper-button-next {
	display: none;
}

.staff-block .swiper-button-prev,
.staff-block .swiper-button-next {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	backdrop-filter: blur(6px);
	background: rgba(0, 0, 0, .35);
	z-index: auto;
}

.staff-block .swiper-button-prev::after,
.staff-block .swiper-button-next::after {
	font-size: 18px;
	color: #fff;
}

.staff-block .swiper-pagination-bullets {
	opacity: 0;
	bottom: -20px;
	z-index: auto;
}

.staff-block .swiper-pagination-bullets .swiper-pagination-bullet {
	opacity: .5;
}

.staff-block .swiper-pagination-bullet-active {
	opacity: 1;
	background-color: red;
}





/* HOME *//* HOME */
/* HOME */
/* HOME */
/* HOME *//* HOME */


/* CSS */
.grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	/* nessuno spazio tra le card */
	align-items: stretch;
	/* le card si allungano tutte alla stessa altezza */
	background-color: #007BFF;
	box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0.05);
}

.card {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.card-image {
	width: 100%;
	height: auto;
	display: block;
}

.card-title {
	font-size: clamp(1rem, 2vw, 6rem);
	color: rgb(255, 255, 255);
	margin-top: 1em;
	text-transform: uppercase;
	text-align: center;
}

.card-description {
	flex: 1;
	/* occupa tutta l’altezza residua della card */
	color: rgb(255, 255, 255);
	padding: 0em 2em;
}

/* Card intera in hover */
.card:hover {
	background: #ffffff;
}

.card a {
	text-decoration: none;
}

/* Titolo e descrizione in bianco */
.card:hover .card-title,
.card:hover .card-description {
	color: #07f;
}

.card h3 {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

/* Bottone in hover: bordo e testo in bianco, sfondo trasparente */
.card:hover .card-button {
	background: transparent;
	border-color: #07f;
	color: #07f;
}

.card-button {
	/* Disposizione */
	align-self: center;
	/* centra orizzontalmente nel flex container */
	margin-top: 1rem;
	/* spazio sopra il bottone */

	/* Stili del bottone */
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 2px solid #007BFF;
	/* bordo colorato */
	border-radius: 0.5rem;
	/* angoli arrotondati */
	background: #fff;
	/* sfondo bianco */
	color: #007BFF;
	/* testo colorato */
	text-decoration: none;
	font-weight: 600;
	transition: background 0.5s, color 0.5s;

	/* Per rendere click area coerente */
	cursor: pointer;
	margin-bottom: 3em;
}

.card-button:hover {
	background: #007BFF;
	color: #fff;
}



p {
	display: block;
	margin-block-start: 0em;
	margin-inline-start: 0px;
	margin-block: 0;
}