.elementor-kit-6{--e-global-color-primary:#006AFF;--e-global-color-secondary:#00000099;--e-global-color-text:#F4F2F0;--e-global-color-accent:#38CDCF;--e-global-color-c8d77dc:#FFFFFF;--e-global-color-eec9a88:#1C1B1A;--e-global-color-bd20855:#99AFCC;--e-global-typography-primary-font-family:"Circular";--e-global-typography-secondary-font-family:"Circular";--e-global-typography-text-font-family:"Circular";--e-global-typography-accent-font-family:"Circular";color:#4D4D4D;font-family:"Circular", Sans-serif;font-size:16px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Circular", Sans-serif;font-size:1.125rem;font-weight:450;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#006AFF;border-radius:9999px 9999px 9999px 9999px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );font-family:"Circular", Sans-serif;}.elementor-kit-6 h1{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:3.8125rem;font-weight:300;line-height:4rem;letter-spacing:-0.125rem;}.elementor-kit-6 h2{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:2.4375rem;font-weight:400;line-height:2.625rem;letter-spacing:-0.075rem;}.elementor-kit-6 h3{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:1.9375rem;font-weight:400;line-height:2.125rem;letter-spacing:-0.059375rem;}.elementor-kit-6 h4{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:1.5625rem;font-weight:450;line-height:1.75rem;letter-spacing:-0.05rem;}.elementor-kit-6 h5{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:1.25rem;font-weight:450;line-height:1.375rem;letter-spacing:-0.0375rem;}.elementor-kit-6 h6{color:var( --e-global-color-eec9a88 );font-family:"Circular", Sans-serif;font-size:1rem;font-weight:450;line-height:1.125rem;letter-spacing:-0.03125rem;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{background-color:#EBF3FF;border-style:none;border-radius:.5rem .5rem .5rem .5rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:2.0625rem;font-weight:300;line-height:2.1875rem;letter-spacing:-0.0625rem;}.elementor-kit-6 h2{font-size:1.625rem;font-weight:400;line-height:1.8125rem;letter-spacing:-0.05rem;}.elementor-kit-6 h3{font-size:1.4375rem;font-weight:400;line-height:1.6875rem;letter-spacing:-0.04375rem;}.elementor-kit-6 h4{font-size:1.25rem;font-weight:450;line-height:1.4375rem;letter-spacing:-0.0375rem;}.elementor-kit-6 h5{font-size:1.125rem;font-weight:450;line-height:1.6875rem;letter-spacing:-0.034375rem;}.elementor-kit-6 h6{font-size:1rem;line-height:1.125rem;letter-spacing:-0.03125rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --light-paper:#F7F6F5; --divider-grey:#d9d9d9; --payactiv-blue:#006AFF; --dark-paper:#F2EFEB; --warm-black:#1C1B1A; --paper:#F4F2F0; --primary-text:#4D4D4D; --medium-blue:#0050BF; --zap:#E7FE72; --pink:#FF336C; --daker-paper:#F0EBE6; --status-green:#23CA7F; --status-red:#FF6C3A; --DUP_dark-paper:#F2EFEB; --DUP_payactiv-blue:#006AFF; --strokes:#E5E5E5; --vertical-standard-desktop:7.5rem; --sides-desktop:2.5rem; --sides-mobile:1.5rem; --vertical-big-tablet:7.5rem; --sides-tablet:2.5rem; --vertical-big-mobile:6rem; --vertical-half-standard-desktop:3.75rem; --vertical-small-tablet:3.75rem; --vertical-small-mobile:3rem; --vertical-compact-desktop:5rem; --vertical-half-compact-desktop:2.5rem; --vertical-standard-tablet:5rem; --vertical-half-standard-tablet:2.5rem; --vertical-standard-mobile:3rem; --vertical-half-standard-mobile:1.5rem; }
/* Start custom CSS */@view-transition {
    navigation: auto;
}

::view-transition-group(page-content) {
    animation-duration: 1s;
    animation-timing-function: ease;
}

::view-transition-old(page-content) {
    animation-name: page-out;
}

::view-transition-new(page-content) {
    animation-name: page-in;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}
/*
header {
    view-transition-name: site-header;
}*/
  :root:active-view-transition header {
      view-transition-name: site-header;
  }
header+div {
    view-transition-name: page-content;
    margin-top: 70px;
}

@keyframes page-out {
    to {
        opacity:0;
    }white-
}

@keyframes page-in {
    from {
        opacity: 0;
        transform:translateY(2rem);
    }
}

/*Used for arrow link*/
@keyframes x-oscillate {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(30%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



/*fake headings*/


.display1 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 9.25rem;
    font-weight: 300;
    line-height: 9.4375rem;
    letter-spacing: -0.3125rem;
}

.display1-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 9.25rem;
    font-weight: 400;
    line-height: 9.4375rem;
    letter-spacing: -0.3125rem;
}

.display2 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 7.5625rem;
    font-weight: 300;
    line-height: 7.75rem;
    letter-spacing: -0.26rem;
}

.display2-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 7.5625rem;
    font-weight: 400;
    line-height: 7.75rem;
    letter-spacing: -0.26rem;
}

.display3 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 5.9375rem;
    font-weight: 300;
    line-height: 6.125rem;
    letter-spacing: -0.20813rem;
}

.display3-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 5.9375rem;
    font-weight: 400;
    line-height: 6.125rem;
    letter-spacing: -0.20813rem;
}


.h1 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 3.8125rem;
    font-weight: 300;
    line-height: 4rem;
    letter-spacing: -0.125rem;
}

