/* Wave Separator Animation for Hero Bottom */
.hero_animation_1 {
    position: relative;
    overflow: visible; /* Allow wave to show outside container */
}

/* Wave separator SVG */
.hero_animation_1 .wave-separator {
    position: absolute;
    bottom: -1px; /* Slight overlap to prevent gaps */
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
}

/* Ensure content stays above wave */
.hero_animation_1 > *:not(.wave-separator) {
    position: relative;
    z-index: 2;
}

/* Optional: Add some styling to the hero section */
.hero_animation_1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 0;
}

/* Ensure proper layering */
.hero_animation_1 .kt-inside-inner-col {
    position: relative;
    z-index: 2;
}