@charset "UTF-8";

#titolo h1{
    padding-top: 20px;
    text-align: center;
    margin-bottom: 20px;
  /*  font-family:'roboto', sans-serif;
    font-style: italic; */
    color:#0595a8;
}


/* LAYOUT A 3 COLONNE*/
.contenitore-colonne{
    display: flex; /* Abilita flexbox */
    flex-direction:row; /* Dispone le colonne orizzontalmente */
    align-items: center; /* Centra verticalmente gli elementi */
    gap: 20px; /* Spazio tra le colonne */
    margin: 20px auto; /* Margini sopra/sotto e centratura */
    max-width: 1200px; /* Larghezza massima del contenitore */
    padding: 0 20px; /* Padding laterale */
    justify-content: center; /* Centra orizzontalmente */
    width: 100%; /* Assicura che occupi tutta la larghezza */
}
.colonna-uno, .colonna-tre{
    flex: 1; /* Le colonne laterali prendono spazio uguale */
    min-height: 300px; /* Altezza minima per rendere visibili le immagini */    
}
.colonna-due {
    flex: 2; /* La colonna centrale è il doppio delle laterali */
}
/* IMMAGINI LATERALI */
#img-left, #img-right {
    width: 100%; /* Occupa tutta la larghezza della colonna */
    height: 300px; /* Altezza fissa per rendere visibile l'immagine */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px; /* Angoli arrotondati opzionali */
    /* --- NUOVO EFFETTO SFOCATO/SOPPRESSO --- */
    opacity: 0.85; /* Abbassa l'intensità visiva (0 è invisibile, 1 è pieno) */

}
#img-left{
    background-image: url(../img/img-uno.png);

}
#img-right{
    background-image: url(../img/img-due.png);

}
/* #manifesto-global-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px; 
} 
*/

#manifesto-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}

.manifesto-item {
    opacity: 0; /* Gestito dallo script */
    transition: opacity 1.5s ease-in-out;
    margin: 2px 0; /* Spazio ridottissimo */
    font-size: 0.95rem; /* Più piccolo e pulito */
    text-align: center;
    color: #000000;
    font-weight: 300; /* EFFETTO EMP (LIGHT) */
    line-height: 1.2;
}

/* --- Geometria Ovale via Larghezza Controllata --- */
.ovale-esterno { max-width: 250px; }   /* Frasi corte sopra e sotto */
.ovale-intermedio { max-width: 350px; } 
.ovale-centrale { max-width: 450px; }   /* Frase più larga al centro */

/* #final-message {
    font-weight: 700;
    color: #0595a8;
    font-size: 1.2rem;
    margin-top: 15px;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
} */
#final-message {
    font-weight: 800; /* Bold massimo per l'impatto */
    color: #0595a8;
    font-size: 1.6rem; /* Molto più grande di prima (era 1.2rem) */
    letter-spacing: 5px; /* Stacca nettamente le lettere tra loro */
    margin-top: 15px;
    text-transform: uppercase; /* Forza il maiuscolo in ogni caso */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#sottotitolo h4{
    text-align: center;
    padding-top: 20px;
}


/* RESPONSIVE - Per schermi piccoli */
@media (max-width: 768px) {
    .contenitore-colonne {
        flex-direction: column; /* Su mobile impila verticalmente */
        gap: 30px;
    }
    
    .colonna-uno, .colonna-due, .colonna-tre {
        flex: none; /* Rimuove il flex per mobile */
        width: 100%;
    }
    
    #img-background {
        width: 90%; /* Riduce leggermente su mobile */
    }
}

/*FINE COLONNE*/
#presentazione h4{
    text-align: center;
    padding-top: 5px;

}



/* Gestisce i p della presentazione rimuovendo gli spazi superiori */
#presentazione p {
    text-align: center;
    padding-top: 0;
    margin-top: 0; 
}

#presentazione h2{
    text-align: center; 
    padding-top: 20px;
  /*  font-family:'roboto', sans-serif;
    font-style: italic; */
}

#mission, #vision{
    text-align: center;
    padding-top: 20px;
}
/* Rimuovi quello sul body e usa questo */
#valori {
    padding-bottom: 50px; /* Qui decidi quanto spazio vuoi */
    text-align: center;
    padding-top: 20px;
}