@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap");
* {
  padding: 0;
  margin: 0;
  font-family: "Ubuntu", sans-serif;
}

.contactMain {
  padding: 4rem 2rem 1rem 2rem;
}
.contactMain h2, .contactMain h4 {
  text-align: center;
}
.contactMain #contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 3rem 0;
}
.contactMain #contact h1, .contactMain #contact h2, .contactMain #contact h3, .contactMain #contact h4 {
  padding-bottom: 2rem;
}
.contactMain #contact h1 {
  color: #f07e22;
}
.contactMain #contact .contactMe:first-child {
  margin-right: 12rem;
  text-align: center;
}
.contactMain #contact .contactMe img {
  width: 100px;
}
.contactMain #contact .contactMe p {
  color: #5c5c5c;
  line-height: 1.6rem;
}
.contactMain #contact .contactMe p a {
  color: #414141;
  text-decoration: none;
}

@media screen and (max-width: 1200px) {
  .contactMain #contact {
    justify-content: center;
    padding: 3rem 2rem 1rem 2rem;
  }
  .contactMain #contact .contactMe:first-child {
    margin-right: 3rem;
    text-align: center;
    padding-bottom: 3rem;
  }
  .contactMain #contact .contactMe img {
    width: 90px;
  }
}
footer {
  background-color: #202020;
  margin-top: 20px;
  padding: 2rem;
}
footer .container {
  text-align: center;
}
footer .container h3 {
  color: #ccc;
  line-height: 3rem;
}
footer .container p {
  color: #797979;
}
footer .container a {
  line-height: 2rem;
  color: #ccc;
}

.banner {
  height: 600px;
  background: url("../img/tractor.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
  border-top: 2px solid #a5a5a5;
}

#head {
  min-height: 300px;
  padding-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#head .containerCol .headCompanyName {
  font-size: 3.8rem;
  text-transform: capitalize;
  font-weight: 700;
  color: #4b4b4b;
  text-shadow: 0.1rem 0.1rem #d88e05;
  line-height: 5rem;
}
#head .containerCol .headCompanyName img {
  height: 3.2rem;
}
#head .containerCol .headCompanyDescription {
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: 600;
}
#head .containerCol .headCompanyDescription2 {
  font-size: 1rem;
  padding-top: 0.5rem;
}
#head .headCompanyTopInfo {
  font-size: 1.2rem;
  padding-top: 0.3rem;
}
#head .containerCol:nth-child(1) {
  align-self: center;
}
#head .containerCol:nth-child(2) {
  color: #5c5c5c;
  text-align: right;
}
#head .containerCol:nth-child(2) a {
  color: #414141;
  text-decoration: none;
}

@media screen and (max-width: 1200px) {
  .banner {
    height: 50vh;
    background: url("../img/tractor600.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 3rem;
    border-top: 2px solid #a5a5a5;
  }

  #head {
    width: 100%;
    text-align: center;
    flex-direction: column-reverse;
  }
  #head .headCompanyName {
    line-height: 3.8rem;
    font-size: 3.4rem;
    text-transform: capitalize;
    font-weight: 700;
    color: #f07e22;
    text-shadow: 0.2rem 0.2rem #691515;
  }
  #head .headCompanyName img {
    height: 3rem;
    display: block;
    margin: 0 auto;
  }
  #head .headCompanyDescription {
    font-size: 1.7rem;
    text-transform: capitalize;
    font-weight: 600;
    padding-top: 1rem;
  }
  #head .headCompanyDescription2 {
    font-size: 1.2rem;
    padding-top: 1rem;
  }
  #head .containerCol {
    padding: 0.5rem;
  }
  #head .containerCol:nth-child(1) {
    align-self: center;
  }
  #head .containerCol:nth-child(2) {
    color: #5c5c5c;
    text-align: right;
    padding-bottom: 3rem;
    padding-right: 1.2rem;
  }
  #head .containerCol:nth-child(2) a {
    color: #414141;
    text-decoration: none;
  }
}
#services {
  display: flex;
  min-height: 300px;
  align-items: stretch;
  justify-content: center;
}
#services .servItem {
  text-align: center;
  border: 1px solid #ccc;
  padding: 2rem;
}
#services .fas {
  font-size: 2.4rem;
  line-height: 4rem;
  color: #f07e22;
}
#services h2 {
  font-size: 2.4rem;
  line-height: 3rem;
  padding-bottom: 3rem;
}

@media screen and (max-width: 1200px) {
  #services {
    width: 100%;
    text-align: center;
    flex-wrap: wrap;
  }
  #services .servItem {
    width: 100%;
    margin: 20px 1rem 0 1rem;
  }
}
.partsCatMain {
  width: 100%;
  background-color: #505050;
  padding: 2rem 0 3rem 0;
  margin-top: 3rem;
  border-top: 2px solid #444;
}

.partsCatHeading {
  padding: 4rem 0;
  color: #ccc;
}

#partsCat {
  display: flex;
  align-content: center;
  justify-content: center;
}
#partsCat .containerCol {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#partsCat .containerCol .fas {
  font-size: 6rem;
  padding-left: 3rem;
  color: #ccc;
}
#partsCat a {
  padding: 2rem 4rem;
  border: 2px solid transparent;
  color: #b6b6b6;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}
#partsCat a:hover {
  border: 2px solid #ccc;
  background-color: rgba(66, 66, 66, 0.7);
}
#partsCat a.nh {
  color: #31c5ff;
}
#partsCat a.case {
  color: #db6262;
}
#partsCat a.jd {
  color: #67c574;
}
#partsCat a.class {
  color: #97ffa5;
}
#partsCat a.jcb {
  color: #eee48e;
}

@media screen and (max-width: 1200px) {
  .partsCatMain {
    padding: 2rem 0 0 0;
  }

  .partsCatHeading {
    text-align: center;
    padding-top: 1rem;
  }

  #partsCat {
    width: 100%;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
  #partsCat a {
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  #partsCat a:hover {
    border: 0;
  }
  #partsCat a.nh:hover {
    border-bottom: 2px solid #598dc8;
  }
  #partsCat a.case:hover {
    border-bottom: 2px solid #b8634e;
  }
  #partsCat a.jd:hover, #partsCat a.class:hover {
    border-bottom: 2px solid #99e477;
  }
  #partsCat a.jcb:hover {
    border-bottom: 2px solid #faee82;
  }
  #partsCat a:first-child {
    border-top: 1px solid #ccc;
  }
  #partsCat .containerCol .fas {
    display: none;
  }
}
.container {
  width: 1180px;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .container {
    width: 100%;
  }
}

/*# sourceMappingURL=main.css.map */