@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url("https://use.typekit.net/qvg5kej.css");
@import url("https://use.typekit.net/qvg5kej.css");

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

ul, li{
    list-style: none;
}

body{
    background-color: #FCF9F4;
}

/* Header */

nav{
    background-color:#D5DDE5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 190px 30px 190px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

a{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 17px;
    padding: 10px 20px 10px 20px;
    border-radius: 50px;
    border: 1px solid #4A4B4D;
    background-color: transparent;
    text-decoration: none;
    color: #4A4B4D;
    cursor: pointer;
    margin: 0px 15px 0px 15px;

}

li a{
    text-decoration: none;
    border: 0px;
    cursor: pointer;
    color: white;
}

.color {
    color: white;
    border: 1px solid white;
}

.herosection {
    padding: 0px 190px 0px 190px;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
              url(IMG/LCF05060\ 2.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 900px;
    color: white;
}

.img{
    margin-bottom: 40px;
    margin-top: 10px;
}

h1 {
    font-size: 45px;
    padding-bottom: 30px;
    font-family: "ivypresto-display", serif;
    font-weight: 100;
    font-style: normal;
}

h3 {
    font-size: 40px;
    padding-bottom: 50px;
    font-family: "ivypresto-display", serif;
    font-weight: 100;
    font-style: normal;
}

p , ul, li {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.card h2{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 18px;
}

.italic{
    font-family: "ivypresto-display", serif;
    font-weight: 100;
    font-style: italic;
}

.p-hero {
    padding-bottom: 60px;
}

.vocimenù {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 150px 190px 120px 190px;
    list-style: none;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

/* Main */

/* Card IdentiTè */
.card{
    background-color: #EAE2D8;
    max-width: 65%;
    padding: 50px 150px 50px 150px;
    margin: 0 auto;
    text-align: start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color:#4A4B4D;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-top: -40px; 
    position: relative;
    z-index: 10;
}

.colonna1 {
    padding: 50px;
}

.colonna2 {
    padding: 50px;
}

.colonna2 a {
    margin-left: 0px;
  }

  .colonna2 p {
    margin-bottom: 40px;
  }

/* Blocco testo + immagine dx */

.cardtesto1 {
    display: grid;
    grid-template-columns: 7fr 3fr; 
    width: 100%;
    min-height: auto;
    margin-top: 100px;
    align-items: center;
}

.colonna3 {
 padding-left: 400px;
 padding-right: 300px;
}

.colonna4 {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna4 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

hr{
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Blocco testo + immagine sx */

.cardtesto2 {
    display: grid;
    grid-template-columns: 4fr 6fr; 
    /*height: 150px;*/
    min-height: auto;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.colonna5 {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna5 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.colonna6 {
    padding-left: 400px;
    padding-right: 300px;
   }

   /* Fascia */

   /*.fascia {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 1.2fr; 
    gap: 40px; /* Spazio tra le colonne 
    padding: 80px 190px;  
    align-items: start;
    width: 100%;
    min-height: auto;
    gap: 100px;
    background-color: #EAE2D8;

}*/

.fascia {
    display: grid;
    /* Definiamo le proporzioni: 1.2 - 0.6 - 1.2 */
    grid-template-columns: 1.2fr 0.8fr 1.2fr; 
    gap: 100px; 
    
    /* Padding: sopra/sotto 80px, destra/sinistra 190px */
    padding: 80px 170px; 
    
    /* Centra la griglia stessa nel contenitore */
    justify-content: center; 
    
    /* Allinea il contenuto dei blocchi in alto */
    align-items: start;
    
    width: 100%;
    background-color: #EAE2D8;
    box-sizing: border-box; /* Fondamentale per includere il padding nel calcolo della larghezza */
}

.colonna7 a, .colonna9 a {
    margin-left: 0px;
    background-color: #FCF9F4;
    border: 0px;
  }

  .colonna7 p, .colonna9 p {
    margin-bottom: 35px;
  }

  h5{
    font-size: 28px;
    padding-bottom: 20px;
    font-family: "ivypresto-display", serif;
    font-weight: 100;
    font-style: normal;
  }

  .colonna9{
    padding-left: 100px;
    border-left: 1px solid ;
  }

  .colonna8{
    padding-left: 100px;
    border-left: 1px solid ;
  }

 /* Card testo 3 */

  .cardtesto3 {
    display: grid;
    grid-template-columns: 7fr 3fr; 
    width: 100%;
    margin-top: 100px;
    align-items: center;
}

.colonna10 {
    padding-left: 400px;
    padding-right: 400px;
}

.colonna11 {
    height: 100%; 
    overflow: hidden;
}

.colonna11 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

/* Immagine sfondo */

.immaginesfondo {
    height: 700px;
    margin-top: 100px;
}

.immaginesfondo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

/* Card cosa otterrai */

.box-beige {
    background-color: #EAE2D8;
    max-width: 65%;
    padding: 100px 150px 100px 150px;
    margin: 0 auto;
    text-align: start;
    display: grid;
    grid-template-columns: 1fr 1.8fr; /* Sinistra stretta, destra larga */
    color:#4A4B4D;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-top: -500px; 
    position: relative;
    z-index: 10;
    gap: 20px;
}

/* Gestione verticale colonna sinistra */
.col-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spinge il titolo su e la CTA giù */
    height: 100%; /* Si aggancia all'altezza della colonna destra */
    min-height: auto; /* Rimuovi il valore fisso di 400px se presente */
    padding-right: 30px;
}

.col-info h3 {
    font-size: 38px;
    line-height: 1.1;
    margin-top: 0;
}

.cta-bottom {
    margin-bottom: 0;
}

.cta-bottom p {
    font-size: 18px;
    max-width: 250px;
    margin-bottom: 30px; /* Spazio tra testo e bottone */
}

.cta-bottom a {
    display: inline-block; /* Importante per gestire bene i margini */
    margin-bottom: 0; /* Assicura che sia l'elemento più in basso di tutti */
    margin-left: 0px;
    background-color: #FCF9F4;
    border: 0px;
}

/* Colonna destra */
.col-testo {
    display: flex;
    flex-direction: column;
}

.col-testo p {
    margin-bottom: 20px;
}

.col-testo p:first-child {
    margin-top: 0; /* Allinea la prima riga al titolo di sinistra */
}

.col-testo p:last-child {
    margin-bottom: 0; /* Allinea l'ultima riga al fondo del box */
}


/* FAQ */

.faq-section {
    margin: 150px 400px;
    font-family: "Poppins", sans-serif;
    color: #4A4B4D;
  }
  
  .faq-section h2 {
    margin-bottom: 40px;
    font-weight: normal;
    font-style: italic;
  }
  
  /* Struttura dell'item */
  .accordion-item {
    border-bottom: 1px solid #d1d1d1; /* La linea sottile del tuo screenshot */
  }
  
  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .accordion-header span {
    font-size: 1.1rem;
  }
  
  .icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
  }
  
  /* Contenuto nascosto */
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Animazione fluida */
  }
  
  .accordion-content p {
    padding-bottom: 20px;
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
    color: #4A4B4D;
  }
  
  /* Stato Attivo (quando cliccato) */
  .accordion-item.active .icon {
    transform: rotate(45deg); /* Il + diventa una x */
  }
  
  .accordion-item.active .accordion-content {
    max-height: 200px; /* Imposta un valore sufficiente a mostrare il testo */
  }


  /* Recensioni */

  .recensioni {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 190px 0px 190px;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), 
              url(IMG/LCF05044.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
    color: white;
    position: relative;
  }

  .recensioni p {
    max-width: 50%;
  }

  .contenitore-frecce {
    display: flex;
    justify-content: center; /* Centra le frecce orizzontalmente */
    gap: 40px;               /* Spazio tra la freccia sinistra e quella destra */
    margin-top: 50px;        /* Spazio tra la fine della recensione e le frecce */
}

/* Form */

.sezione-form-contatti {
    background-color: #F9F7F2; /* Il colore crema del tuo sfondo */
    padding: 150px 20px;
    font-family: 'Poppins', sans-serif; /* O il font che hai usato in XD */
}

.form-wrapper {
    max-width: 1200px; /* Allineato al tuo footer */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* La colonna sinistra è leggermente più larga */
    gap: 150px;
    align-items: start;
}

/* Stili Colonna Sinistra */
.sopratitolo {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    display: block;
    margin-bottom: 20px;
}

.titolo-icona {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.sezione-form-contatti h5{
    margin-top: 10px;
}

.sezione-form-contatti a{
    margin-left: 0px;
    border: 0px;
    background-color: #E6E1D6;
}

.icona-chiara {
    width: 80px;
}

.nota-disdetta {
    margin-bottom: 20px;
    margin-top: 60px;
    font-size: 16px;
}

.info-ritardo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-ritardo p {
    font-size: 16px;
}

.mini-icon {
    width: 25px;
    height: 25px;
    margin-right: 15px;
}

/* Stili Form */
input, textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    background: transparent;
    font-family:  'Poppins', sans-serif;
}


.privacy-check {
    display: flex;
    font-size: 12px;
    margin-bottom: 28px;
    align-items: flex-start;
    justify-content: start;
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
}

.btn-invia {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 17px;
    padding: 10px 20px 10px 20px;
    border-radius: 50px;
    border: 0px;
    background-color: #E6E1D6;
    text-decoration: none;
    cursor: pointer;
    margin: 10px 0px 0px 0px;
}

/* Responsive per Tablet/Mobile */
@media (max-width: 850px) {
    .form-wrapper { grid-template-columns: 1fr; gap: 50px; }
}

/* Sezione post */

.sezionepost a{
    border: 0;
    margin: 0;
    padding: 0;
}

.sezionepost img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.sezionepost {
    display: flex;
    max-height: 390px;
    width: 100%;
}

/* footer */

footer{
    background-color: #D5DDE5;
    padding:150px;
}

footer h5{
    line-height: 30px;
}

/* Questo contenitore tiene tutto allineato al centro */
.footer-container {
    max-width: 1200px; /* La larghezza totale del tuo footer */
    margin: 0 auto;    /* Centra tutto il blocco nella pagina */
}

.sectionfooter {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne uguali */
    gap: 200px; /* Spazio tra le due colonne */
    align-items: start;
    text-align: left;
}

.colonnafooter1{
    padding-left: 70px;
}

footer hr {
    width: 100%; /* Occupa tutto lo spazio del contenitore (1000px) */
    border: 0;
    border-top: 1px solid #000; /* Spessore e colore linea */
    margin: 60px 0; /* Spazio sopra e sotto la linea */
}

.chiusurafooter {
    text-align: center; /* Centra il testo finale rispetto alla linea */
    font-size: 0.9rem;
}


/* ----------------- PAGINA CHI SONO -----------------  */

.herosectionchisono {
    padding: 0px 190px 0px 190px;
    text-align: center;
    width: 100%;
    height: 200px;
    color: #4A4B4D;;
}

.vocimenùchisono {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 190px 120px 190px;
    list-style: none;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #4A4B4D;
}

.vocimenùchisono a{
    color: #4A4B4D;

}

.cardtesto1chisono {
    display: grid;
    grid-template-columns: 7fr 3fr; 
    width: 100%;
    padding-top: 100px;
    min-height: auto;
    align-items: center;
}

.colonna3chisono {
 padding-left: 400px;
 padding-right: 300px;
}

.colonna4chisono {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna4chisono img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.cardtesto2chisono {
    display: grid;
    grid-template-columns: 4fr 6fr; 
    /*height: 150px;*/
    min-height: auto;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 200px;
}

.colonna5chisono {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna5chisono img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.colonna6chisono {
    padding-left: 300px;
    padding-right: 200px;
   }

   .altro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 0px 190px 0px 190px;
    text-align: start;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), 
              url(IMG/LCF05277\ 2.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 700px;
    color: white;
    position: relative;
  }

  .altroblocco{
    max-width: 40%;
    margin-left: 300px;
  }


  /* ----------------- PAGINA CONTATTI -----------------  */

  .faq-contatti {
    background-color: #EAE2D8;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .cardtesto1contatti {
    display: grid;
    grid-template-columns: 7fr 3fr; 
    width: 100%;
    padding-top: 100px;
    min-height: auto;
    align-items: center;
}

.colonna3contatti {
 padding-left: 400px;
 padding-right: 300px;
}

.colonna4contatti {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna4contatti img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.cardtesto2contatti {
    display: grid;
    grid-template-columns: 4fr 6fr; 
    /*height: 150px;*/
    min-height: auto;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 200px;
}

.colonna3contatti a{
    margin-left: 0px;
    border: 0px;
    background-color: #E6E1D6;
}

.colonna3contatti a:hover{
    margin-left: 0px;
    border: 0px;
    background-color: #D5DDE5;
}

.colonna5contatti {
    height: 100%; /* L'immagine deve riempire tutta l'altezza disponibile */
}

.colonna5contatti img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'immagine senza deformarla per riempire il div */
}

.colonna6contatti {
    padding-left: 300px;
    padding-right: 200px;
   }



  /* Animazioni */
  .sezionepost div {
    overflow: hidden; /* Importante per non far uscire l'immagine dai bordi */
}

.sezionepost img {
    transition: transform 0.5s ease;
}

.sezionepost img:hover {
    transform: scale(1.1);
}


a:hover {
    background-color: #FCF9F4;
    border: 0px;
    color: #4A4B4D;
}

.fascia a:hover, .box-beige a:hover{
    background-color: transparent;
    border: 1px solid #4A4B4D;
    color: #4A4B4D;
}

.sezione-form-contatti a:hover, .btn-invia a:hover{
    background-color: #D5DDE5;
    border: 0px;
    color: #4A4B4D;
}


.herosection h2, .herosection .p-hero, .hero-buttons {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-out;
}

/* Stato finale (visibile) */
.herosection.loaded h2, 
.herosection.loaded .p-hero, 
.herosection.loaded .hero-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardo per un effetto a cascata */
.herosection.loaded .p-hero { transition-delay: 0.3s; }
.herosection.loaded .hero-buttons { transition-delay: 0.6s; }


.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-in-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

nav {
    opacity: 0;
    transform: translateY(-20px);
    animation: navEntrance 1s ease-out forwards;
}

@keyframes navEntrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vocimenùchisono a:hover{
        background-color:#D5DDE5;
        border: 0px;
        color: #4A4B4D;
    }