/* Variabili CSS */
:root {
  --link-spacing: 54px; /* Modifica questo valore per cambiare lo spazio tra i link */
  --spacingCol: 40px; /* Modifica questo valore per cambiare lo spazio tra le colonne */
  --mobile-padding-x: 15px; /* PARAMETRO MODIFICABILE: Padding laterale per mobile (5px) */
}

/* Reset e stili base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* FONT */

@font-face {
  font-family: 'Satoshi';
  src: url('font/Satoshi-light.woff2') format('woff2');
  /*src: url('font/Satoshi-medium.woff2') format('woff2');*/
  /*src: url('font/Satoshi-regular.woff2') format('woff2');*/
  font-weight: normal;
  font-style: normal;
}

body {
  font-family:'Satoshi';
  font: 'Satoshi-medium';
  color: #000000;
  max-width: 1440px; /* Mantenuto per desktop */
  margin: 0 auto;
  padding: 0 100px; /* Mantenuto per desktop */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0; /* Mantenuto per desktop */
  border-bottom: 1px solid #ccc;
  font-size: 20px;
  color: #000000;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

nav {
  flex: 1;
  text-align: center;
  color: #000000;
}

nav a {
  text-decoration: none;
  color: #000000;
  margin: 0 calc(var(--link-spacing) / 2);
  display: inline-block;
}

nav a:hover {
	color: #000000;
  text-decoration: underline;
}

/* Stile per mobile (max-width: 768px) */
@media (max-width: 768px) {
  body {
    max-width: 100%; /* Occupa tutta la larghezza disponibile */
    padding: 0 var(--mobile-padding-x); /* Applica il padding laterale */
    overflow-x: hidden; /* Previene lo scroll orizzontale */
	color: #000000;
  }

  header {
    flex-direction: column;
    padding: 15px var(--mobile-padding-x); /* Usa la variabile per il padding */
    width: 100%; /* Assicura che l'header occupi tutta la larghezza */
	color: #000000;
  }

  .logo {
    margin-bottom: 15px;
  }

  nav {
    width: 100%;
	color: #000000;
  }

  nav a {
    display: block;
    margin: 10px 0;
	color: #000000;
  }
}

main {
  flex: 1;
  padding: 20px 0; /* Mantenuto per desktop */
  text-align: left;
  color: #000000;
}
/* Stile per mobile */
@media (max-width: 768px) {
  main {
    flex-direction: column;
    padding: 5px 0; /* Rimuovi il padding laterale qui, lo gestisce il body */
    width: 100%; /* Assicura che main occupi tutta la larghezza */
	color: #000000;
  }
}

.contenitore-immagine {
  position: relative;
  max-width: 1440px; /* Mantenuto per desktop */
  margin: 0 auto;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 40px; /* Mantenuto per desktop */
  transform: translateY(-50%);
  background-color: transparent;
  padding: 10px; /* Mantenuto per desktop */
  text-align: left;
  max-width: 671px; /* Mantenuto per desktop */
  font-size: 40px;
}

.overlay-content h2,
.overlay-content p {
  color: black;
  margin: 0 0 10px 0;
   font-size: 40px;
}

.cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color: black;
  border: 1px solid black;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 25px;
}

.cta-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Stile per mobile */
@media (max-width: 768px) {
  .contenitore-immagine {
    display: flex;
    flex-direction: column;
    width: 100%; /* Occupa tutta la larghezza */
    margin: 0; /* Rimuovi margini auto */
  }

  .hero-image {
    width: 100%;
    height: auto;
    order: 1;
  }

  .overlay-content {
    position: static; /* Rimuovi posizionamento assoluto */
    transform: none;
    padding: 15px 0; /* Rimuovi padding laterale, lo gestisce il body */
    text-align: center;
    max-width: 100%; /* Occupa tutta la larghezza */
    font-size: 40px;
    order: 2;
    left: auto; /* Reset left */
  }

  .overlay-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .overlay-content p {
    /*font-size: 1rem;*/
	font-size: 25px;
    margin-bottom: 15px;
  }

  .cta-button {
    display: block;
    margin: 0 auto 20px auto;
    /*font-size: 1rem;*/
	font-size: 25px;
    padding: 10px 20px;
    max-width: 200px;
    order: 3;
  }
}

