body {
    overflow-x: hidden;    
    background-image: url('bg2.svg');
    background-size: cover;
    background-position:center;
    overflow-y: scroll;
}

.question-box {
width: 680px;
height: 640px;
margin: auto; 
display: flex; 
justify-content: center; 
align-items: center;

}


.question-box .card-body {
    text-align: center; 
}
.question-box {
width: 600px; 
height: auto; 
}

.question-box .card-body > h2 {
    margin-bottom: 20px; 
}
.logo-container {
    position: absolute;
    top: 20px; /* pas dit aan voor de gewenste verticale afstand vanaf de bovenkant */
    left: 20px; /* pas dit aan voor de gewenste horizontale afstand vanaf de linkerkant */
    z-index: 2;

}

.logo {
    width: 100px; /* pas dit aan voor de gewenste breedte van je logo's */
    height: auto; /* dit zorgt ervoor dat de hoogte proportioneel verandert op basis van de breedte */
    margin-right: 10px; /* optioneel: voeg wat ruimte tussen de twee logo's toe */
}

.question-box .card-body > p {
    margin-bottom: 15px; 
    text-align: center; 
}

.question-box .card-body input[type="radio"] {
    margin-right: 5px; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #7d29c2;
    outline: none;
    cursor: pointer;
}

.question-box .card-body input[type="radio"]:checked {
    background-color: #7d29c2;
    border-color: #7d29c2;
}

.options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    
}
.punt,
.punt2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.button-group {
margin-bottom: 1rem;
margin-left: 20px;
}


.question-box .card-body h6 {
    text-align: left;
    width: 50px;
    height: 50px;
    margin: 0; 
}
.text-center {
text-align: center; 
}


.card .text-center {
margin-top: 20px; /* Voeg bovenmarge toe om de knoppen van de kaart te scheiden knoppen gingen beneden schuven*/
}
h1 {
font-weight: bold; 
color:white; 
text-align: center;
padding-top: 50px;
font-size: 80px;

}
.text-center {
display: flex; /* Maak de container een flex-container */
justify-content: space-between; /* Plaats de elementen gelijkmatig langs de hoofdas */
}

.card .text-center .btn-prev {
margin-right: auto; /* Plaats de "Vorige" knop helemaal naar links */
}

.card .text-center .btn-next {
margin-left: auto; /* Plaats de "Volgende" knop helemaal naar rechts */
}
.options {
display: flex;
justify-content: space-between; /* Adjust as needed */
}

.question {
display: flex;
}

.left-column,
.right-column {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
align-items: flex-start;


}

.button-group {
margin-bottom: 10px; /* Adjust spacing between options */
}


.button-group {
display: flex;
flex-direction: column; 
align-items: flex-start; 
margin-bottom: 10px; 
}

.button-group label {
margin-bottom: 5px; 
}

@media only screen and (max-width: 600px) {
    .finisher-header h1 {
        font-size: 45px;
        right: 80px;
    }
}

svg {
    height: auto;
    transform: scale(2.5);
    overflow: hidden;
}

.svg-container {
    overflow-x: hidden;
    width: auto;
}