/* Fix for incorrect text and button display on desktop */

/* This CSS will specifically target any z-index or display issues that might be occurring */
@media (min-width: 769px) {
    /* Force display of text elements */
    .promo-content {
        position: relative;
        z-index: 100 !important; /* Very high z-index to overcome any potential issues */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        max-width: 65% !important; /* Give more space for text */
    }

    /* Ensure text is visible */
    .promo-header,
    .promo-subheader {
        position: relative;
        color: #ffffff !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Fix button display */
    .promo-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 101 !important;
        color: white !important;
        text-decoration: none !important;
    }

    /* Fix potential issues with images obscuring text */
    .promo-image {
        max-width: 65px !important;
        max-height: 65px !important;
        z-index: 10 !important; /* Lower z-index than content */
        position: relative !important;
    }

    /* Fix card inner layout */
    .promo-card-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        position: relative !important;
    }

    /* Fix card dimensions */
    .promo-card {
        width: 300px !important;
        min-width: 300px !important;
        height: 130px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Ensure the wrapper has proper layout */
    .promo-cards-wrapper {
        display: flex !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    /* Fix container scrolling */
    .promo-cards-container {
        overflow-x: auto !important;
        padding-bottom: 10px !important; /* Add space for scrollbar */
    }
}