/* *** FOR SMALLER DESKTOP/LAPTOP *** */
@media (max-width: 84em) {
    .section-home-top-div-grid-container {
      max-width: 120rem;
    }
  
    .home-top-div-image-box-features-img-container {
      width: 10.2rem !important;
    }
  
    .home-s5-gal {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* *** FOR TABLETS *** */
  @media (max-width: 75em) {
    html {
      font-size: 56.25%;
    }
  
    .header {
      padding: 0 3.2rem;
    }
  
    .main-nav-list {
      gap: 3.2rem;
    }
  
    .heading-h1-primary {
      font-size: 4.4rem;
    }
  
    .heading-h2-primary {
      font-size: 3.6rem;
    }
  
    .heading-h3-primary {
      font-size: 3.4rem;
    }
  
    .billify-grid {
      column-gap: 4.8rem;
    }
  
    .silent-feature-img {
      width: 69%;
    }
  }
  
  @media (max-width: 67em) {
    html {
      font-size: 50%;
    }
  
    .home-s5-container {
      grid-template-columns: 2fr;
    }
  }
  
  @media (max-width: 49em) {
    .section-home-top-div-grid-container {
      grid-template-columns: 1fr;
    }
  
    .home-top-div-image-box-main-img {
      width: 60%;
    }
  
    .home-top-div-text-box,
    .home-top-div-image-box {
      text-align: center;
    }
  
    /* *** MOBILE NAVIGATION *** */
  
    .btn-mobile-nav {
      display: block;
    }
  
    .main-nav {
      background-color: rgba(247, 247, 247, 0.99);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      transform: translateX(100%);
      display: flex;
      align-items: center;
      justify-content: left;
      justify-content: center;
      transition: all 0.3s ease-in;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }
  
    .nav-open .main-nav {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
  
      transform: translateX(0);
    }
  
    .nav-open .icon-mobile-nav[name="close"] {
      display: block;
    }
  
    .nav-open .icon-mobile-nav[name="menu"] {
      display: none;
    }
  
    .main-nav-list {
      flex-direction: column;
      gap: 4.8rem;
    }
  
    .main-nav-link-sol:link,
    .main-nav-link-sol:visited,
    .main-nav-link:link,
    .main-nav-link:visited {
      font-size: 3rem;
    }
  
    .heading-h1-primary {
      font-size: 4.4rem;
    }
  
    .heading-h2-primary {
      font-size: 3.6rem;
    }
  
    .heading-h3-primary {
      font-size: 3rem;
    }
  
    .home-s5-container {
      grid-template-columns: 1fr;
    }
  }
  
  /* *** FOR MOBILE PHONES *** */
  
  @media (max-width: 36em) {
    html {
      font-size: 37.5%;
    }
  
    .section-home-top-div-grid-container {
      grid-template-columns: 2fr 1fr;
      gap: 3.2rem;
    }
  
    .home-top-div-text-box {
      text-align: start;
    }
  
    .heading-h1-primary {
     /* margin-top: -9rem; */
    }
  
    .home-top-div-text-box-p-primary {
      font-size: 2.4rem;
    }
  
    .home-top-div-text-box-p-secondary {
   /*   margin-top: 21rem; */
      margin-left: 2.1rem;
    }
  
    .heading-h2-primary {
      font-size: 4.4rem;
      color: #555;
  
      margin-bottom: 3rem;
    }
  
    .text-color-goldenrod {
      margin-left: 2.1rem;
    }
  
    .home-top-div-text-box-a-primary {
      margin-left: 2.1rem;
    }
  
    .home-top-div-image-box-main-img {
      width: 50%;
      margin-top: -4.2rem;
    }
    .section-home-top-div-grid-container {
      padding: 3rem;
    }
    .home-top-div-image-box {
      grid-template-columns: 1fr;
    }
  
    .home-top-div-image-box-features-img-container {
      margin-top: 3rem;
      margin-bottom: 1rem;
    }
    .home-top-div-image-box-features-img-text-container-h3 {
      font-size: 1.8rem;
      font-weight: 600;
    }
  
    .home-top-div-image-box-features-container:last-child {
      margin-bottom: 0;
    }
  
    .billify-footer-grid {
      grid-template-columns: 1fr;
    }
  
    .billify-footer-nav {
      flex-direction: row;
      column-gap: 2.4rem;
      row-gap: 0;
    }
  
    .heading-h2-primary {
      font-size: 3.6rem;
    }
  
    .heading-h3-primary {
      font-size: 3rem;
    }
  
    .google-play-icon {
      display: block;
    }
  
    .home-s3 {
      padding: 3rem;
    }
  
    .home-s5-sol {
      margin: 3rem;
    }
  }
  
  /* >>>> FONT SIZE (Px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  
    >>>> WHITE SPACE (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */