/* Contenitore logo*/



.fixed-container {



    display: flex;



    justify-content: space-between;



    align-items: center;



    width: 100%; /* Assicurati che il container si estenda per tutta la larghezza */



    padding:5px; /* Aggiungi un po' di padding ai lati se necessario */



	padding-right:20px;



	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6); /* Ombra esterna per dare profondità */



	background-color: rgba(255, 255, 255, 0.9); /* Sfondo semitrasparente */



	margin-left:0px;



}







/* Contenitore logo*/



.logo-container {



    flex-grow: 1; /* Consente al logo di crescere e occupare spazio, spingendo il menu a destra */



	width:150px



	



}



/* Contenitore logo*/



@keyframes fadeIn {



    0% {



        opacity: 0;



        



    }



    100% {



        opacity: 1;



        



    }



}







.logo {



    height: auto;



    max-width: 120px; /* Larghezza massima per il logo */



    min-width: 80px; /* Larghezza minima */



    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6); /* Ombra esterna per dare profondità */



    animation: fadeIn 4s ease-in-out forwards; /* Applica l'animazione di fadeInAndRise */



    transition: transform 0.3s ease-in-out; /* Transizione fluida per il cambio di scala */



    display: inline-block; /* Assicura che la transizione di transform sia applicabile */



	margin-left:10%;



}







.logo:hover {



    transform: scale(1.1); /* Ingrandisci la voce al passaggio del mouse */



}















/* Voci menù*/



@keyframes fadeInEffect {



    from {



        opacity: 0;



    }



    to {



        opacity: 1;



    }



}







.menu {



    flex-grow: 2;



    display: flex;



    justify-content: flex-end; /* Allinea il menu a destra per default */



    animation: fadeInEffect 5s ease-in-out forwards; /* Animazione fade-in alla comparsa */



}







.menu ul {



    list-style: none;



    display: flex;



    flex-direction: row; /* Disposizione orizzontale per default */



    padding: 0;



    margin-right: 10%;



    gap: 20px; /* Spazio tra gli elementi del menu */



    font-family: "Manrope", sans-serif; /* Utilizza il font Manrope */



}







.menu ul li a {



    text-decoration: none; /* Rimuove le decorazioni al testo */



    color: black; 



    padding: 5px 0;



    display: block; /* Assicura che l'elemento a occupi l'intero spazio dell'li */



    transition: transform 0.3s ease; /* Transizione fluida per l'effetto di ingrandimento */



	font-size: 14px; /* Esempio di dimensione del font predefinita */



}















.menu ul li a:hover {



    transform: scale(1.1); /* Ingrandisci la voce al passaggio del mouse */



}







/* Applica le modifiche quando la larghezza della viewport è al massimo 768px */



@media (max-width: 768px) {



    .menu {



        justify-content: center; /* Centra il menu nella pagina */



    }







    .menu ul {



        flex-direction: row; /* Cambia la disposizione in verticale */



        align-items: center; /* Centra gli elementi */



        gap: 10px; /* Regola lo spazio tra gli elementi per la vista mobile */



    }







    .menu ul li:not(:last-child):after {



        



        margin: 5px 0; /* Aggiusta i margini per l'orientamento verticale */



    }







    .menu ul li a:hover {



        transform: scale(1); /* Rimuove l'effetto di ingrandimento al passaggio del mouse su dispositivi touch */



    }



}



.background-container {



    position: relative;



    width: 100%;



    height: auto;                      



    



	background-image: url(Immagini/Cti.png); /* Percorso dell'immagine di sfondo */



    background-size: cover; /* Assicura che l'immagine di sfondo copra tutto il contenitore */



    background-position: center; /* Centra l'immagine di sfondo */



    z-index: 1; /* Posiziona il background-container dietro al contenuto */



	overflow:hidden;



}







/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .background-container {



        height: auto; /* Riduci l'altezza per i dispositivi mobili */







    }



}







@keyframes fadeInMoveRight {



    0% {



        opacity: 0;



        transform: translateX(0); /* Parte dalla posizione originale */



    }



    50% {



        opacity: 1; /* Completa il fade-in a metà dell'animazione */



    }



    100% {



        opacity: 1;



        transform: translateX(-295px); /* Sposta verso destra di 100px */



    }



}







.grid-item3  {



	width:100%;



	



}



