header { position: sticky; top: 0; background: #fff; z-index: 2; } .header-size { margin: 0 auto; max-width: 1400px; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 3rem); padding-top: 1.5rem; padding-bottom: 1rem; } .header-logo { display: flex; align-items: center; } .header-nav { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; } .header-size a { text-decoration: transparent; color: var(--misc-dark); transition: 300ms; } .nav-links { display: flex; gap: 2rem; margin-right: 0.5rem; } .nav-links a:hover, .nav-links a.active { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 3px; text-decoration-color: var(--primary); } .search-container { border: 1px solid var(--neutral-n75); border-radius: 4rem; width: 15rem; height: 2.5rem; display: flex; align-items: center; justify-content: space-between; padding-left: 0.75rem; padding-right: 0.75rem; } .site-search { display: flex; align-items: center; gap: 0.38rem; } .search-bar { border: none; outline: none; background-color: transparent; padding-left: 0.25rem; padding-top: 5px; } input::placeholder { font-size: 1rem; font-style: normal; line-height: 1.3rem; color: var(--misc-dark); } input:focus::placeholder { color: transparent; } .masthead-logo { display: flex; justify-content: center; align-items: center; } .masthead-logo img { width: 12.6rem; height: 3.6rem; flex-shrink: 0; } .header-button { background-image: var(--gradient-brand); border-radius: 8rem; box-sizing: border-box; color: var(--primary-p400); display: flex; height: 2.5rem; padding: 1px; width: 8.8rem; text-decoration: none; } .header-button svg path { transition: stroke 0.5s ease; } .header-button:hover { color: #fff; } .header-button:hover svg path { stroke: #fff; } .get-started { align-items: center; border-radius: 4rem; display: flex; justify-content: center; background: #fff; color: var(--primary-p400); transition: background 0.5s ease; width: 100%; gap: 5px; margin: 1px; padding: 0.5rem 0.4rem 0.5rem 0.75rem; line-height: 100%; } .header-button:hover span { background: var(--primary-p400); color: #fff; } .nav-mobile { display: none; } .bar { display: block; width: 25px; height: 3px; border-radius: 25px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: var(--misc-dark); } @media (max-device-width: 1080px), (width