/* ===================================
   ADD THIS CODE TO YOUR CSS FILE
   TO FIX MARQUEE IN MOBILE VIEW
   =================================== */

@media screen and (max-width: 768px) {
    
    /* Since your header is position: fixed, the marquee needs margin-top */
    .marquee-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 140px !important; /* Adjust this based on your mobile navbar height */
        background: linear-gradient(135deg, #2d5016 0%, #4a7c2c 100%) !important;
        padding: 12px 0 !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 50 !important;
    }

    .marquee-content {
        display: flex !important;
        animation: scroll 25s linear infinite !important;
        white-space: nowrap !important;
    }

    .marquee-content span {
        display: inline-block !important;
        padding: 0 20px !important;
        color: white !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
}

/* ===================================
   IMPORTANT: ALSO UPDATE THESE SECTIONS
   =================================== */

@media screen and (max-width: 768px) {
    
    /* Hero section also needs to be pushed down */
    .hero {
        margin-top: 0 !important;
        padding-top: 2rem !important;
    }
}