/* Mobile/Tablet Overrides - Hero Layout Fixes */
/* Increased breakpoint to 768px to cover large phones and small tablets */
@media (max-width: 768px) {

    /* 1. Ensure Container is Centered */
    .hero-content {
        padding: 140px 20px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* FIX: Allow Hero to grow naturally on mobile to prevent overlap */
    .hero {
        height: auto !important;
        min-height: 100vh !important;
        padding-bottom: 60px !important;
        /* Space for the bottom content */
    }

    /* 2. Center Headings and Labels */
    .hero-label {
        justify-content: center !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .hero h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .hero p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. Hero Bottom Structural Fixes */
    .hero-bottom {
        /* Reset absolute positioning */
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        /* Vertical Stack & Centering */
        display: flex !important;
        flex-direction: column-reverse !important;
        /* CTA on top of description, or vice versa depending on pref. Kept column-reverse to match previous. */
        align-items: center !important;
        justify-content: center !important;

        /* Spacing */
        width: 100% !important;
        margin: 0 !important;
        padding: 40px 20px 20px !important;
        gap: 20px !important;

        /* Appearance */
        opacity: 1 !important;
        animation: none !important;
        text-align: center !important;
    }

    .hero-description {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        float: none !important;
    }

    .hero-description p {
        text-align: center !important;
        margin: 0 auto 30px !important;
        max-width: 100% !important;
        color: #b0b0b0 !important;
        /* Explicit readable color */
    }

    .hero-scroll,
    .hero-right-group {
        display: none !important;
    }

    .hero-cta {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Featured Section - Stack on mobile */
    .featured-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding-top: 20px !important;
    }

    .featured-in-label {
        width: 100% !important;
        text-align: center !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }
}