/* Reset per margini e padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font generale in stile medievale */
body {
    font-family: 'Cinzel', serif;
    line-height: 1.6;
    background-color: rgba(255,255,255, 0.3);
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden; 
    padding-top: 25px;
	gap: 10px;

}

/* Sezione Menu */
#menu {
    text-align: center;
    margin-bottom: -20px;
    z-index: 3;
}

#menu .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

/* Stili per il menu di navigazione orizzontale */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 3;
}

/* Pulsanti principali */
nav ul li {
    position: relative;
}

/* Fade in per i pulsanti del menu principale */
nav ul li.initial {
    opacity: 0;
    animation: fadeInBlur 1s forwards;
}

/* Effetti di fade-in per i pulsanti principali */
nav ul li.initial:nth-child(1) { animation-delay: 1.5s; }
nav ul li.initial:nth-child(2) { animation-delay: 1.7s; }
nav ul li.initial:nth-child(3) { animation-delay: 1.9s; }
nav ul li.initial:nth-child(4) { animation-delay: 2.1s; }
nav ul li.initial:nth-child(5) { animation-delay: 2.3s; }

nav ul li a {
    display: block;
    text-decoration: none;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    width: 200px;
}

/* Effetti hover per i pulsanti principali */
nav ul li a:hover {
    background-color: #555;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

nav ul li a:active {
    transform: scale(0.95);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

/* Stile per il menu a tendina */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    z-index: 2;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    width: 200px;
    z-index: 5;
}

/* Mostra il dropdown al passaggio del mouse sul pulsante */
nav ul li:hover .dropdown,
.dropdown:hover {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Stili per le voci del dropdown */
.dropdown li {
    white-space: nowrap;
    z-index: 5;
}

.dropdown li a {
    padding: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    font-size: 0.9rem;
    width: 100%;
    z-index: 2;
}

/* Hover effetto per le voci del dropdown */
.dropdown li a:hover {
    background-color: #555;
    z-index: 2;
}

/* Contenitore delle particles */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Contenitore per l'immagine centrale e le immagini laterali */
.image-container {
    position: relative; /* Relativa per posizionamento assoluto delle immagini laterali */
    /*width: 58%;  Occupa tutta la larghezza della pagina 
    height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Sopra l'immagine di sfondo */
}

.razza-image {
    max-width: 65%; /* Dimensiona l'immagine centrale */
    height: auto;
    opacity: 0;
    animation: fadeInBlur 2s ease forwards; /* Aggiungi animazione di fade */
}

/* Stile per le immagini */
.round-image {
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
    margin: 0 10px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
}
.round-images {
    display: flex; /* Utilizza flexbox per allineare le immagini */
    transition: transform 0.5s ease; /* Aggiungi una transizione per il movimento */
	flex-shrink: 0;
	margin-left: 10px;
	margin-right: 20px;
	margin-top: 20px;
	
}
/* Contenitore delle immagini */
.round-images-container {
    overflow: hidden;
    width: 1320px; /* Larghezza per 6 immagini */
    height: 250px;
    margin-top: 50px; /* Centra il contenitore */
	margin-left: 50px;
	margin-right: 50px;
}
/* Media queries per schermi più piccoli */
@media (max-width: 1400px) {
    .left-arrow, .right-arrow {
        font-size: 1.5rem;
    }
}

@media (max-width: 1320px) {
    .round-images-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .left-arrow, .right-arrow {
        font-size: 1.2rem;
    }

    .left-arrow {
        left: -30px;
    }

    .right-arrow {
        right: -30px;
    }
}

.round-image {
	display: flex; /* Utilizza flexbox per allineare le immagini */
    flex-wrap: nowrap;
    position: relative;
    width: 200px; /* Dimensione dell'immagine */
    height: 200px; /* Dimensione dell'immagine */
    border-radius: 50%; /* Crea effetto rotondo */
    margin: 0 10px; /* Margine laterale */
    overflow: hidden; /* Nasconde il contenuto in eccesso */
    display: flex; /* Permette di utilizzare Flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	margin-right: 30px; 
	margin-left: 30px;
	opacity: 0;
}

.hover-text {
    position: absolute; /* Posizionamento assoluto per il testo */
    color: white; /* Colore del testo */
    font-size: 1.5rem; /* Dimensione del font */
    font-weight: bold; /* Rende il testo in grassetto */
    transition: opacity 0.3s ease; /* Transizione per la visibilità */
    z-index: 1; /* Assicura che il testo sia sopra l'immagine */
    pointer-events: none; /* Evita interazione con il testo */
    width: 100%; /* Larghezza 100% del cerchio */
    height: 100%; /* Altezza 100% del cerchio */
    display: flex; /* Usa Flexbox per centrare il testo */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    opacity: 0; /* Mantieni l'opacità del testo a 1 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ombra del testo */
}

/* Effetti hover per le immagini rotonde */
.round-image:hover {
    transform: scale(1.1); /* Ingrandisce leggermente l'immagine */
	opacity: 0.5;
	
}

/* Mostra il testo all'interno del cerchio durante l'hover */
.round-image:hover .hover-text {
    opacity: 1; /* Rende visibile il testo */
}





/* Ritardi progressivi per ogni immagine */
.round-image:nth-child(1) {
    animation: fadeInBlurx 2s;
    animation-delay: 0.5s;	/* Ritardo per la prima immagine */
}
.round-image:nth-child(2) {
    animation: fadeInBlurx 2s;
    animation-delay: 0.7s; /* Ritardo per la seconda immagine */
}
.round-image:nth-child(3) {
    animation: fadeInBlurx 2s;
    animation-delay: 0.9s; /* Ritardo per la terza immagine */
}
.round-image:nth-child(4) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.1s; /* Ritardo per la quarta immagine */
}
.round-image:nth-child(5) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s; /* Ritardo per la quinta immagine */
}
.round-image:nth-child(6) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.5s; /* Ritardo per la sesta immagine */
}
.round-image:nth-child(7) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}
.round-image:nth-child(8) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}

