/* Reset CSS per rimuovere margini e padding di default */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

@font-face {
  font-family: 'Copperplate Gothic Light';
  src: url('CopperplateGothicLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* Mobile responsive per larghezza max 768px */
@media screen and (max-width: 768px) {

  /* Chi Siamo e contenitori flessibili */
  .chi-siamo-image .container,
  .container-notaio,
  .contatti-mappa .container,
  .servizi-wrapper {
    flex-direction: column; /* Tutto in colonna */
    align-items: center;    /* Centra gli elementi */
    gap: 20px;              /* Spazio ridotto tra box */
  }

  /* Riduce padding */
  .chi-siamo-image,
  .preventivo-form,
  .contatti-mappa,
  .hero-servizi {
    padding: 20px 10px; /* meno spazio verticale e laterale */
  }

  /* Immagini scalabili */
  .chi-siamo-image .image-side img,
  .foto-destra img,
  .image-slider img {
    width: 100%;
    max-width: 100%;
    height: auto;  /* mantiene proporzioni senza overflow */
  }

  /* Testo leggibile */
  .chi-siamo-image p,
  .cv-centrale p,
  .notaio-layout p {
    font-size: 1rem;
    line-height: 1.4;
  }

  /* Riduce gap tra header e contenuto */
  header {
    padding: 10px 10px;
  }

  /* Rende dropdown menu più piccolo */
  header nav ul li a {
    font-size: 0.9rem;
  }

  /* Riduce box preventivo e spiegazione obbligatori */
  .moduli-side,
  .spiegazione-obbligatori {
    width: 100%;
    min-width: 0;
  }
}


.obbligatorio {

  color: rgb(179, 8, 8); /* Questo renderà l'asterisco rosso */

  font-weight: bold; /* Puoi anche renderlo in grassetto se preferisci */

}



/* Contenitore per i campi Nome e Cognome */

.campo.nome-cognome {

  display: flex;            /* Usa Flexbox per allineare i due campi */

  justify-content: space-between; /* Distanza equa tra Nome e Cognome */

  gap: 20px;               /* Distanza tra i due campi */

  margin-bottom: 20px;      /* Distanza tra questo e gli altri campi */

}



/* Contenitore per i singoli campi */

.sotto-campo {

  flex: 1;                 /* Ogni campo occuperà lo stesso spazio */

}



/* Etichetta e campo di input */

.campo label {

  font-weight: bold;

  margin-bottom: 5px;

  color: #000000;

}



/* Input per nome e cognome */

.campo input {

  width: 100%;             /* Fa sì che l'input riempi il contenitore */

  padding: 10px;

  border-radius: 5px;

  border: 1px solid #ccc;

  font-size: 1rem;

}



/* L'asterisco rosso */

.obbligatorio {

  color: red;

}



/* Header */

header {

  display: flex; /* Usa Flexbox per allineare gli elementi orizzontalmente */

  justify-content: space-between; /* Allinea logo e navigazione agli estremi */

  align-items: center; /* Centra verticalmente gli elementi */

  background-color:  #e6dccf; /* #aa8c69;  Beige chiaro */

  padding: 10px 20px; /* Aggiungi padding per un po' di spazio attorno */

  border-bottom: 2px solid #e6dccf; /* Linea blu sotto la barra beige */

}



header .logo {

  display: flex; /* Usa Flexbox per allineare logo e titolo */

  align-items: center; /* Allinea il logo e il titolo verticalmente */

}



header .logo img {

  width: 125px; /* Imposta la larghezza del logo */

  height: auto; /* Mantieni le proporzioni originali */

  margin-right: 10px; /* Distanza tra il logo e il titolo */

}



header h1 {

  font-size: 1.8rem; /* Imposta la dimensione del testo */

  color: #000000; /* Colore blu scuro per il titolo */

  font-family: 'Copperplate Gothic Light', sans-serif; /* Tipo di carattere */

}



header h1 .linea1 {

  font-weight: normal; /* Prima riga normale */

}



header h1 .linea2 {

  font-weight: bold; /* Seconda riga in grassetto */

  font-size: 2rem; /* Puoi aumentare leggermente la seconda riga se vuoi */

}



header nav ul {

  list-style: none; /* Rimuovi i punti elenco */

  display: flex; /* Mostra i link in orizzontale */

}



header nav ul li {

  margin-left: 20px; /* Spazio tra i link */

}



header nav ul li a {

  font-family: 'Copperplate Gothic Light', sans-serif; /* Tipo di carattere */

  text-decoration: none; /* Rimuovi la sottolineatura */

  color: #000000; /* Colore blu scuro per i link */

  font-size: 1rem;

}



header nav ul li a:hover {

  color: #ffffff; /* Colore blu chiaro quando il mouse passa sopra */

}



/* Dropdown Menu */

header nav ul li {

  position: relative; /* necessario per dropdown */

}



header nav ul li .dropdown-content {

  display: none;

  position: absolute;

  top: 100%; /* subito sotto il link principale */

  left: 0;

  background-color: #e6dccf; /* colore nero come header */

  min-width: 200px;

  z-index: 1000;

  border-radius: 5px;

  overflow: hidden;

}



header nav ul li .dropdown-content li a {

  display: block;

  padding: 10px 15px;

  color: white;

  text-decoration: none;

}



header nav ul li .dropdown-content li a:hover {

  background-color: #333333; /* leggero effetto hover */

}



/* Mostra dropdown al passaggio del mouse */

header nav ul li:hover .dropdown-content {

  display: block;

}



.preventivo-box {

  display: flex;           /* Flexbox per allineare i box in orizzontale */

  justify-content: center; /* Centra i box nella pagina */

  gap: 20px;               /* Spazio tra i box */

  flex-wrap: wrap;         /* Se lo schermo è piccolo, i box andranno a capo */

  margin: 50px 20px;

  background-image: url('/images/35BB7C6B-7F51-45FF-9CE5-62D0F74F7A78.jpg'); /* percorso della tua immagine */

 }





.preventivo-box a {

  background-color: #8c6a4f; /* d4c2a6 */ 

  color: white;

  padding: 40px;

  border-radius: 10px;

  text-align: center;

  width: 300px; /* larghezza del riquadro */

  cursor: pointer;

  transition: transform 0.2s, background-color 0.2s; /* effetto hover */

}





.preventivo-box .box h2 {

  font-size: 1.8rem;

  margin-bottom: 15px;

}



.preventivo-box .box p {

  font-size: 1rem;

  line-height: 1.4;

}



/* Sezione Chi Siamo con immagine affiancata */

.chi-siamo-image {

  padding: 50px 20px;

  background-color: #ffffff; /* sfondo bianco */

}



.chi-siamo-image .container {

  display: flex;

  align-items: center; /* centra verticalmente immagine e testo */

  gap: 40px;           /* spazio tra immagine e testo */

  max-width: 1200px;

  margin: 0 auto;

  flex-wrap: wrap;     /* rende responsive su schermi piccoli */

}



.chi-siamo-image .image-side {

  flex: 1 1 400px;     /* occupa circa metà larghezza, minimo 400px */

}



.chi-siamo-image .image-side img {

  width: 60%;

  height: auto;

  border-radius: 10px; /* angoli arrotondati */

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}



.chi-siamo-image .text-side {

  flex: 1 1 400px;     /* occupa metà larghezza minima 400px */

}



.chi-siamo-image h2 {

  font-size: 2rem;

  color: #000000;

  margin-bottom: 20px;

}



.chi-siamo-image p {

  font-size: 1.1rem;

  color: #000000;

  line-height: 1.6;

  margin-bottom: 15px; /* Spazio tra paragrafi */

}



.image-slider {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 600px; /* grandezza del box */

  margin: 0 auto;

  padding: 8px;

  border-radius: 12px;

  border: 1px solid #ffffff; /* box leggero visibile ma neutro */

}



.image-slider img {

  width: 100%;

  height: 600px;        /* altezza fissa del box */

  object-fit: contain;  /* l'immagine si adatta senza essere tagliata */

  border-radius: 8px;

}



.image-slider button {

  background: none;

  border: none;

  font-size: 30px;

  cursor: pointer;

  padding: 8px;

  user-select: none;

  opacity: 0.8;

}



.prev:hover, .next:hover {

  opacity: 0.5;

}





.hero p {

  text-align: left; /* Centra il testo */

  font-size: 1.0rem;

  line-height: 1.2; /* Spaziatura tra le righe */

  margin-bottom: 15px; /* Spazio tra paragrafi */



}



/* Hero Servizi */

.hero-servizi {

  text-align: center;

  /*background-color: #fffbf5; */

  background-image: url('/images/richiesta-servizio.jpg'); /* percorso della tua immagine */

  background-size: cover;       /* copre tutta la sezione */

  background-position: center;  /* centra l'immagine */

  background-repeat: no-repeat;

  padding: 150px 20px;

}



.hero-servizi h2 {

  font-size: 2rem;

  color: #000000;

  margin-bottom: 15px;

  color: rgb(0, 0, 0);

  font-family: 'Copperplate Gothic Light', sans-serif; /* Tipo di carattere */

}



.hero-servizi p {

  font-size: 1.1rem;

  color: #333;

  max-width: 700px;

  margin: 0 auto;

}



/* Modulo Preventivo */

.preventivo-form {

  font-family: 'Cambria', sans-serif;

  max-width: 500px;

  margin: 0 auto 50px auto;

  padding: 24px;

  scroll-margin-top: 800px; /* altezza header */

  background-color: #ffffff;

  border-radius: 10px;

  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);

}



.preventivo-form .campo {

  display: flex;

  flex-direction: column;

  margin-bottom: 20px;

}



.preventivo-form label {

  font-weight: bold;

  margin-bottom: 5px;

  color: #000000;

}



/* Stile uniforme per i campi input, textarea e select */

.preventivo-form input,

.preventivo-form textarea,

.preventivo-form select {

  width: 100%;             /* Fa sì che l'input riempi il contenitore */

  padding: 12px;           /* Padding interno per dare più spazio al testo */

  border: 1px solid #ccc;  /* Bordi chiari */

  border-radius: 5px;      /* Angoli arrotondati */

  font-size: 1rem;         /* Stessa dimensione del font */

  font-family: 'Cambria', sans-serif; /* Usa lo stesso font */

  background-color: #fff;  /* Bianco come colore di sfondo */

  box-sizing: border-box;  /* Per includere il padding nella larghezza */

}



/* Rende il select uguale agli altri input */

.preventivo-form select {

  -webkit-appearance: none; /* Rimuove la freccia su alcuni browser */

  -moz-appearance: none;    /* Rimuove la freccia su Firefox */

  appearance: none;         /* Rimuove la freccia */

  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"%3E%3Cpath d="M6 9L2 5h8L6 9z" fill="%23aaa" /%3E%3C/svg%3E'); /* Aggiungi una freccia personalizzata */

  background-position: right 10px center;

  background-repeat: no-repeat;

  background-size: 12px;

}



/* Se il menu select è attivo, aggiungiamo un bordo blu per focalizzarlo */

.preventivo-form select:focus {

  border-color: #004080;

  outline: none;

}





.preventivo-form button {

  background-color: #004080;

  color: white;

  border: none;

  padding: 15px;

  font-size: 1.1rem;

  border-radius: 5px;

  cursor: pointer;

  width: 100%;

  transition: background-color 0.3s;

}



.preventivo-form button:hover {

  background-color: #0066cc;

}



.servizi-wrapper {

  display: flex;

  justify-content: center;

  gap: 60px; /* aumenta la distanza tra colonna sinistra e modulo */

  max-width: 1200px;

  margin: 0 auto;

  padding: 40px 20px;

}



.spiegazione-obbligatori {

  width: 15%;

  min-width: 180px;

  margin-top: 40px;

  padding: 20px;

  background-color: #f7f2ed; /* beige chiarissimo elegante */

  border-left: 4px solid #8c6a4f; /* richiama il colore dei tuoi box servizi */

  border-radius: 8px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  font-family: 'Cambria', serif;

  color: #362012;

  line-height: 1.4;

}



.spiegazione-obbligatori h3 {

  font-size: 1.2rem;

  margin-bottom: 10px;

  font-weight: bold;

}



.spiegazione-obbligatori p {

  font-size: 0.95rem;

  margin-bottom: 8px;

}





.moduli-side {

  width: 75%;

}



.asterisco {

  color: rgb(179, 8, 8);

  font-weight: bold;

}



/* Contatti + Mappa affiancati */

.contatti-mappa {

  padding: 50px 20px;

  background-color: #f5f0e6;

 

}



.contatti-mappa .container {

  display: flex;       /* Flexbox attivo! */

  gap: 40px;           /* Spazio tra contatti e mappa */

  max-width: 1200px;

  margin: 0 auto;

  flex-wrap: wrap;     /* Importante: permette di andare a capo su mobile */

  align-items: flex-start; /* Allinea contatti e mappa in alto */

}



/* Lato contatti */

.contatti-mappa .contatti-side {

  flex: 1 1 200px;     /* Occupa metà spazio, minimo 400px */

}



.contatti-mappa .orari-side {

  flex: 1 1 100px;     /* Occupa metà spazio, minimo 400px */

}

/* Lato mappa */

.contatti-mappa .mappa-side {

  flex: 1 1 400px;     /* Occupa metà spazio */

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}



.articoli-container {

  display: flex;

  gap: 30px; /* Spazio tra colonna sinistra e box destro */

  margin: 40px 0;

}



.articoli-sinistra {

  flex: 2;

  display: flex;

  flex-direction: column;

  gap: 20px; /* Spazio uniforme tra le due card */

}



.articoli-destra {

  flex: 1;

  display: flex;

  align-items: center; /* centra verticalmente il box rispetto alle card */

  justify-content: center; /* centra orizzontalmente nella colonna */

}



/* Box marrone cliccabile */

.box-marrone {

  display: block;

  width: 100%; /* riempie la colonna destra */

  max-width: 250px; /* dimensione massima del box */

  background-color: #8B5E3C; /* marrone */

  color: #fff;

  text-decoration: none;

  padding: 25px;

  border-radius: 10px;

  text-align: center;

  transition: transform 0.2s, box-shadow 0.2s;

}



.box-marrone:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(0,0,0,0.25);

}



