/* Layout full-width */


.aree-container { 


    max-width: 1200px; 


    margin: 0 auto; 


    padding: 40px 3%; 


}





/* Titolo Aree di Attività */


.aree-container h1 { 


    color: #002366; 


    text-align: center; 


    font-size: 3em; 


    margin-bottom: 40px; 


    padding-bottom: 20px; 


    border-bottom: 3px solid #002366; 


}





/* Layout blocco area */


.area-box { 


    display: grid; 


    grid-template-columns: 350px 1fr; 


    gap: 50px; 


    margin-bottom: 60px; 


    padding-bottom: 40px; 


    border-bottom: 1px solid #d3dbe6; 


    align-items: start; 


}





/* Container per immagine e bottone */


.box-immagine { display: flex; flex-direction: column; gap: 15px; }





.area-box img { width: 100%; height: auto; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }





/* Bottone Approfondisci */


.btn-approfondisci {


    background-color: #002366;


    color: white;


    text-align: center;


    padding: 12px;


    text-decoration: none;


    font-weight: bold;


    border-radius: 4px;


    transition: background 0.3s;


    text-transform: uppercase;


}


.btn-approfondisci:hover { background-color: #2c3e50; }





.area-box h2 { color: #2c3e50; margin-top: 0; margin-bottom: 20px; font-size: 1.8em; }


.area-box p { text-align: justify; line-height: 1.7; margin-bottom: 15px; font-size: 1.1em; }


.area-box ul { margin-bottom: 20px; line-height: 1.7; font-size: 1.1em; padding-left: 20px; }





@media (max-width: 900px) {


    .area-box { grid-template-columns: 1fr; }


}