/*******************/
/*  START :: Hero  */
/*******************/

/* start :: animation fix for stuttering fade-up opacity */
body:not(.fl-builder-edit) .fl-animation.fl-fade-up {
    opacity: 0;
}
body:not(.fl-builder-edit) .fl-animation.fl-fade-up.fl-animated {
    opacity: 1;
}
/* end :: animation fix for stuttering fade-up opacity */

body:not(.fl-builder-edit) .icon-drop.bounce {
    animation: bounceDroplet 2s infinite ease-in-out; 
    -webkit-animation: bounceDroplet 2s infinite ease-in-out;
    transform-origin: bottom center;
}

@keyframes bounceDroplet {
    0%, 100% {
        transform: translateY(0) scaleY(0.1) scaleX(2.5);
    }
    15% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-15px) scaleY(1.1) scaleX(0.9);
    }
    69% {
        transform: translateY(5px) scaleY(.9) scaleX(1.1);
    }
    70% {
        transform: translateY(0px) scaleY(.9) scaleX(1.1);
    }
    73% {
        transform: translateY(0px) scaleY(0.2) scaleX(2.0);
    }
    80% {
        transform: translateY(0) scaleY(0.1) scaleX(2.5);
    }
}

@keyframes bounceDroplet2 {
  0% {
    transform: translateY(0) scaleY(0.1) scaleX(2.5); /* Starting and ending position */
  }
  20% {
    transform: translateY(0); /* Starting and ending position */
  }
  50% {
    transform: translateY(-10px) scaleY(1.1); /* Peak of the bounce */
  }
  75% {
    transform: translateY(5px) /* Slight squash on impact */
  }
  90% {
    transform: translateY(0px) scaleY(0.1) scaleX(2.5) /* Slight squash on impact */
  }
  100% {
    transform: translateY(0) scaleY(0.1) scaleX(2.5); /* Starting and ending position */
  }
}

.icon-drop.bounce-ai {
    animation: bounceDropletAI 2s infinite ease-in-out; 
    -webkit-animation: bounceDropletAI 2s infinite ease-in-out;
    transform-origin: bottom center;
}
@keyframes bounceDropletAI {
  0%, 100% {
    transform: translateY(0); /* Starting and ending position */
  }
  50% {
    transform: translateY(-50px); /* Peak of the bounce */
  }
  75% {
    transform: translateY(0) scaleY(0.9); /* Slight squash on impact */
  }
}

.uabb-off-canvas-show .hero-flyout > .fl-row-content-wrap {
    animation: backgroundfix 1s forwards; 
}
@keyframes backgroundfix {
    to {
        background: var(--Purple) url('/wp-content/uploads/Background-Purple.svg') no-repeat fixed center center / cover !important;
    }
}

.hero p em strong,
.hero p strong em {
    font-style: normal;
    font-weight: 700 !important;
    color: var(--Blood-Red) !important;
}

/****************************/
/*  START :: Border Radii   */
/****************************/
/* if browser supports masks, then use custom svg for hero border radii */
@supports (mask: initial) or (-webkit-mask: initial) {
    body:not(.fl-builder-edit) .border-bottom-radius,
    body:not(.fl-builder-edit) .border-top-radius {
        position: relative;
        --border-radius: url('/wp-content/uploads/rounded-corner.svg');
        --border-radius-size: 30px;
    }
    body:not(.fl-builder-edit) .border-bottom-radius:before,
    body:not(.fl-builder-edit) .border-bottom-radius:after,
    body:not(.fl-builder-edit) .border-top-radius:before,
    body:not(.fl-builder-edit) .border-top-radius:after {
        content: "";
        height: var(--border-radius-size);
        position: absolute;
        width: var(--border-radius-size);
        z-index: 1;

        background-color: currentColor;
            -webkit-mask: var(--border-radius) no-repeat center center;
        mask: var(--border-radius) no-repeat center center;
            -webkit-mask-size: contain;
        mask-size: contain;
    }

    body:not(.fl-builder-edit) .border-bottom-radius.left:before {
        bottom: 0;
        left: 0;
        transform: rotate(270deg);
    }
    body:not(.fl-builder-edit) .border-bottom-radius.right:after {
        bottom: 0;
        right: 0;
        transform: rotate(180deg);
    }
    body:not(.fl-builder-edit) .border-top-radius.left:before {
        left: 0;
        top: 0;
    }
    body:not(.fl-builder-edit) .border-top-radius.right:after {
        right: 0;
        top: 0;
        transform: rotate(90deg);
    }
    /* Mobile */
    @media only screen and (max-width: 768px) {
        body:not(.fl-builder-edit) .border-bottom-radius,
        body:not(.fl-builder-edit) .border-top-radius {
            --border-radius-size: 24px;
        }
    }
}
/****************************/
/*  END   :: Border Radii   */
/****************************/