.grid-textinit {



    font-size: 70px; /* Adatta la dimensione del testo alle tue necessità */



    color: white;



    font-family: "Manrope", sans-serif;



    padding: 0px; /* Riduci il padding per i dispositivi mobili */



    padding-top: 0px; /* Riduci il padding per i dispositivi mobili */



    text-align: right;



    margin-right: 230px; /* Margine dal bordo destro della pagina */



    width:100%;



    opacity: 0; /* Inizia con opacità a 0 per l'animazione */



    animation: fadeInMoveRight 4s ease forwards; /* Applica l'animazione di fade-in e spostamento a destra */



	margin-bottom:30px;







}







/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .grid-textinit {



        font-size: 50px; /* Riduci la dimensione del testo per i dispositivi mobili */



        padding: 10px; /* Aggiusta il padding per i dispositivi mobili */



        padding-top: 0px; /* Aggiusta il padding per i dispositivi mobili */



		opacity:1;



		animation:none;



		margin-right:30px;



		text-align:center;



    }



}







/* Stile per .grid-item4 per allinearlo a destra con una larghezza fissa e responsività */



/* Aggiornamento dell'animazione per includere lo spostamento verso sinistra */



@keyframes fadeInMoveLeft {



    0% {



        opacity: 0;



        transform: translateX(0); /* Parte dalla posizione originale */



    }



    50% {



        opacity: 0; /* Completa il fade-in a metà dell'animazione */



    }



    100% {



        opacity: 1;



        transform: translateX(+50px); /* Sposta verso sinistra di 100px */



    }



}







.grid-item4 {



    display: flex;



    justify-content: center; /* Centra i contenuti all'interno, ma verrà sovrascritto per il testo e l'immagine */



    align-items: left;



    text-align: left; /* Cambiato in left per adattarsi al flusso del testo a fianco dell'immagine */



    width: 100%;



    margin: 0px;



    padding: 20px;



    color: white;



    font-family: "Manrope", sans-serif;



	height:auto;



	box-sizing: border-box; 



    border: none;



    cursor: pointer;



    border-radius: 5px;



    



    



}



/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .grid-item4 {



        font-size: 10px; /* Riduci la dimensione del testo per i dispositivi mobili */



        padding: 0px; /* Aggiusta il padding per i dispositivi mobili */      



		animation:none;



		opacity:1;



		justify-content:right;



		display:flex;



		justify-content: flex-end; /* Corretto per allineare a destra */



		



    }



}







.grid4 {



    flex: 3; /* Dà al testo più spazio rispetto all'immagine, adattalo secondo necessità */



    margin-right: 93px; /* Assicura un margine tra testo e immagine */



    font-size:20px;



	



	width:400px;



	opacity: 0;



    animation: fadeInMoveLeft 4s ease forwards;



    flex-wrap: wrap; /* Assicura che il contenuto si adatti correttamente in spazi ridotti */



	text-align:right;



}







/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .grid4 {



        font-size: 18px; /* Riduci la dimensione del testo per i dispositivi mobili */



        padding: 10px; /* Aggiusta il padding per i dispositivi mobili */



        padding-top: 10px; /* Aggiusta il padding per i dispositivi mobili */



		animation:fadeInAndMoveRight;



		opacity:1;



		margin-right:1vw;



		margin-left:1vw;



		text-align:center;



		justify-content: flex-end; /* Corretto per allineare a destra */



    }



}











@keyframes fadeInAndMoveRight {



    from {



        opacity: 0;



        transform: translateX(-100px); /* Inizia spostato di 50px a sinistra */



    }



    to {



        opacity: 1;



        transform: translateX(0); /* Finisce nella posizione originale */



    }



}







.right-image {



    flex: 8; /* Assegna più spazio all'immagine rispetto al testo, corretto rispetto alla precedente indicazione */



    max-width: 40%;



    height: auto; /* Mantiene le proporzioni dell'immagine */



    border-radius: 55px;



    animation: fadeInAndMoveRight 4s ease forwards; /* Applica l'animazione di fade-in e spostamento */



}



























body, html {



    font-family: 'Quicksand', sans-serif;



    margin: 0;



    padding: 0;



    height: 100%;



    box-sizing: border-box;



	font-size:20px;



}



































































/* Assicura che il menu sia centrato e disposto orizzontalmente */



.nav {



    text-align: center; /* Centra il contenuto del menu */



}







.schema ul {



    margin: 0;



    padding: 0;



    list-style: none; /* Rimuove i bullet points */



    display: flex; /* Disponi gli elementi orizzontalmente */



    justify-content: center; /* Centra gli elementi nel container */



	width:100%;



}







/* Media query per dispositivi con larghezza fino a 768px (tipicamente tablet) */



