<header class="container-fluid">
    <nav class="navbar navbar-expand-lg px-md-5 navbar-light fixed-top bg-transparent">
        <a class="navbar-brand" href="index.php"><img src="img/newone.png" alt="Best Civil Services"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="about-us.php">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="packages.php">Constructions</a>
              </li>
            <li class="nav-item">
              <a class="nav-link" href="civil-services.php">Civil Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="civil-consultancy.php">Civil Consultancy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="interior-design.php">Interior Design</a>
              </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Project Gallery</a>
            </li>
            <!--<li class="nav-item">-->
            <!--    <a class="nav-link" href="careers.php">Careers</a>-->
            <!--  </li>-->
              <li class="nav-item">
                <a class="nav-link" href="contact.php">Contact Us</a>
              </li>
              <!--<li class="nav-item">-->
              <!-- <ul class="ml-lnk">-->
              <!--     <li><a href="mailto:hello@rkcivil.in">hello@rkcivil.in</a></li>-->
              <!--     <li><a href="tel:9019023888">+91 9019023888</a></li>-->
              <!-- </ul>-->
              <!--</li>-->
          </ul>
        </div>
      </nav>
</header>
<style>
.navbar-brand img {
    filter: grayscale(1) brightness(10);
}
  .navbar-brand img{transition:0.3s}
  .navbar-brand img{width:150px}
  .sticky {
    background-color: #000 !important;
}
.sticky .navbar-brand img{width:100px;filter: grayscale(1) brightness(10);}
.sticky a.nav-link {
    color: #fff !important;
}
.sticky .ml-lnk li a {
    color: #fff !important;
}
@media(max-width:991px){
    .navbar{background-color: rgba(7,53,83) !important;}
    .pack-bx {
    height: auto !important;
}
    a.nav-link {
    color: #fff !important;
}
.ml-lnk li a {
    color: #ffffff !important;
}
}
@media(max-width:600px){
  .banner-sec {
    padding: 9em 0 4em;
    background-position: center;
}
}
.navbar-toggler{background:#fff;}
a.nav-link {
    font-size: 14px !important;
}
</style>