/* Sticky Header State */
.header.scrolled {
    background-color: var(--color-bg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    position: fixed;
    animation: slideDown 0.3s ease;
}

.header.scrolled .nav-links a,
.header.scrolled .logo {
    color: var(--color-text);
    /* Change to dark text */
    text-shadow: none;
}

.header.scrolled .btn-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-shadow: none;
}

.header.scrolled .btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}