.main_nav{
    justify-content: flex-end;
    ul{
        li{
            position: relative;
            display: flex;
            justify-content: center;
            &.active,
            &:hover{
                a{
                    color: $white;
                    text-shadow: 1px 1px $black;
                    text-decoration: none;
                    &::before{
                        top: 0;
                    }
                }
            }
            &.nav-link{
                padding: 0;
            }
            a{
                text-transform: uppercase;
                padding: 30px 20px;
                font-size: $ft_size;
                font-family: $poppins;
                font-weight: $regular;
                color: $black;
                z-index: 2;
                transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
                &::before{
                    content: "";
                    width: 100%;
                    height: 100%;
                    background-color: $dgreen;
                    position: absolute;
                    top: -100%;
                    left: 50%;
                    margin-left: -50%;
                    transition: all 0.5s ease-in-out;
                    z-index: -1;
                }
            }
        }
    }
}