.header-bg .header {align-items: center; gap: 45px; justify-content: space-between; padding: 10px 0;}
.header .whats-href {font: 18.55px montserrat; align-items: center; gap: 6px; color: var(--preto-font)}
.header .nav-bar-top {justify-content: space-between; gap: 10px; align-items: center;}
.header .endereco,
.header .mailto {font: 15px montserrat; color: var(--cinza-font);}
.header .nav-bar {display: flex; flex-direction: column; gap: 30px; width: 100%;}
.header .pages {gap: 25px;height: 32px;}
.header .page {width: 100%; display: flex; align-items: center; position: relative; white-space: nowrap; justify-content: center; font: 15px montserrat; color: var(--cinza-font);}
.header .page::after {content: ''; position: absolute; left: 0; top: -10px; width: 0%; transition: var(--transition2); height: 4px; background: var(--cor1);}
.header .page.active {color: var(--cor1); font-weight: 600;}
.header .page:hover {color: var(--cor1);}
.header .page:hover::after,
.header .page.active::after {width: 100%;}
.header .page a {height: 100%; display: flex; align-items: center; justify-content: center;}
.header .nav-bar-bottom {position: relative;}
.header .fill-header {height: 2px; background: #E0E7F6; top: -9px;}
.header .close-btn,
.header .logo.mobile {display: none;}
.header .bx {display: none; height: 2px; width: 30px; background: var(--cor1); position: relative;}
.header .bx::before,
.header .bx::after {content: ''; position: absolute; width: 100%; height: 2px; background: var(--cor1);}
.header .bx::before {bottom: -10px;}
.header .bx::after {top: -10px;}
.header .nav-bar-content {flex-direction: column; gap: 30px;}

@media(max-width: 1250px){
    .header .logo.mobile,
    .header .bx {display: block;}
    .header .logo.mobile {margin: 0 auto;}
    .header .page::after {display: none;}
    .header .nav-bar-top,
    .header .pages {flex-direction: column; height: auto; gap: 0;}
    .header .pages .page a, 
    .header .nav-bar-top > * {padding: 10px 30px;}
    .header .nav-bar.active {left: 0;}
    .header .nav-bar {position: fixed; left: -200%; transition: var(--transition2); z-index: 999; background: #00000028; top: 0; width: 100vw; height: 100vh;}
    .header .nav-bar-content {display: flex; gap: 15px; flex-direction: column-reverse; justify-content: flex-end; width: calc(100% - 60px); background: var(--branco); height: 100%;}
    .header .fill-header {display: none;}
    .header .nav-bar-top {align-items: flex-start;}
    .header .page:last-child {border-bottom: 1px solid rgba(0, 0, 0, 0.18);}
    .header .page {justify-content: flex-start; border-top: 1px solid rgba(0, 0, 0, 0.18);}

    .header .close-btn {position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: auto; aspect-ratio: 1/1; background: #e10000; cursor: pointer; color: var(--branco); font: 16px montserrat;}
}