/*************************/
/*  START :: Hero Form   */
/*************************/
.tabs .fl-tabs-panel-content {
    padding: 0 !important;
}
/* Tabs Focus state */
.fl-tabs-horizontal .fl-tabs-label.fl-tab-active:focus  {
    outline-width: 2px;
    outline-style: auto;
    outline-offset: 5px;
    outline-color: var(--brand-focus);
}
/* min-height on tabs */
/*  BB "X-LARGE" DESKTOP, only  */
@media only screen and (min-width: 1366px) {
    .tabs { min-height: 620px; }
}
/*  BB "LARGE" DESKTOP, only  */
@media only screen and (min-width: 992px) and (max-width: 1366px) {
    .tabs { min-height: 515px; }
}
/* Tablet */
@media only screen and (max-width: 992px) {
    .tabs { min-height: 780px; }
}
/* Mobile */
@media only screen and (max-width: 768px) {
    .tabs { min-height: unset; }
}
.tabs .fl-tabs-panels {
    background: transparent;
    border: none;
}
.form {
    position: relative;
    --form-accent: var(--pink);
}
.form .icon {
    left: calc(50% - 33px);
    position: absolute;
    top: 36px;
}
.form .icon .fl-photo-content{
    background-color: var(--white);
    border-radius: 50%;
    padding: 19px 21px;
    width: auto;
}
.hero-home .uabb-tabs-nav ul,  /* uabb version */
.hero-home .fl-tabs-labels /* bb version */ {
    background: #FAF7EF;
    border-radius: 40px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.12);
    margin: 28px auto 0;
    max-width: max-content;
    isolation: isolate;
}
.hero-home .uabb-tabs-nav li,
.hero-home .fl-tabs-label {
    border-radius: 40px;
}
.hero-home .uabb-tabs-nav li div {
    padding: 8px 0 12px; 
    display: inline-block;
}
.hero-home .uabb-tabs-nav li a, /* uabb version */
.hero-home .fl-tabs-label /* bb version */ {
    animation: none;
    background-image: none;
    color: var(--Purple) !important;
    font-size: 18px;
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 30px;
    outline: none;
    transition: 300ms; 
}
.hero-home .fl-tabs-label /* bb version */ {
    padding: 8px 27px 12px;
}
.hero-home .fl-tabs-label.fl-tab-active {
    background: transparent;
}
.hero-home .fl-tabs-horizontal .fl-tabs-label.fl-tab-active:after {
    background: transparent;
    display: none; /* removes bb default pseudo altering focus shape */
}
.hero-home .uabb-tabs-nav li.uabb-tab-current, /* uabb version */ {
/* background-color: var(--Purple); */
}
.hero-home .uabb-tabs-nav li.uabb-tab-current a, /* uabb version */{
    /* color: var(--white) !important; */
}
/* excludes mobile */
    @media only screen and (min-width: 768px) {
    .hero-home .fl-tabs-label.fl-tab-active /* bb version */ {
        background-color: var(--Purple); /* only if anchor is unsupported */
        color: var(--white) !important;
        transition: color 300ms; 
    }
}

