/* ============================================================
   SERVICES.CSS — page-specific styles for services.php:
   the hero banner image, and the responsive static card grid for
   the services listing. The card itself (.service-card /
   .service-card-image / .service-card-actions / .service-whatsapp-btn)
   is shared with the homepage slider and lives in components.css
   untouched. The shared .hero/.hero-page rules (layout, overlay,
   text alignment, breadcrumb) also stay untouched — only the
   per-page background image variable is set here.
   ============================================================ */
:root{
  --hero-bg-image: url('../../assets/img/service.jpeg');
}

.services-listing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch;}
.services-listing-grid .service-card{height:100%;}

@media(max-width:1100px){
  .services-listing-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .services-listing-grid{grid-template-columns:1fr;}
}