@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..400&display=swap');

:root{
    --primary-colour: #0091c9;
    --secondary-colour: #444444;
    --accent-colour-lightblue: #a7e6ff;
    --background-colour-light: #f5f7fa;
    --background-colour-darkblue: #162736;
    --background-colour-darkgrey: #444444;
    --icon-colour-light: #ebeff0;
    --icon-colour-dark: #94a4a5;
}

/* About Us page specific css styling */

/* Containers */
#about-us-main-content{
    background-color: var(--accent-colour-lightblue);
}

#team-section{
    background-color: var(--background-colour-light);
}

#contact-section{
    background-color: var(--background-colour-light);
}

.about-us-subsection{
    display: flex;
    flex-direction: row;
    width: 80%;
    justify-content: space-between;
    align-content: center;
    margin: 1vh auto 4vh auto;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .about-us-subsection{
        flex-direction: column;
        margin: auto;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .about-us-subsection{
        flex-direction: column;
        margin: auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .about-us-subsection{
        flex-direction: column;
        margin: auto;
    }
}

/* Text */
.about-us-text-wrapper{
    margin: 2vh auto auto auto;
}

.about-us-text-wrapper > h2{
    text-align: left;
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--background-colour-darkblue);
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .about-us-text-wrapper > h2{
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .about-us-text-wrapper > h2{
    }
}

.about-us-text{
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    max-width: 60vw;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .about-us-text{
        font-size: 1.1rem;
        flex-direction: column;
        margin: 2vh auto 2vh auto;
        max-width: 100vw;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .about-us-text{
        font-size: 1.1rem;
        flex-direction: column;
        margin: 2vh auto 2vh auto;
        max-width: 100vw;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .about-us-text{
        font-size: 1.1rem;
        flex-direction: column;
        margin: 2vh auto 2vh auto;
        max-width: 100vw;
    }
}

.about-us-contact{
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 750;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .about-us-contact{
        font-size: 1.1rem;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .about-us-contact{
        font-size: 1.1rem;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .about-us-contact{
        font-size: 1.1rem;
    }
}

.about-us-contact:hover{
    text-decoration: underline;
    color: var(--primary-colour);
}

#gabatech-overview-text{
    padding: 0;
}

/* Images */
.portrait-linkedin-icon{
    margin: 1vh 0 auto 0;
}

.subsection-image-wrap{
    margin: auto 5vw auto 0;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .subsection-image-wrap{
        margin: auto auto 5vh auto;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .subsection-image-wrap{
        margin: auto auto 5vh auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .subsection-image-wrap{
        margin: auto auto 5vh auto;
    }
}

.location-image{
    width: 30vw;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    .location-image{
        width: 100%
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    .location-image{
        width: 100%
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    .location-image{
        width: 100%
    }
}

#desktop-bc-interior-img-wrap{
    display: flex;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #desktop-bc-interior-img-wrap{
        display: none;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #desktop-bc-interior-img-wrap{
        display: none;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #desktop-bc-interior-img-wrap{
        display: none;
    }
}

#mobile-bc-interior-img-wrap{
    display: none;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #mobile-bc-interior-img-wrap{
        display: flex;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #mobile-bc-interior-img-wrap{
        display: flex;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #mobile-bc-interior-img-wrap{
        display: flex;
    }
}


#desktop-global-img-wrap{
    display: flex;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #desktop-global-img-wrap{
        display: none;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #desktop-global-img-wrap{
        display: none;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #desktop-global-img-wrap{
        display: none;
    }
}

#mobile-global-img-wrap{
    display: none;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #mobile-global-img-wrap{
        display: flex;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #mobile-global-img-wrap{
        display: flex;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #mobile-global-img-wrap{
        display: flex;
    }
}


#gabatech-logo-subsection-img-wrap{
    margin: auto;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #mobile-global-img-wrap{
        margin: 1vh auto 5vh auto;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #mobile-global-img-wrap{
        margin: 1vh auto 5vh auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #mobile-global-img-wrap{
        margin: 1vh auto 5vh auto;
    }
}


#gabatech-globe-image{
    height: 25vh;
}


#jonny-image{
    margin: auto 0 auto 5vw;
}
@media screen and (max-width: 600px) and (orientation:portrait)
{
    #jonny-image{
        margin: auto auto 5vh auto;
        display: flex;
        flex-direction: column;
    }
}
@media screen and (max-width: 992px) and (orientation:landscape)
{
    #jonny-image{
        margin: auto auto 5vh auto;
        display: flex;
        flex-direction: column;
    }
}
@media screen and (min-width: 600px) and (max-width: 992px) and (orientation:portrait)
{
    #jonny-image{
        margin: auto auto 5vh auto;
        display: flex;
        flex-direction: column;
    }
}