/* Stili di base */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: regular;
  color: #333;
  line-height: 1.6;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Classe che rende visibile l'elemento */
.slide-up.visible {
transform: translateY(0); /* Riporta l'elemento nella posizione originale */
opacity: 1; /* Rende l'elemento visibile */
}


/* NAVBAR BASE */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: black !important;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.nav-links li a:hover {
  color: #868686;
}

.nav-links li a.active {
  color: #ffffff;
}

.nav-phone {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

/* MENU BURGER */
.menu-toggle {
  display: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
}

/* MEDIA QUERY per MOBILE */
@media (max-width: 768px) {
  .nav-links {
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      background: #000;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      max-height: 0;  /* Usiamo max-height per evitare bug di Safari */
      overflow: hidden;
      transition: max-height 0.3s ease-out; /* Migliore animazione */
      z-index: 1000;
  }

  /* Quando il menu è aperto */
  .nav-links.open {
      max-height: 50vh; /* Altezza massima invece di height fisso */
      overflow-y: auto;
      margin-top: 20px;
  }

  .nav-links li {
      display: block;
  }

  .nav-links li a {
      font-size: 18px;
      padding: 10px;
      display: block;
      text-align: center;
  }

  /* Mostra il bottone del menu */
  .menu-toggle {
      display: block;
  }
  
  /* Evita lo scroll della pagina quando il menu è aperto */
  body.menu-open {
      overflow: hidden;
      position: relative;
  }
}

/* Media query per dispositivi mobili (max-width: 768px) */
@media (max-width: 768px) {
  .nav-phone {
    font-size: 14px; /* Riduce la dimensione del testo */
    text-align: center; /* Centra il testo */
    padding: 10px 0; /* Aggiunge spazio sopra e sotto il numero */
  }

  .nav-phone span {
    display: block; /* Forza il numero su una nuova linea, se necessario */
    word-wrap: break-word; /* Impedisce che il numero di telefono fuoriesca dallo schermo */
  }
}

/* Aggiustamenti per iPhone X e successivi (notch) */
@media (max-width: 768px) and (orientation: portrait) {
  .nav-links {
      padding-top: env(safe-area-inset-top);
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .nav-links {
      padding-top: env(safe-area-inset-top);
  }
}







/* Hero Section - Sfondo */
.hero {
  position: relative; /* Permette di posizionare il testo sopra l'immagine */
  height: 100vh; /* Altezza della sezione: 100% della viewport */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
  url('img/low-angle-male-osteopathic-therapist-checking-female-patient-s-leg-movement.jpg');
  background-size: cover; /* La immagine copre tutta l'area */
  background-position: center; /* Centra l'immagine */
  background-repeat: no-repeat; /* Evita la ripetizione */
  display: flex; /* Abilita il flexbox */
  flex-direction: column; /* Disposizione verticale */
  justify-content: center; /* Centra verticalmente il contenuto */
  align-items: center; /* Centra orizzontalmente il contenuto */
  text-align: center; /* Testo centrato */
  color: #fff; /* Colore del testo */
  padding: 0 20px; /* Margine interno per evitare bordi tagliati */
}

.hero-text h1 {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2;
}

.hero-text h2 {
  font-size: 2rem;
  font-weight: normal;
  margin-top: 10px;
}

/* Ottimizzazione per Tablet e Mobile */
@media (max-width: 1024px) { /* Tablet */
  .hero-text h1 {
      font-size: 3.5rem;
  }
  .hero-text h2 {
      font-size: 1.8rem;
  }
}

@media (max-width: 768px) { /* Smartphone */
  .hero-text h1 {
      font-size: 2.5rem;
      line-height: 1.1;
  }
  .hero-text h2 {
      font-size: 1.5rem;
      margin-top: 8px;
  }
}

@media (max-width: 480px) { /* iPhone piccoli (SE, 5s) */
  .hero-text h1 {
      font-size: 2rem;
  }
  .hero-text h2 {
      font-size: 1.3rem;
  }
}

/* Aggiustamenti per contenuto della pagina */
body {
  margin-top: 60px; /* Meglio usare margin-top se la navbar è fixed */
}

/* Stile Mobile-Friendly */
@media (max-width: 768px) {
  nav ul {
      display: flex;
      flex-direction: column; /* Disposizione verticale per schermi piccoli */
      align-items: center; /* Centra gli elementi nel menu */
      gap: 15px;
  }
}


/* Sezione About nella Home */
.about-home {
  background-color: #f4f4f4; /* Colore di sfondo */
  padding: 40px 5%;
  text-align: left; /* Allineamento a sinistra */
}

.about-home-container {
  display: flex; /* Usa Flexbox per disporre gli elementi affiancati */
  justify-content: center;
  align-items: center;
  gap: 30px; /* Spazio tra l'immagine e il box */
}

/* Sezione About */
.about {
  display: flex; /* Usa flexbox per disporre gli elementi orizzontalmente */
  justify-content: flex-start; /* Allinea gli elementi a sinistra */
  align-items: flex-start; /* Allinea gli elementi in alto */
  padding: 50px 20px;
  background-color: #f4f4f4;
  flex-wrap: wrap; /* Permette ai contenuti di adattarsi su schermi più piccoli */
}
 .about-home-image{
  height: 500px;
 }

/* Testo accanto all'immagine */
.about-text {
  max-width: 700px; /* Imposta una larghezza massima per il testo */
  line-height: 1.6;
}


.about-home-text {
  background-color: #000; /* Riquadro nero */
  color: #fff; /* Testo bianco */
  padding: 30px;
  width: 60%; /* Larghezza del box */
  max-width: 800px; /* Limita la larghezza massima */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Ombra al box */
}

.about-home-text h1 {
  font-size: 2rem; /* Dimensione del titolo */
  margin-bottom: 20px; /* Spazio tra il titolo e il testo */
}

.about-home-text p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Bottone Leggi di più */
.leggi-di-piu {
  display: inline-block;
  background-color: #fff; /* Colore di sfondo bianco */
  color: #000; /* Colore del testo nero */
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none; /* Rimuove il sottolineato */
  font-weight: bold;
  margin-top: 15px;
  border: 2px solid #000; /* Bordo nero */
  transition: color 0.3s ease, background-color 0.3s ease; /* Aggiunto transition per il colore e sfondo */
}

.leggi-di-piu:hover {
  background-color: #f1f1f1; /* Colore di sfondo grigio chiaro al passaggio del mouse */
  color: #808080; /* Colore della scritta grigio scuro */
}

@media (max-width: 768px) {
  .about-home-container {
    display: flex; /* Assicura che il flex funzioni */
    flex-direction: column; /* Dispone gli elementi in verticale */
    align-items: center; /* Centra gli elementi */
    text-align: center; /* Allinea il testo al centro */
    gap: 20px; /* Riduce lo spazio tra immagine e testo */
    padding: 20px; /* Aggiunge un po' di spazio ai lati */
  }

  .about-home-image {
    height: auto; /* Mantiene l’aspetto originale */
    max-height: 300px; /* Limita l'altezza su schermi piccoli */
    width: auto; /* Mantiene le proporzioni */
    max-width: 100%; /* Evita che l'immagine esca dal contenitore */
    object-fit: cover; /* Evita distorsioni */
  }

  .about-home-text {
    width: 90%; /* Occupa quasi tutta la larghezza disponibile */
    max-width: 600px; /* Evita che il testo si allarghi troppo */
    padding: 15px; /* Riduce leggermente il padding */
  }

  .about-home-text h1 {
    font-size: 1.8rem; /* Leggermente più piccolo per adattarsi */
    line-height: 1.2; /* Aggiunge respiro */
  }

  .about-home-text p {
    font-size: 1rem; /* Riduce la dimensione del testo */
    line-height: 1.6; /* Migliora la leggibilità */
  }

  .leggi-di-piu {
    font-size: 1rem; /* Riduce la dimensione del pulsante */
    padding: 10px 18px; /* Adatta il padding */
    border-radius: 8px; /* Aggiunge angoli arrotondati */
  }
}

/* Aggiustamenti per iPhone X e successivi con notch */
@media (max-width: 768px) and (orientation: portrait) {
  .about-home-container {
    padding-top: env(safe-area-inset-top, 20px);
  }
}




/* Sezione About */
.about {
  margin-top: 0px;
  background-color: #f4f4f4;
  text-align: center;
}

/* Titolo della sezione */
.about-title {
  font-size: 2.5rem;
  align-items: center;
  text-align: center;
  margin-top: 100px;
}

/* Contenitore generale che affianca immagine e box nero */
.about-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1400px; /* Imposta una larghezza massima per centrare il contenuto */
  margin: 0 auto;
}

/* Sezione per immagine e box nero */
.about-content {
  display: flex;
  justify-content: flex-start; /* Affianca l'immagine e il box nero */
  align-items: flex-start; /* Allinea verticalmente gli elementi */
  gap: 30px;
  width: 100%;
}

/* Immagine lato */
.about-image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Box nero con testo - Uniformato ai box dei trattamenti */
.about-box {
  background-color: #fff; /* Cambiato da nero a bianco per uniformare */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra simile a quella dei box dei trattamenti */
  padding: 25px;
  width: 100%; /* Impostato a 100% per occupare tutto lo spazio disponibile */
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 400px; /* Altezza minima per tutti i box */
}

/* Titoli all'interno dei box */
.about-box h2 {
  font-size: 1.8rem; /* Cambiato per uniformare con i titoli dei box trattamenti */
  margin-bottom: 15px;
  font-weight: bold;
  color: black; /* Colore del testo simile a quello dei box dei trattamenti */
  text-transform: none; /* Rimosso "uppercase" per lasciare il testo in minuscolo */
}

/* Griglia per 'Di cosa mi occupo', 'Il mio approccio' e 'Perché scegliere me' */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Aumentato la larghezza minima dei box a 350px */
  gap: 40px; /* Maggiore spazio tra i box */
  width: 100%; /* Usa tutto lo spazio disponibile */
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

/* Box nero nella griglia */
.about-grid .about-box {
  background-color: #fff; /* Uniformato al box principale */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra simile a quella dei box dei trattamenti */
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left; /* Giustificato a sinistra */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Assicura che il testo inizi dall'alto */
  height: 100%; /* Imposta una altezza comune per tutti i box */
  min-height: 400px; /* Aggiunta altezza minima per garantire uniformità */
}

/* Testo giustificato a sinistra */
.about-grid ul {
  text-align: left;
  padding-left: 20px;
  font-size: 16px; /* Uniformato al font dei box dei trattamenti */
}

/* Media query per tablet e dispositivi medi (max 1024px) */
@media (max-width: 1024px) {
  .about-content {
    flex-direction: column; /* Impila immagine e box */
    align-items: center;
    text-align: center; /* Testo più leggibile */
  }

  .about-title {
    display: block;
    margin-top: 0px;
  }

  .about-image {
    max-width: 100%; /* Adattiamo meglio l'immagine */
    height: auto; /* Mantiene le proporzioni */
    margin-bottom: 20px;
  }

  .about-box {
    width: 100%;
    min-height: auto; /* Rimuoviamo altezza fissa */
    padding: 20px;
  }

  .about-grid {
    grid-template-columns: 1fr; /* Disposizione in colonna */
    gap: 30px; /* Spaziatura più ampia tra i box */
  }
}

/* Media query per schermi piccoli (max 768px) */
@media (max-width: 768px) {
  .about-content {
    padding: 0 10px;
  }

  .about-image {
    max-width: 100%; /* Permettiamo all'immagine di occupare l'intera larghezza */
  }

  .about-box {
    width: 100%;
    min-height: auto;
    padding: 20px;
    text-align: center; /* Centriamo il testo per mobile */
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 25px; /* Leggermente meno spazio per evitare dispersione */
  }
}

/* Media query per schermi molto piccoli (max 480px) */
@media (max-width: 480px) {
  .about-content {
    padding: 0 10px; /* Manteniamo almeno 10px di margine */
  }

  .about-image {
    max-width: 100%;
  }

  .about-box {
    padding: 15px;
    width: 100%;
    text-align: center; /* Maggiore leggibilità */
  }

  .about-grid {
    gap: 20px;
  }
}




/* READ MORE */

.read-more {
  font-size: 14px;
  color: white; /* Colore iniziale bianco */
  text-decoration: underline; /* Mantiene la sottolineatura */
  transition: color 0.3s ease; /* Animazione fluida del cambio colore */
}

.read-more:hover { 
  color: gray; /* Colore grigio quando passi sopra */
  text-decoration: underline; /* Mantiene la sottolineatura anche al passaggio */
}

/* Mobile-Friendly */
@media (max-width: 768px) {
  .doctor-photo {
      max-width: 50%; /* Riduce la larghezza dell'immagine */
      height: auto; /* Mantiene le proporzioni */
      display: block; /* Se prima era nascosta, ora sarà visibile */
      margin: 0 auto 20px; /* Centra l'immagine */
  }

  .about-box {
      width: 90%; /* Occupa quasi tutta la larghezza dello schermo */
      max-width: 400px; /* Evita box troppo larghi su schermi medi */
      margin: 0 auto; /* Centra il box */
      padding: 20px; /* Aggiunge spazio interno */
      text-align: center; /* Centra il testo */
  }

  .about-content {
      flex-direction: column; /* Dispone foto e box in verticale */
      align-items: center; /* Centra gli elementi */
      text-align: center; /* Migliora la leggibilità */
      padding: 10px; /* Aggiunge spazio ai lati */
  }
}

/* Servizi Section */
.services {
  margin-top: 100px;
  background-color: #f7f7f7;
}

.services h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 40px;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tre colonne uguali */
  grid-template-rows: auto auto; /* Due righe */
  gap: 30px; /* Spazio tra i box */
  width: 100%;

}

