/* GLOBAL STYLES

-------------------------------------------------- */



html {

  box-sizing: border-box;

}



*,

*::before,

*::after {

  box-sizing: inherit;

}



html,

body {

  overflow-x: hidden;

}



body {

  font-family: "Montserrat", sans-serif;

  width: 100%;

  margin: 0;

  padding: 0;

  color: #5a5a5a;

}



h1 {

  color: #2b2d2f;

  font-family: "Playfair Display", serif;

  font-size: 9vw; /* Convertito */

}



h2 {

  color: #2b2d2f;

  font-family: "Playfair Display", serif;

  font-size: 8vw; /* Convertito */

  font-weight: bold;

}



h3 {

  font-size: 6vw; /* Convertito */

  font-weight: normal;

  color: #265d87;

  font-weight: bold;

}



p,

li {

  color: #5a5a5a;

  line-height: 1.7;

  font-size: 4vw; /* Standardizzato */

}



a {

  font-size: 4vw; /* Standardizzato */

}



@media (min-width: 600px) {

  h1 {

    font-size: 3.8vw; /* Convertito */

  }



  h2 {

    font-size: 2.5vw; /* Convertito */

  }

  h3 {

    font-size: 2vw; /* Convertito */

  }

  p,

  li {

    font-size: 1.5vw; /* Standardizzato */

  }

  a {

    font-size: 1.5vw; /* Standardizzato */

  }

}



@media (min-width: 800px) {

  h1 {

    font-size: 4.5vw; /* Convertito */

  }

  h2 {

    font-size: 3vw; /* Convertito */

  }

}



/* ==========================================================================

   Stili Generici Pagine

   ========================================================================== */



/* Header di pagina standard */

.page-header {

  padding: 30vw 10% 5vw 10%;

  background-color: #265d87;

  text-align: center;

}



.page-header h1 {

  color: #fff;

  font-size: 8vw;

  line-height: 1.2;

}



@media (min-width: 600px) {

  .page-header {

    padding: 12vw 10% 5vw 10%;

  }

  .page-header h1 {

    font-size: 4vw;

  }

}



@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%;

  }

}



/* Stili base della pagina (simili ad altre pagine) */

.section {

  width: 90%;

  position: relative; /* Necessario per il posizionamento assoluto dell'immagine */

  padding: 25vw 10% 10vw 10%;

  margin: 40vw auto;

  border: 4px solid #265d87;

  border-radius: 5vw;

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

}

.section.section-bg-gray {

  background-color: #f8f9fa;

  border: none;

}

.content {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.immagine-forma {

  position: absolute;

  top: -30vw;

  right: 19vw;

  width: 50vw;

  opacity: 1;

  z-index: 1;

  aspect-ratio: 1 / 1;

  overflow: hidden;

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

  border: 6px solid #fff;

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

}

.testo {

  position: relative;

  z-index: 2;

  text-align: center;

}

.testo p {

  text-align: justify;

}

.immagine-forma img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.immagine-forma.placeholder {

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  font-weight: 500;

}

.titolo {

  line-height: 1;

  margin-bottom: 10vw;

}

.titolo span {

  display: block;

}

.titolo .type1,

.titolo .type3 {

  font-size: 4.5vw;

  font-weight: 400;

  color: #a9a9a9;

  text-transform: uppercase;

}

.titolo .type2,

.titolo .type4 {

  font-size: 15vw;

  font-weight: bold;

  line-height: 0.8;

  text-transform: lowercase;

}

.titolo .type2 {

  color: #265d87;

}

.titolo .type3 {

  display: inline;

}

.titolo .type4 {

  display: inline;

  color: #2b2d2f;

}

.titolo .type2::first-letter,

.titolo .type4::first-letter {

  font-size: 1.5em;

  text-transform: uppercase;

}



/* Sezione Prefazione */

.section.prefazione {

  width: 100%;

  background-color: #265d87;

  padding: 0 10% 4vw 10%;

  margin: 0 auto;

  border: none;

  border-radius: 0;

  box-shadow: none;

}

.section.prefazione .testo {

  order: 2;

}

.section.prefazione .testo p {

  color: #fff;

}

.section.prefazione .immagine-forma {

  position: relative;

  margin: auto;

  width: 60%;

  top: 0;

  right: 0;

  order: 1;

}



/* Sezioni con sfondo */

.section-with-bg {

  position: relative;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}



/* Sezione Curiosità Link */

.curiosita-link-section {

  width: 100%;

  margin: 0 auto;

  padding: 10vw 10%;

  box-shadow: none;

  background-color: #2b8ea4;

  border: none;

  border-radius: 0;

  text-align: center;

}



.section-title-center {

  font-size: 15vw;

  color: #fff;

  margin-bottom: 5vw;

  font-weight: bold;

}



.curiosita-cards-container {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  align-items: center;

}



.curiosita-card {

  display: block;

  width: 90%;

  max-width: 600px;

  background-color: #fff;

  border-radius: 15px;

  padding: 5vw;

  text-align: left;

  text-decoration: none;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.curiosita-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  text-decoration: none;

}



.curiosita-card p {

  margin-bottom: 5vw;

}



.leggi-di-piu {

  color: #2b8ea4;

  font-weight: 600;

  text-decoration: none;

}



.leggi-di-piu i {

  margin-left: 0.5rem;

  transition: transform 0.3s ease;

}



.curiosita-card:hover .leggi-di-piu i {

  transform: translateX(5px);

}



/* Transizioni Ondulate */

.wavy-blue,

.wavy-gray,

.wavy-white,

.wavy-curiosita {

  position: relative;

  z-index: 1; /* Per garantire che le onde siano visibili */

}



.wavy-curiosita::before,

.wavy-blue::after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  -webkit-mask-size: cover;

  mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: top left;

}

