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

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

/* corpo della pagina */

#contenitore-totale {
    width: 75%;
    margin: 0 auto; /* Centra il contenitore rispetto alla pagina, per esteso significa: margini alto e basso 0, margini sinistra e destra auto*/
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

/* titolo */

.div-titolo {
    width: 60%;
    margin-bottom: 50px;
}

.titolo-post {
    font-weight: 800;
    font-size: 3vw;
    color: #009e8f;
    margin-bottom: 20px;
}

.abstract {
    margin: 0;
    font-style: italic;
}

/* immagine */

.contenitore-img-1 {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
}

.img-principale {
    width: 100%;
    height: auto;
    border-top-right-radius: 130px;
}

/* blocco testo-img-form */

.blocco-testo-img-form {
    width: 100%;
}

.blocco-testo {
    width: 60%;
}

.blocco-testo-2 {
    width: 70%;
}


.blocco-img {
    width: 60%;
}

.img-secondaria {
    width: 100%;
    height: auto;
}

#div-4 {
    width: 32%;
    float: right;
    border-radius: 15px;
    padding: 10px 15px;
    background-color: #F0F5F5;
}

/* form */

#div-4 h4 {
    text-align: center;
    color:#333;
    font-size: 1.8vw;
    margin-bottom: 3%;
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  #div-4 form {
    display: flex;
    flex-direction: column;
    min-width: 200px;
  }
  
  #div-4 label {
    margin-top: 10px;
    font-weight: 500;
    font-size: 1.2vw;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  
  #div-4 input {
    margin-top: 5px;
    height: 20px;
    width: 80%; /* ridimensiona l'input field */
    margin-left: 10%; /* centra l'input field nel div */
    margin-right: 10%; /* centra l'input field nel div */
    padding: 3px;
  }
  
  #div-4 input#campo-testo,
  #div-4 textarea#campo-testo {
      height: 100px;
      width: 80%;
      margin-left: 10%; /* centra l'input field nel div */
      margin-right: 10%; /* centra l'input field nel div */
      padding: 3px; 
      margin-top: 5px;
  }
  
  
  .stessa-riga {
      display: flex;
      margin-left: 6%;
  }
  
  div.stessa-riga:nth-child(2) {
      margin-top: 5px;
  }
  
  .oggetto-stessa-riga {
      width: 45%;
  }
  
  div.oggetto-stessa-riga:nth-of-type(2) {
      margin-left: 4%;
  }
  
  
  .checkbox-container {
      display: flex;
      align-items: center;
      margin-left: 10%;
      margin-right: 10%;
    }
    
  .checkbox-container label {
      font-size: 0.8vw !important;
      margin-left: 0 !important; 
      margin-right: 0 !important;
      font-weight: 800 !important;
      white-space: nowrap;
      line-height: 1;
      
  }
    
  .checkbox-container input[type="checkbox"] {
      transform: scale(0.8); /* diminuisce la dimensione del checkbox */
      margin-top: 13px !important;
      margin-left: 0 !important;
      margin-right: 20% !important;
  }
  
  
  #div-4 button {
      margin: 20px 50px 30px 20px;
      background-color: #009e8f;
      border-radius: 20px;
      padding: 10px 20px;
      user-select: none; 
      font-size: 16pt;
      transition: background-color 0.3s ease;
      font-weight: 600;
      font-family: Montserrat, sans-serif;
      margin-left: 10%; /* centra l'input field nel div */
      margin-right: 10%; /* centra l'input field nel div */
  
  }

  /* fine form */


.sottotitolo {
    font-size: 3vw;
}
  

.corpo-testo {
    margin: 20px 0 30px 0;
    line-height: 35px;
    font-size: 1.2rem;

}

.highlight {
    background-color: rgba(3, 158, 140, 0.2);
}

.bold {
    font-weight: 600;
}

.contattaci {
    background-color: #04c8b1;
    color: white;
    border-radius: 25px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 40px;
    font-family: montserrat;
    font-size: 20pt;
    margin: 0 auto;
}

/* stili form popup dispositivi mobili */

.icona-chiusura {
    margin-left: 2vw;
}

.contenitore-popup-form {
    background-color: rgba(51, 51, 51, 0.8);
    z-index: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#popup-form {
    width: 70%;
    border-radius: 15px;
    padding: 10px 15px;
    background-color: #F0F5F5;
}


#popup-form h4 {
    text-align: center;
    color:#333;
    font-size: 1.8vw;
    margin-bottom: 3%;
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  #popup-form form {
    display: flex;
    flex-direction: column;
    min-width: 200px;
  }
  
  #popup-form label {
    margin-top: 10px;
    font-weight: 500;
    font-size: 1.2vw;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  
  #popup-form input {
    margin-top: 1.5vw;
    height: 3vw;
    width: 80%; /* ridimensiona l'input field */
    margin-left: 10%; /* centra l'input field nel div */
    margin-right: 10%; /* centra l'input field nel div */
    padding: 3px;
  }
  
  #popup-form input#campo-testo,
  #popup-form textarea#campo-testo {
      height: 20vw;
      width: 80%;
      margin-left: 10%; /* centra l'input field nel div */
      margin-right: 10%; /* centra l'input field nel div */
      padding: 3px; 
      margin-top: 5px;
  }
  
 
  #popup-form button {
      margin: 20px 50px 4vw 20px;
      background-color: #009e8f;
      border-radius: 20px;
      padding: 3vw 3vw;
      user-select: none; 
      font-size: 16pt;
      transition: background-color 0.3s ease;
      font-weight: 600;
      font-family: Montserrat, sans-serif;
      margin-left: 10%; /* centra l'input field nel div */
      margin-right: 10%; /* centra l'input field nel div */
  
  }


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

    /* Regola per nascondere il form su dispositivi con schermo medio */
    #div-4 {
        display: none;
    }

    /* Adattiamo il layout per dispositivi tablet */
    #contenitore-totale {
        width: 85%;
    }

    .div-titolo {
        width: 100%;
    }

    .titolo-post {
        font-size: 6vw;
    }

    .abstract {
        font-size: 3vw;
    }

    .contenitore-img-1 {
        flex-direction: column;
    }

    .img-principale {
        width: 100%;
    }

    .blocco-testo, .blocco-testo-2 {
        width: 100%;
    }

    .blocco-img {
        width: 100%;
    }

    .sottotitolo {
        font-size: 5vw;
    }

    .corpo-testo {
        line-height: 1.6em;
        font-size: 3vw;
    }

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

        /* stile popup form */

        .posizione-popup-form {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10vw 10vw;
        }
    
        #popup-form {
            width: 60%;
            }
       
        #popup-form h4 {
            font-size: 4vw;
        }
    
        #popup-form label {
            font-size: 2vw;
        }
    
        #popup-form input {
            height: 1rem;
            font-size: 4vw;
        }

        #popup-form input#campo-testo,
        #popup-form textarea#campo-testo {
            height: 10vw;
            width: 80%;
            margin-left: 10%; /* centra l'input field nel div */
            margin-right: 10%; /* centra l'input field nel div */
            padding: 3px; 
            margin-top: 5px;
        }
      
    
        .checkbox-container label {
            font-size: 1.5vw !important;
        }
    
        .checkbox-container input[type="checkbox"] {
            transform: scale(1);
        }
    
        #popup-form button {
            font-size: 3vw;
            padding: 1vw 2vw;
        } 
        
    }
    

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


    /* Regola per nascondere il form su dispositivi con schermo piccolo */
    #div-4 {
        display: none;
    }

    /* Adattiamo il layout per dispositivi mobili */
    #contenitore-totale {
        width: 90%;
    }

    .div-titolo {
        width: 100%;
    }

    .titolo-post {
        font-size: 8vw;
    }

    .abstract {
        font-size: 4vw;
    }

    .contenitore-img-1 {
        flex-direction: column;
    }

    .blocco-testo, .blocco-testo-2 {
        width: 100%;
    }

    .blocco-img {
        width: 100%;
    }

    .sottotitolo {
        font-size: 6vw;
    }

    .corpo-testo {
        line-height: 1.5em;
        font-size: 4vw;
    }

    /* stile popup form */

    .posizione-popup-form {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #popup-form {
        width: 90%;
        }
   
    #popup-form h4 {
        font-size: 6vw;
    }

    #popup-form label {
        font-size: 4vw;
    }

    #popup-form input {
        height: 1rem;
        font-size: 4vw;
    }

    .checkbox-container label {
        font-size: 2.5vw !important;
    }

    .checkbox-container input[type="checkbox"] {
        transform: scale(0.5);
    }

    #popup-form button {
        font-size: 3vw;
    } 



    /*stili footer*/

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

}