/* Stili Generali */

body {

    background-color: #f8f9fa;

    color: #343a40;

    margin-top: 0; /* Rimuove margine superiore per eliminare spazio */

}



.container-fluid {

    display: flex;

    justify-content: space-between;

}



/* Navbar */

.navbar {

    background-color: black !important;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 1000;

    padding: 10px 20px;

    display: flex;

    justify-content: space-between; /* Spazia tra logo e menu */

    align-items: center; /* Allinea verticalmente gli elementi */

    margin-top: 0; /* Assicurati che non ci sia spazio sopra la navbar */

}



.navbar .container-fluid {

    display: flex;

    justify-content: space-between; /* Spaziatura tra gli elementi */

    width: 100%;

}



.navbar-toggler {

    border: 1px solid #ffffff;

    margin-left: 0; /* Rimuove il margine a sinistra */

}



#logoBrand {

    width: 8%;

    cursor: pointer;

    border: 1px solid white;

}



.navbar-brand {

    color: #ffffff !important;

    font-weight: bold;

}



.navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}



/* Navbar Links */

.navbar-nav {

    display: flex;

    justify-content: center; /* Centra i link orizzontalmente */

    flex: 1; /* Consente ai link di espandersi e occupare lo spazio disponibile */

}



.nav-link {

    color: #ffffff !important;

    font-weight: 500;

    font-size: 1.5rem;

    margin: 0 20px; /* Distanza tra i link */

    text-align: center;

}



.nav-link:hover {

    color: #ced4da !important;

}



/* Offcanvas Menu */

.offcanvas {

    background-color: #343a40;

    color: #ffffff;

}



.offcanvas-title {

    color: #ffffff;

}



/* Introduzione */

.paragrafoIntroduzione {

    display: flex;

    justify-content: center;

    text-align: center;

    margin-top: 5%;

}



@keyframes slideIn {

    0% {

        transform: translateX(-100%);

        opacity: 0;

    }

    100% {

        transform: translateX(0);

        opacity: 1;

    }

}



.testoPresentazione {

    font-size: 1.5rem;

    font-style: italic;

    animation: slideIn 0.5s ease-out;

}



/* Immagine Principale */

.immaginePrimaria {

    width: 100%;

    height: 750px;

    margin-top: 3.5%;

}



.immaginePrimaria img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Secondo Livello */

.imgSecondoLivello {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin: 5% 0;

    min-height: 400px;

    flex-wrap: wrap;

    animation-name: example;

    animation-duration: 3s;

    animation-delay: 2s;

    animation-fill-mode: both;

}



.card-spiegazione {

    width: 20%;

    text-align: center;

    margin: 0 5%;

    opacity: 0;

    animation: slideIn 0.8s ease-in forwards;

}



/* Animazione per sfocatura */

@keyframes fadeInBlur {

    0% {

        opacity: 0;

        filter: blur(20px);

    }

    100% {

        opacity: 1;

        filter: blur(0);

    }

}



.card-title {

    text-align: center;

}



/* Terzo Livello */

.terzoLivello {

    background-color: #212529;

    display: flex;

    justify-content: center;

    padding: 20px 0;

}



.containerTerzoLivello {

    margin-top: 2%;

    display: flex;

    flex-direction: row;

    gap: 20px; /* Spaziatura tra gli elementi */

    flex-wrap: wrap;

    justify-content: center;

}



.containerTerzoLivello div {

    color: #495057;

    font-size: 1rem;

    margin: 10px;

}



/* Sezioni */



.container-fluid {

    display: flex;

    justify-content: center;

}



.via {

    font-weight: bolder;

}



.sezioni {

    margin: 0 10%;

}



.titolo {

    font-weight: bolder;

}



.logoBrandSottostante {

    width: 45%;

}



.paragrafoUltimoLivello {

    font-weight: bolder;

    font-size: 1.5rem;

}



/* Responsività per dispositivi con schermi più piccoli */

@media (max-width: 992px) {

    /* Navbar */

    .navbar {

        padding: 10px 15px;

        flex-direction: column; /* Disposizione verticale */

        align-items: flex-start;

    }



    #logoBrand {

        width: 12%; /* Aumenta la dimensione del logo per maggiore visibilità */

        margin-bottom: 10px;

    }



    .navbar-nav {

        flex-direction: column;

        gap: 10px; /* Spaziatura tra i link */

        align-items: flex-start;

        width: 100%;

        align-items: center;

    }



    .nav-link {

        font-size: 1.2rem; /* Riduce leggermente la dimensione del font */

        margin: 5px 0;

    }



    /* Introduzione */

    .paragrafoIntroduzione {

        margin-top: 10%; /* Più spazio dall'alto per schermi più piccoli */

        padding: 0 5%; /* Margine laterale per contenere il testo */

    }



    .testoPresentazione {

        font-size: 1.2rem; /* Riduce la dimensione del testo */

    }



    /* Immagine Principale */

    .immaginePrimaria {

        height: 500px; /* Riduce l'altezza dell'immagine */

    }



    /* Secondo Livello */

    .imgSecondoLivello {

        flex-direction: column; /* Disposizione verticale per le card */

        margin: 10% 0;

    }



    .card-spiegazione {

        width: 80%; /* Card più grandi su schermi piccoli */

        margin: 20px 0;

    }



    /* Terzo Livello */

    .containerTerzoLivello {

        gap: 15px; /* Riduce la spaziatura tra gli elementi */

        flex-direction: column;

    }



    .containerTerzoLivello div {

        font-size: 0.9rem; /* Font leggermente più piccolo */

    }



    /* Sezioni */

    .sezioni {

        margin: 0 5%; /* Riduce i margini laterali */

    }



    .logoBrandSottostante {

        width: 60%; /* Riduce la dimensione del logo */

        margin: 20px auto;

    }



    .paragrafoUltimoLivello {

        font-size: 1.2rem; /* Font più piccolo per leggibilità */

    }

}