.box-marrone h3 {

  margin: 0 0 10px 0;

  font-size: 1.3rem;

}



.box-marrone p {

  margin: 0;

  font-size: 1rem;

}



.notaio-layout .container-notaio {

  display: flex;

  gap: 20px;

  margin: 40px 0;

  flex-wrap: wrap;

}



/* Riduce la colonna sinistra */

.articoli-sinistra {

  flex: 0.7; /* prima era 1, ora è più stretta */

  display: flex;

  flex-direction: column;

  gap: 20px;

}



/* Rende le card più piccole */

.articoli-sinistra .articolo-card {

  transform: scale(0.85); /* rimpicciolisce visivamente il box */

  transform-origin: left top; /* mantiene l’allineamento a sinistra */

}



/* Riduce leggermente testo e titoli dentro le card */

.articoli-sinistra .card-content h3 {

  font-size: 1rem;

  margin: 8px;

}



.articoli-sinistra .card-content p {

  font-size: 0.85rem;

  margin: 0 8px 8px 8px;

}



.articoli-sinistra .card-content img {

 width: 100%; /* opzionale, la rimpicciolisce mantenendo il centro */

  max-width: 180px;

}



.cv-centrale {

  flex: 2 1 20px;

}



.cv-centrale h1 {

  margin-bottom: 20px;

  color: #000000;

  font-size: 2.2rem;

  font-family: 'Copperplate Gothic Light', sans-serif; /* Tipo di carattere */

}



