.rop-navbar-v2{
  position:fixed;
  top:14px;
  left:3%;
  right:3%;
  z-index:1000;

  min-height:74px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:12px 16px;

  background:rgba(255,255,255,.82);

  border:1px solid rgba(255,255,255,.7);

  backdrop-filter:blur(26px);

  border-radius:999px;

  box-shadow:
    0 24px 80px rgba(15,23,42,.14);

  overflow:visible;
}

/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.rop-nav-brand{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;

  color:#0b1f3a;

  font-weight:1000;

  letter-spacing:-.03em;

  white-space:nowrap;

  flex:0 0 auto;
}

.rop-nav-brand img{
  width:46px;
  height:46px;

  object-fit:cover;

  border-radius:15px;
}

.rop-nav-brand span{
  font-size:1rem;
}

@media (min-width:769px){
  .rop-nav-brand span{
    position:relative;
    top:.28em;
    font-size:.72rem;
    line-height:1;
  }
}

/*
|--------------------------------------------------------------------------
| Main Navigation
|--------------------------------------------------------------------------
*/

.rop-nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:8px;

  flex:1;

  min-width:0;
}

.rop-nav-menu a{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:46px;

  padding:10px 16px;

  border-radius:999px;

  text-decoration:none;

  color:#334155;

  font-size:.84rem;

  font-weight:900;

  line-height:1;

  white-space:nowrap;

  overflow:hidden;

  isolation:isolate;

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    color .28s ease,
    background .28s ease,
    box-shadow .28s ease;

  flex:0 0 auto;
}

/*
|--------------------------------------------------------------------------
| Hover Glow Layer
|--------------------------------------------------------------------------
*/

.rop-nav-menu a::before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      135deg,
      rgba(30,94,255,.14),
      rgba(30,94,255,.02)
    );

  opacity:0;

  transform:scale(.82);

  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.22,1,.36,1);

  z-index:-2;
}

/*
|--------------------------------------------------------------------------
| Light Sweep
|--------------------------------------------------------------------------
*/

.rop-nav-menu a::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:0;
  height:0;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.35) 45%,
      transparent 72%
    );

  transform:
    translate(-50%, -50%);

  opacity:0;

  transition:
    width .45s cubic-bezier(.22,1,.36,1),
    height .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;

  z-index:-1;
}

/*
|--------------------------------------------------------------------------
| Link Hover
|--------------------------------------------------------------------------
*/

