:root {
    --primary-color: #0070C0;
    --secondary-color: #1c4482;
    --background-color: #eef1f7;
    /* Theme color */
    --theme: var(--primary);
    --brand-color-orange: #e64600;
    --brand-color-orange-2: #ff7300;
    --brand-color-purple: #4a2767;
    --brand-color-purple-2: #a154e0;
    --brand-color-blue: #0f77b7;
    --brand-color-blue-light: rgb(220, 242, 255);
    --brand-color-dark-blue: #214580;
    --brand-color-new-blue: #54CCED;
    --brand-color-new-blue2: #2ad1ff;
    --brand-color-turquoise: #44B4A6;
    --brand-color-dark-turquoise: #248075;
    --brand-color-gold: #A58B3F;
    --input-background: #e8f0fe;

}

.btn-primary {
    @apply px-6 py-3 rounded-lg text-white font-semibold;
    background-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #2563eb;
}

/* buttons */
.btn-form {
    max-width: 320px;
    display: flex;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    padding: 0.875rem 72px 0.875rem 1.75rem;
    background-color: var(--brand-color-purple);
    background-image: linear-gradient(to top right, var(--brand-color-purple), var(--brand-color-purple-2));
    color: #ffffff;
    font-size: 15px;
    white-space: nowrap;
    line-height: 1.25rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    align-items: center;
    border-radius: 5rem;
    gap: 0.75rem;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: none;
    transition: all 0.6s ease;

    span {
        background-color: var(--brand-color-purple);
        display: grid;
        position: absolute;
        right: 0;
        place-items: center;
        width: 3rem;
        height: 100%;
        border-radius: 50%;
    }

    &:hover {
        color: #fff;
        background-image: linear-gradient(to top right, var(--brand-color-orange-light), var(--brand-color-orange-light));

        span {
            background-color: var(--brand-color-orange);
        }
    }
}

.btn-form-sm {
    padding: 0.5em 1em;
    max-width: fit-content;
    padding-right: 60px;
    font-size: 0.9em;
    min-height: 30px;
    transition: all 0.6s ease;
    cursor: pointer;

    span {
        aspect-ratio: 1/1;
    }
}

.secondary-btn {
    background-image: none;
    background: rgba(var(--brand-color-blue), 0.1) !important;
    color: var(--brand-color-blue);

    span {
        background: rgba(var(--brand-color-blue), 0.5) !important;
        color: #fff;
    }

    &:hover {
        background: rgba(var(--brand-color-blue), 0.6) !important;
        color: #fff;

        span {
            background: var(--brand-color-blue);
        }
    }
}

.cta-btn {
    background-color: var(--brand-color-orange);
    background-image: linear-gradient(to top right, var(--brand-color-orange), #ff6e30);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(var(--brand-color-orange), 0.247),
        0 2px 4px -1px rgba(var(--brand-color-orange-light), 0.349);

    span {
        background: var(--brand-color-orange);
        color: #fff;
    }

    &:hover {
        background: rgba(var(--brand-color-orange), 0.5) !important;
        color: #fff !important;

        span {
            background: var(--brand-color-orange);
            color: #fff !important;
        }
    }
}