/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

.btn {

    display: inline-block;

    height: 52px;

    border-width: 1px;

    padding-left: 2rem;

    padding-right: 2rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 500;

    line-height: 36px;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 200ms
}

.btn-primary {

    cursor: pointer;

    border-radius: 50px;

    border-width: 0px;

    background-image: linear-gradient(to top left, var(--tw-gradient-stops));

    text-align: center;

    font-weight: 500;

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.btn-primary:hover {

    --tw-shadow: 0px 5px 30px rgba(252,167,111,0.5);

    --tw-shadow-colored: 0px 5px 30px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.btn-outline-primary {

    position: relative;

    border-radius: 50px;

    --tw-border-opacity: 1;

    border-color: rgb(254 96 25 / var(--tw-border-opacity, 1));

    background-color: transparent;

    padding-top: 7px;

    padding-bottom: 7px;

    text-align: center;

    text-transform: capitalize;

    --tw-text-opacity: 1;

    color: rgb(34 34 34 / var(--tw-text-opacity, 1))
}

.btn-outline-primary:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(254 96 25 / var(--tw-bg-opacity, 1));

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1));

    --tw-shadow: 0px 5px 30px rgba(252,167,111,0.5);

    --tw-shadow-colored: 0px 5px 30px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.btn-outline-primary:hover::before {

    content: var(--tw-content);

    opacity: 1
}
.btn-outline-primary::before {

    position: absolute;

    left: 0px;

    top: 0px;

    bottom: 0px;

    right: 0px;

    z-index: -1;

    border-radius: inherit;

    background-image: linear-gradient(to top left, var(--tw-gradient-stops));

    opacity: 0;

    transition-property: inherit;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    --tw-content: "";

    content: var(--tw-content)
}

.btn-outline-white {

    border-radius: 50px;

    background-color: transparent;

    text-align: center;

    text-transform: capitalize;

    --tw-text-opacity: 1;

    color: rgb(34 34 34 / var(--tw-text-opacity, 1))
}

.btn-white {

    min-width: 150px;

    border-radius: 50px;

    --tw-border-opacity: 1;

    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    text-align: center;

    text-transform: capitalize;

    --tw-text-opacity: 1;

    color: rgb(34 34 34 / var(--tw-text-opacity, 1));

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.btn-white:hover {

    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.btn-sm {

    height: 42px;

    line-height: 24px
}