.header {
    margin-bottom: 20px;
    padding: 10px 10px;
}

.top-menu {
    background-color: #00165C;
    color: #fff;
    padding: 10px 10px;
}
.top-menu-grid {
    display: grid;
    justify-items: end;
    align-items: center;
    grid-template-columns: 1fr 1fr;
}
.top-menu-grid > h6 {
    margin-right: auto;
}
.top-menu-grid > h6::before {
    content: url(/img/cerquilha-branca.svg);
    margin-right: 5px;
}
.top-menu .redes {
    display: flex;
    gap: 1px;
    align-items: center;
}
.top-menu .redes a {
    transition: .3s;
    transform: scale(.7);
    border-radius: 9px;
}
.top-menu .redes a:hover {
    box-shadow: 0px 0px 0px 40px #FFB300 inset;
}

.header-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 20px;
    justify-items: end;
    margin-left: auto;
    margin-right: auto;
    font-size: .88rem;
}
.logo img {
    margin-left: 10px;
    max-width: 200px;
}

.nav-menu {
    display: flex;
    /* color: #FEFEFE; */
    align-self: center;
    align-items: center;
    justify-items: center;
    justify-content: center;
    grid-gap: 30px;
}
.nav-menu a:hover {
    color: #00165C;
}
.nav-menu a {
    transition: .3s;
    font-size: 1.375rem;
    position: relative;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.nav-menu a:nth-child(-n +2)::before {
    content: url(/img/detail.png);
    left: -20px;
    opacity: 0;
    position: absolute;
    transition: .3s;
}
.nav-menu a:nth-child(-n +2):hover::before {
    opacity: 1;
}

@media only screen and (min-width:380px) and (max-width:501px) {

    .top-menu-grid {
        grid-template-columns: max-content 1fr;
    }
    
}

@media only screen and (min-width:0px) and (max-width:379px) {

    .top-menu-grid {
        grid-template-columns:  1fr;
        justify-items: center;
        justify-content: center;
        gap: 8px;
    }
    .top-menu-grid > h6 {
        margin-right: 0!important;
    }
    
}

@media only screen and (min-width:900px) and (max-width:970px) {
    .nav-menu {
        grid-gap: 15px;
    }
    
} 
@media only screen and (min-width:291px) and (max-width:899px) {
    .nav-menu {
        grid-gap: 15px;
    }
} 

@media only screen and (max-width:290px) {
    .header-grid {
        display: grid;
        grid-template-columns: 1fr .2fr;
    }
}