.wave-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 10;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100px;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
background-size: 50% 100%;
}
.top-wave-blue {
background-image: url('data:image/svg+xml;utf8,');
}
.bottom-wave-white {
background-image: url('data:image/svg+xml;utf8,');
}
.bottom-wave-blue {
background-image: url('data:image/svg+xml;utf8,');
}
.wave-animation {
animation: wave 15s linear infinite;
}
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.carousel-item {
transition: opacity 1s ease-in-out;
}
.mobile-menu {
transition: transform 0.3s ease-in-out;
transform: translateX(100%);
}
.mobile-menu.open {
transform: translateX(0);
}