@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@100..900&display=swap');

 .quiz-container {
     background-color: #ffffff;
     border-radius: 12px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     padding: 25px;
     max-width: 1000px;
     width: 100%;
     margin: 1rem auto;
     line-height: 1.5;
     text-align: justify;
     font-family: 'Noto Serif Devanagari', serif;

 }

 .quiz-container h1 {
     text-align: center;
     color: #00695c;
     font-size: 28px;
     margin-bottom: 20px;
 }

 .passage {
     background-color: #f5f5f5;
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 20px;
     font-size: 16px;
     line-height: 1.5;
 }

 .question {
     font-size: 18px;
     font-weight: bold;
     color: #004d40;
     margin-bottom: 15px;
 }

 .timer {
     margin-bottom: 15px;
     text-align: center;
     font-size: 16px;
     color: #d32f2f;
 }

 .timer-bar {
     width: 100%;
     height: 10px;
     background-color: #e0e0e0;
     border-radius: 5px;
     overflow: hidden;
 }

 .timer-progress {
     height: 100%;
     background-color: #4caf50;
     width: 100%;
     transition: width 1s linear;
 }

 .options {
     display: flex;
     flex-direction: column;
 }

 .option {
     background-color: #b2dfdb;
     border: none;
     border-radius: 6px;
     padding: 12px;
     margin: 6px 0;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s;
 }

 .option:hover {
     background-color: #80cbc4;
 }

 .option:disabled {
     cursor: not-allowed;
     opacity: 0.6;
 }

 .correct {
     background-color: #4caf50 !important;
     color: white;
 }

 .incorrect {
     background-color: #f44336 !important;
     color: white;
 }

 .explanation {
     margin-top: 15px;
     padding: 12px;
     background-color: #fff9c4;
     border-radius: 6px;
     display: none;
     font-size: 15px;
 }

 .navigation {
     display: flex;
     justify-content: space-between;
     margin-top: 25px;
 }

 .nav-btn {
     background-color: #009688;
     color: white;
     border: none;
     padding: 12px 24px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s;
 }

 .nav-btn:hover {
     background-color: #00796b;
 }

 .nav-btn:disabled {
     background-color: #cccccc;
     cursor: not-allowed;
 }

 .score {
     text-align: center;
     font-size: 22px;
     margin-top: 25px;
     color: #00695c;
 }

 @media (max-width: 480px) {
     .quiz-container {
         padding: 15px;
     }

     .quiz-container h1 {
         font-size: 24px;
     }

     .passage {
         font-size: 18px;
     }

     .question {
         font-size: 18px;
     }

     .timer {
         font-size: 14px;
     }

     .option {
         font-size: 16px;
         padding: 10px;
     }

     .nav-btn {
         padding: 10px 20px;
         font-size: 14px;
     }
 }

 @media (min-width: 481px) and (max-width: 768px) {
     .quiz-container {
         padding: 20px;
         max-width: 600px;
     }

     .quiz-container h1 {
         font-size: 26px;
     }

     .passage {
         font-size: 20px;
     }

     .question {
         font-size: 17px;
     }

     .timer {
         font-size: 15px;
     }

     .option {
         font-size: 15px;
     }
 }