/* ! Base Style */
/* ----------------------------------------------------------------------------------- */
body{width: 100vw; overflow-x: hidden; margin: 0; font-size: 16px; background: linear-gradient(0deg, #201616 0.37%, #120101 99.82%); font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;}
a{text-decoration: none;color: #F75E47}
p{line-height: 1.3}




/* ! Title System */
/* ----------------------------------------------------------------------------------- */
.text-0{font-size: 5rem;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}

  .trainer-p .tesi-link {
    color: red;
    text-decoration: none;
    transition: color 0.3s;
  }

  .trainer-p .tesi-link:hover {
    text-decoration: underline;
  }

  @media screen and (max-width: 768px) {
    .mobile-trainer-spacing {
      display: block;
      margin-top: 110px !important; /* 🔥 Forza il margine superiore solo su mobile */
    }
  }
  

  

/* ! Button system */
/* ----------------------------------------------------------------------------------- */

.button:hover,
.wp-block-button__link:hover,
a.wp-block-button__link.wp-element-button:hover{background: #fff!important; color:#FC001C!important}

/* Forzatura andata a capo per bottone SCARICA GUIDA */
a.wp-block-button__link[href="#servizi"] {
  white-space: normal !important;
  line-height: 1.3 !important;
  max-width: 100% !important; /* Su desktop larghezza completa */
  padding: 15px 25px !important;
}

/* Versione mobile con larghezza ridotta */
@media (max-width: 768px) {
  a.wp-block-button__link[href="#servizi"] {
    max-width: 250px !important;
  }
}

.red-button{
  background: #FC001C;
  border-radius: 8px;
  color: #fff;
}

a.wp-block-button__link.wp-element-button {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 20px 25px;
  display: flex;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #FC001C;
  position: relative; /* Assicura che possa essere spostato */
  top: -15px; /* SPOSTA IL PULSANTE LEGGERMENTE IN ALTO */
}




/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 600px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

/* ! Header */
/*----------------------------------------------------------------------------------- */

/* 🔹 HEADER DESKTOP */
@media (min-width: 769px) {
  .header-container {
      background-color: #1A1212!important; /* Sfondo scuro */
      position: fixed; /* Fisso in alto */
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000; /* Assicura che stia sopra gli altri elementi */
  }

  .header {
      display: flex;
      align-items: center;
      max-width: 1200px;
      width: 100%;
      position: relative;
  }

  /* 🔹 Logo più a sinistra */
  .header__logo {
      flex: 0 1 auto; /* Il logo non si allarga */
      text-align: left;
      margin-right: auto; /* Spinge il menu al centro */
  }

  .header__logo img {
      height: 60px;
      max-width: 90px;
      margin: 5px 0;
  }

  /* 🔹 MENU CENTRATO */
  .header__menu {
      flex: 1; /* Occupa lo spazio disponibile */
      display: flex;
      justify-content: center; /* Centra le voci del menu */
      align-items: center;
  }

  .header__menu-list {
      display: flex;
      gap: 40px; /* Spazio tra le voci */
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .header__menu-list li {
      display: inline-block;
  }

  .header__menu-list li a {
      text-decoration: none;
      font-size: 16px;
      color: white;
      transition: color 0.3s ease-in-out;
  }

  .header__menu-list li a:hover {
      color: #FC001C;
  }

  /* 🔹 ICONE SOCIAL A DESTRA */
  .header-social {
      flex: 0 1 auto; /* Non si allarga */
      display: flex;
      gap: 15px;
      align-items: center;
      margin-left: auto; /* Spinge tutto a destra */
  }

  .header-social img {
      width: 24px; /* Dimensione uniforme */
      height: 24px;
      object-fit: contain;
      transition: transform 0.3s ease-in-out;
  }

  .header-social img:hover {
      transform: scale(1.1); /* Effetto ingrandimento */
  }
}


@media (max-width: 768px) {
  .header-container {
      background: #FC001C;
      padding: 10px 15px;
      height: auto; /* Evita che sia troppo alto */
      z-index: 9999 !important; /* Deve essere sopra il video */
  }

  .header {
      justify-content: space-between;
      height: 60px; /* Impedisce che l'header si espanda troppo */
      display: flex;
      align-items: center;
  }

  /* 🔹 Logo a sinistra */
  .header__logo {
      flex: 1;
      text-align: left;
  }

  .header__logo img {
      height: 25px;
      max-width: 90px;
  }

  /* 🔹 Hamburger a destra */
  .header__hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 35px;
      height: 35px;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 99999 !important; /* Mette l'hamburger sopra tutto */
  }

  .header__hamburger span {
      width: 35px;
      height: 3px;
      background-color: white;
      position: absolute;
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  /* 🔹 Posizioniamo le due barre */
  .header__hamburger span:nth-child(1) {
      top: 8px;
  }

  .header__hamburger span:nth-child(2) {
      bottom: 8px;
  }

  /* 🔹 Effetto X quando il menu è aperto */
  .is-active span:nth-child(1) {
      transform: rotate(45deg) translate(6px, 6px);
  }

  .is-active span:nth-child(2) {
      transform: rotate(-45deg) translate(6px, -6px);
  }

  /* 🔹 Assicura che la X sia visibile */
  .is-active span {
      background-color: white !important;
  }

 /* 🔹 MENU MOBILE */
.header__menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #FC001C;
  overflow: hidden;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateY(-100%);
  opacity: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 🔹 Fix: Il menu ora si apre */
.menu-active {
  transform: translateY(0);
  opacity: 1;
}

/* 🔹 Voci del menu in verticale */
.header__menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
}

.header__menu ul li {
  display: block; /* Ogni voce di menu è un blocco */
  font-size: 1.4rem;
  padding: 15px 0;
}

/* 🔹 Stile dei link */
.header__menu ul li a {
  color: white; /* 🔥 Testo bianco di default */
  text-decoration: none;
  transition: color 0.3s ease-in-out; /* 🔥 Transizione morbida */
}

/* 🔹 Effetto hover e al clic: SOLO il testo diventa nero */
.header__menu ul li a:hover,
.header__menu ul li a:focus {
  color: black !important; /* 🔥 Testo nero senza sfondo */
}

/* 🔹 Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Ora copre tutto lo schermo */
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999;
}

body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
}

/* 🔹 Blocca lo scroll della pagina quando il menu è aperto */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

/* 🔹 Corregge il rosso in eccesso sotto l'header */
body:not(.menu-open) .header-container {
  border-bottom: none;
}

/* 🔹 Logo migliorato */
.header__logo img {
  height: 40px;
  max-width: 90px;
}

}


@media (max-width: 768px) {
  /* Rimuove spazio extra tra header e video */
  .hero-mobile {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0;
    margin: 0;
  }

  /* Assicura che il video sia attaccato all'header */
  .hero-mobile video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  /* Rimuove margini extra sul contenuto */
  .hero-content {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: 90%;
    margin: auto;
  }

  /* Assicura che l'header sia ben posizionato */
  .header-container {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10000 !important;
    background: #FC001C;
  }

  /* Fix margine extra su altre sezioni */
  .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}



/*  -----------------------------------------------------------------------------------------------
  Hero
--------------------------------------------------------------------------------------------------- */
.bg-hero {
  background: linear-gradient(358deg, #000 1.97%, #4F0403 218.17%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 0;
}

#home.hero-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 100vh;
  padding: 5vh 5vw 3vh; /* Aggiunto padding superiore per distanziarlo dall'header */
  position: relative;
}

/* Se serve più controllo con margin */
#home.hero-desktop::before {
  content: "";
  display: block;
  height: 10vh; /* Distanza minima fissa dall'header */
}

.hero-desktop .hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85vw;
  max-width: 1600px;
}