.h1-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 3.8125rem;
    font-weight: 400;
    line-height: 4rem;
    letter-spacing: -0.125rem;
}

.h2 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 2.4375rem;
    font-weight: 400;
    line-height: 2.625rem;
    letter-spacing: -0.075rem;
}

.h2-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 2.4375rem;
    font-weight: 450;
    line-height: 2.625rem;
    letter-spacing: -0.075rem;
}

.h3 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.9375rem;
    font-weight: 400;
    line-height: 2.125rem;
    letter-spacing: -0.059375rem;
}

.h3-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.9375rem;
    font-weight: 450;
    line-height: 2.125rem;
    letter-spacing: -0.059375rem;
}

.h4 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.5625rem;
    font-weight: 450;
    line-height: 1.75rem;
    letter-spacing: -0.05rem;
}

.h4-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.5625rem;
    font-weight: 500;
    line-height: 1.75rem;
    letter-spacing: -0.05rem;
}

.h5 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.25rem;
    font-weight: 450;
    line-height: 1.375rem;
    letter-spacing: -0.0375rem;
}

.h5-emphasized {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.375rem;
    letter-spacing: -0.0375rem;
}

.h6 {
    color: var(--e-global-color-eec9a88);
    font-family: "Circular", Sans-serif;
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.125rem;
    letter-spacing: -0.03125rem;
}


 /*fake headings - mobile*/
  @media (max-width: 767px) {
      .display1,
      .display1-emphasized {
          font-size: 4.1875rem;
          line-height: 4.375rem;
          letter-spacing: -0.1875rem;
      }

      .display2,
      .display2-emphasized {
          font-size: 3.3125rem;
          line-height: 3.4375rem;
          letter-spacing: -0.15625rem;
      }

      .display3,
      .display3-emphasized {
          font-size: 2.625rem;
          line-height: 2.75rem;
          letter-spacing: -0.09375rem;
      }

      .h1,
      .h1-emphasized {
          font-size: 2.0625rem;
          line-height: 2.1875rem;
          letter-spacing: -0.0625rem;
      }

      .h2,
      .h2-emphasized {
          font-size: 1.625rem;
          line-height: 1.8125rem;
          letter-spacing: -0.05rem;
      }

      .h3,
      .h3-emphasized {
          font-size: 1.4375rem;
          line-height: 1.6875rem;
          letter-spacing: -0.04375rem;
      }

      .h4,
      .h4-emphasized {
          font-size: 1.25rem;
          line-height: 1.4375rem;
          letter-spacing: -0.0375rem;
      }

      .h5,
      .h5-emphasized {
          font-size: 1.125rem;
          line-height: 1.3125rem;
          letter-spacing: -0.034375rem;
      }
  }



/*Removes main padding*/

.e-parent {
    padding: 0;
}

/*Hubspot form style*/
.hs-form-html>div {
    width: 100%;
}

.hs-form-html label {
    margin: 0 !important;
}

.hs-form-html textarea{
    background: white;
}

.hs-form-html .hsfc-ErrorAlert {
    background: #fc6865;
    color: white !important;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.hs-form-html .hsfc-Step__Content {
    padding: 0 !important;
    position: relative;
}

.hs-form-html .hsfc-Step__Content input {
    background-color: white !important;
}

.hs-form-html .hsfc-Step__Content>div {
    margin-bottom: 1rem;
}

.hs-form-html .hsfc-Step__Content>div:first-child label {
    color: white;
}

.hs-form-html+div {
    flex-wrap: wrap;
    gap: 0 .65ch;
}

.hs-form-html+div a.e-paragraph-link-base {}

.hs-form-html .hsfc-Row {
    gap: 1rem !important;
}

.hs-form-html .hsfc-Row:nth-child(8) {
    position: absolute;
    visibility: hidden;
}

.hs-form-html .hsfc-NavigationRow {
    margin-bottom: 1rem !important;
}

.hs-form-html .hsfc-NavigationRow__Buttons {
    justify-content: start !important;
}


.hs-form-html .hsfc-Row p,
.hs-form-html .hsfc-Row span{
    color:white !important;
}

.hs-form-html .hs-form-html .hsfc-FormWrapper p{color:white;}

.hs-form-html .hsfc-RadioFieldGroup label{
    margin-bottom:.5rem !important;
}

.hs-form-html #4425b1e7-ce38-43e8-a3af-8e5b7e501a80-2012048720285-li-rt0-pp span{
    color: white!important;
}

/*Final CTA*/
#final-cta .text-color-inv-link a {
    color: white !important;
    text-decoration: underline !important;
}


#final-cta .text-color-inv-link {
    position: relative;
}


/*Footer*/
footer a {
    color: white !important;
    text-decoration: underline !important;
}

#logos-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex !important;
}

/* Prevent flex parent from shrinking the track */
.logos-track {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    
    animation: scroll-left 30s linear infinite;
    will-change: transform;
}

#logos-wrapper.logos-black-gradient::before {
    content:"";
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
  background: linear-gradient(90deg, #1C1B1A 5%, rgba(28, 27, 26, 0.00) 20%, rgba(28, 27, 26, 0.00) 80%, #1C1B1A 95%);
}



#logos-wrapper.logos-white-gradient::before {
    content:"";
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
  background: linear-gradient(90deg, #FFF 5%, rgba(255, 255, 255, 0.00) 20%, rgba(255, 255, 255, 0.00) 80%, #FFF 95%);
}



