/* base.css */
.map {
    margin-top: 100px; /* Spazio per il menu superiore */
    padding: 20px;
    height: calc(100vh - 100px); /* Altezza regolata */
    position: relative; /* Necessario per il posizionamento delle frecce */
}

.node {
    margin-bottom: 20px;
}

.preview {
    position: absolute;
    background-color: white;
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 200px; /* Larghezza della preview */
    display: none; /* Nascondi la preview di default */
}

.preview img {
    width: 100%; /* L'immagine riempie la preview */
    border-radius: 5px;
}

body {
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%; /* Permette alla pagina di estendersi se il contenuto è più lungo */
    overflow-y: auto; /* Aggiungi lo scorrimento verticale */
}

header {
    margin: 0;
    padding: 0;
}

@keyframes zoomIn {
    0% {
        transform: scale(1); /* Dimensione iniziale */
        opacity: 0; /* Nascondi l'immagine */
    }
    100% {
        transform: scale(1.1); /* Ingrandisci leggermente l'immagine */
        opacity: 1; /* Mostra gradualmente l'immagine */
    }
}

/* Video nelle immagini */
.image-title {
    position: absolute;
    bottom: 0; /* Posiziona il titolo in fondo */
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5); /* Sfondo scuro semi-trasparente */
    color: white;
    font-size: 1.5em;
    text-align: center;
    transition: transform 0.6s ease, opacity 0.6s ease; /* Transizione sul movimento e sull'opacità */
    z-index: 2; /* Mantiene il titolo sopra l'immagine */
}

.image-item:hover .image-title {
    transform: translateY(-100%); /* Fa scorrere il titolo verso l'alto */
    opacity: 1; /* Mantieni il titolo visibile mentre la fascia scompare */
    background: transparent; /* Rende la fascia trasparente */
}

/* Rimuove completamente la fascia */
.image-item:hover .video-container {
    opacity: 1; /* Mostra il video al passaggio del mouse */
}

.video-container {
    position: relative;
    z-index: 1; /* Posiziona il video sotto il titolo */
}

.video-container video {
    opacity: 0; /* Nasconde il video di default */
    transition: opacity 0.6s ease; /* Aggiunge una transizione fluida al video */
}

.image-item:hover .video-container video {
    opacity: 1; /* Mostra il video al passaggio del mouse */
}

/* Stile per il testo aggiuntivo sopra il video, senza box */
.extra-text {
    position: absolute;
    top: 70%; /* Posiziona sotto il titolo */
    left: 50%;
    transform: translate(-50%, 20px); /* Inizia 20px sotto il centro */
    color: white;
    font-size: 1.5em;
    opacity: 0; /* Invisibile di default */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transizione per far apparire il testo */
    text-align: center;
    z-index: 10; /* Metti la scritta sopra il titolo */
}

/* Mostra il testo aggiuntivo con animazione */
.image-item:hover .extra-text {
    opacity: 1; /* Rende visibile il testo aggiuntivo */
    transform: translate(-50%, -20px); /* Muove il testo al suo posto (verso l'alto) */
}

/* Nasconde la fascia quando il video è visibile */
.image-item:hover .image-title {
    display: none; /* Nasconde il titolo quando il video è visibile */
}

/* Effetto di sfocatura per lo schermo di caricamento */
#loading-screen {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
}

#loading-video {
    width: auto; 
    height: 100%;
}

/* L'immagine panoramica centrale Home page */
.panorama-container {
    position: relative;
    width: 100vw; /* Occupa l'intera larghezza dello schermo */
    height: 800px; /* Altezza fissa */
    margin: 0; /* Rimuove qualsiasi margine */
    padding: 0; /* Rimuove qualsiasi padding */
    overflow: hidden; /* Nasconde il contenuto che esce dai bordi */
    box-sizing: border-box; /* Include padding e border nelle dimensioni */
}

