/* style.css */

/* Stili di base */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
body {
  color: #333; /* Imposta il colore di base per tutto il testo */

}

/* Se desideri garantire il colore su elementi specifici, puoi fare: */
h1, h2, h3, h4, h5, h6, p, a, li, span, div {
  color: inherit; /* Fa sì che ereditino il colore definito in body */
}
i {
  color: #fff;
}
.btn{
  color: #fff;
  background: #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.fa-black {
    color: #000;
    font-size: larger;
}
/* Header e Menu */
header {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.shadow{
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.logo {
  padding-right: 20%;
}
.logo img {
  /*width: auto;*/
  max-height: 3em;
}
/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.hamburger span {
  height: 3px;
  width: 25px;
  background: #333;
  margin: 4px 0;
  transition: all 0.3s;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-links li {
  margin: 0 10px;
}
.nav-links li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

.header-news {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 4px;
  z-index: 100;
}

/* Responsive Menu */

  .hamburger {
      display: flex;
  }
  .nav-links {
      position: absolute;
      top: 60px;
      left: -100%;
      width: 100%;
      flex-direction: column;
      background: #fff;
      transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  .nav-links.active {
      left: 0;
      transform: translateY(0);
  opacity: 1;
  }
  .nav-links li {
      margin: 10px 0;
      text-align: center;
  }


/* Sezione Hero */
.hero {
  height: 100vh;
  /*background: url('images/shop.jpg') no-repeat center center/cover;*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 60px; /* per evitare il menu fisso */
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0,0,0,0.5);*/
}
.hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
}
.hero h1 {
  font-size: 4rem;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}


/* Cards Section con scrolling orizzontale */
/* Sezione Cards */
.cards-section {
  position: relative;
  padding: 80px 20px;
  background: #f9f9f9;
  text-align: center;
}
.cards-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container delle Cards */
.cards-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.cards-container::-webkit-scrollbar {
  display: none;
}

/* Le card ora sono alte l'80% della viewport */
.card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin: 0 10px;
  min-width: 300px;
  scroll-snap-align: start;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
  height: 80vh;
  display: flex;
  flex-direction: column;
}

/* Le immagini delle card vengono adattate e occupano la metà dell'altezza */
.card img {
  width: 100%;
  height: 50%;
  object-fit: cover;
}

/* Testo all'interno delle card */
.card h3 {
  margin: 20px 0 10px;
}
.card p {
  padding: 0 20px 20px;
  color: #666;
  flex-grow: 1;
}
/* Navigation Buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  outline: none;
  transition: background 0.3s;
}
.nav-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}
.nav-btn.prev {
  left: 10px;
}
.nav-btn.next {
  right: 10px;
}

/* Parallax Section (vertical) */
.parallax-section {


  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height:fit-content;
  align-content: center;
  padding: 1em;
  margin: 1em;

}
.parallax-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1em;
  border-radius: 1em;
  background-color: #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.social {
  text-align: center;
  margin-top: 20px;
}
.social a {
  font-size: xx-large;
  padding: 5px;
  text-decoration: none;
}

/* Features Section */
.features-section {
  padding: 80px 20px;
  text-align: center;
  background: #f7f7f7;
}
.features-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}
.features-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.feature {
  width: 300px;
  margin: 10px;
  text-align: center;
}
.feature img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.feature h3 {
  margin: 20px 0 10px;
}


