
.hover-underline-menu {
    width: 100%;
}

    .hover-underline-menu .menu {
        background-color: #2C3840;
    }

        .hover-underline-menu .menu a {
            color: #fefefe;
            padding: 1.2rem 1.5rem;
        }

        .hover-underline-menu .menu .underline-from-center {
            position: relative;
        }

            .hover-underline-menu .menu .underline-from-center::after {
                content: "";
                position: absolute;
                top: calc(100% - 0.125rem);
                border-bottom: 0.125rem solid #fefefe;
                left: 50%;
                right: 50%;
                transition: all 0.5s ease;
            }

            .hover-underline-menu .menu .underline-from-center:hover::after {
                left: 0;
                right: 0;
                transition: all 0.5s ease;
            }




.menu-hover-lines {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.35s ease;
}

    .menu-hover-lines li a {
        padding: 0.75rem 0;
        color: rgba(10, 10, 10, 0.5);
        position: relative;
        margin-left: 1rem;
    }

    .menu-hover-lines li:first-child a {
        margin-left: 0;
    }

    .menu-hover-lines li.active > a {
        background-color: transparent;
    }

    .menu-hover-lines a:before,
    .menu-hover-lines a::after {
        height: 3px;
        position: absolute;
        content: '';
        transition: all 0.35s ease;
        background-color: #1779ba;
        width: 0;
    }

    .menu-hover-lines a::before {
        top: 0;
        left: 0;
    }

    .menu-hover-lines a::after {
        bottom: 0;
        right: 0;
    }

    .menu-hover-lines a:hover,
    .menu-hover-lines li.active > a {
        color: #0a0a0a;
        transition: all 0.35s ease;
    }

        .menu-hover-lines a:hover::before,
        .menu-hover-lines .active a::before,
        .menu-hover-lines a:hover::after,
        .menu-hover-lines .active a::after {
            width: 100%;
        }

