/* FEATURES — White cards, dark-blue text & icons, subtle shadow */

.features-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.feature-card {
  flex: 1 1 calc(33.33% - 18px);
  max-width: 360px;
  background: #ffffff;               /* white background */
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06); /* soft dark-blue-tinted shadow */
  transition: transform .25s ease, box-shadow .25s ease;
  align-items: flex-start;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
}

.feature-icon {
  font-size: 34px;
  margin-bottom: 6px;
  color: #0f172a; /* dark blue icon */
}

.feature-card h3 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;  /* dark blue title */
  font-weight: 700;
}
.feature-card:hover {
    border-color: #2563eb; /* blue glow */
}
.feature-card {
    border: 2px solid rgba(15, 23, 42, 0.15); /* subtle dark-blue tint */
}

.feature-card p {
  margin: 0;
  color: #0f172a;  /* dark blue paragraph (as requested) */
  line-height: 1.55;
  opacity: 0.86;   /* slightly softened */
}

/* keep tricolor classes if you still want colored accents, but default is white */
.bg-1, .bg-2, .bg-3 { /* if previously used, preserve but set background: white */
  background: #ffffff !important;
  color: #0f172a !important;
}

/* responsive */
@media (max-width: 768px) {
  .feature-card { flex: 1 1 100%; max-width: 100%; text-align:center; align-items:center; }
  .feature-card p { font-size: 14px; }
}