/* Contact Section */
.contact-section {
  padding: 80px 20px;
  background: #f9f9f9;
  text-align: center;
}
.contact-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}
.contact-section form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group input,
.form-group textarea {

  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Footer */
footer {
  /*background: #333;
  color: #fff;*/
  text-align: center;
  padding: 20px;
}

/* nasconde barra di scorrimento */
.cards-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  /* Nasconde la scrollbar su Chrome, Safari e Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.cards-container::-webkit-scrollbar {
  display: none;
}

/* SEZIONE 3D CARD */
/*.card-3d-section {
  height: 120vh;
  padding: 80px 20px;
  background: #e9e9e9;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-3d-section.sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.card-3d {
  width: 600px;
  height: 80%;
  perspective: 1000px;
  margin: 0 auto;

}

.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
}


.card-face.front {

}
.card-face.back {
  transform: rotateY(180deg);
}


.card-face img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 15px;
}


.card-face.front p {
  display: contents;
}
.card-face.back p {
  display: contents;
}*/

/* SEZIONE SPLIT */
.split-section {
  width: 100%;

  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

.split-wrapper {
  width: 100%;
  display: inline-flex;

}

/* Riquadro Sinistro (Immagine) */
.split-image {
  width: 50%;
  /* Partenza fuori dallo schermo a sinistra */
  transform: translateX(-100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1; /* Assicura che l'immagine sia quadrata */
  object-fit: cover;


}

/* Riquadro Destro (Testo) */
.split-text {
  width: 50%;
  /* Partenza fuori dallo schermo a destra */
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.split-text h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.split-text h3 {
  font-size: 1.75rem;
  margin-bottom: 15px;
}

.split-text p {
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  padding: 40px 20px;
}

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

/* Branding */
.footer-branding {
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  margin-bottom: 20px;
}

.footer-branding img {
  margin-right: 20px;
}

.footer-text h2 {
  margin: 0;
  font-size: 1.8rem;
}

.footer-text p {
  margin: 0;
  font-style: italic;
  font-size: 0.9rem;
}

/* Contatti */
.footer-contacts {
  flex: 2 1 400px;
  margin-bottom: 20px;
  text-align: left;
}

.footer-contacts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.footer-contacts ul li {
  margin-bottom: 5px;
}

/* Social */
.footer-social {
  flex: 1 1 150px;
  text-align: right;
}

.footer-social a {
  color: #fff;
  margin: 0 5px;
  font-size: 1.2rem;
  transition: color 0.3s;
  text-decoration: none;
}

.footer-social a:hover {
  color: #0071e3;
}

/* Stili per i pulsanti fissi in basso */
.fixed-btn {
  position: fixed;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  text-decoration: none;
  transition: opacity 0.3s;
}

/* Pulsante WhatsApp (a sinistra) */
.whatsapp-btn {
  left: 20px;
  background-color: #25d366; /* Colore verde WhatsApp */
}
.whatsapp-btn i {
  color: #fff;
}

/* Pulsante Torna Su (a destra) */
.scroll-top-btn {
  right: 20px;
  background-color: rgba(0,0,0,0.6); /* Colore blu */
  color: #fff;
}
.scroll-top-btn i{

  color: #fff;
}

/* Hover effect */
.fixed-btn:hover {
  opacity: 0.9;
}

/* SEZIONE FAQ */
.faq-section {
  padding: 60px 20px;
  background: #f7f7f7;
  text-align: center;
}

.faq-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.faq-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.faq-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  text-align: left;
}

.faq-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.faq-card p {
  font-size: 1rem;
  line-height: 1.6;

}

/* SEZIONE RECENSIONI */
.reviews-section {
  padding: 60px 20px;
  background: #fff;
  text-align: center;
}

.reviews-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.reviews-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container delle review card */
.reviews-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  padding-bottom: 20px;
  scrollbar-width: none; /* Firefox */
}
.reviews-container::-webkit-scrollbar {
  display: none;
}

/* Review Card */
.review-card {
  background: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 300px; /* Larghezza fissa; puoi modificarla se necessario */
  padding: 20px;
  text-align: left;
}

.review-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 15px;
}

.review-stars {
  margin-bottom: 10px;
  color: #f1c40f; /* Colore oro per le stelline */
}

.review-card p {
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
}

/* Pulsanti di navigazione per le recensioni */
.reviews-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s;
}
.reviews-nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.reviews-nav-btn.prev {
  left: 10px;
}
.reviews-nav-btn.next {
  right: 10px;
}

/* SEZIONE SLIDESHOW */
.slideshow-section {
  height: 80vh; /* 100% della viewport */
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Header in alto, contenuto al centro, footer in basso */
  overflow: hidden;
  padding: 20px;
  margin-bottom: 3em;
}

/* Titolo e Footer */
.slideshow-header,
.slideshow-footer {
  text-align: center;
  margin-top: 1em;
}
.slideshow-header h2 {
  font-size: 2.5rem;
  margin: 0;

}
.slideshow-footer p {
  font-size: 1rem;
  margin: 0;

}

