/* Stili Generali */

body {

    background-color: #f8f9fa;

    color: #343a40;

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

}



/* 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;

    align-items: center;

    margin-top: 0;

}



.navbar .container-fluid {

    display: flex;

    justify-content: space-between;

    width: 100%;

}



.navbar-toggler {

    border: 1px solid #ffffff;

    margin-left: 0;

}



#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-nav {

    display: flex;

    justify-content: center;

    flex: 1;

}



.nav-link {

    color: #ffffff !important;

    font-weight: 500;

    font-size: 1.5rem;

    margin: 0 20px;

    text-align: center;

}



.nav-link:hover {

    color: #ced4da !important;

}



/* Terzo Livello */

.terzoLivello {

    background-color: #212529;

    display: flex;

    justify-content: center;

    padding: 20px 0;



    margin-top: 100%;

}



.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 */

.via {

    color: #495057;

    font-weight: bolder;

}



.sezioni {

    margin: 0 10%;

}



.titolo {

    font-weight: bolder;

}



.logoBrandSottostante {

    width: 45%;

}



.paragrafoUltimoLivello {

    font-weight: bolder;

    font-size: 1.5rem;

}



/* Gestione responsiva per dispositivi con schermi piccoli */

@media (max-width: 768px) {

    /* Navbar */

    .navbar {

        flex-direction: column;

        align-items: flex-start;

        padding: 15px 10px;

    }



    #logoBrand {

        width: 15%; /* Logo più grande per maggiore visibilità */

        margin-bottom: 10px;

    }



    .navbar-nav {

        flex-direction: column;

        gap: 10px; /* Aggiunge spazio tra i link */

        width: 100%;

        align-items: flex-start;

        align-items: center;

    }



    .nav-link {

        font-size: 0.9rem; /* Riduce il font per evitare sovrapposizioni */

        margin: 0 10px;

    }



        /* 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à */

        }

}



@media (max-width: 480px) {

    /* Navbar */

    .navbar {

        padding: 10px 5px;

    }



    #logoBrand {

        width: 20%;

    }



    .nav-link {

        font-size: 1rem;

    }



        /* Terzo Livello */

        .containerTerzoLivello {

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

            flex-direction: column;

        }

    

        .containerTerzoLivello div {

            font-size: 0.8rem; /* 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à */

        }

}