.header-bg {position: sticky; top: 0; background: var(--branco); z-index: 99999; height: 90px; overflow: hidden;}
.header {display: flex; align-items: center; height: 100%; justify-content: space-between;}
.header .logo {cursor: pointer;}
.header .whatsapp{ display: flex; gap: 10px; align-items: center;}
.header .whatsapp > a,
.header .whatsapp > a picture {display: flex; align-items: center;}
.header .whatsapp .whats-href { gap: 10px; color: var(--branco); font: 22.07px titillium;}
.header .whatsapp .img {display: flex; align-items: center;}
.header .links {display: flex; height: 100%; align-items: center;}
.header .links-parent {display: block; height: 100%;}
.header .links-parent .fill-end-screen {background: var(--cor2); height: 100%; z-index: -1;}
.header .link-item {display: flex; height: 100%; align-items: center; padding: 0 20px; cursor: pointer; background-color: var(--cor2); color: var(--branco); position: relative;}

.header .link-item .link::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--cor1); z-index: 1; transition: .2s;}
.header .link-item:hover .link::after,
.header .link-item.ativo .link::after {width: 100%; height: 100%;}

.header .link-item .link {font: 17px titillium;}
.header .link p {position: relative; z-index: 2;}
.header .bx {display: none; background: var(--preto); position: relative; width: 30px; height: 2px; cursor: pointer; transition: .3s ease;}
.header .bx::after,
.header .bx::before {content: ''; position: absolute; width: 100%; height: 2px; background: var(--preto); transition: .3s ease;}
.header .bx::after {top: 10px;}
.header .bx::before {bottom: 10px;}

.menu-mobile .instagram,
.header .whatsapp .tel-href {display: none;}
.menu-mobile {display: none; position: sticky; top: 88px; z-index: 99999; background: var(--branco);}

@media(max-width: 1250px){
    .header .whatsapp .whats-href {font-size: 19px;}
    .header .link-item {padding: 0 15px;}
}

@media(max-width: 990px){
    .menu-mobile .instagram picture {display: flex; align-items: center;}
    .menu-mobile .instagram {padding: 7px 28px; display: flex; align-items: center; gap: 8px;}
    .header .whatsapp .tel-href {display: block;}
    .header .whatsapp .instagram,
    .header .whatsapp .whats-href {display: none;}
    .header {justify-content: unset;}
    .header .bx {display: block;}
    .header .whatsapp {margin-left: auto; margin-right: 10px;}
    .header .whatsapp p {display: none;}
    .header .links-parent {display: none;}
    .header .bx.ativo::after {transform: rotate(270deg); top: 0;}
    .header .bx.ativo::before {transform: rotate(-270deg); top: 0;}   
    .header .bx.ativo {transform: rotate(45deg);}
    .menu-mobile {font: 17px titillium;}
    .menu-mobile .link-item{display: flex; transition: .3s ease; align-items: center; height: 40px; padding: 0 0 0 25px;box-sizing: border-box; border-left: 3px solid transparent; border-bottom: 1px solid #dfdfdf;}
    .menu-mobile .link-item:first-child{border-top: 1px solid #dfdfdf;}
    .menu-mobile .link-item.ativo {border-left: 3px solid var(--cor1); background: var(--cor2); color: var(--branco);}
}
