.nav__menu{inset-block:0;background-color:var(--container-color);z-index:10;width:100%;padding:60px 30px;transition:all .5s cubic-bezier(.77,.2,.05,1);position:fixed;left:-100%}.show-menu{left:0}.nav__link{-moz-column-gap:24px;border-bottom:1px solid var(--border-color);align-items:center;column-gap:24px;padding-block:12px;display:flex}.nav__icon,.nav__name{color:var(--title-color);font-size:var(--h3-font-size)}.nav__name{font-weight:var(--weight-500)}.active-nav .nav__icon,.active-nav .nav__name{color:var(--first-color)}.active-nav{border-bottom-color:#0000;border-left:3px solid var(--first-color);background-color:color-mix(in srgb, var(--first-color) 8%, transparent);border-radius:0 8px 8px 0;padding-left:16px}@media screen and (min-width:1024px){.active-nav{background-color:#0000;border-bottom:none;border-left:none;border-radius:50%;padding-left:0}}.nav__toggle{background-color:var(--container-color);z-index:15;border-radius:5px 0 0 5px;width:50px;height:50px;padding:12px 10px;position:fixed;top:25px;right:0}.nav__toggle span{background-color:var(--title-color);border-radius:2px;width:30px;height:2px;margin-bottom:10px;display:block}.animate-toggle span:first-child{transform:rotate(45deg)translate(11px,8px)}.animate-toggle span:nth-child(2){display:none}.animate-toggle span:last-child{transform:translate(1px,1px)rotate(-45deg)}@media screen and (min-width:1024px){.nav__menu{all:unset}.nav__toggle{display:none}.nav{inset-block:0;z-index:10;align-items:center;display:flex;position:fixed;left:30px}.nav__item{margin-block:20px}.nav__link{background-color:var(--container-color);border-bottom:none;border-radius:50%;width:50px;height:50px;padding:0;position:relative}.nav__icon{margin-inline:auto;font-size:20px}.nav__name{background-color:var(--first-color);height:100%;line-height:50px;font-size:var(--h3-font-size);color:var(--text-white);opacity:0;visibility:hidden;z-index:-1;border-radius:0 25px 25px 0;padding-inline:25px 30px;transition:all .3s;position:absolute;top:0;left:0}.nav__link:hover .nav__name{color:var(--text-white);opacity:1;visibility:visible;border-radius:0 30px 30px 0;left:27px}.nav__link:hover,.active-nav{background-color:var(--first-color)}.nav__link:hover .nav__icon,.active-nav .nav__icon,.active-nav .nav__name{color:var(--text-white)}}