{% extends "layout/layout.html" %}
{% set page_title = "Dashboard" %}
{% block content %}

<main class="app-wrapper" style="background-color: #fff; padding: 70px 0;">
    <div class="container">

      <!-- ========  All Btn ==========  -->

      <section class="all-btn remove-class">
          <div class="component-title">
            <h4>All Button</h4>
          </div>
          <!-- button top -->
          <div class="primary-button-list-wrap">
            <div class="primary-button-list">
              <button type="button" class="btn btn-primary pill multipule-color-strep">Button</button>
              <button type="button" class="btn btn-primary pill">Button</button>
              <button type="button" class="btn btn-primary pill" disabled>Button</button>
              <button type="button" class="btn btn-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-dark pill multipule-color-strep">Button</button>
              <button type="button" class="btn btn-dark pill" disabled>Button</button>
              <button type="button" class="btn btn-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-secondary pill">Button</button>
              <button type="button" class="btn btn-secondary pill" disabled>Button</button>
              <button type="button" class="btn btn-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-success pill">Button</button>
              <button type="button" class="btn btn-success pill" disabled>Button</button>
              <button type="button" class="btn btn-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-warning pill">Button</button>
              <button type="button" class="btn btn-warning pill" disabled>Button</button>
              <button type="button" class="btn btn-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-danger pill">Button</button>
              <button type="button" class="btn btn-danger pill" disabled>Button</button>
              <button type="button" class="btn btn-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
          </div>
          <!-- button middle -->
          <div class="primary-button-list-wrap">
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-primary pill">Button</button>
              <button type="button" class="btn btn-outline-primary pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-primary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-dark pill">Button</button>
              <button type="button" class="btn btn-outline-dark pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-dark pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-secondary pill">Button</button>
              <button type="button" class="btn btn-outline-secondary pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-secondary pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-success pill">Button</button>
              <button type="button" class="btn btn-outline-success pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-success pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-warning pill">Button</button>
              <button type="button" class="btn btn-outline-warning pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-warning pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-outline-danger pill">Button</button>
              <button type="button" class="btn btn-outline-danger pill" disabled>Button</button>
              <button type="button" class="btn btn-outline-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-outline-danger pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
          
          </div>
          <!-- button bottom -->
          <div class="primary-button-list-wrap">
            <div class="primary-button-list">
              <button type="button" class="btn btn-primary2 pill">Button</button>
              <button type="button" class="btn btn-primary2 pill" disabled>Button</button>
              <button type="button" class="btn btn-primary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
          
              <button type="button" class="btn btn-primary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-primary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-dark2 pill">Button</button>
              <button type="button" class="btn btn-dark2 pill" disabled>Button</button>
              <button type="button" class="btn btn-dark2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-dark2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-dark2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-secondary2 pill">Button</button>
              <button type="button" class="btn btn-secondary2 pill" disabled>Button</button>
              <button type="button" class="btn btn-secondary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-secondary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-secondary2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-success2 pill">Button</button>
              <button type="button" class="btn btn-success2 pill" disabled>Button</button>
              <button type="button" class="btn btn-success2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-success2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-success2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-warning2 pill">Button</button>
              <button type="button" class="btn btn-warning2 pill" disabled>Button</button>
              <button type="button" class="btn btn-warning2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-warning2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-warning2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-danger2 pill">Button</button>
              <button type="button" class="btn btn-danger2 pill" disabled>Button</button>
              <button type="button" class="btn btn-danger2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-danger2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-icon align-icon-right">
                    <i class="ph-arrow-right"></i>
                  </span>
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
              <button type="button" class="btn btn-danger2 pill btn-icon">
                <span class="button-content-wrapper">
                  <span class="button-text">
                    Button
                  </span>
                  <span class="button-icon">
                    <i class="ph-arrow-left"></i>
                  </span>
                </span>
              </button>
            </div>
          </div>
          <!-- only icon button -->
          <div class="primary-button-list-wrap">
            <div class="primary-button-list">
              <button type="button" class="btn btn-primary rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-primary rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-primary2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-dark rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-dark rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-dark2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-secondary rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-secondary rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-secondary2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-success rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-success rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-success2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-warning rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-warning rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-warning2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
            <div class="primary-button-list">
              <button type="button" class="btn btn-danger rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-outline-danger rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
              <button type="button" class="btn btn-danger2 rounded-circle icon-btn">
                <i class="ph-arrow-left"></i>
              </button>
            </div>
          </div>
      </section>
      <!-- End all btn -->

      <!-- ========  badge ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>badge</h4>
        </div>
        <span class="badge rounded-pill bg-gray-50 text-gray-900 ">Badge</span>
        <span class="badge rounded-pill bg-primary-50 text-primary-500">Badge</span>
        <span class="badge rounded-pill bg-secondary-100 text-gray-900">Badge</span>
        <span class="badge rounded-pill bg-success-50 text-success-500">Badge</span>
        <span class="badge rounded-pill bg-warning-50 text-warning-500">Badge</span>
        <span class="badge rounded-pill bg-danger-50 text-danger-500">Badge</span>
      </section>
      <!-- end badge -->

      <!-- ========  check radio switch btn ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Checkbox</h4>
        </div>
        <div class="form-check from-chekbox-custom mb-3">
          <input class="form-check-input" type="checkbox" value="" id="check-one">
        </div>
        <div class="form-check from-chekbox-custom mb-3">
          <input class="form-check-input" type="checkbox" value="" id="check-two" checked>
        </div>
        <div class="form-check from-chekbox-custom mb-3 invalid">
          <input class="form-check-input" type="checkbox" value="" id="check-three">
        </div>
      </section>
      <!-- end checkbox btn -->
      
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Radio Button</h4>
        </div>
        <div class="form-check from-radio-custom mb-3">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-one">
        </div>
        <div class="form-check from-radio-custom mb-3">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-two" checked>
        </div>
        <div class="form-check from-radio-custom invalid mb-3">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-three">
        </div>
      </section>
      <!-- end radio btn -->
      
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Switch</h4>
        </div>
        <div class="form-check form-switch custom-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-one">
        </div>
        <div class="form-check form-switch custom-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-two" checked>
        </div>
        <div class="form-check form-switch custom-switch invalid mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-three">
        </div>
      </section>
      <!-- end switch btn -->

      <!-- ========  Pagination ==========  -->

      <section class="padding-bottom">
        <div class="component-title">
          <h4>Pagination</h4>
        </div>
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <i class="ph-arrow-left"></i>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">01</a></li>
            <li class="page-item active"><a class="page-link" href="#">02</a></li>
            <li class="page-item"><a class="page-link" href="#">03</a></li>
            <li class="page-item"><a class="page-link" href="#">04</a></li>
            <li class="page-item"><a class="page-link" href="#">05</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <i class="ph-arrow-right"></i>
              </a>
            </li>
          </ul>
        </nav>
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li class="page-item page-item2"><a class="page-link" href="#">1</a></li>
            <li class="page-item page-item2 active"><a class="page-link" href="#">2</a></li>
            <li class="page-item page-item2"><a class="page-link" href="#">3</a></li>
            <li class="page-item page-item2"><a class="page-link" href="#">4</a></li>
            <li class="page-item page-item2"><a class="page-link" href="#">5</a></li>
          </ul>
        </nav>
      </section>
      <!-- End pagination section -->

      <!-- ========  accrodion-section ==========  -->

      <section class="padding-bottom">
        <div class="component-title">
          <h4>Accrodion</h4>
        </div>
        <div class="row">
          <div class="col-lg-6">
              <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                      aria-expanded="true" aria-controls="collapseOne">
                      <img src="assets/images/svg/file.svg" alt="">
                      Tittle One
                    </button>
                  </h2>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <p>Aliquam tincidunt enim in venenatis auctor. Maecenas sed porttitor justo. Etiam pharetra suscipit libero, eu
                        suscipit
                        quam sollicitudin id. Etiam eget massa ipsum. Cras cursus mauris ac massa pellentesque, eu mattis felis porta.
                        Sed erat
                        nisl, placerat quis ultrices eget, pellentesque a augue. Phasellus vel scelerisque quam.</p>
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                      aria-expanded="false" aria-controls="collapseTwo">
                      <img src="assets/images/svg/file.svg" alt="">
                      Tittle Two
                    </button>
                  </h2>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <p>Aliquam tincidunt enim in venenatis auctor. Maecenas sed porttitor justo. Etiam pharetra suscipit libero, eu
                        suscipit
                        quam sollicitudin id. Etiam eget massa ipsum. Cras cursus mauris ac massa pellentesque, eu mattis felis porta.
                        Sed
                        erat
                        nisl, placerat quis ultrices eget, pellentesque a augue. Phasellus vel scelerisque quam.</p>
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                      aria-expanded="false" aria-controls="collapseThree">
                      <img src="assets/images/svg/file.svg" alt="">
                      Tittle Three
                    </button>
                  </h2>
                  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <p>Aliquam tincidunt enim in venenatis auctor. Maecenas sed porttitor justo. Etiam pharetra suscipit libero, eu
                        suscipit
                        quam sollicitudin id. Etiam eget massa ipsum. Cras cursus mauris ac massa pellentesque, eu mattis felis porta.
                        Sed
                        erat
                        nisl, placerat quis ultrices eget, pellentesque a augue. Phasellus vel scelerisque quam.</p>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </section>
      <!-- End accrodion -->

      <!-- ========  alert-section ==========  -->

      <section class="padding-bottom">
        <div class="component-title">
          <h4>Alert</h4>
        </div>
          <div class="row remove-class">
            <div class="col-lg-6">
              <div class="alert-wrap">
                <div class="alert-item alert fade show" role="alert">
                    <div class="alert-left">
                      <div class="alert-icon">
                          <img src="assets/images/svg/info.svg" alt="">
                      </div>
                      <div class="alert-data">
                        <h6>This is a information alerts.</h6>
                        <p>This is a information alerts sub-text...</p>
                      </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div class="alert-item alert fade show success" role="alert">
                  <div class="alert-left">
                    <div class="alert-icon">
                      <img src="assets/images/svg/checkcircle.svg" alt="">
                    </div>
                    <div class="alert-data">
                      <h6>This is a success alerts.</h6>
                      <p>This is a information alerts sub-text...</p>
                    </div>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div class="alert-item alert fade show warning" role="alert">
                  <div class="alert-left">
                    <div class="alert-icon">
                      <img src="assets/images/svg/warningcircle.svg" alt="">
                    </div>
                    <div class="alert-data">
                      <h6>This is a warning alerts.</h6>
                      <p>This is a information alerts sub-text...</p>
                    </div>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div class="alert-item alert fade show danger" role="alert">
                  <div class="alert-left">
                    <div class="alert-icon">
                      <img src="assets/images/svg/warning.svg" alt="">
                    </div>
                    <div class="alert-data">
                      <h6>This is a warning alerts.</h6>
                      <p>This is a information alerts sub-text...</p>
                    </div>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              </div>
            </div>
          </div>
      </section>
      <!-- End alert-section -->

      <!-- ========  label-card-section ==========  -->

      <section class="padding-bottom">
        <div class="component-title">
          <h4>Label Card</h4>
        </div>
        <div class="row">
          <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="label-tag-item bg-white">
                  <h3>Light Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate
                  dapibus.</p>
              </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-gray-900">
              <h3>Dark Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-primary-500">
              <h3>Primary Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-secondary-500">
              <h3>Secondary Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-success-500">
              <h3>Success Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-warning-500">
              <h3>Warning Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="label-tag-item bg-danger-600">
              <h3>Danger Card Tittle</h3>
              <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
            </div>
          </div>
        </div>
      </section>
      <!-- End label-card-section -->

      <!-- ========  Folder ==========  -->
      <section class="padding-bottom remove-class">
        <div class="component-title">
          <h4>File</h4>
        </div>
        <div class="file-item">
          <div class="file-icon">
            <img src="assets/images/svg/image.svg" alt="">
          </div>
          <div class="file-data">
            <h4>Photos</h4>
            <p>2451 photos</p>
          </div>
        </div>
      </section>
      <!-- end file -->

      <!-- ========  Banner ==========  -->
      <section class="padding-bottom remove-class">
        <div class="component-title">
          <h4>Banner</h4>
        </div>
        <div class="banner-wrap bg-secondary-500">
          <div class="banner-icon">
            <img src="assets/images/svg/folder-open.svg" alt="">
          </div>
          <div class="banner-data">
            <p>Become a <span>Pro</span> <br/> to get more <span>Space</span> 
            </p>
            <button type="button" class="btn bg-white pill text-gray-900">Upgrade Plans</button>
          </div>
        </div>
      </section>
      <!-- end banner -->

      <!-- ========  Payment card ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Payment Card</h4>
        </div>
        <div class="payment-card-add mb-4">
            <img src="assets/images/svg/pluscircle.svg" alt="">
            <p>Add new card</p>
        </div>
        <!-- end add card -->
        <div class="payment-card-wrap mb-4" style="background-image: url(assets/images/all-img/card-bg1.png);">
          <div class="payment-card-header">
            <h4>$95, 400.00 <span>USD</span></h4>
            <img src="assets/images/svg/visa.svg" alt="">
          </div>
          <div class="payment-card-number">
              <div class="payment-card-number-left">
                <p id="textToCopy">**** **** **** 3814</p>
                <button id="copyButton"><img src="assets/images/svg/copy.svg" alt=""></button>
              </div>
              <div class="payment-card-number-right">
                <p>Expires</p>
                <h5>04 / 24</h5>
              </div>
          </div>
          <div class="payment-card-footer">
            <p>Kevin Gilbert</p>
            <div class="card-dropdown">
                <button class="dots-btn" id="dropdownMenuButton1" data-bs-toggle="dropdown"><img src="assets/images/svg/dots.svg"
                    alt=""></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                  <li><a class="dropdown-item" href="#">Download</a></li>
                  <li><a class="dropdown-item" href="#">Print</a></li>
                  <li><a class="dropdown-item" href="#">Delete</a></li>
                </ul>
            </div>
          </div>
        </div>
        <!-- end card one -->

        <div class="payment-card-wrap" style="background-image: url(assets/images/all-img/card-bg2.png);">
          <div class="payment-card-header header2">
            <h4>$95, 400.00 <span>USD</span></h4>
            <img src="assets/images/svg/visa2.svg" alt="">
          </div>
          <div class="payment-card-number">
            <div class="payment-card-number-left">
              <p id="textToCopy2">**** **** **** 5468</p>
              <button id="copyButton2"><img src="assets/images/svg/copy.svg" alt=""></button>
            </div>
            <div class="payment-card-number-right">
              <p>Expires</p>
              <h5>04 / 24</h5>
            </div>
          </div>
          <div class="payment-card-footer">
            <p>Kevin Gilbert</p>
            <div class="card-dropdown">
              <button class="dots-btn" id="dropdownMenuButton2" data-bs-toggle="dropdown"><img src="assets/images/svg/dots.svg"
                  alt=""></button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                <li><a class="dropdown-item" href="#">Download</a></li>
                <li><a class="dropdown-item" href="#">Print</a></li>
                <li><a class="dropdown-item" href="#">Delete</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- end payment-card-wrap -->
      </section>
      <!-- end payment card -->

      <!-- ========  All Input Field ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>All Input Field</h4>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="fromGroup mb-4">
              <input class="form-control" type="text" placeholder="Normal">
            </div>
              <div class="fromGroup has-icon mb-4">
                <div class="form-control-icon">
                    <input class="form-control" type="search" placeholder="Search">
                    <div class="icon-badge-2">
                      <img src="assets/images/svg/search2.svg" alt="">
                    </div>
                </div>
              </div>
              <div class="fromGroup eye mb-4">
                <div class="form-control-icon">
                    <input id="password-hide_show" class="form-control" type="password" placeholder="password">
                    <div class="has-badge">
                      <i class="ph-eye"></i>
                    </div>
                </div>
              </div>
              <div class="fromGroup success mb-4">
                <input class="form-control" type="text" placeholder="Success">
                <div class="has-badge">
                  <img class="success-icon" src="assets/images/svg/checkcircle.svg" alt="">
                  <img class="warning-icon" src="assets/images/svg/warning.svg" alt="">
                </div>
              </div>
              <div class="fromGroup warning mb-4">
                <input class="form-control" type="text" placeholder="Danger & Error">
                <div class="has-badge">
                  <img class="success-icon" src="assets/images/svg/checkcircle.svg" alt="">
                  <img class="warning-icon" src="assets/images/svg/warning.svg" alt="">
                </div>
              </div>
          </div>
        </div>
      </section>
      <!-- end All Input Field -->

      <!-- ========  Invoice List ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Invoice List</h4>
        </div>
        <div class="invoice-table-list table-responsive">
            <table class="table">
              <tbody>
                <tr>
                  <td>
                    <div class="from-chekbox-custom">
                      <input class="form-check-input" type="checkbox" value="" id="check-one">
                      EKG464SJFN17
                    </div>
                  </td>
                  <td class="large-width">Design Works</td>
                  <td>
                    <div class="rt-single-icon-box rt-align-center">
                      <div class="icon-thumb rt-mr-8 ">
                          <img src="assets/images/all-img/flag1.png" alt="">
                      </div>
                      <div class="iconbox-content">
                          Carlson Limited
                      </div>
                    </div>
                  </td>
                  <td>87956621</td>
                  <td>15 Dec, 2017</td>
                  <td class="large-width2">
                    <div class="paid-wrap">
                      <img src="assets/images/svg/circle.svg" alt="">
                      Paid
                    </div>
                  </td>
                  <td>$887.00</td>
                  <td>
                    <div class="dropdown-wrap ">
                      <button type="button" class="btn btn-primary2 pill btn-icon">
                        <span class="button-content-wrapper">
                          <span class="button-text">
                            Download
                          </span>
                          <span class="button-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M6.71875 8.5946L10 11.875L13.2812 8.5946" stroke="white" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M10 3.125V11.8727" stroke="white" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
            
                          </span>
                        </span>
                      </button>
                      <button type="button" class="btn bg-gray-50 rounded-circle icon-btn" id="dropdownMenuButton3"
                        data-bs-toggle="dropdown">
                        <img src="assets/images/svg/dots2.svg" alt="">
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="#">Download</a></li>
                        <li><a class="dropdown-item" href="#">Print</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="from-chekbox-custom">
                      <input class="form-check-input" type="checkbox" value="" id="check-one">
                      EKG464SJFN17
                    </div>
                  </td>
                  <td class="large-width">Design Works</td>
                  <td>
                    <div class="rt-single-icon-box rt-align-center">
                      <div class="icon-thumb rt-mr-8 ">
                        <img src="assets/images/all-img/flag2.png" alt="">
                      </div>
                      <div class="iconbox-content">
                        Carlson Limited
                      </div>
                    </div>
                  </td>
                  <td>87956621</td>
                  <td>15 Dec, 2017</td>
                  <td class="large-width2">
                    <div class="paid-wrap">
                      <img src="assets/images/svg/circle.svg" alt="">
                      Paid
                    </div>
                  </td>
                  <td>$887.00</td>
                  <td>
                    <div class="dropdown-wrap ">
                      <button type="button" class="btn btn-primary2 pill btn-icon">
                        <span class="button-content-wrapper">
                          <span class="button-text">
                            Download
                          </span>
                          <span class="button-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M6.71875 8.5946L10 11.875L13.2812 8.5946" stroke="white" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M10 3.125V11.8727" stroke="white" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                
                          </span>
                        </span>
                      </button>
                      <button type="button" class="btn bg-gray-50 rounded-circle icon-btn" id="dropdownMenuButton3"
                        data-bs-toggle="dropdown">
                        <img src="assets/images/svg/dots2.svg" alt="">
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="#">Download</a></li>
                        <li><a class="dropdown-item" href="#">Print</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
        </div>
      </section>
      <!-- end Invoice List -->

      <!-- ========  Recent File ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Recent File</h4>
        </div>
        <div class="recent-file-list table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td class="large-width">
                  <a href="#">
                    <div class="recent-file-wrap">
                      <div class="start-icon">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M9.34462 13.901L13.2849 16.3974C13.7886 16.7165 14.4139 16.2419 14.2644 15.654L13.126 11.1756C13.0939 11.0509 13.0977 10.9197 13.137 10.797C13.1762 10.6743 13.2492 10.5652 13.3477 10.4822L16.8811 7.54132C17.3453 7.1549 17.1057 6.38439 16.5092 6.34568L11.8949 6.0462C11.7706 6.03732 11.6514 5.99332 11.5511 5.91931C11.4509 5.84531 11.3737 5.74435 11.3286 5.62819L9.60765 1.29436C9.56087 1.17106 9.47769 1.06492 9.36916 0.990017C9.26062 0.915115 9.13187 0.875 9 0.875C8.86813 0.875 8.73938 0.915115 8.63085 0.990017C8.52232 1.06492 8.43914 1.17106 8.39236 1.29436L6.6714 5.62819C6.62631 5.74435 6.54914 5.84531 6.4489 5.91931C6.34865 5.99332 6.22944 6.03732 6.10515 6.0462L1.49078 6.34568C0.894294 6.38439 0.654664 7.1549 1.11894 7.54132L4.65232 10.4822C4.75079 10.5652 4.82383 10.6743 4.86305 10.797C4.90226 10.9197 4.90606 11.0509 4.874 11.1756L3.81824 15.3288C3.63889 16.0343 4.38929 16.6038 4.99369 16.2209L8.65539 13.901C8.75837 13.8354 8.87792 13.8006 9 13.8006C9.12208 13.8006 9.24163 13.8354 9.34462 13.901V13.901Z"
                            stroke="#959FA3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    
                      </div>
                      <div class="folder-name">
                        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M15.875 2.62488H9.20874L7.04077 0.999511C6.82463 0.838084 6.56225 0.750552 6.29248 0.749878H2.125C1.79358 0.750205 1.47583 0.882006 1.24148 1.11636C1.00713 1.35071 0.875327 1.66846 0.875 1.99988V12.6249C0.875327 12.9563 1.00713 13.274 1.24148 13.5084C1.47583 13.7427 1.79358 13.8745 2.125 13.8749H15.9446C16.2575 13.8744 16.5575 13.7499 16.7788 13.5287C17.0001 13.3074 17.1246 13.0074 17.125 12.6945V3.87488C17.1247 3.54346 16.9929 3.2257 16.7585 2.99136C16.5242 2.75701 16.2064 2.6252 15.875 2.62488Z"
                            fill="#959FA3" />
                        </svg>
                    
                        Folder name
                      </div>
                    </div>
                  </a>
                </td>
                <td><a href="#">Zip File</a></td>
                <td><a href="#">14.6 GB</a></td>
                <td><a href="#">1 Feb, 2020 At 5:30 PM</a></td>
                <td>
                  <div class="dropdown-wrap">
                    <button type="button" class="button-icon" id="dropdownMenuButton4"
                      data-bs-toggle="dropdown">
                      <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                          fill="#191B1C" stroke="#191B1C" stroke-width="1.5" />
                      </svg>

                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                      <li><a class="dropdown-item" href="#">Download</a></li>
                      <li><a class="dropdown-item" href="#">Print</a></li>
                      <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="large-width">
                  <a href="#">
                    <div class="recent-file-wrap">
                      <div class="start-icon">
                        <img src="assets/images/svg/star2.svg" alt="">
                    
                      </div>
                      <div class="folder-name">
                        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M15.875 2.62488H9.20874L7.04077 0.999511C6.82463 0.838084 6.56225 0.750552 6.29248 0.749878H2.125C1.79358 0.750205 1.47583 0.882006 1.24148 1.11636C1.00713 1.35071 0.875327 1.66846 0.875 1.99988V12.6249C0.875327 12.9563 1.00713 13.274 1.24148 13.5084C1.47583 13.7427 1.79358 13.8745 2.125 13.8749H15.9446C16.2575 13.8744 16.5575 13.7499 16.7788 13.5287C17.0001 13.3074 17.1246 13.0074 17.125 12.6945V3.87488C17.1247 3.54346 16.9929 3.2257 16.7585 2.99136C16.5242 2.75701 16.2064 2.6252 15.875 2.62488Z"
                            fill="#959FA3" />
                        </svg>
                    
                        Folder name
                      </div>
                    </div>
                  </a>
                </td>
                <td><a href="#">Zip File</a></td>
                <td><a href="#">14.6 GB</a></td>
                <td><a href="#">1 Feb, 2020 At 5:30 PM</a></td>
                <td>
                  <div class="dropdown-wrap">
                    <button type="button" class="button-icon" id="dropdownMenuButton4" data-bs-toggle="dropdown">
                      <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                          fill="#191B1C" stroke="#191B1C" stroke-width="1.5" />
                      </svg>
              
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                      <li><a class="dropdown-item" href="#">Download</a></li>
                      <li><a class="dropdown-item" href="#">Print</a></li>
                      <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="large-width">
                  <a href="#">
                    <div class="recent-file-wrap">
                      <div class="start-icon">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M9.34462 13.901L13.2849 16.3974C13.7886 16.7165 14.4139 16.2419 14.2644 15.654L13.126 11.1756C13.0939 11.0509 13.0977 10.9197 13.137 10.797C13.1762 10.6743 13.2492 10.5652 13.3477 10.4822L16.8811 7.54132C17.3453 7.1549 17.1057 6.38439 16.5092 6.34568L11.8949 6.0462C11.7706 6.03732 11.6514 5.99332 11.5511 5.91931C11.4509 5.84531 11.3737 5.74435 11.3286 5.62819L9.60765 1.29436C9.56087 1.17106 9.47769 1.06492 9.36916 0.990017C9.26062 0.915115 9.13187 0.875 9 0.875C8.86813 0.875 8.73938 0.915115 8.63085 0.990017C8.52232 1.06492 8.43914 1.17106 8.39236 1.29436L6.6714 5.62819C6.62631 5.74435 6.54914 5.84531 6.4489 5.91931C6.34865 5.99332 6.22944 6.03732 6.10515 6.0462L1.49078 6.34568C0.894294 6.38439 0.654664 7.1549 1.11894 7.54132L4.65232 10.4822C4.75079 10.5652 4.82383 10.6743 4.86305 10.797C4.90226 10.9197 4.90606 11.0509 4.874 11.1756L3.81824 15.3288C3.63889 16.0343 4.38929 16.6038 4.99369 16.2209L8.65539 13.901C8.75837 13.8354 8.87792 13.8006 9 13.8006C9.12208 13.8006 9.24163 13.8354 9.34462 13.901V13.901Z"
                            stroke="#959FA3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    
                      </div>
                      <div class="folder-name">
                        <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M10.1244 9.83333C10.1244 9.48816 9.84453 9.20833 9.49935 9.20833H4.49935C4.15417 9.20833 3.87435 9.48816 3.87435 9.83333C3.87435 10.1785 4.15417 10.4583 4.49935 10.4583H9.49935C9.84453 10.4583 10.1244 10.1785 10.1244 9.83333Z"
                            fill="#959FA3" />
                          <path
                            d="M10.1244 13.1667C10.1244 12.8215 9.84453 12.5417 9.49935 12.5417H4.49935C4.15417 12.5417 3.87435 12.8215 3.87435 13.1667C3.87435 13.5118 4.15417 13.7917 4.49935 13.7917H9.49935C9.84453 13.7917 10.1244 13.5118 10.1244 13.1667Z"
                            fill="#959FA3" />
                          <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M2.83268 0.875C1.56703 0.875 0.541016 1.90101 0.541016 3.16667V14.8333C0.541016 16.099 1.56703 17.125 2.83268 17.125H11.166C12.4317 17.125 13.4577 16.099 13.4577 14.8333V5.63971C13.4577 5.32241 13.3542 5.01375 13.1629 4.76058L10.6648 1.4542C10.3891 1.08941 9.9584 0.875 9.5012 0.875H2.83268ZM1.79102 3.16667C1.79102 2.59137 2.25739 2.125 2.83268 2.125H8.87435V5.7892C8.87435 6.13438 9.15417 6.4142 9.49935 6.4142H12.2077V14.8333C12.2077 15.4086 11.7413 15.875 11.166 15.875H2.83268C2.25739 15.875 1.79102 15.4086 1.79102 14.8333V3.16667Z"
                            fill="#959FA3" />
                        </svg>
                        Folder name
                      </div>
                    </div>
                  </a>
                </td>
                <td>
                  <div class="link-wrap">
                    <a href="">
                      <img src="assets/images/svg/link.svg" alt="">
                      Zip File
                    </a>
                  </div>
                </td>
                <td><a href="#">14.6 GB</a></td>
                <td><a href="#">1 Feb, 2020 At 5:30 PM</a></td>
                <td>
                  <div class="dropdown-wrap">
                    <button type="button" class="button-icon" id="dropdownMenuButton4" data-bs-toggle="dropdown">
                      <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                          fill="#191B1C" stroke="#191B1C" stroke-width="1.5" />
                      </svg>
              
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                      <li><a class="dropdown-item" href="#">Download</a></li>
                      <li><a class="dropdown-item" href="#">Print</a></li>
                      <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <!-- end Recent File -->

      <!-- ========  Payment History ==========  -->
      <section class="padding-bottom">
        <div class="component-title">
          <h4>Payment History</h4>
        </div>
        <div class="payment-history-list table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td>EKG464SJFN17</td>
                <td>10 Dec, 2021</td>
                <td>10 Dec, 2021</td>
                <td><button type="button" class="btn btn-primary2 pill small-btn">Button</button></td>
                <td>0077 **** **** 3814 (Visa)</td>
                <td>Premium (Yearly)</td>
                <td>$129.99 USD</td>
                <td>
                  <div class="dropdown-wrap ">
                    <button type="button" class="btn bg-primary-50 rounded-circle icon-btn" id="dropdownMenuButton6"
                      data-bs-toggle="dropdown">
                      <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                          fill="#191B1C" stroke="#191B1C" stroke-width="1.5" />
                      </svg>

                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.71875 8.5946L10 11.875L13.2812 8.5946" stroke="white" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M10 3.125V11.8727" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                              stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>


                          Download
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.99951 6.25V3.125H14.9995V6.25" stroke="#626C70" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z" stroke="#626C70" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path
                              d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                              stroke="#626C70" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                              fill="#626C70" />
                          </svg>

                          Print
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.875 4.375L3.125 4.37501" stroke="#E84646" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M8.125 8.125V13.125" stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M11.875 8.125V13.125" stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                              stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                              stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>

                            Delete
                          </a>
                        </li>
                    </ul>
                  </div>
                </td>
              </tr>
              <tr>
                <td>EKG464SJFN17</td>
                <td>10 Dec, 2021</td>
                <td>10 Dec, 2021</td>
                <td><button type="button" class="btn btn-primary2 pill small-btn">Button</button></td>
                <td>0077 **** **** 3814 (Visa)</td>
                <td>Premium (Yearly)</td>
                <td>$129.99 USD</td>
                <td>
                  <div class="dropdown-wrap ">
                    <button type="button" class="btn bg-primary-50 rounded-circle icon-btn" id="dropdownMenuButton7"
                      data-bs-toggle="dropdown">
                      <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                          fill="#191B1C" stroke="#191B1C" stroke-width="1.5" />
                      </svg>
              
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.71875 8.5946L10 11.875L13.2812 8.5946" stroke="white" stroke-width="1.25"
                              stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10 3.125V11.8727" stroke="white" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path
                              d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                              stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
              
              
                          Download
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4.99951 6.25V3.125H14.9995V6.25" stroke="#626C70" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z" stroke="#626C70" stroke-width="1.25"
                              stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                              stroke="#626C70" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                              fill="#626C70" />
                          </svg>
              
                          Print
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.875 4.375L3.125 4.37501" stroke="#E84646" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M8.125 8.125V13.125" stroke="#E84646" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M11.875 8.125V13.125" stroke="#E84646" stroke-width="1.25" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path
                              d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                              stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                              d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                              stroke="#E84646" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
              
                          Delete
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <!-- end Payment History -->


      



     
      


      <!-- ========  Cards ==========  -->

      <!-- card  -->
      <section>
        <div class="component-title">
          <h4>Basic Cards</h4>
        </div>
        <div class="card-blog">
           <div class="card-blog__img">
               <img src="assets/images/all-img/img-one.png" alt="card-img">
           </div>
           <div class="card-blog__info">
             <h2>This is a basic card title </h2>
             <p>
               Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
             </p>
             <a href="#" type="button" class="btn btn-primary2 pill btn-icon">
               <span class="button-content-wrapper">
                   <span class="button-icon align-icon-right">
                     <i class="ph-arrow-right"></i>
                   </span>
               <span class="button-text">
                     Read More
                   </span>
               </span>
             </a>
           </div>
        </div>
        <br>
        <div class="card-blog card-blog--two">
          <div class="card-blog__img">
            <img src="assets/images/all-img/img-two.png" alt="card-img">
          </div>
          <div class="card-blog__info">
            <h2>This is a basic card title </h2>
            <p>
              Nam non nunc tellus. Quisque cursus ligula pharetra risus ultricies, nec ullamcorper elit suscipit. Aliquam commodo est ut finibus aliquet.
            </p>
            <div class="card-blog__buttons">
               <a href="#" class="card-blog-redirect">
                 Card Link
                 <span>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>                    
                 </span>
               </a>
               <a href="#" class="card-blog-redirect">
               Another Card Link
                 <span>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>                    
                 </span>
               </a>
            </div>
          </div>
        </div> 
        <br>
        <div class="row">
          <div class=" col-lg-4 col-md-6">
            <div class="card-aligned">
              <div class="card-aligned__icon">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"/>
                  <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="card-aligned__info">
                <h2>This is a card title </h2>
                <p>
                  Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                </p>
                <a href="#"  class="btn btn-outline-primary pill btn-icon">
                  <span class="button-content-wrapper">
                      <span class="button-icon align-icon-right">
                        <i class="ph-arrow-right"></i>
                      </span>
                  <span class="button-text">
                        Read more 
                      </span>
                  </span>
                </a>
              </div>
            </div>

          </div>
          <div class=" col-lg-4 col-md-6">
            <div class="card-aligned card-aligned--center">
              <div class="card-aligned__icon">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"/>
                  <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="card-aligned__info">
                <h2>This is a card title </h2>
                <p>
                  Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                </p>
                <a href="#"  class="btn btn-outline-primary pill btn-icon">
                  <span class="button-content-wrapper">
                      <span class="button-icon align-icon-right">
                        <i class="ph-arrow-right"></i>
                      </span>
                  <span class="button-text">
                        Read more 
                      </span>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div class=" col-lg-4 col-md-6">
            
            <div class="card-aligned card-aligned--right">
              <div class="card-aligned__icon">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"/>
                  <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="card-aligned__info">
                <h2>This is a card title </h2>
                <p>
                  Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                </p>
                <a href="#"  class="btn btn-outline-primary pill btn-icon">
                  <span class="button-content-wrapper">
                      <span class="button-icon align-icon-right">
                        <i class="ph-arrow-right"></i>
                      </span>
                  <span class="button-text">
                        Read more 
                      </span>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <br>
        <!-- Background bg blog card   -->
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="card-bg" >
              <div class="card-bg__content" style="background: url('assets/images/all-img/cards/img-one.jpg') center center/cover no-repeat;">
                <h2>This is a Basic Card Title</h2>
                <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                <a href="#" class="btn btn-primary2 pill btn-icon">
                  <span class="button-content-wrapper">
                      <span class="button-icon align-icon-right">
                        <i class="ph-arrow-right"></i>
                      </span>
                  <span class="button-text">
                        Read More 
                      </span>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="card-basic">
              <h2>This is a Basic Card Title </h2>
              <p>
                Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
              </p>
              <a href="#" class="card-basic-redirect">
                Card Link
                <span>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>                    
                 </span>
              </a>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="card-basic card-basic--bg" style="background: url('assets/images/all-img/cards/img-two.png') center center/cover no-repeat;">
              <h2>This is a Basic Card Title </h2>
              <p>
                Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
              </p>
              <a href="#" class="card-basic-redirect">
                Card Link
                <span>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.125 10H16.875" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>                    
                 </span>
              </a>
            </div>
          </div>
        </div>
        <br>
        <!-- Priority card  -->
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="card-priority">
              <!-- top bar  -->
              <div class="card-priority__header">
                <div class="date">
                  <span class="icon">
                   <img src="assets/images/svg/clock.svg" alt="clock">
                  </span>
                  <p>14 Nov, 2021</p>
                </div>
                  <!-- actions  -->
                  <div class="card-priority__actions">
                      <span class="toggle-icon">
                        <img src="assets/images/svg/outline.svg" alt="toggle-icon">
                      </span>
                      <ul class="dropdown-actions">
                        <li>
                          <a href="#">
                            <span>
                              <img src="assets/images/svg/pen.svg" alt="pen">
                            </span>
                            Edit  
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <span>
                              <img src="assets/images/svg/copy-link.svg" alt="copylink">
                            </span>
                            Copy Link
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <span>
                              <img src="assets/images/svg/trash.svg" alt="copylink">
                            </span>
                            Delete
                          </a>
                        </li>
                      </ul>
                  </div>
              </div>
              <!-- Img Content  -->
              <div class="card-priority__img">
                <img src="assets/images/all-img/img-two.png" alt="">
              </div>
              <!-- labels  -->
              <div class="card-priority__labels">
                <ul>
                  <li><span class="labels medium">Medium Priority</span></li>
                  <li><span class="labels urgent">Urgents</span></li>
                </ul>
              </div>
              <h2 class="card-priority__title">
                Meeting with UI/UX Team to manage our  upcoming projects & task.
              </h2>
              <!-- priority footer  -->
              <div class="card-priority__footer">
                <div>
                  <ul class="labels-info">
                      <li>
                          <a href="#">
                              <span>
                                <img src="assets/images/svg/attach.svg" alt="icon">
                              </span>
                              5
                          </a>
                      </li>
                      <li>
                          <a href="#">
                            <span>
                              <img src="assets/images/svg/comments.svg" alt="icon">
                            </span>
                            19
                          </a>
                      </li>
                  </ul>
                </div>
                <div>
                  <ul class="users">
                    <li class="users-item"><img src="assets/images/all-img/users/one.png" alt="user-photo"></li>
                    <li class="users-item"><img src="assets/images/all-img/users/one.png" alt="user-photo"></li>
                    <li class="users-item"><img src="assets/images/all-img/users/one.png" alt="user-photo"></li>
                    <li class="users-item"><img src="assets/images/all-img/users/one.png" alt="user-photo"></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section> 
    </div>
</main>

{% endblock %}