body{   
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
 
  font-style: normal;	 
}
p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form {
    margin-bottom: 10px;
}
.bg-color-verde-scuro{background-color: #1D4646;}
.bg-color-verde-chiaro{background-color: #296060;}

.testo-bianco{color:#FFF !important;}
.testo-verde{ color:#285c5c;}

.no-padding{ padding:0px !important;}
.menu-link {/*text-transform: capitalize;*/ font-size:0.8rem}
.testi{ font-size:1.08rem}
.testi ul{ padding-left:25px; }
.testi ul li{ list-style: disc !important;}


/* HOME PAGE */
/* Stili aggiuntivi per visualizzare meglio i div */
.my-col {
   padding: 20px;
}

.container-custom {
	padding: 10px; /* Padding per il container */
}

/* Contenitore per le due colonne di sinistra */
.left-columns-wrapper {
	/* Con Flexbox (usato da Bootstrap per le righe), le colonne in una riga tendono
	   ad avere la stessa altezza. Per avere due elementi impilati a sinistra
	   che "sommano" l'altezza per il div di destra, dobbiamo usare un wrapper
	   e al suo interno un layout che impili. */
	display: flex;
	flex-direction: column; /* Impila gli elementi verticalmente */
	height: 100%; /* Assicura che questo wrapper occupi tutta l'altezza disponibile nella riga */
}

.left-columns-wrapper .my-col {
	margin-bottom: 10px; /* Spazio tra i div a sinistra */
	min-height: 150px; /* Altezza minima per i div di sinistra */
}

.left-columns-wrapper .my-col:last-child {
	margin-bottom: 0; /* Rimuove il margine dall'ultimo div a sinistra */
}

/* Div di destra, che si estenderà in altezza */
.right-col {
	/* Non ha bisogno di min-height qui, perché la sua altezza sarà definita dal suo genitore flex */
	display: flex; /* Se vuoi centrare il contenuto verticalmente al suo interno */
	align-items: center; /* Centra verticalmente il testo nel div di destra */
	justify-content: center; /* Centra orizzontalmente il testo nel div di destra */
	height: 100%; /* Importantissimo: fa sì che la colonna di destra si estenda per tutta l'altezza della riga */
}

/* Stili per visualizzare i nomi delle colonne */
.my-col h2 {
	font-size: 1.2rem;
	margin-bottom: 5px;
	color: #0056b3;
}

.right-col h2 {
	 color: #0056b3;
}

/* Media queries per la responsività */
@media (max-width: 767.98px) {
	/* Sui dispositivi più piccoli (inferiori a md), i col-6 diventano col-12
	   e si impilano. Dobbiamo aggiustare il comportamento delle colonne. */
	.left-columns-wrapper {
		height: auto; /* Rimuove l'altezza fissa per i wrapper di sinistra */
	}
	.left-columns-wrapper .my-col {
		 margin-bottom: 10px; /* Spazio anche in mobile */
	}
	.right-col {
		height: auto; /* Rimuove l'altezza fissa su mobile */
		margin-top: 10px; /* Aggiunge un po' di spazio quando si impila */
	}
}

.img-overlap+div {
	padding: 40px;
}
@media (min-width: 992px) {

	.img-overlap img {
		width: calc(100% + 30%);
		max-width: none;
	}

	.img-overlap + div {
		border-radius: 0.3rem;
		padding: 60px;
	}

}
		

		
.rotating-bg {
  position: absolute;
  top: 5vh; /* Posizione verticale in % rispetto alla finestra */
  left: 10vw; /* Posizione orizzontale */
  width: 300px; /* Larghezza relativa allo schermo */
  height: 300px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/elements_circle2.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: rotate 30s linear infinite;
  opacity: 1;
  pointer-events: none; /* Per non interferire con i click */
}
.element-bg-1 {
  position: absolute;
  top: 0vh; /* Posizione verticale in % rispetto alla finestra */
  left: 0vw; /* Posizione orizzontale */
  width: 400px; /* Larghezza relativa allo schermo */
  height: 241px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/cerchio_trattegiato.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.50;
  pointer-events: none; /* Per non interferire con i click */
}

.element-bg-2 {
  position: absolute;
  top: 0vh; /* Posizione verticale in % rispetto alla finestra */
  left: 0vw; /* Posizione orizzontale */
  width: 400px; /* Larghezza relativa allo schermo */
  height: 400px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/elements_circle3.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity:1;
  pointer-events: none; /* Per non interferire con i click */
}
.element-bg-3 {
  position: absolute;
  bottom: 0vh; /* Posizione verticale in % rispetto alla finestra */
  right: 0vw; /* Posizione orizzontale */
  width: 400px; /* Larghezza relativa allo schermo */
  height: 241px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/cerchio_trattegiato.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.50;
  pointer-events: none; /* Per non interferire con i click */
}

.element-bg-angolo-top {
  position: absolute;
  top: 4vh; /* Posizione verticale in % rispetto alla finestra */
  left: 0vw; /* Posizione orizzontale */
  width: 400px; /* Larghezza relativa allo schermo */
  height: 400px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/angolo_superiore.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
  pointer-events: none; /* Per non interferire con i click */
}

.element-bg-angolo-bottom {
  position: absolute;
  bottom: 4vh; /* Posizione verticale in % rispetto alla finestra */
  right: 0vw; /* Posizione orizzontale */
  width: 400px; /* Larghezza relativa allo schermo */
  height: 400px; /* Altezza uguale per mantenere quadrato */
  background-image: url('../images/angolo_inferiore.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
  pointer-events: none; /* Per non interferire con i click */
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* FOrMATORI */
.box-formatori{ text-align:center; padding:20px;}
.box-formatori a{ color:#000000;}
.box-formatori a:hover span { color: #060;}
.box-formatori img{ border-radius:50%;}
.box-formatori span{ font-weight:bold; display: inline-block; padding-top:5px;color:#296060;}
/* GLOBALI*/
.lady-justice-img::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: -50px -50px 0 #296060;
    opacity: 1;
    border-radius: .10rem;
}
.lady-justice-img-dx::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 50px 50px 0 #296060;
    opacity: 1;
    border-radius: .10rem;
}


/* FOOTER */
#footer{ background-color:#e9e9e9; border-top:5px solid #296060;}
#footer .footer-widgets-wrap {
    padding:30px 0;
}

::selection {
    background: #296060;
    color: var(--cnvs-body-bg);
    text-shadow: none;
}

/* GO TO */
#gotoTop:hover {
    background-color:#296060;
}