/* Menu laterale - Hamburger */
/* Hamburger menu */
/* Stile per il menu hamburger */
.hamburger-menu {
    cursor: pointer;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 300px; /* Valore per avvicinarlo molto di più al menu */
    z-index: 1000;
    display: block;
}

.hamburger-menu .bar {
    background-color: #ff6600; /* Arancione vivo */
    height: 4px;
    margin: 5px 0; /* Aumenta lo spazio tra le barre */
    width: 100%;
    transition: all 0.4s ease; /* Transizione fluida per l'animazione */
}

/* Trasforma l'hamburger in una "X" */
.hamburger-menu.active .bar.large {
    transform: rotate(45deg) translate(5px, 5px);
    width: 100%; /* Mantieni la lunghezza per la barra grande */
}

.hamburger-menu.active .bar.medium {
    opacity: 0; /* Nascondi la barra centrale */
}

.hamburger-menu.active .bar.small {
    transform: rotate(-45deg) translate(6px, -6px);
    width: 100%; /* Mantieni la lunghezza anche qui */
}

.hamburger-menu .bar.large {
    width: 100%;
}

.hamburger-menu .bar.medium {
    width: 75%; /* La seconda barra è più corta */
}

.hamburger-menu .bar.small {
    width: 50%; /* La terza barra è la più corta */
}

.menu-items {
    display: flex;
    gap: 20px;
}

/* Nascondi il menu laterale di default */
.side-menu {
    position: fixed;
    top: 0;
    left: -300px; /* Inizia fuori dallo schermo */
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    z-index: 10000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transition: left 0.6s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.6s ease; /* Transizione più morbida */
    opacity: 0; /* Inizia invisibile */
    transform: translateX(-100px); /* Sposta leggermente verso sinistra per l'effetto di scorrimento */
}

.side-menu.open {
    left: 0;
    opacity: 1; /* Rendi visibile */
    transform: translateX(0); /* Scorri verso la posizione originale */
}

/* Pulsante di chiusura del menu */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    transition: transform 0.3s ease, color 0.3s ease; /* Transizione morbida per il colore e la dimensione */
}

.close-btn:hover {
    transform: scale(1.2); /* Leggero ingrandimento al passaggio del mouse */
    color: #ff6600; /* Cambia il colore a un arancione vivo */
}