1<style>
 2/* Keyframes for slide-in and slide-out animations */
 3@keyframes slideInLeft {
 4    from {
 5        transform: translateX(-100%);
 6    }
 7    to {
 8        transform: translateX(0);
 9    }
10}
11 
12@keyframes slideOutLeft {
13    from {
14        transform: translateX(0);
15    }
16    to {
17        transform: translateX(-100%);
18    }
19}
20 
21/* Custom styles to manage Off Canvas visibility */
22.e-off-canvas-hidden {
23    animation: slideOutLeft 1s forwards; /* Adjusted duration */
24}
25 
26.e-off-canvas-visible {
27    animation: slideInLeft 0.5s forwards;
28}
29 
30.e-off-canvas-overlay-hidden {
31    display: none !important;
32}
33</style>
34<script>
35jQuery(function($){
36    // Function to hide the Off Canvas and overlay
37    function hideOffCanvas() {
38        $('[class^="e-off-canvas"]').removeClass('e-off-canvas-visible').addClass('e-off-canvas-hidden');
39        $('.e-off-canvas__overlay').addClass('e-off-canvas-overlay-hidden');
40        $('body').removeClass('e-off-canvas__no-scroll');
41    }
42 
43    // Function to show the Off Canvas and overlay
44    function showOffCanvas() {
45        $('[class^="e-off-canvas"]').removeClass('e-off-canvas-hidden').addClass('e-off-canvas-visible');
46        $('.e-off-canvas__overlay').removeClass('e-off-canvas-overlay-hidden');
47        $('body').addClass('e-off-canvas__no-scroll');
48    }
49 
50    // Handle link clicks inside the Off Canvas
51    $(document).on('click', '[class^="e-off-canvas"] a', function(event){
52        var target = $(this).attr("href");
53 
54        // Check if the link is an action to close the Off Canvas
55        if (target.includes('elementor-action%3Aaction%3Doff_canvas%3Aclose')) {
56            event.preventDefault();
57            hideOffCanvas();
58            return;
59        }
60 
61        var split_url = target.split('#');
62 
63        // Check if the link is an anchor link within the same page
64        if (split_url.length > 1 && (window.location.pathname == split_url[0] || split_url[0] == '')){
65            event.preventDefault();
66            $('html, body').animate({
67                scrollTop: $('#'+split_url[1]).offset().top
68            }, 1000);
69            hideOffCanvas();
70        } else {
71            hideOffCanvas();
72        }
73    });
74 
75    // Handle the Off Canvas toggle button click
76    $(document).on('click', '.off-canvas-toggle-button', function(event){
77        showOffCanvas(); // Show the Off Canvas and overlay
78    });
79});
80</script>