<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design for Bootstrap</title>
    <!-- MDB icon -->
    <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="../../css/mdb.min.css" />
    <!-- PRISM -->
    <link rel="stylesheet" href="../../dev/css/new-prism.css" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body>
    <div class="container my-5 p-5 shadow-3">
      <!--Section: Features 1-->
      <section>
        <h3 class="text-center mb-4 pb-2">Why is it so great?</h3>
        <p class="text-center mb-5">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
          nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
          quia cumque consequatur perferendis hic.
        </p>

        <div class="row">
          <div class="col-lg-5 mb-4 mb-lg-0">
            <img
              src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg"
              class="img-fluid"
              alt="Sample image"
            />
          </div>
          <div class="col-lg-7">
            <ul class="list-unstyled mb-0">
              <li class="mb-5">
                <div class="d-flex align-items-center mb-3">
                  <i class="fas fa-share text-primary fa-fw me-1"></i>
                  <h5 class="mb-0">Safety</h5>
                </div>
                <p class="mb-0 ms-4">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
                  quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
                  deleniti hic.
                </p>
              </li>
              <li class="mb-5">
                <div class="d-flex align-items-center mb-3">
                  <i class="fas fa-share text-primary fa-fw me-1"></i>
                  <h5 class="mb-0">Technology</h5>
                </div>
                <p class="mb-0 ms-4">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
                  quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
                  deleniti hic.
                </p>
              </li>
              <li>
                <div class="d-flex align-items-center mb-3">
                  <i class="fas fa-share text-primary fa-fw me-1"></i>
                  <h5 class="mb-0">Finance</h5>
                </div>
                <p class="mb-0 ms-4">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
                  quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda
                  deleniti hic.
                </p>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!--Section: Features 1-->
    </div>

    <br />

    <div class="container my-5 p-5 shadow-3">
      <!--Section: Features 2-->
      <section class="text-center">
        <h3 class="mb-4 pb-2">Why is it so great?</h3>
        <p class="mb-5">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
          nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
          quia cumque consequatur perferendis hic.
        </p>

        <div class="row">
          <div class="col-md-4 mb-4 mb-md-0">
            <i class="fas fa-chart-area fa-3x text-primary"></i>
            <h5 class="my-4">Analytics</h5>
            <p class="mb-md-0">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
              aperiam minima assumenda deleniti hic.
            </p>
          </div>

          <div class="col-md-4 mb-4 mb-md-0">
            <i class="fas fa-book fa-3x text-primary"></i>
            <h5 class="my-4">Tutorials</h5>
            <p class="mb-md-0">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
              aperiam minima assumenda deleniti hic.
            </p>
          </div>

          <div class="col-md-4 mb-4 mb-md-0">
            <i class="far fa-comments fa-3x text-primary"></i>
            <h5 class="my-4">Support</h5>
            <p class="mb-0">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
              aperiam minima assumenda deleniti hic.
            </p>
          </div>
        </div>
      </section>
      <!--Section: Features 2-->
    </div>

    <br />

    <div class="container my-5 p-5 shadow-3">
      <!--Section: Features 3-->
      <section>
        <h3 class="text-center mb-4 pb-2">Why is it so great?</h3>
        <p class="text-center mb-5">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum animi doloremque
          nam dicta veniam dolor ea nostrum excepturi laboriosam molestiae, expedita odit id! Sunt
          quia cumque consequatur perferendis hic.
        </p>

        <div class="row">
          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="far fa-paper-plane text-primary pe-2"></i> Feature 1</h5>
            <p>
              Absolutely! We work with top payment companies which guarantees your safety and
              security. All billing information is stored on our payment processing partner which
              has the most stringent level of certification available in the payments industry.
            </p>
          </div>

          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="fas fa-pen-alt text-primary pe-2"></i> Feature 2</h5>
            <p>
              You can cancel your subscription anytime in your account. Once the subscription is
              cancelled, you will not be charged next month. You will continue to have access to
              your account until your current subscription expires.
            </p>
          </div>

          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="fas fa-user text-primary pe-2"></i> Feature 3</h5>
            <p>
              Currently, we only offer monthly subscription. You can upgrade or cancel your monthly
              account at any time with no further obligation.
            </p>
          </div>

          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="fas fa-rocket text-primary pe-2"></i> Feature 4</h5>
            <p>
              Yes. Go to the billing section of your dashboard and update your payment information.
            </p>
          </div>

          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="fas fa-home text-primary pe-2"></i> Feature 5</h5>
            <p>Unfortunately, not. We do not issue full or partial refunds for any reason.</p>
          </div>

          <div class="col-md-6 col-lg-4 mb-4">
            <h5 class="mb-3"><i class="fas fa-book-open text-primary pe-2"></i> Feature 6</h5>
            <p>
              Of course! We’re happy to offer a free plan to anyone who wants to try our service.
            </p>
          </div>
        </div>
      </section>
      <!--Section: Features 3-->
    </div>

    <!-- PRISM -->
    <script type="text/javascript" src="../../dev/js/new-prism.js"></script>
    <!-- MDB SNIPPET -->
    <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
    <!-- MDB -->
    <script type="text/javascript" src="../../js/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>