.elementor-813 .elementor-element.elementor-element-23e2259{--display:flex;--min-height:250px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-813 .elementor-element.elementor-element-03f2cf8{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-813 .elementor-element.elementor-element-03f2cf8:not(.elementor-motion-effects-element-type-background), .elementor-813 .elementor-element.elementor-element-03f2cf8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-813 .elementor-element.elementor-element-3858653{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}/* Start custom CSS for button, class: .elementor-element-391ba0e *//* --- Text Swap Button CSS --- */

/* 1. Target the button and set up the animation container */
.text-swap-btn a.elementor-button {
    position: relative;
    overflow: hidden; /* CRUCIAL: Hides the text outside the button area */
    display: block; /* Ensures it acts like a block container */
    padding-top: 0;
    padding-bottom: 0; /* Remove default padding for better control */
    height: auto; /* Allow height to adjust */
}

/* 2. Style and position the original (front) text */
.text-swap-btn span.elementor-button-content-wrapper {
    position: relative;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1); /* Custom smooth transition */
    padding: 15px 30px; /* Re-apply the desired padding here */
}

/* 3. Create the back text using ::before */
.text-swap-btn a.elementor-button::before {
    content: "BACK"; /* *** YOUR BACK TEXT GOES HERE *** */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Ensure the back text inherits the look of the front text */
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: inherit; 
    font-weight: inherit;
    line-height: 1; /* Match the line-height for perfect vertical alignment */
    
    /* Initially position the back text above the front text (off-screen) */
    transform: translateY(-100%); 
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
    
    /* Optional: Set a different text/background color for the back text */
    /* color: #FFFFFF; */
    /* background-color: #555555; */
}

/* 4. Define the hover state */
.text-swap-btn a.elementor-button:hover span.elementor-button-content-wrapper {
    /* Move the front text down and out of view on hover */
    transform: translateY(100%);
}

.text-swap-btn a.elementor-button:hover::before {
    /* Slide the back text into the center of the button on hover */
    transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3368851 */..elementor-813 .elementor-element.elementor-element-3368851 {
    position: relative;
    overflow: hidden;
    border: 2px solid #4A90E2; /* normal outline color */
    transition: border-color 0.3s ease;
}

..elementor-813 .elementor-element.elementor-element-3368851:hover {
    border-color: #007BFF; /* intensifies on hover */
}

/* animated outline */
..elementor-813 .elementor-element.elementor-element-3368851::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #007BFF;
    border-radius: inherit;
    pointer-events: none;

    /* Make animation visible */
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.3s ease, transform 0.3s ease;

    /* animation setup */
    animation: chaseBorder 1.2s linear infinite;
}

..elementor-813 .elementor-element.elementor-element-3368851:hover::before {
    opacity: 1;
    transform: scale(1);
}

@keyframes chaseBorder {
    0% {
        clip-path: inset(0 100% 100% 0);   /* start at top-left */
    }
    25% {
        clip-path: inset(0 0 100% 0);      /* top side */
    }
    50% {
        clip-path: inset(0 0 0 0);         /* full border */
    }
    75% {
        clip-path: inset(100% 0 0 0);      /* bottom-right */
    }
    100% {
        clip-path: inset(0 100% 100% 0);   /* back to start */
    }
}/* End custom CSS */