@tailwind base;
@tailwind components;
@tailwind utilities;

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    background: linear-gradient(165deg, #C2CDFF 23.08%, #FDDBFC 74.25%);    
    background-attachment: fixed;
}

button {
    background: linear-gradient(175deg, #8DA1FD 30.41%, #FFB7FD 81.97%);
}

.bg-base {
    background-image: linear-gradient(136.03deg, #8DA1FD 30.41%, #FFB7FD 81.97%);
}

/* Hide the radio button */
.form-check-input {
    display: none;
}

/* Button styles */
.button-base {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(175deg, #8DA1FD 30.41%, #FFB7FD 81.97%);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
}

/* Change button color on hover */
.button-base:hover {
    background: #C2CDFF;
;
}

/* Style for checked state */
.form-check-input:checked + .button-base {
    background: #C2CDFF;
}

/* Hide default checkbox */
.checkk {
    display: none;
}

/* Style for the custom checkbox */
.checkk + label {
    display: inline-block;
    width: 24px; /* Adjust width according to your image size */
    height: 24px; /* Adjust height according to your image size */
    background-image: url('../images/icon-check.png'); /* URL to your check image */
    background-size: cover;
    cursor: pointer;
}

/* Style for checked state */
.checkk:checked + label {
    background-image: url('../images/icon-check-checked.png'); /* URL to your checked image */
}

@media (max-width: 767px) {
    .button-base {
        padding: 8px 20px;
    }
}