body {
  font-family: Roboto, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.hero-image {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    background-image: url('/assets/images/cityroad.jpg'); /* Fallback JPG */
    background-size: cover;
    background-position: center;
    margin-bottom: 20px; /* Add some space below the image */
}


@supports (background-image: url('/assets/images/cityroad.webp')) {
    .hero-image {
        background-image: url('/assets/images/cityroad.webp'); /* WebP version */
    }
}

.content-container {
  max-width: 800px; /* Adjust max width as needed */
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  color: #222222;
  box-sizing: border-box;
}

.content-container p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.content-container ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

.content-container li {
  line-height: 1.6;
  margin-bottom: 8px;
}

.content-container strong {
  font-weight: 600;
}