Corporates/ Edu./ Company Notices

<!-- Latest Notice List Section -->
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-4">
      <div>
        <h6 class="text-primary fw-bold text-uppercase">Updates</h6>
        <h2 class="fw-bold">Latest Notices</h2>
      </div>
      <div class="d-none d-md-block">
        <button class="btn btn-outline-primary btn-sm"><i class="bi bi-filter me-1"></i> Filter by Category</button>
      </div>
    </div>

    <div class="notice-container shadow-sm rounded-4 overflow-hidden border">
      <!-- Notice Item 1 -->
      <div class="notice-item d-flex flex-column flex-md-row align-items-md-center p-4 border-bottom bg-white">
        <div class="date-box bg-primary text-white text-center rounded p-2 me-md-4 mb-3 mb-md-0">
          <span class="d-block fw-bold fs-4 lh-1">25</span>
          <span class="small text-uppercase">Oct</span>
        </div>
        <div class="flex-grow-1">
          <span class="badge bg-danger mb-2">Urgent</span>
          <h5 class="fw-bold mb-1">Final Examination Schedule - Winter 2024</h5>
          <p class="text-muted small mb-0">The final examinations for all trades will commence from November 15th. Please check your roll numbers.</p>
        </div>
        <div class="ms-md-4 mt-3 mt-md-0">
          <a href="#" class="btn btn-primary btn-sm px-3 rounded-pill">
            <i class="bi bi-download me-1"></i> PDF
          </a>
        </div>
      </div>

      <!-- Notice Item 2 -->
      <div class="notice-item d-flex flex-column flex-md-row align-items-md-center p-4 border-bottom bg-light">
        <div class="date-box bg-secondary text-white text-center rounded p-2 me-md-4 mb-3 mb-md-0">
          <span class="d-block fw-bold fs-4 lh-1">18</span>
          <span class="small text-uppercase">Oct</span>
        </div>
        <div class="flex-grow-1">
          <span class="badge bg-info mb-2">Admission</span>
          <h5 class="fw-bold mb-1">Revised Fees for Graphic Design Course</h5>
          <p class="text-muted small mb-0">Updated fee structure for the new batch starting in January 2025 has been published.</p>
        </div>
        <div class="ms-md-4 mt-3 mt-md-0">
          <a href="#" class="btn btn-primary btn-sm px-3 rounded-pill">
            <i class="bi bi-download me-1"></i> Download
          </a>
        </div>
      </div>

      <!-- Notice Item 3 -->
      <div class="notice-item d-flex flex-column flex-md-row align-items-md-center p-4 bg-white">
        <div class="date-box bg-secondary text-white text-center rounded p-2 me-md-4 mb-3 mb-md-0">
          <span class="d-block fw-bold fs-4 lh-1">10</span>
          <span class="small text-uppercase">Oct</span>
        </div>
        <div class="flex-grow-1">
          <span class="badge bg-success mb-2">Holiday</span>
          <h5 class="fw-bold mb-1">Notice Regarding Durga Puja Holidays</h5>
          <p class="text-muted small mb-0">Institue will remain closed from October 20th to October 24th due to religious festivals.</p>
        </div>
        <div class="ms-md-4 mt-3 mt-md-0">
          <a href="#" class="btn btn-primary btn-sm px-3 rounded-pill">
            <i class="bi bi-download me-1"></i> View
          </a>
        </div>
      </div>
    </div>
    <div class="text-center mt-4">
      <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
          <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item active"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>
</section>