/* =============== 1250px and below (large laptops) =============== */
@media (max-width: 1250px) {
  html {
    font-size: 60%;
  }

  /* .container {
    max-width: 95%;
  } */

  #showcase .row_1 header h1,
  #features .section_container .row_1 h2,
  #how .section_container .row_1 h2 {
    font-size: 6rem;
    width: 90%;
  }

  #how .section_container .row_1 p,
  #features .section_container .row_1 p {
    width: 60rem;
  }

  #resource .section_container .row_2 article {
    width: 32rem;
  }

  .testimonial_slider {
    width: 85rem;
  }
}

/* =============== 1024px and below (tablets & small laptops) =============== */
@media (max-width: 1024px) {
  html {
    font-size: 58%;
  }

  #showcase .row_1 header h1 {
    font-size: 5rem;
  }

  #features .section_container .row_2 .top,
  #features .section_container .row_2 .bottom,
  #resource .section_container .row_2 {
    flex-direction: column;
    align-items: center;
  }

  #resource .section_container .row_2 article {
    width: 90%;
  }

  #how_slider {
    flex-direction: column;
    align-items: center;
  }

  #testimonials .section_container {
    gap: 1.5rem;
  }

  #testimonials .section_container .row_1 {
    margin-bottom: 2rem;
  }

  #testimonials .section_container .row_2 .quote {
    height: 4rem;
  }

  #testimonials .section_container .row_2 article p {
    font-size: 2rem;
    width: 75vw;
  }

  .testimonial_slider_wrapper {
    margin-top: 1rem;
  }

  .testimonial_slider_wrapper svg.slider_arrow {
    position: absolute;
    bottom: -5%;
    display: inline-block;
  }

  .testimonial_slider_wrapper svg.slider_arrow:first-of-type {
    left: 44%;
  }

  .testimonial_slider_wrapper svg.slider_arrow:last-of-type {
    right: 44%;
  }

  #faq .section_container .row_1 {
    margin-bottom: 1.5rem;
  }
}

/* =============== 768px and below (landscape phones & tablets) =============== */
@media (max-width: 768px) {
  html {
    font-size: 55%;
  }

  .container {
    padding: 1.5rem;
    width: 100vw;
    max-width: 100vw;
    padding: 0;
  }

  .container >* section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  section#showcase {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #showcase .row_1 header h1 {
    font-size: 4rem;
    width: 75%;
  }

  #showcase .row_1 header p,
  #how .section_container .row_1 p,
  #features .section_container .row_1 p {
    font-size: 1.8rem;
    width: 80%;
  }

  #showcase .row_2 {
    display: none;
  }

  #about .about_container #heart_icon {
    display: none;
  }

  #about .about_container #badge {
    display: none;
  }

  .about_container .content h3 {
    font-size: 3rem;
    width: 80vw;
  }

  .about_container .content h3:last-of-type {
    font-size: 2.5rem;
    width: 80vw;
  }

  .about_container .content svg {
    display: none;
  }

  #how .section_container .row_1 h2,
  #features .section_container .row_1 h2,
  #faq .section_container .row_1 h2,
  #testimonials .section_container .row_1 h2,
  #resource  .section_container .row_1 h2, #metric .section_container .row_1 h2, #product .section_container .row_1 h2 {
    font-size: 3rem;
    width: 80vw;
  }

  #resource  .section_container .row_1 h2 {
    margin: 0 auto;
  }
  #resource  .section_container .row_1 p {
    font-size: 1.6rem;
    width: 80vw;
    text-align: center;
  }

  #resource .section_container .row_2 article {
    width: 75vw;
  }

  #features .section_container .row_2 .bottom article {
    align-items: center;
    width: 80vw;
  }

  #features .section_container .row_2 .bottom article .text {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  #features .section_container .row_2 .bottom article .text p {
    margin: 0 auto;
  }

  #features .section_container .row_2 .bottom article h3 {
    width: 100%;
    font-weight: 600;
  }

  #features .section_container .row_2 .bottom article p {
    width: 100%;
  }

  #faq .section_container {
    padding: 1.5rem;
  }

  .accordion_question {
    margin-bottom: .5rem;
  }

  .accordion_question h4 {
    font-size: 1.8rem;
  }

  .accordion_question p {
    font-size: 1.6rem;
  }

  #resource .section_container .row_2 article .text_content .col_1 h4 {
    font-size: 1.8rem;
  }

  #resource .section_container .row_2 article .text_content .col_1 p {
    font-size: 1.5rem;
    width: 85%;
  }

  footer .footer_container .row_2 {
    flex-direction: column;
    gap: 3rem;
  }

  footer .footer_container .row_3 {
    flex-direction: column-reverse;
  }

  footer .footer_container .row_3 .col_1 {
    flex-direction: column;
    gap: 1rem;
  }
}

/* =============== 480px and below (phones) =============== */
@media (max-width: 480px) {
  html {
    font-size: 50%;
  }

  #showcase .row_1 .feature {
    flex-direction: column;
    gap: 0.5rem;
    border-radius: .5rem;
    padding: 1rem;
  }

  #showcase .row_1 .feature button {
    width: 100%;
  }

  .pry_btn {
    padding: 0.5rem 1.5rem;
    font-size: 1.5rem;
  }

  #how .section_container .row_2 .image_desc {
    width: 100%;
    height: auto;
  }

  .testimonial_slider {
    margin-bottom: 1rem;
  }

   .testimonial_slider_wrapper svg.slider_arrow {
    bottom: -5%;
   }

  .accordion_question h4 {
    font-size: 2rem;
  }

  .accordion_answer p {
    font-size: 1.6rem;
  }

  #resource .section_container .row_2 article .text_content {
    flex-direction: column;
    align-items: flex-start;
  }
}