/* Header principale con il logo grande */
.main-header {
    padding: 20px 0;
    display: none;
    justify-content: center;
}

/* Barra di navigazione */
.main-nav {
    /* Proprietà per l'effetto sticky */
    position: -webkit-sticky; /* Per compatibilità con Safari */
    position: sticky;
    top: 0; /* Si blocca quando il suo bordo superiore tocca la cima della finestra */
    
    /* Proprietà estetiche necessarie quando è sticky */
    background-color: #ffffffc9; /* Sfondo per non far trasparire il contenuto sottostante */
    z-index: 1000; /* Assicura che rimanga sopra tutti gli altri elementi */
    
    display: flex;
    /* Impila gli elementi (logo e menu) uno sopra l'altro */
    flex-direction: column;
    /* Centra gli elementi orizzontalmente */
    align-items: center;
    /* Aggiunge un po' di spazio tra il logo e il menu */
    gap: 15px; 
    padding: 1rem 0; /* Aumentiamo un po' lo spazio sopra/sotto */
}

.nav-logo img {
    height: 40px; /* Altezza fissa per il logo piccolo */
}

.nav-menu {
    width: 100vw;
}

.nav-menu ul {
    display: flex;
    justify-content: space-around;
    padding: 0rem 1rem;
}

.nav-menu li a {
    /* text-transform: uppercase; */
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

.nav-menu li.is-active a {
    /* Scegli lo stile che preferisci. Esempi: */
    color: black; /* Cambia colore */
    text-decoration: underline; /* Aggiunge una sottolineatura */
}