/* ######################### */
/* ######  Below 1344px(Smaller 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) {
  /*  HERO SECTION */
  .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%;
  }

  /*  SERVICES SECTION */
  .section-services {
    padding: 8rem 0;
  }

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

  .services-grid {
    gap: 2rem;
  }
  /*  SIZES SECTION */
  .section-sizes {
    padding: 8rem 0;
  }

  .sizes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /*  PRICING SECTION */
  .section-pricing {
    padding: 8rem 0;
  }

  .pricing-content {
    text-align: center;
  }

  .pricing-description {
    max-width: 64rem;
  }

  .pricing-link {
    margin: 0 auto 3.2rem;
  }

  .pricing-action {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pricing-box {
    grid-template-columns: 1fr;
    gap: 4rem;

    padding: 4.5rem;
  }
  /*  STEP SECTION */

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

  .how-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4rem;
  }

  .how-steps::before {
    display: none;
  }

  .how-bottom {
    margin-top: 4.8rem;
  }

  /*  ITEMS  NAVIGATION */
  .section-accept {
    padding: 8rem 0;
  }

  .accept-layout {
    grid-template-columns: 1fr;
  }
  /*  SECTION WHY */
  .section-why {
    padding: 8rem 0;
  }

  .why-layout {
    gap: 4.8rem;
  }

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

  /*  SECTION AREAS */
  .section-areas {
    padding: 8rem 0;
  }

  .areas-layout {
    grid-template-columns: 1fr;
  }

  /*  SECTION TESTIMONIALS */
  .section-testimonials {
    padding: 8rem 0;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonial-card {
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
  }
  /*  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 SERVICES */
  .section-services {
    padding: 6.4rem 0;
  }

  .services-header {
    margin-bottom: 4rem;
  }

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

  .services-description {
    font-size: 1.6rem;
  }

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

  .service-card {
    padding: 2.4rem;
  }

  .services-bottom {
    flex-direction: column;
    gap: 1.4rem;
  }
  /*  SECTION SIZES */
  .section-sizes {
    padding: 6.4rem 0;
  }

  .sizes-header {
    margin-bottom: 4rem;
  }

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

  .size-card-content p {
    min-height: auto;
  }

  .sizes-bottom {
    flex-direction: column;
    gap: 1.4rem;
  }
  /*  SECTION PRICING */
  .section-pricing {
    padding: 6.4rem 0;
  }

  .pricing-box {
    padding: 3rem 2.4rem;
  }

  .pricing-action {
    flex-direction: column;
    align-items: flex-start;
  }
  .pricing-cta,
  .pricing-note {
    margin: 0 auto;
  }
  .pricing-factors {
    padding: 2.4rem;
  }
  /*  SECTION STEPS */
  .section-steps {
    padding: 6.4rem 0;
  }

  .how-header {
    margin-bottom: 4.5rem;
  }

  .how-description {
    font-size: 1.6rem;
  }

  .how-steps {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }

  .how-step {
    max-width: 42rem;
    margin: 0 auto;
  }

  .how-bottom {
    flex-direction: column;
    align-items: flex-start;

    padding: 2.4rem;
  }
  .how-bottom-content {
    margin: auto;
    text-align: center;
  }

  .how-cta {
    width: 100%;
    justify-content: center;
  }
  /*  SECTION ACCEPT */
  .section-accept {
    padding: 6.4rem 0;
  }

  .accept-header {
    margin-bottom: 4.5rem;
  }

  .accept-description {
    font-size: 1.6rem;
  }

  .accept-box {
    padding: 2.4rem;
  }

  .accept-items-grid {
    grid-template-columns: 1fr;
  }

  .accept-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.4rem;
  }
  .accept-bottom-content {
    margin: auto;
    text-align: center;
  }

  .accept-cta {
    width: 100%;
    justify-content: center;
  }
  /*  SECTION WHY */
  .section-why {
    padding: 6.4rem 0;
  }

  .why-layout {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }

  .why-image {
    aspect-ratio: 16 / 10;
  }

  .why-content {
    max-width: none;
  }

  .why-content .section-eyebrow {
    display: block;
    width: fit-content;

    margin: 0 auto 1.2rem;
  }
  .why-content .heading-secondary {
    text-align: center;
  }

  .why-description {
    max-width: 64rem;
    margin: 1.6rem auto 3.2rem;
    text-align: center;
  }

  .why-cta {
    width: 100%;
    justify-content: center;
  }
  /*  SECTION AREAS */
  .section-areas {
    padding: 6.4rem 0;
  }

  .areas-header {
    margin-bottom: 4.5rem;
  }

  .areas-description {
    font-size: 1.6rem;
  }

  .area-featured,
  .areas-list-box {
    padding: 2.4rem;
  }

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

  .areas-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.4rem;
  }
  .areas-bottom-content {
    margin: auto;
    text-align: center;
  }

  .areas-cta {
    width: 100%;
    justify-content: center;
  }
  /*  SECTION TESTIMONIALS */
  .section-testimonials {
    padding: 6.4rem 0;
  }

  .testimonials-header {
    margin-bottom: 4.5rem;
  }

  .testimonials-description {
    font-size: 1.6rem;
  }

  .testimonial-card {
    padding: 2.4rem;
  }

  .testimonials-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.4rem;
  }

  .testimonials-bottom-content {
    margin: auto;
    text-align: center;
  }

  .testimonials-cta {
    width: 100%;
    justify-content: center;
  }
  /*  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 {
    padding: 4.8rem, 1.6rem;
  }
  .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 SERVICE */
  .heading-secondary {
    font-size: 2.8rem;
  }

  .service-card {
    gap: 1.6rem;
    padding: 2rem;
  }

  .service-icon {
    width: 4.8rem;
    height: 4.8rem;

    font-size: 2.4rem;
  }

  .service-content h3 {
    font-size: 1.8rem;
  }

  .service-content p {
    font-size: 1.4rem;
  }

  /*  SECTION SIZES */
  .size-card-top {
    padding: 2rem;
  }

  .size-card-content {
    padding: 2.2rem 2rem 2.4rem;
  }

  .size-number strong {
    font-size: 4.6rem;
  }
  /*  SECTION PRICING */
  .pricing-box {
    padding: 2.4rem 2rem;
  }

  .pricing-factors {
    padding: 2rem;
  }

  .pricing-factors-header h3 {
    font-size: 1.7rem;
  }

  .pricing-item {
    gap: 1rem;
  }

  .pricing-icon {
    width: 3.4rem;
    height: 3.4rem;

    font-size: 1.6rem;
  }
  /*  SECTION STEPS */
  .step-icon {
    width: 5.2rem;
    height: 5.2rem;

    font-size: 2.3rem;
  }

  .how-step h3 {
    font-size: 1.6rem;
  }

  .how-step p {
    font-size: 1.3rem;
  }
  /*  SECTION ACCEPT */
  .accept-box-header {
    gap: 1.2rem;
  }

  .accept-box-icon {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2.1rem;
  }

  .accept-box-header h3 {
    font-size: 1.8rem;
  }

  .accept-item {
    padding: 1.3rem;
  }
  /*  SECTION AREAS */
  .area-featured {
    gap: 1.3rem;
  }

  .area-featured-icon {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 2.2rem;
  }

  .area-featured-content h3 {
    font-size: 2rem;
  }
}