/* Divisione in colonne bilanciata */
.hero-desktop .hero-text {
  flex: 1;
  width: 45%;
  text-align: left;
  z-index: 2;
  position: relative;
}

.hero-desktop .hero-text h1 {
  font-size: 4vw;
  line-height: 1.1;
  font-weight: bold;
  margin-bottom: 1vh;
}

.hero-desktop .hero-text p {
  font-size: 1.5vw;
  max-width: 90%;
  color: white;
  margin-bottom: 2vh;
}

.hero-desktop .hero-text .highlight {
  color: #FF001F;
  font-weight: bold;
}

.hero-desktop .hero-image {
  flex: 1;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 90vh;
}

.hero-desktop .hero-image img {
  width: 42vw;
  max-width: 650px;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
}

/* Mantiene la coerenza della sezione su schermi grandi */
@media screen and (min-width: 1920px) {
  .hero-desktop .hero-content {
      max-width: 1400px;
  }
  .hero-desktop .hero-text h1 {
      font-size: 3vw;
  }
  .hero-desktop .hero-text p {
      font-size: 1vw;
  }
}

@media screen and (min-width: 1024px) { 
  div.hero-mobile {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
  }
}


.img-1 {
  flex: 1;
  transform: translateY(-80px); 
}

.img-1 img{
  width: 100%; /* L'immagine si adatta al contenitore */
}

