header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    .logo{
        width: 200px;
        margin: auto;
        cursor: pointer;
    }
    .navbar-collapse{
        margin-top: 20px;
    }
    ul{
        &.navbar-nav{
            margin-left: auto;
            margin-right: 30px;
        }
        li{
            a{
                display: block;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 10%;
                    width: 80%;
                    height: 2px;
                    background:#42565F;
                    transition: all .3s;
                    transform: scale(0, 1);
                    transform-origin: left top;
                }
            }
            &:hover{
                a{
                    color:#42565F !important;
                    &::after{
                        transform: scale(1, 1);
                    }
                }
            }
        }
    }
}

@media (max-width: 768px){
    header{
        .logo{
            width: 120px;
            transform: translateX(10%);
        }
        .navbar-collapse{
            margin-top: 20px;
        }
        ul{
            &.navbar-nav{
                margin-left: auto;
                margin-right: 0;
            }
            li{
                a.nav-link{
                    font-size: 14px;
                    padding: 5px 0;
                    &::after{
                        left: 0;
                        width: 100%;
                    }
                }
            }
        }
    }
}