.titoletto {
  src: url('font/Satoshi-medium.woff2') format('woff2');
  font-family:'Satoshi';
  font: 'Satoshi-medium';
  font-size: 50px;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Media Query per Mobile */
@media (max-width: 768px) {
  .titoletto {
    font-size: 25px;
    padding: 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
  }
}

/* Contenitore principale */
.contenitore.carosello {
  max-width: 1440px; /* Mantenuto per desktop */
  margin: 0 auto;
  display: flex;
  gap: var(--spacingCol);
  flex-wrap: wrap;
  align-items: center;
}

.colonna-sinistra,
.colonna-destra {
  width: calc(50% - var(--spacingCol) / 2);
}

/* Carosello Immagini */
.carosello-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.slide {
  width: 100%;
  height: auto;
  display: none;
  border-radius: 8px;
}

.slide.active {
  display: block;
}

/* Freccia in sovraimpressione */
.freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.freccia-sx {
  left: 10px;
}

.freccia-dx {
  right: 10px;
}

/* Colonna destra - Testo */
.colonna-destra p {
  font-size: 17px;
  line-height: 1.5;
  /*color: #333;*/
  color: #000000;
}

/* Media Query per Mobile */
@media (max-width: 768px) {
  .contenitore.carosello {
    flex-direction: column;
    gap: 20px;
    padding: 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
    margin: 0; /* Rimuovi margini auto */
  }

  .colonna-sinistra,
  .colonna-destra {
    width: 100%; /* Occupano tutta la larghezza disponibile */
  }
}

/* ICONE CENTRO ASSISTENZA*/
/* Contenitore principale */
#BloccoImmagini {
  max-width: 1440px;
  margin: 0 auto;
  /*padding: 20px;*/
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

/* Singola immagine */
.immagine-personalizzata {
  border: none; /* Rimuove eventuali bordi */
  display: block;
  width: calc(25% - 15px); /* Distribuzione su 4 colonne con spazio */
  height: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Media Query Mobile */
@media (max-width: 768px) {
  #BloccoImmagini {
    flex-direction: column;
    align-items: flex-start;
  }

  .immagine-personalizzata {
    width: 100%; /* Ogni immagine occupa tutta la larghezza */
    max-width: 400px; /* Limita la dimensione su schermi piccoli, se necessario */
  }
}

.img1 {
  width: 60px;
}

.img2 {
  width: 350px;
}

.img3 {
  width: 250px;
}

.img4 {
  width: 180px;
}


/* Media Query Mobile */
@media (max-width: 768px) {
  #BloccoImmagini {
    flex-direction: column;
    align-items: flex-start; /* Allineamento a sinistra */
    gap: 30px; /* Più spazio tra gli elementi */
    padding: 0 15px; /* Padding ridotto su mobile */
  }

  .immagine-personalizzata {
    width: 100%;
    max-width: 100%; /* Occupa tutta la larghezza disponibile */
  }

  /* Regolazione immagini per mobile */
  .img1, .img2, .img3, .img4 {
    max-width: 100%; /* Adatta alla larghezza del contenitore */
    height: auto;
  }

  /* Dimensioni specifiche per mobile */
  .img1 { width: 50px; } /* Ridimensionata per mobile */
  .img2 { width: 100%; max-width: 250px; }
  .img3 { width: 100%; max-width: 250px; }
  .img4 { width: 100%; max-width: 180px; }
}

/* Ottimizzazione per schermi molto piccoli */
@media (max-width: 480px) {
  .img1 { width: 40px; }
  .img2 { max-width: 250px; }
  .img3 { max-width: 220px; }
  .img4 { max-width: 150px; }
}

/* 3 PULSANTI */
.TrePulsanti {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1 2%; /* Mantenuto per desktop */
  gap: 5%;
  box-sizing: border-box;
}

.TrePulsanti a {
  flex: 1;
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 20px 15px;
  /*font-size: 1rem;*/
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  box-sizing: border-box;
}

.TrePulsanti a:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 17px;
}

@media (max-width: 768px) {
  .TrePulsanti {
    flex-direction: column;
    gap: 15px;
    padding: 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
    margin: 0; /* Rimuovi margini auto */
	 font-size: 17px;
  }

  .TrePulsanti a {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
	 font-size: 17px;
  }
}

/* TABELLONE SERVIZI */
/* Contenitore principale */
#TabelloneServizi {
  max-width: 1440px; /* Mantenuto per desktop */
  margin: 0 auto;
   font-size: 17px;
}

/* Righe di blocchi */
.riga-superiore,
.riga-inferiore {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 40px;
}