/* Aggiungi l'effetto di movimento all'immagine */
/* Effetto di movimento più marcato all'immagine */
@keyframes zoomInOut {
    0% {
        transform: scale(1); /* Partenza a dimensione normale */
    }
    50% {
        transform: scale(1.3); /* Zoom avanti più marcato */
    }
    100% {
        transform: scale(1); /* Ritorna alla dimensione normale */
    }
}

.full-width-image {
    width: 100vw; /* Occupa tutta la larghezza del viewport */
    height: 100%; /* Occupa tutta l'altezza del contenitore */
    object-fit: cover; /* Mantiene le proporzioni corrette dell'immagine */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Mantiene l'immagine sotto gli altri elementi */
    animation: zoomInOut 8s ease-in-out infinite; /* Durata di 8 secondi per maggiore intensità */
}


/* Immagine che occupa tutta la larghezza */
.full-width-image {
    width: 100vw; /* Occupa tutta la larghezza del viewport */
    height: 100%; /* Occupa tutta l'altezza del contenitore */
    object-fit: cover; /* Mantiene le proporzioni corrette dell'immagine */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Mantiene l'immagine sotto gli altri elementi */
}

/* Visibilità */
.full-width-image.visible {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}


/* Effetto di overlay con colore sfumato */
.full-width-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Sovrapposizione leggera */
    z-index: 1;
    transition: opacity 1.5s ease-in-out;
}

.full-width-image.visible::before {
    opacity: 0; /* Rimuove l'overlay lentamente */
}

/* Pallini di selezione */
.dot {
    cursor: pointer;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #FF4500;
    border-radius: 50%;
    margin: 5px;
    z-index: 4; /* Sempre sopra le immagini */
    transition: background-color 0.3s ease-in-out;
}

.dot.active {
    background-color: #FF8C00; /* Cambia il colore del pallino attivo */
}

/* Imposta flexbox */
.image-container {
    position: relative;
    display: flex;        /* Imposta flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;  /* Centra verticalmente */
    width: 100%;          /* Assicura che occupi tutta la larghezza */
    height: 100%;         /* Assicura che occupi tutta l'altezza */
}

.image-selector {
    position: relative; /* Lascia i pallini all'interno del contenitore */
    z-index: 3; /* Assicurati che i pallini siano sempre sopra le immagini */
    display: flex;
    justify-content: center;
    margin-top: 10px; /* Puoi regolare questa distanza */
}

@keyframes reveal {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.circle:nth-child(2) {
    animation-delay: 0.2s; /* Ritardo ridotto */
}

.circle:nth-child(3) {
    animation-delay: 0.4s; /* Ritardo ridotto */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#gallery-image {
    opacity: 1;
    transition: opacity 2s ease-in-out; /* Aggiunge la transizione */
}

#animated-image {
    opacity: 0; /* Inizia invisibile */
    transition: opacity 2s ease-in-out; /* Transizione dell'opacità */
}

#animated-image.visible {
    opacity: 1; /* Diventa visibile */
}

