/*-------------------------------------------HOME----------------------------------------------- */

#SQP .titolo .type1 {

  font-size: 7.5vw;

}

#SQP .titolo .type2 {

  font-size: 12.5vw;

}

#SQP .titolo .type4 {

  font-size: 10vw;

  line-height: 1.7;

}



#zhen-ortho,

#staff,

#camiciepigiami {

  padding: 10vw 10%;

}



#zhen-ortho {

  margin: -20vw auto 10vw auto;

}

#staff {

  margin: 20vw auto 0vw auto;

}

#camiciepigiami {

  margin: 20vw auto 20vw auto;

}



@media (min-width: 600px) {

  #SQP .titolo .type1 {

    font-size: 4vw;

  }

  #SQP .titolo .type2 {

    font-size: 8vw;

  }

  #SQP .titolo .type4 {

    font-size: 5vw;

  }



  #zhen-ortho,

  #staff {

    margin: 0 auto;

    padding: 3vw 10%;

  }

  #staff {

    padding: 0 10%;

  }

  #camiciepigiami {

    margin: 10vw auto 5vw auto;

    padding: 10vw 10%;

  }

}



@keyframes morph {

  0% {

    border-radius: 69% 31% 57% 43% / 59% 52% 48% 41%;

  }

  50% {

    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

  }

  100% {

    border-radius: 69% 31% 57% 43% / 59% 52% 48% 41%;

  }

}



@keyframes morph-doctor {

  0% {

    border-radius: 81% 19% 37% 63% / 28% 74% 26% 72%;

  }

  50% {

    border-radius: 30% 70% 59% 41% / 73% 44% 56% 27%;

  }

  100% {

    border-radius: 81% 19% 37% 63% / 28% 74% 26% 72%;

  }

}



@keyframes morph-cnp {

  0% {

    border-radius: 41% 59% 42% 58% / 59% 45% 55% 41%;

  }

  50% {

    border-radius: 73% 27% 62% 38% / 39% 64% 36% 61%;

  }

  100% {

    border-radius: 41% 59% 42% 58% / 59% 45% 55% 41%;

  }

}



/*--------------------------Servizi Home (Nuova Struttura) -----------------------*/



#servizi {

  background-color: #265d87;

}

#servizi p,

#servizi .titolo .type2 {

  color: #fff;

}



.servizi-lista-container {

  display: flex;

  flex-direction: column; /* Modificato per layout a colonna */

  align-items: center; /* Centra gli elementi nella colonna */



  padding: 0;

  gap: 1.2vw;



  margin-top: 5vw;

}



.servizio-link {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 60%; /* Aumentata la larghezza per mobile */

  text-decoration: none;

  color: #fff;

  margin: 5vw auto;

}



.servizio-link:hover img {

  transform: scale(1.2); /* Animazione di scala sull'icona */

}



.servizio-link:hover span {

  background-color: rgba(255, 255, 255, 0.1);

}



.servizio-link img {

  height: 30vw; /* Aumentata l'altezza per mobile */

  margin-bottom: -15vw; /* Aggiustato per sovrapposizione */

  transition: transform 0.3s ease; /* Transizione per l'animazione di scala */

  z-index: 2;

}



.servizio-link span {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 90%;

  aspect-ratio: 1 / 1; /* Mantiene il box quadrato */

  background-color: #2b8ea4;

  font-size: 4vw; /* Aumentato il font per mobile */

  font-weight: 500;

  text-align: center;

  padding: 0.5rem;

  transition: border-radius 0.5s ease-in-out, background-color 0.3s ease,

    color 0.3s ease;

  z-index: 1;

  box-shadow: 0 10px 6px rgba(0, 0, 0, 0.2);

}



/* Forme uniche per ogni servizio */

.servizio-link:nth-child(1) span {

  border-radius: 30% 70% 22% 78% / 59% 30% 70% 41%;

}

.servizio-link:nth-child(2) span {

  border-radius: 78% 22% 78% 22% / 30% 65% 35% 70%;

}

.servizio-link:nth-child(3) span {

  border-radius: 22% 78% 44% 56% / 70% 35% 65% 30%;

}

