/* Projects page only: every project has its own muted accent colour, matching the
   palette used on the Services and Products pages. The colour is keyed to the
   project (data-acc), so it stays the same in the desktop carousel, the phone
   grid and the repeated cards that make the carousel loop. */

.project-card[data-acc="1"] { --acc: #2f5fb3; }  /* Budget Plus   blue   */
.project-card[data-acc="2"] { --acc: #148f8a; }  /* PayZamfara    teal   */
.project-card[data-acc="3"] { --acc: #6b5fc0; }  /* Pay Jigawa    indigo */
.project-card[data-acc="4"] { --acc: #b98a1f; }  /* Plateau IGR   ochre  */
.project-card[data-acc="5"] { --acc: #2f8a5a; }  /* PayKaduna     green  */
.project-card[data-acc="6"] { --acc: #c0603a; }  /* eWAS          clay   */
.project-card[data-acc="7"] { --acc: #b03f72; }  /* NASENI        rose   */
.project-card[data-acc="8"] { --acc: #3b7fa6; }  /* NGREM         steel  */
.project-card[data-acc="9"] { --acc: #7d8a2e; }  /* Bimashelters  olive  */

.project-card {
  border: 2px solid var(--acc, #0623b1);
  box-shadow: 0 8px 22px rgba(15, 30, 70, .12);
}
.project-card:hover { box-shadow: 0 12px 28px rgba(15, 30, 70, .18); }
.project-card .project-image { border-bottom: 2px solid var(--acc, #0623b1); }

/* short accent bar under the project name */
.project-card .project-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--acc, #0623b1);
}