/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {
    margin-bottom: 1rem;
}

@media all and (min-width: 1001px) {
    .nav-link {
        display: block;
        text-decoration: none;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    }
    .navbar .nav-item:hover .nav-link {
        color: var(--color-dark);
    }
    .dropdown-toggle {
        white-space: nowrap;
    }
    .dropdown-menu {
        position: absolute;
        z-index: 1000;
        background-color: var(--color-primary);
        left: 50%;
        transform: translateX(-50%);
        /* border-radius: var(--space-10); */
        /* margin-top: 10px */
    }
    .navbar .nav-item .dropdown-menu {
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }
    .navbar .dropdown-menu.fade-up {
        top: 200%;
    }
    .navbar .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }
    .nav-item .dropdown-menu li {
        text-align: center;
    }
    .nav-item .dropdown-menu li:not(:last-child) {
        border-bottom: 1px solid #005ba1
    }
    .nav-item .dropdown-menu li a {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: var(--space-12) var(--space-20);
        color: var(--color-white);
        font-size: var(--font-15);
        white-space: nowrap;
    }
    .nav-item .dropdown-menu li.on a,
    .nav-item .dropdown-menu li a:hover{
        background-color: #0076d1;
        font-weight: var(--fw-bold);
    }
    .navbar .nav-item:hover .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 170%;
    }
    /* .navbar .nav-item .dropdown-menu::after {
        content: "";
        position: absolute;
        top: -9px;
        left: 50%;
        transform: translateX(-50%);
        width: 0px;
        height: 0px;
        border-bottom: calc(6px * 1.732) solid var(--color-primary);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    } */
}