/* Stili base */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    padding-top: 100px;
    display: flex;
    flex-wrap: wrap;
}

/* Stili per l'header */
header {
    background-color: #f8f8f8;
    padding: 10px;
    border-bottom: 1px solid #669691;
    box-shadow: 0px 0px 2px 2px #669691;
    position: fixed; /*posizione fissa nella finestra, indipendentemente da scroll*/
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    z-index: 100; /* aggiunto per mantenere l'header al di sopra degli altri elementi */
}

img {
    height: 40px;
}

/* Nascondi il menu hamburger e il menu mobile di default */
.hamburger, .mobile-menu {
    display: none;
}

header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

header > nav > ul > li {
    margin: 0 10px;
}

a:not(.collegamento-home,.internal-link) {
    text-decoration: none;
    color: #333;
    padding: 5px;
    transition: all 0.8s ease;
}

a:hover:not(.collegamento-home,.internal-link) {
    color: #009e8f;
    font-weight: 800;
    background-color: #666;
    border-radius: 20px;
}

#contenitore-totale {
    width: 95%;
    margin: 0 auto; /* Centra il contenitore rispetto alla pagina, per esteso significa: margini alto e basso 0, margini sinistra e destra auto*/
}

.internal-link {
    font-weight: 500;
    color: black;
}


 
/*sezione about*/

.about {
    width: 100%;
    height: 45vw;
    background: linear-gradient(to bottom right, #009E8F, #80E6D1);
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
  
.about-img {
    float: left;
    width: 30vw;
    height: auto;
    margin: 20px 40px 30px 60px;
}


.about-img img {
    width: 30vw;
    height: auto;
    border-radius: 100px;
    box-shadow: 0px 0px 30px rgb(36, 36, 36);

}
  
.about-text {
    top: 50%;
    right: 0;
    width: calc(100% - 300px);
    padding: 0 20px;
}
  
.about-text h1 {
    font-size: 4em;
    margin: 0 0 10px;
    margin-bottom: 20px;
    color: #f8f8f8;
}
  
.about-text p {
    font-size: 2em;
    font-weight: 400;
    margin: 0;
    line-height: 45px;
    }

span {
    color: #f8f8f8;
    font-weight: 700;
}

  
/*sezione 2*/

#testo-seo {
    background-image: linear-gradient(to bottom, rgba(0, 143, 129, 0.1), rgba(62, 76, 94, 0.1) 90%);
    margin-bottom: 60px;
    padding: 50px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.testo-seo-intro {
    margin-bottom: 40px;
}

.paragrafo-testo-seo:not(.item-griglia) {
    line-height: 30px;
    font-size: 16pt;
}

.paragrafo-testo-seo span {
    color: rgb(65, 62, 62);
    font-weight: 700;
}

.griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 0px 100px;
    margin-bottom: 50px;
    margin-top: 60px;
    width: 100%;
  
}

.item-griglia {
    line-height: 30px;
    border: none;
    padding: 10px 20px 0px 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px gray;
    background-color: rgba(62, 76, 94, 0.1);
    transition: all 0.4s ease-out;
}


.item-griglia:hover {
    box-shadow: 0px 0px 30px;
    background-color: rgba(62, 76, 94, 0.3);
    transform: translateY(-5px);
}

.item-griglia-vuoto {
    padding: 10px 20px 0px 20px;
}

.item-griglia h2 {
    text-align: center;
    font-size: 30pt;
}

.icona-h2 {
    display: flex;
    align-items: center;
}

.icona {
    margin-right: 25%;
}

.icona img {
    width: 70px;
    height: auto;
}



/*stili footer*/

.section-footer {
    background-color: #6b6d6d;
    width: 100%;
    height: 5%;
}

#testo-footer {
    margin: 0.5% 0 0.5% 2%;
    color: white;
    font-size: 0.8vw;
    line-height: 2;
}

/*inizia il breakpoint per tablet*/

@media screen and (min-width: 481px) and (max-width: 1400px) {

          /*inizia il mobile menu*/
          
            /* Nascondi il menu di navigazione standard e mostra il menu a tendina */
            .desktop-menu {
              display: none;
          }

          /* Mostra il menu a comparsa (hamburger) */
          .hamburger-menu {
              display: block;
          }

          .mobile-menu.open {
              display: block;
          }
          

          /* Stili per il menu hamburger */
          .hamburger {
              display: flex;
              justify-content: center;
              width: 30px;
              height: 20px;
          }

          .hamburger img {
              width: 100%;
              height: auto;
          }

          .hamburger-menu button {
              border: none;
              background: transparent;
          }

          

          /* Stili per il menu mobile */
          .mobile-menu {
              position: absolute;
              top: 100%;
              right: 0;
              background-color: #f8f8f8;
              list-style-type: none;
              padding: 10px 0;
              transition: max-height 0.3s ease-in-out;
          }

          .mobile-menu li {
              text-align: right;
              padding: 5px 10px;
          }

    /* sezione about */

    /* Ridimensiona il titolo nella sezione .about */
    .about {
        height: 63vw;
    }

    .about-text h1 {
        font-size: 3em;
        }

    .about-text p {
        font-size: 1.2em;
        line-height: 30px;
        }

    .about-text p:hover {
        font-size: 1em; /* Disabilita l'effetto hover ridimensionando il font */
        line-height: 30px; /* Disabilita l'effetto hover ridimensionando la distanza tra le righe */
        }

    
    
    /* sezione testo */
    
    #testo-seo {
        padding: 30px; /* Riduci il padding attorno al contenuto */
      }
    
      .paragrafo-testo-seo:not(.item-griglia) {
        font-size: 14pt; /* Riduci la dimensione del font per adattarsi ai tablet */
      }
    
      .griglia {
        grid-template-columns: 1fr; /* Imposta una colonna per la griglia */
        grid-gap: 30px; /* Riduci la distanza tra gli elementi della griglia */
      }
    
      .item-griglia {
        padding: 10px 10px 0 10px; /* Riduci il padding attorno agli elementi della griglia */
      }
    
      .item-griglia h2 {
        font-size: 24pt; /* Riduci la dimensione del font per gli header */
      }
    
      .icona {
        margin-right: 10%; /* Riduci il margine destro dell'icona */
      }
    
      .icona img {
        width: 50px; /* Riduci la larghezza dell'icona per adattarsi ai tablet */
      }

      .item-griglia-vuoto {
        display: none;
        }

    
          
      /*stili footer*/
      
      .section-footer {
        height: 8%;
      }
  
      #testo-footer {
        margin: 0.5% 0 0.5% 2%;
        color: white;
        font-size: 2.5vw;
        line-height: 2;
      }
    

  }

