@media (max-width: 768px) {
    body .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease-in-out;
    }
    
    body {
        padding-top: 80px; /* Adjust based on header height */
    }
    
    /* Optional: hide on scroll down, show on scroll up */
    body .site-header.header-hidden {
        transform: translateY(-100%);
    }
}