z-index not working

I am using the following custom css code on my site:

.av_promobox .avia-button {
background-image: none;
border: none;
color: #ffffff !important;
font-size: 13px;
font-weight: normal;
transition: background .5s;
-webkit-transition: background .5s;
}

.av_promobox .avia-button:hover {
background-color: #c3512f;
border-color: #c3512f;
transition: background .5s;
-webkit-transition: background .5s;
}

.image-overlay {
display: none !important;
}

.avia-testimonial-subtitle {
color: #000000 !important;
}

.avia-team-member-job-title {
color: #000000 !important;
}

.main_color .avia-icon-list .iconlist_icon {
background-color: #1180e1 !important;
}

.avia-section {
border: none !important;
}

#wave-section-up {
margin-top: -50px;
background-color: transparent !important;
}

#wave-section-down {
margin-bottom: -100px;
background-color: transparent !important;
position: relative;
bottom: 50px;
z-index: 9007;
height: 120px;
}

.main_menu {
z-index: 9008;
}

.fixed_header #header {
z-index: 9008;
}

#disqus_thread {
width: 95%;
}

.cart_dropdown.visible_cart {
z-index: 9009;
}

The part I am referring to is #wave-section-down and it’s not staying under the menu, but #wave-section-up is staying under the menu. I don’t know why, please help.
http://oceanhypnosis.net