<style>
/* Nav links */
.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-900);
  transition: color 0.3s;
}

.nav-link:hover {
  color: var(--red-500);
}

/* underline animation */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--red-500);
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile links */
.mobile-link {
  display: inline-flex;
  width: 100%;
  color: #f8fafc;
  transition: all 0.25s ease;
}

.mobile-link:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.mobile-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f8fafc;
  cursor: pointer;
}

.mobile-summary:hover {
  background: rgba(255,255,255,0.14);
}

.mobile-submenu {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 1rem;
}

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] .mobile-summary span {
  transform: rotate(45deg);
}

.mobile-cta {
  width: 100%;
  text-align: center;
}

.dropdown-panel {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 39, 71, 0.08);
  box-shadow: 0 22px 50px rgba(8, 26, 51, 0.12);
}

.dropdown-item {
  color: var(--navy-900);
}

.dropdown-item:hover {
  background: rgba(15, 39, 71, 0.05);
  color: var(--red-500);
}

.dropdown-icon {
  color: var(--navy-900);
  background: rgba(15, 39, 71, 0.08);
}

.dropdown-item:hover .dropdown-icon {
  color: #ffffff;
  background: var(--red-500);
}

</style>
<header id="header"
class="fixed top-0 left-0 w-full z-50 transition-all duration-300">

<div class="w-full  ">

<div id="navContainer"
class="glass-panel flex items-center justify-between h-20 transition-all duration-300  px-6">

<!-- Logo -->
<div class="flex items-center gap-3">
<img src="<?php echo e(asset('images/Across_Immigration.png')); ?>" class="h-16 w-auto transition-all duration-300" id="logo" alt="Across Immigration">
</div>

<!-- Desktop Menu -->
<nav class="hidden md:flex items-center gap-8">

<a href="/" class="nav-link">Home</a>
<a href="/about" class="nav-link">About Us</a>

<div class="relative group">
  <a href="/services" class="nav-link flex items-center gap-2">
    Services <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </a>
  <div class="dropdown-panel absolute hidden group-hover:block rounded-lg mt-2 py-3 min-w-[250px]">
    <a href="<?php echo e(route('front.single-service')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">travel_explore</span>
      </div>
      Immigration Advisory
    </a>
    <a href="<?php echo e(route('front.single-service')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">account_balance</span>
      </div>
      Investment Advisory
    </a>
    <a href="<?php echo e(route('front.single-service')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">gavel</span>
      </div>
      Legal Support
    </a>
  </div>
</div>

<div class="relative group">
  <button class="nav-link flex items-center gap-2">
    Programs <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </button>
  <div class="dropdown-panel absolute hidden group-hover:block rounded-lg mt-2 py-3 min-w-[250px]">
    <a href="<?php echo e(route('front.programs')); ?>#citizenship" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="font-bold text-sm">C</span>
      </div>
      Citizenship by Investment
    </a>
    <a href="<?php echo e(route('front.programs')); ?>#residency" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="font-bold text-sm">R</span>
      </div>
      Residency by Investment
    </a>
    <a href="<?php echo e(route('front.programs')); ?>#real-estate" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="font-bold text-sm">R</span>
      </div>
      Real Estate Program
    </a>
  </div>
</div>


<div class="relative group">
  <button class="nav-link flex items-center gap-2">
    Insights <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </button>
  <div class="dropdown-panel absolute hidden group-hover:block rounded-lg mt-2 py-3 min-w-[250px]">
    <a href="<?php echo e(route('front.blog')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">travel_explore</span>
      </div>
      Blog
    </a>
    <a href="<?php echo e(route('front.news')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">account_balance</span>
      </div>
      News
    </a>
  
  </div>
</div>
<div class="relative group">
  <button class="nav-link flex items-center gap-2">
    Resources <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </button>
  <div class="dropdown-panel absolute hidden group-hover:block rounded-lg mt-2 py-3 min-w-[250px]">
    <a href="/faq" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">travel_explore</span>
      </div>
      FAQ
    </a>
    <a href="<?php echo e(route('front.download-center')); ?>" class="dropdown-item flex items-center gap-3 px-4 py-3 transition-colors">
      <div class="dropdown-icon w-8 h-8 rounded-full flex items-center justify-center transition-colors">
        <span class="material-symbols-outlined text-lg">account_balance</span>
      </div>
      Download center
    </a>
  
  </div>
</div>
<a href="<?php echo e(route('front.events')); ?>" class="nav-link">Events</a>
<a href="/contact" class="nav-link">Contact</a>

</nav>

<!-- Right -->
<div class="flex items-center gap-4">

<a href="/contact"
class="hidden lg:inline-flex accent-cta text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg hover:shadow-2xl hover:-translate-y-[2px] active:scale-[0.97] transition-all duration-300">
Get a Free Consultation
</a>

