.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .75rem;
    }
    .feature {
  margin-bottom: 3rem; /* adjust: 2rem = medium, 3rem = more space */
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}
.btn-primary:hover {
  background-color: #0056b3; /* Darker shade of blue */
  box-shadow: 0 4px 8px rgba(0, 86, 179, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-outline-secondary:hover {
  background-color: #6c757d; /* A gray background on hover */
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.feature:hover {
  background-color: rgba(13, 110, 253, 0.1); /* Light primary color background */
  border-radius: 0.75rem;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}