/* =========================================================
  NAVBAR 006 — Transparent Scroll Navbar
========================================================= */

.navbar-006 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sticky);

  width: 100%;

  padding:
    var(--space-4)
    0;

  background: transparent;

  transition:
    background var(--transition-normal),
    backdrop-filter var(--transition-normal),
    padding var(--transition-normal),
    border-color var(--transition-normal);
}

.navbar-006.is-scrolled {
  padding: var(--space-2) 0;

  background: rgba(248, 246, 241, 0.94);

  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));

  border-bottom: 1px solid var(--color-border);
}

.navbar-006__inner {
  width:
    min(100% - 2rem, var(--container-xl));

  min-height:
    72px;

  margin-inline:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--gap-lg);
}

/* =====================
  BRAND
===================== */

.navbar-006__brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-3);

  color:
    var(--color-primary);
}

.navbar-006__logo {
  width:
    42px;

  height:
    42px;

  object-fit:
    contain;

  border-radius:
    0;
}

.navbar-006__brand-name {
  font-family:
    var(--font-heading);

  font-size:
    var(--text-lg);

  font-weight:
    var(--weight-bold);

  letter-spacing:
    var(--tracking-tight);
}

/* =====================
   MENU
===================== */

.navbar-006__menu {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--gap-lg);
}

.navbar-006__menu a {
  position:
    relative;

  color:
    var(--color-primary);

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-semibold);

  transition:
    color var(--transition-fast);
}

.navbar-006__menu a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -8px;

  width:
    100%;

  height:
    2px;

  background:
    var(--color-accent);

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform var(--transition-normal);
}

.navbar-006__menu a:hover,
.navbar-006__menu a:focus-visible {
  color:
    var(--color-accent);
}

.navbar-006__menu a:hover::after,
.navbar-006__menu a:focus-visible::after {
  transform:
    scaleX(1);
}

/* =====================
   ACTIONS
===================== */

.navbar-006__actions {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-3);
}

/* =====================
   TOGGLE
===================== */

.navbar-006__toggle {
  display:
    none;

  width:
    46px;

  height:
    46px;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-sm);

  background:
    rgba(35, 64, 106, 0.05);
}

.navbar-006__toggle-line {
  display:
    block;

  width:
    22px;

  height:
    2px;

  margin:
    5px auto;

  background:
    white;

  border-radius:
    999px;
}

/*=======
nav before the scroll
===========*/ 
/* Default transparent navbar over hero */
.navbar-006__brand,
.navbar-006__brand-name,
.navbar-006__menu a {
  color: white;
}

.navbar-006__menu a:hover,
.navbar-006__menu a:focus-visible {
  color: white;
}

.navbar-006__menu a::after {
  background: white;
}

/* Scrolled light navbar */
.navbar-006.is-scrolled .navbar-006__brand,
.navbar-006.is-scrolled .navbar-006__brand-name,
.navbar-006.is-scrolled .navbar-006__menu a {
  color: var(--color-primary);
}

.navbar-006.is-scrolled .navbar-006__menu a:hover,
.navbar-006.is-scrolled .navbar-006__menu a:focus-visible {
  color: var(--color-accent);
}

.navbar-006.is-scrolled .navbar-006__menu a::after {
  background: var(--color-accent);
}

/* button before scrolll
*/
.navbar-006:not(.is-scrolled) .btn-primary {
  background: white;
  color: var(--color-primary);
}

.navbar-006.is-scrolled .btn-primary {
  background: var(--color-primary);
  color: white;
}

.navbar-006__toggle-line {
  background: white;
}

.navbar-006.is-scrolled .navbar-006__toggle-line {
  background: var(--color-primary);
}

/* =====================
   MOBILE
===================== */

@media (max-width: 900px) {

  .navbar-006 {
    padding:
      var(--space-2)
      0;
  }

  .navbar-006__inner {
    min-height:
      var(--navbar-height-mobile);
  }

  .navbar-006__toggle {
    display:
      block;
    border: 1px solid var(--color-border);
    background: rgba(35, 64, 106, 0.05);
  }

  .navbar-006__menu {
    position:
      absolute;

    top:
      100%;

    left:
      0;

    right:
      0;

    display:
      grid;

    gap:
      var(--space-2);

    padding:
      var(--space-4);

    background:
      rgba(248, 246, 241, 0.98);

    backdrop-filter:
      blur(var(--blur-md));

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(-10px);

    pointer-events:
      none;

    transition:
      opacity var(--transition-normal),
      transform var(--transition-normal),
      visibility var(--transition-normal);
  }

  .navbar-006.is-open .navbar-006__menu {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0);

    pointer-events:
      auto;
  }

  .navbar-006__actions .btn {
    display:
      none;
  }

}