.navbar{
    background-color: #1E202B !important;
    padding: 40px 0;
    /* border-bottom: 1px solid white; */

    .navbar-brand{
        color: #fff;

        .weatherLogo{
            display: flex;
            align-items: center;

            img{
                width: 70px;
                margin-right: .7rem;
            }
            .weatherLogo-text{
                span{
                    font-size: 1.1rem;
                    font-weight: 600;
                }
                p{
                    font-size: .7rem;
                    font-weight: 100;
                    margin-bottom: 0;
                }

            }
        }
    }
    .nav-link{
        color: #fff;
        padding: 2px 23px !important;
        margin-left: 15px;
        border: 2px solid transparent;
        border-radius: 30px;
        font-size: .9rem;
        transition: all .3s ease-in-out;

        &:hover{
            color: #019AD8;
            border: 2px solid #019AD8 ;
        }
    }
    .navbar-active{
        color: #019AD8;
        border: 2px solid #019AD8;
    }
    .navbar-toggler{
        padding: 20px 20px;
        transition: all .3s ease-in-out;
        border:  2px solid transparent;
        border-radius: 50%;

        &:focus{
            box-shadow: none;
            outline: none;
        }

        &:hover{
            border:  2px solid #019AD8;
            box-shadow: none;
            outline: none;
        }
    }
    .navbar-toggler-icon{
        background-image: url("../images/icons8-menu-50.png");
        font-size: .8rem;
    }

}

@media screen and (max-width: 991px) {
    .navbar{
        ul{
            background-color: #262936;
            border-radius: 10px;
            padding: 0;
            margin-top: 25px;
        }
        .nav-item{
            text-align: center;
        }

        .nav-link{
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #3C3F4A;
            margin-left: 0;
            padding-block: 12px !important;

            &:hover{
                color: #019AD8;
                border: none ;
                border-bottom: 1px solid #3C3F4A;


            }
        }
        .navbar-active{
            color: #019AD8;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #3C3F4A;

        }
        .last-link{
            border: none;
        }
    }   
}