/* Mobile Specific Styling - FULL SEPARATE CONTROL */

@media (max-width: 600px) {

    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        gap: 10px;
        position: relative; /* Ensures absolute positioning works for the logo */
    }

    .hero-right-content {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0 10px;
        margin-top: 150px; 
        margin-bottom: -70px; 
    }

    /* 1. BIKE LOTTIE - ADJUST HERE */
    #bikerider-lottie {
        width: 200px;        
        height: 200px;
        /* CHANGED FROM 90px TO 150px TO MOVE IT DOWN AWAY FROM LOGO */
        margin-top: 150px;    
        margin-bottom: -10px; 
        order: 1;            
    }

    /* 2. DELIVERY BUTTON - ADJUST HERE */
    .delivery-partner-btn {
        width: 100%;
        max-width: 300px;
        font-size: 15px;
        font-weight: 800;
        padding: 15px 0;
        text-align: center;
        border-radius: 50px;
        background-color: #fdc936;
        color: black;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
        margin-top: 10px;     
        margin-bottom: 10px; 
        order: 2;
    }

    /* 3. SEAT LOTTIE - ADJUST HERE */
    #seat-lottie {
        width: 120px;        
        height: 120px;
        margin-top: 0px;     
        margin-bottom: 10px; 
        order: 3;
    }

    /* 4. VIEW MENU BUTTON - ADJUST HERE */
    .hero-cta {
        width: 100%;
        max-width: 300px;
        font-size: 15px;
        font-weight: 800;
        padding: 15px 0;
        text-align: center;
        border-radius: 50px;
        background-color: #fdc936;
        color: black;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
        margin-top: -150px;     
        margin-bottom: 0px;
        order: 4;
    }

    /* FIX: Perfectly centers the logo on mobile */
    .hero-logo {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        max-width: 220px;
        z-index: 5;

            /* ✅ MANUAL CONTROL: MOVE THE HEADER TEXT UP OR DOWN */
    .hero-left-content {
        /* Increase the value (e.g., 50px) to move text DOWN */
        /* Decrease the value (e.g., -50px) to move text UP */
        transform: translateY(0px); 
    }
    }
}