header {
    justify-content: space-between;
}

.show-on-mobile {
    display: block;
}

.static-logo {
    /* Comment/uncomment if circular logo */
    /* transform: translateY(30px);
    height: 120px;
    background-color: white;
    border-radius: 100%;
    border: 5px solid white;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
}

.hero {
    background-image: var(--gradient-2);
    min-height: 40vh;
}

.hero-right {
    background-image:
        url('../media/hero-4.jpg');
}

.hero-text-container h1 {
    margin: 0;
    background: white;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.4rem, 12vw, 5rem);
    text-align: left;
}

@media (max-width: 1000px) {
    .hero {
        background-image: none;
        min-height: 30vh;
    }
    
    .hero-text-container h1 {
        text-align: center;
        background: var(--very-light-grey);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .hero-left {
        min-height: 30vh;
        background-image: var(--gradient-2);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);     
    }

    .hero-right {
        display: none;
    }

    .static-logo {
        /* height: 75%; */
        /* transform: translateY(16px);
        height: 90px;
        background-color: white;
        border-radius: 100%;
        border: 2px solid white;
        box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
    }
}