<!-- Academic Calendar Section -->
<section class="py-5 bg-light border-top border-bottom">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-5">
<h3 class="fw-bold mb-3"><i class="bi bi-calendar3 text-primary me-2"></i>Academic Calendar</h3>
<p class="text-muted">Stay informed about the academic year, including semester starts, mid-terms, and public holidays. Planning ahead is key to success.</p>
<div class="list-group list-group-flush rounded-4 overflow-hidden shadow-sm">
<div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
<span>January Session Starts</span>
<span class="badge bg-primary rounded-pill">Jan 05</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
<span>Mid-term Exams</span>
<span class="badge bg-primary rounded-pill">March 12</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
<span>Industrial Attachment</span>
<span class="badge bg-primary rounded-pill">May 20</span>
</div>
</div>
<a href="#" class="btn btn-dark mt-4 px-4 py-2 rounded-3 w-100">
<i class="bi bi-file-pdf me-2"></i>Download Full Calendar 2024
</a>
</div>
<div class="col-lg-7">
<div class="calendar-img-wrapper p-2 bg-white shadow rounded-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-BP-kb7izH2D7DzPVrbco-Ymvv09bCT9N-4uZsSzBGNq0frLm8BA3SJUd&s=10" class="img-fluid rounded-3" alt="Calendar Concept">
</div>
</div>
</div>
</div>
</section>