#logos-wrapper.logos-paper-gradient::before {
    content:"";
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
  background: linear-gradient(90deg, #F4F2F0 5%, #F4F2F000 20%, #F4F2F000 80%, #F4F2F0 95%);
}

 .logos-mask{
      -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 20%, #000 80%, transparent 95%);
      mask-image: linear-gradient(90deg, transparent 5%, #000 20%, #000 80%, transparent 95%);
  }
#logos-wrapper .e-con {
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
    padding-right: 3rem;
    box-sizing: content-box;
    position: relative;
}



@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

#logos-wrapper:hover .logos-track {
    animation-play-state: paused;
}


/*Atomic Button*/

.elementor button.secondary-button.e-button-base {
    text-shadow: none;
}

/*Atomic Tabs*/

.tab-trigger.e--selected,
.tab-trigger:hover {
    border-color: var(--e-global-color-primary) !important;
    border-bottom-width: 2px;
}

.tab-trigger>span {
    font-weight: 350;
    color: #1d273599;
}

.tab-trigger.e--selected>span,
tab-trigger:hover>span {
    font-weight: 350;
    color: #00204d;
}

.e-tab-content-base.e--selected {
    animation: fadeUp 0.3s ease forwards;
}

/*Toggle Card*/

.toggle-card .e-tab-content-base.e--selected:nth-child(1) {
    animation: fadeLeft 0.3s ease forwards;
}

.toggle-card .e-tab-content-base.e--selected:nth-child(2) {
    animation: fadeRight 0.3s ease forwards;
}

/*Info and Success Buttons from classic elementor*/
/*Info Button*/
.elementor-element.elementor-button-info .elementor-button {
    background-color: white;
    color: var(--e-global-color-primary);
    text-shadow: none;
    fill: var(--e-global-color-primary);
}

/*Success Button*/
.elementor-element.elementor-button-success .elementor-button {
    background-color: white;
    border-color: white;
    color: var(--e-global-color-primary);
    text-shadow: none;
    fill: var(--e-global-color-primary);
}

/*Buttons Hover*/
.elementor-button:hover {
    opacity: 0.5;
}

.elementor .e-button-base:hover {
    opacity: 0.5;
}

button[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

/*No shadow on tab text*/

.e-tab-base>span {
    text-shadow: none;
}



/*Custom Classes*/

.arrow-link:has(span:empty) {
    display: none;
}


.arrow-link:hover svg {
    animation: x-oscillate 0.5s infinite alternate;
}

/*SVG Fill Primary*/
.svg-fill-primary>svg {
    color: var(--e-global-color-primary) !important;
    fill: var(--e-global-color-primary) !important;
}

/*select-to-display*/

.select-to-display>div:nth-child(2)>img {
    position: absolute;
    opacity: 0;
    transform: translateY(10%);
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.select-to-display>div:nth-child(2)>img:nth-child(1) {}

.select-to-display:has(#select1:hover)>div:nth-child(2)>img:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.select-to-display:has(#select2:hover)>div:nth-child(2)>img:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.select-to-display:has(#select3:hover)>div:nth-child(2)>img:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.select-to-display:has(#select4:hover)>div:nth-child(2)>img:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.select-to-display:has(#select5:hover)>div:nth-child(2)>img:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.select-to-display>div:nth-child(1)>div p:hover {
    border-radius: 1rem;
    background: var(--light-paper);
}

.select-to-display>div:nth-child(1)>div p {
    font-size: 1.25em;
}

.select-to-display>div:nth-child(1)>div p:first-letter {
    font-size: 1.625em;
    margin: 0 1rem 0 0;
    color: var(--e-global-color-primary);
    float: none;
    vertical-align: middle;
}

.dot-tabs .e-tabs-content-area-base {
    display: grid !important;
}

.dot-tabs .e-tab-content-base {
    grid-area: 1 / 1;
    display: flex !important;
    opacity: 0;
    transform-origin: center;
    transform: scale(0.8);
}

.dot-tabs .e-tab-content-base.e--selected {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.3s,
        transform 0.3s;
}

/*v4 Main Nav*/
body {
    overflow-x: hidden;
}

header.elementor.elementor-location-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 10;
}

#wpadminbar~header.elementor.elementor-location-header {
    top: 2rem;
}

/* Hide subnavs and content areas by default */
.v4-subnav,
.e-flexbox-base.v4-content-area {
    opacity: 0;
    display: none !important;

    pointer-events: none;
    transition: opacity 0.3s ease;
}




#nav-links {
    opacity: 0;
}

.v4-nav-wrapper {
    height: 70px;
}

/* Show them when JS adds the active class */

body:not(.elementor-page-66547.in-elementor-editor) {
    .v4-sub-navs {
        clip-path: inset(0% 0% 100% 0%);
        transition: clip-path 0.3s;
    }

    .v4-sub-navs:has(.v4-subnav.is-active) {
        clip-path: inset(0% 0% 0% 0%);
        transition: clip-path 0.3s;
    }

    .v4-sub-navs:has(.v4-subnav.is-active) #nav-links {
        animation: fadeIn 0.3s ease forwards;
        animation-fill-mode: both;
    }

    .v4-subnav.is-active {
        opacity: 1;
        display: flex !important;
        pointer-events: auto;
        animation: fadeIn 0.3s ease forwards;
        animation-fill-mode: both;
    }


    .v4-content-area.is-active {
        opacity: 1;
        display: flex !important;
        pointer-events: auto;
        animation: fadeLeft 0.3s ease forwards;
    }

}


body.elementor-page-66547.in-elementor-editor .v4-nav-grid {
    background: white;
    height: 1000px;
}

