.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: -8px 0 12px;
}
.portfolio-filter {
  cursor: pointer;
  color: #d5ddd3;
  background: #1c211c;
  border: 1px solid #3c473d;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.portfolio-filter:hover,
.portfolio-filter.is-active {
  color: #102017;
  background: var(--lime);
  border-color: var(--lime);
}
.portfolio-filter span { margin-left: 5px; opacity: .75; }
.portfolio-count { margin: 0 0 28px; color: var(--muted); font-size: 12px; }
.project-card[hidden] { display: none !important; }
.project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #60876a;
  border-radius: 6px;
  padding: 10px 13px;
  color: var(--lime);
  font-weight: 800;
}
.project-card:hover .project-link { background: var(--lime); border-color: var(--lime); color: #102017; }
.visual-roses { background: radial-gradient(circle at 74% 28%, #a45972, transparent 44%), #422637; }
.visual-msgroup { background: radial-gradient(circle at 20% 70%, #578777, transparent 46%), #213c3a; }
.visual-megastore { background: radial-gradient(circle at 80% 30%, #5171a2, transparent 48%), #252d47; }
.visual-masjid { background: radial-gradient(circle at 30% 35%, #7a8c67, transparent 48%), #293b31; }
.visual-dreamz { background: radial-gradient(circle at 78% 75%, #8a8d9a, transparent 47%), #303b52; }
.visual-bidri { background: radial-gradient(circle at 25% 28%, #937a57, transparent 48%), #443b32; }
.visual-steel { background: radial-gradient(circle at 72% 25%, #678c9c, transparent 48%), #283b42; }
.visual-sahayog { background: radial-gradient(circle at 25% 72%, #758c67, transparent 48%), #2c3f2c; }
.visual-catering { background: radial-gradient(circle at 75% 35%, #a37e55, transparent 48%), #45372d; }
.project-visual[class*="visual-"] .project-initial { padding: 0 34px; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
  .portfolio-filter { flex: 0 0 auto; }
}
