/* =========================
       NAVIGATION
    ========================= */

    .navbar {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      padding: 24px 40px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      color: white;

      transition:
        background .3s ease,
        color .3s ease,
        padding .3s ease;
    }

    .navbar.scrolled {
		background: rgba(17, 17, 17, .95);
		backdrop-filter: blur(12px);
		padding: 15px 40px;
    }

    .logo {
		font-family: "Space Grotesk", sans-serif;
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -1px;
    }

    .logo span {
		color: var(--orange);
    }
	

    .nav-links {
		display: flex;
		align-items: center;
		gap: 34px;
		list-style: none;
		font-size: 14px;
		font-weight: 600;
    }

    .nav-links a {
		transition: opacity .2s ease;
    }

    .nav-links a:hover {
		opacity: .6;
    }

    .nav-button {
		background: var(--upyellow);
		color: var(--upred);
		padding: 13px 20px;
		border-radius: 100px;
    }
	
	.nav-button:hover {
		background: var(--upred);
		color: var(--upyellow);
	}

    .menu-button {
		display: none;
		border: 0;
		background: transparent;
		color: inherit;
		font-size: 28px;
		cursor: pointer;
    }