.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid #F0F0F0;
  z-index: 1000;
  background:rgba(255,255,255,.8);
 width: 100%; 
}
.nav-header .in{  display: flex;  align-items: center; box-sizing:border-box; padding:17px 0;}
.header-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo{line-height:1;}
.logo a {
  font-size: 27px;
  font-weight: 500;
  color: var(--main_c);
  text-decoration: none;
  letter-spacing: -1px;
  font-family:  "Saira";
  line-height: 1;
}
.logo a span{   color: var(--main_c);}

.nav-menu {
  display: flex;
  gap: 70px;
  list-style: none;
}

.nav-menu li a {
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  color:#000;
}

.nav-menu li a:hover {
  color: var(--main_c);
}


.nav-menu li a.highlight {
  color: var(--main_c);
  position: relative;
}

.util-menu {
  display: flex;
  align-items: center;
  gap: 15px;
}

.util-menu a {
  font-size: 15px;
  color: #777;

}

.util-menu span {
  width: 1px;
  height: 10px;
  background-color: #ddd;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
}


.member-menu{display:flex; gap:15px; flex-wrap:wrap;}
.member-menu a{display:inline-flex; align-items:center; gap:5px;}
.member-menu .logout_btn{padding:7px 15px; box-sizing:border-box; border:1px solid #ddd; color:#777; font-size:.9em; border-radius:50px;}
.member-menu .login_btn{  font-size: 1em;  color: #777;}

@media (max-width: 1400px) {
	.nav-header .in{padding:17px 10px; }
	.nav-menu{gap:3vw;}
}
@media (max-width: 900px) {
     .logo a{font-size:24px;}
	 .nav-header .in{padding:15px 10px;}
	  .nav-menu {
		display: none; 
	  }
	  .member-menu{display:none;}
	  .mobile-toggle {
		display: flex;
	  }
	  .util-menu {gap:8px;}

	 .member-nav{display:flex; margin-top:30px; padding:0 3%; box-sizing:bordder-box;}
.mobile-toggle svg {
		width: 32px;
		height: 32px;
	}
}