body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrolling */
}
.header {
  text-align: center;
  padding: 10px;
  padding-top: 40px;
}
.logo {
  max-width: 100px;
  height: auto;
}
.menu {
  text-align: right;
  padding: 10px;
}
.content {
  text-align: center;
}
.content h1 {
  font-size: 2em;
  margin: 20px 0;
}
.discover {
  display: inline-block;
  margin: 20px 0;
}
.vehicles .vehicle {
  width: 100%;
  max-width: 600px; /* Adjust as needed */
  height: auto;
  margin: 0 auto; /* Center the image */
}
.button-container {
  position: fixed; /* Fix position relative to the viewport */
  left: 50%; /* Center the container in the viewport */
  bottom: 60px; /* Distance from the bottom of the viewport */
  transform: translateX(-50%); /* Align the center of the container with the center of the viewport */
}
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 20px;
  transition: background-color 0.3s;
}
.listen-btn {
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
  min-width: 120px;
}
.stop-btn {
  border: 2px solid #FFF;
  background-color: #d50000;
  color: #fff;
  min-width: 120px;
}
.button:hover {
  opacity: 0.8;
}
.waveform-container {
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  height: 200px; /* Adjust as needed */
  margin: 300px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#micWaveformCanvas {
  width: 100%;
  height: 100%;
  display: none;
}
#audioWaveformCanvas {
  width: 100%;
  height: 100%;
  display: none;
}

.loader-container {
  position: fixed; /* Fix position relative to the viewport */
  left: 50%; /* Center the container in the viewport */
  bottom: 150px; /* Distance from the bottom of the viewport */
  transform: translateX(-50%); /* Align the center of the container with the center of the viewport */
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey border */
  border-top: 5px solid #3498db; /* Blue border */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}