:root {
  --primary-color: #686869;
  --primary-color-light: #aca9ad;
  --primary-color-dark: black;
  --secondary-color: red;
  --secondary-color-light: #f15d5e;
  --secondary-color-dark: #9e1f20;
  --third-color: #ce7070;
  --fourth-color: #a77777;
  --contrast-color: #eda32f;
  --text-color: black;
  --light-color: whitesmoke;
}

#nav-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

#nav-header .logo {
  max-height: 54px;
  filter: saturate(0) brightness(20);
}

@media (max-width: 499px) {
  #nav-header .logo {
    max-height: 50px;
  }
}

#nav-header.sticky-nav {
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

#nav-header.sticky-nav .logo {
  filter: invert(0) !important;
}

#nav-header.sticky-nav .nav-link {
  color: var(--text-color) !important;
}

@media (max-width: 991px) {
  #nav-header {
    background-color: white;
  }

  #nav-header .logo {
    filter: none;
  }

  #nav-header .nav-link {
    color: var(--text-color) !important;
  }
}

footer {
  font-family: "Red Hat Text", sans-serif;
  background-color: var(--primary-color-dark);
  font-size: 0.9em;
}

footer a:hover {
  opacity: 0.75;
}

/* Steps do header */
.step {
  background-color: var(--text-color);
  border: 2px solid red;
  padding: 4px 16px;
  white-space: nowrap;
}

.step-active {
  font-weight: 800;
  color: var(--contrast-color);
}

.connect-step {
  height: 2px;
  top: calc(50% - 1px);
  background-color: red;
}