body.elementor-page-66547.in-elementor-editor .v4-subnav,
body.elementor-page-66547.in-elementor-editor .e-flexbox-base.v4-content-area {
    opacity: 1 !important;
    display: flex !important;
}

 
.v4-main-trigger{
    display:flex;
}



.v4-main-trigger.is-active a {
    color: var(--payactiv-blue);
}

.v4-sub-trigger.is-active {
    color: #1c1b1a;
}



.v4-main-trigger:hover svg,  .v4-main-trigger:focus-visible svg{
    color: var(--payactiv-blue) !important;
}

#nav-one-logo div>img {
    display: none;
v4-testimonials-spotlight
}

#nav-one-logo div>img+hr {
    display: none;
}



#nav-one-logo-b div>img+hr {
    display: none;
}

#nav-one-logo-b div>img~a {
    display: none;

}

#nav-two-logos-one-cta a[href="#"] {

    pointer-events: none;
    opacity: .5;
}

#request-demo-button,
#request-demo-button-mobile {
    display: none;
}

/* Pages that show the "Request a demo" buttons instead of the regular Demo buttons:
   66753 newsroom, 66923 growth-lab, 66629 clock-in-out, 66764 trust-center,
   66769 careers, 67127 carddisclosures, 76665 my-card, 76707 livelihood-index */
body:is(.page-id-66753, .page-id-66923, .page-id-66629, .page-id-66764,
        .page-id-66769, .page-id-67127, .page-id-76665, .page-id-76707) #request-demo-button,
body:is(.page-id-66753, .page-id-66923, .page-id-66629, .page-id-66764,
        .page-id-66769, .page-id-67127, .page-id-76665, .page-id-76707) #request-demo-button-mobile {
    display: block;
}

body:is(.page-id-66753, .page-id-66923, .page-id-66629, .page-id-66764,
        .page-id-66769, .page-id-67127, .page-id-76665, .page-id-76707) #request-demo-button + a,
body:is(.page-id-66753, .page-id-66923, .page-id-66629, .page-id-66764,
        .page-id-66769, .page-id-67127, .page-id-76665, .page-id-76707) #request-demo-button-mobile + p {
    display: none;
}

/* --- MOBILE VIEW --- */
@media (max-width: 1024px) {
    .v4-nav-component {
        height: auto;
    }

    .v4-nav-component[data-mobile-menu="open"] {
        height: 100% !important;
    }

    /* Hide the nav wrapper by default on mobile */
    .v4-nav-wrapper {
        display: none !important;
    }

    /* Show the nav wrapper when the mobile menu is open */

    .v4-nav-component[data-mobile-menu="open"] .v4-nav-wrapper {
        display: flex !important;

        animation: fadeRight 0.3s ease forwards;
    }
         .v4-subnav {
           
            gap: 0 !important;
        }
    


    .v4-subnav>div:nth-child(2) {
        /*position: absolute;*/
        /*top: 1rem;*/
       /* left: 1rem;*/
        background: white;
    }

    .v4-mobile-toggle {
        position: relative;
    }

    .v4-mobile-toggle:after {
        content: "×";
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: 2rem;
        padding: 0 0 0.3rem 0;
        display: grid;
        place-items: center;

        opacity: 0;
        transition: opacity 0.3s;
        color: var(--payactiv-blue);
    }

    .v4-nav-component[data-mobile-menu="open"] .v4-mobile-toggle,
    .v4-nav-component[data-mobile-menu="open"] .v4-mobile-toggle:hover {
        color: transparent;
    }

    .v4-nav-component[data-mobile-menu="open"] .v4-mobile-toggle:after {
        opacity: 1;
    }

    .v4-nav-component[data-mobile-menu="open"] .v4-mobile-toggle:hover:after {
        color: white;
        opacity: 1;
    }

    .v4-mobile-back-btn {
        display: none !important;
    }

    .v4-nav-component[data-active-sub]:not([data-active-sub="none"]) .v4-mobile-back-btn {
        display: block !important;
    }
}

/*Blur overla*/
.v4-nav-component[data-active-main]:not([data-active-main="none"]) .v4-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Allows it to receive clicks to close the menu */
}

.v4-nav-component[data-mobile-menu="open"] .v4-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*Editor*/

body.in-elementor-editor.postid-66547 .v4-subnav,
body.in-elementor-editor.postid-66547 .v4-content-area {
    opacity: 1;
    display: flex !important;
}

body.in-elementor-editor.postid-66547 .v4-sub-navs {
    clip-path:none;
    height: auto;
    transform: scaleY(1);
}

body.in-elementor-editor.postid-66547 .v4-sub-navs .v4-nav-grid .e-con-inner {
    display: flex !important;
    flex-direction: column;
}

body.in-elementor-editor.postid-66547 #nav-links {
    opacity: 1;
}

/*v4 Custom slider*/

.v4-slider-track {
    position: relative;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
}

.v4-slider-track::-webkit-scrollbar {
    display: none;
}

.v4-gradient-overlay-paper::before {
    position: absolute;
    min-width: 100%;
    top: 0;
    left: 0;
    content: "";
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
            #f4f2f0 0%,
            #f4f2f000 calc(0% + 2rem),
            #f4f2f000 calc(100% - 2rem),
            #f4f2f0 100%);
}

.v4-gradient-overlay-white::before {
    position: absolute;
    min-width: 100%;
    top: 0;
    left: 0;
    content: "";
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
            #ffffff 0%,
            #ffffff00 calc(0% + 2rem),
            #ffffff00 calc(100% - 2rem),
            #ffffff 100%);
}

