/* ========================================
   NAVBAR
========================================= */
#top-bar {
  background: var(--bg-color-alt);
}

.nav-link {
  color: var(--text-color-alt);
}

.nav-link:hover {
  color: var(--accent-color-gold);
}

#logo {
  height: 70%;
  padding-left: 10px;
}

/* Projects dropdown button */
.dropbtn {
  background: var(--bg-color-alt);
  color: var(--text-color-alt);
}

/* ========================================
   HAMBURGER BUTTON
========================================= */
.hamburger span {
  background: var(--bg-color-main);
}

.hamburger span:hover {
  background: var(--accent-color-gold);
}

.hamburger.active span {
  background: var(--accent-color-gold);
}

/* ========================================
   SIDE MENU
========================================= */
#mobile-nav-links a:hover {
	color: var(--accent-color-gold);
}
	
#side-logo {
	width: 75%;
}

/* ========================================
   Contact Card
========================================= */
/* Business card container */
.business-card {
  background: var(--accent-color-brown);
}

/* ========================================
   BREADCRUMBS
========================================= */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
		font-size: .9rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

@media (max-width: 576px) {
  .breadcrumb {
  font-size: .6rem;
  }
}

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: var(--text-color-main);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bg-color-alt);
}

/* ========================================
   FOOTER
========================================= */
#footer a:hover {
  color: var(--accent-color-gold);
}

.social img:hover,
.social img:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-color-gold);
}