@media (min-width: 781px) {
/* ---------- CATEGORY CONTAINER ---------- */
.service-categories {
  max-width: 1100px;
  margin: 0 auto;
}

.service-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

/* ---------- CATEGORY BLOCK ---------- */
.service-group {
  cursor: pointer;
  width: 30%;
  background: #F0EDCC;
  color: #02343F;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  transition: background 0.2s ease;
}

.service-group:hover {
  background: #e3ec81;
}

.service-group h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

/* ---------- HEADER WITH ICON ---------- */
.service-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-header h3 {
  margin: 0;
}

.cardIcons {
  height: 32px;
  width: auto;
}

/* ---------- LIST ---------- */
/* Remove bullets */
.service-group ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* ---------- CLICKABLE TEXT (span) ---------- */
.li-click {
  display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 400;        /* normal */
  color: inherit;          /* same color as parent */
  text-decoration: none;   /* no underline */
}

/* Hover: thicker + blue */
.li-click:hover {
  font-weight: 600;
  color: #1673ff;
}

/* Prevent full-width LI hover coloring */
.service-group ul li:hover {
  color: inherit;
}
}

@media(max-width: 780px) {
  /* --- CATEGORY CONTAINER --- */
  .service-categories {
    max-width: 100%;
    margin: 20px auto;
    padding: 0 10px;
    /* NEW: This ensures rows themselves don't stick together */
    display: flex;
    flex-direction: column;
    gap: 12px; 
  }

  .service-categories h2 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 5px; /* Reduced to keep it tight */
  }

  /* --- ROW STRATEGY --- */
  .service-row {
    display: flex;
    flex-direction: column; 
    gap: 12px; /* Spacing between cards INSIDE the row */
    margin-bottom: 0; /* Removed to let the parent handle spacing */
  }

  /* --- CATEGORY BLOCK --- */
  .service-group {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background: #F0EDCC;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin: 0; /* Reset margins to ensure flex gap handles everything */
  }

  /* --- HEADER WITH ICON --- */
  .service-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  .service-header h3 {
    font-size: 1.15rem;
    margin: 0;
  }

  .cardIcons {
    height: 28px;
    width: auto;
  }

  /* --- LIST --- */
  .service-group ul {
    list-style: none; /* Removes bullets */
    padding: 0;
    margin: 0;
    display: flex; 
    flex-direction: column;
  }

  /* --- CLICKABLE TEXT (span) --- */
  .li-click {
    display: block;
    padding: 6px 0;
    font-size: 1rem;
    color: #02343F;
    text-decoration: none;
  }

  .li-click:active {
    color: #1673ff;
    font-weight: 600;
  }
}