* {
    font-family: Lato, sans-serif !important;
}

/* Secondary Menu */
.secondary-menu {
    display: flex;
    align-items: center;
    gap: 27px;
    border-bottom: 1px solid #e5e5e5;
}

/* Menu Links */
.secondary-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    transition: color .3s ease;
}

/* Transparent underline (always visible but transparent) */
.secondary-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 4px;
    background: #e5e5e5;
    transition: background-color .3s ease;
}

/* ========================= */
/* Item 1 */
/* ========================= */
.secondary-menu a:nth-child(1):hover {
    color: #0099ff;
}

.secondary-menu a:nth-child(1):hover::after {
    background-color: #0099ff;
}

/* ========================= */
/* Item 2 */
/* ========================= */
.secondary-menu a:nth-child(2):hover {
    color: #00b894;
}

.secondary-menu a:nth-child(2):hover::after {
    background-color: #00b894;
}

/* ========================= */
/* Item 3 */
/* ========================= */
.secondary-menu a:nth-child(3):hover {
    color: #f39c12;
}

.secondary-menu a:nth-child(3):hover::after {
    background-color: #f39c12;
}

/* ========================= */
/* Item 4 */
/* ========================= */
.secondary-menu a:nth-child(4):hover {
    color: #8e44ad;
}

.secondary-menu a:nth-child(4):hover::after {
    background-color: #8e44ad;
}

/* ========================= */
/* Item 5 */
/* ========================= */
.secondary-menu a:nth-child(5):hover {
    color: #e74c3c;
}

.secondary-menu a:nth-child(5):hover::after {
    background-color: #e74c3c;
}

/* ========================= */
/* Item 6 */
/* ========================= */
.secondary-menu a:nth-child(6):hover {
    color: #16a085;
}

.secondary-menu a:nth-child(6):hover::after {
    background-color: #16a085;
}


/* ========================= */
/* Item 7 */
/* ========================= */
.secondary-menu a:nth-child(7):hover {
    color: #106dab;
}

.secondary-menu a:nth-child(7):hover::after {
    background-color: #106dab;
}




/* ========================= */
/* Item 8*/
/* ========================= */
.secondary-menu a:nth-child(8):hover {
    color: #91ba0a;
}

.secondary-menu a:nth-child(8):hover::after {
    background-color: #91ba0a;
}


/* ========================= */
/* Item 9*/
/* ========================= */
.secondary-menu a:nth-child(9):hover {
    color: #ac0fb1;
}

.secondary-menu a:nth-child(9):hover::after {
    background-color: #ac0fb1;
}
.secondary-menu a:nth-child(10):hover {
    color: #4981e3;
}

.secondary-menu a:nth-child(10):hover::after {
    background-color: #4981e3;
}

.secondary-menu a:nth-child(11):hover {
    color: #e8c011;
}

.secondary-menu a:nth-child(11):hover::after {
    background-color: #e8c011;
}
.secondary-menu a:nth-child(12):hover {
    color: #4917bf;
}

.secondary-menu a:nth-child(12):hover::after {
    background-color: #4917bf;
}
/* Active Category */
.secondary-menu a.active {
    color: #0099ff;
}

.secondary-menu a.active::after {
    background-color: #0099ff;
}






/* hidden in mobile view*/
/* Hide Secondary Menu on Tablet & Mobile */
@media (max-width: 1024px) {
    .secondary-menu {
        display: none !important;
    }
}




/* ===========================
   Active Category Colors
=========================== */

/* 1 */
.secondary-menu a:nth-child(1).active{
    color:#0099ff;
}

.secondary-menu a:nth-child(1).active::after{
    background:#0099ff;
}

/* 2 */
.secondary-menu a:nth-child(2).active{
    color:#00b894;
}

.secondary-menu a:nth-child(2).active::after{
    background:#00b894;
}

/* 3 */
.secondary-menu a:nth-child(3).active{
    color:#f39c12;
}

.secondary-menu a:nth-child(3).active::after{
    background:#f39c12;
}

/* 4 */
.secondary-menu a:nth-child(4).active{
    color:#8e44ad;
}

.secondary-menu a:nth-child(4).active::after{
    background:#8e44ad;
}

/* 5 */
.secondary-menu a:nth-child(5).active{
    color:#e74c3c;
}

.secondary-menu a:nth-child(5).active::after{
    background:#e74c3c;
}

/* 6 */
.secondary-menu a:nth-child(6).active{
    color:#16a085;
}

.secondary-menu a:nth-child(6).active::after{
    background:#16a085;
}
/* 7 */
.secondary-menu a:nth-child(7).active{
    color:#106dab;
}

.secondary-menu a:nth-child(7).active::after{
    background:#106dab;
}
/* 8 */
.secondary-menu a:nth-child(8).active{
    color:#91ba0a;
}

.secondary-menu a:nth-child(8).active::after{
    background:#91ba0a;
}
/* 9 */
.secondary-menu a:nth-child(9).active{
    color:#ac0fb1;
}

.secondary-menu a:nth-child(9).active::after{
    background:#ac0fb1;
}
/* 10 */
.secondary-menu a:nth-child(10).active{
    color:#4981e3;
}

.secondary-menu a:nth-child(10).active::after{
    background:#4981e3;
}
/* 11 */
.secondary-menu a:nth-child(11).active{
    color:#e8c011;
}

.secondary-menu a:nth-child(11).active::after{
    background:#e8c011;
}
/* 12 */
.secondary-menu a:nth-child(12).active{
    color:#4917bf;
}

.secondary-menu a:nth-child(12).active::after{
    background:#4917bf;
}