/* Onda in alto (::before) */

.wavy-curiosita::before {

  top: 0;

  height: 14vw;

  margin-top: -14vw;

}



.wavy-blue::after {

  background-color: #265d87;

}

.wavy-curiosita::before {

  background-color: #2b8ea4;

}



/* Onda in basso (::after) */

.wavy-blue::after {

  bottom: 0;

  height: 13vw;

  transform: scaleY(-1);

  margin-bottom: -12vw;

}

/* --- Forme d'onda differenziate --- */



/* Esempio di onda animata per WAVY-BLUE */

.wavy-blue::after {

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='15s' repeatCount='indefinite' values='M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,85.3C672,64,768,64,864,80C960,96,1056,128,1152,128C1248,128,1344,96,1392,80L1440,64L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z; M0,64L48,80C96,96,192,128,288,122.7C384,117,480,75,576,69.3C672,64,768,96,864,106.7C960,117,1056,107,1152,85.3C1248,64,1344,32,1392,16L1440,0L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z; M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,85.3C672,64,768,64,864,80C960,96,1056,128,1152,128C1248,128,1344,96,1392,80L1440,64L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='15s' repeatCount='indefinite' values='M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,85.3C672,64,768,64,864,80C960,96,1056,128,1152,128C1248,128,1344,96,1392,80L1440,64L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z; M0,64L48,80C96,96,192,128,288,122.7C384,117,480,75,576,69.3C672,64,768,96,864,106.7C960,117,1056,107,1152,85.3C1248,64,1344,32,1392,16L1440,0L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z; M0,96L48,112C96,128,192,160,288,154.7C384,149,480,107,576,85.3C672,64,768,64,864,80C960,96,1056,128,1152,128C1248,128,1344,96,1392,80L1440,64L1440,160L1392,160C1344,160,1248,160,1152,160C1056,160,960,160,864,160C768,160,672,160,576,160C480,160,384,160,288,160C192,160,96,160,48,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

}



/* Onda per WAVY-CURIOSITA (Animata) */

.wavy-curiosita::before {

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='22s' repeatCount='indefinite' values='M0,128L40,112C80,96,160,64,240,58.7C320,53,400,75,480,101.3C560,128,640,160,720,160C800,160,880,128,960,106.7C1040,85,1120,75,1200,85.3C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z; M0,96L40,106.7C80,117,160,139,240,128C320,117,400,75,480,64C560,53,640,75,720,90.7C800,107,880,117,960,112C1040,107,1120,85,1200,90.7C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z; M0,128L40,112C80,96,160,64,240,58.7C320,53,400,75,480,101.3C560,128,640,160,720,160C800,160,880,128,960,106.7C1040,85,1120,75,1200,85.3C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='22s' repeatCount='indefinite' values='M0,128L40,112C80,96,160,64,240,58.7C320,53,400,75,480,101.3C560,128,640,160,720,160C800,160,880,128,960,106.7C1040,85,1120,75,1200,85.3C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z; M0,96L40,106.7C80,117,160,139,240,128C320,117,400,75,480,64C560,53,640,75,720,90.7C800,107,880,117,960,112C1040,107,1120,85,1200,90.7C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z; M0,128L40,112C80,96,160,64,240,58.7C320,53,400,75,480,101.3C560,128,640,160,720,160C800,160,880,128,960,106.7C1040,85,1120,75,1200,85.3C1280,96,1360,128,1400,144L1440,160L1440,160L1400,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

}



/* Stili per Desktop */

