.main-header {
    position: relative;
    background-image: url("../images/interviewer-room.png");
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    color: white;
    margin: 0 0 6em 0;

    & > .mobile-menu {
        display: none;
    }

    & > .main-header-inner {
        background-color: #0B1223BB;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        & > .main-header-top {
            flex: 0 0 auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: stretch;
            padding: 2em;
        }

        & > .main-header-tag-line {
            padding: 4.5em 8em 7em 8em;

            & > .tag-line {
                font-family: "EB Garamond", serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;
                font-size: 3em;

                & > .heavier {
                    font-weight: 700;
                }
            }

            & > .main-header-sub-tag-line {
                font-family: "Myriad Pro", sans-serif;
                font-size: 1.25em;
                margin: 2em 0;
            }
        }

        & > .main-header-bottom-shape {
            height: 3em;
            margin: 0 0 -3px 0;
        }
    }
}

.main-logo {
    width: 10em;
    flex: 0 0 auto;
}

.main-nav {
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    & > a {
        padding: 0.25em 1em;
    }
}

@media screen and (max-width: 768px) {
    & .main-header {
        margin: 0 0 2em 0;

        & > .mobile-menu {
            position: absolute;
            top: 0;
            right: 0;
            display: inline;
            z-index: 1;

            & > .hamburger-icon {
                padding: 0.25em;
                margin: 0.5em;
                cursor: pointer;

                & > svg {
                    width: 2em;
                    height: 2em;
                }
            }
        }

        & > .main-header-inner {
            & > .main-header-top {
                flex-direction: column;

                & > .main-nav {
                    flex-direction: column;
                    gap: 1em;
                    margin: 0;
                    height: 0;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.5s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out;

                    &.open {
                        margin: 1em 0 0 0;
                        height: 7.0625em;
                        opacity: 1;
                        pointer-events: unset;
                        transition: opacity 1s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out;
                    }
                }

                & > .social-link {
                    display: none;
                }
            }

            & > .main-header-tag-line {
                padding: 0 2em 2em 2em;
                text-align: center;

                & > .tag-line {
                    font-size: 1.5em;
                }
            }
        }
    }
}