body {
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: 0;
  padding: 0;
  background-image: url(/assets/images/670d2ed3a9996b84c3c04146-05_fivegenerationsoffreightlinercascadiamin_1.avif);
  /*background-color: black;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* height: 100vh; */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  width: 98%;
  top: 0;
  left: 0;
  height: 10vh;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 40 40 black;
}

.logo {
  font-size: 26px;
  font-weight: bold;
  color: black;
}

#icon {
  color: #007bff;
}

::-webkit-scrollbar {
  width: 0;
}

nav a {
  color: black;
  text-decoration: none;
  margin: 0 15px;
  font-size: 22px;
  font-weight: 1000;
  transition: 1.1s;
}

nav a:hover {
  color: #007bff;
}

#truck {
  color: #007bff;
  transition: 0.9s;
  font-weight: 1000;
}

#truck:hover {
  color: black;
}

.hero {
  margin: 100px;
  text-align: center;
  padding: 100px;
  width: 40%;
  height: 25vh;
  border-radius: 10px;
  transition: 0.9s;
}

.hero .b {
  color: black;
  font-size: 60px;
  font-weight: 1000;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.services a {
  text-decoration: none;
  color: white;
  background-color: #007bff;
  border-radius: 5px;
  padding: 25px;
  font-size: 50;
  transition: 0.3s;
}

.services a:hover {
  background-color: transparent;
  border: 2px solid #007bff;
}

.services {
  margin-top: 100px;
}

footer {
  background: #f4f4f4;
  padding: 20px;
  text-align: center;
  margin-top: 40px;
}

.footer-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
.footer-linkss p {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
  font-size: 10px;
}

/* -------------------------------
   Responsive CSS (Add at end of your CSS)
----------------------------------*/

/* For tablets and smaller desktops */
@media (max-width: 1024px) {
  header {
    padding: 15px 20px; /* slightly smaller padding */
  }
  nav a {
    font-size: 20px; /* adjust font size */
    margin: 0 10px;  /* reduce spacing between nav items */
  }
  .hero {
    margin: 50px auto;       /* center and reduce margin */
    padding: 50px 20px;       /* reduce padding */
    width: 90%;              /* use more of the screen width */
    height: auto;            /* let content define height */
  }
  .hero .b {
    font-size: 50px;         /* slightly smaller headline */
  }
  .services a {
    padding: 20px;           /* reduce button padding */
    font-size: 18px;         /* adjust button font size */
  }
}

/* For mobile devices */
@media (max-width: 600px) {
  header {
    flex-direction: column; /* stack header content vertically */
    align-items: flex-start;
    height: auto;           /* let content height adjust */
  }
  .logo {
    font-size: 22px;        /* slightly smaller logo */
    margin-bottom: 10px;
  }
  nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
  }
  nav a {
    margin: 5px;            /* tighter spacing for nav items */
    font-size: 16px;        /* smaller nav text */
  }
  .hero {
    margin: 200px auto;     /* reduce outer spacing */
    padding: 30px 15px;     /* reduce inner padding */
    width: 95%;             /* nearly full width */
    height: auto;
  }
  .hero .b {
    font-size: 35px;        /* adjust headline size for mobile */
  }
  .services {
    margin-top: 30px;       /* reduce margin above the buttons */
  }
  .services a {
    padding: 15px;          /* smaller padding for buttons */
    font-size: 16px;        /* adjust button text size */
    display: block;         /* stack buttons vertically if needed */
    margin: 10px auto;      /* center buttons with vertical spacing */
    width: 80%;             /* have buttons take up a good portion of the screen */
    text-align: center;
  }
}