.gs-wave-separator {
    --gs-wave-color: #8DA1A6;
    --gs-wave-opacity: 1;
    --gs-wave-stroke: 38;
    --gs-wave-speed: 8s;
    position: relative;
    height: 220px;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.gs-wave-separator:not(.is-contained) {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.gs-wave-separator__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    transform: translateX(0);
    transition: transform 0.35s ease;
    will-change: transform;
}

.gs-wave-separator.align-left .gs-wave-separator__inner {
    justify-content: flex-start;
}

.gs-wave-separator.align-center .gs-wave-separator__inner {
    justify-content: center;
}

.gs-wave-separator.align-right .gs-wave-separator__inner {
    justify-content: flex-end;
}

.gs-wave-separator__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transform-origin: center center;
    will-change: transform, opacity;
}

.gs-wave-separator path {
    fill: none;
    stroke: var(--gs-wave-color);
    stroke-width: var(--gs-wave-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: var(--gs-wave-opacity);
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    will-change: stroke-dashoffset, opacity;
}

.gs-wave-separator.is-flipped .gs-wave-separator__svg {
    transform: scaleX(-1);
}

.gs-wave-separator.is-animated.anim-float .gs-wave-separator__svg {
    animation: gs-wave-float var(--gs-wave-speed) ease-in-out infinite alternate;
}

.gs-wave-separator.is-animated.anim-draw path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: gs-wave-draw var(--gs-wave-speed) ease-in-out infinite alternate;
}

.gs-wave-separator.is-animated.anim-float_draw .gs-wave-separator__svg {
    animation: gs-wave-float calc(var(--gs-wave-speed) * 1.15) ease-in-out infinite alternate;
}

.gs-wave-separator.is-animated.anim-float_draw path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: gs-wave-draw calc(var(--gs-wave-speed) * 0.95) ease-in-out infinite alternate;
}

@keyframes gs-wave-float {
    0% {
        transform: translate3d(0, 10px, 0) scale(0.992);
        opacity: calc(var(--gs-wave-opacity) * 0.9);
    }
    50% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: var(--gs-wave-opacity);
    }
    100% {
        transform: translate3d(0, -10px, 0) scale(1.008);
        opacity: var(--gs-wave-opacity);
    }
}

@keyframes gs-wave-draw {
    0% {
        stroke-dashoffset: 100;
        opacity: 0.2;
    }
    45% {
        opacity: var(--gs-wave-opacity);
    }
    100% {
        stroke-dashoffset: 0;
        opacity: var(--gs-wave-opacity);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gs-wave-separator.is-animated .gs-wave-separator__svg,
    .gs-wave-separator.is-animated path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

@media (max-width: 767px) {
    .gs-wave-separator {
        height: 120px;
    }
}