.round-image:nth-child(9) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}

.round-image:nth-child(10) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}

.round-image:nth-child(11) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}

.round-image:nth-child(12) {
    animation: fadeInBlurx 2s;
    animation-delay: 1.3s;
}

.round-image {
    transition: opacity 0.5s ease; /* Animazione di transizione */
}

.fade-out {
    opacity: 0; /* Nasconde l'immagine */
    pointer-events: none; /* Disabilita gli eventi su questo elemento durante la transizione */
}


/* Definizione dell'animazione fade in per le immagini */
@keyframes fadeInBlurx {
    0% {
        opacity: 0; /* Inizia invisibile */
        transform: translateY(20px); /* Leggermente in basso */
    }
    100% {
        opacity: 1; /* Visibile */
        transform: translateY(0); /* Torna alla posizione originale */
    }
}

/* Stile per le frecce */
.arrow {
    background-color: transparent; /* Sfondo trasparente */
    border: none; /* Rimuovi il bordo */
    font-size: 2rem; /* Dimensione del font per le frecce */
    color: #333; /* Colore delle frecce */
    cursor: pointer; /* Cambia il cursore al passaggio */
    transition: color 0.3s ease; /* Transizione del colore */
    padding: 10px; /* Padding intorno alle frecce */
}

/* Effetto hover per le frecce */
.arrow:hover {
    color: #555; /* Colore delle frecce al passaggio */
}

.round-images-wrapper {
    display: flex;
    align-items: center; /* Allinea le frecce con le immagini */
    justify-content: center; /* Centra il contenitore */
    margin-top: 0px; /* Margine sopra il contenitore */
	margin-right: 20px;
}

/* Aggiungi uno stile per il contenitore del logo */
.logo {
    display: flex; /* Attiva Flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: flex-end; /* Posiziona gli elementi sul fondo */
    height: 100vh; /* Imposta l'altezza al 100% della viewport */
	width: 40vh;
    position: relative; /* Posizione relativa per l'animazione */
	text-align: center;
	z-index: 1;
}

.logo img {
    max-width: 100%;
	text-align: center;
    opacity: 1;
 animation: fadeInBlur 2s ease forwards;/* Aggiungi transizioni per un effetto fluido */
    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */

}

.logo img:active {
    transform: scale(0.6); /* Rimpicciolisce leggermente l'immagine quando viene premuta */
    opacity: 0.8; /* Riduce leggermente l'opacità durante il clic */
}