@media only screen and (max-width: 768px) {



    .schema ul li {



        margin: 5px; /* Riduci il margin per i dispositivi di dimensioni intermedie */



        padding: 5px; /* Riduci il padding per i dispositivi di dimensioni intermedie */



        /* Considera anche di ridurre la dimensione del font se necessario */



    }



}







/* Media query per dispositivi con larghezza fino a 480px (tipicamente smartphone) */



@media only screen and (max-width: 480px) {



    .schema ul li {



        margin: 2px; /* Riduci ulteriormente il margin per i dispositivi più piccoli */



        padding: 2px; /* Riduci ulteriormente il padding per i dispositivi più piccoli */



        /* Adatta ulteriormente la dimensione del font se necessario */



		font-size:7px;



		margin-top:20px;



		



    }



}



.schema li {



    position: relative; /* Necessario per il posizionamento assoluto dei sottomenu */



    margin-right: 20px; /* Distanza tra le voci del menu */



}







.schema li:last-child {



    margin-right: 0; /* Rimuove il margine destro dall'ultimo elemento */



}







/* Stile per i sottomenu */



.subschema {



    display: none; /* Nascondi i sottomenu per default */



    position: absolute; /* Posiziona i sottomenu sotto la voce del menu */



    left: 0; /* Allinea i sottomenu a sinistra con la voce del menu */



    width: 100%; /* I sottomenu occupano tutta la larghezza della voce del menu */



    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Aggiunge un'ombra per profondità */



    z-index: 1000; /* Assicura che i sottomenu siano sopra agli altri contenuti */



    font-family: "Manrope";



    margin-top:20px;	



}







/* Tablet */



@media (max-width: 768px) {



    .subschema {



        /* Opzioni di stile specifiche per tablet, se necessario. 



           Potresti voler modificare la larghezza, ad esempio, per adattarla meglio agli schermi più piccoli. */



    }



}







/* Smartphone */



@media (max-width: 480px) {



    .subschema {



        margin-top:20px;



    }



}







/* Media query per dispositivi con larghezza fino a 768px (tablet) */



@media only screen and (max-width: 768px) {



    .subschema-item {



        font-size: 6px; /* Riduci la dimensione del font per i tablet */



		margin-top:75px;



    }



}







/* Media query per dispositivi con larghezza fino a 480px (smartphone) */



@media only screen and (max-width: 480px) {



    .subschema-item {



        font-size: 6px; /* Riduci ulteriormente la dimensione del font per gli smartphone */



		margin-top:75px;



		overflow:auto;



    }



}







.subschema-item { 



	font-size: 15px;



	padding:10px;



	margin-top:35px;



	text-align:center; 



	width:100%;



	



	



}







.subschema-item:hover {



    box-shadow: 0 8px 16px rgba(0,0,1,1.7); /* Aggiunge un'ombra per profondità */



	/*transform: scale(1.1); /* Ingrandisci la voce al passaggio del mouse */



}







/* Mostra i sottomenu al passaggio del mouse */



.menu li:hover .subschema {



    display: block;



}







.subschema-item:hover, .schema-item:hover {



    background-color: lightblue; /* Evidenziazione con colore */



    color: black; /* Cambia il colore del testo */



	cursor: pointer;



	



}



@media only screen and (max-width: 480px) {



.subschema-item .li  {



     font-size:4px;



}



}







.schema-item {



    



    position: absolute; /* Posiziona i sottomenu sotto la voce del menu */



    left: 0; /* Allinea i sottomenu a sinistra con la voce del menu */



    width: 100%; /* I sottomenu occupano tutta la larghezza della voce del menu */



    box-shadow: 0 8px 16px rgba(0,0,0,0.7); /* Aggiunge un'ombra per profondità */



    z-index: 1000; /* Assicura che i sottomenu siano sopra agli altri contenuti */



	font-family: "quicksand"; 



	font-size: 20px;



	text-align:center;



	margin-top:20px;



	padding:10px;







}



/* Media query per dispositivi con larghezza fino a 768px (tipicamente tablet) */



@media only screen and (max-width: 768px) {



    .schema-item {



        font-size: 14px; /* Riduci leggermente la dimensione del font per i tablet */



    }



}







/* Media query per dispositivi con larghezza fino a 480px (tipicamente smartphone) */



@media only screen and (max-width: 480px) {



    .schema-item {



        font-size: 8px; /* Riduci ulteriormente la dimensione del font per gli smartphone */



    }



}











.schema-item:hover {



    box-shadow: 0 8px 16px rgba(0,0,1,1.7); /* Aggiunge un'ombra per profondità */



	



}