.services .container {
  max-width: 1400px;
  margin: 0 auto;
}

.service-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 25px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 450px; /* Altezza uniforme per tutti i box */
}

.service-item:hover {
  transform: translateX(50%) scale(1.05); /* Mantiene lo sfalsamento */
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.service-icon {
  max-width: 50px;
  margin-bottom: 15px;
}

.service-item h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #333;
}

.service-item ul {
  list-style-type: disc;
  padding-left: 20px;
  text-align: left;
  font-size: 16px;
  flex-grow: 1; /* Riempie lo spazio per uniformare l'altezza */
}

/* Adattamento per schermi più piccoli */
@media (max-width: 1024px) {
  .services {
    width: 90%;
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centra gli elementi orizzontalmente */
    justify-content: center; /* Centra verticalmente se necessario */
    margin-left: auto;
    margin-right: auto;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr); /* Due colonne su tablet */
    gap: 20px; /* Maggiore spazio tra i servizi */
  }
}

/* Responsive Design per schermi piccoli */
@media (max-width: 768px) {
  .service-grid, .contact-grid {
    grid-template-columns: 1fr; /* Una colonna su mobile */
    gap: 15px; /* Leggermente meno spazio su schermi più piccoli */
  }
}





.contact-section {
  width: 100%;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center; /* Centra la sezione */
  align-items: center; /* Centra verticalmente */
  min-height: 100vh; /* Occupa tutta l'altezza della finestra */
}

