.offer-buttons {
            margin-bottom: 20px;
            color:white;
            background-color: white;
            font-family: Arial, sans-serif;
        }

        .offer-button {
            background-color: #FFC72C;
            border: none;
            color: white;
            padding: 10px 20px;
            margin: 5px;
            margin-right: 80px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-left:25px;
        }

        .offer-button:first-child {
            background-color: #ff3b30; /* Pinkish red color */
        }

.offer-button.active {
    background-color: #DA291C; /* Change to desired color when active */
    transform: scale(1.2); /* Button grows bigger when clicked */
}
/* Circle Styles */
.circle-button-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.circle {
    width: 25px;
    height: 25px;
    border: 2px solid #000; /* Black border */
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer; /* Add this to show hand cursor */
}

.circle.checked {
    background-color: #FFC72C; /* Yellow background when checked */
}

.circle::after {
    content: '✔'; /* Checkmark symbol */
    color: white;
    font-size: 16px;
    display: none; /* Hide by default */
}

.circle.checked::after {
    display: block; /* Show when circle is checked */
}