.course-grid__list-item li + li{
        margin-top: 0px !important;
    }
    .course-grid{
        padding: 0px 0 0px;
    }
    .course-grid__left{
        margin-right: 5px !important;
    }
    @media (min-width: 1200px) {
      .col-xl-3 {
        flex: 0 0 auto;
        width: 21%;
      }
    }
    .course-grid__list-text{
        color: #494949 !important;
    }
    .center_area{
        padding: 0px 40px 20px;
        overflow-y: auto;
        height: calc(100vh - 100px);
    }
    
    .topic-h5{
        margin: -4px 0 4px 0;
    }
    .course-li-grid{
        padding: 4px 15px 3px 5px; line-height: 1.5;
    }
    .course-gridm{
        margin-bottom: 0px !important; 
    }

    #quiz-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #quiz-container_answers {
        margin-top: 20px;
    }
    
    .question-box {
        display: none;
        padding: 20px;
        width: 100%;
    }
    
    .question-box.active {
        display: block;
    }
    
    .question-box_answers {
        margin-bottom: 25px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
    }
    
    
    .options-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    
    @media (max-width: 768px) {
        .options-grid {
            grid-template-columns: 1fr; /* only 1 per row */
        }
        h2{
            font-size: 1.2rem !important;
        }
        .center_area{
            padding: 0px 0px 20px;
        }
    }

    .start-screen{
        text-align:center; margin:20px;
    }
    
    
    .options-list{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .option {
        padding: 20px;
        border: 2px solid #ccc;
        border-radius: 12px;
        text-align: center;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100px; /* equal height */
    }
    
    .option_answers {
        padding: 15px;
        border: 2px solid #ccc;
        border-radius: 12px;
        text-align: center;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px; /* equal height */
        color: #383838;
    }
    
    .option_answers.correct {
        background: #28a745;
        color: #fff;
        border-color: #1e7e34;
    }
    
    /* Equal height for all options */
    .options-grid {
        align-items: stretch;
    }
    
    /*.option.correct {
        background-color: #d4edda !important;
        border-color: #28a745 !important;
        color: #155724 !important;
    }
    
    .option.incorrect {
        background-color: #f8d7da !important;
        border-color: #dc3545 !important;
        color: #721c24 !important;
    }*/
    
    .option.disabled {
        pointer-events: none;
        opacity: 1;
    }

    
    code[class*="language-"]{
        font-family: var(--fistudy-font) !important;
    }
    
    pre{
        background: #d4edda !important;
        padding: 1em !important;
    }
    h4{
        padding-bottom: 10px !important;
        font-size: 1.2rem !important;
        padding-top: 10px !important;
    }
    p{
        font-size: 16px !important;
    }
    .question-box p{
        font-size: 20px !important;
        color: #383838;
    }
    .question-box_answers p{
        font-size: 20px !important;
        color: #383838;
    }
    h1{
        font-size: 1.75rem !important;
    }
    h2{
        font-size: 1.5rem !important;
        padding-bottom: 10px !important;
    }
    h3{
        font-size: 1.2rem !important;
        padding-bottom: 10px !important;
        padding-top: 10px !important;
        
    }
    
    /* Code block container */
    pre {
      color: #dcdcdc;      /* Light text color */
      border-radius: 10px;
      overflow-x: auto;    /* Scroll if code is wide */
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      font-size: 15px;
      margin: 20px 0;
    }
    
    /* Code text styling */
    code {
      font-family: "Fira Code", "Consolas", "Monaco", monospace;
      font-weight: 400;
      white-space: pre-wrap; /* Wraps long lines */
      word-break: break-word;
    }
    
    /* Optional line numbers */
    pre.line-numbers {
      position: relative;
      padding-left: 3.5em;
    }
    
    /* Highlighted line effect (optional) */
    .highlight-line {
      background: rgba(255,255,255,0.05);
      display: block;
      margin: 0 -16px;
      padding: 0 16px;
    }
    .difficulty_color{
        color: var(--fistudy-black) !important;
    }
    
    #countdown {
      animation: zoomIn 1s ease-in-out infinite;
    }
    
    @keyframes zoomIn {
      0% { transform: scale(0.5); opacity: 0.5; }
      50% { transform: scale(1.2); opacity: 1; }
      100% { transform: scale(1); opacity: 0.8; }
    }