/* Estilos para o divisor de seções */
.section-divider {
    position: relative;
    height: 180px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    margin-top: 0;
    background: linear-gradient(to bottom, #f8f9fa, #e6f2ff);
}

.section-divider .wave-divider {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/wave-divider-blue.svg') no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    transform-origin: center bottom;
    animation: wave-float 8s ease-in-out infinite;
    opacity: 0.95;
}

.section-divider .wave-divider::before,
.section-divider .wave-divider::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    left: 0;
    top: 0;
    background-size: 100% 100%;
}

.section-divider .wave-divider::before {
    opacity: 0.85;
    animation: wave-animation 18s linear reverse infinite;
    filter: hue-rotate(-10deg);
}

.section-divider .wave-divider::after {
    opacity: 0.75;
    animation: wave-animation 15s linear infinite;
    filter: hue-rotate(10deg);
}

@keyframes wave-animation {
    0% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
    100% { transform: translateX(0); }
}

@keyframes wave-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .section-divider {
        height: 100px;
    }
}

@media (max-width: 576px) {
    .section-divider {
        height: 80px;
    }
}