.servizio-link:nth-child(4) span {

  border-radius: 56% 44% 22% 78% / 35% 70% 30% 65%;

}

.servizio-link:nth-child(5) span {

  border-radius: 44% 56% 78% 22% / 65% 30% 70% 35%;

}

.servizio-link:nth-child(6) span {

  border-radius: 60% 40% 32% 68% / 59% 40% 60% 35%;

}

.servizio-link:nth-child(7) span {

  border-radius: 30% 70% 22% 78% / 49% 30% 60% 51%;

}



/* Cambio forma su hover */

.servizio-link:nth-child(1):hover span {

  border-radius: 78% 22% 78% 22% / 30% 65% 35% 70%;

}

.servizio-link:nth-child(2):hover span {

  border-radius: 22% 78% 44% 56% / 70% 35% 65% 30%;

}

.servizio-link:nth-child(3):hover span {

  border-radius: 56% 44% 22% 78% / 35% 70% 30% 65%;

}

.servizio-link:nth-child(4):hover span {

  border-radius: 44% 56% 78% 22% / 65% 30% 70% 35%;

}

.servizio-link:nth-child(5):hover span {

  border-radius: 30% 70% 22% 78% / 59% 30% 70% 41%;

}

.servizio-link:nth-child(6):hover span {

  border-radius: 78% 22% 78% 22% / 30% 65% 35% 70%;

}

.servizio-link:nth-child(7):hover span {

  border-radius: 22% 78% 44% 56% / 70% 35% 65% 30%;

}



/* Layout per Desktop */

@media (min-width: 600px) {

  .servizi-lista-container {

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

    padding: 0 4vw;

    gap: 1.2vw;

  }



  .servizio-link {

    width: 14.7vw;

    margin: 0 auto;

  }



  .servizio-link img {

    height: 11vw;

    margin-bottom: -4vw;

  }



  .servizio-link span {

    width: 100%;

    font-size: 1.5vw;

  }

}



/*--------------------------zhen-Ortho Section-----------------------*/



.zhen-ortho-shape {

  position: absolute;

  top: 10%;

  left: 10%;

  width: 40%;

  padding-bottom: 40%;

  background-color: rgba(38, 93, 135, 0.1);

  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

  animation: morph 12s ease-in-out infinite;

  z-index: 1;

}



.zhen-ortho-doctor-image {

  position: absolute;

  top: 0%;

  right: 15%;

  width: 25%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 81% 19% 37% 63% / 28% 74% 26% 72%;

  animation: morph-doctor 15s ease-in-out infinite alternate;

  z-index: 1;

  display: none; /* Nascosto su mobile */

}



.zhen-ortho-doctor-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.zhen-ortho-content {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2rem;

}



.zhen-ortho-logo img {

  width: 100%;

}



.zhen-ortho-testo {

  text-align: center;

}



.zhen-ortho-titolo {

  line-height: 1;

  margin-bottom: 1.5rem;

}



.zhen-ortho-titolo .zhen-ortho-linea1 {

  font-size: 0.6em;

  font-weight: 400;

  color: #5a5a5a;

  display: block;

  text-transform: uppercase;

  letter-spacing: 2px;

}



.zhen-ortho-titolo .zhen-ortho-linea2 {

  font-size: 1.4em;

  font-weight: bold;

  color: #2b2d2f;

  display: block;

}



.zhen-ortho-titolo .zhen-ortho-linea2::first-letter {

  font-size: 1.5em;

  color: #265d87;

}



.zhen-ortho-testo p {

  color: #2b2d2f;

  line-height: 1.7;

}



.btn-zhen-ortho {

  display: inline-block;

  margin-top: 2rem;

  padding: 0.8rem 2rem;

  background-color: #265d87;

  color: #fff;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 500;

  transition: background-color 0.3s ease, transform 0.3s ease;

}



.btn-zhen-ortho:hover {

  background-color: #2b8ea4;

  transform: translateY(-3px);

  text-decoration: none;

}



@media (min-width: 992px) {

  .zhen-ortho-content {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 4vw;

    align-items: center;

  }

  .zhen-ortho-testo {

    text-align: left;

  }

  .zhen-ortho-doctor-image {

    display: block; /* Visibile su desktop */

  }

}



