nav{z-index:900;width:100vw;background-color:#fff;height:15vh;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;position:fixed;text-shadow:2px 2px 2px rgba(0,0,0,.5)}.nav{z-index:1000;position:relative}.transparent-nav{background-color:transparent;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff}.logo{width:250px;height:10vh;object-fit:contain}.dark-nav{background-color:rgba(0,0,0,.873)}.nav-ul{display:flex;gap:1rem;list-style:none;justify-content:space-around}li{margin:0 20px;position:relative;cursor:pointer;font-size:1rem;overflow:hidden}li:before{content:"";position:absolute;width:0;height:2px;bottom:0;left:0;background-color:#fff;transition:width .3s ease}li:hover:before{width:100%}.active,li:hover{font-weight:bolder}.hamburger{cursor:pointer}.hamburger input{display:none}.hamburger svg{height:3em;transition:transform .6s cubic-bezier(.4,0,.2,1)}.line{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:3;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}.line-top-bottom{stroke-dasharray:12 63}.hamburger.checked svg{transform:rotate(-45deg)}.hamburger.checked svg .line-top-bottom{stroke-dasharray:20 300;stroke-dashoffset:-32.42}.mobile-nav{position:fixed;top:0;z-index:800;width:100vw;height:100vh;background-color:rgba(0,0,0,.771);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex}.mobile-nav,.mobile-nav>ul{flex-direction:column;align-items:center;justify-content:center}.mobile-nav>ul{color:#fff}@media screen and (max-width:500px){nav{padding:0 1rem 0 0;font-size:1rem}.transparent-nav{height:10vh}.logo{transform:scale(.8)}}button{align-items:center;min-width:200px;height:50px;border:0;outline:0;font-size:1rem;background:var(--color-primary);color:#fff;padding:0 2rem;font-weight:500}.buttons-group,button{display:flex;justify-content:center}.buttons-group{gap:3rem;width:100%;position:relative}.transparent-btn{background-color:transparent;border:3px solid #fff}svg{margin:0 0 0 10px}button:hover svg{margin:0 0 0 25px;transition:.3s}button:not(:hover) svg{transition:.3s}button:active{transform:scale(.9)}button:active,button:not(:active){transition:.2s}@media screen and (max-width:500px){.buttons-group{flex-direction:column}}