.btn {

  &__pricing {
    border: 1px solid #2fa55e;
    padding: 1rem 3rem;
    color: #333;
    border-radius: 5rem;
    margin-top: 1.5rem;

    &:hover {
      border: 1px solid #ddd;
    }
  }
}

.pricing {

  &__title {

    h2 {
      @include title_32;

      span {
        color: #2fa55e;
      }
    }

    p {
      font-size: 1.6rem;
      margin-bottom: 3rem;
    }
  }

  &__box {
    border: 1px solid #ddd;
    padding: 2rem;

    &:hover {
      border-color: rgb(214, 212, 212);
      box-shadow: $shadow-10;
      & .pricing__icon {
        color: #2fa55e;
      }
    }

    h3 {
      margin-bottom: 2rem;
      color: #333;
      text-transform: uppercase;
    }
  }

  &__icon-biv {
    margin-bottom: 1.5rem;
  }

  &__icon {
    font-size: 5rem;
  }

  &__lists {
    text-align: left;
    margin-bottom: 2rem;

    li {
      margin: 1rem 0;

      &:hover {
        padding-left: 5px;
        cursor: pointer;
      }
    }
  }
}

.pricing__lists ul li:before {
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  content:"\f00c";
  color: #2fa55e;
  font-size: 1.4rem;
  padding: 0 1rem;
}

.pricing__lists ul li.off:before {
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  content:"\f00d";
  color: #eb3036;
}



/*
  <!-- |==========================================| -->
  <!-- |=====|| Pricing Start ||===============| -->
  <section class="pricing" id="pricing">
    <div class="content-box-md">
      <!-- <img src="" alt=""> -->
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <div class="pricing__title text-center">
              <h2>Pricing <span>Plans</span></h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus nihil aliquid vitae.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 col-lg-3 text-center">
            <div class="pricing__box">
              <h3>Personal</h3>
              <div class="pricing__icon-biv">
                <i class="icofont-database-add pricing__icon"></i>
              </div>
              <div class="pricing__lists">
                <ul>
                  <li>2GB Web space</li>
                  <li>5+ MySQL databases</li>
                  <li>Website builder</li>
                  <li class="off">Managed WordPress</li>
                  <li>Unlimited Bandwidth</li>
                  <li>Another feature</li>
                </ul>
              </div>
              <h4 class="pricing__count">$15/mo</h4>
              <div class="pricing__div">
                <a href="#" class="btn btn__pricing">Order Now</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 text-center">
            <div class="pricing__box">
              <h3>Personal</h3>
              <div class="pricing__icon-biv">
                <i class="icofont-database-add pricing__icon"></i>
              </div>
              <div class="pricing__lists">
                <ul>
                  <li>2GB Web space</li>
                  <li>5+ MySQL databases</li>
                  <li>Website builder</li>
                  <li class="off">Managed WordPress</li>
                  <li>Unlimited Bandwidth</li>
                  <li>Another feature</li>
                </ul>
              </div>
              <h4 class="pricing__count">$15/mo</h4>
              <div class="pricing__div">
                <a href="#" class="btn btn__pricing">Order Now</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 text-center">
            <div class="pricing__box">
              <h3>Personal</h3>
              <div class="pricing__icon-biv">
                <i class="icofont-database-add pricing__icon"></i>
              </div>
              <div class="pricing__lists">
                <ul>
                  <li>2GB Web space</li>
                  <li>5+ MySQL databases</li>
                  <li>Website builder</li>
                  <li class="off">Managed WordPress</li>
                  <li>Unlimited Bandwidth</li>
                  <li>Another feature</li>
                </ul>
              </div>
              <h4 class="pricing__count">$15/mo</h4>
              <div class="pricing__div">
                <a href="#" class="btn btn__pricing">Order Now</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 text-center">
            <div class="pricing__box">
              <h3>Personal</h3>
              <div class="pricing__icon-biv">
                <i class="icofont-database-add pricing__icon"></i>
              </div>
              <div class="pricing__lists">
                <ul>
                  <li>2GB Web space</li>
                  <li>5+ MySQL databases</li>
                  <li>Website builder</li>
                  <li class="off">Managed WordPress</li>
                  <li>Unlimited Bandwidth</li>
                  <li>Another feature</li>
                </ul>
              </div>
              <h4 class="pricing__count">$15/mo</h4>
              <div class="pricing__div">
                <a href="#" class="btn btn__pricing">Order Now</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- |=====|| Pricing End ||=================| -->
  <!-- |==========================================| -->
*/