.elementor-909 .elementor-element.elementor-element-babd83d{--display:flex;--min-height:34vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-909 .elementor-element.elementor-element-3a92f13{--display:flex;--min-height:100vh;--background-transition:0.3s;}@media(max-width:767px){.elementor-909 .elementor-element.elementor-element-3a92f13{--width:100%;--min-height:10vh;}}@media(min-width:768px){.elementor-909 .elementor-element.elementor-element-babd83d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-babd83d */.wave-container {
    width: 100%;
    height: 20vh; /* Set height relative to viewport height for responsiveness */
    overflow: hidden;
    position: relative; /* Ensure ::before is positioned correctly */
}

.wave {
    position: absolute; /* Ensure the wave is positioned correctly */
    top: 75vh; /* Position the wave within the container */
    width: 200%; /* Double the container width for a seamless loop */
    height: 5%; /* Smaller height of the wave */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23EED441;stop-opacity:1" /><stop offset="100%" style="stop-color:%23F3D216;stop-opacity:1" /></linearGradient></defs><path fill="url(%23grad1)" fill-opacity="1" d="M0,160 C80,200,160,120,240,160 C320,200,400,120,480,160 C560,200,640,120,720,160 C800,200,880,120,960,160 C1040,200,1120,120,1200,160 C1280,200,1360,120,1440,160 V320 H0 Z"></path></svg>') repeat-x;
    animation: wave-animation 20s linear infinite;
    transform: rotate(180deg) scaleX(-1); /* Flip the wave vertically */
}

.wave-container::before {
    content: "";
    position: absolute;
    top: 0; /* Align with the top of the container */
    left: 0;
    width: 100%;
    height: 75vh; /* Adjust height to cover the top part filled by the waves */
    background: linear-gradient(to bottom, #EED441, #F3D216); /* Gradient background color */
    z-index: 1; /* Ensure it sits behind the wave */
}

@keyframes wave-animation {
    0% {
        transform: translateX(0) rotate(180deg) scaleX(-1);
    }
    100% {
        transform: translateX(-50%) rotate(180deg) scaleX(-1);
    }
}/* End custom CSS */