/*================= Top header area css ===============*/

/*================= header area css ===============*/
.navbar {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 20;
  position: fixed;

  .custom-container {
    @media (min-width: 1400px) {
      max-width: 1475px !important;
    }
  }
}

.menu_one {
  background: transparent;
  transition: all 0.2s linear;
  padding: 25px 0;
}

.header_logo {

  img:not(.main_logo),
  img.sticky_logo {
    display: none;
  }

  img.main_logo {
    display: block;
  }
}

.menu {
  > .nav-item {
    transition: all 0.3s linear;
    padding: 10px 0;
    border-bottom: 1px solid rgba(237, 237, 237, 0.5);

    > .nav-link {
      font-size: 14px;
      font-weight: 500;
      color: #000;
      padding: 0;
      position: relative;

      &::after {
        display: none;
      }
    }

    &.submenu {
      .dropdown-menu {
        padding: 10px 15px;
        border: 0;
        box-shadow: none;

        .nav-item {
          .nav-link {
            color: #000000a8;
            font-size: 14px;
            font-weight: 400;
            padding: 5px 0;
          }

          &:hover,
          &.active {
            .nav-link {
              color: $brand_color;
            }
          }
        }
      }
    }

    &.active,
    &:hover {
      .nav-link {
        color: $brand_color;
      }

      .mobile_dropdown_icon {
        color: $brand_color;
      }
    }

    .mobile_dropdown_icon {
      position: absolute;
      right: 0;
      top: 0;
      color: #6b707f;
      line-height: 42px;
      font-size: 20px;
      display: inline-block;
      opacity: 0.6;
      cursor: pointer;
      &.active{
        &::before{
          content: "\32";
          transition: all 0.2s linear;
        }
      }
    }
  }
}

.mobile-dark-mode {
  ion-icon {
    font-size: 26px;
    color: #9fa6ad;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: 55px;
    top: 32px;
    transform: translateY(-48%) rotate(235deg);

    &.dark-mode {
      display: none;
    }
  }

  input {
    display: none;
  }
}

.body_dark {
  .right-nav .js-darkmode-btn {
    .day ion-icon {
      color: #fff;
    }

    .night ion-icon {
      color: $brand_color;
    }
  }
}

.right-nav {
  display: flex;
  align-items: center;

  @include md {
    margin-left: 80px;
  }

  ion-icon {
    font-size: 23px;
    color: #9fa6ad;
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover {
      color: #7d848d;
    }
  }
}

:is(.js-darkmode-btn, .js-darkmode-btn2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 72px;
  position: relative;
  background: rgba(#fff, 0.1);
  padding: 0 10px;
  color: #fff;
  border-radius: 24px;
  height: 36px;

  @include md {
    margin-right: 30px;
  }

  .day ion-icon {
    color: $brand_color;
  }

  .night ion-icon {
    color: #fff;
  }
}

:is(.js-darkmode-btn, .js-darkmode-btn2) label {
  margin: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

:is(.js-darkmode-btn, .js-darkmode-btn2) .ball {
  height: 30px;
  width: 30px;
  position: absolute;
  background-color: #fafafa;
  border-radius: 50%;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  cursor: default;
  transition: all 0.3s linear 0s;
  z-index: 1;
}

:is(.js-darkmode-btn, .js-darkmode-btn2) ion-icon {
  font-size: 16px;
  transition: all 0.3s linear 0s;
}

:is(.js-darkmode-btn, .js-darkmode-btn2) input {
  display: none;
}

.mobile_menu_left {
  display: flex;

  .mobile_menu_btn {
    padding: 0;
    margin: 0;
  }
}

.mCSB_inside > .mCSB_container {
  margin-right: 0;
}

/*================= header area css ===============*/

/*=========== dk_menu css ===========*/

/*=========== dk_menu css ===========*/

.display_none {
  @media (max-width: 991px) {
    display: none;
  }
}

.sticky-nav-doc {
  .navbar-brand img + img {
    display: none;
  }

  .menu_toggle .hamburger span {
    background: #1d2746;
  }
}

.mobile_main_menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 13px 0;

  .mobile_menu_left {
    display: flex;
  }

  .nav_btn {
    margin: 0;
  }

  &.navbar_fixed {
    box-shadow: 0 4px 10px 0 brand_color_rgba(0.06);
    background: #fff;
    transition: all 0.2s, top 0.4s linear;

    .nav_btn {
      border-color: #6b707f;

      &:hover {
        border-color: $brand_color;
      }
    }
  }
}

/*============ End dark bg menu css ==============*/
.navbar_fixed {
  position: fixed;
  z-index: 35;
  padding: 10px 0;

  &.menu_one {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    background: #fff;
    transition: all 0.2s, top 0.4s linear;
    margin-top: 0;
  }
}

.navbar_fixed,
.white-navbar {
  .search-input {
    visibility: visible;
    opacity: 1;
  }

  .right-nav .js-darkmode-btn {
    background: #1d2746;
  }

  .header_logo {
    img:not(.sticky_logo) {
      display: none;
    }

    img.sticky_logo {
      display: block;
    }
  }

  .menu_toggle .hamburger span,
  .menu_toggle .hamburger-cross span {
    background: var(--black_800);
  }

  .theme-btn.theme-btn-alt {
    border-color: var(--brand_color);
  }
}

.sticky_nav {
  &.navbar_fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;

    .menu_one {
      box-shadow: 0 4px 6px 0 rgba(12, 0, 46, 0.06);
      background: #fff;
      padding: 15px 0;
    }

    .menu_toggle {
      background-color: rgba(54, 53, 53, 0.11);
    }
  }
}

