.before-after-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.before-after-card img {
  width: 100%;
  display: block;
  height: auto;
}

.before-label, .after-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 10px;
  font-size: 0.9rem;
  border-radius: 4px;
}

.before-label {
  background: rgba(244, 67, 54, 0.8); /* Red tone */
}

.after-label {
  background: rgba(76, 175, 80, 0.8); /* Green tone */
}
:root{
  --accent:#2b8a3e;
  --dark:#0b2d13;
  --muted:#6c757d;
}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height:1.6;}
.hero{background:linear-gradient(135deg, rgba(43,138,62,0.9), rgba(11,45,19,0.9)), url('images/hero.jpg') center/cover no-repeat; color: white; padding:5rem 0;}
.card-img-top{height:180px; object-fit:cover;}
.navbar-brand{font-weight:700; color:var(--dark)!important}
a{color:var(--accent)}
.card img{transition:transform .35s ease;}
.card:hover img{transform:scale(1.05)}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.gallery-grid img{width:100%; height:160px; object-fit:cover; border-radius:6px; transition:transform .3s}
.gallery-grid img:hover{transform:scale(1.04)}
footer{font-size:0.9rem}
@media (max-width:576px){
  .hero{padding:3rem 1rem}
}