.header_logo{
    width: 200px;
    height: 70px;
    background: red;
}

.header_nav{
    display: flex;
    justify-content: end;
    align-items: center;
    /* gap: 20px; */
}

.header_nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: black
}

.header_nav ul {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 35px;
    font-size: 14px;
    justify-content: space-between;
}

.active {
    text-decoration: none;
    /* text-transform: uppercase; */
    color: #00bc77 !important;
}

/* Style for the first child on hover (only applies to itself) */
.header_nav ul li :hover {
    text-decoration: none;
    text-transform: uppercase;
    color: #00bc77;
}

.header_nav ul .underline_nav{
    height: 6px;
}
  
.header_nav ul li:first-child:hover ~ li {
    animation: line 0.15s linear forwards;
    height: 6px;
    background: #00bc77; /* This background will apply to other <li>, not the first one */
    position: relative;
    top:2%;
    left:50%;
}

.responsiveMainNav{
    display: none
}
.header_forMobile{
    display: none
}

@media (max-width:456px) {
    /* For mobile phones: */
    .responsiveMainNav{
        display: block;
        position: fixed;
        width: 100%;
        background: white;
        z-index: 200;
        transition: 0.3s ease-in-out;
        top: 18%;
    }
    .header_forMobile{
        display: block
    }
    .header_nav {
        display:none;
    }

    .header_forMobile i{
        font-size: 20px;
    }
    .contactus-location-tab ul{
        padding: 0 !important
    }
}

@keyframes line {
from {
    left:50%;
    width:0%;
}
to {
    left:5%;
    width:90%;
}
}