@media (min-width: 600px) {

  .section {

    width: 100%;

    padding: 10vw 10%;

    margin: 0 auto;

    border: none;

    border-radius: 0;

    box-shadow: none;

  }

  .section.section-bg-gray {

    padding: 3vw 10%;

  }

  .section.prefazione .testo {

    order: 1;

  }

  .section.prefazione .immagine-forma {

    width: 100%;

    order: 2;

  }

  .content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4vw;

    align-items: center;

  }

  .titolo {

    margin-bottom: 3vw;

  }

  .testo {

    text-align: left;

  }

  .immagine-forma {

    position: relative;

    width: 100%;

    opacity: 1;

    right: auto;

    top: auto;

    z-index: auto;

  }

  .section.section-reverse .testo {

    order: 2;

  }

  .section.section-reverse .immagine-forma {

    order: 1;

  }

  .titolo .type1,

  .titolo .type3 {

    font-size: 2.5vw;

  }

  .titolo .type2,

  .titolo .type4 {

    font-size: 9vw;

  }

  .curiosita-link-section {

    padding: 2vw 10% 10vw 10%;

  }

  .curiosita-cards-container {

    flex-direction: row;

  }

  .section-title-center {

    font-size: 6vw;

  }

  .curiosita-card {

    padding: 1.6vw;

  }



  .wavy-white {

    padding-bottom: 3vw;

  }



  .wavy-gray::before,

  .wavy-white::after,

  .wavy-gray::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;

    -webkit-mask-size: cover;

    mask-size: cover;

    -webkit-mask-repeat: no-repeat;

    -webkit-mask-position: top left;

  }

  /* Onda in alto (::before) */

  .wavy-gray::before {

    top: 0;

    height: 14vw;

    margin-top: -14vw;

  }



  .wavy-gray::before,

  .wavy-gray::after {

    background-color: #f8f9fa;

  }



  .wavy-white::after {

    background-color: #fff;

  }



  /* Onda in basso (::after) */

  .wavy-white::after,

  .wavy-gray::after {

    bottom: 0;

    height: 13vw;

    transform: scaleY(-1);

    margin-bottom: -12vw;

  }



  /* --- Forme d'onda differenziate --- */

  .wavy-white::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='25s' repeatCount='indefinite' values='M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,106.7C1120,117,1280,107,1360,101.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z; M0,32L80,53.3C160,75,320,117,480,117.3C640,117,800,75,960,64C1120,53,1280,75,1360,85.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z; M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,106.7C1120,117,1280,107,1360,101.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='25s' repeatCount='indefinite' values='M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,106.7C1120,117,1280,107,1360,101.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z; M0,32L80,53.3C160,75,320,117,480,117.3C640,117,800,75,960,64C1120,53,1280,75,1360,85.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z; M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,106.7C1120,117,1280,107,1360,101.3L1440,96L1440,160L1360,160C1280,160,1120,160,960,160C800,160,640,160,480,160C320,160,160,160,80,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

  }



  /* Versione 4: Onde Increspate (Animata) */

  .wavy-gray::after {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='20s' repeatCount='indefinite' values='M0,96L30,101.3C60,107,120,117,180,117.3C240,117,300,107,360,90.7C420,75,480,53,540,58.7C600,64,660,96,720,117.3C780,139,840,149,900,138.7C960,128,1020,96,1080,85.3C1140,75,1200,85,1260,106.7C1320,128,1380,160,1410,176L1440,192L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z; M0,128L30,117.3C60,107,120,85,180,90.7C240,96,300,128,360,133.3C420,139,480,117,540,101.3C600,85,660,75,720,90.7C780,107,840,149,900,154.7C960,160,1020,128,1080,112C1140,96,1200,96,1260,101.3C1320,107,1380,117,1410,122.7L1440,128L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z; M0,96L30,101.3C60,107,120,117,180,117.3C240,117,300,107,360,90.7C420,75,480,53,540,58.7C600,64,660,96,720,117.3C780,139,840,149,900,138.7C960,128,1020,96,1080,85.3C1140,75,1200,85,1260,106.7C1320,128,1380,160,1410,176L1440,192L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='20s' repeatCount='indefinite' values='M0,96L30,101.3C60,107,120,117,180,117.3C240,117,300,107,360,90.7C420,75,480,53,540,58.7C600,64,660,96,720,117.3C780,139,840,149,900,138.7C960,128,1020,96,1080,85.3C1140,75,1200,85,1260,106.7C1320,128,1380,160,1410,176L1440,192L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z; M0,128L30,117.3C60,107,120,85,180,90.7C240,96,300,128,360,133.3C420,139,480,117,540,101.3C600,85,660,75,720,90.7C780,107,840,149,900,154.7C960,160,1020,128,1080,112C1140,96,1200,96,1260,101.3C1320,107,1380,117,1410,122.7L1440,128L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z; M0,96L30,101.3C60,107,120,117,180,117.3C240,117,300,107,360,90.7C420,75,480,53,540,58.7C600,64,660,96,720,117.3C780,139,840,149,900,138.7C960,128,1020,96,1080,85.3C1140,75,1200,85,1260,106.7C1320,128,1380,160,1410,176L1440,192L1440,160L1410,160C1380,160,1320,160,1260,160C1200,160,1140,160,1080,160C1020,160,960,160,900,160C840,160,780,160,720,160C660,160,600,160,540,160C480,160,420,160,360,160C300,160,240,160,180,160C120,160,60,160,30,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

  }



  /* Versione 3: Onde Asimmetriche (Animata) */

  .wavy-gray::before {

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='18s' repeatCount='indefinite' values='M0,64L60,85.3C120,107,240,149,360,149.3C480,149,600,107,720,90.7C840,75,960,85,1080,90.7C1200,96,1320,96,1380,96L1440,96L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z; M0,96L60,101.3C120,107,240,117,360,106.7C480,96,600,64,720,58.7C840,53,960,75,1080,96C1200,117,1320,139,1380,149.3L1440,160L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z; M0,64L60,85.3C120,107,240,149,360,149.3C480,149,600,107,720,90.7C840,75,960,85,1080,90.7C1200,96,1320,96,1380,96L1440,96L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'%3E%3Cpath fill='%23fff'%3E%3Canimate attributeName='d' dur='18s' repeatCount='indefinite' values='M0,64L60,85.3C120,107,240,149,360,149.3C480,149,600,107,720,90.7C840,75,960,85,1080,90.7C1200,96,1320,96,1380,96L1440,96L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z; M0,96L60,101.3C120,107,240,117,360,106.7C480,96,600,64,720,58.7C840,53,960,75,1080,96C1200,117,1320,139,1380,149.3L1440,160L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z; M0,64L60,85.3C120,107,240,149,360,149.3C480,149,600,107,720,90.7C840,75,960,85,1080,90.7C1200,96,1320,96,1380,96L1440,96L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z' /%3E%3C/path%3E%3C/svg%3E");

  }

}



