.elementor-8 .elementor-element.elementor-element-9e39462{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Kdex9 Digitals</title>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#003057;
  --blue:#0099ff;
  --blue2:#33b5ff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --light:#e8f4ff;
  --f:'Questrial',sans-serif;
}
body{font-family:var(--f);background:#f3f4f6;}

/* ── HEADER ── */
.header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
}

/* ── DESKTOP INNER ── */
.inner{
  max-width:1300px;
  margin:0 auto;
  height:72px;
  display:flex;align-items:center;
  padding:0 40px;gap:32px;
}

/* ── LOGO ── */
.logo{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;flex-shrink:0;
}
.logo-box{
  width:40px;height:40px;
  background:var(--navy);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f);font-size:14px;color:#fff;
  transition:transform .3s,border-radius .3s,background .3s;
  flex-shrink:0;
}
.logo:hover .logo-box{transform:rotate(-8deg);border-radius:50%;background:var(--blue);}
.logo-name{font-family:var(--f);font-size:19px;color:var(--navy);letter-spacing:-.01em;white-space:nowrap;}
.logo-name b{color:var(--blue);font-weight:400;}

/* ── DESKTOP NAV ── */
nav{display:flex;align-items:center;gap:2px;flex:1;}
.ni{position:relative;}
.nl{
  font-family:var(--f);font-size:15px;color:var(--muted);
  padding:8px 13px;
  display:flex;align-items:center;gap:4px;
  cursor:pointer;position:relative;
  transition:color .2s;user-select:none;white-space:nowrap;
}
.nl::after{
  content:'';
  position:absolute;bottom:3px;left:13px;right:13px;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nl:hover,.ni.open .nl{color:var(--navy);}
.nl:hover::after,.ni.open .nl::after{transform:scaleX(1);}
.nl .chev{width:11px;height:11px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s;}
.ni.open .nl .chev{transform:rotate(180deg);}

/* ── DESKTOP DROPDOWN ── */
.drop{
  position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--border);
  border-top:2.5px solid var(--blue);
  border-radius:0 0 10px 10px;
  box-shadow:0 10px 32px rgba(0,48,87,.11);
  padding:8px;min-width:215px;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:999;
}
.ni.open .drop{opacity:1;transform:translateY(0);pointer-events:auto;}
.drop a{
  display:block;font-family:var(--f);font-size:14px;color:#374151;
  padding:9px 12px;border-radius:6px;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s;
}
.drop a:hover{background:var(--light);color:var(--navy);}

/* ── DESKTOP ACTIONS ── */
.actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.btn-call{
  font-family:var(--f);font-size:14px;color:var(--navy);
  padding:9px 20px;border-radius:100px;
  border:1.5px solid var(--navy);background:#fff;cursor:pointer;
  white-space:nowrap;transition:background .2s,color .2s;
}
.btn-call:hover{background:var(--navy);color:#fff;}
.btn-hire{
  font-family:var(--f);font-size:14px;color:#fff;
  padding:10px 22px;border-radius:100px;border:none;
  background:#0c6ca2;
  cursor:pointer;white-space:nowrap;
  box-shadow:none;
  transition:opacity .2s,transform .15s;
}
.btn-hire:hover{opacity:.9;transform:translateY(-1px);}

/* ── HAMBURGER ── */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:6px;margin-left:auto;flex-shrink:0;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--navy);border-radius:2px;
  transition:transform .3s,opacity .25s,width .25s;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;width:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── MOBILE DRAWER ── */
.mob-drawer{
  background:#fff;
  border-top:1px solid var(--border);
  overflow:hidden;
  max-height:0;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
}
.mob-drawer.open{max-height:100vh;}
.mob-inner{padding:8px 0 24px;}