.container {
  max-width: 100%; /* Rimuoviamo qualsiasi restrizione di larghezza */
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%; /* Occupa tutta la larghezza disponibile */
  display: flex;
  align-items: center;
  justify-content: center; /* Centra il contenuto orizzontalmente */
}

.contact-grid {
  display: grid;
  grid-template-columns: 4fr 4fr; /* Due colonne di dimensioni uguali per desktop */
  gap: 2rem; /* Aumento il gap tra le colonne per dare più spazio */
  align-items: start;
  justify-items: center;
  width: 100%;
}

.contact-details{
  margin-left: 0px;
  margin-bottom: 100px;
}

.contact-details,
.contact-form {
  width: 100%;
  background-color: white;
  padding: 3rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-width: 600px; /* Mantieni una larghezza minima per le colonne su schermi grandi */
}

.contact-form {
  max-width: 1200px; /* Molto più largo per il form */
}

.contact-details {
  max-width: 1200px; /* Molto più largo per i dettagli di contatto */
}

.contact-details h2,
.contact-form h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-details ul {
  list-style-type: none;
  padding: 0;
}

.contact-details ul li {
  margin-bottom: 0.75rem;
}

.contact-map {
  width: 100%;
  height: 350px;
  border-radius: 2px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #666;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 1rem; /* Aggiungi un margine tra gli input */
}

