.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
#services {
  padding: calc(var(--spacing) * 2) 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--spacing);
} 
.service-item {
  padding: calc(var(--spacing) * 1.5);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.service-item h3 {
  margin-bottom: var(--spacing);
  color: var(--color-secondary);
  text-align: center;
}

/* make the UL itself an inline-block, center it, but keep its list items left-aligned */
.service-item .service-list {
  display: inline-block;       /* shrink‐wrap to its contents */
  margin: 0 auto;              /* center the UL within the card */
  padding-left: 1.2em;         /* keep bullet indentation */
  text-align: left;            /* list items align left inside the UL */
}

/* optional: add a little breathing room between list items */
.service-item .service-list li {
  margin-bottom: 0.5em;
}

.centeredh2 {
  text-align: center;
}

/* Hero Section */
#hero {
  text-align: center;
  padding: calc(var(--spacing) * 2) 0;
}
#hero h2 {
  margin-bottom: var(--spacing);
}

/* About */
#about p {
  text-align: center;
  margin-top: var(--spacing);
}