header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    transition:
        top 0.5s ease-in-out,
        transform 0.5s ease-in-out;
    background-color: white;
    height: auto;
    z-index: 777;
    transition: transform 0.3s ease;

    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header.nav-hidden {
    transform: translateY(-100%);
    opacity: 0;
    transition:
        top 0.5s ease-in-out,
        transform 0.5s ease-in-out;
}