/*--------------------------Camici & Pigiami Section-----------------------*/

.cnp-section {

  position: relative;

  background-color: #fff;

  padding: 8vw 4vw;

  margin: 100px auto;

  width: 90%;

  border-radius: 20px;

  overflow: hidden;

}



.cnp-shape {

  position: absolute;

  bottom: -20%;

  right: -15%;

  width: 50%;

  padding-bottom: 50%;

  background-color: rgba(43, 142, 164, 0.1); /* Giallo trasparente */

  border-radius: 73% 27% 62% 38% / 39% 64% 36% 61%;

  animation: morph 15s ease-in-out infinite alternate;

  z-index: 1;

}



.cnp-content {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2rem;

}



.cnp-image {

  width: 90%;

  max-width: 350px;

  overflow: hidden;

  /* Stili animazione rimossi */

}



.cnp-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.cnp-testo {

  text-align: center;

}



.cnp-titolo {

  line-height: 1;

  margin-bottom: 1.5rem;

}



.cnp-titolo .cnp-linea-principale {

  font-size: 1.4em;

  font-weight: bold;

  color: #2b2d2f;

  display: block;

}



.cnp-titolo .cnp-connettore {

  font-size: 0.8em;

  font-weight: 400;

  color: #5a5a5a;

  display: block;

  text-transform: uppercase;

  letter-spacing: 2px;

  line-height: 1.2;

}



.cnp-titolo .cnp-linea-principale::first-letter {

  font-size: 1.5em;

  color: #265d87;

}



.cnp-testo p {

  color: #2b2d2f;

  line-height: 1.7;

}



.btn-cnp {

  display: inline-block;

  margin-top: 2rem;

  padding: 0.8rem 2rem;

  background-color: #265d87;

  color: #fff;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 500;

  transition: background-color 0.3s ease, transform 0.3s ease;

}



.btn-cnp:hover {

  background-color: #2b8ea4;

  color: #265d87;

  transform: translateY(-3px);

  text-decoration: none;

}



@media (min-width: 992px) {

  .cnp-content {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 4vw;

    align-items: center;

  }

  .cnp-image {

    order: 1; /* Immagine a sinistra */

  }

  .cnp-testo {

    order: 2; /* Testo a destra */

    text-align: left;

  }

}



/*--------------------------Staff Home -----------------------*/



.staff-social-links {

  margin-top: 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

}



.staff-social-links a {

  color: #f0f0f0;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.6rem 1.2rem;

  border-radius: 50px;

  background-color: #265d87;

  transition: color 0.3s ease, background-color 0.3s ease,

    border-color 0.3s ease;

}



.staff-social-links a:hover {

  background-color: #2b8ea4;

  text-decoration: none;

}



.staff-social-links i {

  font-size: 1.5rem;

  width: 25px; /* Per allineamento icone */

  text-align: center;

}



.staff-cards-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12vw; /* Aumentato per dare spazio al nome */

}



.staff-card {

  position: relative;

  width: 80%;

  max-width: 300px;

  text-decoration: none;

}



.staff-card-name {

  position: relative;

  z-index: 2;

  margin-bottom: 0; /* Rimosso margine negativo */

  display: flex;

  justify-content: center;

  margin-top: -6vw; /* Aggiunto spazio tra nome e immagine */

}



.staff-card-name span {

  background-color: #265d87; /* Sfondo blu */

  color: #fff; /* Testo bianco */

  padding: 0.5rem 1.5rem;

  border-radius: 20px;

  font-weight: 600;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease, transform 0.3s ease;

}



.staff-card-image {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  transition: transform 0.4s ease, border-radius 0.5s ease;

}



.staff-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.staff-card:nth-child(1) .staff-card-image {

  border-radius: 55% 45% 73% 27% / 48% 62% 38% 52%;

}

.staff-card:nth-child(2) .staff-card-image {

  border-radius: 24% 76% 49% 51% / 67% 46% 54% 33%;

}

.staff-card:nth-child(3) .staff-card-image {

  border-radius: 69% 41% 61% 39% / 55% 46% 70% 45%;

}



.staff-card:hover .staff-card-image {

  transform: scale(1.05);

}

.staff-card:hover img {

  transform: scale(1.02);

}

