document.addEventListener('DOMContentLoaded', function () {
    const navbar = `
 <style>
 
 .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: none !important;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
 
 </style>
     <nav class="navbar navbar-expand-lg bg-black ">
        <div class="container-fluid">
            <a class="navbar-brand ms-5" href="index.html">
                <img src="assest/img/KAREEM_20.02.20250-removebg-preview.png" alt="Logo" width="180" height="60"
                    class="d-inline-block align-text-top">

            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="bi bi-list text-white"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                  
                    <li class="nav-item">
                        <a class="nav-link scroll-link text-white fs-5 me-2 px-3" href="index.html"
                            data-target="paragraph2">
                            <i class=""></i> Home

                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll-link text-white fs-5 me-2 px-3" href="what we do.html"
                            data-target="paragraph3">
                            <i class=""></i> What We Do

                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll-link text-white fs-5 me-2 px-3" href="activities.html"
                            data-target="paragraph4">
                            <i class=""></i> Activities
                        </a>
                    <li class="nav-item">
                        <a class="nav-link scroll-link text-white fs-5 me-2 px-3" href="sustainability.html"
                            data-target="paragraph4">
                            <i class=""></i> Sustainability
                        </a>
                    <li class="nav-item">
                        <a class="nav-link scroll-link text-white fs-5 me-2 px-3" href="contact.html"
                            data-target="paragraph4">
                            <i class=""></i> Contact
                        </a>
                    <li class="nav-item dropdown dropdown-whith-icon">
                        <a href="" class="nav-link">
                            <img src="https://morganitegroup.com/public/assets/web/images/country-flag-16X16/en.png"
                                data-no-retina="">
                            <i class="fa-solid fa-angle-down d-none d-sm-block px-2 fs-14 text-gray-dark"></i>
                        </a>
                   
                        </li>

<li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle text-white fs-5 me-2 px-3" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pages
                         </a>
                       <ul class="dropdown-menu">
                         <li><a class="dropdown-item" href="about.html">About</a></li>
                         <li><a class="dropdown-item" href="story.html">Story</a></li>
                        
                         
                       </ul>
                    </li>
                </ul>

            </div>


            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item justify-content-center d-flex">
                        <a class="nav-link scroll-link text-white fs-6 me-2 px-4">
                            <i class="fontSize  bi bi-shop text-white"></i>
                        </a>
                        <a class="nav-link scroll-link text-white fs-6 me-2 px-4">
                            <i class="fontSize  bi bi-bag-check text-white"></i>
                        </a>
                        <a class="nav-link scroll-link text-white fs-6 me-2 px-4">
                            <i class="fontSize  bi bi-person text-white"></i>
                        </a>
                    </li>




                </ul>

            </div>

        </div>
    </nav>

  `;
    document.body.insertAdjacentHTML('afterbegin', navbar);
});