.navbar-background {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: transparent;
  height: 5rem;
  z-index: 2;
}

.navbar-background.navbar-scrolled {
  background-color: var(--oa-base-white);
  transition: all 100ms;
}

.navbar-background #myNavBarMobileBody {
    height: 0;
    overflow: hidden;
    transition: height 500ms ease;
}

.navbar-custom {
  margin: 0 auto 0 auto;
  max-width: 81.875rem;
  max-height: 5rem;
  overflow-y: visible;
  display: flex;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.navbar-custom.desktop-only {
    display: flex;
}

.navbar-custom.mobile-only {
    display: none;
}

.navbar-link {
  font-family: 'Poppins', sans-serif;
  float: left;
  color: #444444;
  text-align: center;
  padding: 0.875rem 1rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.navbar-link:hover {
  color: #777777;
  text-decoration: none;
}

.navbar-custom .nav-logo img {
  float: left;
  max-width: 10rem;
  margin-right: 2.1875rem;
}

.hamburger-menu {
  display: none;
  margin-left: auto;
  position: absolute;
  right: 1.875rem;
  top: 1.5rem;
}

.navbar-right {
  margin-left: auto;
  padding-right: 1rem;
}

.navbar-login {
    font-size: 1rem;
    text-decoration: none;
    color: var(--oa-green);
    margin-right: 0.9375rem;
    font-weight: 600;
}

.navbar-login:hover {
  color: #24cbaa;
  text-decoration: none;
}

.hamburger-menu div {
    width: 1.5rem;
    height: 0.15rem;
    background-color: #000000;
    margin: 0.375rem 0;
    transition: all 600ms ease-in-out;
}

.navbar-custom-dropdown .dropdown-menu {
    border: none;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    padding: 0;
    top: 90%;
    transition: transform 500ms ease-in-out;
}

.navbar-custom-dropdown .dropdown-divider {
    margin: 0;
}

.navbar-custom-dropdown a.dropdown-item {
    width: auto !important;
    padding: 0.5rem 1.5rem;
}

.navbar-custom-dropdown a.dropdown-item:is(:hover, :focus) {
    background-color: #F2F4F7;
}

.navbar-custom-dropdown a.dropdown-item:first-child:is(:hover, :focus) {
    border-radius: 0.75rem 0.75rem 0 0;
}

.navbar-custom-dropdown a.dropdown-item:last-child:is(:hover, :focus) {
    border-radius: 0 0 0.75rem 0.75rem;
}

.navbar-custom-dropdown a.dropdown-item.active,
 .navbar-custom-dropdown a.dropdown-item:active {
    background-color: transparent;
}

.dropdown-toggle::after {
  border: none;
}

.dropdown-menu > a > p {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.dropdown-menu > a > p:last-child {
    font-weight: normal;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.navbar-custom-dropdown > a > i {
    right: 0.3rem;
}

.navbar-custom-dropdown > a > i > img {
    top: 0.875rem;
    right: 0.3125rem;
    font-size: 0.75rem;
    font-weight: bold;
    transition: transform 500ms ease-in-out;
}

.navbar-custom-dropdown > a.click {
    pointer-events: none;
}

.navbar-custom.mobile-only .cta-button-nav {
    text-align: center !important;
    width: calc(100% - 3.75rem) !important;
}

/* Desktop */
@media only screen and (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown.navbar-custom-dropdown:hover > a > i > img {
        transform: rotate(-180deg);
        top: 1.125rem;
        right: 0.1875rem;
    }
}

/* Mobile */
@media only screen and (max-width: 768px) {
    .navbar-background {
        height: auto;
    }

    .navbar-background.responsive {
      background-color: var(--oa-base-white);
    }

    .navbar-background.responsive #myNavBarMobileBody {
        height: 22.5rem;
        transition: height 500ms ease;
    }

    .navbar-background.responsive .navbar-custom {
        padding-bottom: 0.9375rem;
        max-height: 100%;
    }

    .navbar-custom.desktop-only {
        display: none;
    }

    .navbar-custom.mobile-only {
        display: flex;
    }

    .navbar-custom a:is(:active, :focus) {
        border-radius: 4px;
        background: var(--gray-100);
    }

    .navbar-custom a.cta-button:is(:active, :focus) {
        background-color: var(--oa-green);
    }

    .navbar-custom a.hamburger-menu:is(:active, :focus) {
        border-radius: 0;
        background: var(--oa-base-white);
    }

    .dropdown .dropdown-menu {
        position: static !important;
        transform: none !important;
        transition: none !important;
        width: 100%;
    }

    /* Mobile hamburger menu */
    .navbar-custom .nav-logo img {
        float: left;
        max-width: 10rem;
        margin-right: 2.1875rem;
    }

    .navbar-custom .nav-logo {
        margin-right: auto;
    }

    .navbar-link {
        font-size: .875rem;
    }

    .navbar-custom a:not(:first-child),
    .navbar-custom div.dropdown {
        display: none;
        width: calc(100% - 1.875rem);
        text-align: left;
    }

    .navbar-custom a.hamburger-menu {
        float: right;
        display: block;
        width: auto;
    }

    .navbar-background.responsive .navbar-custom a.hamburger-menu {
        right: 1.875rem;
    }

    .navbar-background.responsive .navbar-custom a.hamburger-menu .x:nth-of-type(1) {
      transition: all 300ms ease-in-out;
      transform: rotate(40deg);
      transform-origin: top left;
      width: 1.7rem;
    }

    .navbar-background.responsive .navbar-custom a.hamburger-menu .x:nth-of-type(2) {
      transition: all 300ms ease-in-out;
      transform-origin: center;
      width: 0;
    }

    .navbar-background.responsive .navbar-custom a.hamburger-menu .x:nth-of-type(3) {
      transition: all 300ms ease-in-out;
      transform: rotate(-40deg);
      transform-origin: bottom left;
      width: 1.7rem;
    }

    /* End of mobile hamburger menu */

    .navbar-background.responsive .navbar-custom {
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .navbar-background.responsive .navbar-custom a {
        display: block;
    }

    .navbar-background.responsive .navbar-custom div.dropdown {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navbar-custom-dropdown {
        width: 50%;
    }

    .dropdown-menu > a > p {
        font-size: 0.875rem;
    }

    .dropdown-menu > a > p:last-child {
        font-size: 0.75rem;
    }

    .navbar-custom-dropdown .dropdown-menu {
        box-shadow: none;
        border-radius: 0;
    }

    .navbar-custom-dropdown .dropdown-divider {
        display: none;
    }

    .navbar-custom-dropdown > a.click {
        pointer-events: all;
    }

    .navbar-custom-dropdown > a:first-child {
        float: right;
        padding-right: 2rem;
        width: calc(100% - 3rem);
        text-align: left;
    }

    .navbar-custom-dropdown > a > i {
        right: 1rem;
    }

    .navbar-custom-dropdown > a > i > img {
        top: 0.925rem;
        right: 0.8rem;
    }

    .navbar-custom-dropdown > a > i.rotate > img {
        transform: rotate(-180deg);
        top: 1.3rem;
        right: 0.5rem;
    }
}

@media only screen and (max-width: 576px) {
}