/* Stili Generali e Reset */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Applica Poppins a tutto il corpo */
    background-color: #ffffff; /* ORA LO SFONDO DEL BODY È BIANCO */
    color: #333;
    line-height: 1.6;
}

/* Stili per la sezione Contatti - sarà la fascia viola */
.contact-section {
    background-color: #0D7BC0; /* Sfondo viola scuro per la fascia */
    padding: 60px 20px; /* Spazio interno sopra e sotto */
    color: #ffffff; /* Testo bianco per l'intera sezione viola */
    text-align: center; /* Centra il testo di base */
    
    /* Aggiustamenti per posizionare la fascia al centro dello schermo */
    min-height: 100vh; /* Fa sì che la sezione occupi almeno tutta l'altezza della viewport */
    display: flex; /* Utilizza Flexbox per centrare il contenuto */
    flex-direction: column; /* Organizza gli elementi in colonna */
    align-items: center; /* Centra orizzontalmente il contenuto della fascia */
    justify-content: center; /* Centra verticalmente il contenuto della fascia */
}

.contact-container {
    max-width: 1200px; /* Larghezza massima del contenuto all'interno della fascia */
    margin: 0 auto; /* Centra il contenitore sulla pagina */
    padding: 0 15px; /* Padding sui lati per schermi piccoli */
}

.brand-name {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 2px; /* Spaziatura tra le lettere per "HI-CASE" */
}

.section-title {
    font-size: 2.5em; /* Dimensione del titolo "CONTATTI" */
    font-weight: 700;
    margin-bottom: 40px;
    text-transform: uppercase; /* Testo in maiuscolo */
}

/* Stili per le Colonne Contatti */
.contact-columns {
    display: flex; /* Utilizza Flexbox per le colonne */
    flex-wrap: wrap; /* Le colonne andranno a capo su schermi piccoli */
    gap: 20px; /* Spazio tra le colonne */
    justify-content: center; /* Centra le colonne se non riempiono tutta la larghezza */
    margin-top: 30px;
}

.contact-column {
    background-color: #0D7BC0; /* Mantiene lo stesso sfondo per le colonne */
    /* RIMOSSO: border: 1px solid rgba(255, 255, 255, 0.3); */
    /* RIMOSSO: border-radius: 8px; */
    padding: 30px 20px;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
    box-sizing: border-box;
    /* NUOVO: Aggiungi un bordo destro per creare le linee divisorie */
    border-right: 1px solid rgba(255, 255, 255, 0.3); 
}

/* Rimuovi il bordo destro dall'ultima colonna per evitare una linea in eccesso a destra */
.contact-columns > .contact-column:last-child {
    border-right: none;
}

.contact-column h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #ffffff; /* Colore per i titoli delle colonne */
}

.contact-column p {
    font-size: 0.95em;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8); /* Colore per il testo normale */
}

.contact-column p.hours {
    font-size: 0.85em;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.6); /* Colore leggermente più scuro per gli orari */
}

/* Media Query per schermi più piccoli (es. cellulari) */
@media (max-width: 768px) {
    .section-title {
        font-size: 2em; /* Riduci la dimensione del titolo su schermi piccoli */
    }

    .contact-columns {
        flex-direction: column; /* Le colonne si impilano verticalmente */
        align-items: center; /* Centra le colonne quando sono impilate */
    }

    .contact-column {
        width: 100%; /* Le colonne occupano tutta la larghezza disponibile */
        max-width: 400px; /* Massima larghezza per le colonne impilate */
    }
}