.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Color-2:#547DBF; --Color-3:#EA4435; --Color-4:#F9BC15; --Color-1:#379C51; }
/* Start custom CSS *//* 1. Initial State: Hide the image while it has the Elementor 'invisible' class */
.scan-reveal.elementor-invisible img {
    opacity: 0;
}

/* 2. Animation State: Trigger when Elementor adds the 'animated' class */
.scan-reveal.animated img {
    opacity: 1; /* Ensure it's not hidden by opacity */
    animation: lineScanBuild 1.5s cubic-bezier(0.5, 0, 0.2, 1) forwards;
    
    /* Use -webkit prefix for Safari/Chrome compatibility */
    -webkit-mask-image: linear-gradient(to bottom, 
        black 0%, 
        black var(--scan-percent, 0%), 
        rgba(255,255,255,0.5) var(--scan-percent, 0%), 
        transparent calc(var(--scan-percent, 0%) + 5%)
    );
    mask-image: linear-gradient(to bottom, 
        black 0%, 
        black var(--scan-percent, 0%), 
        rgba(255,255,255,0.5) var(--scan-percent, 0%), 
        transparent calc(var(--scan-percent, 0%) + 5%)
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 3. The Animation Logic */
@keyframes lineScanBuild {
    0% {
        --scan-percent: 0%;
        filter: brightness(2) contrast(1.5);
        transform: scale(0.98);
    }
    100% {
        --scan-percent: 100%;
        filter: brightness(1) contrast(1);
        transform: scale(1);
    }
}

/* 4. CRITICAL: Register the variable so CSS knows how to animate 0% to 100% */
@property --scan-percent {
  syntax: '<percentage>';
  inherits: true; /* Changed to true to ensure it reaches the img child */
  initial-value: 0%;
}/* End custom CSS */