@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background: #f4f7f9 !important;
}

header.bg-dark {
  background: linear-gradient(45deg, #0d6efd, #6610f2) !important;
}

footer {
  background: linear-gradient(45deg, #6610f2, #0d6efd) !important;
}

.card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.hidden {
  display: none;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #121212 !important;
    color: #f4f7f9 !important;
  }

  header.bg-dark {
    background: linear-gradient(45deg, #212529, #343a40) !important;
  }

  footer {
    background: linear-gradient(45deg, #343a40, #212529) !important;
  }

  .card {
    background-color: #1e1e1e;
    color: #f4f7f9;
  }
}