.mh-projects{
  --mh-navy:#0f2a3a;
  --mh-accent:#2f6fdd;
  --mh-muted:#5f6c79;
  --mh-border:#e3e8ee;
  --mh-bg:#ffffff;
  --mh-radius:18px;
  --mh-font-head:"Alexandria",Sans-serif;
  --mh-font-body:'Tajawal','Almarai',sans-serif;
  font-family:var(--mh-font-body);
  color:var(--mh-navy);
  padding:100px 20px 120px;
  box-sizing:border-box;
}
.mh-projects *,
.mh-projects *::before,
.mh-projects *::after{box-sizing:border-box}
.mh-projects .mh-wrap{max-width:1200px;margin-inline:auto}

.mh-projects .mh-head{text-align:center;margin-bottom:30px}
.mh-projects .mh-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 18px;border:1px solid var(--mh-border);border-radius:999px;
  background:var(--mh-bg);font-size:14px;font-weight:700;color:var(--mh-navy);
}
.mh-projects .mh-eyebrow span{color:var(--mh-accent);font-size:14px;line-height:1}
.mh-projects .mh-title{
  margin:18px 0 14px;font-family:var(--mh-font-head);
  font-size:clamp(30px,4.4vw,40px);line-height:1.4;font-weight:500;color:var(--mh-navy);
}
.mh-projects .mh-sub{
  max-width:850px;margin:0 auto;font-size:16px;line-height:1.9;color:var(--mh-muted);
}

.mh-projects .mh-tabs{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;padding:0;
}
.mh-projects .mh-tab{
  appearance:none;cursor:pointer;
  padding:10px 22px;border-radius:999px;
  border:1px solid var(--mh-border);background:var(--mh-bg);
  font-family:var(--mh-font-body);font-size:22px;font-weight:700;color:var(--mh-navy);
  transition:background .2s,color .2s,border-color .2s;
}
.mh-projects .mh-tab:hover{border-color:var(--mh-navy)}
.mh-projects .mh-tab[aria-selected="true"]{
  background:var(--mh-navy);border-color:var(--mh-navy);color:#fff;
}
.mh-projects .mh-tab:focus-visible{outline:2px solid var(--mh-accent);outline-offset:3px}

.mh-projects .mh-summary{
  max-width:820px;min-height:3.6em;margin:0 auto 30px;text-align:center;
  font-size:15px;line-height:1.9;color:var(--mh-muted);
}

.mh-projects .mh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mh-projects.mh-cols-1 .mh-grid{grid-template-columns:1fr}
.mh-projects.mh-cols-2 .mh-grid{grid-template-columns:repeat(2,1fr)}
.mh-projects.mh-cols-3 .mh-grid{grid-template-columns:repeat(3,1fr)}

.mh-projects .mh-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--mh-bg);border:1px solid var(--mh-border);
  border-radius:var(--mh-radius);overflow:hidden;
  transition:border-color .2s;
}
.mh-projects .mh-card[hidden]{display:none}
.mh-projects .mh-card.mh-in{animation:mhShow .35s ease both}
.mh-projects .mh-card.mh-has-link:hover{border-color:var(--mh-navy)}
.mh-projects .mh-card-link{
  position:absolute;inset:0;z-index:2;
}
@keyframes mhShow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mh-projects .mh-img{aspect-ratio:3/2;overflow:hidden;background:#dfe6ec}
.mh-projects .mh-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.mh-projects .mh-has-link:hover .mh-img img{transform:scale(1.04)}

.mh-projects .mh-body{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px;flex:1}
.mh-projects .mh-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border:1px solid var(--mh-border);border-radius:999px;
  font-size:13px;font-weight:700;color:var(--mh-navy);
}
.mh-projects .mh-badge svg{width:14px;height:14px;color:var(--mh-accent);flex:none}

.mh-projects .mh-name{
  margin:0;font-family:var(--mh-font-head);
  font-size:20px;line-height:1.6;font-weight:400;color:var(--mh-navy);
}
.mh-projects .mh-desc{margin:0;font-size:16px;line-height:1.85;color:var(--mh-muted)}

.mh-projects .mh-foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mh-projects .mh-loc{
  padding:5px 14px;border:1px solid var(--mh-border);border-radius:999px;
  font-size:16px;font-weight:500;color:var(--mh-navy);
}
.mh-projects .mh-loc b{font-weight:500;color:var(--mh-accent)}
.mh-projects .mh-more{
  font-size:16px;font-weight:700;color:var(--mh-accent);
}

@media (max-width:991px){
  .mh-projects.mh-cols-3 .mh-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mh-projects{padding:40px 16px}
  .mh-projects .mh-grid,
  .mh-projects.mh-cols-2 .mh-grid,
  .mh-projects.mh-cols-3 .mh-grid{grid-template-columns:1fr}
  .mh-projects .mh-tabs{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    padding-bottom:6px;scrollbar-width:none;
  }
  .mh-projects .mh-tabs::-webkit-scrollbar{display:none}
  .mh-projects .mh-tab{white-space:nowrap;flex:0 0 auto}
  .mh-projects .mh-summary{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .mh-projects .mh-card.mh-in{animation:none}
  .mh-projects .mh-tab{transition:none}
  .mh-projects .mh-img img,
  .mh-projects .mh-has-link:hover .mh-img img{transition:none;transform:none}
}