/* Mobile Hero Fix 
   Moves the hero message to the bottom area but lifted up (Thoda upar) 
   to clear indicators/cursors.
*/

@media (max-width: 768px) {

    /* Base layout for all hero containers */
    #hero .carousel-container,
    #g-body .hero-container,
    #what_we_do .hero-container,
    #resources .hero-container,
    #getinvolved-hero .hero-container,
    #donate-hero .hero-container,
    #award-hero .hero-container,
    #publication-hero .hero-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-bottom: 45px !important;
        height: 100% !important;
    }

    /* Index stays centered */
    #hero .carousel-container {
        align-items: center !important;
    }

    #hero .container {
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Subpages align left */
    #g-body .hero-container,
    #what_we_do .hero-container,
    #resources .hero-container,
    #getinvolved-hero .hero-container,
    #donate-hero .hero-container,
    #award-hero .hero-container,
    #publication-hero .hero-container {
        align-items: flex-start !important;
    }

    #g-body .container,
    #what_we_do .container,
    #resources .container,
    #getinvolved-hero .container,
    #donate-hero .container,
    #award-hero .container,
    #publication-hero .container {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure breadcrumb also aligns left and has no extra margins */
    .breadcrumb-nav,
    .breadcrumb-nav ul {
        text-align: left !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #hero h2,
    #g-body h2,
    #what_we_do h2,
    #resources h2,
    #getinvolved-hero h2,
    #donate-hero h2,
    #award-hero h2,
    #publication-hero h2 {
        font-size: 1.6rem !important;
        margin-bottom: 10px !important;
    }

    #hero p,
    #g-body p,
    #what_we_do p,
    #resources p,
    #getinvolved-hero p,
    #donate-hero p,
    #award-hero p,
    #publication-hero p,
    .breadcrumb-nav,
    .breadcrumb-nav li,
    .breadcrumb-nav a {
        font-size: 1.1rem !important;
    }

    /* Mobile adjustments for Hero Description Box */
    .hero-description-box {
        max-width: 95% !important;
        padding: 12px 20px !important;
        margin-bottom: 0 !important;
    }

    .hero-description-box h2 {
        font-size: 20px !important;
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
    }

    /* Awards Button Mobile Refinement */
    .all-awards-btn-container {
        margin: 10px 0 20px !important;
    }

    .all-awards-btn {
        padding: 8px 15px !important;
        font-size: 14px !important;
        width: auto !important;
        min-width: unset !important;
    }

    .all-awards-btn i {
        margin: 0 5px !important;
    }

    /* Back Home Button Mobile Refinement */
    .back-home-section {
        padding: 10px 0 !important;
    }

    .back-home-btn {
        padding: 8px 25px !important;
        font-size: 14px !important;
    }

    /* Donate Page Buttons Refinement */
    .donateBtn {
        padding: 8px 25px !important;
        font-size: 14px !important;
    }

    .category-buttons button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin: 5px !important;
    }
}