header {position: sticky; top: 0; z-index: 10;}
.menu {background-color: var(--preto); border-top: 6px solid var(--marrom); position: relative;}
.menu .conteudo {justify-content: space-between;}
.menu .sections .links {margin: 0 21px 0 0;}
.menu .conteudo, .menu .sections, .menu .sections .links {display: flex; flex-direction: row; align-items: flex-start;}

.menu .logo {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 15px;}
.menu .logo img {width: 276px; height: 41px; object-fit: contain;}
.menu .logo svg {transition: var(--default);}
.menu .logo svg .cls-1 {animation: 2s logo-df ease-in; fill: var(--branco); transition: var(--default);}
.menu .logo:hover svg .cls-1 {animation: 2s logo ease-in; fill: var(--marrom-hv);}
.menu .logo svg {width: 51px; height: 51px;}
.menu .link {padding: 46px 25px 42px; display: block; font: 400 15px Montserrat; color: var(--branco); transition: var(--default); position: relative;}
.menu .link p {z-index: 1; position: relative;}
.menu .link.ativo::after, .menu .link::after {content: ''; height: 100%; width: 100%; background-color: var(--marrom); position: absolute; top: 0; left: 0; z-index: 0; transform: scaleY(0); transition: var(--default); transform-origin: 0 0;}
.menu .link.ativo::after {transform: scaleY(1);}
.menu .link:hover {cursor: pointer; transition: var(--default);}
.menu .link:hover::after {background-color: var(--marrom); transform: scaleY(1);}

.menu .enlgoba-logo {padding: 25px 0 0;}
.menu .whatsapp {display: block; font:400 15.91px / 26.78px Montserrat; color: var(--branco); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px;}
.menu .whatsapp:hover strong {color: var(--verde);}
.menu .whatsapp .icone img {width: 100%; height: 100%;}
.menu .whatsapp .icone {width: 19px; height: 19px;}
.menu .whatsapp strong {font:500 21.91px / 26.78px Montserrat; transition: var(--default);}
.menu .enbloga-whatsapp {padding: 40px 0 0; }
.menu .telefone.mobile {display: none;}

.menu .btn {width: 30px; height: 30px; display: none; gap: 5px; flex-direction: column; justify-content: center; align-items: center; position: relative;}
.menu .btn .rec {width: 30px; height: 5px; background-color: var(--branco); position: absolute; transition: var(--default);}
.menu .btn .rec.rec-1 {top: 0;}
.menu .btn .rec.rec-3 {bottom: 0;}
.menu .btn.open .rec.rec-1 {animation: 1s btn-1-opn ease; transform: rotate(45deg); top: unset;}
.menu .btn.open .rec.rec-2 {background-color: var(--preto);}
.menu .btn.open .rec.rec-3 {animation: 1s btn-3-opn ease; transform: rotate(-45deg); bottom: unset;}

.menu .btn.close .rec.rec-1 {animation: 1s btn-1 ease; transform: rotate(0deg); top: 0;}
.menu .btn.close .rec.rec-2 {animation: 1s btn-2 ease; background-color: var(--branco);}
.menu .btn.close .rec.rec-3 {animation: 1s btn-3 ease; transform: rotate(0deg); bottom: 0;}

@keyframes btn-1-opn {
    0%, 50%{
        transform: rotate(22.5deg);
    }
    50%, 100%{        
        transform: rotate(45deg);
        top: unset;
    }
    
}
@keyframes btn-2 {
    0%, 95%{
        background-color: var(--preto);
    }
    95%, 100%{
        background-color: var(--branco);
    }   
}
@keyframes btn-3-opn {
    0%, 50%{
        transform: rotate(-22.5deg);
    }
    50%, 100%{
        transform: rotate(-45deg);
        bottom: unset;
    }
}
@keyframes btn-1 {
    0%, 50%{
        transform: rotate(22.5deg);
        top: 40%;
    }
    50%, 100%{
        transform: rotate(0deg);
        top: 0;
    }
}
@keyframes btn-3 {
    0%, 50%{
        transform: rotate(-22.5deg);
        bottom: 40%;
    }
    50%, 100%{
        transform: rotate(0deg);
        bottom: 0;
    }   
}

@keyframes logo {
    0%, 50%{
        fill: var(--branco);
        stroke-dashoffset: 0;
        stroke-dasharray: 0;
    }
    50%, 100%{
        stroke-dashoffset: 1;
        stroke-dasharray: 1;
        fill: var(--marrom-hv);
    }
    
}

@keyframes logo-df {
    0%, 50%{
        fill: var(--branco);
    }
    50%, 100%{
        fill: var(--branco);
    }
    
}

@media (max-width:1200px){
    .menu .whatsapp p {display: none;}
    .menu .whatsapp .icone {margin: 0;}
    .menu .link {padding: 46px 21px 42px;}
    .menu .enbloga-whatsapp {padding: 45px 0 0;}
}

@media (max-width:990px){
    .menu {padding: 20px 0;}
    .menu .btn {display: flex;}
    .menu .enlgoba-logo {padding: 0;}
    .menu .conteudo {align-items: center; gap: 20px;}
    
    .menu .sections .links {display: none; position: absolute; top: 100%; left: 0; background-color: var(--preto); width: 100%; flex-direction: column;}
    .menu .sections {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px;}
    .menu .enbloga-whatsapp {padding: 0;}
    
    .menu .whatsapp {display: none;}
    .menu .whatsapp .icone {width: 45px; height: 45px; border-radius: 100%; background-color: var(--branco); display: grid; place-content: center; place-items: center;}
    .menu .whatsapp .icone img {width: 28px; height: 28px; filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(320deg) brightness(96%) contrast(104%);}
    .menu .telefone.mobile {display: flex; }
    .menu .telefone.mobile  p {display: none;}
    .menu .telefone.mobile .icone {width: 45px; height: 45px; border-radius: 100%; background-color: var(--branco); display: grid; place-content: center; place-items: center;}
    .menu .telefone.mobile .icone img {width: 28px; height: 28px; filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(320deg) brightness(96%) contrast(104%);}

    .menu .sections .links .li {width: 100%;}
    .menu .link.ativo::after {transform: scaleY(1);}
    .menu .link::after {transform: scaleY(1); background-color: var(--preto); transition: 0;}
    .menu .link {text-align: center;; padding: 20px;}
    .menu .logo img {width: 220px; height: auto;}
}

@media (max-width:500px){
    .menu .logo img {width: 100%; max-width: 200px;}
}

@media (max-width:420px){
    .menu .logo img {display: none;}
}