/* Default styling for options */
.option {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Highlight for correct and incorrect options */
.option.correct {
    background-color: green;
    color: white;
}

.option.incorrect {
    background-color: red;
    color: white;
}

/* Styling for result messages */
.result-message {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}


.prev-next-footer {
    display: none !important; /* Hide the navigation links */
}







/* Style for the navigation buttons */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

/* Style for the page indicator */
.page-indicator {
    font-weight: bold;
    font-size: 16px;
    color: #888; /* Grey text color */
    margin: 0 15px; /* Add space between buttons and indicator */
    text-align: center;
    flex: 1; /* Make it take up space between the buttons */
}


.nav-buttons a.button {
    padding: 10px 15px;
    text-decoration: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.nav-buttons a.button:hover {
    background-color: #0056b3;
}

/* For the first question: center "Next Question" button */
.nav-buttons.single-next {
    justify-content: flex-end; /* Push button to the right */
}






body.is-question-page .bd-header-article {
    display: none !important;
}

/* Style <h1> for question pages */
body.is-question-page h1 {
    font-weight: bold; /* Make the title bold */
    font-family: inherit; /* Retain the original font */
    font-size: 1em;
}

/* Add a bullet before <h1> for question pages */
body.is-question-page h1::before {
    content: "• "; /* The bullet character */
    margin-right: 5px; /* Space between the bullet and the text */
    font-weight: bold; /* Ensure the bullet is bold */
}




.question-card {
    background-color: #f9f9f9; /* Light gray background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Space inside the card */
    margin: 20px auto; /* Center the card */
    width: 600px; /* Fixed width */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Ensure the card is responsive for smaller screens */
@media screen and (max-width: 600px) {
    .question-card {
        width: 90%; /* Adjust width for smaller screens */
    }
}



.test-name {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0px; 
    color: #007bff; /* Make it visually distinct */
}


.lang-switcher a {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: #007bff;
}

.lang-switcher a.active {
    background-color: #007bff;
    color: white;
    text-decoration: underline;
}

.lang-switcher a:hover {
    background-color: #0056b3;
    color: white;
}

.question-image {
    display: block;
    margin-bottom: 20px; /* Adjust as needed */
    text-align: center;
}