/* 🔹 Nasconde la versione mobile su desktop */
.hero-mobile {
  display: none;
}

/* 🔹 HERO MOBILE FIX */
@media (max-width: 768px) {
  /* Nasconde SOLO la hero desktop su mobile */
  .hero-desktop {
    display: none !important;
  }
}


  /* 🔹 Mostra la hero mobile */
  .hero-mobile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  /* 🔹 Overlay MOLTO scuro per il video */
.hero-mobile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* 🔥 Scurisce molto il video */
  z-index: 1; /* Mantiene l'overlay sopra il video */
}

  /* 🔹 Video di sfondo */
  .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita distorsioni */
    z-index: 0; /* 🔥 Mantiene il video dietro all'overlay */
}
  /* 🔹 Contenuto sopra il video */
  .hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    max-width: 90%;
  }

  .hero-content h1 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .hero-content p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
  }

  /* 🔹 Bottone */
  .hero-content .button {
    display: inline-block;
    background: #FF001F;
    color: white;
    padding: 12px 20px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 15px;
    transition: background 0.3s ease-in-out;
  }

  .hero-content .button:hover {
    background: #C8001A;
  }

  /* 🔹 Fix Header e Hamburger */
  .header-container {
    position: fixed; /* Fisso in alto */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10001 !important; /* Assicura che sia sopra il video */
    background: #FC001C;
  }

  /* 🔹 Assicura visibilità dell'hamburger */
  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10002 !important; /* Mantiene l'hamburger sopra il video */
  }


/*  -----------------------------------------------------------------------------------------------
  Cards
--------------------------------------------------------------------------------------------------- */
.bg-cards{
  background: linear-gradient(180deg, #000 0%, #4F0403 136.8%);
}

.second-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 80px;
  height: auto;
  padding: 10px;
  transform: translateY(-150px); /* Mantiene il sollevamento su desktop */
  max-width: 1300px; /* Impedisce che le card si allarghino troppo */
  margin: 0 auto; /* Centra il contenuto */
}

