#gk-header {
  position: relative;
  z-index: 300;
}

#gk-navbar {
  width: 100%;
}

@media (min-width: 768px) {
  #gk-navbar {
    width: auto;
  }
}

.gk-menu {
  display: none;
}

.gk-menu.gk-dropdown-ready {
  display: block;
  overflow: hidden !important;
  height: 0;
  transition: height 300ms;
}

.gk-menu.gk-dropdown-opened {
  display: block;
  height: auto;
  overflow: auto;
}

.gk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gk-gutter-x);
  margin: 0;
  padding: 0;
}

.gk-menu-mobile .gk-nav {
  flex-direction: column;
}

.gk-menu-item {
  display: flex;
  gap: .25rem;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0;
}

.gk-menu-item > a {
  display: flex;
  align-items: center;
  padding: var(--gk-navbar-padding-y) 0;
  color: var(--gk-navbar-color);
  gap: 0.375rem;
}

.gk-nav .gk-menu-item > a:hover,
.gk-nav .gk-menu-item > a:focus,
.gk-nav .gk-menu-item > a:active {
  color: var(--gk-navbar-hover-color);
  text-decoration: none;
}

.gk-nav .gk-menu-item.active > a,
.gk-nav .gk-menu-item.active > a:hover,
.gk-nav .gk-menu-item.active > a:focus,
.gk-nav .gk-menu-item.active > a:active {
  color: var(--gk-navbar-active-color);
}

.gk-menu-caret {
  border-top: 5px solid var(--gk-body-color);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  display: block;
  height: 0;
  opacity: .5;
  width: 0;
}

.gk-nav .gk-menu-item > a:hover .gk-menu-caret,
.gk-nav .gk-menu-item > a:focus .gk-menu-caret,
.gk-nav .gk-menu-item > a:active .gk-menu-caret {
  border-top-color: var(--gk-navbar-hover-color);
  opacity: 1;
}

.gk-nav .gk-menu-item.active > a .gk-menu-caret,
.gk-nav .gk-menu-item.active > a:hover .gk-menu-caret,
.gk-nav .gk-menu-item.active > a:focus .gk-menu-caret,
.gk-nav .gk-menu-item.active > a:active .gk-menu-caret {
  border-top-color: var(--gk-navbar-hover-color);
  opacity: 1;
}

/* Sub menu */
.gk-menu-sub {
  opacity: 0;
  background: var(--gk-mega-bg);
  border: 1px solid var(--gk-border-color);
  display: none;
  position: absolute;
  padding: var(--gk-gutter-x);
  min-width: calc(var(--gk-gutter-x) * 12);
  z-index: 1;
}

.gk-ready {
  display: block;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

.gk-show {
  opacity: 1;
  transform: translateY(0);
}

.gk-parent-ready {
  overflow: hidden;
}

.gk-parent-active {
  z-index: 1000;
}


/* Responsive menu layout */
.gk-menu-mobile {
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .gk-menu-mobile {
    width: auto;
  }
}

.gk-menu-mobile .gk-menu .gk-nav {
  background: var(--gk-mega-bg);
  border: 1px solid var(--gk-border-color);
  padding: var(--gk-gutter-x);
  gap: 0;
  align-items: flex-start;
  min-width: 320px;
}

.gk-menu-mobile .gk-menu .gk-menu-item {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.gk-menu-mobile .gk-menu .gk-menu-caret {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  top: 1rem;
}

/* Remove !important after use js */
.gk-menu-mobile .gk-menu .gk-menu-sub {
  position: relative !important;
  width: 100% !important;
  top: auto !important;
  left: auto !important;
}

.gk-menu-mobile .gk-mega-row {
  flex-direction: column;
}


/* MEGA MENU
-------------------------------- */
.gk-menu-mega-wrapper {
  z-index: 1;
}

/* Load Module
-------------------------------- */
.gk-mega-module .gk-module {
}

.gk-mega-module .mod-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.gk-mega-module .mod-ct {  
}

.gk-mega-module .mod-menu {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gk-navbar .gk-mega-module .mod-menu > .nav-item {
  display: block;
}

.gk-navbar .gk-mega-module .mod-menu > .nav-item > a {
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
}