@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.btn{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 768px){
.btn{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-primary{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 10px;
padding-bottom: 10px;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
height: 45px;
}
@media (min-width: 768px){
.btn-primary{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-primary{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-primary{
z-index: 10;
overflow: hidden;
border-style: none;
--tw-border-opacity: 1;
border-color: rgb(0 150 224 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(0 150 224/ var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-primary::after{
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
height: 100%;
width: 0px;
background-color: rgb(255 255 255 / 0.2);
content: var(--tw-content);
transition-duration: 500ms;
}
.btn-primary:hover::after{
content: var(--tw-content);
width: 100%;
}
.btn-white{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 768px){
.btn-white{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-white{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-white{
z-index: 10;
overflow: hidden;
border-style: none;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-white::after{
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
height: 100%;
width: 0px;
background-color: rgb(255 255 255 / 0.2);
content: var(--tw-content);
transition-duration: 500ms;
}
.btn-white:hover::after{
content: var(--tw-content);
width: 100%;
}
.btn-outline-white{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: 30px;
    border-width: 1px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
}
@media (min-width: 768px){
.btn-outline-white{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-outline-white{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-outline-white{
z-index: 10;
overflow: hidden;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-outline-white::after{
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
height: 100%;
width: 0px;
background-color: rgb(255 255 255 / 0.2);
content: var(--tw-content);
transition-duration: 500ms;
}
.btn-outline-white:hover::after{
content: var(--tw-content);
width: 100%;
}
.btn-outline-white .inner-icon-container{
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 0.5rem;
--tw-text-opacity: 1;
color: rgb(86 58 255 / var(--tw-text-opacity));
transition-duration: 300ms;
}
.btn-outline-white .inner-icon-container:hover{
--tw-bg-opacity: 1;
background-color: rgb(86 58 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-yellow{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 768px){
.btn-yellow{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-yellow{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-yellow{
z-index: 10;
overflow: hidden;
border-style: none;
--tw-border-opacity: 1;
border-color: rgb(255 217 139 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 217 139 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(33 31 84 / var(--tw-text-opacity));
}
.btn-yellow::after{
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
height: 100%;
width: 0px;
background-color: rgb(255 255 255 / 0.2);
content: var(--tw-content);
transition-duration: 500ms;
}
.btn-yellow:hover::after{
content: var(--tw-content);
width: 100%;
}
.btn-outline{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
height: 45px;
}
@media (min-width: 768px){
.btn-outline{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-outline{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-outline{
--tw-border-opacity: 1;
border-color: rgb(86 58 255 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(86 58 255 / var(--tw-text-opacity));
transition-duration: 300ms;
}
.btn-outline:hover{
--tw-border-opacity: 1;
border-color: rgb(86 58 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(86 58 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-outline-small{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 768px){
.btn-outline-small{
    padding-left: 1rem;
    padding-right: 1rem;
}
}
.btn-outline-small{
--tw-border-opacity: 1;
border-color: rgb(86 58 255 / var(--tw-border-opacity));
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(86 58 255 / var(--tw-text-opacity));
transition-duration: 300ms;
}
.btn-outline-small:hover{
--tw-border-opacity: 1;
border-color: rgb(86 58 255 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(86 58 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-white{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 30px;
border-width: 1px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
}
@media (min-width: 768px){
.btn-white{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
}
@media (min-width: 992px){
.btn-white{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
}
.btn-white{
overflow: hidden;
border-style: none;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(86 58 255 / var(--tw-text-opacity));
transition-duration: 500ms;
}
.btn-white::after{
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 0px;
background-color: rgb(86 58 255 / 0.2);
content: var(--tw-content);
transition-duration: 500ms;
}
.btn-white:hover::after{
content: var(--tw-content);
width: 100%;
}