/* Contenuto centrale */
.slideshow-content {
  flex: 1;
  display: flex;
  align-items: center;  /* Centra verticalmente le slide */
  justify-content: center;
  position: relative;
  margin-bottom: 4em;
}

/* Container delle slide */
.slideshow-container {
  display: flex;
  align-items: center; /* Centra le card verticalmente */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  padding-bottom: 20px;
}
.slideshow-container::-webkit-scrollbar {
  display: none;
}

/* Card dello slideshow */
.slideshow-card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  border-radius: 10px;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 300px;
  padding: 20px;
  text-align: center;
}
.slideshow-card img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 15px;
}

/* Pulsanti di navigazione: Fissi in basso al centro */
.slideshow-nav {
  position: fixed; /* Fisso alla viewport */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  visibility: hidden;
  background-color: #000;
  opacity: 0.5;
  padding: 1em;
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.slideshow-nav-btn {
  /*background: rgba(0, 0, 0, 0.5);*/
  border: none;
  /*color: #fff;*/
  font-size: 1.5rem;
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.slideshow-nav-btn i{
  color: #000;
}


/* SEZIONE SHRINK */
.shrink-section {
  /* La sezione è più alta dello schermo, ad esempio 150vh */
  height: 100vh;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.shrink-image-container {
  height: 150vh;         /* se vuoi che la sezione sia più alta */
  width: 100%;           /* larghezza pari alla viewport */
  margin: 0 auto;        /* centra il container orizzontalmente */
  display: flex;
     /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  overflow: hidden;
  position: relative;
}

.shrink-image {
  width: 350%;
  height: 100vh;         /* altezza pari alla viewport */
  object-fit: contain;
  object-position: center center; /* centra l'immagine */
  transform-origin: center center; /* scala a partire dal centro */
  transition: transform 0.3s ease;
}



/* Testo sottostante */
.shrink-text {
  padding: 20px;
  text-align: center;
  background: #fff;
  font-size: 1rem;
  color: #333;
}

/* Sezione Appuntamenti */
.lascia-recensione,
.appointments-section {
  padding: 40px 20px;
  background: #ccc;
}

.recensione-container,
.appointments-container {
  max-width: 800px;
  margin: 0 auto;
}

.recensione-container h2,
.appointments-container h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
}

/* Form di ricerca */
.form-recensione,
.appointments-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: center;
}

.appointments-form .form-group {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.form-recensione label,
.appointments-form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.form-recensione input,
.appointments-form input {
  width: auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-recensione .btn,
.appointments-form .btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex: 1 1 100%;
  max-width: 200px;
  align-self: center;
  transition: background 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.recensione-box {
  background: #fff;
  border-radius: 8px;
  padding: 1em;
  width: 300px; /* fissa la larghezza */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
@media (max-width: 992px) {
  .recensione-box {
    width: 45%;
  }
}
@media (max-width: 600px) {
  .recensione-box {
    width: 90%;
  }
}
/* Lista degli appuntamenti */
.appointments-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.appointments-list li {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.appointments-list .appointment-date {
  font-weight: bold;

}

.appointments-list .appointment-time {

}

.appointments-list .appointment-description {
  flex: 1;

}


/* Responsive: impila le sezioni per schermi piccoli */
@media (max-width: 768px) {
  .shrink-image {
    object-fit: contain;
    width: 250%;
    /* Puoi impostare uno sfondo per evitare aree vuote */
    background: #fff;
  }
  .reviews-nav-btn {
    display: none;
  }
  .faq-cards {
    grid-template-columns: 1fr;
  }
  .footer-container {
    padding: 1em;
    align-items: center;
    text-align: center;
  }
  .footer-container div{
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .footer-contacts {

    text-align: center;
  }
  .footer-social {
    text-align: center;
    margin-top: 20px;
  }
  .split-wrapper {
    justify-content: center;
    flex-direction: column;
    align-items: center;

  }
  .split-wrapper div{
    width: 100%;

  }
  .split-text h2{
    padding: 7px;
    text-align: center;
  }
  .split-text h3{
    padding: 7px;
    text-align: center;
  }
  .split-text p{
    padding: 7px;
    text-align: center;
  }
}