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

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

li {
    margin: 0 10px;
}

a {
    text-decoration: none;
    color: #333;
    padding: 5px;
    transition: all 0.8s ease;
}

a:hover {
    color: #009e8f;
    font-weight: 800;
    background-color: #666;
    border-radius: 20px;
}

/* contenuto pagina */

.contenitore-totale {
    width: 95%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: rgba(0, 158, 143, 0.05);
    border-radius: 15px;
    padding: 15rem 0;

}

.contenuto {
    text-align: center;
}
 
  .testo {  
  box-sizing: border-box;
  padding: 10px;  
  margin: 10px auto;
  }

  .testo1 {
    font-size: 3.5rem;
    font-weight: 500;
  }

  .testo2 {
    font-size: 4.5rem;
    font-weight: 800;
    color: #009e8f;
  }
  

/*stili footer*/
.section-footer {
    background-color: #6b6d6d;
    width: 100% !important;
    height: 100px;
    position: fixed;
    bottom: 0;
    padding-bottom: 10px;
}

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

/*inizia il breakpoint per tablet*/

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

          /*inizia il mobile menu*/

          /* Nascondi il menu di navigazione standard e mostra il menu a tendina */
            nav ul {
              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;
        }

    /* contenuto pagina */

    .contenitore-totale {
        padding: 20% 0;
        margin-top: 20%;
}

    .testo1 {
        font-size: 3rem;
    }

    .testo2 {
        font-size: 4rem;
    }



          
      /*stili footer*/
      .section-footer {
        height: 80px;
        padding-bottom: 0;
      }
  
      #testo-footer {
        color: white;
        line-height: 1.5;
      }
    

}

    /* 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 e mostra il menu a tendina */
            nav ul {
                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 {
            padding: 20% 0;
            margin-top: 20%;
        }


        .testo1 {
            font-size: 2rem;
        }

        .testo2 {
            font-size: 3rem;
        }

    /*stili footer*/

    .section-footer {
      height: 80px;
      padding-bottom: 0;
    }

    #testo-footer {
      color: white;
      line-height: 1.5;
    }

        

}