/* =============================================== */
/* STILI SPECIFICI PER INDEX.PHP (PUBBLICO)        */
/* =============================================== */

/* Hero Section */
#hero {
    min-height: 70vh; 
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: var(--nero-bit-black);
    background-image: 
        linear-gradient(rgba(26, 26, 26, 0.65), rgba(26, 26, 26, 0.75)),
        url('/temi/temabase/images/hero-abstract-tech.avif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; 
}
#hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--white-color); /* Sovrascrive h1 generale se necessario */
}
#hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin: 1em auto 2em auto; /* Adattato */
}

#servizi, 
#chi-siamo, 
#contatti { /* Aggiunto #chi-siamo e #contatti qui */
    background-color: var(--white-color);
}
/* Bottone Call to Action (Generico, pu essere usato ovunque) */
.cta-button {
    display: inline-block;
    background: var(--nero-bit-blue);
    color: var(--white-color) !important; /* Importante per sovrascrivere colore link generico */
    padding: 12px 28px; /* Leggermente più padding */
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Rimuove underline se è un <a> */
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cta-button:hover {
    background: #008ecc; /* Più scuro */
    transform: translateY(-2px); /* Leggero sollevamento */
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Sezioni Generiche in index.php */
section {
    padding: 60px 0; /* Aumenta un po' il padding verticale */
    /* text-align: center; Non più globale, gestito da .container o localmente */
}
section h2 { /* Titoli di sezione */
    text-align: center; /* Centra i titoli di sezione */
    font-size: 2.2rem; /* Leggermente più grandi */
    margin-bottom: 40px; /* Pi¹ spazio sotto */
    text-transform: uppercase;
    position: relative;
    display: block; /* Non pià inline-block per centrare la linea sotto */
}
section h2::after { /* Linea decorativa */
    content: '';
    display: block;
    width: 70px; /* Leggermente più lunga */
    height: 4px; /* Leggermente più spessa */
    background: var(--nero-bit-blue);
    margin: 15px auto 0; /* Più spazio e centrata */
}

/* Servizi Section */
#servizi {
    background-color: var(--white-color);
}
.servizi-container {
    display: flex;
    justify-content: space-between; /* O space-around */
    flex-wrap: wrap;
    gap: 25px; /* Spazio tra i box dei servizi */
    max-width:1100px;
    margin: 0 auto;
    /* Se non usi .container per la section, aggiungi max-width e margin:auto qui */
}
.servizio-item {
    background: var(--light-color);
    padding: 30px 25px; /* Più padding */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    /* flex-basis: calc(33.333% - 20px); /* Esempio per 3 colonne con gap */
    /* Per 3 colonne: */
    width: calc((100% / 3) - (2 * 25px / 3)); /* (100% / num_colonne) - (gap * (num_colonne-1) / num_colonne) */
    min-width: 280px; /* O rimuovi flex-basis e usa questo per il wrapping */
    text-align: center; /* Centra icona e titolo */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    margin: 0 auto;
}
.servizio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.servizio-item .servizio-icon {
    width: 60px;
    height: 60px; /* Stessa altezza per uniformità se le icone variano */
    margin: 0 auto 20px auto; /* Centra e dà spazio */
}
.servizio-item h3 {
    font-size: 1.4rem;
    color: var(--nero-bit-blue);
    margin-bottom: 10px;
}
.servizio-item p {
    font-size: 0.95em;
    color: #555;
    text-align: left; /* O center se preferisci */
}


/* Punti di Forza Section */
#punti-forza {
    background-color: var(--light-color);
}
#punti-forza ul {
    list-style: none;
    padding: 0;
    max-width: 700px; /* Leggermente più largo */
    margin: 0 auto;
    text-align: left;
}
#punti-forza ul li {
    padding: 12px 0; /* Più padding */
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd; /* Bordo più visibile */
}
#punti-forza ul li:last-child { border-bottom: none; }
#punti-forza ul li strong {
    color: var(--nero-bit-black);
    min-width: 120px; /* Allinea leggermente le etichette */
    display: inline-block;
}

/* Chi Siamo Section */
#chi-siamo {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), /* Opzionale: Overlay scuro semi-trasparente */
        url('/temi/temabase/images/sfondo_mappa.jpg'); /* Sostituisci con il nome della tua immagine */
    background-size: cover; /* Copre l'intera area */
    background-position: center center; /* Centra l'immagine */
    background-attachment: fixed; /* Effetto parallax se lo desideri, altrimenti ometti o usa 'scroll' */
    padding: 60px 0; /* Mantieni o adatta il padding verticale */
    /* Se l'overlay scuro rende il titolo <h2> poco leggibile, potresti doverlo schiarire */
}
#chi-siamo p {
    max-width: 800px; /* Più largo per più testo */
    margin: 18px auto;
    line-height: 1.7; /* Leggermente pi interlinea */
    text-align: left; /* O center, a seconda del tuo stile */
}

/* Contatti Section */
#contatti {
    background-color: var(--light-color);
}

#contatti p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#contact-form { /* Stili per il form di contatto (se non usi classi globali per i form) */
    max-width: 650px;
    margin: 20px auto;
    padding: 25px 30px; /* Più padding */
    background: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    text-align: left;
}
#contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Peso medio */
    color: #495057;
    font-size: 0.9em;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
    width: 100%; /* Usa 100% e box-sizing: border-box; (già nel reset) */
    padding: 10px 12px;
    margin-bottom: 18px; /* Pi¹ spazio sotto */
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
#contact-form textarea { resize: vertical; }
#contact-form button[type="submit"].cta-button { /* Specifica se usi cta-button */
    width: 100%;
    margin-top: 10px;
}

.contact-details {
    margin-top: 30px;
    text-align: center; /* O left */
}
.contact-details p {
    font-size: 1.05rem; /* Leggermente pi¹ grande */
    margin: 8px 0;
}

/* Stili per messaggi di feedback form (esempio, adatta alle tue classi JS) */
p.form-feedback { /* Se il tuo JS crea un <p> con questa classe */
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
}
p.form-feedback.success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
p.form-feedback.error { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }


/* Stili specifici per gli input del form di registrazione cliente, se necessario */
/* (quelli in /clienti/registrazione_cliente.php) */
/* Ad esempio, se hanno una classe comune */
.registration-form .form-group input[type="text"] { /* ... */ }