.logo img:hover {
    transform: scale(1.1); /* Ingrandisce leggermente l'immagine */
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.6); /* Aggiungi un bagliore bianco morbido */
    opacity: 1; /* Mantiene l'immagine completamente visibile */
}


.logo img:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.3); /* Colore dell'effetto ripple */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s ease-out;
}



@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Pulsanti sotto l'immagine centrale */
.btn {
    background-color: #333;
    color: #fff;
    padding: 10px 100px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    animation: fadeInBlur 2s ease forwards; /* Aggiungi animazione di fade */
    margin: 42px;
    position: relative; /* Posizionamento relativo per il tooltip */
    cursor: pointer; /* Mostra il puntatore per rendere l'interattività chiara */
	    z-index: 10;
}

/* Effetti hover per i pulsanti */
.btn:hover {
    background-color: #555;
    transform: scale(1.05);
	    z-index: 10;

}

/* Stile del tooltip */
.btn::after {
    content: attr(data-tooltip); /* Estrai il testo dalla proprietà data-tooltip */
    position: absolute;
    top: calc(100% + 10px);
    width: 300px; /* Posiziona il tooltip sotto il pulsante */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.605rem;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 10; /* Assicurati che sia sopra gli altri elementi */
    pointer-events: none; /* Il tooltip non interferisce con il mouse */
}

/* Mostra il tooltip al passaggio del mouse */
.btn:hover::after {
    opacity: 1; /* Rendi visibile il tooltip */
    visibility: visible; /* Rendi visibile il tooltip */
    transform: translateX(-50%) translateY(5px); /* Effetto di scorrimento verso il basso */
	z-index:10;
}

.btn[data-tooltip]:hover::before {
    content: ''; /* Crea un triangolo sopra il tooltip */
    position: absolute;
    top: 100%; /* Posiziona il triangolo sopra il tooltip */
    left: 50%;
    margin-left: -5px; /* Centra il triangolo */
    border-width: 5px; /* Dimensione del triangolo */
    border-style: solid; /* Tipo di bordo del triangolo */
    border-color: rgba(51, 51, 51, 0.8) transparent transparent transparent; /* Colore del triangolo */
	    z-index: 10;
}

.selected-text {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: -20px;
    color: #333;
	animation: fadeInBlur 2s ease forwards
}

/* Nascondi su desktop */
@media (min-width: 769px) {
    .selected-text {
        display: none;
    }
}

/* Mostra su dispositivi mobili */
@media (max-width: 768px) {
    .selected-text {
        display: block;
    }
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    /* Nascondi il menu sui dispositivi mobili */
    #menu {
        display: none;
    }
	
	
    /* Stili per l'immagine 'razza-image' in alto */
    .image-container {
		width: 50%;
		margin-top: 100px;
		margin-bottom: -100px;
    }

    .razza-image {
        max-width: 190%;
        height: auto;
		margin-bottom: 0px;
		margin-top: -100px;
    }

    /* Posiziona il logo in basso */
    .logo {
        margin-bottom: 150px;
		width: 60%;
        display: flex;
        justify-content: center;

    }

    .logo img {
        max-width: 100%;
        height: auto;
    }

    /* Regola il carosello per il mobile */
    .round-images-container {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        margin: 20px 0;
        -ms-overflow-style: none;  /* IE e Edge */
        scrollbar-width: none;  /* Firefox */
		

    }
	
	.round-images-container {
    touch-action: pan-y; /* Permette lo scrolling verticale, ma non quello orizzontale */
}


    .round-images-container::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, Opera */
    }

    .round-images {
        display: flex;
        flex-wrap: nowrap;
    }
	
	

    .round-image {
        flex: 0 0 auto;
        width: 200px;
        height: 200px;
        margin: 0 10px;
		opacity: 0; /* Mantieni l'opacità del testo a 1 */
    }

    /* Nascondi le frecce del carosello */
    .left-arrow,
    .right-arrow {
        display: none;
    }

    /* Corpo della pagina */
    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
	background-color: transparent;
    }
	
	.round-images-wrapper {	
		margin-top: 80px;
	}
}


/* Animazione fade-in con effetto blur */
@keyframes fadeInBlur {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}