/*----------------------- TOP NAVIGATION -----------------------*/
.top-navigation {
  background-color: var(--background-primary);
}

.top-navigation__info {
  min-height: 4rem;
  color: var(--color-white);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 27.5em) {
  .top-navigation__info {
    flex-direction: column;
    row-gap: 2rem;
  }
}

/*
Company info containing phone and email 
info along with social links
*/
ul.company-info {
  align-self: stretch;
}

ul.company-info,
ul.social-info {
  display: flex;
}

@media only screen and (max-width: 27.5em) {
  ul.company-info {
    justify-content: space-between;
  }

  ul.social-info {
    display: none;
  }
}

ul.company-info > li.company-info__item,
ul.social-info > li.social-info__item {
  display: flex;
  align-items: center;
}

ul.company-info > li.company-info__item:not(:last-child),
ul.social-info > li.social-info__item:not(:last-child) {
  margin-right: 2rem;
}

ul.company-info > li.company-info__item--active {
  font-weight: 500;
  background-color: var(--background-secondary);
}

@media only screen and (max-width: 27.5em) {
  ul.company-info > li.company-info__item--active {
    padding: 1rem 2rem;
  }
}

.company-info__icon,
.social-info__icon {
  width: 2rem;
  height: 2rem;
  fill: var(--color-white);
}

/*----------------------- TOP NAVIGATION -----------------------*/