header {
    position: relative;
    @media(max-width: 768px){
        margin-bottom: 60px;
    }
    
    & a {
        display: block;
        color: #FDFDFD;
        font-size: 13.33px;
        font-family: Roboto, sans-serif;
        text-transform: uppercase;
        text-decoration: none;
    }

    & .navbar {
        z-index: 2;
        background: black;
        padding-inline: 12px;
    
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media(max-width: 768px){
            justify-content: center;
        }

        & button {
            position: absolute;
            left: 12px;
            border: 0;
            padding: 0;
            background: 0;
            @media(min-width: 768px){
                display: none;
            }

            &#close {
                top: 12px;
            }
        }

        & nav {
            z-index: 1;
            display: flex;
            gap: 165px;
            transition: left 1s ease;

            & a {
                padding-block: 20px;
                &:hover { color: #7F7F7F; }

                /* Hide home link above md */
                &:first-of-type {
                    @media(min-width: 768px){
                        display: none;
                    }
                }
                &:last-of-type {
                    @media(min-width: 768px){
                        display: none;
                    }
                }
            }

            @media(max-width: 1200px){ gap: 80px; }
            @media(max-width: 992px){ gap: 48px; }
            
            /* Make nav offcanvas */
            @media(max-width: 768px){
                z-index: 1;
                position: absolute;
                top: 0;
                left: -330px;
                
                background-color: #EDEDED;
                flex-direction: column;
                gap: 12px;        
                width: 100%;
                max-width: 330px;
                padding-block: 28px;
                padding-inline: 80px;

                & a {
                    color: #232323;
                    font-size: 22px;
                }
            }
        }

        & .cta {
            display: flex;
            gap: 12px;

            & a {
                padding-block: 4.4px;
                padding-inline: 22.2px;
                min-width: 102px;
                min-height: 24px;
                text-align: center;
            }

            .try-free {
                background-color: #0000F5;
                &:hover { background-color: #00007B; }
                
                @media(max-width: 768px) {
                    position: absolute;
                    width: 100%;
                    top: 100%;
                    left: 0;
                    padding-block: 20px !important;
                }
            }

            .login {
                background-color: #808080;
                &:hover { background-color: #404040; }                
                @media(max-width: 768px) { display: none; }
            }
        }
    }
    
    & #products-menu {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        /* top: 100%; */
    
        width: 100%;
        background: #808080;
        
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 120px;
    
        transition: top 1s ease;
    
        & a {
            padding-block: 20px;
            &:hover {
                color: #bfbfbf;
            }
        }
        
        @media(max-width: 1200px){ gap: 64px; }
        @media(max-width: 992px){ gap: 48px; }
        @media(max-width: 768px) { display: none; }
    }
}