.header-area .right-nav .white_btn .menu_toggle {
  background: #fff;
}

.navbar .right-nav .dark_btn .menu_toggle {
  background-color: rgb(54 53 53 / 11%);

  .hamburger span {
    background: var(--black_800);
  }
}

.sticky-nav.navbar_fixed .menu_toggle {
  background-color: rgba(54, 53, 53, 0.11);
  &:hover {
    background-color: rgba(54, 53, 53, 0.2);
  }
}

.navbar-toggler {
  outline: none;

  &:focus {
    box-shadow: none;
  }
}

.header_logo {
  margin: auto 0;
}

.hamburger {
  display: block;

  span {
    width: 0%;
    height: 2px;
    position: relative;
    top: 0;
    left: 0;
    margin: 4px 0;
    display: block;
    background: #fff;
    border-radius: 3px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;

    &:nth-child(1) {
      transition-delay: 0s;
    }

    &:nth-child(2) {
      transition-delay: 0.125s;
    }

    &:nth-child(3) {
      transition-delay: 0.2s;
    }
  }
}

.menu_toggle {
  width: 48px;
  height: 48px;
  position: relative;
  cursor: pointer;
  display: block;
  background-color: rgba(#fff, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease-in-out;

  &:hover {
    background: rgb(255 255 255 / 20%);
  }

  @include md {
    margin-left: 25px;
  }

  .hamburger {
    span {
      width: 100%;
    }
  }

  .hamburger {
    position: absolute;
    top: 13.44px;
    bottom: 12.44px;
    left: 12px;
    right: 12px;
  }

  .hamburger-cross {
    position: absolute;
    height: 100%;
    width: 100%;
    transform: rotate(45deg);
    display: block;

    span {
      display: block;
      background: #fff;
      border-radius: 3px;
      -webkit-transition: 0.2s ease-in-out;
      transition: 0.2s ease-in-out;

      &:nth-child(1) {
        height: 100%;
        width: 2px;
        position: absolute;
        top: 0;
        left: 10px;
        transition-delay: 0.3s;
      }

      &:nth-child(2) {
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        top: 10px;
        transition-delay: 0.4s;
      }
    }
  }
}

.collapsed {
  .menu_toggle {
    .hamburger {
      span {
        width: 100%;

        &:nth-child(1) {
          transition-delay: 0.3s;
        }

        &:nth-child(2) {
          transition-delay: 0.4s;
        }

        &:nth-child(3) {
          transition-delay: 0.5s;
        }
      }
    }

    .hamburger-cross {
      span {
        &:nth-child(1) {
          height: 0%;
          transition-delay: 0s;
        }

        &:nth-child(2) {
          width: 0%;
          transition-delay: 0.2s;
        }
      }
    }
  }
}

/*=========== side_menu css ===========*/
.side_menu {
  width: 0px;
  height: 100vh;
  max-height: 100vh;
  top: 0;
  position: fixed;
  transform: translate3d(300px, 0, 0);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1013;
  background: #fff;
  padding: 20px 0;
  overflow-x: hidden;
  left: auto;
  right: 0;

  .mobile_menu_header {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 25px;
    justify-content: space-between;

    .close_nav {
      font-size: 28px;
      color: #1d2746;
      cursor: pointer;
      padding: 5px;
      border: 1px solid transparent;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
      display: block;
      height: 40px;
      line-height: 32px;
      &:hover {
        border-color: $black_50;
      }
      &:active {
        border-color: $brand_color;
      }

      i {
        & + i {
          display: none;
        }
      }
    }
  }

  .doc_left_sidebarlist {
    border: 0;

    &:before {
      display: none;
    }
  }

  .nav-sidebar {
    .nav-item {
      padding-right: 0;
    }
  }

  .mobile_nav_wrapper {
    display: flex;
    transform: translate3d(300px, 0, 0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    .theme-btn {
      display: none;
    }
  }

  .mobile_nav_top,
  .mobile_nav_bottom {
    height: calc(100vh - 65px);
    flex-shrink: 0;
    display: block;
    width: 350px;
    padding: 0 25px;
  }

  .mobile_nav_top {
    padding-top: 30px;

    .menu {
      padding-left: 0;
      padding-right: 0;
      .nav-item{
        &.submenu.active{
          .dropdown-menu{
            display: block;
          }
        }
      }
    }
  }

  &.menu-opened {
    width: 350px;

    .mobile_nav_wrapper {
      transform: translate3d(0, 0, 0);
    }

    .close_nav {
      i {
        display: block;
      }
    }
  }
}

.header_area {
  .main_btn {
    margin-left: 80px;
  }
}

.navbar:not(.navbar_fixed) .menu > .nav-item.submenu .dropdown-menu {
  margin-top: -15px;
}

.click_capture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 99;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.5s linear;
}

.menu-is-opened {
  overflow: hidden;
  height: 100%;

  .click_capture {
    opacity: 1;
    visibility: visible;
  }

  .side_menu {
    transform: translate3d(0, 0, 0);
  }
}

/*================= Hero Area css ===============*/
.allfolio-row {
  display: flex;
}

.sidebar-nav {
  background: #1e0f33;
  width: 120px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 50px;
  position: fixed;
  z-index: 9;

  @include xxl {
    height: 960px;
    padding-bottom: 170px;
  }

  .sidebar-logo {
    text-align: center;
    margin: 30px 0 50px;
  }

  .nav {
    flex-wrap: nowrap;
    gap: 30px;
    transform: rotate(90deg) translate(33%, 0);

    @include xxl {
      gap: 50px;
    }

    li {
      flex: 0 0 auto;
    }

    a {
      color: #fff;
      font-size: 14px;
      font-family: $ibm;
      text-decoration: none;
      padding: 0;

      &.active {
        color: $brand_color;
      }

      @include hover {
        color: $brand_color;
      }
    }
  }

  :is(.js-darkmode-btn, .js-darkmode-btn2) {
    @include size(106px, 30px);
    margin-right: 0;
    transform: rotate(90deg);

    .tab-btn {
      font-size: 14px;
    }

    .day {
      color: $black-900;
    }

    .ball {
      width: 54px;
      border-radius: 15px;
    }
  }
}

.body_dark {
  .sidebar-nav {
    .day {
      color: $black_300;
    }

    .night {
      color: #000;
    }
  }
}

.home5:not(.fp-viewing-0) {
  .header_logo img.main_logo {
    display: none;
  }

  .header_logo img.sticky_logo {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .menu_toggle {
    background-color: rgba(23, 22, 26, 0.1);

    .hamburger span {
      background: #000;
    }
  }

  :is(.js-darkmode-btn, .js-darkmode-btn2) {
    background-color: rgba(#17161a, 0.1);
  }

  :is(.js-darkmode-btn, .js-darkmode-btn2) .night ion-icon {
    color: $black_900;
  }

  &.body_dark .right-nav .js-darkmode-btn .day ion-icon {
    color: $black_900;
  }
}

.home5 .fp-viewing-0 {
  .header_logo img.main_logo {
    display: block;
    width: 100%;

    @include md {
      width: auto;
    }
  }

  .header_logo img.sticky_logo {
    display: none;
    opacity: 0;
    visibility: hidden;
    @include property;
  }

  .menu_toggle {
    background-color: rgba(#fff, 0.1);

    .hamburger span {
      background: #fff;
    }
  }

  .mobile_menu_left .navbar-toggler {
    padding-right: 0;
  }

  :is(.js-darkmode-btn, .js-darkmode-btn2) .night ion-icon {
    color: $white;
  }
}

.header-area {
  .right-nav {

    .js-darkmode-btn,
    .menu_toggle {
      background-color: rgba(#17161a, 0.1);

      &:hover {
        background-color: rgba(#17161a, 0.2);
      }
    }

    .hamburger span {
      background: $black_900;
    }
  }
}


// full_menu
.full_menu {
  flex-direction: row;

  > .nav-item {
    display: inline-flex;
    border-bottom: 0;
    margin-left: 20px;
    margin-right: 20px;
    align-items: center;

    .nav-link {
      font-size: 16px;
      font-weight: 500;
      color: #e6e6e6;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      font-family: var(--ibm);
    }

    .mobile_dropdown_icon {
      position: relative;
      display: inline-block;
      line-height: initial;
      color: #e6e6e6;
    }

    &.submenu {
      .dropdown-menu {
        margin: 0 !important;
        border: 0;
        border-radius: 10px;
        left: -25px;
        min-width: 230px;
        padding: 10px 0;
        background: #fff;
        box-shadow: -1px 2px 19px 3px rgba(14, 0, 40, .05);

        @media (min-width: 992px) {
          transform: translateY(20px);
          transition: all .3s ease-in;
          opacity: 0;
          pointer-events: none;
          top: 100%;
          display: block;
          position: absolute;
        }

        .nav-item {
          padding-left: 25px;
          padding-right: 20px;
        }
      }
    }

    &:hover {
      .dropdown-menu {
        @media (min-width: 992px) {
          opacity: 1;
          transform: translateY(0);
          pointer-events: all;
        }
      }
    }
  }
}

.navbar_fixed {
  .full_menu > .nav-item {
    .nav-link {
      color: #000;
    }

    .mobile_dropdown_icon {
      color: #000;
    }

    &.active,
    &:hover {

      .nav-link,
      .mobile_dropdown_icon {
        color: var(--brand_color);
      }
    }
  }
}