.burger-menu {
  display: none;
}
.btn {
  width: auto;
  padding: 0.5rem 1.5rem;
  outline: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  color: white;
  &.outline {
    background-color: transparent;
    &.primary {
      color: var(--primary-color);
    }
    &:hover {
      background-color: var(--primary-color);
      color: white;
    }
  }
  .primary {
    background-color: var(--primary-color);
  }
  &:hover {
    opacity: 0.8;
  }
}

h1 {
  font-family: "Orbitron", sans-serif;
}

.text {
  &.primary {
    color: var(--primary-color);
  }
  &.secondary {
    color: var(--secondary-color);
  }
  &.white {
    color: white;
  }
}


/* Estilos básicos para el contenedor del SVG */
.wave-container {
  width: 100%;
  height: 100px; /* Ajusta la altura deseada */
  overflow: hidden; /* Oculta partes del SVG que se salen de los límites durante la animación */
}

.wave {
  display: block;
  width: 100%;
  height: 100%;
}

/* 🌀 Definición de la animación */
@keyframes wave-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Mueve la ola el 50% de su ancho a la izquierda */
  }
}

/* Aplicación de la animación al path dentro del SVG */
.wave path {
  animation: wave-scroll 10s linear infinite alternate; /* 10s de duración, movimiento lineal, repetido, alternando dirección */
  transform-origin: 0% 50%; /* Asegura que la transformación se aplique desde el inicio */
  /* NOTA: Para animaciones más avanzadas se recomienda duplicar el path SVG y animar uno traslapado */
}

.content-section {
  background-color: #f8f9fa; /* Color de fondo de la sección debajo del divisor */
  padding: 50px;
}