html {overflow: hidden visible;}
.bottom.mobile {display: none;}

.header-bg { position: absolute; left: 50%; top: 52px; width: 100%; z-index: 999999; transform: translate(-50%, -50%); background: var(--branco); height: 105px; box-shadow: 1px -1px 4px 0px black;}
.header {display: flex; position: relative; height: 100%;justify-content: center; align-items: center;}
.header > * {flex: 1 1 calc(33% - 20px);}
.header-bg .nav-bar {background: #003865;}
.header .logo {position: relative; z-index: 1; background: var(--branco); display: flex; align-items: center; padding: 0 25px 0; justify-content: center;}
.nav-bar .top {display: flex; justify-content: space-between; position: relative; align-items: center;  padding: 0 0 0 20px; height: 100%;}
.nav-bar .top::after {position: absolute; margin-left: 20px; content: ''; width: calc(100vw - var(--width) + 100% - (100vw - var(--width)) / 2 - var(--scrollbarWidth) + var(--scrollbarWidth) / 2); left: 0;height: 3px;top: 100%; background: #FFC000;}
.nav-bar {position: relative; display: flex; width: 100%;flex-direction: column;}
.nav-bar .top > * {display: flex; gap: 10px; text-decoration: none; align-items: center;}
.nav-bar .bottom {display: flex; width: 100%; align-items: center; justify-content: space-between; height: 100%;}
.nav-bar .top p {font: 400 0.954rem montserrat; color: var(--branco); transition: var(--transition2);}
.nav-bar .top p b {font: 700 1.227rem montserrat;}
.nav-bar .paginas {display: flex; justify-content: space-between; font: 400 1rem montserrat; width: 100%;position: relative; height: 100%; align-items: center;}
.nav-bar .paginas > .pagina-parent {display: flex; height: 100%; align-items: center;}
.nav-bar .pagina {color: var(--branco); cursor: pointer; height: 100%; align-content: center; padding: 15px;}
.tel:hover .line-tel-1{animation: 1s tel-1 infinite ease alternate;}
.tel:hover .line-tel-2{animation: 1s tel-2 infinite ease alternate;}
.nav-bar .email:hover p,
.tel:hover p{color: #DCA700;}
.header .email {display: flex; align-items: center; gap: 10px; font: 400 15.05px montserrat; color: #191919;}
.header .contatos {display: flex; align-items: center; gap: 70px;}
.header .contatos .whats-href {display: flex; gap: 10px; align-items: center; color: #191919; font: 400 15.27px montserrat;}
.header .contatos .whats-href b {font: 700 19.63px;}
.header .contatos .redes-sociais {display: flex; gap: 15px;}
.paginas > .pagina-parent > .pagina:hover > p {color: #FFC000}
.paginas > .pagina-parent > .pagina .pagina-parent .pagina:hover b{color: #FFC000;}
 
.nav-bar .email:hover .email-rotate {animation: 3s alternate email infinite ease;}
.bx {display: none;}
.pagina-parent.ativo {background: rgb(0, 28, 62);}
.mobile .pagina-parent.ativo {padding: 0.9375rem 0;}
@keyframes tel-1{
 0% {transform: translate(0, 0);}
 50% {transform: translate(10px, -10px);}
 100% {transform: translate(20px, -20px)}
}   
@keyframes tel-2 {
 0% {transform: translate(0, 0);}
 50% {transform: translate(20px, -20px);}
 100% {transform: translate(10px, -10px)}
}


.pagina-parent .conteudo {display: none; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 999; background-color: #001C3E; width: 1130px; max-width: 90%; height: 375px; max-height: 70vh; transform: translate(-50%, -50%); left: 50%; top: 322%;}
.pagina-parent .conteudo > .pagina-parent {display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--cor3);}
.pagina-parent .conteudo > .pagina-parent b {text-transform: uppercase;}
.pagina-parent .conteudo > .pagina-parent > .pagina {height: 100%; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}
.pagina-parent.ativo > .pagina > p {color: var(--cor3); font-weight: 600;}
.logo.mobile,
.close-btn {display: none;}
@media(max-width: 1250px){
      .header .email, .header .contatos,
 .nav-bar::before {display: none;}
  .bottom.mobile {display: block; z-index: 9090909; background: var(--cor1); pointer-events: none; transition: .4s; position: fixed; width: calc(100vw - var(--close_width)); min-height: 100vh; top: 0; left: -200%;} 
  .bottom.mobile.ativo {left: 0; pointer-events: all;}
  .logo.mobile {display: block; background-color: var(--branco); text-align: center;}
  .bottom.mobile .paginas {display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5625rem 0;}
  .bottom.mobile .pagina {padding: 0 0 0 1rem; font: 400 1.375rem montserrat; color: var(--branco);}
  .bottom.mobile .close-btn {display:flex; align-items: center; justify-content: center; font: 700 2rem montserrat; color: var(--branco); position: absolute; width: var(--close_width); height: var(--close_width); background: red; right: -5rem; top: 0; }
  .bottom.mobile .pagina-parent br {display: none;}
 .nav-bar .redes-sociais,
 .nav-bar .top::after{display: none;}
 .nav-bar .top p b {font-size: 1rem;}
  .bx {display: flex; position: relative; align-items: center; justify-content: center;}
  .bx span {position: relative; display: block; width: 30px; height: 3px; background: var(--cor3);}
  .bx span::before,
  .bx span::after {position: absolute; content: ''; width: 30px; height: 3px; background: var(--cor3);}

   .bx span::before {top: -10px;}
   .bx span::after {top: 10px;}
  .nav-bar {display: none;}
  .nav-bar .bottom .paginas {display: flex; flex-direction: column;gap: 20px; font-size: 1.375rem; padding: 1.375rem}
  .header .logo.mobile {display: flex; align-items: center; justify-content: center;}
  .pagina-parent .conteudo {display: flex; visibility: visible; position: static; flex-direction: column; background: initial; width: auto; max-width: unset; max-height: unset; height: auto; transform: unset; overflow: hidden;}
  /* .pagina-parent .conteudo.ativo {transform: scaleY(1); height: auto;} */
  .pagina-parent {position: relative; display: flex; flex-direction: column;}
  .pagina-parent .btn-pages {position: absolute; right: 0;top: 50%; height: 10px; background: #DCA700; width: 40px; z-index: 9999;}
  .header .logo {padding: 15px;}

  .bottom.mobile .pagina-parent .conteudo > .pagina-parent {border: none; justify-content: flex-start; padding: 0 0 0 1.25rem;}
  .bottom.mobile .pagina-parent .conteudo {overflow-x: hidden; gap: 0.675rem;}
  .bottom.mobile .pagina-parent .conteudo > .pagina-parent:first-child { padding-top: 1rem;}
  .bottom.mobile .pagina-parent .conteudo > .pagina-parent > .pagina {justify-content: flex-start; font: 400 0.875rem montserrat;}
 .header > * {flex: initial;}
 .header {justify-content: space-between;}
 .nav-bar .top {justify-content: flex-end;}
 .nav-bar .top > a {display: none;}
 .header-bg {top: 48px; box-shadow: 1px -1px 4px 0px black;}
}