<!DOCTYPE php>
<php lang="en">
<head>
<meta charset="utf-8">
<title>Akemilex</title>
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link href="css/style.css" rel="stylesheet">

<!--<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">-->
<!--<link rel="icon" href="images/favicon.png" type="image/x-icon">-->
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/php5shiv/3.7.3/php5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />

</head>

<body>

<div class="page-wrapper">

  <!-- Main Header--> 
  <header class="main-header header-style-one">
    <div class="header-lower">
      <div class="auto-container">
        <!-- Main box -->
        <div class="main-box">
          <div class="logo-box">
            <div class="logo"><a href="index.php"><img src="images/logo.png" alt="" title="Tronis" style="max-width: 200px; border-radius: 10px"></a></div>
          </div>

          <!--Nav Box-->
          <div class="nav-outer">    
            <nav class="nav main-menu">
              <ul class="navigation">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About Us</a></li>
                <li class="dropdown">
                    <a href="#">Services</a>
                    <ul>
                        <li><a href="italian-marble-restoration.php">Marble Restoration</a></li>
                        <li><a href="mosaic-floor-polishing.php">Mosaic Floor Polishing</a></li>
                        <li><a href="granite-floor-polishing.php">Granite Floor Polishing</a></li>
                        <li><a href="tile-cleaning-restoration.php">Tile Cleaning & Restoration</a></li>
                        <li><a href="corian-polishing.php">Corian Polishing</a></li>
                    </ul>
                </li>
                <li><a href="projects.php">Projects</a></li>
                <li><a href="blog.php">Blog</a></li>
                <li><a href="contact.php">Contact Us</a></li>
              </ul>
            </nav>
            <!-- Main Menu End-->
          </div>

          <div class="outer-box">
            <div class="btn">
              <a href="contact.php" class="theme-btn">Get In Touch</a>
            </div>
            <div class="mobile-nav-toggler">
              <i class="fa fa-bars"></i>
            </div>
          </div>
        </div>
        <!-- Mobile Menu  -->
      </div>
    </div>
    <div class="mobile-menu">
      <div class="menu-backdrop"></div>
    
      <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
      <nav class="menu-box">
        <div class="upper-box">
          <div class="nav-logo"><a href="index-2.php"><img src="images/logo.png" alt="" title=""></a></div>
          <div class="close-btn"><i class="icon fa fa-times"></i></div>
        </div>
    
        <ul class="navigation clearfix">
          <!--Keep This Empty / Menu will come through Javascript-->
        </ul>
        <ul class="contact-list-one">
          <li>
            <!-- Contact Info Box -->
            <div class="contact-info-box">
              <i class="icon lnr-icon-phone-handset"></i>
              <span class="title">Call Now</span>
              <a href="tel:+92880098670">+92 (8800) - 98670</a>
            </div>
          </li>
          <li>
            <!-- Contact Info Box -->
            <div class="contact-info-box">
              <span class="icon lnr-icon-envelope1"></span>
              <span class="title">Send Email</span>
              <a href="https://php.kodesolution.com/cdn-cgi/l/email-protection#68000d0418280b070518090611460b0705"><span class="__cf_email__" data-cfemail="caa2afa6ba8aa9a5a7baaba4b3e4a9a5a7">[email&#160;protected]</span></a>
            </div>
          </li>
          <li>
            <!-- Contact Info Box -->
            <div class="contact-info-box">
              <span class="icon lnr-icon-clock"></span>
              <span class="title">Send Email</span>
              Mon - Sat 8:00 - 6:30, Sunday - CLOSED
            </div>
          </li>
        </ul>
    
    
        <ul class="social-links">
          <li><a href="#"><i class="fa fa-x"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#"><i class="fab fa-pinterest"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul>
      </nav>
    </div><!-- End Mobile Menu -->

    <!-- Header Search -->
    <div class="search-popup">
      <span class="search-back-drop"></span>
      <button class="close-search"><span class="fa fa-times"></span></button>
    
      <div class="search-inner">
        <form method="post" action="https://php.kodesolution.com/2024/tilepro-php/index.php">
          <div class="form-group">
            <input type="search" name="search-field" value="" placeholder="Search..." required="">
            <button type="submit"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </div>
    </div>
    <!-- End Header Search -->

    <!-- Sticky Header  -->
    <div class="sticky-header">
      <div class="auto-container">
        <div class="inner-container">
          <!--Logo-->
          <div class="logo">
            <a href="index.php" title=""><img src="images/logo.png" alt="" title=""></a>
          </div>
    
          <!--Right Col-->
          <div class="nav-outer">
            <!-- Main Menu -->
            <nav class="main-menu">
              <div class="navbar-collapse show collapse clearfix">
                <ul class="navigation clearfix">
                  <!--Keep This Empty / Menu will come through Javascript-->
                </ul>
              </div>
            </nav><!-- Main Menu End-->
            
             <!-- Social Icons -->
    <div class="header-social">
      <!--<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>-->
      <!--<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>-->
      <!--<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>-->
    </div>
    
            <!--Mobile Navigation Toggler-->
            <div class="mobile-nav-toggler">
              <i class="fa fa-bars"></i>
            </div>
          </div>
        </div>
      </div>
    </div><!-- End Sticky Menu -->
  </header>
  <!--End Main Header -->
  
  <style>
      /* Header layout */
.sticky-header .inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Right side: menu + social + toggle */
.sticky-header .nav-outer {
  display: flex;
  align-items: center;
}

/* Main menu */
.sticky-header .main-menu {
  margin-right: 50px;
}

/* Social icons */
.header-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 20px;
}

.header-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f4f3e; /* matches your green */
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.3s ease;
}

.header-social a:hover {
  background: #1f362a;
  transform: translateY(-3px);
}

/* Mobile toggle */
.mobile-nav-toggler {
  margin-left: 10px;
}

  </style>