.description {



    margin-top:0px;



    padding: 20px;



	font-size:20px;



	text-align:center;



	animation: fadeInEffect 5s ease-in-out forwards;



	font-family:manrope;







	



}











.description:hover {



    box-shadow: 0 8px 16px rgba(0,0,1,1.7); /* Aggiunge un'ombra per profondità */



	



}











.schema {















}







.boldTextStyle {



    font-family: 'Bebas Neue', sans-serif;



    font-size: 20px;



    color: #FF0000; /* o qualsiasi colore desideri */



}















.container {



	width:100%;



	overflow:hidden;











}



.background-container5 {



    



    width: 100%;



    height: auto;                      



    background-image: url(Immagini/giphy.gif); /* Percorso dell'immagine di sfondo */



    background-size: cover; /* Assicura che l'immagine di sfondo copra tutto il contenitore */



    background-position: center; /* Centra l'immagine di sfondo */



    z-index: 1; /* Posiziona il background-container dietro al contenuto */



	overflow:hidden;



}



/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .background-container5 {



        height: 300px; /* Riduci l'altezza per i dispositivi mobili */







    }



}















.grid-textinit5 {



    font-size: 50px; /* Adatta la dimensione del testo alle tue necessità */



    color: white;



    font-family: "quicksand", sans-serif;



    padding: 0px; /* Riduci il padding per i dispositivi mobili */



    padding-top: 0px; /* Riduci il padding per i dispositivi mobili */



    text-align: right;



    margin-left: 20px; /* Margine dal bordo destro della pagina */



    width:1500px;



    opacity: 1; /* Inizia con opacità a 0 per l'animazione */







}







/* Media query per schermi con larghezza massima di 768px (tipicamente dispositivi mobili) */



@media only screen and (max-width: 768px) {



    .grid-textinit5 {



        font-size: 20px; /* Riduci la dimensione del testo per i dispositivi mobili */



        padding: 20px; /* Aggiusta il padding per i dispositivi mobili */



        padding-top: 10px; /* Aggiusta il padding per i dispositivi mobili */



    }



}















.grid-item5 {



    display: flex;



    justify-content: RIGHT; /* Centra i contenuti all'interno, ma verrà sovrascritto per il testo e l'immagine */



    align-items: left;



    text-align: left; /* Cambiato in left per adattarsi al flusso del testo a fianco dell'immagine */



    width: 100%;



    max-width: 90%; /* Mantiene la responsività */



    margin: 0px;



    padding: 20px;



    color: white;



    font-family: "Manrope", sans-serif;







    



    border: none;



    cursor: pointer;



    border-radius: 5px;



    



    



}







@keyframes fadeIn {



    from {



        opacity: 0;



        



    }



    to {



        opacity: 1;



        



    }



}







.container {



	animation: fadeIn 5s ease-out forwards; /* Applica l'animazione di fade-in e zoom-in */







	font-size:20px;







	



	



	}



	



.info-banner {



    background-color: #333; /* Colore di sfondo del banner */



    color: white; /* Colore del testo */



    padding: 10px 0; /* Padding verticale per spaziare il contenuto */



	font-family:manrope;



}







.info-banner .container {



    width: 80%;



    margin: 0 auto; /* Centra il contenuto */



    text-align: center; /* Allinea il testo al centro */



    font-size: 14px; /* Dimensione del testo */



    line-height: 1.5; /* Spaziatura delle linee */



}







/* Adatta il banner per schermi più piccoli */



@media (max-width: 768px) {



    .info-banner .container {



        width: 95%; /* Aumenta la larghezza del contenitore su dispositivi mobili */



        font-size: 12px; /* Riduci la dimensione del testo per migliorare la leggibilità */



    }



}







.info-banner {



    background-color: #333; /* Colore di sfondo del banner */



    color: white; /* Colore del testo */



    padding: 10px 0; /* Padding verticale per spaziare il contenuto */



}







.info-banner .container {



    width: 80%;



    margin: 0 auto; /* Centra il contenuto */



    text-align: center; /* Allinea il testo al centro */



    font-size: 14px; /* Dimensione del testo */



    line-height: 1.5; /* Spaziatura delle linee */



}







/* Adatta il banner per schermi più piccoli */



@media (max-width: 768px) {



    .info-banner .container {



        width: 95%; /* Aumenta la larghezza del contenitore su dispositivi mobili */



        font-size: 12px; /* Riduci la dimensione del testo per migliorare la leggibilità */



    }



}