@media (min-width: 300px) and (max-width: 500px) {
  html {
    font-size: 50%;
  }
  nav ul {
    padding: 0;
  }
  nav .logo,
  nav ul {
    float: none;
    text-align: center;
    display: block;
  }
  nav ul li {
    padding: 0 0.6em;
  }
  .header-content p {
    display: none;
  }
  .container {
    width: 100%;
  }
  .showcase {
    background-color: #ddd;
    padding-top: 10em;
    padding-left: 0;
    padding-right: 0;
  }
  .card .card1,
  .card .card2 {
    height: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.315);
    display: block;
    clear: both;
    content: "";
  }
  .card .card1 .img-box,
  .card .card2 .img-box {
    height: 27rem;
    width: 100%;
    float: none;
  }
  .card .card1 .text-box,
  .card .card2 .text-box {
    height: auto;
    width: 100%;
    float: none;
    text-align: center;
    padding-left: 7em;
    padding-right: 7em;
  }
  .img-box img {
    width: 100%;
    height: 27rem;
    object-fit: cover;
  }
  .features {
    margin-bottom: 0;
  }
  .box-wrapper {
    box-shadow: none;
  }
  .box {
    width: 100%;
    float: none;
    text-align: center;
    padding: 4rem;
    box-shadow: 0px 0px 15px rgba(34, 34, 36, 0.355);
  }
  .box2 {
    margin-top: 7rem;
  }
  .box3 {
    margin-top: 7rem;
  }
  .contact-banner {
    text-align: center;
  }
  .banner-left {
    float: none;
    width: 100%;
  }
  .banner-right {
    float: none;
    width: 100%;
    text-align: center;
  }
  .form {
    float: none;
    height: auto;
    width: 100%;
  }
  .company-address {
    float: none;
    height: auto;
    width: 100%;
  }
}
@media (min-width: 501px) and (max-width: 768px) {
  html {
    font-size: 57%;
  }
  nav .logo {
    padding-top: 0.7em;
  }
  nav .logo,
  nav ul {
    float: none;
    text-align: center;
    display: block;
    padding: 0;
  }
  nav ul li {
    padding: 0.5em 5em;
  }
  .container {
    width: 100%;
  }

  .showcase {
    background-color: #ddd;
    padding-top: 10em;
    padding-left: 0;
    padding-right: 0;
  }
  .card .card1,
  .card .card2 {
    height: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.315);
    display: block;
    clear: both;
    content: "";
  }
  .card .card1 .img-box,
  .card .card2 .img-box {
    height: 27rem;
    width: 100%;
    float: none;
  }
  .card .card1 .text-box,
  .card .card2 .text-box {
    height: auto;
    width: 100%;
    float: none;
    text-align: center;
    padding-left: 7em;
    padding-right: 7em;
  }
  .img-box img {
    width: 100%;
    height: 27rem;
    object-fit: cover;
  }
  .features {
    margin-bottom: 0;
  }
  .box-wrapper {
    box-shadow: none;
  }
  .box {
    width: 100%;
    float: none;
    text-align: center;
    padding: 4rem;
    box-shadow: 0px 0px 15px rgba(34, 34, 36, 0.355);
  }
  .box2 {
    margin-top: 7rem;
  }
  .box3 {
    margin-top: 7rem;
  }
  .contact-banner {
    text-align: center;
  }
  .banner-left {
    float: none;
    width: 100%;
  }
  .banner-right {
    float: none;
    width: 100%;
    text-align: center;
  }
  .about-heading {
    text-align: center;
  }
  .form {
    float: none;
    height: auto;
    width: 100%;
  }
  .company-address {
    float: none;
    height: auto;
    width: 100%;
  }
}
@media (min-width: 769px) and (max-width: 1200px) {
  html {
    font-size: 62%;
  }
  nav .logo {
    padding-top: 0.7em;
  }
  .about-heading {
    text-align: center;
  }
  nav .logo,
  nav ul {
    float: none;
    text-align: center;
    display: block;
    padding: 0;
  }
  nav ul li {
    padding: 0.5em 5em;
  }
  .container {
    width: 100%;
  }
  .showcase {
    background-color: #ddd;
    padding-top: 10em;
    padding-left: 0;
    padding-right: 0;
  }
  .card .card1,
  .card .card2 {
    height: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.315);
    display: block;
    clear: both;
    content: "";
  }
  .card .card1 .img-box,
  .card .card2 .img-box {
    height: 27rem;
    width: 100%;
    float: none;
  }
  .card .card1 .text-box,
  .card .card2 .text-box {
    height: auto;
    width: 100%;
    float: none;
    text-align: center;
    padding-left: 7em;
    padding-right: 7em;
  }
  .img-box img {
    width: 100%;
    height: 27rem;
    object-fit: cover;
  }
  .features {
    margin-bottom: 0;
  }
  .box-wrapper {
    box-shadow: none;
  }
  .box {
    width: 100%;
    float: none;
    text-align: center;
    padding: 4rem;
    box-shadow: 0px 0px 15px rgba(34, 34, 36, 0.355);
  }
  .box2 {
    margin-top: 7rem;
  }
  .box3 {
    margin-top: 7rem;
  }
  .contact-banner {
    text-align: center;
  }
  .banner-left {
    float: none;
    width: 100%;
  }
  .banner-right {
    float: none;
    width: 100%;
    text-align: center;
  }
  .form {
    float: none;
    height: auto;
    width: 100%;
  }
  .company-address {
    float: none;
    height: auto;
    width: 100%;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  header {
    height: 90vmax;
  }
}