/* =========================================
   Mobile Devices (max-width: 767px)
   ========================================= */
@media (max-width: 767px) {
    /* Adjust Hero Section */
    .hero-title-mobile {
        font-size: 2.5rem !important; /* Smaller title for mobile */
        line-height: 1.2 !important;
    }

    /* How it works arrows for mobile grid (2 per row) */
    .step-arrow-mobile {
        display: block !important;
        position: absolute;
        top: 35%;
        right: -20px;
        transform: translateY(-50%);
        z-index: 20;
        color: #22c55e;
    }
    
    /* Hide the right arrow on every 2nd item (end of row) and replace with a down arrow if needed, 
       but for simplicity, we just hide the arrow on the 2nd and 4th items */
    .step-card:nth-child(2n) .step-arrow-mobile {
        display: none !important;
    }

    /* Review Card mobile width adjustments */
    .review-card-mobile {
        width: 300px !important; /* Slightly smaller width on mobile */
        padding: 1.5rem !important;
    }
}

/* =========================================
   Tablets (min-width: 768px) and (max-width: 1023px)
   ========================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet specific styles can go here */
}

/* =========================================
   Desktops (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {
    /* Desktop specific styles can go here */
    .step-arrow-mobile {
        display: none !important;
    }
}