body {
  background: #f8f9fa;
  font-family: 'Segoe UI', sans-serif;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  will-change: transform, box-shadow;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Ensures child elements don't overflow rounded corners */
}

.card:hover,
.card:focus {
  transform: scale(1.03); /* Slightly increased scale for more impact */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  outline: none; /* Removes default focus outline for a cleaner look */
}