:root{
  --site-header-blue:#0f5ed9;
  --site-header-blue-dark:#0f4eaf;
  --site-header-text:#1b4a86;
  --site-header-yellow:#f2c318;
  --site-header-yellow-soft:#ffdc56;
  --site-header-line:rgba(18,59,120,.12);
  --site-header-transition:all .3s ease;
}

.topbar,
.navbar,
.nav,
.mobile-menu{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
}

.topbar{
  position:relative;
  height:40px;
  padding:0;
  background:linear-gradient(90deg,var(--site-header-blue-dark) 0%,#0f68e0 100%);
  border-bottom:1px solid rgba(255,255,255,.24);
  color:#fff;
  z-index:20;
}

.topbar .container,
.topbar .wrap{
  width:min(1100px,100% - 48px);
  height:100%;
  min-height:0;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.topbar-info,
.topbar .wrap > div:first-child{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:.88rem;
  font-weight:600;
  line-height:1.3;
}

.topbar-info a,
.topbar-info span,
.topbar .wrap > div:first-child a,
.topbar .wrap > div:first-child span{
  display:inline-flex;
  align-items:center;
  gap:0;
  margin:0;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}

.topbar-info i,
.topbar-social i,
.topbar .wrap > div:first-child i{
  color:var(--site-header-yellow);
  margin-right:8px;
}

.topbar b{
  color:var(--site-header-yellow);
  margin-right:4px;
}

.topbar-social,
.social{
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar-social a,
.social a{
  width:24px;
  height:24px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  line-height:1;
  transition:var(--site-header-transition);
}

.topbar-social a i,
.social a i{
  margin:0;
  color:#fff;
}

.topbar-social a:hover,
.topbar-social a:hover i,
.social a:hover,
.social a:hover i{
  color:var(--site-header-yellow-soft);
}

.navbar,
.nav{
  position:sticky;
  top:0;
  z-index:1100;
  padding:10px 0;
  background:rgba(255,255,255,.97);
  border-top:0;
  border-bottom:1px solid var(--site-header-line);
  box-shadow:none;
  transition:var(--site-header-transition);
}

.navbar.scrolled,
.nav.scrolled{
  background:rgba(255,255,255,.99);
  box-shadow:0 10px 26px rgba(15,78,175,.18);
}

.navbar .container,
.nav .wrap{
  width:min(1100px,100% - 48px);
  min-height:58px;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}

.nav-logo,
.logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  text-decoration:none;
}

.nav-logo img,
.logo img{
  display:block;
  height:58px;
  max-height:58px;
  width:auto;
}

.nav-links,
.menu{
  list-style:none;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:0;
  margin:0;
  padding:0;
  text-transform:none;
}

.nav-links li,
.menu li{
  display:flex;
  align-items:center;
}

.nav-links li + li::before,
.menu li + li::before{
  content:"\2022";
  color:var(--site-header-yellow);
  font-size:.9rem;
  margin:0 20px;
}

.nav-links a,
.menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  padding:0;
  color:var(--site-header-text);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2.4px;
  font-size:.8rem;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
  transition:var(--site-header-transition);
}

.nav-links a:hover,
.nav-links a.active,
.menu a:hover,
.menu a.active{
  color:var(--site-header-blue);
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
}

.hamburger span{
  width:28px;
  height:3px;
  background:var(--site-header-text);
  transition:var(--site-header-transition);
}

.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

.mobile-menu{
  display:none;
  position:fixed;
  top:0;
  left:auto !important;
  right:-100%;
  width:min(320px,100%);
  height:100vh;
  background:#fff;
  z-index:1400;
  padding:120px 30px 40px;
  opacity:1;
  transform:none;
  pointer-events:none;
  transition:right .35s ease;
  border-left:1px solid rgba(18,59,120,.15);
}

.mobile-menu.active{
  right:0;
  pointer-events:auto;
}

.mobile-menu a{
  display:block;
  color:var(--site-header-text);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:1rem;
  padding:12px 0;
  border-bottom:1px solid rgba(18,59,120,.12);
}

.mobile-menu a:hover{color:var(--site-header-blue)}

@media (max-width:1100px){
  .topbar-info,
  .topbar .wrap > div:first-child{
    gap:14px;
    font-size:.82rem;
  }

  .nav-links li + li::before,
  .menu li + li::before{
    margin:0 12px;
  }

  .nav-links a,
  .menu a{
    letter-spacing:2px;
    font-size:.78rem;
  }
}

@media (max-width:1080px){
  .nav-links,
  .menu{display:none}
  .hamburger{display:flex}
  .mobile-menu{display:block}
}

@media (max-width:860px){
  .topbar{
    height:auto;
    padding:8px 0;
  }

  .topbar .container,
  .topbar .wrap{
    width:min(1100px,100% - 32px);
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .topbar-info,
  .topbar .wrap > div:first-child{
    flex-wrap:wrap;
    gap:10px;
  }

  .topbar-social,
  .social{display:none}

  .navbar .container,
  .nav .wrap{
    width:min(1100px,100% - 32px);
    gap:14px;
    position:relative;
    padding-right:52px;
  }

  .nav-logo img,
  .logo img{
    height:auto;
    max-height:52px;
    max-width:min(260px,calc(100vw - 112px));
  }

  .hamburger{
    display:flex !important;
    flex:0 0 auto;
    margin-left:auto;
    position:absolute;
    right:0;
    top:50%;
    z-index:2;
    transform:translateY(-50%);
  }
}