.animation-wave {
    background-color: #0083d5 !important;
    margin-top: -1px !important;
}

/* The container should adapt to the SVG dimensions but have a minimum height */
.wp-block-custom-animation {
    overflow: hidden !important;
    position: relative !important;
    transition: min-height 0.3s ease !important;
}

/* Position the animation wrappers absolutely to keep them at the bottom */
.animation-wrapper,
.animation-wrapper-mobile {
    position: absolute !important; /* Changed from relative to absolute */
    width: 101% !important;
    max-width: 101% !important;
    height: auto !important;
    bottom: 0 !important; /* Ensure it's at the bottom */
    left: 0 !important; /* Ensure it's aligned from the left */
    z-index: 1 !important;
    pointer-events: none !important;
}

.animation-svg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (max-width: 768px) {
    .animation-wave-mobile {
        display: block !important;
    }
    
    .animation-wrapper.animation-wave {
        display: none !important;
    }
    
    .animation-wave {
        padding-top: 30px !important;
    }
}

/* Default height fallbacks if JS fails */
@media (max-width: 470px) {
    .animation-wave:not([style*="min-height"]) {
        min-height: 150px !important;
    }
}

@media (min-width: 471px) and (max-width: 767px) {
    .animation-wave:not([style*="min-height"]) {
        min-height: 200px !important;
    }
}

@media (max-width: 880px) and (min-width: 768px) {
    .animation-wave:not([style*="min-height"]) {
        min-height: 200px !important;
    }
}

@media (min-width: 881px) {
    .animation-wave:not([style*="min-height"]) {
        min-height: 250px !important;
    }
}