.quiz-container {
     background: linear-gradient(180deg, #d2f0ff 0%, #edf7fd 100%);
     width: 100%;
     max-width: 450px;
     padding: 30px 24px;
     border-radius: 24px;
     box-shadow: 0 10px 25px rgba(173, 216, 230, 0.3);
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.6);
 }


 .question {
     font-size: 24px;
     font-weight: 700;
     color: #0f2537;
     margin-bottom: 20px;
 }


 .progress-container {
     width: 100%;
     background-color: rgba(0, 0, 0, 0.05);
     height: 8px;
     border-radius: 10px;
     margin-bottom: 30px;
     overflow: hidden;
 }


 .progress-bar-35 {
     width: 35%;
     height: 100%;
     background: linear-gradient(90deg, #00d2ff, #00a8ff);
     border-radius: 10px;
 }

 .progress-bar-50 {
     width: 50%;
     height: 100%;
     background: linear-gradient(90deg, #00d2ff, #00a8ff);
     border-radius: 10px;
 }


 .progress-bar-75 {
     width: 75%;
     height: 100%;
     background: linear-gradient(90deg, #00d2ff, #00a8ff);
     border-radius: 10px;
 }

 .progress-bar-100 {
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, #00d2ff, #00a8ff);
     border-radius: 10px;
 }


 .options-group {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }


 .quiz-btn {
     background: linear-gradient(180deg, #ffd41d 0%, #f9be06 100%);
     color: #4a2c00;
     font-size: 18px;
     font-weight: 600;
     padding: 16px 20px;
     border: none;
     border-radius: 16px;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
     box-shadow: 0 5px 15px rgba(249, 190, 6, 0.3);
     text-decoration: none;
 }


 .quiz-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(249, 190, 6, 0.45);
     text-decoration: none !important;
 }

 .quiz-btn:active {
     transform: translateY(1px);
 }