/* Mantiene il design originale della card */
.rectangle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(33.33% - 54px); /* Assicura che ci siano sempre 3 card per riga con gap */
  min-height: 670px; /* Cambiato height in min-height per adattabilità */
  border-radius: 8px;
  border: 3px solid #790412;
  background: linear-gradient(180deg, #353434 0.22%, #120101 99.76%);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* Video Box */
.video-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 309px;
  height: 421px;
  padding-top: 20px;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottone Play */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

/* Testo e Liste */
.box {
  text-align: center;
  padding: 20px;
  width: 100%;
  flex-grow: 1; /* Permette al contenuto di espandersi */
}

.red-text {
  color: #FF001F;
  font-size: 22px;
  margin-bottom: 10px;
}

.custom-list,
.custom-list-2,
.custom-list-3 {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  text-align: center;
}

.custom-list li,
.custom-list-2 li,
.custom-list-3 li {
  font-size: 16px;
  margin-bottom: 8px;
}

/* 🟢 RISOLUZIONE DEL PROBLEMA SU MOBILE */
@media screen and (max-width: 768px) {
  .second-section {
    flex-direction: column;
    gap: 50px;
    padding: 50px 10px;
    transform: none;
    height: auto;
  }

  .rectangle {
    width: 90%;
    max-width: 404px;
    min-height: auto; /* Permette alla card di adattarsi */
    padding: 20px;
    margin-bottom: 40px; /* Aumentato per evitare che si sovrapponga alla sezione successiva */
  }

  .video-box {
    width: 100%;
    height: auto;
  }

  .video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .play-button {
    top: 50%;
  }

  .box {
    padding: 20px;
    width: 100%;
    flex-grow: 1; /* Permette ai testi di adattarsi senza schiacciarsi */
  }

  .red-text {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .custom-list li,
  .custom-list-2 li,
  .custom-list-3 li {
    font-size: 14px;
    margin-bottom: 10px;
  }
}


/*  -----------------------------------------------------------------------------------------------
  Trainer Section
--------------------------------------------------------------------------------------------------- */



/* Centra il testo e aggiunge margine laterale solo su mobile */
@media screen and (max-width: 768px) {
  .text-center-mobile {
    text-align: center !important;
    margin-left: 20px;
    margin-right: 20px;
  }

  /* 🔹 CORRETTO: Il bottone sarà centrato correttamente su mobile */
  .button-center-mobile {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    width: 100%; /* Fa sì che il bottone occupi tutta la riga */
    margin: 20px auto !important; /* Spazio sopra e sotto, auto per centrarlo */
  }

  /* Se il bottone ha un contenitore, centrarlo anche lì */
  .button-center-mobile a {
    display: inline-block !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 768px) {
  .mobile-text-style {
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    text-align: center; /* Opzionale: se vuoi che il testo sia centrato */
  }
}

@media screen and (max-width: 768px) {
  .mobile-paragraph-spacing {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}



.trainer-p {
color: #FFF;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
font-variant: small-caps;
}


@media screen and (min-width: 1024px) { 
  

  .heading {
  color: rgba(255, 255, 255, 0.21);
  font-size: 4rem;
  font-style: normal;
  font-weight: 900;
  line-height: 129.273%; /* 124.102px */
  }

  .heading-dove {
    color: rgba(255, 255, 255, 0.9);
    font-size: 4rem;
    font-style: normal;
    font-weight: 900;
    line-height: 129.273%; /* 124.102px */
    }

  .heading-2 {
  color: #FFF;
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 129.273%; /* 51.709px */
  transform: translateY(-65px);
  }
}

  

  @media screen and (max-width: 768px) {
    .heading {
      display: none !important;
    }
  }
  
  

/*  -----------------------------------------------------------------------------------------------
  Offerte
--------------------------------------------------------------------------------------------------- */


/* 🔥 Stile generale delle card */
.grey-col {
  flex-shrink: 0;
  border: 3px solid #343232;
  background: linear-gradient(180deg, #ADADAD 0%, #343232 100%);
  padding: 25px; /* 🔥 Aumentato leggermente il padding */
  min-height: 300px; /* 🔥 Altezza leggermente aumentata */
  max-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* 🔥 Hover su tutta la card */
.grey-col:hover {
  transform: scale(1.08);
  border: 3px solid #CD051E;
  border-radius: 10px;
  background: linear-gradient(180deg, #6C0411 0%, #830515 21.81%, #950617 39.98%, #9B0618 45.47%, #AB071B 61.24%, #C4081F 85.59%, #6B0512 100%);
  color: white;
}

/* 🔥 Titoli migliorati */
.first-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 40px;
  padding: 6px 12px; /* 🔥 Padding aumentato per dare respiro */
  border-radius: 10px;
  border: 3px solid #ADADAD;
  background: #585254;
  font-size: clamp(14px, 2.8vw, 17px); /* 🔥 Font leggermente più grande */
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
  margin-bottom: 5px !important; /* 🔥 Aggiunto spazio tra titolo e prezzo */
}

/* 🔥 Hover su titolo */
.grey-col:hover .first-header {
  border: 3px solid #CD051E;
  background: linear-gradient(180deg, #6C0411 0%, #830515 21.81%, #950617 39.98%, #9B0618 45.47%, #AB071B 61.24%, #C4081F 85.59%, #6B0512 100%);
  color: white;
  transform: scale(1.08);
}

/* 🔥 Prezzi migliorati */
.text-price {
  font-size: clamp(22px, 4.8vw, 26px);
  font-weight: bold;
  margin: 8px 0 !important; /* 🔥 Aumentato leggermente lo spazio */
  padding: 0 !important;
  text-align: center;
  line-height: 1 !important;
}

/* 🔥 Lista icone migliorata */
.lista-svg {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 140px; /* 🔥 Leggermente aumentato */
}

/* 🔥 Allineamento dei bullet points */
.lista-svg li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* 🔥 Aumentata la distanza tra icona e testo */
  min-height: 30px; /* 🔥 Leggermente più grande */
  width: 100%;
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🔥 Dimensione migliorata per le icone */
.lista-svg svg {
  width: 26px; /* 🔥 Un tocco più grande per armonizzare con il testo */
  height: 26px;
  flex-shrink: 0;
}

/* 🔥 Testo dei bullet point migliorato */
.text-4 {
  font-size: clamp(15px, 2.6vw, 17px);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

/* 🔥 Ottimizzazione mobile */
@media screen and (max-width: 768px) {

  .first-header{
    font-size: 1.5rem;
  }

  .grey-col {
    max-width: 70%;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    padding: 18px;
  }

  .grey-col:hover {
    transform: none !important;
  }

  .grey-col p, 
  .grey-col svg {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .lista-svg {
    min-height: 120px;
  }

  .lista-svg li {
    min-height:35px;
  }
}

/* 🔥 Lista icone migliorata */
.lista-svg {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 140px; /* 🔥 Altezza regolata */
}

/* 🔥 Stile bullet point */
.lista-svg li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px; /* 🔥 Spazio tra icona e testo */
  min-height: 28px; /* 🔥 Altezza regolata */
  width: 100%;
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🔥 Adatta la dimensione del testo per gli schermi piccoli */
.text-4 {
  font-size: 0.7rem; /* 🔥 Regolato per il responsive */
  line-height: 1.2;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🔥 Responsività migliorata */
@media screen and (max-width: 768px) {
  .lista-svg {
    min-height: auto; /* 🔥 Rimuove altezza fissa */
  }

  .lista-svg li {
    min-height: 22px; /* 🔥 Ridotto per mantenere compattezza */
    white-space: normal; /* 🔥 Permette l'andata a capo */
  }

  .text-4 {
    font-size: 12px; /* 🔥 Ridotto leggermente sui dispositivi più piccoli */
  }
}


/*  -----------------------------------------------------------------------------------------------
  Dove Ci Alleniamo
--------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  
  /* 🔹 Ottimizza l'immagine di sfondo su mobile */
  .dove-section {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 20px 0;
    position: relative;
  }

  /* 🔹 Overlay SOLO per l'immagine, non per il testo */
  .dove-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 🔥 Opacità 50% SOLO per lo sfondo */
    z-index: 0; /* Sta sotto tutti gli elementi */
  }

  /* 🔹 Manteniamo il testo sopra l'overlay */
  .dove-section h2,
  .dove-section p {
    position: relative;
    z-index: 2; /* Assicura che il testo stia sopra l'overlay */
  }

  /* 🔹 Gradiente rosso dietro il testo */
  .dove-section p::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50vw;
    right: -50vw;
    height: 100%;
    background: linear-gradient(to right, rgba(61, 3, 3, 0.56), rgba(61, 3, 3, 0.9));
    z-index: -1; /* Sta dietro al testo */
  }

  /* 🔹 Migliora la leggibilità del testo su mobile */
  .dove-section p {
    font-size: 4.5vw;
    max-width: 90%;
    text-align: center;
    margin: 0 auto;
    padding: 15px 0;
  }
}

/* 🔹 Overlay per la versione DESKTOP (20-30% di opacità) */
.dove-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05); /* 🔥 Opacità del 20% su desktop */
  z-index: 0; /* Sta sotto tutto il contenuto */
}


.dove-section {
  position: relative; /* Necessario per il posizionamento del pulsante */
  background-image: url('https://flaviosannapt.it/wp-content/uploads/2025/03/palweb.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* Effetto parallasse */
  min-height: 450px; /* 🔥 Ridotto rispetto ai 600px di prima */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px; /* 🔥 Meno padding per ridurre ancora l'altezza */
}



  .dove-section p {
    max-width: 600px; /* Il testo rimane dentro questa larghezza */
    margin: 0 auto; /* Centra il testo */
    position: relative; /* Permette al pseudo-elemento di sovrapporsi */
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    font-variant: all-small-caps;
    line-height: normal;
    z-index: 1; /* Assicura che il testo sia sopra lo sfondo */
    padding: 20px 0; /* Spaziatura per evitare che il testo tocchi i bordi */
  }

  .dove-section p::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50vw; /* Estende a sinistra */
    right: -50vw; /* Estende a destra */
    height: 100%;
    background: linear-gradient(to right, rgba(61, 3, 3, 0.56), rgba(61, 3, 3, 0.9));
    z-index: -1; /* Lo sfondo rimane dietro il testo */
  }

  .dove-button{
    transform: translateY(80px);
  }

  .wp-block-button {
    display: inline-block;
}

.wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    background-color: #CD051E;
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out, width 0.4s ease-in-out;
    position: relative;
    min-width: max-content; /* Si adatta solo al testo */
}

/* Nasconde completamente il wrapper dell'icona */
.button-icon-wrapper {
    display: none; /* Nessuno spazio prima dell'hover */
    align-items: center;
    justify-content: center;
    width: 30px; /* Ridotto da 40px a 30px per meno spazio */
}

/* Stile dell'icona */
.button-icon {
    width: 20px; /* Icona leggermente più piccola */
    height: auto;
    stroke: white;
    fill: none;
}

/* Effetto hover: il pulsante si allarga e l'icona appare con transizione più smooth */
.wp-block-button__link:hover {
    background-color: #9B0618;
    padding-right: 10px; /* Ridotto il padding a destra */
    display: flex;
    transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out, width 0.4s ease-in-out;
}

/* All'hover, il wrapper dell'icona viene mostrato */
.wp-block-button__link:hover .button-icon-wrapper {
    display: flex;
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Cambia il colore dell'icona all'hover */
.wp-block-button__link:hover .button-icon {
  stroke: #CD051E;
}

/* ! Slider */

/* Stile per il lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

/* Dimensioni immagine ottimizzate per mobile e desktop */
.lightbox-img {
    max-width: 90%; /* Limita la larghezza al 90% dello schermo */
    max-height: 90vh; /* Altezza massima al 90% della viewport */
    border-radius: 10px;
}

/* Riduci le dimensioni dell'immagine su desktop */
@media screen and (min-width: 768px) {
    .lightbox-img {
        max-width: 60%; /* Riduci la larghezza su desktop */
        max-height: 70vh; /* Mantieni una buona proporzione verticale */
    }
}

/* Pulsante di chiusura */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}


.mySwiper {
  width: 95%; /* Aumentiamo un po' la larghezza */
  max-width: 1300px; /* Più largo per immagini più grandi */
  margin: auto;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: center; /* Allinea perfettamente le immagini */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  max-height: 400px; /* Aumentiamo l'altezza per immagini più grandi */
  object-fit: contain; /* Evita che le immagini vengano tagliate */
  border-radius: 10px; /* Opzionale: arrotonda gli angoli */
}

/* Cambia il colore delle frecce */
.swiper-button-next,
.swiper-button-prev {
    color: #FC001C !important; /* Cambia colore alle frecce */
}

/* Cambia il colore dei bullet della paginazione */
.swiper-pagination-bullet {
    background: #FC001C !important; /* Cambia colore dei puntini */
    opacity: 1; /* Assicura che siano visibili */
}

/* Cambia il colore del bullet attivo */
.swiper-pagination-bullet-active {
    background: #FC001C !important;
    transform: scale(1.2); /* Opzionale: ingrandisce il bullet attivo */
}

/* ! Slider 2 */

/* Contenitore del secondo slider */
.testimonialSwiper {
  width: 80%;
  max-width: 900px;
  margin: auto;
  text-align: center;
  position: relative;
  overflow: hidden !important;
}

/* Struttura delle slide */
.testimonialSwiper .swiper-slide {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Testo giustificato */
.testimonial-text {
  font-size: 20px;
  font-style: italic;
  color: white;
  max-width: 700px;
  line-height: 1.6;
  text-align: justify;
  padding: 0 20px;
}

/* Nome autore centrato */
.testimonial-author {
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

/* Frecce per testimonianze */
.testimonial-next,
.testimonial-prev {
  color: #FC001C !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
}

/* Allinea le frecce rispetto al contenitore */
.testimonial-next {
  right: -80px;
}

.testimonial-prev {
  left: -80px;
}

/* Paginazione più in basso */
.testimonial-pagination {
  bottom: -40px !important;
}

/* Stile dei bullet */
.testimonial-pagination .swiper-pagination-bullet {
  background: #FC001C !important;
  opacity: 1;
}

/* Bullet attivo */
.testimonial-pagination .swiper-pagination-bullet-active {
  background: #FC001C !important;
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
  /* 🔹 Testo delle testimonianze con giustificazione e interlinea migliorata */
  .testimonial-text {
    font-size: 16px; /* 🔥 Testo compatto ma leggibile */
    line-height: 1.6; /* 🔥 Migliora la spaziatura tra le righe */
    text-align: justify; /* 🔥 Giustifica il testo per migliorare l'estetica */
    padding: 0 15px; /* 🔥 Aggiunge margine laterale per evitare che il testo tocchi i bordi */
  }

  /* 🔹 Nome autore ottimizzato */
  .testimonial-author {
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px; /* 🔥 Aggiunge un po' più di spazio sopra il nome */
    text-align: center;
  }

  /* 🔹 Ottimizza la larghezza dello slider su mobile */
  .testimonialSwiper {
    width: 90%;
    max-width: 800px;
    margin: auto;
  }

  /* 🔹 Riduce lo spazio tra le slide */
  .swiper-slide {
    padding-bottom: 12px; /* 🔥 Evita che ci sia troppo spazio tra le testimonianze */
  }
}

@media screen and (max-width: 768px) {
  /* 🔹 Contenitore delle frecce, ora molto più spostato sui lati e in basso */
  .testimonial-navigation {
    display: flex;
    justify-content: space-between; /* 🔥 Spinge le frecce ai lati */
    align-items: center;
    width: 100%;
    position: relative;
    margin-top: 30px; /* 🔥 Più spazio sotto il nome dell'autore */
    padding: 0 40px; /* 🔥 Spinge le frecce ancora più sui lati */
  }

  /* 🔹 Dimensione e stile delle frecce */
  .testimonial-prev, 
  .testimonial-next {
    width: 45px; /* 🔥 Aumenta leggermente la dimensione */
    height: 45px;
    position: relative !important;
  }
}







/* ! Contatti */

/* Sezione con sfondo */
.contact-section {
  background-image: url('https://flaviosannapt.it/wp-content/uploads/2025/03/logocontatti.png');
  background-size: 50%; /* Riduce ulteriormente la dimensione */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  text-align: center;
}

/* Assicura che il contenuto sia sopra l'overlay */
.contact-section h2,
.contact-section .contact-buttons {
  position: relative;
  z-index: 2;
}

/* Testo dell'heading */
.contact-heading {
  color: #FFF;
  text-align: center;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%;
  margin: 0 auto 40px auto;
  max-width: 90%;
}

/* "GRATIS" più grande e rosso */
.contact-heading .highlight {
  color: #FF001F;
  font-size: 80px;
  font-weight: 700;
}

/* Contenitore bottoni */
.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Distanza tra i bottoni */
  align-items: center;
}

/* Bottoni con lo stesso stile del sito */
.wp-block-button__link.wp-element-button {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  background: #FC001C;
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  transition: background 0.3s ease-in-out;
}

/* Hover con effetto scuro */
.wp-block-button__link.wp-element-button:hover {
  background: #000;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .contact-heading {
      font-size: 50px;
  }
  .contact-heading .highlight {
      font-size: 65px;
  }
}

@media (max-width: 768px) {
  .contact-section {
      padding: 30px 20px; /* 🔥 Riduce lo spazio verticale */
      height: auto; /* 🔥 Evita che la sezione si estenda troppo */
  }
  
  .contact-heading {
      font-size: 40px;
  }
  .contact-heading .highlight {
      font-size: 55px;
  }
  .wp-block-button__link.wp-element-button {
      font-size: 22px;
      padding: 15px;
  }
}

@media (max-width: 480px) {
  .contact-section {
      padding: 20px 15px; /* 🔥 Ancora meno spazio sui dispositivi più piccoli */
  }

  .contact-heading {
      font-size: 32px;
  }
  .contact-heading .highlight {
      font-size: 45px;
  }
  .wp-block-button__link.wp-element-button {
      font-size: 20px;
      padding: 12px;
  }
}

/* ! Footer */

/* Stile generale del footer */
.custom-footer {
  background-color: #1A1212; /* Sfondo scuro */
  padding: 20px 40px;
}

/* Contenitore principale */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

/* Logo */
.footer-logo img {
  width: 120px; /* Adatta la dimensione del logo */
}

/* Stile delle informazioni di contatto */
.footer-info {
  display: flex;
  flex-direction: row;
  gap: 40px; /* Spazio uniforme tra gli elementi */
  align-items: center;
}

/* Footer item: icona + testo in linea */
.footer-item {
  display: flex;
  align-items: center;
  gap: 10px; /* Spazio tra icona e testo */
  white-space: nowrap; /* Evita che il testo vada a capo */
}

/* Dimensione uniforme per le icone */
.footer-item img {
  width: 22px; /* Mantiene la stessa altezza per tutte le icone */
  height: 22px;
  object-fit: contain;
}

/* Testo allineato all'icona */
.footer-item span {
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px; /* Stessa altezza delle icone */
  display: flex;
  align-items: center;
}

/* Link personalizzati */
.footer-item a {
  color: #fff; /* Testo rosso per email e telefono */
  text-decoration: none;
}

/* Stile per le icone social */
.footer-social {
  display: flex;
  gap: 15px;
  align-items: center;
}

.footer-social img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.footer-social img:hover {
  transform: scale(1.1); /* Effetto ingrandimento */
}

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
  .footer-container {
      flex-direction: column; /* Dispone gli elementi in verticale */
      align-items: center;
      text-align: center;
      gap: 20px;
  }

  .footer-info {
      flex-direction: column; /* Sposta le informazioni una sotto l'altra */
      gap: 15px;
  }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
  .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 15px;
      padding: 20px;
  }

  .footer-logo img {
      width: 100px; /* Riduce leggermente il logo */
  }

  .footer-info {
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }

  .footer-item {
      justify-content: center;
  }

  .footer-item span {
      font-size: 14px; /* Testo leggermente più piccolo per mobile */
  }

  .footer-social {
      gap: 10px;
  }

  .footer-social img {
      width: 22px;
      height: 22px;
  }
}

/* Smartphone piccoli (max 480px) */
@media (max-width: 480px) {
  .footer-container {
      padding: 15px;
      gap: 10px;
  }

  .footer-logo img {
      width: 80px; /* Logo più piccolo */
  }

  .footer-info {
      gap: 8px;
  }

  .footer-item span {
      font-size: 13px; /* Testo più piccolo per risparmiare spazio */
  }

  .footer-social img {
      width: 20px;
      height: 20px;
  }
}


/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}