/* =================================
   Header
================================= */

.site-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:20px 40px;
	background: linear-gradient(
		to bottom,
		rgba(255,255,255,0.9),
		rgba(255,255,255,0.4),
		rgba(255,255,255,0)
	);
	z-index:1000;
	transition:.25s;
}


/* =================================
   Scroll Header
================================= */

.site-header.is-scrolled{

  background:#ffffff;

  border-bottom:1px solid #e2e8f0;

  box-shadow:0 6px 20px rgba(0,0,0,.05);

}


/* =================================
   Header Inner
================================= */

.site-header-inner{

  max-width:1200px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

}


/* =================================
   Logo
================================= */

.site-logo{
  margin:0;
}

.site-logo a{
  display:flex;
  align-items:center;
}

.site-logo img{
	height: 48px;
}
.logo-text{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
}


/* =================================
   Navigation
================================= */

.global-nav{

  display:flex;
  align-items:center;
  gap:28px;

}

.global-nav a{

  text-decoration:none;
  color:#334155;
  font-size:14px;
  font-weight:500;

  transition:.2s;

}

.global-nav a:hover{
  opacity:.7;
}


/* =================================
   CTA Button
================================= */

.nav-cta{

  padding:10px 20px;

  border-radius:999px;

  background:#111;
  color:#fff !important;

  font-weight:600;

  transition:.2s;

}

.nav-cta:hover{

  background:#000;

  transform:translateY(-1px);

}


/* =================================
   Hamburger
================================= */

.menu-toggle{

  display:none;

  width:28px;
  height:22px;

  position:relative;

  cursor:pointer;

  background:none;
  border:none;
  padding:0;

  z-index:2000;

}

.menu-toggle span{

  position:absolute;
  left:0;

  width:100%;
  height:2px;

  background:#1e293b;

  border-radius:2px;

  transition:.25s;

}

.menu-toggle span:nth-child(1){
  top:0;
}

.menu-toggle span:nth-child(2){
  top:9px;
}

.menu-toggle span:nth-child(3){
  bottom:0;
}

.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg);
  top:9px;
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg);
  bottom:9px;
}


/* =================================
   Mobile Navigation
================================= */

@media (max-width:900px){

.site-header{
	padding:16px 20px 16px 0px;
}

.global-nav{

  position:fixed;

  top:0;
  right:-100%;

  width:260px;
  height:100vh;

  background:#fff;

  flex-direction:column;
  align-items:flex-start;

  padding:80px 30px;

  gap:24px;

  box-shadow:-10px 0 30px rgba(0,0,0,.08);

  transition:.3s;

}

.global-nav.active{
  right:0;
}

.global-nav a{
  font-size:16px;
}

.menu-toggle{
  display:block;
}

.nav-cta{
  margin-top:10px;
}

}