@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root{
  --ag-nav:#090d12;
  --ag-text:#f3f6ff;
  --ag-cyan-2:#4ecde0;
  --ag-gold:#d8c7a1;
}

nav{
  min-height:38px !important;
  padding:0 26px !important;
  background:var(--ag-nav) !important;
  border:0 !important;
  border-bottom:1px solid rgba(216,199,161,0.10) !important;
  box-shadow:0 16px 42px rgba(0,0,0,0.20) !important;
  backdrop-filter:blur(16px);
}

.nav-logo{
  font-family:'Outfit',Inter,sans-serif !important;
  font-size:0.84rem !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:var(--ag-text) !important;
  background:linear-gradient(120deg,#fff 0%,var(--ag-cyan-2) 50%,var(--ag-gold) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

.nav-logo::before{
  content:'';
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:inline-block;
  background:url('/images/ag-logo-mark.png') center/contain no-repeat;
}

body.theme-light nav{
  background:var(--ag-nav) !important;
  box-shadow:0 16px 42px rgba(0,0,0,0.20) !important;
}

body.theme-light .nav-logo{
  background:linear-gradient(120deg,#fff 0%,var(--ag-cyan-2) 50%,var(--ag-gold) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

@media(max-width:720px){
  nav{
    min-height:38px !important;
    padding:0 16px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .nav-logo{font-size:0.8rem !important;gap:7px !important;}
  .nav-logo::before{width:22px;height:22px;flex-basis:22px;}
}