header {
    position: relative;
    z-index: 6;
}
.header-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 90px;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(92deg, #f08b1d, #db532a);
}

.header-container .logo{
    height: 14.5px;
}

.header-container .telefone-container{
    display: grid;
    align-items: center;
    gap: 0 10px;
    grid-template-areas:
		"icon label"
        "icon numero";
}

.header-container .telefone-icon{
    grid-area: icon;
}

.header-container .telefone-icon img.icon{
    height: 22px;
    margin-top: 5px;
}

.header-container .telefone-label {
    grid-area: label;
}

.header-container .telefone-label label.label,
.telefone-mobile-container .telefone-label label.label{
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--white);
}
.header-container .telefone-numero{
    grid-area: numero;
}

.header-purificadores .telefone-numero a{
    text-decoration: none;
}

.header-container .telefone-numero p.telefone,
.telefone-mobile-container .telefone-numero p.telefone{
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--white);
    margin: 0;
}

.telefone-mobile-container{
    display: none;
    height: 50px;
    background-color: #4a4a4a;
}

/*devices smarths*/
@media only screen and (max-width: 1023px){
    .header-container{
        padding: 0;
        display: grid;
        grid-template-columns: 90% 10%;        
    }
    .header-container .telefone-label ,
    .header-container .telefone-numero{
        display: none;
    }
    .header-container .telefone-icon img.icon{
        margin: 0;
        height: 18px;
    }

    .header-container .logo-container{
        justify-self: center;
        margin-left: 30px;
    }

    .telefone-mobile-container{
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, 1fr) 10%;
    }

    .telefone-mobile-container .telefone-label{
        display:flex;
        justify-self: end;
        padding-right: 10px;
    }

    .telefone-mobile-container .icon{
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
        color: var(--white);
        display: inline-block;
    }
    .header-purificadores .telefone-mobile-container{
        opacity: 0;
        height: 0;
        transition: 0.2s all ease;
    }
    .header-purificadores.btn-phone-active .telefone-mobile-container{
        height: 50px;
        opacity: 1;
    }
}