/* Posizionamento e stile del testo */
/* Imposta la visibilità con transizione */
.text-overlay {
    position: absolute;
    top: 40%;
    left: 8%; /* Sposta la scritta a sinistra del 5% */
    transform: translateY(-50%); /* Mantiene il testo centrato verticalmente */
    color: white;
    text-align: left; /* Allinea il testo a sinistra */
    z-index: 3;
    opacity: 0; /* Nascondi il testo inizialmente */
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

/* Quando la classe .visible viene applicata, mostra il testo */
.text-overlay.visible {
    opacity: 1;
    transform: translateY(-50%); /* Rimuove la traslazione orizzontale e lo tiene centrato verticalmente */
}

/* Stile per il titolo */
.text-overlay h1 {
    font-size: 64px; /* Mantieni il titolo grande e visibile */
    margin: 0;
    font-weight: bold; /* Titolo in grassetto */
    letter-spacing: 1.5px; /* Leggero spazio tra le lettere */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombra per rendere visibile il testo */
    transition: transform 1.5s ease, opacity 1.5s ease;
}

/* Stile per la scritta più piccola */
.text-overlay p {
    font-size: 306px !important; /* Aumenta la dimensione del paragrafo */
    margin: 20px 0 0; /* Mantieni spazio dal titolo */
    font-weight: 400; /* Peso più leggero per il paragrafo */
    line-height: 1.6; /* Migliora la leggibilità */
    color: #ffffff; /* Testo bianco per maggiore contrasto */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ombra più marcata per risaltare meglio */
    letter-spacing: 1.2px; /* Leggero aumento della spaziatura tra lettere */
}

/* When the text becomes visible */
.text-overlay.visible h1,
.text-overlay.visible p {
    opacity: 1; /* Make it visible */
    transform: translateX(0); /* Move it to the correct position */
}

.txt-rotate {
    font-size: 34px; /* Dimensione che preferisci */
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Posizionamento dei link social */
.social-links {
    position: fixed;
    top: 40%; /* Più in alto nella pagina */
    left: 20px; /* A sinistra, regolabile se necessario */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column; /* Disposizione in colonna (verticale) */
    justify-content: center;
    align-items: flex-start; /* Allineamento a sinistra */
    gap: 40px; /* Spazio tra le icone */
    z-index: 1000; /* z-index alto per mantenerle visibili sopra le immagini */
}

.social-links a {
    text-decoration: none;
}

.social-links img {
    width: 100px; /* Aumenta la dimensione delle icone */
    height: 100px; /* Aumenta la dimensione delle icone */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-links img:hover {
    transform: scale(1.3); /* Ingrandisce ancora di più l'icona al passaggio del mouse */
    opacity: 0.8; /* Leggero effetto di trasparenza */
}

/* Stile per il cerchio che segue il mouse */
.cursor-circle {
    position: fixed;
    width: 50px; /* Dimensione del cerchio */
    height: 50px; /* Dimensione del cerchio */
    border-radius: 50%; /* Cerchio perfetto */
    background-color: transparent; /* Riempimento trasparente */
    pointer-events: none; /* Il cerchio non interferisce con i clic */
    z-index: 9999; /* Sopra tutto */
    border: 2px solid white; /* Solo bordo bianco */
}

.main-title-container {
    text-align: center; /* Centra il contenuto */
    margin: 15px 0; /* Margine superiore e inferiore ridotto */
}

.main-title {
    font-size: 2.2em; /* Dimensione del titolo principale simile all'immagine */
    color: #022367; /* Colore del titolo principale */
    font-weight: bold; /* Grassetto per il titolo principale */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombra del titolo principale */
    margin: 0; /* Rimuovi margine superiore e inferiore */
}

.sub-title {
    font-size: 1.3em; /* Dimensione ridotta per il sottotitolo, simile all'immagine */
    color: #e75112; /* Colore del sottotitolo */
    margin-top: 5px; /* Margine superiore per avvicinare le scritte */
    margin-bottom: 0; /* Rimuovi margine inferiore */
    font-weight: 400; /* Peso normale per il sottotitolo */
}

.company-logos {
    text-align: center;
    margin: 0 !important; /* Elimina i margini superiori e inferiori */
    padding: 0 !important; /* Rimuove il padding */
    margin-top: 0 !important; /* Riduce o rimuove il margine superiore della sezione loghi */	
}

.logos-title {
    font-size: 2em; /* Dimensione del titolo */
    margin-bottom: 20px; /* Spazio sotto il titolo */
    font-weight: bold; /* Grassetto */
}

.logos-container {
    display: grid; /* Usa il grid per disporre gli elementi in righe e colonne */
    grid-template-columns: repeat(6, 1fr); /* 6 loghi per riga */
    gap: 20px; /* Spazio tra i loghi */
    padding: 0 5%; /* Padding ai lati per una migliore visibilità */
    padding-top: 0 !important; /* Elimina eventuali padding all'interno */
    margin-top: 0 !important; /* Elimina eventuali margini */	
}

.logo-item {
    display: flex; /* Usa flex per centrare le immagini */
    justify-content: center; /* Centra i loghi orizzontalmente */
    align-items: center; /* Centra i loghi verticalmente */
    max-width: 150px; /* Limita la larghezza massima di ogni logo */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Aggiunta di transizione */
    border-radius: 10px; /* Arrotonda gli angoli */
    overflow: hidden; /* Nasconde eventuali overflow */
}

.logo-item:hover {
    transform: scale(1.1); /* Zoom in del logo */
    background-color: rgba(255, 255, 255, 0.1); /* Colore di sfondo al passaggio del mouse */
}

.logo-item img {
    width: 100%; /* Immagini scalabili */
    height: auto; /* Mantiene le proporzioni */
    object-fit: contain; /* Mantiene l'immagine all'interno del contenitore */
    transition: opacity 0.3s ease; /* Transizione per l'opacità */
}

.logo-item:hover img {
    opacity: 0.8; /* Sfumare il logo al passaggio del mouse */
}

/* Fascia gialla con scritta dinamica */
.yellow-banner {
    background-color: #FFEA00;
    padding: 20px; /* Riduci il padding interno per rendere la fascia più sottile */
    text-align: left;
    position: relative;
    margin-top: 1px; /* Puoi regolare il margine superiore per avvicinarla al contenuto sopra */
    padding-left: 8%; /* Riduci leggermente il padding sinistro per un look più compatto */
}

.yellow-text {
    font-weight: bold;
    color: white; 
    font-size: 3.5em !important; /* Riduci leggermente la dimensione del testo */
    line-height: 1.1; /* Mantieni una linea compatta tra le righe */
    margin: 0;
    letter-spacing: 0.02em; /* Leggera spaziatura per migliorare la leggibilità */
    font-family: 'Montserrat', sans-serif; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Mantieni l'ombra leggera per leggibilità */
}

/* Spazio tra le righe */
.secondline {
    display: block;
    margin-top: 0.2em; /* Riduci ulteriormente lo spazio tra le righe */
}

.dynamic {
    color: #007BFF; 
    font-size: 1.0em !important; /* Mantieni la stessa dimensione per la parte dinamica */
    transition: color 0.5s ease, width 0.5s ease;
    line-height: 1.1;	
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline; /* Allinea la scritta dinamica alla base della statica */
    font-family: 'Montserrat', sans-serif;
    margin-left: 0.2em;	
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Mantieni l'ombra sottile */
}


/* Stile per la freccia "Back to top" */
.back-to-top {
    position: fixed;
    bottom: 50px; /* Distanza dal fondo della pagina */
    right: 56px;  /* Distanza dal bordo destro */
    background-color: #FFA500; /* Colore della freccia */
    color: white;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    z-index: 1000;
    display: none; /* Nascondi la freccia inizialmente */
    transition: background-color 0.3s, transform 0.3s;
}

/* Hover della freccia per effetto estetico */
.back-to-top:hover {
    background-color: #FF6347; /* Cambia colore quando il mouse è sopra */
    transform: scale(1.1); /* Effetto di ingrandimento quando il mouse è sopra */
}

/* Effetto di transizione per Visita la nostra sede */
.animated-title {
    opacity: 0; /* Inizia invisibile */
    transform: translateY(50px); /* Sposta il titolo più in basso per un effetto di salita più evidente */
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; /* Rallenta l'animazione a 1.5 secondi */
}

.animated-title.visible {
    opacity: 1; /* Rende visibile */
    transform: translateY(0); /* Riporta nella posizione originale */
}

/* Bandiere Lingua */
.flag-icon {
    width: 20px; /* Modifica questa dimensione come preferisci */
    height: auto;
    margin-right: 5px; /* Spazio tra la bandiera e il testo */
    vertical-align: middle; /* Per allineare meglio la bandiera con il testo */
}