/* Colore personalizzato della navbar */
.custom-navbar {
    background-color: #B1D3FE;
    position: fixed;
    /* Navbar fissata in cima alla pagina */
    width: 100%;
    /* Larghezza completa */
    z-index: 1000;
    /* Assicuriamoci che la navbar sia sopra gli altri elementi */
    height: 60px;
    top: 0;
    left: 0;
    padding: 0 10px;
    /* Aggiungi padding laterali per un po' di spazio */
}

/* Dimensioni dell'immagine nel logo della navbar */
.navbar-logo {
    height: 50px;
    width: auto;
}


.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(0,0,0,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Voci di menu nella navbar */
.navbar-nav .nav-item,
.navbar-nav .nav-link {
    color: black !important;
    font-size: 1.2rem;
}

/* Impostazioni generali dei menu dropdown */
.navbar-collapse .dropdown-menu {
    background-color: #B1D3FE !important;
    border: none;
    box-shadow: none;
}


/* Rimuovi il bordo dai sotto-menu */
.navbar-collapse .dropdown-menu {
    border: none;
    box-shadow: none;
    /* Rimuovi ombra */
}

/* Impostazioni generali dei menu dropdown */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    /* Nascondi i dropdown */
    left: 0;
    right: auto;
    max-height: 0;
    /* Aggiunto per animazione */
    overflow: hidden;
    /* Nasconde il contenuto in eccesso */
    transition: max-height 0.3s ease-out;
    /* Transizione dolce */
}

/* Quando il dropdown è visibile */
.dropdown-menu.show {
    max-height: 700px;
    /* Imposta la max-height per il contenuto */
}

/* Effetto hover per i singoli items */
.dropdown-item {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Colore hover */
    transform: translateX(5px);
    /* Lieve spostamento a destra */
}


/* Navbar Desktop */
@media (min-width: 992px) {
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .dropdown-item {
        animation: slideIn 0.3s ease-in-out;
    }

    .navbar-brand {
        display: flex;
        justify-content: flex-start;
        /* Logo a sinistra */
    }

    .navbar-nav {
        display: flex;
        justify-content: flex-start;
        /* Voci di menu a sinistra */
    }

    .d-flex.ms-auto {
        margin-left: auto;
        /* Spinge le icone a destra */
    }

    /* Styling del dropdown su desktop */
    .navbar-collapse .dropdown-menu {
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s ease, border 0.2s ease;
    }

    .navbar-collapse .dropdown-menu:hover {
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .navbar-collapse .whatsapp-link,
    .navbar-collapse .e-mail-link,
    .navbar-collapse h4 {
        display: none;
        /* Nasconde WhatsApp e il titolo Menù su desktop */
    }
}



/* Navbar Mobile */
@media (max-width: 991px) {

    @keyframes bounce {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(5px);
        }

        100% {
            transform: translateX(0);
        }
    }

    .navbar-nav .nav-link:hover {
        animation: bounce 0.3s ease-in-out;
        color: #007bff;
    }

    .navbar .container-fluid {
        display: flex;
        align-items: center;
    }

    .navbar-toggler {
        order: 0;
    }

    .navbar-brand {
        order: 1;
        display: flex;
        justify-content: center;
        /* Centra il logo su mobile */
        flex-grow: 1;
    }

    .d-flex.ms-auto {
        order: 2;
        /* Assicurati che le icone siano a destra su mobile */
    }

    .navbar-collapse {
        order: 3;
        position: fixed;
        top: 60px;
        left: -100%;
        /* Inizialmente fuori dalla vista a sinistra */
        width: 280px;
        /* Larghezza della navbar mobile */
        height: calc(100% - 60px);
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        transition: left 0.5s ease-in-out;
        /* Transizione orizzontale */
        background-color: #B1D3FE;
        /* Azzurro come il dropdown */
    }

    /* Quando la navbar è visibile su mobile */
    .navbar-collapse.show {
        left: 0;
        /* Porta la navbar alla vista */
    }

    .navbar-toggler {
        position: absolute;
        left: 10px;
        z-index: 1050;
        /* Assicurati che l'hamburger sia sopra gli altri contenuti */
    }


    .navbar-nav {
        flex-direction: column;
        padding-top: 10px;
        /* Spazio per il logo */
    }

    .dropdown-menu {
        position: absolute;
        display: none;
        /* Nasconde il dropdown */
    }

    /* Stile per il testo "Menù" */
    .navbar-collapse h4 {
        text-align: center;
        font-weight: bold;
        color: #333;
        margin-top: 0 !important;
        /* Impedisce che ci siano margini indesiderati */
        padding-top: 10px;
        /* Aggiungi un piccolo padding sopra */
        font-size: 22px;
    }

    .navbar-nav a,
    .navbar-collapse h4 {
        font-size: 18px;
        /* Aumenta la dimensione del testo dei link e del titolo */
    }

    .navbar-nav a {
        padding: 15px;
        opacity: 0.1;
        /* Partenza con bassa visibilità */
        transform: translateY(10px);
        /* Partenza un po' più in basso */
        transition: opacity 0.6s ease-out, transform 0.4s ease-out;
        z-index: 10;
        /* Assicura che i link non siano coperti da altri elementi */
    }

    /* Quando l'elemento è visibile, aggiungi la transizione */
    .navbar-nav a.invisible {
        opacity: 0.1;
        /* Resetta l'opacità */
        transform: translateY(10px);
        /* Può aggiungere un effetto di movimento */
    }

    .navbar-nav a.visible {
        opacity: 1;
        /* Quando visibile, aumenta l'opacità */
        transform: translateY(0);
        /* Rimuove il movimento */
    }

    /* Se vuoi rendere il testo dei sotto-menu più grande */
    .dropdown-item {
        font-size: 16px;
        /* Aumenta la dimensione del testo nei sotto-menu */
    }

    /* Esempio per il titolo "Menù" */
    .navbar-collapse h4 {
        font-size: 22px;
        /* Aumenta la dimensione del testo per "Menù" */
    }

    .whatsapp-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #128C7E;
        font-size: 18px;
        font-weight: bold;
        padding: 15px;
    }

    .whatsapp-icon {
        width: 20px;
        height: 20px;
        margin-left: 5px;
        /* Distanza dalla scritta */
    }

    .e-mail-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #2071db;
        font-size: 18px;
        font-weight: bold;
        padding: 15px;
    }

    .e-mail-link i {
        font-size: 1.5rem;
        /* Impostiamo la stessa dimensione dell'icona di WhatsApp */
    }

    .e-mail-link:hover {
        background-color: #007bff;
        color: white;
    }
}