.pricing-faq {
  margin: 3rem auto;
  padding: 2rem 4rem;

  @media screen and (max-width: 1032px) {
    /* // width: 70vw; */
    padding: 2rem;
  }
}

.pricing-front-page {
  background-image: url("images/pricing-page-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4rem;

  section.header {
    text-align: center;
    color: white;

    h4 {
      font-size: 40px;
      margin-bottom: 0.3rem;
    }

    h1 {
      color: black;
    }
  }

  section.announcement {
    @media screen and (min-width: 1032px) {
      display: flex;
    }
    border-radius: 4px;
    background-color: white;
    padding: 2.5rem 2rem;
    margin-bottom: 3rem;

    p.fine {
      font-size: 12px;
    }

    section.new {
      @media screen and (max-width: 1032px) {
        margin-bottom: 0.5rem;
      }
    }

    section.free {
      @media screen and (max-width: 1032px) {
        margin-bottom: 0.5rem;
      }
    }

    span.new {
      color: #28a745;
      border: 1px solid #34d058;
      padding: 0.05rem 0.5rem;
      margin-right: 1rem;
    }

    span.free {
      color: #3695d8;;
      border: 1px solid #3EA9F5;
      padding: 0.05rem 0.5rem;
      margin-right: 1rem;
    }

    h2 {
      margin-bottom: 0.5rem;
      /* span {
        color: #3695d8;;
        border: 1px solid #3EA9F5;
        padding: 0.05rem 0.5rem;
        margin-right: 1rem;
      } */
    }

    p {
      margin-bottom: 0.6rem;
    }

    ol {
      margin-bottom: 0;
    }

    .action-button {
      display: flex;
      align-items: center;
      flex-grow: 2;
      justify-content: flex-end;


      @media screen and (max-width: 1032px) {
        margin-top: 30px;
      }

      @media screen and (min-width: 1032px) {
        margin-left: 1rem;
        margin-right: 1rem;
        min-width: 100px;
      }

      a {
        background-color: #0366d6;
        color: white;
        padding: 1rem;
        text-decoration: none;
        font-weight: 700;
        border-radius: 3px;

        @media screen and (max-width: 1032px) {
          width: 100%;
          text-align: center;
        }
      }
    }
  }

  section.paid {
    p.header {
      margin-bottom: 0.8rem;
    }

    ul {
      text-align: left;
    }
  }

  h1 {
    margin-top: 0;
    color: white;
  }

  .pricing-tables {
    padding-top: 2rem;
  }


  @media screen and (max-width: 1032px) {
    padding: 3rem 1rem;

    section.free, section.paid {
      max-width: 70vw;
      margin-bottom: 3rem;
    }

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

  }

  @media screen and (min-width: 1032px) {
    .pricing-tables {
      display: flex;
      justify-content: space-around;
      margin-bottom: 4rem;
    }

    section.free, section.paid {
      max-width: 40vw;
      margin: 0 2rem;
    }
    .pricing-faq {
      width: 50vw;
    }

  }

  section.paid {
    display: flex;
    flex-direction: column;
    background-color: white;
    // padding: 1rem 2rem;
    text-align: center;

    .first h2 {
      margin-bottom: 0.3rem;
    }

    section {
      border: 1px solid #EFEFEF;
      padding: 1rem 2rem;
    }

    p {
      margin-bottom: 0;
    }

    .light {
      margin-top: 0.8rem;
      color: #5B6B7F;
      font-size: 0.9rem;
    }
  }

  section.free h2 {
    color: #3EA9F5;
  }

  section.paid h2 {
    color: #5B6B7F;
  }

  span.free {
    color: #3EA9F5;
    font-weight: 700;
  }
}


.pricing-last-section {
  padding: 5rem 2rem;
  height: 80vh;
  text-align: center;
  background-image: url("../images/pricing-last-section.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & h2 {
    margin-bottom: 4rem;
    color: white;
    font-size: 2rem;
  }

  a {
    text-decoration: none;
    padding: 1.5rem 2rem;
    border-radius: 7px;
    text-decoration: none;

    font-weight: bold;

    &.get-started {
      color: white;
      background-color: #DB2861;
      margin-right: 2rem;
    }

    &.get-in-touch {
      border: 2px solid #DB2861;
      color: white;
    }
  }

  @media screen and (max-width: 1032px) {
    padding: 5rem 0.5rem;
    .buttons {
      a {
        padding: 1rem 1.5rem;
        &.get-started {
          margin-right: 0.3rem;
        }
      }
    }
  }
}