/* ######################### */
/* ######  Below 1344px( desktops) ###### */
/* ######################### */

@media (max-width: 84em) {
  .hero-box {
    max-width: 120rem;
  }

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

  .hero-area-subtitle {
    font-size: 1.6rem;
  }
}

/* ######################### */
/* ######  Below 1120px(Landscape Tablets) ###### */
/* ######################### */

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

/* ######################### */
/* ######  Below 1008px(Tablets) ###### */
/* ######################### */

@media (max-width: 63em) {
  /* SECTION RELATED */
  .hero {
    padding: 8rem 3.2rem;
  }
  .hero-box {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
  .hero-content {
    max-width: 72rem;
    margin: 0 auto;
  }
  .hero-quote-card {
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
  }
  .quote-card-header {
    text-align: center;
  }

  .hero-benefits {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-cta-call {
    width: 100%;
  }
  /* SECTION CONTENT */
  .content-article .section-eyebrow {
    display: block;
    text-align: center;
  }
  .section-content {
    margin-bottom: 3.6rem;
  }

  /* SECTION SIDEBAR */
  .content-layout {
    grid-template-columns: 1fr;
  }
  .content-sidebar {
    display: none;
  }
  /* SECTION RELATED */
  .section-related {
    padding: 8rem 0;
  }

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

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

  .helpful-label,
  .helpful-heading,
  .helpful-text {
    max-width: none;
    text-align: center;
  }
  /*  FAQ SECTION */

  .section-faq {
    padding: 8rem 0;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }

  .faq-content {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
  }
  .faq-cta {
    width: 100%;
    justify-content: center;
  }
}

/**************************/
/* BELOW 768px (Smaller tablets) */
/**************************/

@media (max-width: 48em) {
  /*  SECTION HERO */
  .hero {
    padding: 6.4rem 2.4rem;
  }

  /* SECTION RELATED */
  .section-related {
    padding: 6.4rem 0;
  }

  /*  SECTION FAQ */
  .section-faq {
    padding: 6.4rem 0;
  }

  .faq-description {
    max-width: 64rem;
    font-size: 1.6rem;
  }

  .faq-contact {
    margin-top: 2.4rem;
  }

  .faq-question {
    padding: 1.8rem;
  }

  .faq-answer {
    padding: 0 1.8rem 1.8rem;
  }
}

/**************************/
/* #  BELOW 592px (Phone) */
/**************************/
@media (max-width: 37em) {
  html {
    font-size: 50%;
  }
  /*  SECTION HERO */
  .hero-quote-card {
    padding: 3.2rem 2rem;
  }
  .hero-form {
    grid-template-columns: 1fr;
  }
  .hero-quote-button {
    grid-column: 1;
  }
  .form-disclaimer {
    grid-column: 1;
  }
  /* SECTION CONTENT */
  .section-content {
    margin-bottom: 2.4rem;
  }

  /* SECTION INFO */
  .info-grid {
    grid-template-columns: 1fr;
  }
  /* SECTION PROCESS */
  .happen-grid {
    grid-template-columns: 1fr;
  }
  /* SECTION RELATED */

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

  .helpful-links {
    grid-template-columns: 1fr;
  }
  .helpful-link {
    max-width: 40rem;
    margin: 0 auto;
  }
}