body {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333;
  letter-spacing: 1px;
}

header {
  padding: 20px;
  border-bottom: 2px solid #d32f2f;
  display: flex;
  align-items: center; /* Vertically centers content */
  gap: 20px; /* Space between logo and text */
  justify-content: center; /* Centers the flex content horizontally */
  text-align: center; /* Ensures text within header is centered */
}

.logo {
  width: 200px; /* Adjust based on your logo's aspect ratio */
  height: auto;
  flex-shrink: 0; /* Prevents logo from shrinking */
}

.header-content {
  flex-grow: 1; /* Allows text to take remaining space */
  max-width: 800px; /* Limits text width for better centering */
}

header h1,
header .veteran,
header nav {
  margin: 0;
}

h1, h2, h3 {
  color: #1976d2;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.veteran {
  color: #d32f2f;
  font-style: italic;
  margin: 5px 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav a {
  color: #1976d2;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}

nav a:hover, nav a.active {
  color: #d32f2f;
}

.content {
  padding: 20px 0; /* Remove horizontal padding, keep vertical padding for spacing */
  min-height: 400px;
}

.page {
  display: none;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  padding: 20px 0; /* Remove horizontal padding, keep vertical padding */
  box-sizing: border-box;
}

.page.active {
  display: block;
}

/* Background images for each page */
#home {
  background-image: url('https://i.ibb.co/ymK5p51m/HomePage.png'); /* Home: Flag fading to RV on a road */
  background-size: cover;
  background-position: center;
}

#services {
  background-image: url('https://i.ibb.co/twr12c32/ToolBox.jpg'); /* Services: Mechanic pulling toolbox out of truck near RV at campsite */
  background-size: cover;
  background-position: center;
}

#about {
  background-image: url('https://i.ibb.co/hFzSQN91/Interior-RV.jpg'); /* About: RV interior */
  background-size: cover;
  background-position: center;
}

#contact {
  background-image: url('https://i.ibb.co/2Y3p3wk1/Landscape.jpg'); /* Contact: Woodland/mountainous landscape */
  background-size: cover;
  background-position: center;
}

.text-box {
  background: rgba(255, 255, 255, 0.7); /* Darker by reducing opacity from 0.6 to 0.4 */
  padding: 20px;
  border-radius: 10px;
  max-width: 800px;
  margin: 0 auto;
}

.services-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.services-left, .services-right {
  padding: 0;
  text-align: left;
  flex: 1;
}

.services-left li, .services-right li {
  margin: 8px 0;
  color: #333;
}

.pricing {
  margin-top: 20px;
}

.pricing p {
  margin: 5px 0;
}

.pricing strong {
  color: #d32f2f;
}

.hours {
  margin-top: 20px;
}

.hours p {
  margin: 5px 0;
  color: #333;
}

.contact-info {
  margin-top: 20px;
}

.contact-info p {
  margin: 10px 0;
  text-align: center; /* Center Cell and Email text in Contact page */
}

.contact-info strong {
  color: #d32f2f;
}

footer {
  background-color: #ffffff;
  color: #1976d2;
  text-align: center;
  padding: 10px;
  border-top: 2px solid #d32f2f;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  header {
    padding: 15px;
    flex-direction: column; /* Stack logo and text on mobile */
    align-items: flex-start; /* Left-align stacked content */
    text-align: left; /* Left-align text on mobile */
  }

  .logo {
    width: 100px; /* Smaller size for mobile */
    margin-bottom: 10px; /* Space below logo */
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  nav ul li {
    display: block;
    margin: 10px 0;
  }

  .services-container {
    flex-direction: column;
    gap: 10px;
  }

  .content {
    padding: 15px 0; /* Adjusted for mobile */
  }

  .page {
    padding: 15px 0; /* Adjusted for mobile */
  }

  .text-box {
    padding: 15px;
    max-width: 100%;
  }

  .pricing, .hours, .contact-info {
    font-size: 14px;
  }

  .page {
    min-height: calc(100vh - 100px);
  }
}