.header{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;width:100%;flex-wrap:wrap;position:relative}.header ul{margin:0;padding:0;list-style:none;overflow:hidden}.header li{text-align:center}.header li a{display:flex;align-items:center;justify-content:center;padding:1rem;text-decoration:none;position:relative}.header li a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background-color:currentColor;transition:width .3s ease,left .3s ease}.header li a.active:after,.header li a:hover:after{width:5%;left:47.5%}.header .logo{font-size:1.25rem;text-decoration:none;line-height:normal;margin:0}.header .logo-name{font-family:var(--font-logo);font-weight:700}.menu{font-family:var(--font-jakarta)}.header .menu{clear:both;max-height:0;transition:max-height .2s ease-out;width:100%;order:3}.header .menu-icon{cursor:pointer;display:flex;align-items:center;padding:20px 12px;position:relative;-webkit-user-select:none;user-select:none;border-radius:4px}.header .menu-icon .navicon{background:#333;display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}.header .menu-icon .navicon:after,.header .menu-icon .navicon:before{background:#333;content:"";display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}.header .menu-icon .navicon:before{top:5px}.header .menu-icon .navicon:after{top:-5px}.header .menu-btn{display:none}.header .menu-btn:checked~.menu{max-height:370px}.header .menu-btn:checked~.menu-icon .navicon{background:transparent}.header .menu-btn:checked~.menu-icon .navicon:before{transform:rotate(-45deg)}.header .menu-btn:checked~.menu-icon .navicon:after{transform:rotate(45deg)}.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after,.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before{top:0}@media screen and (min-width:480px){.header .logo{font-size:1.5rem}}@media screen and (min-width:768px){.header li{float:left}.header .menu{max-height:none;width:-webkit-max-content;width:max-content}.header .menu-icon{display:none}.header .logo{font-size:1.75rem}.header li a{font-size:1.25rem}.header li a:after{height:3px}.header li a.active:after,.header li a:hover:after{width:25%;left:37.5%}}@media screen and (min-width:1440px){.header .logo{font-size:1.75rem}.header li a{font-size:1.5rem}}