.navigation{
    background-color: #383e42;
    box-shadow: 0 0 5px #2b2b2b; 
    height: 100vh;
}

.navigation-list{
    list-style: none;
    padding-top: 50px;
    padding-left: 25px;
    color: #a8a8a9;
}
.navigation-list a.active{
    border-bottom: 2px solid #a8a8a9;
}
.navigation-list a{
    color: #a8a8a9;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    border-collapse: collapse;

    transition: all 0.5s;
}
.navigation-list a:hover{
    color: #a8a8a9;
    text-decoration: none;
    border-bottom: 2px solid #ff9300;
    border-collapse: separate;

    transition: all 0.5s; 
}

.navigation-list li{
    padding: 5px 0;
}
.navigation-mobile{
    display: none;
}

@media (max-width: 767px) {
    .col-xl-2.col-lg-3.col-md-4.navigation {
        display: none;
    }
    .navigation-mobile {
        height: auto;
        display: block;
        color: white;
    }
    .navigation-mobile.navbar {
        width: 100vw;
    }
    .bg-dark {
        background-color:  #383e42 !important;
    }
}
@media (max-width: 575px) {
    
}