html {
       scroll-behavior: smooth;
   }

   /* Stile generale della pagina */
   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
       color: #FFFFFF;
       overflow-x: hidden;
       background-size: cover;
       background-image: url('../Immagini/Loghi/Sfondo.jpg');
       background-repeat: no-repeat;
       background-attachment: fixed;
   }

   /* Stile della barra in alto */
   header {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       background-color: #000000;
       padding: 10px 0;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
       z-index: 1000;
       text-align: center;
   }

   header nav {
       display: flex;
       justify-content: center;
       align-items: center;
   }

   header nav ul {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
   }

   header nav ul li {
       display: inline-block;
       margin: 0 15px;
   }

   header nav ul li a {
       color: #F39C12;
       text-decoration: none;
       font-size: 1.2em;
   }

   header nav ul li a:hover {
       color: #33FF57;
   }

   .spazio-header {
       height: 5em;
       background-color: #000000;
   }

   .spazio-footer {
       height: 90px;
   }

   /* Logo centrale */
   .logo-centrale {
       display: flex;
       justify-content: center;
       align-items: center;
       padding-bottom: 2em;
       background-color: #000000;
   }

   .logo-centrale img {
       max-width: calc(13em + 13vw);
       height: auto;
   }

   /* Sezioni */
   .sezione {
       padding: 10px 20px;
       text-align: center;
       margin-bottom: 10px;
       background-color: rgba(25, 25, 25, 0.9);
   }

   #descrizione-chi-siamo_1,
   #descrizione-chi-siamo_2,
   #descrizione-chi-siamo_3,
   #descrizione-ricerche {
       padding-left: 100px;
       padding-right: 100px;
   }

   @media (max-width: 768px) {

       /* Puoi modificare 768px con la dimensione desiderata */
       #descrizione-chi-siamo_1,
       #descrizione-chi-siamo_2,
       #descrizione-chi-siamo_3,
       #descrizione-ricerche {
           padding-left: 0;
           padding-right: 0;
       }
   }

   .sezione h2 {
       font-size: 2.5em;
       color: forestgreen;
   }

   /* Footer */
   footer {
       background-color: #34495E;
       color: white;
       text-align: center;
       padding: 0;
       width: 100%;
       position: fixed;
       bottom: -100px;
       transition: bottom 0.5s ease;
   }

   footer.visible {
       bottom: 0;
   }

   /* Selettore di lingua */
   .language-selector {
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       align-items: center;
       cursor: pointer;
   }

   .language-selector #current-language {
       width: 30px;
       height: 20px;
       margin-right: 10px;
       object-fit: cover;
   }

   .dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       background: white;
       border: 1px solid #ddd;
       border-radius: 5px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       z-index: 1000;
       display: none;
       flex-direction: column;
   }

   .dropdown img {
       cursor: pointer;
       padding: 5px;
       width: 30px;
       height: auto;
   }

   .dropdown img:hover {
       background: #f0f0f0;
   }

   .hidden {
       display: none;
   }

   /* Icona del menu mobile */
   .menu-toggle {
       display: none;
       cursor: pointer;
       color: #F39C12;
       font-size: 2em;
       padding: 10px;
       text-align: center;
   }

   /* Comportamento del menu su schermi piccoli */
   @media (max-width: 768px) {
       .menu-toggle {
           display: block;
       }

       body.index header nav ul {
           display: none;
           flex-direction: column;
           width: 100%;
           background-color: #000;
           position: absolute;
           top: 60px;
           left: 0;
           right: 0;
           text-align: center;
       }

       body.index header nav ul li {
           display: block;
           margin: 10px 0;
       }

       body.index header nav ul.show {
           display: flex;
       }
   }

   /* Aggiungi visibilità al dropdown del selettore di lingua */
   .language-selector:hover .dropdown {
       display: flex;
   }

   /* Sezione contenuto */
   .contenuto-chi-siamo {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: flex-start;
       gap: 1rem;
       width: 100%;
       flex-wrap: wrap;
   }

   .testo {
       flex: 1;
       min-width: 200px;
   }

   .immagine-bottone {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1rem;
       flex: 1;
       min-width: 200px;
   }

   .immagine-bottone img {
       max-width: 100%;
       max-height: 300px;
       height: auto;
   }

   /* Pulsante Call to Action */
   .cta-button {
       padding: 0.5rem 1rem;
       font-size: 1rem;
       background-color: #4caf50;
       color: white;
       border: none;
       cursor: pointer;
       transition: background-color 0.3s ease;
   }

   .cta-button:hover {
       background-color: #45a049;
   }

   /* Media query per schermi medi */
   @media (max-width: 1024px) {
       .contenuto-chi-siamo {
           flex-direction: column;
           align-items: center;
       }

       .cta-button {
           margin-top: 1rem;
       }
   }

   /* Media query per schermi piccoli */
   @media (max-width: 768px) {
       .contenuto-chi-siamo {
           flex-direction: column;
           align-items: center;
           text-align: center;
       }

       .cta-button {
           margin-top: 1rem;
       }
   }

   /* Banner dei cookie */
   #cookie-banner {
       display: none;
       /* Nasconde il banner per impostazione predefinita */
       position: fixed;
       bottom: 0;
       /* Posiziona il banner in basso */
       left: 0;
       width: 100%;
       background-color: red;
       /* Imposta il colore di sfondo rosso */
       color: #fff;
       /* Colore del testo bianco */
       text-align: center;
       padding: 15px 0;
       /* Aggiungi padding per migliorare l'aspetto */
       z-index: 9999;
       /* Assicura che il banner stia sopra gli altri contenuti */
       font-size: 16px;
       /* Aumenta la dimensione del testo per maggiore visibilità */
       transition: bottom 0.5s ease-in-out;
       /* Transizione per il movimento del banner */
   }

   /* Stile per il pulsante di accettazione */
   #cookie-banner button {
       background-color: #f1f1f1;
       border: none;
       color: #333;
       padding: 8px 16px;
       cursor: pointer;
       font-size: 14px;
       margin-left: 10px;
   }

   #cookie-banner button:hover {
       background-color: #ddd;
   }

   /* Stile generale */
   .contenuto-chi-siamo {
       display: flex;
       /* Usa Flexbox per disporre il contenuto in due colonne */
       justify-content: space-between;
       /* Distribuisce lo spazio tra testo e caselle */
       align-items: flex-start;
       /* Allinea gli elementi all'inizio */
       gap: 2rem;
       /* Aggiungi uno spazio tra le due colonne */
   }

   .testo {
       flex: 1;
       /* La colonna del testo prende quanto spazio disponibile */
       padding-right: 0px;
   }

   .caselle {
       display: flex;
       flex-direction: column;
       /* Dispone le caselle una sotto l'altra */
       gap: 1rem;
       /* Spazio tra le caselle */
       width: 250px;
       /* Imposta una larghezza fissa per la colonna delle caselle */
   }

   .casella {
       text-align: center;
       padding: 2px;
       background: linear-gradient(45deg, #4caf50, #F39C12);
       border-radius: 10px;
       width: 100%;
       height: 100px;
   }

   .numero {
       font-size: 2.3em;
       color: #000000;
       font-weight: bold;
       margin: 0%
   }

   .casella p {
       font-size: 0.8em;
       color: #fff;
   }

   /* Media query per schermi piccoli */
   @media (max-width: 768px) {
       .contenuto-chi-siamo {
           flex-direction: column;
           align-items: center;
           text-align: center;
       }

       .caselle {
           width: 100%;
       }
   }

   /*Loghi partner*/
   .partners-container {
       overflow: hidden;
       width: 100%;
       background: linear-gradient(45deg, #4caf50, #F39C12);
       position: relative;
   }

   .partners-wrapper {
       display: flex;
       animation: scroll-left 20s linear infinite;
       /* Animazione verso sinistra */
       width: calc(250px * 18);
       /* Larghezza per coprire tutta l'area visibile */
   }

   .partners-wrapper-right {
       display: flex;
       animation: scroll-right 20s linear infinite;
       /* Animazione verso destra */
       width: calc(250px * 22);
       /* Larghezza per coprire tutta l'area visibile */
   }

   .partner {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       /* Spaziatura tra immagine e testo */
       width: 250px;
       /* Larghezza singolo elemento */
       margin-right: 20px;
       /* Spaziatura tra i partner */
       height: 200px;
       /* Altezza fissa per il contenitore */
       box-sizing: border-box;
       /* Includi padding e margini nelle dimensioni */
       padding: 10px;
       /* Aggiungi un po' di spazio interno */
   }

   .partner img {
       max-width: 100%;
       /* Assicura che l'immagine non superi la larghezza del contenitore */
       height: 120px;
       /* Altezza fissa per tutte le immagini */
       object-fit: contain;
       /* Mantiene le proporzioni senza deformare l'immagine */
       margin-bottom: 10px;
       /* Distanza tra l'immagine e il testo */
   }

   .partner p {
       margin-top: 10px;
       font-size: 14px;
       color: #333;
       text-align: center;
       margin-bottom: 0;
       /* Rimuove margine inferiore per un allineamento più preciso */
   }

   @keyframes scroll-left {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-33.3333%);
           /* Scorre metà della larghezza */
       }
   }

   @keyframes scroll-right {
       0% {
           transform: translateX(-50%);
           /* Inizia dalla posizione originale */
       }

       100% {
           transform: translateX(0);
           /* Scorre a destra */
       }
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .partner {
           width: 100%;
           /* Rendi la larghezza del partner fluida */
           max-width: 250px;
           /* Imposta una larghezza massima */
       }

       .partner img {
           width: 120px;
           height: 100px;
           /* Altezza ridotta per schermi più piccoli */
       }

       .partners-wrapper {
           animation: scroll-left 15s linear infinite;
           /* Velocità regolata per schermi più piccoli */
       }

       .partners-wrapper-right {
           animation: scroll-right 15s linear infinite;
           /* Velocità regolata per schermi più piccoli */
       }
   }

   .description-area {
       background-color: rgba(25, 25, 25, 0.9);
       /* Colore di sfondo diverso */
       padding: 20px;
       text-align: center;
       color: white;
   }

   /*Contatti*/
   .contact-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       padding: 40px;

   }

   .contact-info {
       flex: 1;
       margin: 5px;
       padding: 10px;
       background-color: #2C2C2C;
       border-radius: 8px;

   }

   .contact-info h2 {
       color: #FF6600;
   }

   .contact-info p {
       font-size: 16px;
       margin: 10px 0;
   }

   .contact-info a {
       color: #00CC66;
       text-decoration: none;
   }

   .map-container {
       flex: 1;
       margin: 5px;
       padding: 10px;
       background-color: #2C2C2C;
       border-radius: 8px;
   }

   .map-iframe {
       width: 100%;
       /* Imposta la larghezza al 100% del contenitore */
       height: 300px;
       /* Imposta un'altezza di base per desktop */
       border: 0;
   }

   /* Media query per schermi più piccoli (tablet e mobile) */
   @media (max-width: 768px) {
       .map-iframe {
           height: 250px;
           /* Altezza ridotta per dispositivi più piccoli */
       }
   }

   /* Media query per schermi più grandi (desktop) */
   @media (min-width: 1024px) {
       .map-iframe {
           height: auto;
           /* Altezza maggiore per schermi più grandi */
       }
   }

   html,
   body {
       max-width: 100%;
       overflow-x: hidden;
   }


/* Contenitore della griglia */
.competenze-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 in linea */
    gap: 2rem; /* spazio tra le card */
    
    justify-items: center; /* centra le card nella griglia */
     max-width: 1400px; 
     margin: auto;      /* la centra orizzontalmente */
     margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Ogni card */
.competenze-grid .attivita {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(45deg, #4caf50, #F39C12);
    padding: 1rem;         /* ridotto rispetto a prima */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;

    width: 100%;
    max-width: 300px;
    min-height: auto;       /* lascia altezza minima adattarsi al contenuto */
}



.competenze-grid .attivita h3 {
    padding: 0;       /* rimuove eventuale padding */
    margin: 0;        /* rimuove margini predefiniti */
    text-align: center;
    font-size: 1.2rem; /* dimensione a piacere */
}

/* Immagini circolari */
.competenze-grid .attivita img {
    width: 100px;
    height: 100px;
    object-fit: contain;  /* mantiene tutta l'immagine */
    margin-top: 1rem;
}

/* Tablet (2 colonne) */
@media (max-width: 1024px) {
    .competenze-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 colonna) */
@media (max-width: 768px) {
    .competenze-grid {
        grid-template-columns: 1fr;
    }
}