.cv-centrale p {

  line-height: 1.8;

  margin-bottom: 20px;

  color: #141313;

}



.foto-destra {

  flex: 1;

  display: flex;

  align-items: start;

  justify-content: center;

}



.foto-destra img {

  width: 100%;

  max-width: 400px;

  border-radius: 3px;

}



.articolo-card {

  display: block;

  text-decoration: none;

  color: inherit;

  border-radius: 10px;

  border: 1px solid #ddd;

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s;

}



.articolo-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

.card-content {

  text-align: center; /* centra tutto il contenuto inline della card */

}



.card-content img {

  display: block;

  margin: 0 auto; /* centra l’immagine */

}



.card-content h3 {

  margin: 10px;

  font-size: 1.2rem;

  color: #333;

}



.card-content p {

  margin: 0 10px 10px 10px;

  font-size: 0.95rem;

  color: #555;

}



@media screen and (max-width: 992px) {

  .container-notaio {

    flex-direction: column;

    gap: 30px;

  }

}



.privacy-check {

  display: flex;

  justify-content: center; /* centra il blocco nella pagina */

  margin-top: 1px;

  margin-bottom: 1px;

}



.privacy-check label {

  display: inline-flex;       /* inline invece di flex, così non occupa tutta la larghezza */

  align-items: center;        /* allinea verticalmente */

  gap: 8px;                   /* distanza tra checkbox e testo */

  cursor: pointer;

  flex-wrap: nowrap;           /* impedisce al testo di andare a capo */

  font-size: 16px;

}