.contact-form button {
  width: 100%;
  background-color: #2563eb;
  color: white;
  padding: 1.2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
}

.contact-form button:hover {
  background-color: #1e40af;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-details {
    margin-left: 0px;
  }

  .contact-grid {
    grid-template-columns: 1fr; /* Una sola colonna per dispositivi più piccoli */
    gap: 2rem; /* Aumento il gap tra le colonne */
  }
  
  .contact-form,
  .contact-details {
    max-width: 100%; /* Occupa tutta la larghezza disponibile */
    min-width: 0; /* Rimuovi il limite di larghezza minima */
  }

  /* Aggiungi un margine per evitare che gli elementi si tocchino */
  .contact-details,
  .contact-form {
    margin-bottom: 2rem; /* Aggiungi margine tra i due blocchi */
  }
}











  


  /* About Page Styles */

  /* Stile del link attivo */
.nav-links li a.active {
  color: #868686; /* Colore grigio */
  font-weight: regular; /* Opzionale: rendere il testo più evidente */
}

/* Stile normale dei link */
.nav-links li a {
  text-decoration: none; 
  color: #fff; /* Colore bianco */
  font-weight: regular;
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo della pagina */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}



/* Titolo About Me */
.about-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
  margin-bottom:20px;
  color: black; /* Colore del titolo */
}


/* Box di testo individuale */
.about-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 50px;
  background-color: #f9f9f9;
}

