/* Burger lignes */
.burger {
    display: none;
    width: 28px;
    height: 22px;
    position: relative;
    cursor: pointer;
    z-index: 1100;
}

.burger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #007bff;
    margin: 5px 0;
    border-radius: 2px;
    transition: all 0.4s ease;
}

.header.scrolled .burger span {
    background: #fff;
}

/* Animation burger -> X */
.burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
@media screen and (max-width: 768px) {
    .burger {
        display: block;
    }

    nav {
        position: fixed;
        top: 60px;
        right: -250px;
        width: 220px;
        height: calc(100% - 60px);
        background-color: #007bff;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        transition: right 0.4s ease;
    }

    nav.active {
        right: 0;
    }

    nav a {
        color: #fff;
        margin: 15px 0;
        font-size: 1.1rem;
        opacity: 0;
        transform: translateX(50px);
    }

    nav.active a {
        opacity: 1;
        transform: translateX(0);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    nav.active a:nth-child(1) { transition-delay: 0.05s; }
    nav.active a:nth-child(2) { transition-delay: 0.1s; }
    nav.active a:nth-child(3) { transition-delay: 0.15s; }
    nav.active a:nth-child(4) { transition-delay: 0.2s; }
    nav.active a:nth-child(5) { transition-delay: 0.25s; }
    nav.active a:nth-child(6) { transition-delay: 0.3s; }

    nav a::after { display: none; }

    .account a, .account span {
        color: #fff;
        margin: 10px 0;
    }
}