.answer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    grid-template-rows: repeat(3, 1fr);    /* 3 rows */
    gap: 0; /* No gaps between the grid items */
    width: 100%; /* Make the grid take up full width */
    max-width: 600px; /* You can adjust the max width as necessary */
    border: 4px solid black;
}

.answer-item {
    width: 100%; /* Makes sure the label fills the grid cell */
    height: 100px; /* Fixed height for uniformity */
    overflow: hidden; /* Hide overflow if the image is larger */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid black; /* Default border */
    transition: border-color 0.3s; /* Smooth transition */
}

.answer-item input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.answer-item img {
    width: 100%; /* Fill the label */
    height: auto; /* Maintain aspect ratio */
    max-height: 100%; /* Limit height to fit the label */
}

.question-image{
    width: 100%;
    height: auto;
    max-height: 100%;
}

h5{
    font-weight: 400;
    margin: 0px;
}

.above-txt{
    margin-bottom: 40px;
}

.button-wrap{
    margin-top: 40px;
}

.row{
    padding-left: 40px;
    padding-right: 40px;
}

.txt{
    padding: 5px 15px;
    margin: 0px;
}

.register_wrap{
    max-width: 400px;
    text-align: center;

}

.register {
    position: absolute; /* Makes it absolutely positioned */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element */
}

.form-label {
    text-align: left; /* Aligns the text to the left */
    display: block;   /* Makes the label a block element, taking full width */
}

.margin-bottom{
    margin-bottom: 60px;
}

@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .button-wrap {
        margin-bottom: 80px; /* Add 80px margin below the button */
    }
}