.elementor-15 .elementor-element.elementor-element-9d08d99{--display:flex;--min-height:100vh;}.elementor-15 .elementor-element.elementor-element-9d08d99:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-9d08d99 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D3D3D3;}.elementor-15 .elementor-element.elementor-element-fd044a5{--display:flex;--min-height:80vh;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-15 .elementor-element.elementor-element-f82ec58{--display:flex;--position:absolute;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;top:0px;}body:not(.rtl) .elementor-15 .elementor-element.elementor-element-f82ec58{left:0px;}body.rtl .elementor-15 .elementor-element.elementor-element-f82ec58{right:0px;}.elementor-15 .elementor-element.elementor-element-9faaa4d{--display:flex;--min-height:193px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-2544015 .elementor-heading-title{font-family:"Antonio", Sans-serif;font-size:32px;font-weight:400;color:#000000;}.elementor-15 .elementor-element.elementor-element-bbd6927 .elementor-heading-title{font-family:"Antonio", Sans-serif;font-size:88px;font-weight:600;text-transform:uppercase;color:#000000;}.elementor-15 .elementor-element.elementor-element-1a86c46{--display:flex;}.elementor-15 .elementor-element.elementor-element-050cf17{--display:flex;--min-height:357px;--justify-content:flex-end;}.elementor-15 .elementor-element.elementor-element-dc82ed9 .elementor-heading-title{font-family:"Antonio", Sans-serif;font-size:88px;font-weight:600;text-transform:uppercase;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-c440c45{text-align:end;}.elementor-15 .elementor-element.elementor-element-18dc11e{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;}.elementor-15 .elementor-element.elementor-element-dd25c9c{--display:flex;}.elementor-15 .elementor-element.elementor-element-cd287a0 .elementor-heading-title{font-family:"Antonio", Sans-serif;font-size:52px;font-weight:600;text-transform:uppercase;color:#000000;}.elementor-15 .elementor-element.elementor-element-86e2569{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15 .elementor-element.elementor-element-f251670{--display:flex;}.elementor-15 .elementor-element.elementor-element-77818c2{--display:flex;}.elementor-15 .elementor-element.elementor-element-d3ce6ca{--display:flex;}.elementor-15 .elementor-element.elementor-element-b7b34ce{--display:flex;}.elementor-15 .elementor-element.elementor-element-9117675{--n-accordion-title-font-size:32px;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-15 .elementor-element.elementor-element-9117675 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 2px 0px;border-color:#B3B3B3;}.elementor-15 .elementor-element.elementor-element-9117675 > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 2px 0px;border-color:#86CEFA;}:where( .elementor-15 .elementor-element.elementor-element-9117675 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Antonio", Sans-serif;font-weight:400;text-transform:uppercase;}.elementor-15 .elementor-element.elementor-element-1b7f370{--display:flex;}.elementor-15 .elementor-element.elementor-element-b96532e{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;}.elementor-15 .elementor-element.elementor-element-b7009c8{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-15 .elementor-element.elementor-element-15e8f03 .elementor-heading-title{font-family:"Antonio", Sans-serif;font-size:52px;font-weight:600;text-transform:uppercase;color:#000000;}.elementor-15 .elementor-element.elementor-element-2f43511{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15 .elementor-element.elementor-element-2e4f3e1{--display:flex;}.elementor-15 .elementor-element.elementor-element-d87900b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-15 .elementor-element.elementor-element-c844763 .elementor-counter-title{justify-content:start;font-family:"Open Sans", Sans-serif;font-weight:700;}.elementor-15 .elementor-element.elementor-element-c844763 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#5E67E6;font-family:"Antonio", Sans-serif;font-weight:600;}.elementor-15 .elementor-element.elementor-element-52fd72a .elementor-counter-title{justify-content:start;font-family:"Open Sans", Sans-serif;font-weight:700;}.elementor-15 .elementor-element.elementor-element-52fd72a .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#5E67E6;font-family:"Antonio", Sans-serif;font-weight:600;}.elementor-15 .elementor-element.elementor-element-dd72949 .elementor-counter-title{justify-content:start;font-family:"Open Sans", Sans-serif;font-weight:700;}.elementor-15 .elementor-element.elementor-element-dd72949 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#5E67E6;font-family:"Antonio", Sans-serif;font-weight:600;}.elementor-15 .elementor-element.elementor-element-aef89d5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-9d3e5ba{--display:flex;}.elementor-15 .elementor-element.elementor-element-92f4b83 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-15 .elementor-element.elementor-element-534fbed .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:300;color:#7E7E7E;}.elementor-15 .elementor-element.elementor-element-534fbed .elementor-heading-title a:hover, .elementor-15 .elementor-element.elementor-element-534fbed .elementor-heading-title a:focus{color:#5E67E6;}.elementor-15 .elementor-element.elementor-element-2d6a54d{--display:flex;}.elementor-15 .elementor-element.elementor-element-d73f5d2 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-15 .elementor-element.elementor-element-0eb5dde .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:300;color:#7E7E7E;}.elementor-15 .elementor-element.elementor-element-0eb5dde .elementor-heading-title a:hover, .elementor-15 .elementor-element.elementor-element-0eb5dde .elementor-heading-title a:focus{color:#5E67E6;}.elementor-15 .elementor-element.elementor-element-c6635c8{--display:flex;}.elementor-15 .elementor-element.elementor-element-7191021{--grid-template-columns:repeat(0, auto);text-align:left;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-15 .elementor-element.elementor-element-7191021 .elementor-social-icon{background-color:#00000000;}.elementor-15 .elementor-element.elementor-element-7191021 .elementor-social-icon i{color:#000000;}.elementor-15 .elementor-element.elementor-element-7191021 .elementor-social-icon svg{fill:#000000;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-15 .elementor-element.elementor-element-0ad6dff .elementor-button{font-family:"Antonio", Sans-serif;font-size:25px;font-weight:500;text-transform:uppercase;fill:#5E67E6;color:#5E67E6;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;padding:10px 30px 10px 30px;}.elementor-15 .elementor-element.elementor-element-ad6a61b{--display:flex;--min-height:100vh;}.elementor-15 .elementor-element.elementor-element-f74ed3b{--display:flex;--min-height:492px;--z-index:5;}.elementor-15 .elementor-element.elementor-element-f74ed3b:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-f74ed3b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFC9C9;}.elementor-15 .elementor-element.elementor-element-5d618f6{--display:flex;--min-height:492px;--z-index:10;}.elementor-15 .elementor-element.elementor-element-5d618f6:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-5d618f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#CF7878;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-b7009c8{--width:59%;}}/* Start custom CSS for html, class: .elementor-element-fa475f5 *//* Target your SVG element. 
          I'm using its ID 'Full_Body' to give it a size. 
        */
        #Full_Body {
            width: 100%;
            height: auto;
            /* Just for this demo */
            background: #004B45;
            object-fit: cover;
          
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        /* This is the secret to smooth movement!
          We target the pupil groups by their IDs.
        */
        #Left_Eye_Ball,
        #Right_Eye_Ball {
            transition: transform 0.1s linear;
        }/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-0ad6dff *//* Elementor Button Hover Effect - Bottom Left Circle Fill 
   Class Name: .circle-fill-btn
*/

/* 1. Button Container Setup */
.circle-fill-btn .elementor-button {
    position: relative;
    overflow: hidden; /* Clips the expanding circle */
    background-color: transparent !important; /* Ensures no background blocks the effect */
    z-index: 1; /* Keeps text above the circle */
    transition: all 0.4s ease-in-out;
}

/* 2. The Expanding Circle (Pseudo-element) */
.circle-fill-btn .elementor-button::before {
    content: '';
    position: absolute;
    /* Position: Bottom Left */
    top: 100%;
    left: 0;
    
    width: 100%; 
    height: 0;
    padding-bottom: 100%; /* Creates a perfect aspect ratio square */
    border-radius: 50%;
    
    /* DYNAMIC COLOR: Inherits the 'Text Color' set in Elementor's 'Normal' tab */
    background-color: currentColor; 
    
    /* Start small and centered on the corner */
    transform: translate(-50%, -50%) scale(0); 
    transform-origin: center;
    
    /* Animation speed */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1; /* Behind the text */
}

/* 3. Hover State - Expand the Circle */
.circle-fill-btn .elementor-button:hover::before {
    transform: translate(-50%, -50%) scale(2.5); /* Scale up to fill button */
}

/* 4. Text Color Change */
/* We target the inner elements to change text to white without breaking the 'currentColor' inheritance of the circle */
.circle-fill-btn .elementor-button:hover .elementor-button-content-wrapper,
.circle-fill-btn .elementor-button:hover .elementor-button-text,
.circle-fill-btn .elementor-button:hover .elementor-button-icon {
    color: #ffffff !important; /* Change this hex if you want a different text hover color */
    fill: #ffffff !important; /* For SVG icons */
    transition: color 0.3s ease-in-out;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f74ed3b *//* Animation Keyframes */
@keyframes shrink-card {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 1;
    }
}

/* The Class to Apply */
.scroll-shrink-card {
    /* Use the standard syntax for modern browsers */
    /*animation-timeline: view();*/
    
    /* Range Logic:
       - Starts shrinking when element is at 30% viewport height
       - Finishes shrinking at 70% viewport height
    */
    /*animation-range: cover 20% cover 100%;*/
    
    /*animation-name: shrink-card;*/
    /*animation-timing-function: linear;*/
    /*animation-fill-mode: both;*/
    
    
    /* Sticky positioning */
    position: sticky;
    top: 20%; /* Adjust distance from top */
    z-index: 10; /* Ensure it stays above other content if needed */
}/* End custom CSS */
/* Start custom CSS *//* Load Phosphor Icons (Optional, if not already loaded) */
@import url("[https://unpkg.com/@phosphor-icons/web](https://unpkg.com/@phosphor-icons/web)");

/* --- 1. Animation Keyframes --- */
@keyframes flip-and-move {
    0% { transform: perspective(1000px) translateX(0) rotateY(0deg) rotateZ(0deg); }
    30% { transform: perspective(1000px) translateX(0) rotateY(0deg) rotateZ(0deg); }
    70% { transform: perspective(1000px) translateX(30vw) rotateY(180deg) rotateZ(6deg); }
    100% { transform: perspective(1000px) translateX(30vw) rotateY(360deg) rotateZ(12deg); }
}

@keyframes hide-past-70 {
    0%, 65% { opacity: 1; transform: translateY(50%) scale(1); }
    70%, 100% { opacity: 0; transform: translateY(50%) scale(0); }
}

@keyframes specific-wave-logic {
    0%, 20% { transform: rotate(0deg); transform: translateY(55px); }
    20%, 30% { transform: rotate(-20deg); }
    30%, 40% { transform: rotate(20deg); }/* Simplified for brevity */
    73% { transform: rotate(0deg); }
    80%, 100% { transform: translateY(-55px);  }
}

@keyframes text-slide-logic {
    0%, 75% { transform: translateY(55px); opacity: 0; }
    80%, 100% { transform: translateY(0); opacity: 1; }
}

/* --- 2. Structural CSS --- */
/* The Track - Elementor Class Reference */
.track-container {
    view-timeline-name: --scroll-track;
    view-timeline-axis: block;
}

/* The Sticky Scene - Manually handled to fix Elementor overflow issues */
.sticky-scene {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

/* The Scene */
.scene {
    width: 320px; /* Set your desired card width */
    height: 384px; /* Set your desired card height */
    position: relative;
}

/* The Card */
.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: flip-and-move linear both;
    animation-timeline: --scroll-track;
    animation-range: entry 0% exit 0%;
}

/* Faces */
.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    
    justify-content: center;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.card__face--front { background: #00564f; z-index: 2; }
.card__face--back { 
    background: linear-gradient(135deg, #4f46e5, #7c3aed); 
    transform: rotateY(180deg); 
    color: white; 
}

/* Welcomer Styles */
.welcomer-container {
    position: absolute;
    bottom: 0;
    left: 24px;
    transform: translateY(50%);
    z-index: 10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: hide-past-70 linear both;
    animation-timeline: --scroll-track;
    animation-range: entry 0% exit 0%;
}

.welcomer-circle {
    width: 80px;
    height: 80px;
    background-color: #4f46e5;
    border-radius: 50%;
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.content-hi {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    animation: text-slide-logic 6s infinite ease-in-out;
}

.content-hand {
    position: absolute;
    color: white;
    font-size: 2rem;
    transform-origin: 70% 80%;
    animation: specific-wave-logic 6s infinite ease-in-out;
}

/* Tailwind-like utilities if you aren't using Tailwind in WP */
.front-content, .back-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Behind text */
}/* End custom CSS */