<!-- navbar.php -->
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5 py-lg-0">
    <a href="<?= base_url('/') ?>" class="navbar-brand d-flex align-items-center">
        <img src="<?= base_url('images/logo.png') ?>" alt="Al Rahma Sunday School" class="school-logo-circle" style="height: 40px; width: 40px; object-fit: cover; border-radius: 50%;">
        <h1 class="m-0 ms-2 green-title">Al Rahma Sunday School</h1>
    </a>
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav mx-auto">
            <a href="<?= base_url('/') ?>" class="nav-item nav-link active">Home</a>
            <a href="<?= base_url('/about') ?>" class="nav-item nav-link">About Us</a>
            <a href="<?= base_url('/classes') ?>" class="nav-item nav-link">Classes</a>
            <a href="<?= base_url('/contact') ?>" class="nav-item nav-link">Contact Us</a>
        </div>
        <a href="<?= base_url('/register') ?>" class="btn btn-primary rounded-pill px-3 d-none d-lg-block">Register
            <i class="fa fa-arrow-right ms-3"></i></a>
        <a href="<?= base_url('/user/login') ?>" class="btn btn-primary rounded-pill px-3 d-none d-lg-block">Login<i class="fa fa-arrow-right ms-3"></i></a>
    </div>
</nav>