/*
Default Navbar Values
*/

.navbar {
  background-color: transparent;
}

.navbar-toggler-icon {
  background-image: none !important;
  max-height: 24px !important;
}

.navbar-toggler {
  border: none !important;
  padding: 0;
}

/*
Image Classes
*/

.logo-dark {
  display: none;
}

.logo-light {
  display: none;
}

/*
Modifies the dropdown when it is visible on lg> resolution
*/

@media (min-width: 992px) {
  /*
    Modifies the dropdown menu when it is visible on lg> resolution
  */

  .dropdown-menu.show {
    background-color: #fff;
    top: 0 !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 230px;
  }

  /*
    Modifies the dropdown item when they are hover on lg> resolution
  */

  .dropdown-item:hover {
    background-color: #ecedef !important;
    border-radius: 0;
  }

  .dropdown-element:hover {
    background-color: none !important;
  }
}

/*
Modifies the body of the navbar when it is visible on sm-md resolution
*/

@media (max-width: 991px) {
  /*
    Modifies the navbar itself when it is visible on sm-md resolution
  */

  #navbarSupportedContent {
    padding: 12px 0;
    width: auto;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    height: auto;
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
    z-index: 1000;
  }

  /*
    Modifies the navbar elements color when it is visible on sm-md resolution
  */

  .nav-item .nav-link {
    color: #232323 !important;
  }
  .nav-icon {
    color: #232323 !important;
  }

  .nav-link:hover {
    background-color: #2c2d2e;
    transition: all 0.3s ease;
  }

  /*
    Modifies the dropdown menu when it is visible on sm-md resolution
  */

  .dropdown-menu.show {
    background-color: #ffffff !important;
    min-width: 260px;
  }

  /*
  Modifies the dropdown item anchors color when they are default/hover on sm-md resolution
*/

  .dropdown-item a {
    color: #232323 !important;
  }

  .dropdown-item:hover {
    background-color: #ecedef !important;
  }

  /*
    Modifies the dropdown item when they are hover on sm-md resolution overwriting BS
*/

  .dropdown-element:hover {
    background-color: none !important;
  }

  .dropdown-description {
    color: #444548 !important;
  }

  /*
    Overwrites some BS classes to avoid the transition effect on the collapse
*/

  .collapse {
    transition: none !important;
  }

  .collapsing {
    transition: none !important;
  }
}

/* Header CTA: reduce button height by ~30% (affects only top-right buttons) */
#header-cta .btn-blue {
  padding-top: 7.5px !important;
  padding-bottom: 7.5px !important;
}

/* Mobile fine-tuning for logo size and spacing */
@media (max-width: 575px) {
  #header-logo {
    left: 16px !important;
  }
  #header-logo img {
    height: 53px !important;
  }
}

/*
Modifies the navbar when it is scrolled
*/

.navbar-scrolled {
  background-color: #fff !important;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15) !important;
}

.nav-link-scrolled {
  color: #232323 !important;
  transition: all 0.3s ease;
}

/*
Adds the active color change to the currently "active" nav link
*/

.nav-link.active {
  color: #0364a4 !important;
}