/*** ---------- Buttons ---------- ***/
a { color: var(--clr-text); }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button { 
    --fs: 1.6rem; 
    --lh: 1; 
    --p: 0 1.6rem; 
    --br: 0; 
    --gap: 2.4rem;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --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: 0 0 0 .5rem var(--clr-primary-20); 
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; justify-content: center; align-items: center; min-height: 5rem; gap: var(--gap); font-size: var(--fs); font-weight: 900; line-height: var(--lh); padding: var(--p); color: var(--clr); background-color: 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; 
    
    text-transform: uppercase;
    transition-duration: var(--ts-duration);
    transition-timing-function: var(--ts-function);

    font-family: var(--font-primary); transition-property: color, background-color, border-color, box-shadow, -webkit-box-shadow;
}
.btn span, .gform_button span, .gform_next_button span, .gform_previous_button span, .button span { font: inherit; color: inherit; }
.btn i, .gform_button i, .gform_next_button i, .gform_previous_button i { --clr: inherit; }
.btn:hover, .gform_button:hover, .gform_next_button:hover, .gform_previous_button:hover, .button:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important; }
.btn:hover i, .gform_button:hover i, .gform_next_button:hover i, .gform_previous_button:hover i { --clr: var(--hover-clr); }
.btn:focus, .gform_button:focus, .gform_next_button:focus, .gform_previous_button:focus, .gform_button:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; }
.btn:focus i, .gform_button:focus i, .gform_next_button:focus i, .gform_previous_button:focus i, .gform_button:focus i { --clr: var(--focus-clr); }
.btn:active, .gform_next_button:active, .gform_previous_button:active, .button:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; }
.btn:active i, .gform_next_button:active i, .gform_previous_button:active i { --clr: var(--active-clr); }

.btn.btn--small { --p: 0 1.5rem; --fs: 1.4rem; min-height: 3.5rem; }
.btn.btn--large { --p: 0 2.2rem; --fs: 1.8rem; min-height: 5.5rem; }

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

