.raffle-three-step .step {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.raffle-three-step .step.active {
    display: block;
}

.raffle-three-step .step:not(.active) {
    display: none;
}

.raffle-three-step .step h3 {
    margin-bottom: 10px;
}

/* Step content flex container */
.step-content {
    display: flex;
}

/* Image container styles */
.question-image-container {
    flex: 1; /* Takes 50% width */
    margin-right: 20px; /* Space between image and text */
}

.question-image {
    width: 100%; /* Responsive image */
    max-width: 300px; /* Max width for image */
}

@media screen and (max-width: 768px) {
    .step-content {
    flex-direction: column; / Stack elements vertically /
    align-items: center;    / Center align if needed */
    }
    
    .question-image-container {
        margin-right: 0;    /* Remove the right margin */
        margin-bottom: 20px; /* Add some space below the image */
    }
}

/* Container for question and answers */
.question-and-answers {
    flex: 1; /* Takes 50% width */
}

/* Updated input styling */
.raffle-three-step .step input[type="number"] {
    width: 80px;
    padding: 5px;
    margin-right: 10px;
}

/* Button styles */
.raffle-three-step .step button {
    padding: 8px 15px;
    background-color: #007cba;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Rounded edges */
    margin-top: 10px;
}

.raffle-three-step .step button:hover {
    background-color: rgba(34, 45, 68, 0.1);
}

/* Answer option styles */
.skills-answer-options {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 15px; /* Space between options */
}

.skills-answer-option {
    border: 2px solid #222d44; /* Border color */
    border-radius: 0px; /* Rounded corners */
    padding: 20px; /* Padding */
    background-color: transparent; /* Transparent background */
    text-align: center; /* Center text */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s, color 0.3s; /* Transition for hover */
}

/* Styles when hovering */
.skills-answer-option:hover {
    background-color: rgba(34, 45, 68, 0.1); /* Light background on hover */
}

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

/* Styles for the label */
.skills-answer-option label {
    display: block;
    padding: 0; /* Remove padding from label */
}

/* Styles for active/selected state */
.skills-answer-option input[type="radio"]:checked + label {
    color: #ffffff; /* Change text color when selected */
}

/* Common button styles for answer submission and checkout */
.submit-answer-button,
.proceed-to-checkout-button {
    padding: 10px 20px;
    background-color: #222d44; /* Button background color */
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Rounded edges */
    margin-top: 10px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
}

.submit-answer-button:hover,
.proceed-to-checkout-button:hover {
    background-color: #1a2133; /* Darker background on hover */
}

/* Feedback styles */
.skills-answer-feedback {
    margin-top: 10px;
}

.skills-answer-feedback.error {
    color: red;
}

.skills-answer-feedback.success {
    color: green;
}

/* Make sure the quantity buttons have consistent styling */
.quantity-option-button {
    display: flex;
    flex-direction: column; /* Align text and discount vertically */
    justify-content: center; /* Center the content */
    align-items: center; /* Center the content */
}

/* Style for the quantity option buttons */
.quantity-options {
    display: grid; /* Use grid layout for better alignment */
    grid-template-columns: repeat(3, 1fr); /* Set 3 columns */
    gap: 10px; /* Gap between buttons */
}

.raffle-three-step .quantity-options .quantity-option-button {
    border: 2px solid #222d44;
    border-radius: 0; /* Ensure no rounded edges */
    color: #222d44;
    background-color: transparent;
    padding: 15px 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    text-align: center;
}

/* Active state for selected quantity option */
.quantity-option-button.active {
    background-color: #222d44;
    color: #ffffff;
}

/* Additional styling for steps */
.raffle-three-step .step {
    margin-bottom: 20px;
}

.raffle-three-step .skills-answer-option {
    margin-bottom: 10px;
}

/* Styling for the discount banner */
.discount-banner {
/*#F0E68C; */
    background-color: #f7e7ce;
    color: #222d44;
    padding: 5px;
    margin-top: 5px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

/* Targeting span inside label for the selected state */
.skills-answer-option input[type="radio"]:checked + label span {
    color: #ffffff !important; /* Make text color white when selected */
}


.skills-question {
font-size:24px;
}

.proceed-to-checkout-button {
border:2px solid #222d44 !important;
border-radius:0px !important;
background-color:#f7e7ce !important;
color:#222d44 !important;
-webkit-border-radius: 0px !important;
}

.skills-answer-form {
text-align:center;
}

.proceed-to-checkout-button:hover {

}