Transparent Site Nav Pill

I'm using this GhostPlugins plugin as well as a dark mode plugin and I would like for my site nav pill buttons to be transparent when not hovering or active. I tried adding an rgb code to the .header-nav-item but it made it a different color than the rgb code I was using.

// Header Navigation - Pill Hover Style - Ghost //
.header-nav-item a {
  padding: 5px 2px !important;
  border: 2px solid black;
  background-color: #ecece0 !important;
  border-radius: 50px;
  padding: 9.6px 19.22px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background-color: #defe46 !important;
  padding: 9.6px 19.2px;
  border-radius: 50px;
  border: 2px solid black;
  transition: all ease-in-out .2s !important;
}

// Active Link Pill Style - Ghost //
.header-nav-item--active a {
  background-color: #defe46 !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  padding: 9.6px 19.2px !important;
  border-radius: 50px !important;
  background-image: none !important;
}

Can you share site url? We can check code easier