/* =========================
   TOP MENU SPACING
========================= */

.navbar-nav .nav-item {
    margin: 0 10px;
}

.navbar-nav .nav-link {
    font-weight: 700;
    color: black;
}


/* =========================
   MAIN DROPDOWN STYLE
========================= */

.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {

    background-color: #7ea9bb !important;
    border: none !important;

    border-radius: 0 0 6px 6px;

    padding: 6px 0;

    top: 100% !important;
    margin-top: 0 !important;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    will-change: transform, opacity;

    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================
   SHOW DROPDOWN SMOOTHLY
========================= */

.nav-item.dropdown.show > .dropdown-menu {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================
   DROPDOWN ITEMS STYLE
========================= */

.dropdown-menu .dropdown-item {

    padding: 12px 18px;
    margin: 2px 0;

    font-size: 15px;
    color: black;

    transition: background 0.25s ease;
}


/* =========================
   HOVER EFFECT
========================= */

.dropdown-menu .dropdown-item:hover {

    background-color: #5e8ea3;
    color: white;
}

/* =========================
   FORCE SUBMENU ALIGN WITH ITEM TEXT ROW
========================= */

.dropdown-menu > li {
    display: flex;
    align-items: stretch;
}

/* =========================
   MULTI-LEVEL SUBMENU STYLE
========================= */

.dropdown-menu li {
    position: relative;
}

.submenu {

    position: absolute;

    left: 100%;
    top: 0;

    margin-top: -2px;   /* tiny upward correction */

    border-radius: 0 6px 6px 6px;

    opacity: 0;
    visibility: hidden;

    transform: translateX(8px);

    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   PERFECT SUBMENU TOP ALIGNMENT
========================= */

.dropdown-menu > li > .submenu {

    top: 0 !important;

    margin-top: -6px !important;  /* matches dropdown-menu padding */

}

/* =========================
   SHOW SUBMENU SMOOTHLY
========================= */

.dropdown-menu > li.show > .submenu {

    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================
   REMOVE NAVBAR GAP ISSUE
========================= */

.navbar {
    padding-bottom: 0 !important;
}

.dropdown-menu.show {
    display: block;
}


/* =========================
   MOBILE FIX
========================= */

@media (max-width: 991px) {

.dropdown-menu,
.submenu {

    opacity: 1;
    visibility: visible;
    transform: none;

}

}