/*====================================================
        GLOBAL TALENTLINK EMPLOYERS MEGA MENU
====================================================*/

.has-mega-menu{
    position:static;
}

/*========================
MEGA CONTAINER
=========================*/

.employers-menu{
    position:fixed;
    top:145px;
    left:50%;
    transform:translateX(-50%);
    width:min(1380px,96vw);
    background:#ffffff;
    display:none;
    flex-direction:column;
    border-top:5px solid #006699;
    box-shadow:0 22px 60px rgba(0,0,0,.18);
    max-height:78vh;
    overflow-y:auto;
    z-index:99999;
    animation:megaFade .25s ease;
}

.has-mega-menu:hover .employers-menu{
    display:flex;
}

/*========================
ROWS
=========================*/



.mega-row{
    display:grid;
    grid-template-columns:260px 1fr;
    border-bottom:2px solid #d7e4ef;
}

.mega-row:last-child{
    border-bottom:none;
}

/*========================
LEFT TITLE
=========================*/

.mega-title{
    background:#003366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:18px 22px;
    font-size:17px;
    font-weight:700;
    line-height:1.4;
   
      border-right:5px solid #006699;
    transition:.25s;
}

.mega-row:hover .mega-title{
    background:#006699;
}



/* RIGHT SIDE */

.mega-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0px 5px;          /* was 2px 6px */
    padding:6px 12px;     /* was 10px 16px */
    align-items:start;
}

.mega-links.four-column{
    grid-template-columns:repeat(4,1fr);
}

/*========================
LINKS
=========================*/

.mega-links a{
    display:flex;
    align-items:center;
    min-height:26px;      /* was 32px */
    padding:2px 8px;      /* was 4px 10px */
    color:#003366;
    text-decoration:none;
    font-size:13.5px;
    font-weight:500;
    line-height:1.2;
    transition:.25s;
    position:relative;
}

/* Remove bullets completely */
.mega-links a::before{
    display:none;
    content:none;
}

/* Hover */

.mega-links a:hover{
    background:#edf8fc;
    color:#006699;
    padding-left:18px;
    font-weight:600;
}

/* Blue line animation */

.mega-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:#006699;
    transition:.25s;
}

.mega-links a:hover::after{
    width:100%;
}

/*========================
SCROLLBAR
=========================*/

.employers-menu::-webkit-scrollbar{
    width:8px;
}

.employers-menu::-webkit-scrollbar-track{
    background:#f3f3f3;
}

.employers-menu::-webkit-scrollbar-thumb{
    background:#006699;
}

.employers-menu::-webkit-scrollbar-thumb:hover{
    background:#003366;
}

/*========================
MENU ITEM
=========================*/

.has-mega-menu>a{
    font-weight:600;
    position:relative;
}

.has-mega-menu>a:hover{
    color:#006699;
}

/*========================
ANIMATION
=========================*/

@keyframes megaFade{

    from{
        opacity:0;
        transform:translate(-50%,12px);
    }

    to{
        opacity:1;
        transform:translate(-50%,0);
    }

}

/*========================
LARGE TABLETS
=========================*/

@media(max-width:1200px){

.mega-row{
    grid-template-columns:220px 1fr;
}

.mega-links{
    grid-template-columns:repeat(2,1fr);
}

.mega-links.four-column{
    grid-template-columns:repeat(2,1fr);
}

}

/*========================
TABLETS
=========================*/

@media(max-width:992px){

.employers-menu{
    width:98vw;
}

.mega-row{
    grid-template-columns:190px 1fr;
}

.mega-title{
    font-size:15px;
    padding:15px;
}

}
/*====================================================
TABLETS & MOBILE
====================================================*/

@media (max-width:992px){

    /* Mega menu becomes part of the mobile menu */

    .employers-menu{

        position:relative;
        top:0;
        left:0;
        transform:none;

        width:100%;
        max-height:none;

        border-top:none;
        box-shadow:none;

        background:#fff;

        display:none;

        overflow:visible;

        animation:none;

    }

    /* Open when parent is active */

   .nav-item.open>.employers-menu{
    display:block !important;
}

    /* One section at a time */

    .mega-row{

        display:block;

        border-bottom:1px solid #dfe8ef;

    }

    .mega-row:last-child{

        border-bottom:none;

    }

    /* Blue title */

    .mega-title{

        width:100%;

        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:14px 18px;

        font-size:15px;

        font-weight:600;

        background:#003366;

        color:#fff;

        border-right:none;

        cursor:pointer;

    }

    /* + icon */

    .mega-title::after{

        content:"+";

        font-size:20px;

        font-weight:bold;

        transition:.3s;

    }

    .mega-row.active>.mega-title::after{

        content:"−";

    }

    /* Hide links until clicked */

    .mega-links{

        display:none;

        grid-template-columns:1fr;

        gap:0;

        padding:0;

        background:#ffffff;

    }

   .mega-row.active>.mega-links{

    display:grid !important;

    grid-template-columns:1fr !important;

    max-height:600px;

    overflow-y:auto;

}

    /* Four-column sections become one column */

    .mega-links.four-column{

        grid-template-columns:1fr;

    }

    /* Links */

    .mega-links a{

        padding:12px 18px;

        font-size:14px;

        color:#003366;

        border-bottom:1px solid #edf1f5;

        min-height:auto;

        line-height:1.4;

    }

    .mega-links a:last-child{

        border-bottom:none;

    }

    .mega-links a:hover{

        padding-left:28px;

        background:#eef8fd;

        color:#006699;

    }

}


/*====================================================
PHONES
====================================================*/

@media (max-width:768px){

    .mega-title{

        font-size:14px;

        padding:13px 16px;

    }

    .mega-links a{

        font-size:13px;

        padding:11px 16px;

    }

}