/* Singolo blocco */
.servizio-blocco {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  min-width: 280px;
  max-width: calc(33.333% - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Icone */
.servizio-icona1 {
  width: 83px;
  height: 83px;
  margin-bottom: 10px;
}
.servizio-icona2 {
  width: 79px;
  height: 83px;
  margin-bottom: 10px;
}
.servizio-icona3 {
  width: 78px;
  height: 83px;
  margin-bottom: 10px;
}
.servizio-icona4 {
  width: 83px;
  height: 83px;
  margin-bottom: 10px;
}
.servizio-icona5 {
  width: 79px;
  height: 83px;
  margin-bottom: 10px;
}
.servizio-icona6 {
  width: 74px;
  height: 83px;
  margin-bottom: 10px;
}

/* Titoli */
.servizio-titolo {
  font-size: 25px;
  margin: 0 0 10px 0;
  color: black;
  transition: font-size 0.3s ease;
}

/* Testo Descrizione */
.servizio-descrizione {
  font-size: 17px;
  margin: 0;
  color: black;
}

@media (max-width: 768px) {
  .riga-superiore,
  .riga-inferiore {
    flex-direction: column;
    align-items: stretch;
    padding: 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
	 font-size: 17px;
  }

  .servizio-blocco {
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
	 font-size: 17px;
  }

  /* Ridimensiona icona su mobile */
  .servizio-icona {
    width: 40px;
  }

  .servizio-titolo {
    /*font-size: clamp(0.9rem, 4vw, 1.1rem);*/
	 font-size: 25px;
    margin-top: 15px;
    width: 100%;
    padding: 0 10px;
    text-align: left;
  }

  .servizio-descrizione {
    font-size: 17px;
  }
}

/* PULSANTE SINGOLO */
.UNOPulsante {
  display: inline-block;
  margin-left: 1 2%; /* Mantenuto per desktop */
   font-size: 17px;
}

.UNOPulsante a {
  display: inline-block;
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 15px 20px;
  /*font-size: 1rem;*/
  font-size: 17px;
  font-weight: 200;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  min-width: min-content;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

.UNOPulsante a:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   font-size: 17px;
}

/* Versione desktop */
@media (min-width: 769px) {
  .UNOPulsante a {
    padding: 20px 25px;
    /*font-size: 1.1rem;*/
	/*font-size: 1.2rem;*/
	 font-size: 17px;
    
	width: auto;
  }
}

/* Versione mobile */
@media (max-width: 768px) {
  .UNOPulsante {
    margin-left: 0; /* Rimuovi margine fisso, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
    display: block;
	 font-size: 17px;
  }

  .UNOPulsante a {
    width: 100%; /* Il pulsante occupa tutta la larghezza disponibile */
    padding: 12px 15px;
    /*font-size: 0.9rem;*/
	 font-size: 17px;
  }
}

/* COLONNE DATI E MAPPA */
.DATI_MAPPA {
  display: flex;
  justify-content: space-between;
  margin: 20px 20px 20px 0; /* Mantenuto per desktop */
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
}

.colonna {
  flex: 1;
  min-width: 0;
}

.colonna.mappa {
  min-width: 500px; /* Mantenuto per desktop */
  height: 386px; /* Mantenuto per desktop */
  position: relative;
}

.mappa-container {
  width: 100%;
  height: 100%;
}

.mappa-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.tabella-info {
  width: 100%;
  border-collapse: collapse;
}

.tabella-info td {
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.tabella-info tr:last-child td {
  border-bottom: none;
}

.tabella-info td:first-child {
  font-weight: normal;
  width: 40%;
}

@media (max-width: 768px) {
  .DATI_MAPPA {
    flex-direction: column;
    gap: 15px;
    margin: 20px 0; /* Rimuovi margini laterali, lo gestisce il body */
    padding: 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che occupi tutta la larghezza */
  }

  .colonna {
    width: 100%;
  }

  .colonna.mappa {
    min-width: 100%;
    height: 300px;
  }

  .tabella-info,
  .tabella-info tbody,
  .tabella-info tr,
  .tabella-info td {
    display: block;
    width: 100%;
  }

  .tabella-info td {
    padding: 8px 0;
    border-bottom: none;
  }

  .tabella-info td:first-child {
    font-weight: normal;
    padding-top: 12px;
  }

  .tabella-info td:last-child {
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
  }

  .tabella-info tr:last-child td:last-child {
    border-bottom: none;
  }
}

/* FOOTER*/

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 0; /* Mantenuto per desktop */
  border-top: 1px solid #ccc;
}

.footer-col {
  flex: 1 1 calc(16.666% - 10px); /* Mantenuto per desktop */
  min-width: 150px; /* Mantenuto per desktop */
  margin-bottom: 20px;
}

.footer-col h4 {
  margin-bottom: 10px;
  text-align: left;
  font-size: 14px;
}

.footer-logo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-col a{
  text-decoration: none;
  /*color: inherit;*/
   color: black;
  transition: text-decoration 0.3s ease;
  display: inline-block;
  text-align: left;
}

.footer-col a:hover {
  text-decoration: underline;
}

/* Nuova riga in fondo al footer */
.footer-bottom-row {
  max-width: 1440px; /* Mantenuto per desktop */
  margin: 20px auto 0;
  text-align: center;
}

.footer-bottom-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.footer-bottom-links a {
}

.footer-bottom-links a:hover {
  text-decoration: underline;
}

.footer-bottom-links span:not(:nth-child(2n)) {
}

/* Media Query per Mobile - Impila verticalmente */
@media (max-width: 768px) {
  footer {
    flex-direction: column; /* Incolonna le colonne del footer */
    align-items: flex-start; /* Allinea tutto a sinistra */
    padding: 20px 0; /* Rimuovi padding laterale, lo gestisce il body */
    width: 100%; /* Assicura che il footer occupi tutta la larghezza */
  }

  .footer-col {
    flex: 0 0 100%; /* Ogni colonna occupa il 100% della larghezza */
    min-width: auto; /* Rimuove il min-width fisso */
    margin-bottom: 20px; /* Spazio tra le colonne incolonnate */
    text-align: left; /* Assicura l'allineamento a sinistra per i contenuti della colonna */
  }

  .footer-col h4,
  .footer-col a,
  .footer-logo {
    text-align: left; /* Forza l'allineamento a sinistra per titoli e link */
    width: 100%; /* Assicura che occupino tutta la larghezza disponibile */
    display: block; /* Rende i link a blocchi per un migliore allineamento */
  }

  .footer-bottom-row {
    max-width: 100%; /* Occupa tutta la larghezza */
    margin: 20px 0 0 0; /* Rimuovi margini auto */
    text-align: left; /* Allinea a sinistra */
  }

  .footer-bottom-links {
    flex-direction: column;
    align-items: flex-start; /* Allinea a sinistra anche i link del footer bottom */
    text-align: left; /* Allinea a sinistra il testo */
  }

  .footer-bottom-links a,
  .footer-bottom-links span {
    text-align: left; /* Allinea a sinistra */
    width: 100%;
    display: block;
  }

  /* Nascondi le barre verticali su mobile se preferisci */
  .footer-bottom-links span:nth-child(2),
  .footer-bottom-links span:nth-child(4) {
    display: none;
  }
}

/* Stili del pulsante torna su */
.torna-su {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

.torna-su.visibile {
  opacity: 1;
  visibility: visible;
}

/* Stile della freccia */
.torna-su svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  position: relative;
  top: 2px;
}

/* Stili del banner cookies - versione migliorata e responsive */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2c3e50;
  color: #ffffff;
  padding: 15px 20px; /* Mantenuto per desktop */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 100%;
  box-sizing: border-box;
}

.cookie-banner.nascosto {
  display: none;
}

.cookie-banner p {
  margin: 0;
  padding-right: 15px;
  flex: 1;
}

.cookie-banner .bottone-ok {
  background-color: #ffffff;
  color: #2c3e50;
  border: none;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

.cookie-banner .bottone-ok:hover {
  background-color: #ecf0f1;
}

/* Regole responsive per schermi più piccoli */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    padding: 15px 0; /* Rimuovi padding laterale, lo gestisce il body */
  }

  .cookie-banner p {
    padding-right: 0;
    padding-bottom: 15px;
    text-align: center;
    font-size: 16px; /*FONT size mobile */
  }

  .cookie-banner .bottone-ok {
    width: 100%;
    padding: 12px 0;
  }
}