.rop-nav-menu a:hover{
  color:#0f172a;

  transform:
    translateY(-3px)
    scale(1.03);

  box-shadow:
    0 16px 32px rgba(30,94,255,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.rop-nav-menu a:hover::before{
  opacity:1;
  transform:scale(1);
}

.rop-nav-menu a:hover::after{
  width:180px;
  height:180px;
  opacity:1;
}

/*
|--------------------------------------------------------------------------
| Active State
|--------------------------------------------------------------------------
*/

.rop-nav-menu a.active,
.rop-nav-menu a[aria-current="page"]{
  background:
    linear-gradient(
      135deg,
      rgba(30,94,255,.98),
      rgba(16,70,210,.92)
    );

  color:#fff !important;

  box-shadow:
    0 18px 34px rgba(30,94,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.rop-nav-menu a.active::before,
.rop-nav-menu a[aria-current="page"]::before{
  display:none;
}

.rop-nav-menu a.active::after,
.rop-nav-menu a[aria-current="page"]::after{
  opacity:.22;

  width:160px;
  height:160px;
}

/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.rop-nav-cta{
  background:
    linear-gradient(
      135deg,
      #d90429,
      #b10324
    ) !important;

  color:#fff !important;

  padding:11px 20px !important;

  box-shadow:
    0 14px 30px rgba(217,4,41,.24);
}

.rop-nav-cta:hover{
  color:#fff !important;

  transform:
    translateY(-3px)
    scale(1.03);
}

/*
|--------------------------------------------------------------------------
| Mobile Toggle
|--------------------------------------------------------------------------
*/

.rop-nav-toggle{
  display:none;

  width:46px;
  height:46px;

  border:0;

  border-radius:50%;

  background:#0b1f3a;

  color:#fff;

  font-size:1.1rem;

  cursor:pointer;

  flex:0 0 auto;
}

/*
|--------------------------------------------------------------------------
| Dashboard Menu
|--------------------------------------------------------------------------
*/

.rop-account-menu{
  position:relative;
  flex:0 0 auto;
}

.rop-account-btn{
  position:relative;

  height:48px;

  border:0;

  border-radius:999px;

  padding:6px 14px 6px 6px;

  background:
    linear-gradient(
      135deg,
      #0b1f3a,
      #122c54
    );

  color:#fff;

  display:flex;
  align-items:center;
  gap:10px;

  cursor:pointer;

  overflow:hidden;

  font-family:inherit;

  font-weight:900;

  box-shadow:
    0 14px 28px rgba(11,31,58,.18);

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease;
}

.rop-account-btn::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.03)
    );

  opacity:0;

  transition:
    opacity .3s ease,
    transform .3s ease;

  transform:scale(.88);
}

.rop-account-btn:hover{
  transform:
    translateY(-2px)
    scale(1.02);

  box-shadow:
    0 20px 40px rgba(11,31,58,.24);
}

.rop-account-btn:hover::before{
  opacity:1;
  transform:scale(1);
}

.rop-account-avatar{
  width:36px;
  height:36px;

  border-radius:50%;

  background:#fff;

  color:#0b1f3a;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:1000;
}

.rop-account-text{
  font-size:.85rem;
}

.rop-account-btn i{
  font-size:.72rem;
  opacity:.8;
}

/*
|--------------------------------------------------------------------------
| Dropdown
|--------------------------------------------------------------------------
*/

.rop-account-dropdown{
  position:absolute;

  top:calc(100% + 14px);
  right:0;

  width:290px;

  padding:12px;

  border-radius:26px;

  background:rgba(255,255,255,.97);

  border:1px solid rgba(15,23,42,.08);

  box-shadow:
    0 34px 90px rgba(15,23,42,.22);

  backdrop-filter:blur(22px);

  z-index:5000;

  opacity:0;
  visibility:hidden;

  transform:
    translateY(14px)
    scale(.96);

  transition:
    opacity .26s ease,
    transform .26s cubic-bezier(.22,1,.36,1),
    visibility .26s ease;
}

.rop-account-menu:hover .rop-account-dropdown,
.rop-account-menu:focus-within .rop-account-dropdown{
  opacity:1;
  visibility:visible;

  transform:
    translateY(0)
    scale(1);
}

.rop-account-head{
  padding:15px;

  margin-bottom:10px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(30,94,255,.10),
      rgba(30,94,255,.03)
    );
}

.rop-account-head strong{
  display:block;

  color:#0f172a;

  font-size:.95rem;

  margin-bottom:4px;
}

.rop-account-head span{
  display:block;

  color:#64748b;

  font-size:.75rem;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| Dropdown Links
|--------------------------------------------------------------------------
*/

.rop-account-dropdown a{
  position:relative;

  display:flex;
  align-items:center;

  gap:12px;

  width:100%;

  padding:13px 14px;

  border-radius:16px;

  text-decoration:none;

  color:#334155;

  font-weight:900;

  font-size:.88rem;

  overflow:hidden;

  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease;
}

.rop-account-dropdown a::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(30,94,255,.10),
      rgba(30,94,255,.02)
    );

  opacity:0;

  transition:
    opacity .24s ease,
    transform .24s ease;

  transform:scale(.9);

  border-radius:inherit;

  z-index:-1;
}

.rop-account-dropdown a:hover{
  transform:translateX(4px);
}

.rop-account-dropdown a:hover::before{
  opacity:1;
  transform:scale(1);
}

.rop-account-dropdown a i{
  width:18px;
  color:#2563eb;
}

.rop-dropdown-primary{
  background:#2563eb !important;

  color:#fff !important;

  margin-top:4px;

  box-shadow:
    0 12px 22px rgba(37,99,235,.18);
}

.rop-dropdown-primary i{
  color:#fff !important;
}

.rop-dropdown-logout{
  color:#be123c !important;
}

.rop-dropdown-logout i{
  color:#be123c !important;
}

.rop-dropdown-divider{
  height:1px;

  margin:10px 4px;

  background:rgba(15,23,42,.08);
}

