.header{background-color:#6c63ff;color:#fff;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:70px;position:relative;z-index:1000}.header .logo{font-size:1.5em;padding:10px 0;text-decoration:none;color:white;font-weight:700;margin-left:5rem}.header .menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}.header .menu li a{color:white;text-decoration:none;padding:10px 20px;display:block;transition:background .3s;border-radius:4px}.header .menu li a:hover{background-color:#5547ff}.header .menu-btn{display:none}.header .menu-icon{display:none;cursor:pointer;padding:20px}.header .menu-icon .nav-icon{background:#fff;display:block;height:2px;width:18px;position:relative;transition:background .2s ease-out}.header .menu-icon .nav-icon:after,.header .menu-icon .nav-icon:before{content:"";background:#fff;display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out}.header .menu-icon .nav-icon:before{top:5px}.header .menu-icon .nav-icon:after{top:-5px}.header .menu-btn:checked~.menu{display:flex;flex-direction:column;position:absolute;top:70px;left:0;width:100%;background:#6c63ff;padding:10px 0}.header .menu-btn:checked~.menu-icon .nav-icon{background:transparent}.header .menu-btn:checked~.menu-icon .nav-icon:before{transform:rotate(-45deg);top:0}.header .menu-btn:checked~.menu-icon .nav-icon:after{transform:rotate(45deg);top:0}.header .menu li a.active-nav-item{background-color:#fff;color:#6c63ff;font-weight:600}@media (max-width:768px){.header{flex-wrap:wrap;height:auto;padding:10px 20px}.header .menu{display:none;width:100%}.header .menu-icon{display:block}.header .logo{padding:10px 0;margin-left:0}.header .menu li a{padding:5px 20px}}