#why-it-matters{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  align-items: left;
  width: 90%;
  margin: 0 auto;
}

#why-it-matters h2 {
  /* font-family: 'Jost', sans-serif;
  font-weight: 500; */

  /*color: #dd183b;*/
  text-transform: uppercase;
}

#why-it-matters p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  /* text-align: center; */
  margin: 1rem auto;
}

@media (min-width: 360px) {
  /* Styles for small portrait phones */
  .page-wrapper {
    padding-left: 5px;
    padding-right: 5px;
  }

}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {
  /* Styles for larger portrait phones */

  .page-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  #why-it-matters {
    width: 90%;
  }

}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
  /* SM portrait styles */

  .page-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  #why-it-matters {
    width: 80%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
    /* text-align: left; */
  }

}

@media (min-width: 768px) {
    
  .page-wrapper {
    max-width: 90%;
    padding-left: auto; /* Center the wrapper */
    padding-right: auto;
  }

  #why-it-matters {
    width: 80%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
  }

}

@media (min-width: 992px) {
}

@media (min-width: 1024px) {

  .page-wrapper {
    max-width: 1200px;
    margin-left: auto; /* Center the wrapper */
    margin-right: auto;
  }

  #why-it-matters {
    width: 65%;
  }

}

/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {

  #why-it-matters {
    width: 65%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
  }

}

@media (min-width: 1400px) {

}

@media (min-width: 2100px) {
}

/* --- FOR PRINT --- */
@media print {
  body {
      background-color: #fff;
      color: #000;
      font-size: 12pt;
  }
  .container {
      box-shadow: none;
      border: 1px solid #ccc;
  }
  /* Hide elements not relevant for printing */
  nav, footer, .no-print {
      display: none;
  }
}