/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .header-rounded-images {
        background: linear-gradient(to bottom, #6083d0, #7b5fbc) !important; /* Fallback */
        background-image: url('../../images/public/mobile-header-bg.png') !important; /* Use your actual image path */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .header-rounded-images .overwrite-background {
        background-color: transparent !important;
        background-image: none !important;
        /* Optionally make it fully transparent to let parent background show through */
        opacity: 1 !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 576px) {
    .header-rounded-images {
        /* You can adjust specific settings for extra small devices if needed */
        background-position: center center !important;
    }
}