/* ================================
   RESPONSIVE BREAKPOINT SYSTEM
================================ */

/* -------- Stage 1 --------
   Desktop (default)
   No media query needed
--------------------------- */


/* -------- Stage 2 --------
   Tablet & Small Laptops
   ≤ 1024px
--------------------------- */
@media (min-width: 1024px) {
    .online-services-grid {grid-template-columns: repeat(4, 1fr);}
}



/* -------- Stage 3 --------
   Large Mobile / Tablets Vertical
   ≤ 768px
--------------------------- */
@media (min-width: 650px) and (max-width: 1023px) {
    .online-services-grid {grid-template-columns: repeat(2, 1fr);}
    .taxi-card {max-width: 500px; margin: 0 auto;}
}



/* -------- Stage 4 --------
   Mobile
   ≤ 500px
--------------------------- */
@media (min-width: 361px) and (max-width: 649px) {
   .online-services-grid {grid-template-columns: repeat(1, 1fr);}
   .service-card {max-width:400px; margin: 0 auto;}
   .taxi-card {max-width: 400px; margin: 0 auto;}
   .taxi-concierge-text{text-align: center;}
   .online-services-text{text-align: center;}
   
}



/* -------- Stage 5 --------
   Small Mobile (compact phones)
   ≤ 360px
--------------------------- */
@media (max-width: 360px) {
    .online-services-grid {grid-template-columns: repeat(1, 1fr);}
    .service-card {max-width:300px; margin: 0 auto;}
    .taxi-concierge-text{text-align: center;}
    .online-services-text{text-align: center;}
}