/* =========================================================
   NATIONAL FINANCIAL LITERACY QUIZ
========================================================= */

.finance-quiz{
  overflow:hidden;

  padding:72px 0;

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #eef5ff 50%,
      #f8fbff 100%
    );
}

/* =========================================================
   CARD
========================================================= */

.quiz-card{
  position:relative;

  max-width:820px;

  margin:0 auto;

  text-align:center;

  overflow:hidden;

  padding:42px 38px;

  background:var(--white);

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

  border-radius:26px;

  box-shadow:
    0 10px 30px rgba(15,23,42,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.quiz-card:hover{

  transform:translateY(-2px);

  box-shadow:
    0 18px 42px rgba(15,23,42,.08);
}

/* =========================================================
   MEDAL
========================================================= */

.quiz-medal{
  width:76px;
  height:76px;

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

  margin:0 auto 20px;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b82f6 100%
    );

  box-shadow:
    0 16px 34px rgba(37,99,235,.20);

  color:#ffffff;

  font-size:30px;
}

/* =========================================================
   BADGE
========================================================= */

.quiz-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-bottom:18px;

  padding:7px 14px;

  border-radius:999px;

  background:#dbeafe;

  color:#1d4ed8;

  font-size:12px;
  font-weight:700;

  letter-spacing:.2px;
}

/* =========================================================
   TITLE
========================================================= */

.quiz-title{
  margin-bottom:14px;

  color:var(--text);

  font-size:34px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:-.8px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.quiz-desc{
  max-width:620px;

  margin:0 auto 24px;

  color:var(--muted);

  font-size:14px;
  line-height:1.7;
}

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

.quiz-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:10px;

  margin-bottom:30px;
}

.quiz-features span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:9px 14px;

  border-radius:999px;

  background:#f8fafc;

  border:1px solid #e2e8f0;

  color:#475569;

  font-size:13px;
  font-weight:600;
}

/* =========================================================
   ACTIONS
========================================================= */

.quiz-actions{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  flex-wrap:wrap;
}

/* =========================================================
   BUTTONS
========================================================= */

.quiz-btn{
  min-width:170px;

  height:48px;

  padding:0 18px;

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

  border-radius:14px;

  font-size:14px;
  font-weight:600;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .finance-quiz{
    padding:60px 0;
  }

  .quiz-card{
    padding:34px 22px;
  }

  .quiz-title{
    font-size:28px;
  }

  .quiz-desc{
    font-size:14px;
  }

  .quiz-actions{
    flex-direction:column;
  }

  .quiz-btn{
    width:100%;
  }

}

@media(max-width:480px){

  .quiz-card{
    padding:28px 18px;
  }

  .quiz-title{
    font-size:24px;
  }

  .quiz-medal{
    width:68px;
    height:68px;

    font-size:26px;
  }

  .quiz-features{
    gap:8px;
  }

  .quiz-features span{
    font-size:12px;

    padding:8px 12px;
  }

}