    <!-- Topbar Start -->
    <div class="container-fluid px-1 px-md-1 px-lg-4 d-none d-lg-block" style="background-color: #3e4093;">
        <div class="row gx-0 align-items-center" style="height: 45px;">
            <div class="col-lg-8 text-center text-lg-start mb-lg-0">
                <div class="d-flex flex-wrap">
                    <!-- <a href="#" class="text-light me-4"><i class="fas fa-map-marker-alt text-primary me-2"></i>Shakti Sadan, Madan Ji Ka Hata, Ara , Bihar</a> -->
                    <a href="tel:+919006489591" class="text-light me-4"><i class="fas fa-phone-alt text-primary me-2"></i>+91 90064 89591</a>
                    <a href="email:gosteel.bihar@gmail.com" class="text-light me-0"><i class="fas fa-envelope text-primary me-2"></i>gosteel.bihar@gmail.com</a>
                </div>
            </div>
            <div class="col-lg-4 text-center text-lg-end">
                <div class="d-flex align-items-center justify-content-end">
                    <a href="#" class="btn btn-light btn-square border rounded-circle nav-fill me-3"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="btn btn-light btn-square border rounded-circle nav-fill me-3"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="btn btn-light btn-square border rounded-circle nav-fill me-3"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="btn btn-light btn-square border rounded-circle nav-fill me-0"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- Topbar End -->

    <style>
        .dropdown-menu .dropdown-toggle::before,
        .dropdown-menu .dropdown-toggle::after {
            position: absolute;
            top: 0.85em;
        }

        .dropdown-menu .dropdown-toggle::before {
            left: 0.255em;
        }

        .dropdown-menu .dropdown-toggle::after {
            right: 0.255em;
        }
    </style>

    <!-- Navbar & Hero Start -->
    <div class="container-fluid position-relative p-0">
        <nav class="navbar navbar-expand-lg navbar-light bg-white px-4 px-lg-5 py-3 py-lg-0">
            <a href="index.php" class="navbar-brand p-0">
                <img src="./img/logo.png" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                <span class="fa fa-bars"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav ms-auto py-0">
                    <a href="index.php" class="nav-item nav-link active">Home</a>
                    <div class="dropdown">
                        <a href="" class="nav-link dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">About Us</a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item" href="reach-presence.php">Reach & Presence</a></li>
                            <li><a class="dropdown-item" href="awards.php">Awards</a></li>
                            <li><a class="dropdown-item" href="bank-details.php">Bank Details</a></li>
                            <li><a class="dropdown-item" href="history.php">History</a></li>
                            <li class="dropstart">
                                <a class="dropdown-item dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" data-bs-offset="-9,2" aria-expanded="false" href="#">People Behind Us</a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                    <li><a class="dropdown-item" href="about-founder.php">Founder</a></li>
                                    <li><a class="dropdown-item" href="board-of-trustees.php">Our Board of Trustees</a></li>
                                    <li><a class="dropdown-item" href="our-people.php">Our People</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <a href="our-programs.php" class="nav-item nav-link">Our Programs</a>
                    <a href="our-activities.php" class="nav-item nav-link">Campaigns</a>

                    <div class="dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Media Center</a>
                        <div class="dropdown-menu m-0">
                            <a href="photo.php" class="dropdown-item">Photo</a>
                            <a href="media.php" class="dropdown-item">Media</a>
                        </div>
                    </div>

                    <div class="dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Resource Centre</a>
                        <div class="dropdown-menu m-0">
                            <a href="newsletter.php" class="dropdown-item">Newsletter</a>
                            <a href="annual-report.php" class="dropdown-item">Annual Report</a>
                        </div>
                    </div>

                    <div class="dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Get Involved</a>
                        <div class="dropdown-menu m-0">
                            <a href="donation.php" class="dropdown-item">Donation</a>
                            <a href="volunteerism.php" class="dropdown-item">Volunteerism</a>
                            <a href="career.php" class="dropdown-item">Career</a>
                            <a href="corporate.php" class="dropdown-item">Corporate</a>
                            <a href="internship.php" class="dropdown-item">Internship</a>
                        </div>
                    </div>

                    <a href="contact.php" class="nav-item nav-link">Contact</a>  

                    <!-- <div class="dropdown">
                        <a href="" class="nav-link dropdown-toggle" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">About Us</a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                            <li><a class="dropdown-item" href="reach-presence.php">Reach & Presence</a></li>
                            <li><a class="dropdown-item" href="awards.php">Awards</a></li>
                            <li><a class="dropdown-item" href="bank-details.php">Bank Details</a></li>
                            <li><a class="dropdown-item" href="history.php">History</a></li>
                            <li class="dropstart">
                                <a class="dropdown-item dropdown-toggle" role="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" data-bs-offset="-9,2" aria-expanded="false" href="#">People Behind Us</a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                                    <li><a class="dropdown-item" href="about-founder.php">Founder</a></li>
                                    <li><a class="dropdown-item" href="board-of-trustees.php">Our Board of Trustees</a></li>
                                    <li><a class="dropdown-item" href="our-people.php">Our People</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div> -->
                </div>

                <a href="donate-us.php" class="btn btn-primary rounded-pill text-white py-2 px-4 flex-wrap flex-sm-shrink-0">Donate Us</a>
            </div>
        </nav>
    </div>

    <!-- Navbar & Hero End -->

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Donation Your Help</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body appointment appointment-form">
                    <div class="container">
                        <div class="row">
                            <!-- Left Side: Form -->
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body appointment-form">
                                        <form>
                                            <div class="row g-3">
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control bg-transparent border border-white" id="name" placeholder="Your Name">
                                                        <label for="name">Your Name</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <input type="email" class="form-control bg-transparent border border-white" id="email" placeholder="Your Email">
                                                        <label for="email">Your Email</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <input type="phone" class="form-control bg-transparent border border-white" id="phone" placeholder="Phone">
                                                        <label for="phone">Your Phone</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control bg-transparent border border-white" id="project" placeholder="Project">
                                                        <label for="project">Donated Amount</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <label for="project">Attached Screenshot</label>
                                                    <input type="file" class="form-control bg-transparent border border-white" id="screenshot" placeholder="Attached Screenshot">
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <textarea class="form-control bg-transparent border border-white" placeholder="Leave a message here" id="message" style="height: 160px"></textarea>
                                                        <label for="message">Message</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <button class="btn btn-light text-primary w-100 py-3">Send Message</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- Right Side: Image -->
                            <div class="col-lg-6 d-flex align-items-center justify-content-center">
                                <img src="./images/qrcode.jpeg" alt="QR Code" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        document.querySelectorAll('.dropdown-menu .dropdown-toggle[href="#"]').forEach(function(element) {
            element.addEventListener('click', function(event) {
                event.stopPropagation();
            });
        });
    </script>