#main-nav {
  flex: 1;
}
#main-nav .container {
  display: flex;
  align-items: flex-start;
}

#main-nav ul.menu {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 48px 24px 0 0;
  padding: 0;
}
#main-nav ul.menu li a {
  text-decoration: none;
  font-weight: 800;
}
#main-nav ul.menu li a:hover,
#main-nav ul.menu li.current_page_item a {
  color: var(--brand);
  border-bottom: 4px solid var(--brand);
  padding-bottom: 4px;
}
body.page-template-page-home #main-nav ul.menu li a {
  color: var(--white);
}
body.page-template-page-home #main-nav ul.menu li a:hover,
body.page-template-page-home #main-nav ul.menu li.current_page_item a {
  color: var(--brand);
}

.btn-nav-toggle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  display: none;
}
body.page-template-page-home .btn-nav-toggle .icon-tabler-menu-2 {
  color: var(--white);
}
.btn-nav-toggle [data-id="nav-close-icon"] {
  display: none;
}
body.nav-open .btn-nav-toggle [data-id="nav-open-icon"] {
  display: none;
}
body.nav-open .btn-nav-toggle [data-id="nav-close-icon"] {
  display: block;
}


@media (max-width: 768px) {

  .btn-nav-toggle {
    display: block;
  }
  #main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand);
    color: var(--black);
    z-index: 98;
    display: none;
  }
  #main-nav .container {
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #main-nav .container ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
  }
  html[data-theme="dark"] #main-nav {
    background-color: var(--black);
    color: var(--brand);
  }
  
  body.page-template-page-home #main-nav ul.menu li a {
    color: var(--black);
  }
  #main-nav ul.menu li a:hover,
  #main-nav ul.menu li.current_page_item a {
    border-bottom: none;
    padding: 4px 8px;
    background-color: var(--black);
    color: var(--brand);
  }
  #main-nav.is-open {
    display: block;
  }

}