/* Immagine fissa */
.about-image {
  width: 300px;
  height: auto;
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Testo accanto all'immagine */
.about-text {
  flex: 1;
  text-align: justify;
}

.about-text h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.about-text ul {
  list-style-type: disc;
  margin-left: 20px;
  padding-left: 0;
  margin-bottom: 20px;
}

/* Responsive Design per Mobile (Incluso iPhone) */
@media (max-width: 768px) {
  .about-container {
      flex-direction: column;
      align-items: center;
      padding: 15px; /* Aggiunge spazio intorno al contenuto */
  }

  .about-image {
      max-width: 80%; /* Riduce la dimensione per adattarsi meglio */
      height: auto; /* Mantiene le proporzioni */
      margin-bottom: 20px;
  }

  .about-text {
      width: 100%;
      max-width: 90%; /* Limita la larghezza per una migliore leggibilità */
      text-align: left; /* Migliore lettura su dispositivi mobili */
  }
}



  /* Trattamenti Page Styles */
  .Trattamenti-title{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
    color: black; /* Colore del titolo */
    }

  .Trattamenti-photo {
    max-width: 70%;
    max-height: 50%;
    border-radius: 5px;
    margin-bottom: 20px;

}

  /* Recensioni Page Styles */

  /* Stile del link attivo */
  .nav-links li a.active {
    color: #868686; /* Colore grigio */
    font-weight: regular; /* Opzionale: rendere il testo più evidente */
  }
  
  /* Stile normale dei link */
  .nav-links li a {
    text-decoration: none; 
    color: #fff; /* Colore bianco */
    font-weight: regular;
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
  }
 
/* Titolo della sezione recensioni */
.reviews-section {
    background-color: #f2f2f2;
    text-align: center;
}

.review-box:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);}


/* Stile delle recensioni */

.Recensioni-title {
  margin-top: 100px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px; /* Distanza tra il titolo e il contenuto delle recensioni */
  color: black;
}
.review-box {
    background-color: #000; /* Sfondo nero */
    color: #fff; /* Testo bianco */
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    border-radius: 10px; /* Arrotonda i bordi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-box h2 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.review-box .stars {
    color: #ffd700; /* Colore giallo per le stelle */
    font-size: 18px;
}

.review-box p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
  .reviews-section {
    margin-top: 50px;
    width: 100%; /* Assicurati che la sezione occupi tutta la larghezza disponibile */
    max-width: 100%; /* Previene il superamento della larghezza */
    display: flex;
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centra gli elementi orizzontalmente */
    justify-content: center; /* Centra verticalmente */
    margin-left: auto;
    margin-right: auto;
    gap: 0px; /* Aggiunge spazio tra le recensioni */
    padding: 0 10px; /* Padding laterale per evitare contenuti troppo vicini ai bordi */
  }

  .review-box {
    padding: 15px;
    font-size: 14px;
    text-align: center; /* Centra il testo dentro ogni box */
    background-color: black; /* Aggiungi uno sfondo chiaro per distinguere ogni box */
    border-radius: 8px; /* Rende i bordi del box più morbidi */
    width: 100%; /* Fa sì che il box occupi tutta la larghezza disponibile */
    box-sizing: border-box; /* Assicura che il padding non influenzi la larghezza */
  }

  .reviews-title {
    font-size: 18px; /* Aumenta la dimensione del titolo per migliorare la leggibilità su mobile */
    text-align: center; /* Centra il titolo */
    padding-bottom: 20px; /* Spazio sotto il titolo */
  }
}




/* Stili generali */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
}

nav ul li a:hover,
nav ul li a.active {
  background-color: #555;
}

nav .nav-phone {
  color: white;
  font-size: 14px;
}



/* Footer */
.simple-footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}


/* Footer */
footer {
  background-color: #000000;
  color: white;
  text-align: left;
  padding: 10px;
  margin-top: 30px;
  padding: 10px 0; /* Spaziatura verticale */
    font-size: 14px; /* Dimensione testo */
    position: fixed; /* Rende il footer fisso */
    bottom: 0; /* Posizionamento in fondo alla pagina */
    width: 100%; /* Larghezza piena */
    z-index: 1000; /* Posiziona il footer sopra altri elementi */
  }

footer p {
  margin-left: 10px;
  margin: 10px; /* Rimuove margini predefiniti */
}

/* Responsivo */
@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column; /* Navbar verticale su dispositivi piccoli */
  }

  .navbar li {
    margin: 10px 0;
  }

  .about {
    padding: 20px;
    margin: 10px;
  }
}

