.wavy-container {
    width: 100vw;
    height: 300px;
    background-color: #fff;
    top: 30%;
    z-index: 1;
    position: relative;
    overflow: hidden;
    margin-block-start: unset !important;
}

.wavy-container svg {
    width: 120%;
    height: 100%;
    left: -10%;
    position: absolute;
}
.wavy-container{
    /* height: 170px; */
    margin-bottom: 100px;
}
.wavy-container.no #path1.scrolling {
    animation: wavePath1 3s infinite ease-in-out;
}

.wavy-container.no #path2.scrolling {
    animation: wavePath2 2.5s infinite ease-in-out;
}

.wavy-container.no svg.scrolling {
    animation: containerFloat 4s infinite ease-in-out;
}

.wavy-container.no #path1.paused {
    animation: wavePath1 3s infinite ease-in-out;
    animation-play-state: paused;
}

.wavy-container.no #path2.paused {
    animation: wavePath2 2.5s infinite ease-in-out;
    animation-play-state: paused;
}

.wavy-container.no svg.paused {
    animation: containerFloat 4s infinite ease-in-out;
    animation-play-state: paused;
}

@keyframes wavePath1 {
    0%, 100% {
        transform: scaleX(1) translateY(0px);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: scaleX(1.05) translateY(-3px);
        filter: hue-rotate(10deg);
    }
    50% {
        transform: scaleX(0.98) translateY(5px);
        filter: hue-rotate(20deg);
    }
    75% {
        transform: scaleX(1.02) translateY(-2px);
        filter: hue-rotate(10deg);
    }
}

@keyframes wavePath2 {
    0%, 100% {
        transform: scaleX(1) translateY(0px) scaleY(1);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: scaleX(1.03) translateY(2px) scaleY(1.02);
        filter: hue-rotate(-10deg);
    }
    40% {
        transform: scaleX(0.97) translateY(-4px) scaleY(0.98);
        filter: hue-rotate(-20deg);
    }
    60% {
        transform: scaleX(1.01) translateY(3px) scaleY(1.01);
        filter: hue-rotate(-15deg);
    }
    80% {
        transform: scaleX(0.99) translateY(-1px) scaleY(0.99);
        filter: hue-rotate(-5deg);
    }
}

@keyframes containerFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    25% { 
        transform: translateY(-8px) rotate(0.5deg);
    }
    50% { 
        transform: translateY(5px) rotate(-0.3deg);
    }
    75% { 
        transform: translateY(-5px) rotate(0.4deg);
    }
}

/* @media screen and (min-width: 1801px){
    .wavy-container{
        height: 350px !important;
        margin-bottom: 135px !important;
    }
}
@media screen and (max-width: 1800px){
    .wavy-container{
        height: 300px;
        margin-bottom: 100px !important;
    }
} */

/* @media screen and (max-width: 1500px){
    .wavy-container{
        height: 170px;
        margin-bottom: 30px;
    }
} */

@media screen and (max-width: 700px){
    .wavy-container{
        height: 120px;
    }
}