/* *************** */
/* Small desktops (Below 1472px) */
/* *************** */
@media (max-width: 92em) {
   .heading-primary {
      font-size: 6.2rem;
   }
}

/* *************** */
/* Landscape tablets (Below 1248px) */
/* *************** */
@media (max-width: 78em) {
   html {
      font-size: 56.25%;
   }

   .container {
      padding: 0 6.4rem;
   }

   .main-nav__list {
      gap: 3.2rem;
   }

   .subheading {
      font-size: 1.4rem;
   }

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

   .heading-tertiary {
      font-size: 2rem;
      line-height: 1.5;
   }

   .feature__description {
      font-size: 1.6rem;
      line-height: 1.6;
   }

   .features__img {
      width: 75%;
   }

   .list {
      gap: 1.2rem;
   }
}

/* *************** */
/* Tablets (Below 1008px) */
/* *************** */
@media (max-width: 63em) {
   html {
      font-size: 50%;
   }

   .grid {
      gap: 3.2rem;
   }

   .heading-primary {
      font-size: 4.4rem;
      line-height: 1.1;
   }

   .btn:link,
   .btn:visited {
      font-size: 1.6rem;
      padding: 1.2rem 2.8rem;
   }

   .logo {
      height: 3.6rem;
   }

   .hero__description {
      margin-bottom: 4.8rem;
   }

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

   .features__img {
      width: 100%;
   }

   .cta {
      grid-template-columns: 3fr 2fr;
   }

   .cta__text-box {
      padding: 3.2rem;
   }

   .cta__text {
      font-size: 1.8rem;
   }

   .btn--cta {
      flex-shrink: 0;
   }

   /* Mobile navigation */
   .mobile-nav {
      display: block;
   }

   .main-nav {
      background-color: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(10px);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.4s all ease-in;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      z-index: 999;
      transform: translateX(100%);
   }

   .main-nav__list {
      flex-direction: column;
      align-items: center;
      gap: 4.8rem;
   }

   .main-nav__link:link,
   .main-nav__link:visited {
      font-size: 2.4rem;
   }

   .main-nav__link:hover,
   .main-nav__link:active {
      color: #ffdf28;
      background-color: initial;
   }

   .main-nav__link.main-nav__link--cta:link,
   .main-nav__link.main-nav__link--cta:visited {
      color: #000;
      background-color: #ffdf28;
   }

   .main-nav__link.main-nav__link--cta:hover,
   .main-nav__link.main-nav__link--cta:active {
      background-color: #e6c924;
   }

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

   .open .mobile-nav {
      color: #fff;
   }

   .open .mobile-nav__icon--open {
      display: none;
   }

   .open .mobile-nav__icon--close {
      display: block;
   }
}

/* *************** */
/* Smaller tablets (Below 816px) */
/* *************** */
@media (max-width: 51em) {
   .section-hero {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .hero__img-box {
      width: 70%;
   }

   .hero__text-box {
      grid-row: 1;
      padding: 0 4.8rem 0 9.6rem;
   }

   .hero__btns {
      justify-content: center;
   }

   .section-features {
      padding-top: 9.6rem;
   }

   .features {
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
   }

   .section-features .grid {
      grid-template-columns: 1fr 1fr;
   }

   /* .feature__icon {
      height: 4.8rem;
      width: 4.8rem;
      padding: 1.2rem;
   } */

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

   .keychain__img-box {
      padding-bottom: 40rem;
      width: 80%;
   }

   .app__img-box {
      text-align: center;
   }

   .app__img-box::before {
      left: 23%;
   }

   .customers__container {
      padding: 0;
   }

   .customers__list-item {
      font-size: 2.2rem;
   }

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

   .cta__text {
      margin-bottom: 6.4rem;
   }

   .cta__img-box {
      height: 30rem;
      grid-row: 1;
   }

   .btn--cta {
      flex-shrink: 1;
   }
}

/* *************** */
/* Phones (Below 560px) */
/* *************** */
@media (max-width: 35em) {
   .container {
      padding: 0 2.4rem;
   }

   .heading-secondary {
      font-size: 3rem;
      margin-bottom: 4.8rem;
   }

   .section-hero,.section-features,.section-keychain,.section-cta{
      padding-bottom: 4.8rem;
   }

   .hero__img-box {
      width: 85%;
   }

   .hero__btns {
      flex-direction: column;
      align-items: center;
   }

   .section-features .grid {
      grid-template-columns: 1fr;
   }

   .features {
      grid-template-columns: 1fr;
      margin-bottom: 4.8rem;
   }

   .features__img {
      width: 60%;
      justify-self: start;
      grid-row: 1;
   }

   .customers__list {
      padding: 0;
   }

   .cta__form {
      flex-direction: column;
      align-items: stretch;
   }

   .btn--cta {
      padding: 1.2rem 0;
   }
}

/* *************** */
/* Small phones (Below 384px) */
/* *************** */
@media (max-width: 24em) {
   .heading-primary {
      font-size: 3.6rem;
   }

   .hero__img-box {
      width: 100%;
   }

   .hero__text-box {
      padding: 0 0 0 4.8rem;
   }

   .keychain__img-box {
      padding-bottom: 28rem;
   }
}