.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;

	overflow:hidden;

}



/* Contenitore logo*/

.logo-container {

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

	width:150pox

	

}

/* 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 */

}







.menu ul li a:hover {

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

}



@media (max-width: 768px) {

    .menu {

        display: flex;

        justify-content: flex-end; /* Allinea gli elementi del menu a destra */

        margin-right: 40px; /* Aggiunge un margine dal bordo destro del viewport */

    }



    .menu ul {

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 10px;

        padding: 0; /* Rimuove il padding predefinito per ul */

        margin: 0; /* Rimuove il margine predefinito per ul */

    }



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

        content: ""; /* Se utilizzi un separatore, assicurati che si adatti al nuovo layout */

        margin: 0 0px; /* Aggiusta il margine intorno al separatore se necessario */

    }



    .menu ul li a {

        font-size: 0.9em; /* Riduci la dimensione del font */

        padding: 0px 0px; /* Aggiungi un po' di padding per migliorare la tattilità su dispositivi touch */

    }



    .menu ul li a:hover {

        transform: scale(1); /* Mantiene l'elemento stabile al passaggio del mouse */

    }

}



@media (max-width: 480px) {

    .menu ul li a {

        font-size: 0.8em; /* Riduci ulteriormente la dimensione del font per schermi molto piccoli */

    }

}

.background-container {

    position: relative;

    width: 100%;

    height: auto;                      

    background-image: url(Immagini/Soc.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 */

		width:100%;



    }

}



@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(100PX;); /* Sposta verso destra di 100px */

    }

}



.grid-textinit {

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

    color: white;

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

    text-align: left;

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

    margin-left: 70px;

    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 */

	width:100%;

}



@media (max-width: 768px) {

    .grid-textinit {

        font-size: 11vw;

        padding: 5vw;

        padding-top: 8vw;

		width:60%;

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

		opacity:1;

    }

}



@media (max-width: 480px) {

    .grid-textinit {

        font-size: 11vw;

        padding: 5vw;

        padding-top: 10vw;

		width:60%;

    }

}







.contatti {

    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra per dare profondità */

    padding: 20px;

    max-width: 600px; /* Adattabile a esigenze specifiche */

    margin: auto;

	font-family:manrope;

}



.former a {

    color: #007bff;

    text-decoration: none;

	font-family:manrope;

}



.former h2 {

    display: flex;

    justify-content: space-between;

    align-items: left;

	font-family:manrope; 

	Font-size:20px;

}



.former .social {

    display: flex;

    justify-content: start;

    gap: 10px; /* Distanza tra i loghi */

}



.former .social img {

    width: 40px; /* Dimensione dei loghi social */

    height: auto;

}



/* Responsività */

@media (max-width: 768px) {

    .former h2 {

        flex-direction: column;

    }

    .former .telefono {

        margin-top: 10px;

    }

}





















	

.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 .container2 {

    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 .container2 {

        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 .container2 {

    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 .container2 {

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

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

    }

}