:root { --primary-color: #8da18d; }
body { font-family: 'Inter', sans-serif; color: #2d3748; }

/* Stile specifico per il logo */
.logo {
    font-size: 1.8rem;           /* Dimensione del testo */
    font-weight: 800;            /* Più marcato/grassetto */
    color: #2d3748;              /* Colore antracite */
    text-transform: uppercase;   /* Rende il testo tutto maiuscolo */
    letter-spacing: 2px;         /* Distanza tra le lettere per eleganza */
    text-decoration: none !important; /* Forza l'assenza di sottolineatura */
    transition: color 0.3s ease;
}

/* Effetto al passaggio del mouse sul logo (opzionale) */
.logo:hover {
    color: #8da18d;              /* Diventa verde al passaggio del mouse */
}

/* Menu Navigazione */
/* Layout Header */
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.main-header {
    position: fixed;        /* Blocca l'header in alto */
    top: 0;
    left: 0;
    width: 100%;            /* Si estende per tutta la larghezza */
    background-color: white; /* Sfondo bianco per coprire il testo quando scorri */
    z-index: 1000;          /* Assicura che stia sopra ogni altro elemento */
    padding: 30px 40px;     /* Aumenta il padding superiore (30px) per staccarlo dai preferiti */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Opzionale: aggiunge una leggera ombra per staccarlo dal contenuto */
}

/* Dato che l'header è "fixed", occupa spazio sopra, quindi spingiamo il resto del sito in giù */
body {
    padding-top: 100px; /* Regola questo valore in base all'altezza effettiva del tuo header */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-menu { 
    display: flex; 
    gap: 30px; /* Spazio tra i link */
    list-style: none; 
}

/* Link Menu */
.nav-link { 
    color: #2d3748; 
    text-decoration: none !important; /* Forza l'assenza di sottolineatura */
    font-weight: 500; 
    padding-bottom: 5px; 
    border-bottom: 2px solid transparent; /* Invisibile di base */
    transition: all 0.3s ease; 
}

/* Stato Hover e Acptive (Verde) */
.nav-link:hover, 
.nav-link.active { 
    color: #8da18d !important; /* Verde salvia */
    border-bottom: 2px solid #8da18d !important; 
}

/* Form e Footer */
/* Sfondo a tutta larghezza */
.footer-section {
    background-color: #f9f9f9; /* Colore sfondo */
    padding: 80px 0; /* Verticale 80px, Orizzontale 0 per non avere margini laterali */
}

/* Allineamento interno al container */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* Margini di sicurezza del sito */
    display: flex;
    align-items: center; /* Centratura verticale */
    justify-content: space-between; /* Spazio tra info e form */
    gap: 40px;
}

/* Stile Form e Area di testo */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1; /* Il form occupa lo spazio rimanente */
}

.footer-form input, 
.footer-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
}

/* Centratura verticale delle info contatti */
.footer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobile: impila tutto */
@media (max-width: 768px) {
    .footer-container { flex-direction: column; text-align: center; }
}
/* 1. Stile base del bottone */
.btn-primary {
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 15px 30px;
    background-color: #8da18d; /* Usa var(--primary-color) se l'hai definita nel root */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer; /* Mostra la "manina" quando si passa sopra */
    font-weight: 600; /* Rende il testo leggermente più visibile */
    
    /* Il segreto per renderlo professionale: un'animazione fluida di 0.3 secondi */
    transition: all 0.3s ease; 
}

/* 2. Effetto quando passi sopra col mouse (HOVER) */
.btn-primary:hover {
    background-color: #728572; /* Un verde leggermente più scuro */
    transform: translateY(-4px); /* Solleva il bottone di 4 pixel verso l'alto */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Crea una bella ombra sotto */
}

/* 3. Effetto quando fai click sul bottone (ACTIVE) */
.btn-primary:active {
    transform: translateY(1px); /* Simula la pressione abbassando il tasto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Riduce l'ombra per il "click" */
}

/* Layout generale */
.hero-container, .trust-container { display: flex; align-items: center; gap: 40px; padding: 50px 0; }
.hero-image img, .trust-image img { width: 100%; border-radius: 12px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { padding: 30px;border-radius: 15px; background-color: #f4f4f4; text-align: center; }
/* --- Sistemazione del testo nel blocco chi siamo */
.trust-container {
    display: flex;
    flex-direction: column; /*mette gli elementi uno sotto l'altro */
    justify-content: center;
}

.trust-content h2 { 
    margin-bottom: 15px; /*spazio tra il titolo e il paragrafo */

}
/* --- OTTIMIZZAZIONE RESPONSIVE E RESET --- */

/* Reset base per tutte le immagini del sito */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Regole specifiche per dispositivi mobili (tablet e smartphone) */
@media (max-width: 768px) {
  
  /* Aggiunge spazio laterale per far respirare i testi */
  section {
    padding: 40px 20px;
  }

  /* Impila i servizi uno sotto l'altro */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}
/* 1. RESET E REGOLE GENERALI */
* { box-sizing: border-box; margin: 0; padding: 0; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. STILI DELLE SEZIONI (Layout base) */
section {
  padding: 80px 40px; 
}

.chi-siamo-container {
  display: flex;
  gap: 50px; 
  align-items: center;
}

/* 3. MEDIA QUERY (Da mettere SEMPRE in fondo) */
/* Queste regole sovrascrivono quelle sopra solo quando lo schermo è piccolo */

@media (max-width: 768px) {
  /* Spaziature ridotte per mobile */
  section {
    padding: 60px 20px; 
  }

  /* Impila i servizi in colonna */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* Impila foto e testo in 'Chi siamo' */
  .chi-siamo-container {
    flex-direction: column; 
    gap: 30px; 
  }
}
section {
  padding: 80px 40px; /* 80px sopra/sotto per separare le sezioni, 40px ai lati */
}

/* Su mobile stringiamo leggermente i lati ma manteniamo la protezione */
@media (max-width: 768px) {
  section {
    padding: 60px 20px; /* 20px di sicurezza assoluta dai bordi del telefono */
  }
}
.chi-siamo-container {
  display: flex;
  gap: 50px; /* Crea un corridoio di 50 pixel di vuoto assoluto tra foto e testo */
  align-items: center;
}

@media (max-width: 768px) {
  .chi-siamo-container {
    flex-direction: column; /* Mette la foto sopra e il testo sotto sul telefono */
    gap: 30px; /* Spazio verticale tra foto e testo */
  }
}
h2 {
  margin-bottom: 25px; /* Spinge la descrizione più in basso */
}
h3 {
  margin-bottom: 15px;
}
.container {
    max-width: 1200px; /* Larghezza massima del sito */
    margin: 0 auto;    /* Centra tutto il sito */
    padding: 0 40px;   /* Questo crea il "margine" laterale che volevi */
}