@supports (anchor-name: --hovered-link) {
    /* excludes mobile */
    @media only screen and (min-width: 768px) {
        .hero-home .fl-tabs-label.fl-tab-active /* bb version */ {
            background-color: unset;
        }
        .hero-home .fl-tabs-label.fl-tab-active:not(:hover,:active) /* bb version */ {
            color: var(--Purple) !important;
        }
        /* when neither tab link is hovered, reset anchor to active tab link */
        body:not(.fl-builder-edit) .hero-home .fl-tabs-labels:not(:has(a:hover,a:active)) .fl-tab-active {
            anchor-name: --hovered-link;
            color: var(--white) !important;
        }
        body:not(.fl-builder-edit) .hero-home .fl-tabs-labels:has(a:hover,a:active) .fl-tab-active {
            anchor-name: unset;   
        } 
        body:not(.fl-builder-edit) .hero-home .fl-tabs-labels:before {
            background-color: var(--Purple);
            border-radius: 40px;
            bottom: anchor(bottom);
            content:"";
            display: unset;
            /* height: 10px; */
            left: anchor(left);
            pointer-events: none;
            position: absolute;
            position-anchor: --hovered-link;
            right: anchor(right);
            top: anchor(top);
            transition: 300ms;
            z-index: -1;
        }
    
        body:not(.fl-builder-edit) .hero-home .fl-tabs-label:hover,
        body:not(.fl-builder-edit) .hero-home .fl-tabs-label:active {
            color: var(--white) !important;
            anchor-name: --hovered-link !important;
        }
    }
    /* mobile only */
    @media only screen and (max-width: 768px) {
        
    }
}

/* mobile only */
@media only screen and (max-width: 768px) {
    .hero-home .fl-tabs-labels {
        max-width: max-content;
    }
    .hero-home a.fl-tabs-label {
        padding: 8px 20px 12px;
        text-align: center;
        width: auto;
    }
    .hero-home a.fl-tabs-label.fl-tab-active {
        background-color: #4C1A39;
        color: var(--white) !important;
        padding: 8px 20px 12px;
    }
    /* continue to use the desktop toggle on mobile */
    .tabs .fl-tabs-labels {
        display: block; 
    }
    a.fl-tabs-label {
        display: inline-block;
    }
    /* reset the layout styling that causes the shift when a tab is focused */
    .fl-tabs.fl-tabs-horizontal .fl-tabs-label {
        float: left;
    }
    /* hide the mobile-specific toggle */
    .tabs .fl-tabs-panel-label {
        display: none !important;
    }
    /* remove extraneous styling */
    .fl-tabs-panel {
        border-bottom-width: 0;
    }
}
/* smaller mobiles only */
@media only screen and (max-width: 450px) {
    .hero-home a.fl-tabs-label {
        float: none !important;
        width: 145px;
    }
}
/* extra-small mobiles only */
@media only screen and (max-width: 400px) {
    .hero-home .fl-tabs-labels {
        width: auto;
        text-align: center;
    }
    .hero-home a.fl-tabs-label {
        width: auto;
    }
}
/* fixes 1px gap between .hero w background-image and row below on mobile */
.hero-left > .fl-row-content-wrap {
    background-color: var(--Pink);
}
.hero-home > .fl-row-content-wrap {
    background-color: var(--Purple);
}
.hero--list.fl-module-box::before, 
.hero--list.fl-module-box::after {
    content: unset; /* prevents pseudo element from adding extra gap at start and end of flexbox */
}
.hero--list {
    color: var(--Purple);
    font-family: var(--font-content);
    counter-reset: steps;
}
.hero--list-item::before {
    align-items: center;
    background-color: var(--Purple);
    border-radius: 50%;
    color: var(--white);
    counter-increment: steps;
    content: counter(steps) !important;
    display: flex !important;
    font-family: var(--font-content);
    font-size: 22px;
    font-size: 1.38rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    line-height: 0; 
    margin-bottom: var(--Sizing-Units-3XS);
    width: 30px;
}

.hero--list-item legend, 
.hero--list-item p {
    border-bottom: 0;
    color: var(--Purple);
    font-family: var(--font-content);
    font-size: 1.88rem;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 3.13rem;
    line-height: 50px;
    margin: 0;
}
.hero--list-item ul {
    margin-top: var(--Sizing-Units-3XS);
}
.hero--list-item button {
    margin-top:var(--Sizing-Units-2XS);
}

