<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Header Final</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif}

/* ================= HEADER ================= */
.main-header{
  background:#000;
  position:relative;
  z-index:9999;
}

.header-upper{
  padding:12px 0;
}

.auto-container{
  max-width:1200px;
  margin:auto;
  padding:0 15px;
}

.inner-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.logo img{
  height:36px;
}

/* DESKTOP MENU */
.main-menu ul{
  list-style:none;
  display:flex;
  gap:22px;
}

.main-menu ul li a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
}

/* DESKTOP BUTTONS */
.header-link-btn{
  display:flex;
  gap:10px;
}

.btn-1{
  padding:6px 16px;
  font-size:13px;
  background:#1677ff;
  color:#fff;
  border-radius:18px;
  text-decoration:none;
  white-space:nowrap;
}

/* TOGGLE */
.mobile-nav-toggler{
  display:none;
  cursor:pointer;
}

.mobile-nav-toggler img{
  width:22px;
}

/* ================= MOBILE MENU ================= */
.mobile-menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.mobile-menu.active{
  opacity:1;
  visibility:visible;
}

.menu-box{
  width:260px;
  height:100%;
  background:#000;
  padding:20px;
}

.close-btn{
  color:#fff;
  font-size:22px;
  cursor:pointer;
  margin-bottom:15px;
}

.menu-box ul{
  list-style:none;
}

.menu-box ul li a{
  display:block;
  padding:10px 0;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid #333;
}

/* MOBILE BUTTONS */
.mobile-auth-btns{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-auth-btns .btn-1{
  width:100%;
  text-align:center;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px){

  /* ❌ hide desktop stuff */
  .main-menu,
  .header-link-btn{
    display:none;
  }

  /* ✅ show toggle */
  .mobile-nav-toggler{
    display:block;
  }
}
/* Active menu */
.main-menu li.current > a,
.mobile-menu li.current > a,
.main-menu a.active,
.mobile-menu a.active {
  color: #1677ff;
  font-weight: 600;
}/* ================= DEVICE SAFE RESPONSIVE FIX ================= */

/* ---- Large laptops & MacBook ---- */
@media (min-width: 1200px){
  .main-menu ul{
    gap: 26px;
  }
  .btn-1{
    padding: 6px 18px;
    font-size: 13px;
  }
}

/* ---- Tablets (iPad, landscape phones) ---- */
@media (max-width: 1024px){
  .main-menu ul{
    gap: 16px;
  }
  .btn-1{
    padding: 5px 14px;
    font-size: 12px;
  }
}

/* ---- Tablets & small laptops ---- */
@media (max-width: 991px){
  .main-menu,
  .header-link-btn{
    display: none !important;
  }

  .mobile-nav-toggler{
    display: block !important;
  }
}

/* ---- Small phones (iPhone SE, mini) ---- */
@media (max-width: 480px){
  .logo img{
    height: 32px;
  }

  .mobile-nav-toggler img{
    width: 20px;
  }

  .menu-box{
    width: 240px;
  }

  .menu-box ul li a{
    font-size: 14px;
    padding: 8px 0;
  }

  .mobile-auth-btns .btn-1{
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ---- Very small screens safety ---- */
@media (max-width: 360px){
  .menu-box{
    width: 220px;
  }
}


</style>
</head>

<body>

<header class="main-header">
  <div class="header-upper">
    <div class="auto-container">
      <div class="inner-container">

        <!-- LOGO -->
        <div class="logo">
          <a href="index.php">
            <img src="assets/images/logo-light.png" alt="Logo">
          </a>
        </div>

        <!-- MENU -->
        <nav class="main-menu">
          <ul>
            <li><a href="index.php">Home</a></li>
<li><a href="partners-programe.php">Partners Programme</a></li>
<li><a href="account-types.php">Account Types</a></li>
<li><a href="about-us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>

          </ul>
        </nav>

        <!-- DESKTOP BUTTONS -->
        <div class="header-link-btn">
          <a href="https://client.primewavefx.com/login" class="btn-1">Log In</a>
          <a href="https://client.primewavefx.com/register" class="btn-1">Open Account</a>
        </div>

        <!-- TOGGLE -->
        <div class="mobile-nav-toggler">
          <img src="assets/images/icons/menu.svg" alt="">
        </div>

      </div>
    </div>
  </div>
</header>

<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
  <div class="menu-box">
    <div class="close-btn" id="closeMenu">✕</div>

    <ul>
      <li><a href="index.php">Home</a></li>
<li><a href="partners-programe.php">Partners Programme</a></li>
<li><a href="account-types.php">Account Types</a></li>
<li><a href="about-us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>

    </ul>

    <div class="mobile-auth-btns">
      <a href="https://client.primewavefx.com/login" class="btn-1">Log In</a>
      <a href="https://client.primewavefx.com/register" class="btn-1">Open Account</a>
    </div>
  </div>
</div>

<script>
const toggle = document.querySelector(".mobile-nav-toggler");
const mobileMenu = document.getElementById("mobileMenu");
const closeBtn = document.getElementById("closeMenu");

toggle.onclick = () => mobileMenu.classList.add("active");
closeBtn.onclick = () => mobileMenu.classList.remove("active");

mobileMenu.onclick = (e) => {
  if(e.target === mobileMenu){
    mobileMenu.classList.remove("active");
  }
};
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

  var currentPage = window.location.pathname.split("/").pop();
  if(currentPage === "") currentPage = "index.php";

  var links = document.querySelectorAll(".main-menu a, .mobile-menu a");

  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    var linkPage = link.getAttribute("href");

    if (linkPage === currentPage) {
      link.classList.add("active");

      var li = link.parentNode;
      if (li && li.tagName === "LI") {
        li.classList.add("current");
      }
    }
  }

});
</script>


</body>
</html>
