/* for bug background color inherit on hover */
.main-menu__link button:hover {
    background-color: transparent;
}

.main-menu__link.is-active:not(.is-open) button,
.main-menu__link.is-active:not(.is-open) a {
    font-weight: 600;
}

.main-menu__link.is-open button,
.main-menu__link.is-open a {
    color: #ffffff;
}

/* border color */
.main-menu__link:nth-child(4n+1).is-active:not(.is-open) button,
.main-menu__link:nth-child(4n+1).is-active:not(.is-open) a {
    color: #92157d;
    border-color: #92157d;
}

.main-menu__link:nth-child(4n+2).is-active:not(.is-open) button,
.main-menu__link:nth-child(4n+2).is-active:not(.is-open) a {
    color: #008eac;
    border-color: #008eac;
}

.main-menu__link:nth-child(4n+3).is-active:not(.is-open) button,
.main-menu__link:nth-child(4n+3).is-active:not(.is-open) a {
    color: #8c9d01;
    border-color: #8c9d01;
}

.main-menu__link:nth-child(4n+4).is-active:not(.is-open) button,
.main-menu__link:nth-child(4n+4).is-active:not(.is-open) a {
    color: #bc4c0b;
    border-color: #bc4c0b;
}

/* background menu */
.main-menu__link:nth-child(4n+1).is-open,
.main-menu__link:nth-child(4n+1) .main-sub-menu__container {
    background-color: #92157d;
}

.main-menu__link:nth-child(4n+2).is-open,
.main-menu__link:nth-child(4n+2) .main-sub-menu__container {
    background-color: #008eac;
}

.main-menu__link:nth-child(4n+3).is-open,
.main-menu__link:nth-child(4n+3) .main-sub-menu__container {
    background-color: #8c9d01;
}

.main-menu__link:nth-child(4n+4).is-open,
.main-menu__link:nth-child(4n+4) .main-sub-menu__container {
    background-color: #bc4c0b;
}

/* hidde hover effect on mobile */
@media (max-width: 767px){
    .main-menu__link.is-open button:hover,
    .main-menu__link.is-open a:hover {
        color: #ffffff;
    }
}