/* ===========================================================
   Arkway Logistics — Common Site Header / Navigation
   Shared by every page: index.html, about.html, services.html,
   ports/vallarpadam.html, ports/vizhinjam.html, gallery.html, etc.
   Edit this one file to change the header everywhere.
=========================================================== */

.nav{
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  right:0;
  height:68px;
  color:#fff;
  background:#0b1d2bf2;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #ffffff0d;
}

.navin{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Pages without a hero image need space pushed below the fixed bar */
body.no-hero{
  padding-top:68px;
}

/* ---- Logo ---- */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.logo img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:50%;
  flex:0 0 auto;
}

.logotxt{
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.05em;
  color:#fff;
  display:flex;
  flex-direction:column;
  white-space:nowrap;
}

.logotxt em{
  display:block;
  font-style:normal;
  font-weight:600;
  font-size:9px;
  letter-spacing:.32em;
  color:#e8c99f;
  margin-top:3px;
}

/* ---- Desktop links ---- */
.links{
  display:flex;
  gap:24px;
  align-items:center;
  font-size:13px;
  white-space:nowrap;
}

.links a{
  opacity:.9;
  transition:opacity .2s ease,color .2s ease;
}

.links a:hover{
  opacity:1;
  color:#e8c99f;
}

.pill{
  padding:9px 16px;
  border:1px solid #ffffff70;
  border-radius:50px;
  background:#ffffff0d;
}

/* ---- Hamburger toggle (hidden on desktop) ---- */
.navToggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}

.navToggle span{
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .25s ease,opacity .25s ease;
}

.navToggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navToggle.active span:nth-child(2){opacity:0}
.navToggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Mobile menu ---- */
@media(max-width:900px){
  .navToggle{display:flex}

  .links{
    position:fixed;
    top:68px;
    left:0;
    right:0;
    z-index:999;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 24px;
    background:#0b1d2bf7;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }

  .links.open{
    max-height:420px;
    padding:10px 24px 20px;
  }

  .links a{
    width:100%;
    padding:13px 0;
    border-bottom:1px solid #ffffff17;
    font-size:14px;
  }

  .links a.pill{
    width:auto;
    text-align:center;
    border:1px solid #ffffff45;
    border-radius:10px;
    margin-top:12px;
    padding:12px;
  }
}