<section class="py-5">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="text-center my-3">
                <h3>Event <span class="text-success mb-4 fw-medium">Schedule</span></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor incididunt ut labore</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="d-flex justify-content-center mt-5">
                <ul class="nav nav-pills text-center">
                  <li class="nav-item me-2">
                    <a class="nav-link active btn-outline nav-pills d-block py-3 px-4" href="#">
                      Day-01
                      <span class="d-block fs-9">20 November 2017</span>
                    </a>
                  </li>
                  <li class="nav-item me-2">
                    <a class="nav-link btn-outline nav-pills d-block text-danger py-3 px-4" href="#">
                    Day-02
                      <span class="d-block fs-9">21 November 2017</span>
                    </a>
                  </li>
                  <li class="nav-item me-2">
                    <a class="nav-link btn-outline nav-pills d-block text-danger py-3 px-4" href="#">
                    Day-03
                      <span class="d-block fs-9">22 November 2017</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="table-responsive py-5">
                <table class="table table-striped table-bordered text-center">
                  <thead class="bg-secondary text-white text-uppercase">
                    <tr>
                      <th scope="col">Time</th>
                      <th scope="col">Speaker</th>
                      <th scope="col">Subject</th>
                      <th scope="col">Venue</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><i class="bi bi-stopwatch me-2"></i> 9.00 AM</td>
                      <td>Samanta Doe</td>
                      <td>Introduction to Wp</td>
                      <td>Auditorium A</td>
                    </tr>
                    <tr>
                      <td><i class="bi bi-stopwatch me-1"></i> 10.00 AM</td>
                      <td>Zerad Pawel</td>
                      <td>Principle of Wp</td>
                      <td>Auditorium B</td>
                    </tr>
                    <tr>
                      <td><i class="bi bi-stopwatch me-1"></i> 12.00 AM </td>
                      <td>Henry Mong</td>
                      <td>Wp Requirements</td>
                      <td>Auditorium C</td>
                    </tr>
                    <tr>
                      <td><i class="bi bi-stopwatch me-2"></i> 2.00 PM</td>
                      <td>Baily Leo</td>
                      <td>Introduction to Wp</td>
                      <td>Auditorium D</td>
                    </tr>
                    <tr>
                      <td><i class="bi bi-stopwatch me-2"></i> 3.00 PM </td>
                      <td>Lee Mun</td>
                      <td>Useful tips for Wp</td>
                      <td>Auditorium E</td>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </section>

                
            

                
                    
        @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
        @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

        :root {
            --bs-primary: #727cf5;
            --bs-primary-dark: #727cf5;
            --bs-secondary: #313a46;
            --bs-white: #ffffff;
            --bs-primary-rgb: 114, 124, 245;
            --bs-success: #0acf97;
            --bs-danger: #fa5c7c;
            --bs-success-rgb: 10, 207, 151;
            --bs-danger-rgb: 250, 92, 124;
        }

        body {
            font-family: 'Inter', sans-serif;
            font-size: .85rem;
            background: #fafbfe;
            color: var(--bs-secondary) !important;
        }

        .bg-primary {
            background-color: var(--bs-primary) !important;
        }

        .bg-secondary {
            background-color: var(--bs-secondary) !important;
        }

        a {
            text-decoration: none;
            color: var(--bs-secondary);
        }

        a:hover {
            color: var(--bs-primary);
        }

        h4 {
            color: #6c757d !important;
        }

        .fs-7 {
            font-size: .95rem !important;
        }

        .fs-8 {
            font-size: .90rem !important;
        }

        .fs-9 {
            font-size: .85rem !important;
        }

        .widget-flat {
            margin-bottom: 1.5rem;
        }

        .text-muted {
            --bs-text-opacity: 1;
            color: rgb(106 109 112 / 75%) !important;
        }

        .nav-link {
            text-transform: uppercase;
            font-size: 1.5rem;
            font-weight: 500;
            border: 1px solid #e5e5e5;
        }
        .nav-link span {
            color: #313a46;
        }
        .nav-link.active,
        .nav-link:hover {
            background: var(--bs-success) !important;
            color: #ffffff !important;
        }