/* ==========================================================
   FEATURES
========================================================== */

.features {
  background: var(--color-surface);
}

.features__grid {
  margin-top: var(--space-2xl);
}

.feature-card {
  padding: 2rem;

  border-radius: var(--radius-md);

  background: white;

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

.feature-card__icon {
  width: 70px;
  height: 70px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 1.5rem;

  border-radius: 50%;

  background: rgba(31, 77, 77, 0.08);

  color: var(--color-primary);

  font-size: 1.8rem;
}

.feature-card h3 {
  margin-bottom: 1rem;

  color: var(--color-primary);
}

.feature-card p {
  margin-bottom: 0;
}

.feature-card:nth-child(1) .feature-card__icon {
  background: #e9f5f2;
}

.feature-card:nth-child(2) .feature-card__icon {
  background: #eef4fb;
}

.feature-card:nth-child(3) .feature-card__icon {
  background: #fdf3e8;
}

.feature-card:nth-child(4) .feature-card__icon {
  background: #f4eefc;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 992px) {
  .features__grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    text-align: center;
  }

  .feature-card__icon {
    margin-inline: auto;
  }
}