.navbar{width:100%;position:-webkit-sticky;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.5rem;height:72px;transition:all .3s ease-in-out;z-index:999;color:#333;background:transparent;font-weight:700}.navbar.scroll{box-shadow:0 6px 12px rgba(208,237,231,.367);background:var(--primary-color)}.nav-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:var(--light-color)}.nav-logo .logo{object-fit:contain;width:50px;height:50px;color:var(--light-color)}.nav-items a{position:relative;margin:15px;text-decoration:none;color:var(--light-color)}.nav-items a i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;position:absolute;top:-10px;right:-15px;font-style:normal;font-size:12px}.nav-toggle{display:none;flex-direction:column;align-items:center;cursor:pointer}.nav-toggle span{width:30px;height:4px;background:var(--light-color);margin-bottom:5px;border-radius:2px;transform-origin:5px 0;transition:all .2s linear}.nav-toggle.open>span:first-child{transform:rotate(45deg);background:var(--danger-color)}.nav-toggle.open>span:nth-child(2){display:none}.nav-toggle.open>span:nth-child(3){transform:rotate(-45deg) translate(-5px,1px);background:var(--danger-color)}@media (max-width:768px){.nav-items{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:100%;height:100vh;padding:20px 0;transform:translateY(-115%);transition:all .3s ease;top:72px;left:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-items.open{transform:translateY(-72px)!important}.nav-toggle{display:flex!important}.nav-items a{font-size:1.5rem;font-weight:700;color:var(--light-color)}}