/* =========================================================
   SERVICES MENU (services.php) - CLEAN + SCOPED
   Image-only cards, 4x2 desktop, centered always
========================================================= */

.svcm-hero{
  padding: 26px 0 10px;
}

.svcm-title{
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
}

.svcm-sub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}

.svcm-page{
  padding: 12px 0 70px;
}

.svcm-grid{
  width: min(1200px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ 4 across */
  gap: 18px;

  align-items: stretch;
}

/* image-only card */
.svcm-card{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);

  transform: translateY(0) scale(1);
  filter: brightness(1);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.svcm-card:hover{
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.45);
}

.svcm-img{
  width: 100%;
  height: 330px;               /* ✅ adjust if you want taller */
  object-fit: cover;           /* ✅ fills the card */
  display: block;
  transform: scale(1);
  transition: transform .25s ease, filter .25s ease;
}

.svcm-card:hover .svcm-img{
  transform: scale(1.07);
  filter: brightness(1.10);
}

/* Responsive */
@media (max-width: 980px){
  .svcm-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .svcm-img{ height: 140px; }
}

@media (max-width: 520px){
  .svcm-img{ height: 130px; }
}


/* =========================================================
   GLOBAL FONT ROLES (automatic)
========================================================= */
h1, h2, h3{
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700; /* bold */
}

h4, h5, h6{
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500; /* medium */
}

p, blockquote, .quote{
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400; /* normal */
}