/*---------------------Footer-----------------------*/

footer {

  width: 100%;

  background-color: #272727;

  padding: 60px 0 0 0;

  color: #a9a9a9;

}



.footer-container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 15px;

}



.footer-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 0rem;

}



.footer-col {

  flex: 1 1 100%; /* Colonne a tutta larghezza su mobile */

  margin-bottom: 30px;

}



@media (min-width: 768px) {

  .footer-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 2rem;

  }

  .footer-col {

    margin-bottom: 0;

  }

}



footer h2 {

  color: #fff;

  font-size: 1.2rem;

  margin-bottom: 1.5rem;

  font-family: "Playfair Display", serif;

}



footer p,

footer a,

footer li {

  color: #a9a9a9;

  font-size: 0.95rem;

  text-decoration: none;

}



footer a:hover {

  color: #fff;

  text-decoration: none;

}



.footer-contacts,

.footer-links {

  list-style: none;

  padding-left: 0;

}



.footer-contacts li {

  display: flex;

  align-items: center;

  margin-bottom: 0.8rem;

}



.footer-contacts i {

  width: 25px;

  margin-right: 10px;

  color: #2b8ea4;

}



.footer-links li {

  margin-bottom: 0.5rem;

}



.footer-social {

  display: flex;

  gap: 1rem;

}



.footer-social a {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid #5a5a5a;

  color: #a9a9a9;

  transition: all 0.3s ease;

}



.footer-social a:hover {

  background-color: #2b8ea4;

  border-color: #2b8ea4;

  color: #272727;

}



.copyright {

  width: 100%;

  background-color: #151515;

  padding: 25px 0;

  margin-top: 30px;

  text-align: center;

}



.copyright p,

.copyright a {

  font-size: 0.85rem;

  margin: 0;

}



/* Stili per la Modale Personalizzata */

.body-modal-open {

  overflow: hidden;

}



.custom-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1050;

  display: flex;

  align-items: center;

  justify-content: center;

}



.modal-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

}



.modal-content-wrapper {

  position: relative;

  background-color: #fff;

  border-radius: 8px;

  width: 90%;

  max-width: 800px;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

}



.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem;

  border-bottom: 1px solid #dee2e6;

}



.modal-title {

  margin: 0;

  font-size: 1.25rem;

  font-family: "Playfair Display", serif;

}



.modal-close-btn {

  background: transparent;

  border: 0;

  font-size: 1.5rem;

  font-weight: 700;

  line-height: 1;

  color: #000;

  opacity: 0.5;

  cursor: pointer;

}



.modal-close-btn:hover {

  opacity: 0.8;

}



.modal-body {

  padding: 1rem;

  overflow-y: auto;

}



.modal-body h3 {

    margin-top: 1.5rem;

}