body {
  margin: 0.3%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
               'Open Sans', 'Helvetica Neue', sans-serif;
}


.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav-bar"
    "home-section"
    "who-we-are-section"
    "our-services-heading"
    "our-services"
    "our-company-section"
    "key-differentiators-heading"
    "key-differentiators-section"
    "testimonials-headings"
    "testimonials-section"
    "contact-us-heading"
    "contact-us-section"
    "map-wrapper"
    "footer-section";
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
/*    NAV BAR    */
.nav-bar {
  grid-area: nav-bar;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  height: 2.5em;
  font-size: x-large;
}

.nav-bar img {
  width: 140px;
}

.nav-links {
  display: none;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.btn-contact-us {
  background-color: darkred;
  border-radius: 0.2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-contact-us:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.btn-contact-us a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

/*    HOME SECTION
 */
.home-section {
  grid-area: home-section;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: darkred;
  color: white;
  border-radius: 5px;
  padding: 1rem;
  height: auto;
}

.home-heading {
  font-size: 1.4rem;
}

.home-heading a {
  background-color: white;
  color: darkred;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}

.truck-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
/*    WHO WE ARE
 */
.who-we-are-section {
  grid-area: who-we-are-section;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
}

h2 {
  font-size: 1.5rem;
  color: darkred;
  padding-left: 15px;
}

.who-we-are-section p {
  font-size: 1rem;
  padding-left: 15px;
}

.give-us-a-call-wrapper {
  background-color: rgb(0, 0, 0);
  color: white;
  width: 95%;
  padding: 1rem;
  border-radius: 5px;
  position: relative;
  align-items: center;
}
.give-us-a-call-header p{
  font-size: 2rem;
  font-weight: bolder;
}
.phone-icon p{
  font-weight: bold;
}
.call-container {
  background-color: white;
  height: 100px;
  width: 100px;
}

.call-container img {
  width: 100%;
  height: 100%;
}

/*    OUR SERVICES
 */
.our-services-heading {
  grid-area: our-services-heading;
  text-align: center;
  font-size: 2rem;
  color: darkred;
}

.our-services {
  grid-area: our-services;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-card {
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.service-card img {
  width: 100%;
  border-radius: 5px;
  transition: transform 0.4s ease;
}

.icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/*    OUR COMPANY
 */
.our-company-section {
  grid-area: our-company-section;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: black;
  color: white;
  padding: 1.5rem;
  text-align: center;
  height: auto;
}

.our-company-heading {
  font-size: 2rem;
  font-weight: bold;
}

.vertical-line {
  width: 100%;
  height: 1px;
  background-color: white;
}

.clients,
.trucks,
.experience {
  font-size: 2rem;
}

/*    KEY DIFFERENTIATORS
 */
.key-differentiators-heading {
  grid-area: key-differentiators-heading;
  text-align: center;
  font-size: 2rem;
  color: darkred;
}

.key-differentiators-section {
  grid-area: key-differentiators-section;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: wheat;
  padding: 1rem;
  height: auto;
}

.diffrentiators-cards {
  text-align: center;
}

.icon {
  height: 90px;
  width: 90px;
  background-color: darkred;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.icon img {
  width: 60%;
}

/* 
   TESTIMONIALS
 */
.testimonials-headings {
  grid-area: testimonials-headings;
  text-align: center;
}

.main-heading {
  color: rgb(145, 1, 1);
  font-size: x-large;
}

.sub-heading {
  font-size: 1.8rem;
  font-weight: bold;
}

.testimonials-section {
  grid-area: testimonials-section;
  padding: 1rem;
}

.testimonial-message {
  background-color: grey;
  border-radius: 5px;
  padding: 1rem;
}

/*    CONTACT
 */
.contact-us-heading {
  grid-area: contact-us-heading;
  text-align: center;
  font-size: 2rem;
}

.contact-us-section {
  grid-area: contact-us-section;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  background-color: rgb(109, 2, 2);
  color: white;
  padding: 1rem;
}

.map-wrapper {
  grid-area: map-wrapper;
}

/*    FOOTER
 */
.footer-section {
  grid-area: footer-section;
  display: flex;
  flex-direction: column;
  align-items: left;
  background-color: rgb(0, 0, 0);
  padding-left: 10px;
  padding-top: 10px;
  height: auto;
}

.footer-section img{
  width: 200px;
}
.line-footer{
  border: none;
  height: 1px;
  background-color: rgb(0, 0, 0);
  justify-items: left;
  width: 50px;
}
.footer-cards p{
  font-weight: bolder;
  color: darkred;
  text-align: left;
}
.footer-cards a{
  color: gray;
  text-decoration: none;
}

/*   TABLETS   */
@media (min-width: 768px) {

  .our-services {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .service-card {
    width: 45%;
  }

  .key-differentiators-section {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .diffrentiators-cards {
    width: 45%;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
  }
}

/*  DESKTOP  */
@media (min-width: 1025px) {

  .grid-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "nav-bar nav-bar nav-bar nav-bar"
      "home-section home-section home-section home-section"
      "who-we-are-section who-we-are-section who-we-are-section who-we-are-section"
      "our-services-heading our-services-heading our-services-heading our-services-heading"
      "our-services our-services our-services our-services"
      "our-company-section our-company-section our-company-section our-company-section"
      "key-differentiators-heading key-differentiators-heading key-differentiators-heading key-differentiators-heading"
      "key-differentiators-section key-differentiators-section key-differentiators-section key-differentiators-section"
      "testimonials-headings testimonials-headings testimonials-headings testimonials-headings"
      "testimonials-section testimonials-section testimonials-section testimonials-section"
      "contact-us-heading contact-us-heading contact-us-heading contact-us-heading"
      "contact-us-section contact-us-section contact-us-section contact-us-section"
      "map-wrapper map-wrapper map-wrapper map-wrapper"
      "footer-section footer-section footer-section footer-section";
  }

  .home-section {
    margin-top: 10px;
    flex-direction: row;
    height: 80vh;
  }
  .home-heading {
    margin-top: 15px;
  }
  .nav-links {
    gap: 6rem;
  }
  .nav-links a:hover{
    color: darkred;
  }
  .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: darkred;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}
  .give-us-a-call-wrapper {
    position: absolute;
    right: 2.5%;
    top: 65%;
    width: 300px;
  }
  .footer-section {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 40vh;
  }
  .footer-cards img{
    width: 140px;
  }
  .footer-inner-cards{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 3rem;
    justify-items: center;
    width: 100%;
    padding-left: 3rem;
    color: gray;
  }
  .footer-cards a{
    text-decoration: none;
    color: rgb(211, 210, 210);
  }
  .copy-rights{
    justify-self: flex-end;
    color: rgb(199, 199, 199);
  }
}