/* =========================
   HARD FIX: Force Donate button visible on mobile
   ========================= */

@media (max-width: 768px) {

    /* Force ALL standalone buttons visible */
    a.btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Specifically target Donate button */
    a[href="donate/index.php"] {
        display: flex !important;
        width: 100% !important;
        margin-top: 2rem !important;
        justify-content: center;
        align-items: center;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Kill parent clipping */
    .hero,
    .hero-section,
    .give-back,
    .container,
    .center {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('../../../images/stock/unsplash-1464822759023-fed622ff2c3b.jpg');
            background-size: cover;
            background-position: center;
        }

        .lesson-card {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border-left: 4px solid var(--color-primary);
        }

        .video-thumbnail {
            width: 100%;
            height: 200px;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border-radius: 4px;
            margin-bottom: 1rem;
            cursor: pointer;
        }

        .video-thumbnail i {
            font-size: 3rem;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .video-thumbnail:hover i {
            opacity: 1;
        }

        .guest-coach img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 1rem;
            object-fit: cover;
        }
         .hero h1 {
        color: #ffffff !important;
    }

    .hero .lead {
        color: rgba(255, 255, 255, 0.95) !important;
    }