#home-area-1 {
    display: flex;       /* mette i figli affiancati */
    justify-content: space-between; /* spazio tra immagine e testo */
    align-items: center; /* centra verticalmente */
    gap: 120px;           /* spazio tra immagine e testo */
    /* flex-wrap: wrap;   /* Va a capo se non c’è spazio */
    position: relative;  /* per posizionare l’elemento pseudo */
}

#home-area-1 img {
    width: auto;     /* ridimensiona larghezza */
    height: auto;     /* mantiene le proporzioni */
}

#home-area-1 p {
    flex: 1;          /* il testo occupa lo spazio rimanente */
    font-size: 18px;  /* dimensione del testo */
    line-height: 1.59; /* altezza della linea per leggibilità */
    color: #333;      /* colore del testo */
}

.box-sfondo {
    background-color: #cce6ff; /* colore sfondo */
    border-radius: 20px 0 0 20px; /* arrotondati solo a sinistra */
    padding: 20px;              /* spazio interno */
    margin: 15px 0;             /* spazio esterno rispetto agli altri elementi */
    position: relative;         /* necessario per posizionare lo pseudo-elemento risvolto */
}

.box-sfondo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    /* allunga la parte destra fino al margine di main */
    left: 100%;  
    background: #cce4f6;
}

.risvolto {
  position: absolute;
  top: 55px;       /* regola l’altezza precisa dove deve apparire */
  left: 1000px;      /* 20px a sinistra del bordo del main */
  width: 40px;      /* dimensione reale della tua immagine */
  height: auto;
}

@media (max-width: 768px) {
  #home-area-1 {
    flex-direction: column; /* immagine sopra, testo sotto */
    text-align: justify;   /* giustifica il testo */
    display: block;       /* forza l'andare a capo */
  }

  #home-area-1 img {
    width: 100%;                /* l'immagine si adatta-restringe alla larghezza del contenitore */
    max-width: 250px !important; /* si adatta allo schermo, non sgrana se più larga */
    height: auto;               /* mantiene proporzioni */
    display: block;             /* forza l'andare a capo */
    margin: 0 auto;             /* opzionale: centra l’immagine */
  }
}

#home-area-2 {
  margin-top: 40px;
}

#home-area-2 h3 {
  margin-bottom: 20px; /* spazio tra titolo e contenuto */
  text-align: left;     /* resta allineato a sinistra */
}

#home-area-2 .flex-row {
  display: flex;
  justify-content: space-between; /* testo a sinistra, immagine a destra */
  align-items: flex-start;
  gap: 20px;
}

#home-area-2 .flex-row p {
  flex: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  white-space: pre-line; /* mantiene i ritorni a capo */
}

#home-area-2 .flex-row img {
  max-width: 600px;
  height: auto;
}

@media (max-width: 768px) {
  #home-area-2 {
    flex-direction: column; /* immagine sopra, testo sotto */
    text-align: left;           /* testo allineato a sinistra */
  }

  #home-area-2 .flex-row {
    flex-direction: column; /* immagine sopra, testo sotto */
    align-items: left;    /* centra l’immagine */
  }

  #home-area-2 .flex-row p {
    margin-bottom: 20px; /* spazio tra testo e immagine */
    text-align: justify;   /* giustifica il testo */
  }

  #home-area-2 img {
    width: 100%;                /* l'immagine si adatta-restringe alla larghezza del contenitore */
    max-width: 400px !important; /* si adatta allo schermo, non grana se più larga */
    height: auto;               /* mantiene proporzioni */
    display: block;             /* forza l'andare a capo */
    margin: 0 auto;             /* opzionale: centra l’immagine */
    margin-top: 20px;           /* spazio sopra l’immagine */
  }
}

@media screen and (max-width: 1024px) {
  .risvolto {
    display: none !important;
  }
}

/* Home Area 4 */
#home-area-4 .flex-row-4 {
  display: flex;
  justify-content: space-between; /* Immagine a destra, testo a destra */
  align-items: flex-start;
  gap: 20px;
}

#home-area-4 .flex-row-4 img {
  flex: 1;
  max-width: 600px;
  height: auto;
}

#home-area-4 .flex-row-4 p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  white-space: pre-line; /* mantiene i ritorni a capo */
}

.box-sfondo-4 {
    background-color: #cce6ff; /* colore sfondo */
    border-radius: 15px 15px 0 15px; /* arrotondati su 3 lati */
    padding: 20px;              /* spazio interno */
    margin: 15px 0;             /* spazio esterno rispetto agli altri elementi */
    position: relative;         /* necessario per posizionare lo pseudo-elemento risvolto */
}

.home-area-4-2 {
  white-space: pre-line; /* mantiene i ritorni a capo */
  font-size: 18px;
}

.home-area-4-2 a {
  text-decoration: none;
  color: #1a73e8ff; /* colore link */
}

.home-area-4-2 a:hover {
  text-decoration: underline;
  color: #1a73e8ff; /* colore link */
}

@media (max-width: 768px) {
  #home-area-4 .flex-row-4 {
    flex-direction: column; /* immagine sopra, testo sotto */
    align-items: left;    /* centra l’immagine */
  }

  #home-area-4 .flex-row-4 p {
    margin-bottom: 20px; /* spazio tra testo e immagine */
    text-align: justify;   /* giustifica il testo */
  }

  #home-area-4 img {
    width: 100%;                /* l'immagine si adatta-restringe alla larghezza del contenitore */
    max-width: 400px !important; /* si adatta allo schermo, non grana se più larga */
    height: auto;               /* mantiene proporzioni */
    display: block;             /* forza l'andare a capo */
    margin: 0 auto;             /* opzionale: centra l’immagine */
    margin-top: 20px;           /* spazio sopra l’immagine */
  }
}

@media (max-width: 768px) {
  .home-area-4-2 {
    text-align: justify;   /* giustifica il testo */
  }
}

/* Evidenziazione del testo importante */
.highlight {
    background-color: #ebff7b; /* Colore di evidenziazione */
    padding: 2px 12px 2px 12px;
    border-radius: 3px;
    border-bottom: 2px solid orange;
    font-weight: bold;
}