body {
  font-family: Arial, Helvetica, sans-serif;

max-width: 95%;
}

.mobile-container {
  max-width: 95%;
  margin: auto;
  background-color: whait;/* colore sfondo generale  #CD853F*/
  
  color: white;
  border-radius: 10px;
background-image: url("/images/famiglia.png"); /* percorso dell'immagine */
background-repeat: no-repeat;    /* evita che si ripeta */
background-size: cover;        /* oppure cover,contain dipende dall'effetto che vuoi */
background-position: center;     /* centra l'immagine */
}

.topnav {
  overflow: hidden;
  background-color: #D2B48C;/* colore titolo alto*/
  position: relative;

}

.topnav #myLinks {
  display: none;
}

.topnav a {
  /* colore scritta titolo alto  color: whait;*/
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: #D2B48C;/* colore amburgher*/
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
 /* colore scritta titolo alto col mouse sopra   background-color: #8B4513; */
  color: whait !important;

}
.topnav .logo {
  width: 5px;               /* grandezza icona (puoi aumentare da 80 → 100px o più) */
  margin-right: 15px;         /* spazio tra logo e testo */
}

.topnav .site-title {
  font-size: 12px;            /* grandezza testo */
  font-weight: bold;          /* grassetto */
  font-family: 'Georgia', serif; 
  color: maroon;               /* colore testo */
 /* centra rispetto al logo  vertical-align: middle; NON funziona */

}



.active {
  background-color: #04AA6D;/* colore sfondo pagina????*/
  color: white;/* colore scritte ???*/
}
.center {
text-align: center;
  margin: auto;
  width: 90%;
  border: 0px solid #73AD21;
  padding: 10px;


/* --- LOGO --- */

logo-img {
width: 4px; /* Larghezza del logo */
  height: auto; /* Mantieni le proporzioni */
  margin: 20px auto; /* Margine per centrare */
  display: block; /* Assicurati che sia un blocco */

  
}
h1 {
      text-align: center;
      margin-bottom: 1.7rem;
      color: maroon;
font-size: 1.6em;
 }
h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: maroon;
font-size: 1.6em;
 }
 h3 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: maroon;
font-size: 1.5em;
    }
p {
  text-align: center;
      margin-bottom: 1.5rem;
      color: maroon; /* colore del testo */
font-size: 1.5em;       /* grandezza del testo */
  line-height: 1.6;      /* spaziatura verticale */
      
  margin-bottom: 15px;   /* spazio sotto ogni paragrafo */
  text-align: justify;   /* giustifica il testo */
}

li {
  list-style-type: disc;   /* pallini classici */
 color: maroon; /* colore del testo */
font-size: 1.5em;       /* grandezza del testo */
}

.contact, .map-button {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 15px;
align: center;
  justify-content: center;  
  align-items: center;
    }

    .contact a, .map-button a {
      padding: 12px;
      text-align: center;
      background-color: whait;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
align: center;
  justify-content: center;  
  align-items: center;
}
a {
  color: maroon;              /* testo bianco */
  text-decoration: none;     /* elimina sottolineatura */
}

a:hover {
  font-weight: bold;            /* colore più chiaro al passaggio del mouse  color: #f0f0f0;*/
  text-decoration: none;     /* mantiene senza sottolineatura */


}
.article-box img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 10px auto;
}
.article-header img {
  flex: 0 0 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
}