.v4-slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.v4-gradient-overlay-white .v4-slide:first-child,
.v4-gradient-overlay-paper .v4-slide:first-child {
    margin-left: 1rem;
}

.v4-gradient-overlay-white .v4-slide:last-child,
.v4-gradient-overlay-paper .v4-slide:last-child {
    margin-right: 1rem;
}

/*

@media (min-width: 1024px) {

.v4-slider-pop-active .v4-slide.is-active{
   transform: translateY(-.5rem);
}
}*/

.elementor .v4-btn-style {
    justify-content: center;
}

.elementor .v4-btn-style:hover {
    opacity: 1;
}

.v4-dot-template-style {
    color: rgba(0, 0, 0, 0.2) !important;
}

.v4-dot-template-style.is-active {
    color: var(--payactiv-blue) !important;
}

.v4-custom-dot-style {
    cursor: pointer;
    opacity: 0.7;
}

.v4-custom-dot-style:hover p:nth-child(2) {
    color: var(--payactiv-blue);
}

.v4-custom-dot-style.is-active {
    opacity: 1;
}

.v4-custom-dot-style.is-active svg,
.v4-custom-dot-style.is-active svg path {
    fill: var(--payactiv-blue) !important;
}

@media (max-width: 1024px) {
    .v4-custom-dot-style {
        display: none !important;
    }

    .v4-custom-dot-style.is-active {
        display: flex !important;
    }
}

/*v4 Custom Bento*/

.v4-bento-card {
    overflow: hidden;
}

.v4-bento-card .v4-bento-btn-style svg {
    transform: scale(1);
    transition:
        transform 0.3s,
        color 0.3s;
    transition-delay: 0.3s;
}

.v4-bento-card:hover .v4-bento-btn-style svg {
    transform: scale(1.15);
    color: var(--payactiv-blue);
}

.v4-bento-card img {
    transform: scale(1);
    transform-origin: left bottom;
    transition: transform 0.6s;
}

.v4-bento-card:hover img {
    transform: scale(1cu.05);
}

body.in-elementor-editor .v4-modal-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}

body.in-elementor-editor .v4-modal-content {
    display: inline-block;
}

.v4-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.v4-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.v4-modal-overlay.is-open>div {
    animation: fadeUp 0.3s ease forwards;
}

body:not(.in-elementor-editor) .v4-modal-content:not(.is-active) {
    display: none !important;
}

.v4-modal-content.is-active {
    display: flex !important;
}



.bento-blue a {
    background-color: #006AFF0D !important;
}


.bento-purple a {
    background-color: #7849FF0F !important;
}

body:not(.in-elementor-editor) .popover:not(:popover-open) { display: none !important; }

body:not(.in-elementor-editor) .popover:popover-open { display: flex !important; }

body.in-elementor-editor .popover{ position:relative; }

.popover::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}


/*V4 Testimonial Spotlight*/

.v4-testimonial-for-spotlight {

    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(2rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;



}

.in-elementor-editor .v4-testimonial-for-spotlight,
.v4-testimonial-for-spotlight.is-active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.v4-testimonials-spotlight .v4-dot {
    opacity: .5;

}

.v4-testimonials-spotlight .v4-dot.is-active {
    opacity: 1;

}


/* Reverse direction (going to previous) */
.v4-testimonials-spotlight.is-reverse .v4-testimonial-for-spotlight {
    transform: translateX(-2rem);
}

.v4-testimonials-spotlight.is-reverse .v4-testimonial-for-spotlight.is-active {
    transform: translateX(0);
}

body.in-elementor-editor .v4-testimonials-spotlight>div:nth-child(3){
    display:flex;
    flex-direction: column;
    gap:1rem;
    
}


/*V4 mixed media carousel*/

.v4-mixed-track {
    position: relative !important;
    display: block !important;
    height: 420px;
}

.v4-mixed-slide {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    touch-action: pan-y;
    will-change: left, width;
}
.v4-mixed-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transform: scale(1.1);
    transition: .3s transform .3s;
}

.v4-mixed-slide.is-active img {
    transform: scale(1);
    transition: .3s transform .3s;
}

.v4-mixed-slide > div {
    opacity: 0;
    transition: .3s opacity;
}

.v4-mixed-slide.is-active > div {
    opacity: 1;
    transition: .3s opacity .3s;
    position: absolute;
    bottom:0;
    background:#1C1B1A99;
    top:0;
    left:0;
    right:0;
}

