.header{align-items:flex-start;background:var(--color-black);display:flex;flex-direction:column;justify-content:center;padding:.5rem 1rem;position:sticky;top:0;z-index:9;@media (min-width:768px){align-items:center;flex-direction:row;justify-content:space-between}.logo-search{align-items:center;display:flex;gap:10px;position:relative;input{border:none;border-radius:20px;min-width:270px;outline:none;padding:.5rem 1rem;&::placeholder{color:var(--color-gray-4);font-size:smaller}}.btn-search{background:none;border:none;outline:none;position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}}.navigation{max-width:100%;overflow:hidden;.menu{background:var(--color-black);display:none;flex-direction:column;gap:8px;height:100vh;list-style:none;min-width:clamp(200px,300px,100%);position:absolute;right:-100%;top:0;z-index:9;@media (min-width:1024px){display:flex;flex-direction:row;height:auto;position:relative;right:0}.item-menu{color:var(--color-white);position:relative;text-align:left;@media (min-width:1024px){text-align:center}.menu-anchor{color:currentColor;display:block;padding:.5rem 1rem;position:relative;text-decoration:none;white-space:nowrap;&:after{background-color:currentColor;bottom:0;content:"";height:1px;left:1rem;position:absolute;transform:translateX(0);transition:width .3s ease-in-out;width:0;@media (min-width:1024px){left:50%;transform:translateX(-50%)}}&:hover:after{width:45%}}.submenu{display:flex;flex-direction:column;list-style:none;padding:.2rem 1.4rem;li{display:block;padding-left:8px}@media (min-width:1024px){display:none}}}}}}