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

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

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

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

  .testimonial_slider {
    width: 85rem;
  }
}

/* =============== 1024px and below (tablets & small laptops) =============== */
@media (max-width: 1110px) {
  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;
  }

  #features .section_container .row_2 .top article,
  #features .section_container .row_2 .bottom article:first-child,
  #features .section_container .row_2 .bottom article:last-child {
    width: 70%;
  }

  #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: 820px) {
  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: 90%;
  }

  #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;
  }

  #features
    .section_container
    .row_2
    .bottom
    article:last-of-type
    .biz_impact
    article {
    width: 85%;
    align-items: flex-start;
    text-align: left;
  }

  #features .section_container .row_2 .top article,
  #features .section_container .row_2 .bottom article:first-child,
  #features .section_container .row_2 .bottom article:last-child {
    width: 100%;
  }

  #features .section_container .row_2 .top article {
    align-items: center;
  }

  #features .section_container .row_2 .top article .text {
    text-align: center;
  }

  #features .section_container .row_2 .bottom article:last-of-type .biz_impact {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  #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: 0.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: 580px) {
  html {
    font-size: 50%;
  }

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

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

  #showcase .row_1 .feature {
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.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;
  }
}