section.container {
  padding: 55px 15px; }
  section.container h1 {
    font-family: 'Ubuntu', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 50px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 60px;
    letter-spacing: normal;
    text-align: center;
    color: #111111;
    max-width: 480px;
    margin: 0 auto 32px auto; }
  section.container h2 {
    font-family: 'Ubuntu', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 40px;
    letter-spacing: normal;
    text-align: center;
    color: #111111;
    max-width: 500px;
    margin: 87px auto 59px auto; }
  section.container > p {
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: normal;
    text-align: center;
    color: #111111;
    font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    max-width: 725px;
    margin: 0 auto 10px auto; }
  section.container .card-container {
    display: flex; }
    section.container .card-container .card {
      max-width: 262px;
      min-height: 230px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.21);
      width: 262px;
      margin-right: 31px; }
      section.container .card-container .card .top {
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center; }
        section.container .card-container .card .top i {
          font-size: 30px;
          padding: 19px;
          color: #fff;
          border-radius: 100%; }
      section.container .card-container .card .bottom {
        flex: 1;
        padding-top: 19px; }
        section.container .card-container .card .bottom p {
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: normal;
          text-align: center;
          color: #111111;
          font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
      section.container .card-container .card:last-of-type {
        margin-right: 0; }
      section.container .card-container .card:nth-of-type(1) .top i {
        background-color: #60F0F9; }
      section.container .card-container .card:nth-of-type(2) .top i {
        background-color: #09E4E4; }
      section.container .card-container .card:nth-of-type(3) .top i {
        background-color: #03B4EC; }
      section.container .card-container .card:nth-of-type(4) .top i {
        background-color: #4D78B6; }

@media screen and (max-width: 991px) {
  .card-container {
    flex-wrap: wrap;
    justify-content: center; }
    .card-container .card {
      margin-bottom: 31px; }
      .card-container .card:nth-child(even) {
        margin-right: 0 !important; } }
@media screen and (max-width: 601px) {
  .card-container {
    flex-direction: column;
    align-items: center; }
    .card-container .card {
      margin-right: 0 !important; }
      .card-container .card .bottom {
        flex: initial !important; } }