.header-bg .logo-bg {display: block; position: absolute; background: var(--branco); width: 290px;z-index: var(--z-menu); padding: var(--padding-container); border-radius: var(--radius-xxl); left: 18%;}
.header-bg .logo {display: flex;}

.header-top {display: flex;align-items: center;justify-content: space-between;padding: 15px 0; padding-left: 360px; box-sizing: border-box;}
.header-top .item,
.header-top .telefones {display: flex;align-items: center; gap: 5px;}
.header-top .telefones {gap: 35px;padding: 0 50px;}
.header-top .redes {display: flex; gap: 5px;}
.header-top .item {font: var(--font-texto); color: var(--cor-fonte);}
.header-top .telefones .item {font: 400 14.19px montserrat; color: var(--cor-fonte);}
.header-top .telefones .item b {font: 700 16.79px montserrat;}


.header-bottom-bg {background: var(--cor1);}
.header-bottom {box-sizing: border-box; padding-left: 360px;}
.header-bottom .pages {display: flex;align-items: center;gap: 20px; justify-content: space-between;}
.header-bottom .pages .page.submenu{cursor: default;}
.header-bottom .pages .page > a{font: var(--font-texto);white-space: nowrap; color: var(--branco); position: relative; transition: var(--transition2); height: 50px;padding: 0 15px; display: flex; align-items: center; justify-content: center;}
.header-bottom .pages .page a::after {content: ''; position: absolute; width: 0; height: 1px; background: var(--branco); bottom: 12px; left: 0; transition: var(--transition1) ease;}
.header-bottom .pages .page.ativo a::after,
.header-bottom .pages .page a:hover::after {width: 100%;}
.header-bottom .pages .page.ativo a { font-weight: 600;}
/* .header-bottom .pages .sub-pages {display: none;} */
/* .header-bottom .pages .page.submenu:hover {background: var(--branco); border-radius: 30px;} */

.header-bottom .pages .page.submenu {position: relative; width: 100%;}

.header-bottom .pages .page.submenu .sub-pages a {color: var(--cor-fonte); padding: 10px; font: 400 15px montserrat; text-align: center; text-transform: none; height: auto; transition: var(--transition2); display: block;}
.header-bottom .pages .page.submenu .sub-pages a:hover {color: var(--branco); background: var(--cor1);}
.header-bottom .pages .page.submenu .sub-pages a::after {display: none;}
.header-bottom .pages .page.submenu:hover > a {color: var(--cor1); background: var(--branco);}
.header-bottom .pages .page .sub-pages .sub-page.ativo a{background: var(--cor1); color: var(--branco);}
.header-bg .close-btn,
.header-bg .logo-bg.mobile,
.header-bg .bx {display: none;}	

.header-bottom .pages .page .sub-pages .sub-page a p {white-space: pre-wrap;}

@media (max-width: 1700px){
    .header-bg .logo-bg {left: 15%;}
}
@media (max-width: 1550px){
    .header-bg .logo-bg {left: 10%;}
}

@media (max-width: 1360px){
    .header-bg .logo-bg {left: 5%;}
}


@media(max-width: 1200px){
    .header-top {display: none;}
    .header-bg .logo-bg {position: static;}
    .header-bottom {padding: 0;}
    .header-bottom .pages .page.submenu {width: auto;} 
}
 
@media(min-width: 990px){
    .header-bottom .pages .page .sub-pages {position: absolute;z-index: 999; top: 100%;width: 100%; left: 0; border-radius: 0 0 30px 30px; background: var(--branco); white-space: nowrap; max-height: 0px; overflow: hidden; transition: .8s;box-shadow: 1px 10px 10px 0 rgba(0, 0, 0, 0.1);}
    .header-bottom .pages .page.submenu:hover .sub-pages {max-height: 800px;}
}

@media (max-width: 990px){
    .header-bottom .pages .page.ativo > a{color: var(--cor1);}

    .header-bottom-bg {background-color: var(--branco);}
    .header-bg {display: flex; align-items: center; justify-content: space-between; padding: 0 5%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); position: relative; z-index: 5;}
    .header-bg.active::after {left: 0;}
    .header-bg::after {content: ''; position: fixed; top: 0; left: -100%;transition: var(--transition2); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 4;}
    .header-bg .logo-bg {margin: 0;}
    .header-bottom-bg {position: fixed; top: 0; left: -200%;  transition: var(--transition1); width: calc(100% - var(--close-btn));height: 100%; z-index: 9999;}
    .header-bottom {display: flex; flex-direction: column; align-items: center; background: var(--branco);}
    .header-bottom .pages .page > a {color: var(--cor-fonte);}
    .header-bg .bx {display: block; width: 30px; height: 3px; background: var(--cor1); position: relative;}
    .header-bottom .pages {flex-direction: column; width: 100%; justify-content: flex-start; align-items: flex-start;}
    .header-bg .bx::before,
    .header-bg .bx::after {content: ''; position: absolute; width: 100%; height: 3px; background: var(--cor1);}
    .header-bg .bx::before {top: -8px;}
    .header-bg .bx::after {top: 8px;}
    .header-bg.active .header-bottom-bg {left: 0;}
    .header-bg .logo-bg.mobile {display: block;}
    .header-bg.active .close-btn {right: 0;}
    .header-bg .logo-bg {z-index: 0;}
    .header-bg .close-btn {display: flex; align-items: center; justify-content: center; width: var(--close-btn); height: auto; aspect-ratio: 1/1; background: #e10000; position: fixed; top: 0; right: -200%; cursor: pointer; transition: var(--transition2);}
    .header-bg .close-btn p {font: 600 20px montserrat; color: var(--branco);}
    .header-bg .pages .sub-pages {display: none;}
    .header-bottom .pages .page.submenu,
    .header-bg .pages .page {width: 100%;}
    .header-bottom .pages .page.submenu .sub-pages a {text-align: left;}
    .header-bg .pages .page.submenu .sub-page{border-top: 1px solid #ccc;}
    .header-bg .pages .page.submenu > a p {position: relative;}
    .header-bg .pages .page.submenu > a p::before,
    .header-bg .pages .page.submenu > a p::after {content: ''; position: absolute; width: 12px; height: 3px; background: var(--cor1); top: 50%; right: -30px; transition: var(--transition2);}
    .header-bg .pages .page.submenu > a p::before {transform: rotate(90deg);}
    .header-bg .pages .page.submenu > a.ativo p::before {transform: rotate(0deg);}

}

@media(max-width: 650px){
    .header-bg .logo-bg {width: max-content;}
    .logo-bg .logo img {width: 160px; height: auto; aspect-ratio: 250/100;}
}