<!-- Mobile Btn -->
<button id="menuBtn" class="md:hidden text-2xl text-secondary font-black" aria-label="Open navigation">
&#9776;
</button>

</div>

</div>

<!-- Mobile Menu -->
<div id="mobileMenu"
class="fixed top-0 left-0 w-full h-screen bg-secondary/95 z-[50] text-white backdrop-blur-xl z-40 translate-x-full transition-transform duration-500">

<div class="relative flex flex-col justify-center items-center h-full gap-4 text-lg font-semibold px-6">
  <button id="closeMobileMenu" aria-label="Close navigation" class="absolute top-6 right-6 text-4xl text-white hover:text-primary transition-colors">
    &times;
  </button>

  <a href="/" class="mobile-link py-4 px-6 rounded-3xl bg-white/10">Home</a>
  <a href="/about" class="mobile-link py-4 px-6 rounded-3xl bg-white/10">About Us</a>

  <details class="w-full rounded-3xl bg-white/10">
    <summary class="mobile-summary">Services <span class="text-xl">+</span></summary>
    <div class="mobile-submenu">
      <a href="<?php echo e(route('front.single-service')); ?>" class="mobile-link">Immigration Advisory</a>
      <a href="<?php echo e(route('front.single-service')); ?>" class="mobile-link">Investment Advisory</a>
      <a href="<?php echo e(route('front.single-service')); ?>" class="mobile-link">Legal Support</a>
    </div>
  </details>

  <details class="w-full rounded-3xl bg-white/10">
    <summary class="mobile-summary">Programs <span class="text-xl">+</span></summary>
    <div class="mobile-submenu">
      <a href="<?php echo e(route('front.programs')); ?>#citizenship" class="mobile-link">Citizenship by Investment</a>
      <a href="<?php echo e(route('front.programs')); ?>#residency" class="mobile-link">Residency by Investment</a>
      <a href="<?php echo e(route('front.programs')); ?>#real-estate" class="mobile-link">Real Estate Program</a>
    </div>
  </details>

  <details class="w-full rounded-3xl bg-white/10">
    <summary class="mobile-summary">Insights <span class="text-xl">+</span></summary>
    <div class="mobile-submenu">
      <a href="<?php echo e(route('front.blog')); ?>" class="mobile-link">Blog</a>
      <a href="<?php echo e(route('front.news')); ?>" class="mobile-link">News</a>
    </div>
  </details>

  <details class="w-full rounded-3xl bg-white/10">
    <summary class="mobile-summary">Resources <span class="text-xl">+</span></summary>
    <div class="mobile-submenu">
      <a href="/faq" class="mobile-link">FAQ</a>
      <a href="<?php echo e(route('front.download-center')); ?>" class="mobile-link">Download Center</a>
    </div>
  </details>

  <a href="<?php echo e(route('front.events')); ?>" class="mobile-link py-4 px-6 rounded-3xl bg-white/10">Events</a>
  <a href="/contact" class="mobile-link py-4 px-6 rounded-3xl bg-white/10">Contact</a>

  <a href="/contact" class="mobile-cta mt-6 accent-cta text-white px-8 py-3 rounded-xl font-bold">
    Get a Free Consultation
  </a>

</div>

</div>

</header>
<script>

const menuBtn = document.getElementById("menuBtn");
const mobileMenu = document.getElementById("mobileMenu");
const navContainer = document.getElementById("navContainer");
const logo = document.getElementById("logo");
const header = document.getElementById("header");
const closeMobileMenu = document.getElementById("closeMobileMenu");

// Mobile menu toggle (slide instead of hide)
menuBtn.addEventListener("click", () => {
  mobileMenu.classList.toggle("translate-x-full");
});

// Close button inside mobile menu
const closeMenu = () => {
  mobileMenu.classList.add("translate-x-full");
};

closeMobileMenu.addEventListener("click", closeMenu);

// Close menu on click link
document.querySelectorAll(".mobile-link").forEach(link => {
  link.addEventListener("click", closeMenu);
});

// Shrink header on scroll
let lastScrollY = window.scrollY;
window.addEventListener("scroll", () => {
  if (window.scrollY > 50) {
    navContainer.classList.add("shadow-lg");
    // logo.classList.add("h-12");
    // logo.classList.remove("h-16");
  } else {
    navContainer.classList.remove("shadow-lg");
    // logo.classList.add("h-16");
    // logo.classList.remove("h-12");
  }

  // Hide header on scroll down, show on scroll up
  if (window.scrollY > lastScrollY) {
    header.classList.add('-translate-y-full');
  } else {
    header.classList.remove('-translate-y-full');
  }
  lastScrollY = window.scrollY;
});

</script>
<?php /**PATH C:\Users\logic\Desktop\across_Immigration\resources\views\components\front\header.blade.php ENDPATH**/ ?>