/* #### Header #### */
@media (width >=992px) {
  #main-header {
    position: relative;
    z-index: 1000;
  }

  .menu-bar {
    position: relative;
    box-shadow: var(--box-box-shadow);
    padding: 0.4rem 0;
  }

  .menu-bar > .container {
    --container-width: 94%;
  }

  .logo-column {
    position: relative;
    min-width: 30rem;
    top: 0.4rem;
  }

  #header-search-form::before {
    background: var(--dark-bg-color);
  }

  #main-header ul.menu > li:hover::after,
  #main-header ul.menu > li.current-menu-ancestor::after,
  #main-header ul.menu > li.current-menu-item::after,
  #main-header ul.menu > li.current_page_parent::after {
    display: none;
  }

  ul.menu li .icn-wrap {
    margin-right: 1px;
  }

  .menu-column {
    padding-left: 0;
    white-space: nowrap;
  }

  .search-column {
    top: -1px;
    position: relative;
    max-width: 5rem;
    order: 100;
    padding-left: 0.5rem;
  }

  .official-partner-column {
    --width: 10.2rem;

    width: var(--width);
    max-width: var(--width);
    min-width: var(--width);
    height: 6rem;
    padding-right: 0;
    padding-left: 0;
  }

  .official-partner-column img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (width >=1400px) {
  .logo-holder img {
    top: 1px;
    position: relative;
  }
}

@media (width <=1140px) and (width >=992px) {
  .menu-bar > .container {
    --container-width: 100%;
  }

  .logo-column {
    min-width: 24rem;
  }

  ul.menu > li > a {
    --menu-link-padding: 2.3rem 1rem;
  }

  .official-partner-column {
    padding-right: var(--df-column-gap);
  }
}

@media (width <=1010px) and (width >=992px) {
  .official-partner-column {
    display: none;
  }

  .search-column {
    display: none;
  }
}

@media (width <=992px) {
  .menu-active #main-header .menu-bar {
    background: var(--dark-bg-color);
  }

  .menu-active #main-header .menu-global-menu-container {
    margin-top: 1rem;
  }

  .logo-column .logo-holder {
    transform: scale(1.08) translateY(0.3rem);
  }

  .menu-column {
    font-size: 2.4rem;
  }

  .menu-column li:not(.btn) a .icn-wrap {
    width: 2.5rem;
    margin-right: 2rem;
    margin-left: 0.5rem;
  }

  #main-header .menu-global-menu-container {
    background: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
  }

  .official-partner-column {
    display: contents;
  }

  .official-partner-column img {
    top: 0.9rem;
    position: absolute;
    right: var(--df-column-gap);
    width: 10rem;
    object-fit: contain;
  }

  body:not(.menu-active) .search-column {
    display: none;
  }
}

@media (width <=480px) {
  #main-header .menu-bar .logo-column img {
    left: -1rem;
  }

  .official-partner-column img {
    top: 1.2rem;
    right: 2rem;
    width: 9rem;
  }
}

@media (width <=405px) {
  #main-header .menu-bar .logo-column img {
    left: -3.5rem;
  }

  .official-partner-column img {
    top: 1.25rem;
    right: 1.3rem;
    width: 8.5rem;
  }
}

@media (width <=360px) {
  #main-header .menu-bar .logo-column img {
    left: -3rem;
  }
}

@media (width <=350px) {
  #main-header .menu-bar .logo-column img {
    left: -2.3rem;
  }
}

/* ## Top Banner ## */
.top-banner {
  background: var(--dark-bg-color);
  overflow: hidden;
  max-height: 600px;
  transition: all ease 0.3s;
}

.top-banner a {
  margin: 0;
  padding: 0;
}

.top-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

@media (width <=992px) {
  body.has-top-banner {
    padding-top: 0;
  }

  .menu-active .top-banner {
    max-height: 0;
  }

  body.has-top-banner #main-header {
    position: absolute;
    top: auto;
  }

  body.has-top-banner #main-header + main {
    padding-top: var(--mobile-nav-bar-height);
  }

  body.has-top-banner #main-header + .sub-header {
    margin-top: var(--mobile-nav-bar-height);
  }

  body.has-top-banner #main-header.is-fixed {
    top: 0;
    position: fixed;
  }
}