.clinic-details {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* Aumentato per dare più spazio tra i due contenitori */
  flex-wrap: wrap; /* Aggiunge flessibilità per schermi più piccoli */
  padding: 20px;
}

.clinic-info, .clinic-zones {
  flex: 1;
  min-width: 300px; /* Aggiunge una larghezza minima per evitare che i contenuti diventino troppo stretti su schermi piccoli */
  background-color: #f9f9f9; /* Sfondo leggero per differenziare le sezioni */
  padding: 20px;
  border-radius: 2px; /* Angoli arrotondati per un aspetto più morbido */
  
}

.clinic-info p, .clinic-zones p {
  margin-bottom: 15px; /* Aumentato per distanziare meglio gli elementi */
  display: flex;
  align-items: center;
  font-size: 16px; /* Font leggermente più grande per una lettura più comoda */
}

.clinic-info ul {
  list-style-type: disc;
  padding-left: 20px;
}

.clinic-info a {
  color: black;  /* Cambiato colore del link per maggiore contrasto */
  text-decoration: none;
  font-weight: bold; /* Testo in grassetto per i link */
  transition: color 0.3s ease;
}

.clinic-info a:hover {
  color: gray;  /* Colore più scuro per il link al passaggio del mouse */
}

.clinic-info img, .clinic-zones img {
  width: 24px; /* Dimensioni delle icone più grandi per migliorare la visibilità */
  height: 24px;
  margin-right: 12px; /* Maggiore spazio tra icona e testo */
}

.clinic-zones ul {
  margin-top: 10px;
}

.clinic-zones p {
  font-size: 16px; /* Font consistente con la sezione precedente */
}

.clinic-zones li {
  margin-bottom: 8px; /* Distanza maggiore tra gli elenchi */
}

@media (max-width: 768px) {
  .clinic-details {
    flex-direction: column; /* Se la larghezza è ridotta, la disposizione diventa verticale */
    gap: 20px; /* Meno spazio tra le sezioni su schermi piccoli */
  }

  .clinic-info, .clinic-zones {
    width: 100%; /* Le sezioni si estendono su tutta la larghezza disponibile */
  }
}


/* Stile per la sezione dei contatti */
.pagina-contatti {
  display: flex;
  justify-content: center;
align-items: center;
text-align: left;
  flex-wrap: wrap;  /* Permette agli elementi di andare a capo se necessario */
  gap: 20px;  /* Spazio tra gli elementi */
  font-size: 16px;  /* Imposta la dimensione del font */
  margin-top: 20px; /* Spazio sopra la sezione */
}

.contacts-title {
  text-align: center;  /* Centra il titolo */
  width: 100%;  /* Occupa tutta la larghezza disponibile */
  margin-bottom: 20px;  /* Distanza tra il titolo e gli altri elementi */
}

.contact-item {
  display: flex;
  padding: 50px;
  justify-content: center;
  align-items: center;  /* Allinea le icone e il testo verticalmente */
  gap: 10px;  /* Spazio tra l'icona e il testo */
  flex: 1 1 calc(50% - 10px);  /* Ogni elemento occupa il 50% della larghezza, meno un po' di spazio */
  min-width: 300px;  /* Impostato un limite minimo per la larghezza dell'elemento */
}

.contact-item img {
  width: 24px;  /* Imposta una dimensione fissa per le icone */
  height: 24px;
}

.contact-item a {
  color: black;  /* Imposta il colore del testo a nero */
  text-decoration: none;  /* Rimuove la sottolineatura */
  transition: color 0.3s ease;  /* Aggiunge una transizione al cambiamento di colore */
}

.contact-item a:hover {
  color: grey;  /* Colore più chiaro al passaggio del mouse */
}


/* Contenitore della sezione contatti */
.contact-section {
  display: flex;
  flex-direction: column;  /* Gli elementi saranno in colonna */
  align-items: center;  /* Centra orizzontalmente */
  justify-content: flex-start;  /* Allinea gli elementi in cima, non centrati verticalmente */
  height: auto;  /* Permette alla sezione di adattarsi al contenuto */
  margin-top: 20px;  /* Riduce lo spazio sopra la sezione */
}

/* Titolo "Contatti" */
.contatti-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0;  /* Rimuove margine sopra al titolo */
  text-align: center;  /* Assicura che il testo sia centrato orizzontalmente */
}


