Horizontal Scroll

with A dream to Create Amazing Design- Based Solutions | 
				
					put class "container" to parent section
Put class "panel" to child containers
Put the css code in the custom css of parent containers
Add The js code in the page or use custom code plugins.
				
			
				
					/*Remove this CSS rule after you're finished building the page*/

.container{
    overflow-x: auto;
    overflow: auto;
}   
  .container{
      transition: none;
      overflow-x: hidden;
}  
html, body{
    overflow-x: auto!important   
}       
.container::-webkit-scrollbar {
    display: none; /* Hides scrollbar in webkit browsers like Chrome and Safari */
}
 
/* panel is the CSS class name I added to the children (flex item*/
.panel{
    transition: none!important;
    min-width: 100vw!important;
}       
		   
   .elementor-134 .elementor-element.elementor-element-8182cd5 {
    --display: flex;
    --flex-direction: brown;
    --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: flex-start;
    --align-items: flex-start;
    --gap: 0px 0px;
    --background-transition: 0.3s;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}      
 

				
			
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>



   <script>
    document.addEventListener("DOMContentLoaded", function () {
        gsap.registerPlugin(ScrollTrigger);

        let sections = gsap.utils.toArray(".panel");

        let mm = gsap.matchMedia();

        mm.add("(min-width: 800px)", () => {
            gsap.to(sections, {
                xPercent: -100 * (sections.length - 1),
                ease: "none",
                scrollTrigger: {
                    trigger: ".container",
                    pin: true,
                    scrub: 1,
                    snap: 1 / (sections.length - 1),
                    end: () => "+=" + document.querySelector(".container").offsetWidth
                }
            });
        });
    });
</script>