Multi colour navigation

Site URL: https://dolphin-gerbil-zh8s.squarespace.com/

Hi there,

I'm trying to style my navigation so that each nav item has a different hover colour. I have managed to do this but I would like the active setting to be in the chosen colour with coloured underline. A the moment the hovers work but the active elements seem to be conflicting with main css. 

The code i'm using is:

/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
    color: #59CBE8 !important;
}
/* our services active */
.header-nav-item--active [href="/our-services"] {
    color: #59CBE8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
  color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
    color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/about"] {
    color: #F9423A !important;
}

/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
    color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
    color: #FFD100 !important;
}
/* about us hover */
.header-nav-item a[href="/about-us"]:hover {
    color: #FF29C7 !important;
}
/* about us active */
.header-nav-item--active [href="/about-us"] {
    color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
    color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
    color: #97D700 !important;
}

Any help would be much appreciated!