/* Layout generale della pagina */
.contact-info-form {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

/* Box delle informazioni (Email, Telefono, Orari) */
.clinic-details {
    width: 48%;
}

/* Box delle zone di intervento */
.clinic-zones {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

/* Box delle informazioni (Email, Telefono, Orari) con icona e testo */
.clinic-info p {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.clinic-info .icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.clinic-info a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.clinic-info a:hover {
    color: black;
}

/* Stile del form */
.contact-form {
    width: 48%;
    padding: 20px;
    background-color: white; /* Colore di sfondo bianco */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}
.contact-form .form-group {
    display: flex;
    gap: 15px; /* Spazio tra il campo "Nome" e "Cognome" */
  }
  .contact-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #666; /* Contrasto migliorato */
    border-radius: 5px;
    font-size: 16px;
  }
  
  .contact-form input[type="text"] {
    flex: 1; /* I campi "Nome" e "Cognome" occupano ciascuno metà della larghezza del contenitore */
  }
  
  .contact-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .contact-form label {
    font-weight: bold;
    display: block;
    margin: 8px 0 4px;
  }
  
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #666; /* Contrasto migliorato */
    border-radius: 5px;
    font-size: 16px;
  }
  
  .contact-form textarea {
    height: 200px; /* Altezza maggiore per il messaggio */
    resize: vertical; /* Permette di ridimensionare verticalmente il textarea, se desiderato */
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: 1px solid black; /* Focus ben visibile */
  }
  
  .contact-form button {
    background-color: black;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .contact-form button:hover {
    background-color: #333; /* Colore del pulsante al passaggio del mouse */
  }
  

/* Riquadro bianco sotto il form */
.contact-info-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 50px;
}

/* Sezione mappa */
.map-container {
    position: relative;
    width: 100%;
    margin-bottom: 50px; /* Separiamo la mappa dal footer */
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

/* Sezione contatti */
.contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}




/* Media Queries per schermi piccoli */
@media (max-width: 768px) {
  .contact-info-form {
    margin-top: 100px;
      flex-direction: column;
      align-items: center;
  }

  .clinic-details,
  .contact-form {
      width: 100%;
  }

  .map-section {
      height: 300px;
  }
}


/* Footer */
footer {
    background-color: #000000;
    color: white;
    text-align: left;
    padding: 10px;
    margin-top: 30px;
    padding: 10px 0; /* Spaziatura verticale */
      font-size: 14px; /* Dimensione testo */
      position: fixed; /* Rende il footer fisso */
      bottom: 0; /* Posizionamento in fondo alla pagina */
      width: 100%; /* Larghezza piena */
      z-index: 1000; /* Posiziona il footer sopra altri elementi */
    }
  
  footer p {
    margin-left: 10px;
    margin: 10px; /* Rimuove margini predefiniti */
  }
  
  /* Responsivo */
  @media (max-width: 768px) {
    .navbar ul {
      flex-direction: column; /* Navbar verticale su dispositivi piccoli */
    }
  
    .navbar li {
      margin: 10px 0;
    }
  
    .about {
      padding: 20px;
      margin: 10px;
    }
  }




















  /* Contenitore della sezione contatti */
.contact-section-contatti {
  display: flex;
  flex-direction: column;  /* Gli elementi saranno in colonna */
  align-items: center;  /* Centra orizzontalmente */
  justify-content: flex-start;  /* Allinea gli elementi in cima, non centrati verticalmente */
  height: auto;  /* Permette alla sezione di adattarsi al contenuto */
  margin-top: 100px;  /* Riduce lo spazio sopra la sezione */
}


.no-bullets {
  list-style-type: none; /* Rimuove i puntini */
  padding-left: 0; /* Rimuove il margine sinistro */
}

/* Titolo "Contatti" */
.contatti-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
  margin-bottom:20px;
  color: black; /* Colore del titolo */
}

/* Layout generale della pagina */
.contact-info-form-contatti {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    margin: 30px;
    flex-wrap: wrap; /* Permette di far adattare gli elementi a più righe su schermi più piccoli */
}

/* Box delle informazioni (Email, Telefono, Orari) */
.clinic-details-contatti {
    width: 48%;
}

/* Box delle zone di intervento */
.clinic-zones-contatti {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    width: 100%; /* Adatta la larghezza per schermi piccoli */
}

/* Box delle informazioni (Email, Telefono, Orari) con icona e testo */
.clinic-info-contatti p {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    justify-content: flex-start; /* Aggiunge spazio tra icona e testo */
}

.clinic-info-contatti .icon {
    width: 35px; /* Aumenta leggermente la dimensione dell'icona */
    height: 35px;
    margin-right: 15px;
}

.clinic-info-contatti a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.clinic-info-contatti a:hover {
    color: black;
}