/* Wrapper immagine con overlay */
.image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay trasparente che copre l'immagine */
.image-wrapper .image-wrapper-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 10;
  pointer-events: none; /* Cambia in "none" per bloccare completamente il click */
  cursor: default;
  user-select: none;
}
/*bloccare completamente il click sull'immagine  */
.image-wrapper-overlay {
  pointer-events: none;
}






/* FORM */
        .contenitore_form {
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            color: #333;
        }
        
        .contenitore_form h1 {
            text-align: center;
            color: #0066cc;
        }
        
        .contenitore_form .form-group {
            margin-bottom: 15px;
        }
        
        .contenitore_form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .contenitore_form input[type="text"],
        .contenitore_form input[type="email"],
        .contenitore_form input[type="tel"],
        .contenitore_form textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .contenitore_form textarea {
            height: 120px;
        }
        
        .contenitore_form .captcha {
            background-color: #eee;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            text-align: center;
        }
        
        .contenitore_form .captcha img {
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }
        
        .contenitore_form .captcha input[type="text"] {
            font-size: 17px;
            padding: 10px;
            width: 120px;
            text-align: center;
            letter-spacing: 4px;
        }
        
        .contenitore_form button {
            background-color: #0066cc;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .contenitore_form button:hover {
            background-color: #0055aa;
        }
        
        .contenitore_form .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
        
        .contenitore_form .required:after {
            content: " *";
            color: red;
        }