.hero-bg {
  background: linear-gradient(90deg,#0f172a 0%, #0ea5a4 100%);
}

.hover-img {
  transition: transform .4s ease, box-shadow .4s ease;
}
.hover-img:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ==============================
   HEADER NAVIGATION
================================ */

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem; /* rounded-md */
  color: #334155; /* slate-700 */
  transition: background-color 0.25s ease, color 0.25s ease;
  display: inline-flex;
  align-items: center;
}

/* Hover state */
.nav-link:hover {
  background-color: rgba(14, 165, 164, 0.12);
  color: #0f766e; /* teal-700 */
}

/* Active section (ONLY ONE AT A TIME) */
.nav-link.active {
  background-color: #0ea5a4;
  color: #ffffff;
}

#card-1:hover{
  background-color: #0ea5a4;
  color: #ffffff;
}