.quiz-card {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  max-width: 800px;
  margin: auto;
}
.quiz-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.quiz-header h1 {
  font-size: 24px;
  font-weight: bold;
  color: #6f42c1;
}
.quiz-intro {
  font-size: 15px;
  color: #555;
}
.quiz-title {
  font-weight: bold;
  font-size: 1.3rem;
  color: #6f42c1;
}
.option {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
  cursor: pointer;
  transition: all 0.2s;
}
.option:hover {
      background-color: #845bcf !important;
      color: #ffffff !important;
    }
.option.correct {
  background-color: #d1e7dd;
  border-color: #0f5132;
}
.option.incorrect {
  background-color: #f8d7da;
  border-color: #842029;
}
.feedback {
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 500;
}
.feedback.correct {
  background-color: #d1e7dd;
  color: #0f5132;
}
.feedback.incorrect {
  background-color: #f8d7da;
  color: #842029;
}
.btn-next, .btn-back{
  margin-top: 20px;
  background-color: #6f42c1;
  color: white;
}
#btn-danger{
  margin-top: 20px;
  background-color: #6f42c1;
  color: white;
}
.btn-back {
  background-color: #adb5bd;
  margin-right: 10px;
}


.option.selected {
  background-color: #e0f7fa;
  font-weight: bold;
  border: 1px solid #00acc1;
}

.accordion-item {
  border-radius: 8px;
}