<header class="ip-header" style="background-color:#57585A!important">
    <h1 class="ip-logo">
      <!-- logo -->
      <img id="nio" src="villaimg/logof.png" style="width:50%" alt="">
    </h1>
    <div class="ip-loader" style="visibility:hidden">
      <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
        <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
        <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
      </svg>
    </div>
  </header>
  <style type="text/css">
    body{
  -webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none; 
   user-select: none;

}
    @media(max-width:500px){
      .ip-loader{
        display:none;
      }
      #nio{
        margin-top:180px;
      }
    }
  </style>

  <!--cookie-->
  <!-- <div class="cookie">
          <div class="container">
            <div class="clearfix">
              <span>Please note this website requires cookies in order to function correctly, they do not store any specific information about you personally.</span>
              <div class="f-right"><a href="#" class="btn">Accept Cookies</a><a href="#" class="btn">Read More</a></div>
            </div>
          </div>
        </div>-->

  <!-- - - - - - - - - - - - - - Wrapper - - - - - - - - - - - - - - - - -->

  <div id="wrapper" class="wrapper-container">

    <!-- facebook link -->
    <a href="https://www.facebook.com/springfieldsvellore" class="fb-link"><i class="icon-facebook"></i></a>
    
    <!-- main navigation -->
    <div id="navbar-menu" class="navbar-menu"  style="background-color:#ffffff!important">

      <button type="button" id="navbar-close" class="nav-bttn close-bttn" style="color:#000000 !important;">Close</button>
      
      <!-- Menu -->
      <nav class="nav-menu" style="margin-top:10px!important">
        <ul>
         <li style="color:#CCC8AC!important"><img class="" src="logos/1.png" style="height:50px" align="left"><a style="color:#CCC8AC!important" href="villa1.php">Villa 1 - <span style="color:black;font-size:11px;font-weight:700;">PARK VIEW VILLA</span></a></li>
		 <br>
          <li style="color:#F6AE13"><img class="" src="logos/2.png" style="height:50px" align="left"><a style="color:#F6AE13" href="villa2.1.php">Villa 2.1 - <span style="color:black;font-size:11px;font-weight:700;">PREMIUM VILLA</span></a></li>
		  <br>
          <li style="color:#B18DC2"><img class="" src="logos/2.2.png" style="height:50px" align="left"><a style="color:#B18DC2" href="villa2.2.php">Villa 2.2 - <span style="color:black;font-size:11px;font-weight:700;">PREMIUM VILLA 2</span></a></li>
		  <br>
          <li style="color:#74C8C1"><img class="" src="logos/3a.png" style="height:50px" align="left"><a style="color:#74C8C1" href="villa3.php">Villa 3 - <span style="color:black;font-size:11px;font-weight:700;">DELUXE VILLA</span></a></li>
		  <br>
          <li style="color:#ED7F5C"><img class="" src="logos/5.png" style="height:50px" align="left"><a style="color:#ED7F5C" href="row_house.php">Row House</a></li>
		  <br>
          <!-- <li style="color:#ED7F5C"><img class="imo" src="logos/5.png" style="height:50px" align="left"><a style="color:#ED7F5C" href="row_house.php">Row House</a></li> -->
          <li style="color:#FEF225"><img class="" src="logos/clubhouse.png" style="height:50px" align="left"><a style="color:#FEF225" href="club_house.php">Club Area</a></li>
			<br>
          <!-- <li style="color:#FEF225"><img class="imo" src="logos/clubhouse.png" style="height:50px" align="left"><a style="color:#FEF225" href="club_house.php">Club Area
          </a></li>-->
          <li style="color:#95C849"><img class="" src="logos/7.png" style="height:50px" align="left"><a style="color:#95C849" href="park.php">Park - <span style="color:black;font-size:11px;font-weight:700;">PLAY AREA</span></a></li>
			<br>
         <!--  <li style="color:#95C849"><img class="imo" src="logos/7.png" style="height:50px" align="left"><a style="color:#95C849" href="park.php">Park
          </a><br><b style="color:black">PLAY AREA</b></li>  -->
           <li style="color:#749F14"><a style="color:#749F14" href="about.php">Founder</a></li>
           <li style="color:#9e9e9e"><a style="color:#9e9e9e" href="project_highlights.php">Project Highlights</a></li>
           <li style="color:#FABC36" ><a href="springfields-brochure.pdf" class="awesome" style="color:#FABC36" download>Download Brochure</a></li>
          <!-- <li class="sub-menu"><a href="#">News</a>
            <ul>
              <li><a href="news.php">News</a></li>
              <li><a href="news_single.php">Single News</a></li>
            </ul>
          </li> -->
          <li style="color:#CD681F"><a style="color:#CD681F" href="contact.php">Contact</a></li>
         <!--  <li class="sub-menu"><a href="#">Features</a>
            <ul>
              <li><a href="shortcodes.php">Shortcodes</a></li>
              <li><a href="typography.php">Typography</a></li>
              <li><a href="./rtl/index.php">RTL Version</a></li>
            </ul>
          </li> -->
        </ul>
      </nav>

    </div>

    <!-- - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - -->

    <header id="header" class="sticky-header" style="background-color:#57585a8c">

      <!-- Menu toggle btn -->
      <button type="button" class="navbar-toggle nav-bttn">Menu</button>

      <!-- logo -->
      <a href="index.php" class="logo"><img src="villaimg/logof.png" width='180' alt=""></a>
      
      <!-- Menu -->
      <nav class="nav-menu type-hr">
        <ul>
         <li><a href="project_highlights.php">Projects Highlights</a></li>
          <li><a href="about.php">Founder</a></li>
          
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </nav>

    </header>
    <style type="text/css">
      .imo{
        display:none;
      }
      @media(max-width:500px){
        .imo{
          display:block;
        }
      }
    </style>
    <style type="text/css">
        .awesome {
    
  color: #FABC36;
  background-image: -webkit-linear-gradient(92deg, #FABC36, #feab3a,#749F14);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

    </style>