/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 1300px) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }

  body {
    grid-template-columns: minmax(1rem, 1fr) minmax(auto, 80vw) minmax(
        1rem,
        1fr
      );
    /* Centered content */
  }

  .main-nav {
    width: 80vw;
  }

  .container {
    padding: 0;
  }

  .features-container {
    grid-column: 2;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content min-content;

    gap: 3rem;
  }

  header {
    grid-template-rows: repeat(2, 1fr);
  }
  .section-features-short {
    grid-row: 2;
    /* background-color: rgba(0, 0, 0, 0.6); */
  }

  .cta-form {
    /* display: grid; */
    grid-template-columns: 1fr;
    /* column-gap: 3.2rem;
    row-gap: 2.4rem; */
  }
}

@media (max-width: 1000px) {
  .cta-img-box {
    display: none;
  }

  .cta {
    grid-template-columns: 1fr;
  }

  /* .cta-text-box {
    padding-left: 10rem;
    padding-right: 10rem;
  } */
  header {
    grid-template-rows: repeat(2, 1fr);
  }
  .section-features-short {
    grid-row: 2;
    background-color: rgba(0, 0, 0, 0.3);
    /* padding-top: 10rem; */
    /* align-items: end; */
  }
  .features-container {
    grid-column: 2;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content min-content;
    justify-content: center;

    gap: 3rem;
  }

  /* REMOVE ICONS IN SECTION HOW */

  .section-how .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .section-how .step-img-box {
    display: none;
  }

  .section-references {
    padding: 10rem 0;
  }
}

@media (max-width: 900px) {
  .btn-mobile-nav {
    display: block;
  }

  .main-nav-list {
    background-color: rgba(255, 255, 255, 0.97);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4.8rem;

    /* display: none; */
    /* visibility: hidden; */

    /* HIDE ELEMENT */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    /* ANIMATION SLIDING IN FROM THE RIGHT */
    transform: translateX(100%);

    transition: all 0.5s ease-in;
  }

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

  .nav-open .main-nav-list {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;

    transform: translateX(0);
  }

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

  /* Change footer to a 2-column-grid-layout */
  .grid--footer {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--footer .nav-col {
    grid-row: 1;
  }
}

@media (max-width: 850px) {
  header {
    grid-template-rows: 1fr;
  }
  .section-features-short {
    grid-row: 1;
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 10rem;
    /* align-items: end; */
    align-items: center;
  }
  .features-container {
    grid-column: 2;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content;
    justify-content: center;

    gap: 0.5rem;
  }

  .icon-background {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem; /* Adjust as needed */
    height: 6rem;
    background-color: #e67e22;
    border-radius: 50%;
  }

  .box-icon {
    display: inline-block;
    /* width: 3rem; Adjust the icon size to fit within the circle */
    /* height: 5rem; */
    height: 3rem;
    fill: white;
  }
  /* 
    section features short should be a one column per row layout where each feature comes under each other with the top padding to prevent it from placing the first feature behind the navbar
    Section how will change so that maybe the image box comes first and then the text box (one column for each row)
  */

  /* .section-how .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .section-how .step-img-box {
    display: none;
  } */
}

@media (max-width: 650px) {
  .section-references {
    padding: 5rem 0;
  }
}

@media (max-width: 500px) {
  html {
    font-size: 45.25%;
  }

  .cta-text-box {
    padding: 4.8rem;
  }

  .section-how {
    padding: 5rem 0;
  }

  .section-how .heading-secondary {
    margin-bottom: 5rem;
  }
}

@media (max-width: 400px) {
  /* Change footer to a 1-column-grid-layout */

  .grid--footer {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  /* .grid--footer > * {
    display: flex;
    flex-direction: column;
    align-items: center;
  } */

  .grid--footer .nav-col {
    text-align: center;
  }

  .grid--footer .nav-col:nth-of-type(1) {
    grid-row: 1;
  }

  .grid--footer .nav-col:nth-of-type(2) {
    grid-row: 2;
  }

  .grid--footer .address-col {
    grid-row: 3;
    text-align: center;
  }

  .grid--footer .logo-col {
    grid-row: 4;
    text-align: center;
  }

  .grid--footer .social-links {
    justify-content: center;
  }

  .grid--footer .copyright {
    margin-top: 3rem;
  }
}

@media (max-width: 350px) {
  .cta-text-box {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  body {
    grid-template-columns: minmax(1rem, 1fr) minmax(auto, 90vw) minmax(
        1rem,
        1fr
      );
  }
}
/* HEIGHTS */
@media (max-height: 700px) {
  header {
    grid-template-rows: 1fr;
  }
  .section-features-short {
    grid-row: 1;
    background-color: rgba(0, 0, 0, 0.3);
    padding-top: 15rem;
    /* NAVBAR HEIGHT */
    /* align-items: start; */
    align-items: center;
  }
  /* header {
    height: auto;
  } */
}

/* @media (max-height: 650px) {
  .features-container {
    gap: 0rem;
  }
  header {
    height: auto;
  }
}

@media (max-height: 550px) {
  header {
    height: auto;
  }
} */

@media (max-height: 450px) {
  /* header {
    height: auto;
  }

  .main-nav-list {
    gap: 4rem;
  } */

  html {
    font-size: 45.25%;
  }
}