.btn.btn--primary, .button { --clr: rgb(255,255,255); --bg-clr: var(--clr-primary); --border: 1px solid transparent; --hover-bg-clr: var(--clr-secondary); }
.btn.btn--secondary { --clr: var(--clr-primary); --bg-clr: var(--clr-secondary); --border: 1px solid transparent; --hover-clr: var(--clr-secondary); --hover-bg-clr: var(--clr-primary); }
.btn.btn--dark { --clr: #FFFF; --bg-clr: var(--clr-dark); --border: 2px solid #FFF0; --box-shadow: none; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-primary); --hover-border: 2px solid var(--clr-primary); }
.btn.btn--outline { --clr: var(--clr-dark); --bg-clr: transparent; --border: 2px solid var(--clr-dark); --box-shadow: none; --hover-clr: #FFFF; --hover-bg-clr: var(--clr-primary); --hover-border: 2px solid var(--clr-primary); }
.btn.btn--link { --p: 0; --clr: var(--clr-primary); --hover-clr: var(--clr-secondary); --bg-clr: transparent; --border: 1px solid transparent; --gap: 1.4rem; --box-shadow: none; }

.btn i.fa-play{ font-size: calc(var(--fs) - .2rem); transition: transform var(--ts-duration) var(--ts-function), opacity var(--ts-duration) var(--ts-function), font-size var(--ts-duration) var(--ts-function); }
.btn:hover i.fa-play{ transform: translateX(.3rem) scale(1.8); opacity: .2; }
.btn.btn--link:hover i.fa-play{ transform: none; opacity: 1; }

.btn:has(span.count){ --gap: 1.2rem; }
.btn span.count{ --size: 2rem; width: var(--size); min-width: var(--size); height: var(--size); min-height: var(--size); font-size: 1.3rem; line-height: 0; outline: 1px solid transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--clr-dark); color: #fff; transition: background var(--ts-duration) var(--ts-function), color var(--ts-duration) var(--ts-function), outline var(--ts-duration) var(--ts-function); }
.btn:hover span.count{ background-color: transparent; color: #FFFF; outline: 1px solid #FFFF; }

.btn-side-text{ font-size: clamp(1.4rem, 1.5vw, 1.8rem); display: flex; flex-direction: column; line-height: 1.4; }
.btn-side-text > *{ color: var(--clr-heading); }

.btn-group { --gap: 2rem; --mt: 3.2rem; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--gap); }  
.btn-group .btn + .btn-side-text{ margin-right: 1.2rem; }
.btn-group .btn-side-text:has(+ .btn){ text-align: end; }

.wpb-featured-button{ display: flex; align-items: center; gap: 1.2rem; text-decoration: none; text-wrap: nowrap; color: var(--clr-heading); cursor: pointer; }
.wpb-featured-button .wpb-featured-button__text{ font-size: clamp(1.4rem, 1.5vw, 1.8rem); display: flex; flex-direction: column; }
.wpb-featured-button .wpb-featured-button__text:has(+ i){ align-items: end; }
.wpb-featured-button i{ 
    --size: 4.3rem; --bg-clr: var(--clr-secondary-110); --clr: #FFFF;  width: var(--size); min-width: var(--size); height: var(--size); min-height: var(--size); border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    background-color: var(--bg-clr); color: var(--clr); font-size: 2rem; outline: 2px solid var(--bg-clr); outline-offset: 2.5px; transition: background var(--ts-duration) var(--ts-function), color var(--ts-duration) var(--ts-function), outline var(--ts-duration) var(--ts-function), outline-offset var(--ts-duration) var(--ts-function), outline-width var(--ts-duration) var(--ts-function);
}
.wpb-featured-button:hover i{ --bg-clr: var(--clr-primary); outline-color: rgb(var(--clr-primary-rgb), .5); outline-width: 4px; outline-offset: 0px; }

.wpb-featured-button.wpb-featured-button--outline i{ --clr: var(--clr-dark); background-color: transparent; }
.wpb-featured-button.wpb-featured-button--outline:hover i{ color: #fff; background-color: rgb(var(--clr-primary-rgb), 1); outline-color: rgb(var(--clr-primary-rgb), 0.4); }

.wpb-featured-button.wpb-featured-button--white{ color: #FFFF; line-height: 1.2; }
.wpb-featured-button.wpb-featured-button--white i{ --clr: var(--clr-dark); --bg-clr: #FFFF; outline-color: transparent; font-size: 1.8rem; outline-offset: 0px; }
.wpb-featured-button.wpb-featured-button--white:hover i{ --bg-clr: var(--clr-primary); --clr: #fff; outline-color: rgb(var(--clr-primary-rgb), .5); }

.wpb-featured-button.wpb-featured-button--primary{ color: #FFFF; line-height: 1.2; }
.wpb-featured-button.wpb-featured-button--primary i{ --clr: #FFFF; --bg-clr: var(--clr-primary); outline-color: transparent; font-size: 1.8rem; outline-offset: 0px; }
.wpb-featured-button.wpb-featured-button--primary:hover i{ --bg-clr: #FFF; --clr: var(--clr-dark); color: var(--clr) !important; outline-color: rgba(255, 255, 255, 0.3); }

:is(.wpb-bg-clr--primary, .wpb-bg-clr--secondary, .wpb-bg-clr--dark, .has-background-asset) .btn.btn--outline{ --clr: #FFFF; --border: 2px solid #FFFF; --hover-border: 2px solid #FFF0; }

@media (min-width: 768px){
    .btn, .gform_button, .gform_next_button, .gform_previous_button, .button { --fs: 1.8rem; --p: 0 2.8rem; min-height: 6rem; }
    .btn.btn--small { --p: 0 1.8rem; --fs: 1.6rem; min-height: 5rem; }
    .btn.btn--large { --p: 0 3rem; --fs: 2rem; min-height: 7rem; }

    .wpb-featured-button{ gap: 2rem; }
    .wpb-featured-button i{ --size: 5.1rem; font-size: 2.6rem; }
}