/*
|--------------------------------------------------------------------------
| Auth Modal
|--------------------------------------------------------------------------
*/

.rop-auth-modal{
  position:fixed;
  inset:0;

  z-index:99999;

  display:none;

  align-items:center;
  justify-content:center;

  padding:20px;
}

.rop-auth-modal.active{
  display:flex;
}

.rop-auth-backdrop{
  position:absolute;
  inset:0;

  background:rgba(15,23,42,.55);

  backdrop-filter:blur(12px);
}

.rop-auth-box{
  position:relative;

  width:min(460px,100%);

  background:#ffffff;

  border-radius:34px;

  padding:42px 34px 34px;

  text-align:center;

  box-shadow:
    0 40px 100px rgba(15,23,42,.28);

  animation:ropModalIn .25s ease;
}

.rop-auth-close{
  position:absolute;

  top:18px;
  right:18px;

  width:42px;
  height:42px;

  border:0;

  border-radius:50%;

  background:#f1f5f9;

  color:#0f172a;

  cursor:pointer;

  font-size:18px;
}

.rop-auth-icon{
  width:92px;
  height:92px;

  margin:0 auto 22px;

  border-radius:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#ffffff;

  border:1px solid rgba(15,23,42,.08);

  box-shadow:
    0 18px 45px rgba(15,23,42,.08);
}

.rop-auth-icon img{
  width:72px;
  height:72px;

  object-fit:contain;

  display:block;
}

.rop-auth-box h2{
  margin:0 0 12px;

  font-size:30px;

  color:#0f172a;

  font-weight:900;
}

.rop-auth-box p{
  margin:0 auto 26px;

  color:#64748b;

  line-height:1.7;

  font-size:15px;

  max-width:360px;
}

.rop-auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:14px;

  margin-bottom:20px;
}

.rop-auth-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:54px;

  border-radius:999px;

  font-weight:800;

  text-decoration:none;
}

.rop-auth-btn-primary{
  background:rgba(30,94,255,.95);

  color:#fff;

  box-shadow:
    0 14px 30px rgba(30,94,255,.25);
}

.rop-auth-btn-light{
  background:#f1f5f9;
  color:#0f172a;
}

.rop-auth-note{
  display:block;

  color:#94a3b8;

  font-size:13px;

  font-weight:600;
}

@keyframes ropModalIn{
  from{
    opacity:0;
    transform:translateY(20px) scale(.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:1120px){

  .rop-navbar-v2{
    border-radius:30px;

    align-items:center;

    overflow:visible;
  }

  .rop-nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .rop-nav-menu{
    display:none;

    position:absolute;

    top:84px;
    left:0;
    right:0;

    padding:16px;

    background:rgba(255,255,255,.98);

    border:1px solid rgba(15,23,42,.08);

    border-radius:28px;

    box-shadow:
      0 28px 90px rgba(15,23,42,.20);

    backdrop-filter:blur(22px);

    flex-direction:column;

    align-items:stretch;

    gap:8px;
  }

  .rop-nav-menu.active{
    display:flex;
  }

  .rop-nav-menu a{
    width:100%;
    justify-content:center;
    min-height:52px;
  }

  .rop-nav-menu a:hover{
    transform:none;
  }

  .rop-nav-menu a::after{
    display:none;
  }

  .rop-account-menu{
    width:100%;
  }

  .rop-account-btn{
    width:100%;
    justify-content:center;
  }

  .rop-account-btn:hover{
    transform:none;
  }

  .rop-account-dropdown{
    position:static;

    width:100%;

    margin-top:10px;

    box-shadow:none;

    border-radius:20px;

    background:#f8fafc;

    border:1px solid rgba(15,23,42,.06);

    opacity:1;
    visibility:visible;
    transform:none;
  }
}

@media(max-width:560px){

  .rop-navbar-v2{
    left:4%;
    right:4%;

    top:10px;

    min-height:66px;
  }

  .rop-nav-brand span{
    font-size:.88rem;

    max-width:180px;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .rop-nav-brand img{
    width:40px;
    height:40px;
  }

  .rop-auth-box{
    padding:38px 22px 28px;
    border-radius:28px;
  }

  .rop-auth-actions{
    grid-template-columns:1fr;
  }
}
