.transparent-button{height:fit-content;position:relative;transition:.3s all ease-in-out}.transparent-button .btn-inner{--bg-color: #171717;--bg-color-hover: var(--primary-1000);--border-width: 1.5px;--border-color: var(--white-1000);--text-color: var(--primary-1000);--text-color-hover: var(--black-1000);--blur: 4px;--curve-top-left-1: 1.375rem;--curve-top-left-2: 1.75rem;--curve-bottom-right-1: .75rem;--curve-bottom-right-2: 1rem;width:100%;min-width:fit-content;border:0;display:inline-grid;place-content:center;padding:.45rem 1.45rem;cursor:pointer;position:relative;transition:.3s all ease-in-out;clip-path:polygon(0% var(--curve-top-left-1),var(--curve-top-left-2) 0,100% 0,100% calc(100% - var(--curve-bottom-right-1)),calc(100% - var(--curve-bottom-right-2)) 100%,0 100%)}.transparent-button .btn-inner:after,.transparent-button .btn-inner:before{content:"";width:100%;height:100%;position:absolute;inset:0}.transparent-button .btn-inner:before{background-color:var(--border-color);z-index:-2}.transparent-button .btn-inner:after{background-color:var(--bg-color);z-index:-1;transition:.3s all ease-in-out;clip-path:polygon(var(--border-width) calc(var(--curve-top-left-1) + var(--border-width) * .5),calc(var(--curve-top-left-2) + var(--border-width) * .5) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - calc(var(--curve-bottom-right-1) + var(--border-width) * .5)),calc(100% - calc(var(--curve-bottom-right-2) + var(--border-width) * .5)) calc(100% - var(--border-width)),var(--border-width) calc(100% - var(--border-width)))}.transparent-button .text{color:var(--text-color);font-size:1rem;font-weight:500;line-height:1.313;letter-spacing:.75px;text-transform:capitalize;transition:.3s all ease-in-out}.transparent-button .corner-shape{width:.688rem;height:.5rem;background-color:var(--primary-1000);display:inline-block;position:absolute;right:0;bottom:0;transition:.3s all ease-in-out;clip-path:polygon(100% 100%,100% 0%,0% 100%)}.transparent-button:hover .btn-inner:before{background-color:var(--bg-color-hover)}.transparent-button:hover .btn-inner:after{background-color:var(--bg-color-hover)}.transparent-button:hover .text{color:var(--text-color-hover)}@media screen and (max-width:991.98px){.transparent-button .btn-inner{--curve-top-left-1: .938rem;--curve-top-left-2: 1.125rem;--curve-bottom-right-1: .625rem;--curve-bottom-right-2: .75rem;min-width:5.375rem;padding:.5rem 1.25rem}.transparent-button .text{font-size:.75rem}.transparent-button .corner-shape{width:.531rem;height:.438rem}}