/* Inizia il breakpoint per i dispositivi mobili */

@media screen and (max-width: 480px) {
      /* Aumenta il padding-top del body per evitare sovrapposizioni con l'header */
    body {
        padding-top: 80px;
    }
        /*inizia il mobile menu*/

        /* Nascondi il menu di navigazione standard*/
            .desktop-menu {
                display: none;
            }

            /* Mostra il menu a comparsa (hamburger) */
            .hamburger-menu {
                display: block;
            }

            .mobile-menu.open {
                display: block;
            }
            

            /* Stili per il menu hamburger */
            .hamburger {
                display: flex;
                justify-content: center;
                width: 30px;
                height: 20px;
            }

            .hamburger img {
                width: 100%;
                height: auto;
            }

            .hamburger-menu button {
                border: none;
                background: transparent;
            }

            

            /* Stili per il menu mobile */
            .mobile-menu {
                position: absolute;
                top: 100%;
                right: 0;
                background-color: #f8f8f8;
                list-style-type: none;
                padding: 10px 0;
                transition: max-height 0.3s ease-in-out;
            }

            .mobile-menu li {
                text-align: right;
                padding: 5px 10px;
            }

        /* Riduci i margini del contenitore-totale per un migliore utilizzo dello spazio sullo schermo */

    #contenitore-totale {
        width: 95%;
        margin: 0 auto;
        padding: 10px;
        }

    section {
        max-width: 100% !important;
    }

    /* Sezione About Mobile */

    .about {
        width: 100%;
        height: auto; /* Cambia l'altezza in auto per adattarsi al contenuto */
        flex-direction: column; /* Imposta la disposizione dei figli in colonna */
        margin-bottom: 20px; /* Riduci il margine inferiore */
        padding: 3%;
        margin-top: 2%;
      }

      .about-text {
        width: 100%; /* Usa l'intera larghezza dello schermo per il testo */
        padding: 20px; /* Aggiungi un padding uniforme attorno al testo */
      }
    
      .about-text h1 {
        font-size: 2.5em; /* Riduci la dimensione del font per adattarsi allo schermo */
        margin-bottom: 10px; /* Riduci il margine inferiore */
      }
    
      .about-text p {
        font-size: 1.2em; /* Riduci la dimensione del font per adattarsi allo schermo */
        line-height: 30px; /* Riduci la distanza tra le righe per adattarsi allo schermo */
      }

      .about-text p:hover {
        font-size: 1.2em; /* Disabilita l'effetto hover ridimensionando il font */
        line-height: 30px; /* Disabilita l'effetto hover ridimensionando la distanza tra le righe */
      }

    /* Stili Sezione Testo */

    #testo-seo {
        padding: 20px; /* Riduci il padding per adattarsi allo schermo */
        margin-bottom: 20px; /* Riduci il margine inferiore */
      }
    
      .testo-seo-intro {
        margin-bottom: 20px; /* Riduci il margine inferiore */
      }
    
      .paragrafo-testo-seo:not(.item-griglia) {
        line-height: 25px; /* Riduci la distanza tra le righe per adattarsi allo schermo */
        font-size: 12pt; /* Riduci la dimensione del font per adattarsi allo schermo */
      }
    
      .griglia {
        grid-template-columns: repeat(1, 330px) ; /* Imposta una sola colonna per la griglia */
        grid-template-rows: auto; /* Imposta l'altezza delle righe su auto */
        grid-gap: 20px; /* Riduci la distanza tra gli elementi della griglia */
        margin-bottom: 30px; /* Riduci il margine inferiore */
        margin-top: 30px; /* Riduci il margine superiore */
        align-items: center;
      }
    
      .item-griglia {
        padding: 10px; /* Riduci il padding per adattarsi allo schermo */
        border-radius: 10px; /* Riduci il raggio del bordo */
      }
    
      .item-griglia h2 {
        font-size: 20pt; /* Riduci la dimensione del font per adattarsi allo schermo */
      }
    
      .icona {
        margin-right: 10%; /* Riduci il margine destro */
      }
    
      .icona img {
        width: 50px; /* Riduci la larghezza dell'immagine per adattarsi allo schermo */
      }


      .item-griglia-vuoto {
        display: none;
        }
    

    /*stili footer*/

    .section-footer {
      height: 8%;
    }

    #testo-footer {
      margin: 0.5% 0 0.5% 2%;
      color: white;
      font-size: 2.5vw;
      line-height: 2;
    }

        

}