.elementor-2237 .elementor-element.elementor-element-7f2a2de > .elementor-background-overlay{background-color:#000000;opacity:0.73;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2237 .elementor-element.elementor-element-7f2a2de > .elementor-container{min-height:728px;}.elementor-2237 .elementor-element.elementor-element-7f2a2de{overflow:hidden;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2237 .elementor-element.elementor-element-0a4c5ef > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:5% 0% 0% 8%;--e-column-margin-right:0%;--e-column-margin-left:8%;padding:0px 0px 0px 0px;}.elementor-2237 .elementor-element.elementor-element-0a4c5ef > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2237 .elementor-element.elementor-element-dac29ea > .elementor-container{min-height:666px;}.elementor-2237 .elementor-element.elementor-element-dac29ea{overflow:hidden;}.elementor-2237 .elementor-element.elementor-element-b862c2b:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-2237 .elementor-element.elementor-element-b862c2b > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://keerthanampradeep.com/wp-content/uploads/2024/11/freepik__create-an-avatar-of-a-witch-with-a-magical-wand-an__5381-removebg-preview.png");background-repeat:no-repeat;}.elementor-2237 .elementor-element.elementor-element-b862c2b > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0% 0% 0% 0%;--e-column-margin-right:0%;--e-column-margin-left:0%;padding:0% 0% 0% 0%;}.elementor-2237 .elementor-element.elementor-element-b862c2b > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2237 .elementor-element.elementor-element-a2fb19b > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:18% 23% 0% -8%;--e-column-margin-right:23%;--e-column-margin-left:-8%;padding:0% 0% 0% 0%;}.elementor-2237 .elementor-element.elementor-element-a2fb19b > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.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-2237 .elementor-element.elementor-element-59cd66a{text-align:center;}.elementor-2237 .elementor-element.elementor-element-59cd66a .elementor-heading-title{font-family:"Rochester", Sans-serif;font-size:50px;font-weight:800;letter-spacing:3.4px;color:#2ECBD2;}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-2237 .elementor-element.elementor-element-2363c56 .elementor-headline{text-align:center;font-family:"Sansita Swashed", Sans-serif;font-size:35px;font-weight:800;letter-spacing:6.1px;}.elementor-2237 .elementor-element.elementor-element-2363c56 .elementor-headline-plain-text{color:#FFFFFF;}.elementor-2237 .elementor-element.elementor-element-2363c56{--dynamic-text-color:#FFFFFF;}.elementor-2237 .elementor-element.elementor-element-2363c56 .elementor-headline-dynamic-text{font-family:"Sansita Swashed", Sans-serif;font-weight:800;}.elementor-2237 .elementor-element.elementor-element-d90d169 > .elementor-widget-container{margin:2% 0% 0% 0%;}.elementor-2237 .elementor-element.elementor-element-d90d169{text-align:center;}.elementor-2237 .elementor-element.elementor-element-d90d169 .elementor-heading-title{font-family:"Rouge Script", Sans-serif;font-weight:600;letter-spacing:1.8px;word-spacing:0px;color:#A3F7FB;}.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-2237 .elementor-element.elementor-element-bef10c1 > .elementor-widget-container{margin:0% 0% 0% 0%;}@media(min-width:768px){.elementor-2237 .elementor-element.elementor-element-b862c2b{width:50%;}.elementor-2237 .elementor-element.elementor-element-a2fb19b{width:50%;}}/* Start custom CSS for column, class: .elementor-element-b862c2b */<!-- Container for the animated figure -->
<div class="animated-figure-container">
    <!-- Animated figure (replace with your actual image or GIF) -->
    <img src="http://keerthanampradeep.com/wp-content/uploads/2024/11/freepik__create-an-avatar-of-a-witch-with-a-magical-wand-an__5381-removebg-preview.png" alt="Arab in Kandora enjoying desert safari" class="animated-figure" />
</div>

<!-- Add this CSS code to style and animate -->
<style>
    .animated-figure-container {
        width: 100%;
        text-align: center;
        padding: 20px;
        position: relative;
        background-color: #f4f4f4; /* Optional background color */
    }

    .animated-figure {
        max-width: 100%; /* Make sure the image fits within container */
        height: auto;
        animation: desertSafariAnimation 8s ease-in-out infinite; /* Apply the animation */
    }

    @keyframes desertSafariAnimation {
        0% {
            transform: translateX(-50px); /* Start position */
            opacity: 0;
        }
        50% {
            transform: translateX(50px); /* Move to the right */
            opacity: 1;
        }
        100% {
            transform: translateX(-50px); /* Return to the left */
            opacity: 0;
        }
    }
</style>

<!-- Optional JavaScript to enhance interaction -->
<script>
    // You can add JavaScript to trigger events, for example, triggering animation on scroll
    window.addEventListener('scroll', function() {
        var figure = document.querySelector('.animated-figure');
        var position = figure.getBoundingClientRect().top;
        var windowHeight = window.innerHeight;
        
        if (position < windowHeight) {
            figure.classList.add('animate');
        } else {
            figure.classList.remove('animate');
        }
    });
</script>/* End custom CSS */