body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

header img {
    transition: opacity 0.3s ease-in-out;
}

#logo-scrolled {
    display: none;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.scrolled #logo-default {
    display: none;
}

.scrolled #logo-scrolled {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-10px);
    }
    60% {
        transform: translateX(-5px);
    }
}