.privacy-check input[type="checkbox"] {

  width: 18px;                 /* dimensione reale del quadratino */

  height: 18px;

  margin: 0;

  transform: none;             /* togli eventuali scale precedenti */

}



.obbligatorio {

  color: red;

}



.privacy-content {

  max-width: 800px;        /* larghezza massima del testo */

  margin: 0 auto;          /* centra il contenitore orizzontalmente */

  line-height: 1.8;        /* interlinea più leggibile */

  padding: 20px;           /* un po’ di spazio interno */

}

@media screen and (max-width: 768px) {
    header {
        flex-direction: column; /* Logo sopra, nav sotto */
        align-items: center;    /* Centra tutto */
        padding: 10px 15px;     /* Riduci padding */
    }

    header .logo {
        flex-direction: column; /* Logo e testo uno sopra l’altro */
        align-items: center;
        margin-bottom: 10px;    /* Spazio tra logo e nav */
    }

    header .logo h1 {
        text-align: center;     /* Centra testo */
        font-size: 1.4rem;      /* Riduci dimensione titolo */
    }

    header .logo h1 .linea2 {
        font-size: 1.6rem;      /* Riduci seconda riga */
    }

    header nav ul {
        flex-direction: column; /* Menu verticale su mobile */
        align-items: center;
        width: 100%;
    }

    header nav ul li {
        margin-left: 0;         /* Rimuove margine orizzontale */
        margin-bottom: 8px;     /* Spazio tra link */
    }

    header nav ul li a {
        font-size: 1rem;        /* Eventualmente riduci font */
        white-space: nowrap;    /* Evita che il testo vada a capo */
    }

    header nav ul li .dropdown-content {
        position: static;       /* Non assoluto più, va sotto link */
        min-width: 100%;        /* Occupa tutta la larghezza */
    }

    header nav ul li:hover .dropdown-content {
        display: block;         /* Dropdown visibile */
    }
}




/* Footer */

footer {

  text-align: center; /* Centra il testo nel footer */

  padding: 20px;

  background-color: #362012;

  color: white;

  line-height: 1.5;

}