/* .btn {
    position: relative;
    display: block;
    width: auto; 
    height: auto;
    border: var(--base-border) !important;
    color: var(--money-tree) !important;
    background-color: transparent ;
    font-size: 18px;
    padding: 10px 15px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    cursor: pointer;
}

.btn:hover, 
.btn:focus {
    outline: 0!important;
    outline-offset: 0;
}
.btn::before,
.btn::after {
    position: absolute;
    content: "";
}
.btn::before {
    background-color: var(--white);
    transition: 0.3s ease-out;
}
.btn:hover {
    color: var(--white) !important;
    transition: 0.2s 0.1s;
    background-color: var(--money-tree);
  }

.btn.hover-filled-opacity::before {
    top:0; bottom: 0; right: 0;
    height: 100%; width: 100%;
    opacity: 1;
  }
.btn.hover-filled-opacity:hover::before {
opacity: 0;
} */
input[type="submit"].btn, 
.btn{
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: var(--money-tree) !important;
    background-color: transparent ;
    font-size: 18px;
    padding: 10px 15px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    border: 1px solid !important;
    overflow: hidden;
    z-index: 1;
}
@media screen and (max-width: 991px) {
    .btn{
        font-size: 10px;
        padding: 8px 10px !important;
    }
}

.btn::before, 
.btn::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.25s ease;
    z-index: -1;
}
.btn::before{
    transition-duration: 0.5s;
    box-shadow: inset 0 0 0 1px var(--money-tree);
}

.btn:hover {
    color: white !important;
}
.btn:hover::before {
        box-shadow: inset 0 0 0 100px var(--money-tree);        
}


input[type="submit"].btn:hover {
    background-color: var(--money-tree);
    color: white !important;
}