.header-bar {
  display: flex;
  height: 90px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border: 1px solid rgba(128, 128, 128, 0.316);
  justify-content: space-between;
  background-color: white;
  z-index: 200;
  padding: 0 90px 0 40px;
  Margin: 0 0 0 0;
}

.logo-section {
  width: 300px;
  margin-right: 80px;;
}
.logo-image {
  width: 100%;
  height: 90px;
}

.menu-section {
  display: flex;
  max-width: 450px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  background-colo: lightpink;
}

.services-button {
  font: roboto, ariel;
  font-weight: bold;
  color: rgb(52, 51, 51);
  cursor: pointe;
  padding: 10px 8px;
  border: none;
  background-color: white;
}

.home-button,
.projects-button,
.about-button,
.contact-button {
  font: roboto, ariel;
  font-weight: bold;
  color: rgb(52, 51, 51);
  text-decoration: none;
}

.home-button:hover {
  color:rgb(45, 45, 249);
  background-colo: rgb(165, 226, 240);
}
.services-button:hover {
  color:rgb(45, 45, 249);
}
.projects-button:hover {
  color:rgb(45, 45, 249);
}
.about-button:hover {
  color:rgb(45, 45, 249);
}
.contact-button:hover {
  color:rgb(45, 45, 249);
}

.services-button {
  position: relative;

}

.services-button .categories {
  flex-direction: column;
  position: absolute;
  top: 35px;
  left: -45px;
  white-space: nowrap;
  z-index: 200;
  display: none;
  pointer-events: none;
}



.services-button:hover .categories {
  display: flex;
  pointer-events: none !important; 
}

.services-button:hover .categories a {
  text-decoration: none;
  pointer-events: auto; 
  background-color: lightgreen;
  border: 1px solid rgba(128, 128, 128, 0.501);
  padding: 4px 6px;
}


.residential, .commercial, .remodels {
 color: rgb(12, 0, 176);
}

.residential:hover, .commercial:hover, .remodels:hover {
  color: rgb(247, 52, 52);
}