body {
  margin: 0;
  overflow-x: hidden;
}

.ocean {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: none;
  background: transparent !important;
}

/* Background filler under the wave (curved same shape) */
.wave-bg {
  position: absolute;
  bottom: -130px;
  width: 1000%;
  height: 240px;
  background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22160%22%20height%3D%2280%22%20fill%3D'%23def4fa'%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M-66.839%2019.027C-44.46%2018.538-22.38%207.377%200%207.5c22.383.123%2057.617%2015%2080%2015%2022.383%200%2057.617-14.877%2080-15%2022.381-.123%2044.461%2011.037%2066.839%2011.527V80H-66.839V19.027Z%22%2F%3E%3C%2Fsvg%3E") repeat-x;
  background-size: contain;
  opacity: 0.3;
  animation: waveMove 110s linear infinite;
}

/* Wave Line */
.wave {
  position: absolute;
  bottom: -130px;
  width: 1000%;
  height: 240px;
  background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22160%22%20height%3D%2280%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23def4fa%22%20stroke-width%3D%222%22%20d%3D%22M-66.839%2019.027C-44.46%2018.538-22.38%207.377%200%207.5c22.383.123%2057.617%2015%2080%2015%2022.383%200%2057.617-14.877%2080-15%2022.381-.123%2044.461%2011.037%2066.839%2011.527%22%2F%3E%3C%2Fsvg%3E") repeat-x;
  background-size: contain;
  animation: waveMove 110s linear infinite;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Boat Animation */
.boat {
  position: absolute;
  bottom: 56px;
  width: 130px;
  transform: translateX(-50%);
  animation: boatFloat 4s ease-in-out infinite;
}

@keyframes boatFloat {
  0% { transform: translate(-50%, 0) rotate(0deg); }
  25% { transform: translate(-50%, -4px) rotate(-1deg); }
  50% { transform: translate(-50%, 0px) rotate(1deg); }
  75% { transform: translate(-50%, 4px) rotate(-1deg); }
  100% { transform: translate(-50%, 0) rotate(0deg); }
}