/*

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160 / 192 / 224 / 256

- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

*/

/************************************************/
/* BELOW 1344px */
/************************************************/

@media (max-width: 84em) {
  .heading-primary {
    font-size: 5.2rem;
  }

  .heading-secondary {
    font-size: 3.6rem;
  }

  .nav-list:last-child {
    padding-right: 8rem;
  }

  .cap-category {
    margin: 0;
  }

  .cap-title {
    font-size: 6.2rem;
  }

  .cap-description {
    padding-right: 9.6rem;
  }

  .cta-container {
    width: 70vw;
  }

  .factory-img {
    width: 35vw;
  }
}

/************************************************/
/* BELOW 1200px */
/************************************************/

@media (max-width: 75em) {
  html {
    font-size: 50%;
  }

  .nav-list:last-child {
    padding-right: 3.2rem;
  }

  .description,
  .learn-more {
    font-size: 2.2rem;
  }

  .cap-description {
    margin-right: 0%;
  }

  .cta-title {
    font-size: 4.8rem;
  }

  .footer-link {
    font-size: 1.4rem;
  }

  .footer-text {
    font-size: 1.4rem;
  }
}

@media (max-width: 55em) {
  .hero-image {
    height: 100vh;
    width: auto;
  }

  .header {
    grid-template-columns: 20fr 60fr 20fr;
  }

  .hero-image {
    filter: brightness(40%) grayscale(100%);
  }

  .hero-container {
    grid-template-columns: 15fr 70fr 15fr;
  }

  .hero {
    grid-column: 2/2;
  }

  .hero-text {
    padding-right: 2.4rem;
    margin-bottom: 4.8rem;
  }

  .capabilities-title-box {
    grid-template-columns: 7fr 1fr;
  }

  .cap-title {
    font-size: 5.2rem;
  }

  .gallery-image {
    width: 45rem;
  }

  .cta-container {
    width: 80vw;
  }

  .factory-img {
    width: 40vw;
  }

  .cta-title {
    font-family: "Merriweather", sans-serif;
    font-size: 4.4rem;
  }

  /*MOBILE NAVIGATION*/
  .btn-mobile-nav {
    display: block;
    z-index: 3;
    justify-items: center;
  }

  .navigation {
    position: absolute;
    background-color: rgba(8, 8, 8, 0.94);
    top: 0;
    left: -25%;
    width: 125%;
    height: 100vh;
    z-index: 2;
    transform: translate(125%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    opacity: 0;
    /*hiding from tabs*/
    pointer-events: none;
    /*hiding from screen reader*/
    visibility: hidden;
  }

  .nav-open .navigation {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .nav-list {
    flex-direction: column;
    gap: 4.8rem;
    text-align: center;
  }

  .nav-link:link,
  .nav-link:visited {
    font-size: 2.8rem;
  }
}

@media (max-width: 49em) {
  .hero-text {
    font-size: 2.4rem;
  }

  .about-us-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr;
  }

  .about-us-title {
    grid-column: 2/-1;
    grid-row: 1;
    padding: 4.8rem;
    border: none;
  }

  .about-us-categories {
    grid-row: 2/-1;
    padding: 0;
    border-bottom: 1.5px solid #e9ecef;
  }

  .category {
    border: none;
  }

  .description,
  .learn-more {
    padding-right: 3.2rem;
  }

  .cap-description {
    padding: 4.8rem;
    padding-bottom: 0;
  }

  .cta-container {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    width: 65vw;
  }

  .factory-img {
    grid-row: 1/1;
    grid-column: 1/1;
    width: 65vw;
    height: auto;
  }

  .cap-category {
    flex-direction: column-reverse;
    row-gap: 0;
  }

  .cap-title {
    padding-top: 0;
    padding-bottom: 0;
  }

  .gallery-image {
    width: 70vw;
  }

  #rounding-image {
    padding: 0;
  }

  .footer {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-box {
    grid-column: 1/1;
  }

  .footer-box-capabilities {
    grid-column: 2/-1;
  }
}

@media (max-width: 36em) {
  html {
    font-size: 43.75%;
  }

  .hero-image {
    transform: translateX(-15%);
  }

  .hero-container {
    top: 25%;
    grid-template-columns: 10fr 80fr 10fr;
  }

  .hero-button:link,
  .hero-button:visited {
    padding: 1.6rem 1.2rem;
  }

  .gallery-image {
    width: 90vw;
    padding: 4.8rem 1rem;
  }

  .cta-container {
    width: 80vw;
  }

  .factory-img {
    width: 80vw;
  }
}

@media (max-width: 28em) {
  .heading-primary {
    font-size: 6.2rem;
  }

  .hero-container {
    top: 20%;
  }

  .hero-text {
    font-size: 2.4rem;
  }

  .hero-button {
    font-size: 2.4rem;
  }
}

@media (max-width: 24em) {
  html {
    font-size: 37.5%;
  }

  .heading-primary {
    padding: 0;
  }

  .heading-secondary {
    font-size: 4.2rem;
  }

  .category-title {
    font-size: 4.2rem;
  }

  .hero-container {
    grid-template-columns: 5fr 90fr 5fr;
  }

  .hero-text {
    font-size: 3rem;
    padding: 0;
  }

  .hero-button {
    font-size: 2.8rem;
  }

  .footer-text {
    font-size: 1.3rem;
  }
}