.btn-group { display: flex; flex-wrap: wrap; gap: 5px 17px; position: relative; align-items: center; }

.btn, .gform_wrapper .gform_submit, input[type=submit] { 
    --fs: 15px; 
    --lh: 1; 
    --p: 0 14px; 
    --br: 3px; 
    --gap: 10px;

    --clr: #fff; --bg-clr: var(--clr-dark); --border: none; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: var(--hover-box-shadow); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    text-transform: uppercase; font-weight: 600; display: inline-flex; justify-content: center; align-items: center; min-height: 40px; gap: var(--gap); font-size: var(--fs); line-height: var(--lh); padding: var(--p); color: var(--clr); background: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; 

    transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function);

    position: relative; font-family: var(--font-primary); webkit-transition-property: padding, color, background, border-color, -webkit-box-shadow; transition-property: padding, color, background, border-color, box-shadow, -webkit-box-shadow;

    &.btn--link-dark { --bg-clr: transparent; --clr: var(--clr-dark); --p: 0; }
}

.btn.btn--primary { --bg-clr: transparent; z-index: 1; }
.btn.btn--primary::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: var(--br); background: var(--gradient-2-scaled); background-size: 200% 100%; background-position: 0%; transition-property: background-position; transition-duration: 600ms; transition-timing-function: var(--global-ts-function); }  
.btn.btn--primary:hover::after { background-position: 100%; }

.btn span:not(.material-symbols-sharp, .material-symbols-rounded) { font: inherit; color: inherit; z-index: 1; }
.btn i { --clr: inherit; z-index: 1; }
.btn:hover, .gform_wrapper .gform_submit:hover { color: var(--hover-clr)!important; background: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important; }
.btn:hover i { --clr: var(--hover-clr); }
.btn:focus, .gform_wrapper .gform_submit:focus { color: var(--focus-clr)!important; background: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; }
.btn:focus i { --clr: var(--focus-clr); }
.btn:active, .gform_wrapper .gform_submit:active { color: var(--active-clr)!important; background: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; }
.btn:active i { --clr: var(--active-clr); }
.btn:after { display: none; }
.btn.is-disabled { pointer-events: none; opacity: .5; }

.btn.btn--arrow:hover .wpb-icon.wpb-icon--top-right { transform: rotate(45deg); } 

.btn.btn--white { --bg-clr: #fff; --clr: var(--clr-dark); }
.btn.btn--outline { --bg-clr: transparent; --clr: #fff; --box-shadow: inset 0 0 0 1px #fff; --focus-box-shadow: inset 0 0 0 1px #fff; }
.btn.btn--outline-light { --bg-clr: transparent; --clr: var(--clr-text); --box-shadow: inset 0 0 0 1px var(--clr-light); --hover-box-shadow: inset 0 0 0 1px var(--clr-dark); }
.btn.btn--outline-dark { --bg-clr: transparent; --clr: var(--clr-dark); --box-shadow: inset 0 0 0 1px var(--clr-dark); --focus-box-shadow: inset 0 0 0 1px var(--clr-dark); --hover-bg-clr: var(--clr-dark); --hover-clr: #fff; }

.btn.btn--link { font-size: 15px; --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link i { --w: 10px; --h: 10px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--clr-copper); }  
.btn.btn--link-animated { position: relative; min-height: 28px; padding-left: 34px; display: inline-flex; }
.btn.btn--link-animated .wpb-icon { position: absolute; left: 0; top: 0; transition-property: left, transform; transition-duration: var(--global-ts-duration); transition-timing-function: var(--global-ts-function); }
.btn.btn--link-animated:hover { padding-left: 0; padding-right: 34px; }
.btn.btn--link-animated:hover .wpb-icon { left: calc(100% - 28px); }

.btn.btn--link-white { font-size: 15px; --bg-clr: transparent; --clr: #fff; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-white i { --w: 10px; --h: 10px; --clr: var(--clr-dark); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: #fff; }  

.btn.btn--link-secondary { font-size: 15px; --clr: var(--clr-dark); --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-secondary .material-symbols-sharp { font-size: 20px; }  
.btn.btn--link-secondary:hover .material-symbols-sharp { font-size: 20px; }

.btn.btn--link-primary { font-size: 15px; --clr: var(--clr-dark); --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-primary i { --w: 10px; --h: 10px; display: inline-grid; place-items: center; min-width: 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-2); }  
.btn.btn--link-primary i::after { background: #fff; }
.btn.btn--link-primary:hover i::after { transform: rotate(45deg); }

.btn.btn--link-copper { font-size: 15px; --clr: var(--clr-copper); --bg-clr: transparent; text-transform: none; --p: 0; min-height: auto; }
.btn.btn--link-copper i { --w: 10px; --h: 10px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--clr-copper); }


.btn--small { --fs: 14px; --p: 0 12px; min-height: 32px; }
.btn--large, .hero__button { --fs: 18px; min-height: 40px; }

.btn--primary, .gform_wrapper .gform_submit, form .upload__button, input[type=submit] { --br: 3px; padding: var(--p); min-height: 40px; }

.btn.btn--square { --p: 0; aspect-ratio: 1/1; }

@media (min-width: 992px) {
    .btn--large, .hero__button { --fs: 20px; min-height: 50px; }
}