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

/* 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:not(.collegamento-home, .cella) {
    text-decoration: none;
    color: #333;
    padding: 5px;
    transition: all 0.8s ease;
}

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

/* contenuto pagina */

#contenitore-totale {
margin: 0 auto; /* Centra il contenitore rispetto alla pagina, per esteso significa: margini alto e basso 0, margini sinistra e destra auto*/
background-color: rgba(108, 122, 137, 0.1);
border-radius: 15px;
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 5%),
                    linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 5%),
                    linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 5%),
                    linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 5%);
padding: 30px;
width: 90%;
}

.container {
  margin: 3vw;
}

.titolo, .sottotitolo {
  text-align: center;
}

.titolo {
    font-size: 5vw;
    color: #039e8c;
    font-weight: 800;
}

.sottotitolo {
    margin-bottom: 4rem;
    color: #696B6A;

}

.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1vw;
  justify-items: center;
}

.cella {
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: 1.3vw;
  text-decoration: none;
  color: inherit;
  padding: 10px 20px;
}

.cella img {
    width: 80%;
    height: 250px; /* Modifica il valore per regolare la dimensione dell'immagine */
    border-radius: 15px;
    object-fit: cover;
    overflow: hidden;
  }

/*stili footer*/
.section-footer {
    background-color: #6b6d6d;
    width: 100% !important;
    height: 100px;
    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;
          }

    /* Change the layout of the container */

    .container {
        margin: 0 10px;
    }

    /* Change the layout of the title */
    .titolo {
        font-size: 3vw;
    }

    /* Change the layout of the subtitle */
    .sottotitolo {
        margin-bottom: 2rem;
    }

    /* Change the layout of the grid */
    .griglia {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1vw;
    }

    /* Change the layout of the cells */
    .cella {
        width: 50%;
        height: 100%;
        grid-template-rows: auto auto;
        grid-gap: 1vw;
    }

    /* Change the layout of the images */
    .cella img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: contain;
    }

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

    /* Change the layout of the container */
    .container {
        margin: 0 5px;
    }

    /* Change the layout of the title */
    .titolo {
        font-size: 9vw;
    }

    /* Change the layout of the subtitle */
    .sottotitolo {
        margin-bottom: 1rem;
    }

    /* Change the layout of the grid */
    .griglia {
        grid-template-columns: 1fr;
        grid-gap: 0.5vw;
    }

    /* Change the layout of the cells */
    .cella {
        width: 100%;
        height: 100%;
        grid-template-rows: auto auto;
        grid-gap: 0.5vw;
    }

    /* Change the layout of the images */
    .cella img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: contain;
    }
        
            

    /*stili footer*/

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