*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HEADER */
.site-header{
  background: #111827;

  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  z-index: 1000;
}

/* CONTAINER */
.header-container{
  max-width: 1200px;
  margin: auto;

  padding: 20px 40px;

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

  position: relative;
  flex-wrap: wrap;
}

/* LOGO */
.logo-area{
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo{
  height: 40px;
}

.brand-name{
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}

/* DESKTOP MENU */
.nav-menu{
  display: flex;
  gap: 25px;
}

.nav-menu a{
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.nav-menu a:hover{
  color: #787af0;
}

/* HAMBURGER */
.menu-toggle{
  display: none;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 992px){

  /* HEADER DEFAULT */
  .site-header{
    position: fixed;

    width: 100%;

    z-index: 1000;

    background: #111827;
  }



  /* CONTAINER */
  .header-container{
    width: 100%;
    padding: 18px 20px;

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

  /* MENU BUTTON */
  .menu-toggle{
    display: block;
    cursor: pointer;
  }

  /* MOBILE MENU */
  .nav-menu{
    width: 100%;
    background: #111827;

    display: flex;
    flex-direction: column;

    height: 0;
    overflow: hidden;

    opacity: 0;

    transition:
      height 0.45s ease,
      opacity 0.3s ease;

    gap: 0;
  }

  /* ACTIVE */
  .nav-menu.active{
    height: 270px;
    opacity: 1;
  }

  /* LINKS */
  .nav-menu a{
    width: 100%;
    padding: 18px 25px;

    color: #fff;
    text-decoration: none;
  }
}