/* Responsive Design per schermi più piccoli (max-width: 768px) */
@media (max-width: 768px) {
  /* Adattamento per la visualizzazione mobile */
  .contact-info-form-contatti {
    flex-direction: column; /* Disposizione a colonna */
    align-items: center; /* Centra gli elementi orizzontalmente */
    justify-content: center;
  }

  .clinic-details-contatti {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    margin-bottom: 20px; /* Aggiungi margine inferiore */
  }

  .clinic-zones-contatti {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    margin-top: 20px; /* Spazio tra la sezione delle zone e il resto */
  }

  /* Icone più piccole ma leggibili */
  .clinic-info-contatti .icon {
    width: 30px;  /* Riduce leggermente la dimensione per dispositivi più piccoli */
    height: 30px;
  }

  /* Rimuovi margine tra testo e icona */
  .clinic-info-contatti p {
    margin-bottom: 10px;
  }
}


/* Stile del form */
.contact-form-contatti {
    width: 48%;
    padding: 20px;
    background-color: white; /* Colore di sfondo bianco */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
}
.contact-form-contatti .form-group-contatti {
    display: flex;
    gap: 15px; /* Spazio tra il campo "Nome" e "Cognome" */
  }
  .contact-form-contatti input {
    width: 100%;
    padding: 10px;
    border: 1px solid #666; /* Contrasto migliorato */
    border-radius: 5px;
    font-size: 16px;
  }
  
  .contact-form-contatti input[type="text"] {
    flex: 1; /* I campi "Nome" e "Cognome" occupano ciascuno metà della larghezza del contenitore */
  }
  
  .contact-form-contatti form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .contact-form-contatti label {
    font-weight: bold;
    display: block;
    margin: 8px 0 4px;
  }
  
  .contact-form-contatti input,
  .contact-form-contatti textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #666; /* Contrasto migliorato */
    border-radius: 5px;
    font-size: 16px;
  }
  
  .contact-form-contatti textarea {
    height: 200px; /* Altezza maggiore per il messaggio */
    resize: vertical; /* Permette di ridimensionare verticalmente il textarea, se desiderato */
  }
  
  .contact-form-contatti input:focus,
  .contact-form textarea:focus {
    outline: 1px solid black; /* Focus ben visibile */
  }
  
  .contact-form-contatti button {
    background-color: black;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .contact-form-contatti button:hover {
    background-color: #333; /* Colore del pulsante al passaggio del mouse */
  }
  

/* Riquadro bianco sotto il form */
.contact-info-contatti-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 50px;
}

/* Sezione mappa */
.map-container-contatti {
    position: relative;
    width: 100%;
    margin-bottom: 50px; /* Separiamo la mappa dal footer */
}

.map-container-contatti iframe {
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

/* Sezione contatti */
.contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}



/* Media Queries per schermi piccoli */
@media (max-width: 768px) {
  .contact-info-form-contatti {
      flex-direction: column;
      align-items: center;
      text-align: center; /* Centrare il testo */
      padding: 0px;
  }

  .clinic-details-contatti,
  .contact-form-contatti {
      width: 100%;
  }

  .clinic-info-contatti p {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
  }

  .clinic-info-contatti .icon {
      width: 20px; /* Ridimensionamento icone */
      margin-right: 8px;
  }

  .clinic-zones-contatti ul {
    margin-top: 30px;
      padding: 0;
      text-align: left; /* Mantiene l'allineamento corretto dei punti elenco */
  }

  .clinic-zones-contatti li {
      list-style-type: none;
      padding: 5px 0;
  }

  .map-section-contatti {
      height: 300px;
      width: 100%;
  }

  .contact-form-contatti{
    margin-top: 20px;
  }
}


/* Footer */
footer {
    background-color: #000000;
    color: white;
    text-align: left;
    padding: 10px;
    margin-top: 30px;
    padding: 10px 0; /* Spaziatura verticale */
      font-size: 14px; /* Dimensione testo */
      position: fixed; /* Rende il footer fisso */
      bottom: 0; /* Posizionamento in fondo alla pagina */
      width: 100%; /* Larghezza piena */
      z-index: 1000; /* Posiziona il footer sopra altri elementi */
    }
  
  footer p {
    margin-left: 10px;
    margin: 10px; /* Rimuove margini predefiniti */
  }
  
  /* Responsivo */
  @media (max-width: 768px) {

    .footer{
      display: none;
    }
    .navbar ul {
      flex-direction: column; /* Navbar verticale su dispositivi piccoli */
    }
  
    .navbar li {
      margin: 10px 0;
    }
  
    .about {
      padding: 20px;
      margin: 10px;
    }
  }