.v4-mixed-slide-overlay{
  padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.v4-mixed-slide-title{
    color:#ffffff !important;
}

.v4-mixed-slide-label{
  background: #006AFF;
    color: #1C1B1A;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    font-size: .7rem;
}

.v4-mixed-slide-open{
margin: 0 0 0 auto;
}

.v4-mixed-slide-meta{
display: flex;
gap:2.25rem;
align-items: center;
}

.v4-mixed-slide-date{
      color:#ffffff;
}


.post-66923 .v4-mixed-slide-date{
    display:none;
}

.v4-mixed-content {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(2rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.in-elementor-editor .v4-mixed-content,
.v4-mixed-content.is-active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.in-elementor-editor .v4-mixed-content-wrapper {
    display: flex !important;
    flex-direction: column;
}

.v4-mixed-carousel .elementor-widget-shortcode,
.v4-mixed-carousel .elementor-widget-shortcode .elementor-widget-container,
.v4-mixed-content-wrapper .elementor-shortcode {
    display: contents;
}




/*V4 tabbed container*/


.v4-tabbed-container .v4-tabbed-container-tab svg,.v4-tabbed-container .v4-tabbed-container-tab img{
    opacity:.4;
      transform:scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.v4-tabbed-container .v4-tabbed-container-tab p{
   color:#B2B2B2;
    transition: color 0.3s ease;
       transform:scale(1);
   transition: transform 0.3s ease;
}
.v4-tabbed-container .v4-tabbed-container-tab.active>div>div:first-child p{
   color:#006aff;
   transition: color 0.3s ease;
}

.v4-tabbed-container .v4-tabbed-container-tab.active>div>p{
   color:#1A1A1A;
   transition: color 0.3s ease;
}
.v4-tabbed-container .v4-tabbed-container-tab:hover>div>div:first-child p{
   color:#006aff80;
   transition: color 0.3s ease;
} 



.v4-tabbed-container .v4-tabbed-container-tab:hover>div>p{
   transform:scale(1.05);
   transition: transform 0.3s ease;
} 



.v4-tabbed-container .v4-tabbed-container-tab:hover svg, .v4-tabbed-container .v4-tabbed-container-tab:hover img{
   opacity:1;
   transform:scale(1.05);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.v4-tabbed-container .v4-tabbed-container-tab.active{
 pointer-events: none;
}

.v4-tabbed-container .v4-tabbed-container-tab.active svg, .v4-tabbed-container .v4-tabbed-container-tab.active img{
   opacity:1;
}

.v4-tabbed-container .v4-tabbed-container-tab{
    position:relative;
    
}


.v4-tabbed-container .v4-tabbed-container-tab:first-child:before{
    position: absolute;
    content:"";
    height: 2px;
    width: 100%;
    top: calc(100% - 2px);
    background: linear-gradient(90deg, #C4C3C200 0%, #C4C3C2 30%, #C4C3C2 60%, #C4C3C2 100%);
    z-index:0;
}

.v4-tabbed-container .v4-tabbed-container-tab:before{
  position: absolute;
  content:"";
 height: 2px;
 width: 100%;
  top: calc(100% - 2px);
     background: linear-gradient(90deg, #C4C3C2 0%, #C4C3C2 100%);
    z-index:0;
}

.v4-tabbed-container .v4-tabbed-container-tab:last-child:before{
    position: absolute;
    content:"";
    height: 2px;
    width: 100%;
    top: calc(100% - 2px);
    background: linear-gradient(90deg, #C4C3C2 0%, #C4C3C2 30%, #C4C3C2 60%, #C4C3C200 100%);
    z-index:0;
}
.v4-tabbed-container .v4-tabbed-container-tab>div:nth-child(2){
    background: linear-gradient(90deg, #006aff00 0%, #1274ff 30%, #1576ff 60%, #1576ff00 100%);
    opacity:0;
     transition: opacity 0.3s ease;
     position:absolute;
     bottom:0;
}
.v4-tabbed-container .v4-tabbed-container-tab.active>div:nth-child(2){
    background: linear-gradient(90deg, #006aff00 0%, #1274ff 30%, #1576ff 60%, #1576ff00 100%);
    opacity:1;
     transition: opacity 0.3s ease;
     
}

.v4-tabbed-container .v4-tabbed-container-content{
      opacity: 0;
    transform: translateY(2rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.v4-tabbed-container .v4-tabbed-container-content.active{
     opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}



.v4-tabbed-container .v4-tabbed-container-content{grid-area: 1 / 1;} 
.in-elementor-editor .v4-tabbed-container .v4-tabbed-container-content{grid-area: initial; opacity:1; visibility:visible; transform:translateY(0)} 



@media (max-width: 767px) {
    
    .v4-tabbed-container .v4-tabbed-container-tab:first-child:before{
 
    background: linear-gradient(90deg, #C4C3C2 0%, #C4C3C2 30%, #C4C3C2 60%, #C4C3C2 100%);
  
}
    
    .v4-tabbed-container .v4-tabbed-container-tab:last-child:before{

    background: linear-gradient(90deg, #C4C3C2 0%, #C4C3C2 30%, #C4C3C2 60%, #C4C3C2 100%);
 
}


    .v4-tabbed-container .v4-tabbed-container-tab:first-child{

        margin-left: 20%;
 
}


    .v4-tabbed-container .v4-tabbed-container-tab:last-child{

        margin-right: 20%;
 
}




    .v4-tabbed-container  .v4-dot-template-style.active {
    color: var(--payactiv-blue) !important;
}

}


/*Post Carousel*/
.post-carousel-custom .eael-grid-post-holder {
    border: none;
}

.post-carousel-custom .eael-grid-post-holder-inner {
    display: grid;
    column-gap: 2rem;
    grid-template-areas:
        "a b"
        "a c";
}

.post-carousel-custom .eael-entry-title {
    font-size: 2.4375rem;
}

.post-carousel-custom .eael-grid-post-excerpt p {
    font-size: 1rem;
}

.post-carousel-custom .eael-grid-post-excerpt p a {
    margin-top: 1rem;
    font-size: 1rem;
}

@media (max-width: 767px) {
    .post-carousel-custom .eael-entry-title {
        font-size: 1.625rem;
    }

    .post-carousel-custom .eael-grid-post-holder-inner {
        grid-template-areas:
            "a"
            "b"
            "c";
    }
}

.post-carousel-custom .eael-entry-media {
    grid-area: a;
    border-radius: 1rem;
}

.post-carousel-custom .eael-entry-wrapper {
    grid-area: b;
    align-self: flex-end;
}

/*Post Carousel multiple cards*/

.post-carousel-custom-b .eael-entry-wrapper,
.post-carousel-custom-b .eael-entry-content {
    padding: 0 !important;
}

.post-carousel-custom-b .eael-entry-wrapper {
    margin-bottom: 0.5rem;
}

.post-carousel-custom-b .swiper-autoheight .swiper-slide,
.post-carousel-custom-b .eael-grid-post,
.post-carousel-custom-b .eael-grid-post-holder,
.post-carousel-custom-b .eael-grid-post-holder-inner {
    height: 100%;
}

.post-carousel-custom-b .eael-entry-content,
.post-carousel-custom-b .eael-grid-post-excerpt,
.post-carousel-custom-b .eael-grid-post-excerpt>p {
    flex: 1;
    height: 100%;
}

.post-carousel-custom-b .eael-grid-post-excerpt>p {
    display: flex;
    flex-direction: column;
}

.post-carousel-custom-b .eael-grid-post-excerpt>p>a {
    margin: auto 0 1.5rem 0 !important;
}

.post-carousel-custom-b .eael-grid-post-holder {
    overflow: hidden;
}

/*Isro Hero*/

.shape-spin {
    /*  animation: spin 20s infinite linear;*/
}


/*Home Hero*/

@keyframes hero-image {
    0% {
        transform: translateX(30%);
    }

    100% {
        transform: translateX(0%);
    }
}


#hero-character-col{}

/*logos grid*/

@keyframes logos-grid-row-right {
    0% {
        transform: translateX(30%);
    }

    100% {
        transform: translateX(0%);
    }
}


@keyframes logos-grid-row-left {
    0% {
        transform: translateX(-30%);
    }

    100% {
        transform: translateX(0%);
    }
}


.logos-grid>div:nth-child(odd){
     animation:logos-grid-row-right .6s ease ;
    }
    
.logos-grid>div:nth-child(even){
     animation:logos-grid-row-left .6s ease ;
    }
    
    
    .logos-grid div img{
        transform:scale(1);
          transition: transform .3s ease;
    }
    
        .logos-grid div img:hover{
        transform:scale(1.1);
        transition: transform .3s ease;
    }


/**careers page*/
#careers-differentiators>div>div>div>div:nth-child(6){
   display:none;
}



/*/help*/

#launch-chat-button:before{
    content:"";
    display: inline-block;
    height: 24px;
    width: 24px;
    background:url(https://payactiv.com/wp-content/uploads/2026/08/chat-bubbles.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin-right:.5rem;
    
}

/*Site Map*/
.elementor-widget-sitemap,
.elementor-widget-sitemap * {
    width: 1140px;
}


/*Next page nav*/
.next-page-nav-wrapper {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity .5s, transform .5s;
}

.next-page-nav-wrapper.visible,
body.in-elementor-editor .next-page-nav-wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .5s, transform .5s;
}



/*Pure CSS Carousel*/

.carousel{
       position: relative;
     anchor-name: --carousel;
      scroll-marker-group: after;
      scroll-behavior: smooth;
}

.carouse:not(.particle-stream) > .e-con {
  scroll-snap-align: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel:not(.particle-stream) > .e-con.is-active {
  opacity: 1;
  transform: scale(1);
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel::scroll-marker-group {
 position:absolute;
  position-anchor: --carousel;
  bottom: -2rem;
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap:.625rem;
 
 
}



.carousel > .e-con::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 10px;
}

.carousel > .e-con::scroll-marker:target-before {
    width: 16px;
  height: 16px;border:none;
  background-color: #E5E5E5;
}


.carousel > .e-con::scroll-marker:target-current {
      width: 16px;
  height: 16px;
  background-color: var(--payactiv-blue);
  border:none;
  transition: all 0.7s;
}

.carousel > .e-con::scroll-marker:target-after {
    width: 16px;
  height: 16px;border:none;
  background-color: #E5E5E5;
}




.carousel::scroll-button(left),.carousel::scroll-button(right)  {


  position-anchor: --carousel;
 position: absolute;
 bottom:-2.5rem;
  border: 0;
    border-radius:100px;
  height: 32px;
  width:32px;
  display:grid;
  place-content: center;

  font-size: .85rem;
  background: var(--payactiv-blue);
color:white;
 
  cursor: pointer;
}

.carousel::scroll-button(left) {
  content: "◄";
  margin: 0 16rem 0 0;
}

.carousel::scroll-button(right) {
  content: "►";
  margin: 0 0 0 16rem ;
}
/* Hide Particle Stream carousel's nav buttons + dot markers by default (desktop) */
  .carousel.particle-stream::scroll-button(left),
  .carousel.particle-stream::scroll-button(right) {
    display: none;
  }

  .carousel.particle-stream::scroll-marker-group {
    display: none;
  }

  /* Show them again only on narrow screens */
  @media (max-width: 767px) {
    .carousel.particle-stream::scroll-button(left),
    .carousel.particle-stream::scroll-button(right) {
      display: grid; /* matches original display:grid + place-content:center */
    }

    .carousel.particle-stream::scroll-marker-group {
      display: flex; /* matches original display:flex */
    }
  }

body.in-elementor-editor .carousel > .e-con {
    opacity: 1;
}



/*growth lab cards*/

.growth-lab-card-tab{
    cursor: pointer;
    
}

.growth-lab-card-tab:hover{
    box-shadow: 2px 2px 16px 0 #0000001a;

}
.growth-lab-card-tab>div:nth-child(2) img{
    transform: scale(1);
    transition: .3s transform;
    

}


.growth-lab-card-tab:hover>div:nth-child(2) img{
    transform: scale(1.1);
    transition: .3s transform;
    

}


/*FAQs*/
.post-details-toggle summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* Hides marker */
  cursor: pointer;
}
.post-details-toggle summary::-webkit-details-marker { display: none; }


[data-element_type="e-collection-loop-item"]:has(.post-details-toggle) {
flex-direction: column !important;
}

/* Create a custom chevron */
.post-details-toggle summary::after {
  content: url('https://payactiv.com/wp-content/uploads/2026/09/chevron-down-black.svg');
  transition: transform 0.2s ease;
}

/* Rotate the chevron when open */
 details[open].post-details-toggle summary::after {
  transform: rotate(180deg);
}

/* 1. Target the native container holding the hidden content */
details.post-details-toggle::details-content {
  opacity: 0;
  block-size: 0;
  overflow: hidden;
  
  /* Transition both the size and the discrete browser visibility property */
  transition-property: block-size, opacity, content-visibility;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  
  /* CRITICAL: Allows discrete properties like content-visibility to animate */
  transition-behavior: allow-discrete;
}

/* 2. Define the styles when the details element is open */
details[open].post-details-toggle::details-content {
  opacity: 1;
  
  /* Fallback for older browser versions */
  block-size: auto; 
  
  /* Modern CSS function to safely compute and animate to auto size */
  block-size: calc-size(auto, size); 
}



/*Main Hero*/
 .main-hero-character,
  .main-hero-bg {
    opacity: 0;
    transition: opacity .6s ease;
    /* position:absolute; inset:0; — once you've confirmed your stacking is set up this way */
  }
  .main-hero-character.active,
  .main-hero-bg.active {
    opacity: 1;
  }



.main-hero-words>span{
    opacity:0;
}
.main-hero-words>.active{
    opacity:1;
}

  .main-hero-cursor {
    display: inline-block;
    margin-left: 2px;
    animation: main-hero-blink 1s step-end infinite;
  }
  @keyframes main-hero-blink {
    50% { opacity: 0; }
  }

 .main-hero-wrapper picture:has(.main-hero-character) {
    grid-area: stack;   /* same value you used on .main-hero-character */
    display: block;
    width: 100%;
    height: 100%;
  }


body.in-elementor-editor  .main-hero-character,
body.in-elementor-editor   .main-hero-bg {
    opacity: 1;
}



/*UKG*/
.ukg-button-emphasis{
    background-position:  0% 100% !important;
    background-size:0 200% !important;
    background-repeat: no-repeat !important;
    transition:background-size 500ms ease;
}

/*
.ukg-button-emphasis:hover{
    background-size: calc(200% + 6.25rem) 100% !important;
transition:background-size 500ms ease;
}*/



@media (max-width: 1024px) {
    root{
            --vertical-standard-desktop: 7.5rem;
    --vertical-half-standard-desktop: 3.75rem;
    
    --vertical-compact-desktop: 5rem;
    --vertical-half-compact-desktop: 2.5rem;
    
    
    --sides-desktop: 2.5rem;
    
    }


   
}


@media (max-width: 767px) {
    
    root{
             --vertical-standard-desktop: 6rem;
    --vertical-half-standard-desktop: 3rem;
    
    --vertical-compact-desktop: 3rem;
    --vertical-half-compact-desktop: 1.5rem;
    
    
    --sides-desktop: 1.5rem;
    }

    
}



@keyframes bento-img-in {
  from { opacity: 0; translate: 0 5rem; }
  to   { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Track each card's position in the viewport... */
    .v4-bento-card {
      view-timeline: --bento-card block;
    }
    /* ...and play the image animation as the card enters */
    .v4-bento-card img {
      animation: bento-img-in linear both;
      animation-timeline: --bento-card;
      animation-range:20% 50%;
    }
  }
}


/* Flip card: first child is the front; the rest is the back, revealed on hover */
.elementor .e-con.flip-card-wrapper {
  display: grid;            /* stack both faces in the same spot */
  perspective: 1500px;      /* gives the flip its 3D depth */
}

.elementor .e-con.flip-card-wrapper > * {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Back starts turned away */
.elementor .e-con.flip-card-wrapper > :not(:first-child) {
  transform: rotateY(180deg);
}

/* On hover (or keyboard focus inside the card): front turns away, back turns in */
.elementor .e-con.flip-card-wrapper:hover > :first-child,
.elementor .e-con.flip-card-wrapper:focus-within > :first-child {
  transform: rotateY(-180deg);
}
.elementor .e-con.flip-card-wrapper:hover > :not(:first-child),
.elementor .e-con.flip-card-wrapper:focus-within > :not(:first-child) {
  transform: rotateY(0deg);
}

/* Reduced motion: crossfade instead of flipping */
@media (prefers-reduced-motion: reduce) {
  .elementor .e-con.flip-card-wrapper > * {
    transform: none !important;
    transition: opacity 0.3s;
  }
  .elementor .e-con.flip-card-wrapper > :not(:first-child) { opacity: 0; }
  .elementor .e-con.flip-card-wrapper:hover > :first-child,
  .elementor .e-con.flip-card-wrapper:focus-within > :first-child { opacity: 0; }
  .elementor .e-con.flip-card-wrapper:hover > :not(:first-child),
  .elementor .e-con.flip-card-wrapper:focus-within > :not(:first-child) { opacity: 1; }
}


/* Make all flip cards in a row as tall as the tallest one */
.elementor .e-con:has(> .flip-card-wrapper) {
  align-items: stretch;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Circular';
	font-display: auto;
	src: url('https://payactiv.com/wp-content/uploads/2026/03/CircularLLVar-wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */