/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
    font-family: 'Roboto', Arial, sans-serif;
  }
  h1,h2,h3,h4,h5,p{
    font-family: 'Roboto', Arial, sans-serif;
  }
  .onlymob{
    display: none!important;
  }
  .container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  header.hero {
    background: linear-gradient(135deg, #0056b3, #57a6ff);
    color: white;
    text-align: center;
    padding: 50px 0; /* Aumenta lo spazio verticale */
    position: relative;
    background: url(img/sfondol1.webp);
    background-size: cover;
  }
    
  
  .hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 20px;
  }
  
  .hero-content {
    margin-top: 30px;
    text-align: left;
  }
  
  .hero-content h1 {
    font-size: 2.5rem; /* Dimensione maggiore per il titolo */
  }
  
  .hero-content p {
    font-size: 1.5rem;
    margin: 10px 0 20px;
  }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
  }
  
  .logo {
   width:300px;
    background-color: white;
    padding: 5px;
    border-radius: 8px; /* Arrotondamento degli angoli */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leggera ombra per far risaltare il logo */
  }
  .hero-content {
    margin-top: 20px;
  }
  
  .checkbox-container {
    margin: 20px 0;
    font-size: 0.9rem;
    color: #333;
  }
  
  .checkbox-container input[type="checkbox"], input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Ingrandisce il checkbox */
    cursor: pointer;
    width:5%!important;
    float:left;
  }
  
  .checkbox-container a {
    color:white;
    text-decoration: none;
  }
  
  .checkbox-container a:hover {
    text-decoration: underline;
  }
  
  .cta-button {
    background-color:#ff5c00;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .cta-button:hover {
    background-color: #e68a00;
  }
  .feature-item i {
    color: #0056b3; /* Colore dell'icona */
    margin-bottom: 5px; /* Spaziatura sotto l'icona */
    display: block; /* Posiziona l'icona sopra il titolo */
    padding:10px;
  }
  .feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 box per riga */
    gap: 30px; /* Spazio tra i box */
  }
  
  .feature-item {
    background: white;
    padding: 0; /* Rimuove il padding interno per immagini full-width */
    border-radius: 8px; /* Arrotonda gli angoli dei box */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Assicura che le immagini non escano dal box */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .ctafea {
    margin-top: 2rem;
    text-align: right;
}
/*   .feature-item:hover {
    transform: translateY(-5px);  Effetto sollevamento al passaggio del mouse 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  } */
  section#features {
    margin-top: 6rem;
    margin-bottom: 6rem;
}
  .feature-item img {
    width: 100%; /* L'immagine occupa tutta la larghezza del box */
    height: auto; /* Mantiene le proporzioni */
    display: block; /* Rimuove spazi indesiderati */
  }
  
  .feature-item h3 {
    font-size: 2.3rem;
    margin: 10px 0;
    padding: 0 10px; /* Spazio per testi lunghi */
    color:#003d9e;
    font-weight: bold;
  }
  
  .feature-item p {
    font-size: 1.8rem;
    color: #003d9e;
    padding: 0 10px; /* Spazio per testi lunghi */
  }
  .form-section {
    background-color: #d9d9d9; /* Colore di sfondo della sezione */
    padding: 30px 0; /* Spaziatura sopra e sotto */
    display: flex;
    justify-content: center; /* Centra la form */
    align-items: center;
    background-image: url(img/sfondogriglia1920.webp);
    background-position: bottom;
    background-repeat: repeat-x;
  }
  .form-section label{
    color:white;
    font-size:1.4rem;
  }
  .form-container {
    background-color: #0056b3; /* Colore di sfondo del form */
    padding: 30px;
    border-radius: 20px; /* Arrotondamento degli angoli */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leggera ombra */
    max-width: 500px;
    width: 90%;
  }
  
  .demo-form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spaziatura tra i campi */
  }
  
  .demo-form label {
    color: white;
    font-size: 1rem;
    font-weight: bold;
  }
  
  .demo-form input, .form-section input {
    padding: 10px;
    font-size: 1.5rem;
    border: none;
    border-radius: 10px; /* Arrotondamento dei campi */
    outline: none;
    width: 100%;
  }
  
  .demo-form input::placeholder {
    color: #aaa; /* Colore del testo segnaposto */
  }
  
  .demo-form .cta-button, input[type=submit] {
    background-color: #ff5c00; /* Colore del pulsante */
    color: white;
    font-size: 2.2rem;
    padding: 10px;
    border: none;
    border-radius: 25px; /* Arrotondamento dei bordi */
    text-transform: uppercase;
    cursor: pointer;
    width:100%!important;
    transition: background-color 0.3s ease;
  }
  .form-item {
    margin-top: 15px;
}
  .demo-form .cta-button:hover {
    background-color: #e04a00; /* Colore del pulsante al passaggio del mouse */
  }
  
  footer {
    background: #003d9e;
    color: white;
    text-align: center;
    padding: 20px 0;
  }
  footer a {
    color:white;
  }

  .full-width-image img {
    width: 100%; /* L'immagine si estende a tutta la larghezza della finestra */
    height: auto; /* Mantiene le proporzioni */
    display: block; /* Rimuove eventuali spazi bianchi sotto l'immagine */
  } 

  @media screen and (min-width: 600px) {
    .impcustom {
      margin-top: 15px;
      position: absolute;
      bottom: 0;
  }
    .hero-content h1 {
      font-size: 6rem; /* Dimensione maggiore per il titolo */
      margin-top:6rem;
      font-weight: bold;
    }
    header>.container{
      height:40vw; 
    }
    h2{
      font-size:3rem;
      color:#003d9e;
    }
    .hero-content p {
      font-size: 2.5rem;
      margin: 30px 0 30px;
  }
    .cta-button{
      background-color: #ff5c00;
    color: white;
    font-size: 2rem;
    padding: 15px;
    border: none;
    border-radius: 25px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }
  }
  @media screen and (max-width: 768px) {
    .feature-list {
      grid-template-columns: repeat(2, 1fr); /* 2 box per riga su tablet */
    }
  }
  
  @media screen and (max-width: 480px) {
    .onlydesk{
      display: none!important;
    }
    .onlymob{
      display: block!important;
    }
    .feature-list {
      grid-template-columns: 1fr; /* 1 box per riga su smartphone */
    }
    .hero-content {
      margin-top: 30px;
      text-align: left;
      background-color: #0d377d94;
      border-radius: 10px;
      padding: 15px;
  }
  header.hero{
    background-position: right;
  }
  .navbar>.cta-button{
    padding: 3px 20px;
  }
  }

  @media screen and (min-width: 1400px) {
    .impcustom {
      
      position: absolute;
      bottom:0px;
  }
  .impcustom img{
    max-width:440px!important;
  }
 
  
} 
@media screen and (min-width: 1900px) {
  .impcustom {
    
    position: absolute;
    bottom:0px;
}
.impcustom img{
  max-width:620px!important;
}


} 
@media screen and (min-width: 900px) and (max-width: 1500px) {
    .impcustom {
      left: 30%;
    }
  }