header .mult-links:hover .gp-areas {transform: scale(1); opacity: 1;}
header .mult-links {position: relative; display: flex; justify-content: center; align-items: center;}
header .mult-links .page {cursor: pointer;}
header .mult-links .gp-areas {position: absolute; top: 100%; padding-top:20px; z-index: 1000; transition: 0.35s; opacity: 0; transform: scale(0);}
header .mult-links .nav-list {width: unset; max-width: 800px; flex-wrap: wrap; width: 620px; background: var(--cinza1); padding: 2em; border-radius: 0 0 10px 10px;}
header .mult-links .nav-list li {display: flex; justify-content: flex-start; align-items: flex-end; width: 28%;}


header .mobile-nav .mult-links {display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
header .mobile-nav .mult-links .gp-areas {position: static; padding-top:0; opacity: 1; transform: scale(1); width: 100%; padding: 10px 0;}
header .mobile-nav .mult-links .nav-list {width: unset; max-width: 800px; flex-wrap: nowrap; width: 100%; background: var(--cinza1); padding: 0.8em; border-radius: 10px; gap: 8px; flex-direction: column;}
header .mobile-nav .mult-links .nav-list li {display: flex; justify-content: flex-start; align-items: flex-end; width: fit-content;}



.header-bg {background-color: var(--preto1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000;}
.header-bg .amarelinha {height: 2px; width: 100%; background-color: #D99D44; top: 0; left: 0;}
.header-bg::after {display: flex; content: ''; position: absolute; height: 2px; width: 100%; left: 0; top: 104px; background-color: var(--cinza1);}
.header {display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.header .logo-a {display: flex; max-width: 273px; max-height: 63px; width: 100%; height: 100%;}
.header .logo {display: flex; width: 100%; height: 100%;}
.header .logo .img {width: 100%; height: 100%; display: flex;}
.header .logo .img img {width: 100%; height: 100%; object-fit: contain;}

.hidden {display: none;}

.header .cima {display: flex; justify-content: space-between; width: 100%; align-items: center; padding: 23px 0 18px; gap: 28px;}
.header .cima .contatos {display: flex; max-width: 375px; width: 100%; justify-content: space-between; gap: 20px;}
.header .cima .contatos .contato {max-width: 166px; gap: 10px; justify-content: space-between; display: flex;}
.header .cima .contatos .contato .textos {display: flex; flex-direction: column; justify-content: space-between;}
.header .cima .contatos .contato .textos .nome {font: 400 10.33px/1 montserrat;}
.header .cima .contatos .contato .textos .numero {font: 300 18.91px/23.16px garet; color: var(--branco); white-space: nowrap; transition: .3s;}
.header .cima .contatos .contato .textos .numero strong {font: 700 18.91px/23.16px garet;}

.header .cima .contatos .contato.telefone .textos .nome {color: var(--bege1);}
.header .cima .contatos .contato.whatsapp .textos .nome {color: var(--verde1);}

.header .cima .contatos .contato.telefone:hover .textos .numero {color: var(--bege1);}
.header .cima .contatos .contato.whatsapp:hover .textos .numero {color: var(--verde1);}

.header .baixo {display: flex; width: 100%;}
.header .baixo .nav-list li {padding: 18px 0; text-align: center;}


.nav-menu {display: none;}
.nav-list {display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; justify-content: space-between; width: 100%;}
.nav-list li .page {text-decoration: none; color: #fff; font: 400 15px montserrat; transition: color 0.3s ease; position: relative; text-align: center;}
.nav-list li .page.active,
.nav-list li .page:hover {color: var(--bege1);}
.nav-list li .page::after {content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: var(--bege1); transition: width 0.3s ease;}
.nav-list li .page.active::after,
.nav-list li .page:hover::after {width: 100%;}

.nav-menu.cima {max-width: 420px; min-width: max-content}

.menu-hamburger {display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; cursor: pointer; z-index: 1001; transition: all 0.3s ease;}
.menu-hamburger span {display: block; width: 100%; height: 3px; background-color: #fff; border-radius: 3px; transition: all 0.3s ease;}
.menu-hamburger.active span:nth-child(1) {transform: translateY(10.5px) rotate(45deg);}
.menu-hamburger.active span:nth-child(2) {opacity: 0;}
.menu-hamburger.active span:nth-child(3) {transform: translateY(-10.5px) rotate(-45deg);}

.header .mobile-menu .logo-a {max-width: 200px;}
.mobile-menu {position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; display: flex; flex-direction: column; height: 100vh; padding: 2rem 2rem 2rem; background-color: var(--preto1); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 999; overflow-y: auto;}
.mobile-menu.active {right: 0;}
.mobile-nav ul {list-style: none; margin: 0; padding: 0;}
.mobile-nav ul li .page {text-decoration: none; color: #fff; font-size: 16px; font-weight: 500; display: block; padding: 14px 0; transition: color 0.3s ease, padding-left 0.3s ease; font-family: montserrat;}
.mobile-nav ul li .page.active {color: var(--bege1);}
.mobile-nav ul li .page:hover {color: var(--bege1); padding-left: 1rem;}
.mobile-menu .mobile-nav {margin: 2rem 0 1rem;}

.menu-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 998;}
.menu-overlay.active {opacity: 1; visibility: visible;}

.mobile-menu-tel {display: flex; gap: 30px; align-items: center;}

.mobile-menu .contatos {display: flex; gap: 1.2rem; align-items: center;}

.mobile-menu .links {gap: 20px; display: flex; flex-direction: column;}
.mobile-menu .links .contatos {display: flex; flex-direction: column; gap: 15px; align-items: flex-start;}
.mobile-menu .links .contatos .contato {display: flex; gap: 10px; font: 400 14px var(--font1); color: var(--branco); transition: var(--transition-df); width: fit-content; }
.mobile-menu .links .contatos .contato span {font: 600 12px var(--font1); color: var(--preto); display: block; margin-top: 5.5px;}
.mobile-menu .links .contatos .contato .icone { width: 35px; height: 35px; flex: 0 0 35px; display: flex; align-items: center; justify-content: center; border-radius: 5px; position: relative; overflow: hidden; transition: transform var(--transition2, .4s), box-shadow var(--transition2, .4s);}
.mobile-menu .links .contatos .contato.whatsapp span {color: var(--verde1);}
.mobile-menu .links .contatos .contato.whatsapp:hover .icone {box-shadow: 0 0 8px 2px #54ea51;}
.mobile-menu .links .contatos .contato.email:hover .icone {box-shadow: 0 0 8px 2px #f6cc59;}
.mobile-menu .links .contatos .contato.email span {color: var(--bege1);}
.mobile-menu .links .contatos .contato.whatsapp .icone {background: var(--verde1);}
.mobile-menu .links .contatos .contato.email .icone {background: var(--bege1);}
.mobile-menu .links .contatos .contato .icone svg { width: 15px; height: 15px;}
.mobile-menu .links .contatos .contato .icone svg path { fill: var(--branco);}

.mobile-menu .links .contatos .contato.whatsapp span {color: var(--verde1);}
.mobile-menu .links .contatos .contato.whatsapp:hover .icone {box-shadow: 0 0 8px 2px #54ea51;}
.mobile-menu .links .contatos .contato.whatsapp .icone {background: var(--verde1);}
.mobile-menu .links .contatos .contato.telefone span {color: var(--bege1);}
.mobile-menu .links .contatos .contato.telefone:hover .icone {box-shadow: 0 0 8px 2px #ffb84e;}
.mobile-menu .links .contatos .contato.telefone .icone {background: var(--bege1);}

.mobile-menu .links .redes {display: flex; gap: 15px;}
.mobile-menu .links .rede .icone {width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative; transition: var(--transition-df);}
.mobile-menu .links .rede svg {width: 15px; height: 15px;}

@media (min-width: 991px) {
    .nav-menu {display: block; width: 100%; max-width: 100%;}
    .mobile-menu-tel{display: none;}
    .mobile-menu {display: none;}
}

@media (max-width: 990px) {
    .header-bg::after {display: none;}
    .header .cima .contatos,
    .nav-menu.cima {display: none;}
}