/* Mobile nav items */
.mob-ni{}
.mob-nl{
  font-family:var(--f);font-size:16px;color:var(--navy);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #f3f4f6;
  cursor:pointer;transition:color .2s,background .2s;
}
.mob-nl:hover{background:#f9fafb;}
.mob-nl.active{color:var(--blue);}
.mob-nl .chev{
  width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .25s;
}
.mob-ni.open .mob-nl .chev{transform:rotate(180deg);}
.mob-ni.open .mob-nl{color:var(--blue);}

/* Mobile sub-links */
.mob-drop{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#fafbfc;}
.mob-ni.open .mob-drop{max-height:400px;}
.mob-drop a{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f);font-size:14.5px;color:var(--muted);
  padding:11px 24px 11px 36px;
  border-bottom:1px solid #f0f1f3;
  text-decoration:none;
  transition:color .15s,background .15s;
}
.mob-drop a::before{content:'–';font-size:12px;color:var(--blue);flex-shrink:0;}
.mob-drop a:hover{color:var(--navy);background:#f0f6ff;}

/* Plain mobile links (no dropdown) */
.mob-plain{
  font-family:var(--f);font-size:16px;color:var(--navy);
  padding:14px 24px;display:block;
  border-bottom:1px solid #f3f4f6;
  text-decoration:none;
  transition:color .15s,background .15s;
}
.mob-plain:hover{color:var(--blue);background:#f9fafb;}

/* Mobile CTA buttons */
.mob-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:20px 24px 0;
}
.mob-actions .btn-call{
  width:100%;padding:13px;text-align:center;
  font-size:15px;border-radius:100px;
}
.mob-actions .btn-hire{
  width:100%;padding:13px;text-align:center;
  font-family:var(--f);font-size:15px;color:#fff;
  border-radius:100px;border:none;
  background:linear-gradient(120deg,var(--blue),var(--navy));
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,153,255,.3);
}

/* ── BREAKPOINTS ── */
@media(max-width:900px){
  nav,.actions{display:none;}
  .hamburger{display:flex;}
  .inner{padding:0 20px;}
}
@media(max-width:380px){
  .logo-name{font-size:16px;}
  .logo-box{width:34px;height:34px;font-size:12px;}
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}

.logo-img{
  height:45px !important;
  width:auto;
  display:block;
  transition:transform .3s ease;
}

.logo:hover .logo-img{
  transform:scale(1.03);
}
</style>
</head>
<body>

<div class="header">

  <!-- Top bar -->
  <div class="inner">
    <a class="logo" href="#">
  <img src="https://www.kdex9digitals.com/wp-content/uploads/2026/06/6458701.png" alt="Kdex9 Digitals Logo" class="logo-img">
</a>

    <!-- Desktop nav -->
    <nav>
  <div class="ni"><div class="nl">Home</div></div>
      <div class="ni" id="s">
        <div class="nl" onclick="tog('s')">Services
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="drop">
          <a href="#">Web Design & Development</a>
          <a href="#">Digital Marketing</a>
          <a href="#">Brand Identity</a>
          <a href="#">SEO & Content</a>
          <a href="#">E-commerce</a>
          <a href="#">Cloud & Hosting</a>
        </div>
      </div>
      <div class="ni" id="ab">
        <div class="nl" onclick="tog('ab')">About
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="drop">
          <a href="#">Who We Are</a>
          <a href="#">Our Team</a>
          <a href="#">Our Process</a>
          <a href="#">Careers</a>
        </div>
      </div>
      <div class="ni" id="ins">
        <div class="nl" onclick="tog('ins')">Insights
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="drop">
          <a href="#">Blog</a>
          <a href="#">Case Studies</a>
          <a href="#">News</a>
        </div>
      </div>
      <div class="ni"><div class="nl">Portfolio</div></div>
      <div class="ni"><div class="nl">Pricing</div></div>
    </nav>

    <!-- Desktop CTAs -->
    <div class="actions">
      <button class="btn-call">Call Us</button>
      <button class="btn-hire">Hire a Developer</button>
    </div>

    <!-- Hamburger -->
    <button class="hamburger" id="hbg" onclick="toggleMob()" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </button>
  </div>

  <!-- Mobile drawer -->
  <div class="mob-drawer" id="mob-drawer">
    <div class="mob-inner">

      <div class="mob-ni" id="ms">
        <div class="mob-nl" onclick="mobtog('ms')">
          Services
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="mob-drop">
          <a href="#">Web Design & Development</a>
          <a href="#">Digital Marketing</a>
          <a href="#">Brand Identity</a>
          <a href="#">SEO & Content</a>
          <a href="#">E-commerce</a>
          <a href="#">Cloud & Hosting</a>
        </div>
      </div>

      <div class="mob-ni" id="mab">
        <div class="mob-nl" onclick="mobtog('mab')">
          About
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="mob-drop">
          <a href="#">Who We Are</a>
          <a href="#">Our Team</a>
          <a href="#">Our Process</a>
          <a href="#">Careers</a>
        </div>
      </div>

      <div class="mob-ni" id="mins">
        <div class="mob-nl" onclick="mobtog('mins')">
          Insights
          <svg class="chev" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4"/></svg>
        </div>
        <div class="mob-drop">
          <a href="#">Blog</a>
          <a href="#">Case Studies</a>
          <a href="#">News</a>
        </div>
      </div>

      <a class="mob-plain" href="#">Portfolio</a>
      <a class="mob-plain" href="#" style="border-bottom:none;">Pricing</a>

      <div class="mob-actions">
        <button class="btn-call">Call Us</button>
        <button class="btn-hire">Hire a Developer</button>
      </div>

    </div>
  </div>

</div>


<script>
// Desktop dropdowns
function tog(id){
  document.querySelectorAll('.ni').forEach(el=>{if(el.id!==id)el.classList.remove('open');});
  const el=document.getElementById(id);if(el)el.classList.toggle('open');
}
document.addEventListener('click',e=>{
  if(!e.target.closest('.ni'))
    document.querySelectorAll('.ni').forEach(el=>el.classList.remove('open'));
});

// Mobile menu
function toggleMob(){
  const hbg=document.getElementById('hbg');
  const drawer=document.getElementById('mob-drawer');
  hbg.classList.toggle('open');
  drawer.classList.toggle('open');
}

// Mobile accordion
function mobtog(id){
  document.querySelectorAll('.mob-ni').forEach(el=>{
    if(el.id!==id) el.classList.remove('open');
  });
  const el=document.getElementById(id);
  if(el) el.classList.toggle('open');
}

// Close mobile menu on resize to desktop
window.addEventListener('resize',()=>{
  if(window.innerWidth>900){
    document.getElementById('hbg').classList.remove('open');
    document.getElementById('mob-drawer').classList.remove('open');
    document.querySelectorAll('.mob-ni').forEach(el=>el.classList.remove('open'));
  }
});
</script>
</body>
</html>/* End custom CSS */