header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  padding: 24px 0;
  transition: 0.3s;
  background-color: transparent;
}
.navbar .brand { display: inline-block; width: 140px; }
header .navbar .container-fluid { padding: 0; }
header .navbar {
  margin: 0;
  padding: 10px 32px;
  justify-content: center!important;

  background-color: var(--bg-white-light);
  border: 1px solid var(--bg-white);
  border-radius: 40px;
}
header .navbar.scroll { background-color: var(--dark-blue); }
@media (min-width: 992px) {
  header .navbar .row > .col-12:first-child { max-width: 136px }
}
@media (max-width: 991px) {
  .navbar .brand { width: 120px; }
  header .navbar { padding: 10px 24px; }
}

/* ---- GROUP: MENU TOGGLER; ---- */
.navbar .navbar-toggler {
  padding: 4px 8px 2px;
  color: var(--white);
  text-align: center;
  border: none;
  border-radius: 64px;
  transition: 0.4s;
}
.navbar .navbar-toggler span { font-size: 40px; }
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:active { background-color: var(--blue-main); }
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: var(--focus); !important;
}

/* ---- GROUP: MENU OPTIONS; ---- */
#main-menu { margin: 0; padding-right: 16px; }
#main-menu a.nav-link { padding: 4px 8px; transition: 0.3s; }
#main-menu a.nav-link.active { color: var(--blue-main); font-weight: 700; }
#main-menu .nav-item:not(:last-child) { padding-right: 8px; }

@media (max-width: 991px) {
  #main-menu { margin: 8px 0; padding: 0; }
  #main-menu a.nav-link { padding: 8px; }

  #main-menu .nav-item { display: block; width: 100%; padding: 8px 0; }
  #main-menu .nav-item:not(:last-child) {
    border-bottom: 1px solid var(--bg-white-light);
  }
  #main-menu a.nav-link {
    display: block;
    width: 100%;
    border-radius: 16px;
  }
  #main-menu a.nav-link:hover,
  #main-menu a.nav-link:active {
    color: var(--dark-blue);
    text-decoration: none;
    background-color: var(--bg-blue);
  }
}