.staff-card:nth-child(1):hover .staff-card-image {

  border-radius: 24% 76% 49% 51% / 67% 46% 54% 33%;

}

.staff-card:nth-child(2):hover .staff-card-image {

  border-radius: 59% 31% 71% 39% / 55% 26% 64% 45%;

}

.staff-card:nth-child(3):hover .staff-card-image {

  border-radius: 55% 45% 73% 27% / 48% 62% 38% 52%;

}



.staff-card:hover .staff-card-name span {

  background-color: #2b8ea4;

  transform: scale(1.05);

}



@media (min-width: 600px) {

  .staff-social-links {

    align-items: flex-start;

  }

  .staff-cards-container {

    gap: 0vw;

  }

  .staff-card {

    width: 55%;

    max-width: 300px;

  }

  .staff-card:first-child {

    margin-left: -15vw;

  }

  .staff-card:nth-child(2) {

    margin-right: -25vw;

  }

  .staff-card:nth-child(3) {

    margin-left: -15vw;

  }

}



/*--------------------------Camici & Pigiami Section-----------------------*/

.cnp-section {

  position: relative;

  background-color: #f8f9fa;

  padding: 8vw 4vw;

  overflow: hidden;

}



.cnp-shape {

  position: absolute;

  bottom: -20%;

  right: -15%;

  width: 50vw;

  height: 50vw;



  background-color: rgba(219, 175, 78, 0.1); /* Giallo trasparente */

  border-radius: 73% 27% 62% 38% / 39% 64% 36% 61%;

  animation: morph 15s ease-in-out infinite alternate;

  z-index: 1;

}



.cnp-shape.shape2 {

  top: 5%;

  left: -10%;

  background-color: rgba(78, 132, 219, 0.1); /* Blu trasparente */

  border-radius: 73% 27% 62% 38% / 39% 64% 36% 61%;

  animation: morph 15s ease-in-out infinite alternate;

}



.cnp-content {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2rem;

}



.cnp-image {

  width: 90%;

  max-width: 350px;

  overflow: hidden;

}



.cnp-image.placeholder {

  display: flex;

  justify-content: center;

  align-items: center;

}



.cnp-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.cnp-testo {

  text-align: center;

}



.cnp-titolo {

  line-height: 1;

  margin-bottom: 1.5rem;

}



.cnp-titolo .cnp-linea-principale {

  font-size: 1.4em;

  font-weight: bold;

  color: #2b2d2f;

  display: block;

}



.cnp-titolo .cnp-connettore {

  font-size: 0.8em;

  font-weight: 400;

  color: #5a5a5a;

  display: block;

  text-transform: uppercase;

  letter-spacing: 2px;

  line-height: 1.2;

}



.cnp-titolo .cnp-linea-principale::first-letter {

  font-size: 1.5em;

  color: #265d87;

}



.cnp-testo p {

  color: #2b2d2f;

  line-height: 1.7;

}



.btn-cnp {

  display: inline-block;

  margin-top: 2rem;

  padding: 0.8rem 2rem;

  background-color: #265d87;

  color: #fff;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 500;

  transition: background-color 0.3s ease, transform 0.3s ease;

}



.btn-cnp:hover {

  background-color: #dbaf4e;

  color: #265d87;

  transform: translateY(-3px);

  text-decoration: none;

}



/* Stili per Desktop */

@media (min-width: 992px) {

  /* .page-header h1 è ora in main.css */



  .dav-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4vw;

    align-items: center;

  }



  /* .dav-titolo ora usa gli stili di .section-title da main.css */

  .dav-titolo {

    text-align: left;

  }



  .dav-titolo .linea1 {

    font-size: 3vw;

  }



  .dav-titolo .linea2 {

    font-size: 9vw;

    line-height: 0.8;

  }



  .dav-section.section-reverse .dav-testo {

    order: 2;

  }



  .dav-section.section-reverse .dav-immagine-forma {

    order: 1;

  }



  .cnp-content {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 4vw;

    align-items: center;

  }

  .cnp-image {

    order: 1; /* Immagine a sinistra */

  }

  .cnp-testo {

    order: 2; /* Testo a destra */

    text-align: left;

  }

}