.hero--list-item input[type=radio] {
    border: 0px;
    cursor: pointer;
    height: 30px;
    margin: 0;
    position: absolute;
    width: 30px;
}
/* .hero--list-item input[type=radio]:focus {
    box-shadow: none !important;
    outline: none !important;
} */
.hero--list-item input[type=radio]:focus,
.hero--list-item input[type=radio]:focus-visible {
    outline: unset;
    outline-width: 2px;
    outline-style: auto;
    outline-offset: 5px;
    outline-color: var(--form-accent);
}

.hero--list-item input[type=radio]:checked::before {
    background-color: var(--Blood-Red);
    border-radius: 50%;
    content: "";
    height: 22px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 22px;
    z-index: 1;
}

.hero--list-item input[type=radio]:after {
    background-color: var(--white);
    border: 1px solid var(--Blood-Red);
    border-radius: 50%;
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}

.hero--list-item label {
    color: var(--purple);
    display: inline-block;
    font-size: 18px;
    font-size: 1.13rem;
    font-weight: 400;
    line-height: 30px;
    line-height: 1.88rem;
    margin: 0 0 1px;
    padding-left: calc(30px + var(--Sizing-Units-2XS));
}

.hero--list-item ul {
    list-style-type: none;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column; 
    gap: var(--Sizing-Units-2XS);
}

button.button-branded,
button.button-branded:focus,
button.button-branded:hover {
    align-items: center;
    background-color: var(--Blood-Red);
    border-radius: var(--border-radius-btn);
    border: 1px solid var(--Blood-Red);
    color: var(--white) !important;
    display: flex;
    font-size: 17px;
    font-size: 1.06rem;
    font-style: normal;
    font-weight: 600;
    gap: 12px;
    justify-content: center;
    letter-spacing: -0.34px;
    line-height: normal;
    padding: 18px 23px;
    transition: all .25s ease-in-out;
}
/* no hover state for mobile*/
@media only screen and (min-width: 768px) {
    button.button-branded:focus,
    button.button-branded:hover {
        transform: scale(1.05);
    }
}
/*  BB "LARGE" DESKTOP, and down  */
@media only screen and (max-width: 1366px) {
    .hero--list-item legend, 
    .hero--list-item p {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 40px; 
        line-height: 2.5rem;
    }
}
/*  BB "LARGE" DESKTOP, only  */
@media only screen and (min-width: 992px) and (max-width: 1366px) {
}
/* Tablet */
@media only screen and (max-width: 992px) {
    button.button-branded,
    button.button-branded:focus,
    button.button-branded:hover {
        gap: 8px;
        padding: 13px 20px;
    }
  
}
/* Mobile */
@media only screen and (max-width: 768px) {
    .hero-home .fl-tabs-horizontal .fl-tabs-labels .fl-tabs-label {
        border-bottom: 1px solid transparent !important;
        border: 1px solid transparent !important;
        outline-offset: -1px !important;
        overflow: visible !important;
    }
    .form .icon {
        top: 27px;
    }
    .hero-home .uabb-tabs-nav li a {
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.38rem;

    }
    .hero--list-item legend {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 33px; 
        line-height: 2.06rem; 
    }
    .hero--list-item p {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 40px; 
        line-height: 2.5rem; 
    }
}
/* smaller mobile only */
@media only screen and (max-width: 450px) {

    .hero-home .fl-tabs-label /* bb version */ {
        font-size: 16px;
        font-size: 1rem;
        line-height: 26px;
        line-height: 1.63rem;
    }   
    .hero--list-item::before {
        font-size: 18px;
        font-size: 1.13rem;
        height: 26px;
        width: 26px;
    }
    .hero--list-item p,
    .hero--list-item legend {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 30px;
        line-height: 1.88rem;
    }

}
/*************************/
/*  END   :: Hero Form   */
/*************************/

/*******************/
/*  END   :: Hero  */
/*******************/