/* Dropdown submenu styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

/* For mobile view, adjust the submenu position */
@media (max-width: 767px) {
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 0;
        margin-top: 0;
        margin-left: 15px;
        border-radius: 0;
    }
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

/* Style for caret in dropdown-submenu */
.dropdown-submenu > a > .caret {
    transform: rotate(0deg);
    margin-left: 4px;
    margin-right: 0;
    transition: transform 0.3s;
}

/* Hide the default arrow since we're using the caret */
.dropdown-submenu > a:after {
    display: none;
}

/* Rotate submenu caret when submenu is open */
.dropdown-submenu.open > a > .caret {
    transform: rotate(180deg);
}

/* Remove black background from 'Our Services' tab when activated */
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: transparent;
}

/* Match dropdown menu items color to main menu */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #484747 !important;
}

/* Match dropdown menu items hover color to main menu */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000000 !important;
    background-color: transparent;
}

/* Rotate caret when dropdown is open */
.dropdown.open > a > .caret {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

/* Add transition to all carets for smooth animation */
.caret {
    transition: transform 0.3s;
}

/* Remove conflicting CSS transitions to let jQuery handle animations */
/* Bootstrap's default display behavior will be used */

/* Remove dark background from active dropdown menu items */
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    background-color: transparent !important;
}