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

@media all and (min-width: 1201px) {
    .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 {
        position: relative;
    }
    .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-dark);
        left: 50%;
        transform: translateX(-50%);
        padding: 0 var(--space-20);
        border-radius: var(--space-10);
    }
    .navbar .nav-item .dropdown-menu {
        display: block;
        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:first-child {
        padding-top: var(--space-10)
    }
    .nav-item .dropdown-menu li:last-child {
        padding-bottom: var(--space-10)
    }
    .nav-item .dropdown-menu li a {
        display: inline-block;
        padding: var(--space-7) 0;
        color: var(--color-white);
        font-size: var(--font-15);
        white-space: nowrap;
        font-weight: var(--fw-normal);
    }
    .nav-item .dropdown-menu li.on a,
    .nav-item .dropdown-menu li a:hover {
        font-weight: var(--fw-bold);
    }
    .navbar .nav-item:hover .dropdown-menu {
        transition: .5s;
        opacity: 1;
        visibility: visible;
        top: 120%;
    }
    .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-dark);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }
}