/*Font*/
@font-face {
  font-family: "Satoshi-light";
  src: url("/assets/Satoshi-Light.otf") format("opentype");
  color: #f1eedb;
}

@font-face {
  font-family: "Satoshi-regular";
  src: url("/assets/Satoshi-Regular.otf") format("opentype");
  color: #f1eedb;
}

@font-face {
  font-family: "Satoshi-bold";
  src: url("/assets/Satoshi-Bold.otf") format("opentype");
  color: #f1eedb;
}

@font-face {
  font-family: "ArticulatCF semi-bold";
  src: url("/assets/Articulat_CF_Demi_Bold.otf") format("opentype");
  color: #f1eedb;
}


@font-face {
  font-family: "Riosark Light";
  src: url("/assets/RiosarkLight-KVvKe.otf") format("opentype");
  color: #f1eedb;
}

@font-face {
  font-family: "Riosark Regular";
  src: url("/assets/RiosarkRegular-ZpgLB.otf") format("opentype");
  color: #ffffff;
}

html, body {
    overflow-x: hidden;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    scroll-behavior: smooth;
   }

::-webkit-scrollbar {
      display: none;
  }

a {
    text-decoration: none;  /* elimina sottolineatura */
  color: inherit;  
}

/*footer*/
.footer-icon {
  width: 40px;
  height: auto;
  transition: 0.3s ease;
}

@media (max-width: 768px) {
  .footer-icon {
    width: 32px;
  }

  .col-6.col-md-auto.d-flex.align-items-center {
    font-size: 10pt !important; 
  }

  .display-3.reveal-text {
    font-size: 20pt !important;
  }
  
}




/*INDEX*/
/*video gradiente*/
#background-video {
    position: fixed; /* Lo fissa alla finestra di visualizzazione */
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* Assicura che copra l'area senza distorsioni */
    z-index: -1; 
}



/*TEAM*/
.content-area-below-header {
    margin-top: 80px; 
}




/*CONTACTS*/
input.form-control {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #bfc0c1 !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.5rem !important;
    color: #ffffff !important;
    font-size: 16pt;
}

input.form-control:focus {
    background-color: transparent !important;
    border-color:#bfc0c1 !important; 
    border-bottom: 1px solid #bfc0c1 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 16pt;
}


.btn-primary {
    background-color: transparent !important; 
    color: #ffffff !important;
    border: 1px solid #ffffff !important; 
    border-radius: 50px !important; 
    min-width: 150px;
    font-size: 16pt !important;
    font-family: 'Satoshi-light', Arial, Helvetica, sans-serif !important;
}

.btn-primary:hover {
    background-color: #043ee5 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.btn-first {
    background-color: #000000 !important; 
    color: #ffffff !important;
    border: 1px solid #ffffff !important; 
    border-radius: 50px !important; 
    min-width: 250px;
    font-size: 16pt !important;
    font-family: 'Satoshi-light', Arial, Helvetica, sans-serif !important;
}

.btn-first:hover {
    background-color: #043ee5 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transition: linear 0.3s;
}

.btn-third {
    background-color: #3e4040 !important; 
    color: #ffffff !important;
    border: 1px solid #ffffff !important; 
    border-radius: 50px !important; 
    min-width: 250px;
    font-size: 16pt !important;
    font-family: 'Satoshi-light', Arial, Helvetica, sans-serif !important;
}

.btn-third:hover {
    background-color: #043ee5 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}



/*FAQ*/
.btn-questions {
    background-color: transparent !important; 
    color: #ffffff !important;
    border: 1px solid #000000 !important; 
    border-radius: 0px !important; 
    min-width: 150px;
    font-size: 16pt !important;
    font-family: 'Satoshi-light', Arial, Helvetica, sans-serif !important;
}

.btn-custom-action {
    background-color: transparent !important; 
    border: transparent !important; 
    color: #ffffff !important; 
}

.btn-custom-action:hover {
    background-color: transparent !important;
}

.card-body {
    background-color: transparent !important; 
    color: #ffffff !important;
    font-size: 16pt !important;
    font-family: 'Satoshi-light', Arial, Helvetica, sans-serif !important;
}

.card {
    border: none !important;
    box-shadow: none !important;
}



/* SOLUTIONS - SPECIFICHE*/
/* 1. La Finestra (Contenitore Esterno) */
.specs-sequence-container {
    height: 60vh; 
    position: relative; 
    overflow: hidden; 
    color: #f1eedb;
    border-radius: 15px;
}

/* 2. Le Singole Card (Stati) */
.card-state {
    height: 60vh; /* ESSENZIALE: Ogni card occupa lo spazio di una schermata */
    width: 100%;
    /* Rimuovi margini o padding che potrebbero alterare l'altezza totale */
    padding: 0; 
    box-sizing: border-box; /* Assicura che padding e border non aumentino l'altezza */
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* 3. Il Wrapper (Contenitore Interno che si Muove) */
.sequence-wrapper {
    width: 100%;
    /* Rimuoviamo l'altezza dal CSS, la calcoleremo dinamicamente in JS */
    position: absolute; 
    top: 0;
    left: 0;
    transition: transform 1s ease-in-out; 
    background-color: #1f1f1f;
}


.full-screen-section {
        min-height: 100vh; /* OBBLIGATORIO: Garantisce che occupi l'intera finestra */
        display: flex; /* Attiva Flexbox per la centratura interna */
        align-items: center; /* Centra verticalmente */
        justify-content: center; /* Centra orizzontalmente */
        position: relative; 
        z-index: 10;
        color: #ffffff;
    }

    /* Stile per il testo che verrà rivelato / animato */
    .reveal-text {
        font-family: 'Satoshi-light', Arial, sans-serif;
        font-size: clamp(2.5rem, 6vw, 4.5rem); 
        line-height: 1.2;
        text-align: center;
        /* Stato iniziale: invisibile e leggermente spostato in basso */
        opacity: 0; 
        transform: translateY(50px);
    }

    /* Sezione di contenuto normale sotto le animazioni */
    .regular-content-section {
    min-height: 250vh !important; /* Valore aumentato per forzare lo scroll */
    color: #ffffff;
    padding: 5rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

.full-screen-section.start-visible .reveal-text {
    opacity: 1 !important; /* Forza la visibilità */
    transform: translateY(0) !important; /* Forza la posizione finale */
    /* Aggiungi !important se necessario per sovrascrivere l'animazione GSAP */
}

/* Indicatore di Scroll */
.scroll-indicator {
    position: absolute;
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; 
    text-align: center;
    font-size: 14pt;
    color: #ffffff;
}

.arrow-down {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    margin: 5px auto;
    rotate: 45deg;
    animation: bounce 1.5s infinite; 
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0), translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-20px), translateX(50%);
        opacity: 0.5;
    }
}


/*mappa interattiva*/
#map {
    /* 1. Altezza e Larghezza devono essere definite */
    height: 80vh !important; /* Forza l'altezza con !important */
    width: 100% !important;
    
    /* 2. Resetta i margini e i bordi che potrebbero interferire */
    padding: 0 !important;
    margin: 0 !important;

    /* 3. Z-Index Alto: Assicurati che la mappa non sia nascosta da altri elementi del tuo sito */
    z-index: 10; 
    
    /* 4. Posizionamento (Assicura che z-index funzioni) */
    position: relative; 
}

.controls {
    padding: 15px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.controls label, .controls span {
    margin-right: 10px;
}