/* link style-all.css file */

/* Header, nav bar */
/* header is styled in style-all.css file */

/* variables */
:root{
    /* 1vw ~= 19px */
    --hero-back-font-size: 17vw;
    --hero-front-font-size: 2vw;
    --h1-font-size: 4.2vw;
    --h2-head-font-size: 2vw;
    --wh-letter-spacing: 1px;
    --p-font-size: 1.1vw;
    --tb-padding-small: 1vw;
    --lr-padding-small: 3.6vw;
    --tb-padding-large: 2vw;
    --lr-padding-large: 6.6vw;
    --p-line-height: 1.6vw;
    --white-text-color: #F1F1F1;
}

/* hero logo section */
.hero-section{
    margin-top: 5.2rem;
    text-transform: uppercase;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: var(--hero-front-font-size);
}
.hero-section>p:nth-child(2){
    font-weight: 900;
}
.hero-section::before{
    content: 'ABOUT US';
    white-space: nowrap;
    color: var(--white-text-color);
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    font-size: var(--hero-back-font-size);
    transition: .3s all ease-in-out;
    overflow: hidden;
}
.hero-section:hover::before{
    transform: scale(.7);
}

/* main section */
.section{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 5rem 0px;
}
.container-content{
    width: 100%;
    padding: var(--tb-padding-small) var(--lr-padding-small);
}
.content-wh h1{
    font-size: var(--h1-font-size);
    font-weight: 900;
    color: #DFDFDF;
}
.content-wh p{
    font-size: var(--p-font-size);
    padding: var(--tb-padding-large) var(--lr-padding-large);
    line-height: var(--p-line-height);
    letter-spacing: var(--wh-letter-spacing);
    text-indent: 50px;
    text-align: justify;
}
.founders, .staff{
    width: 100%;
    display: flex;
    padding-top: 2.5rem;
}
.founders h2, .staff h2{
    font-size: var(--h2-head-font-size);
    text-transform: uppercase;
    font-weight: 900;
}
.founders p{
    font-size: var(--h2-head-font-size);
    font-weight: 500;
}
.founders{
    justify-content: center;
}
.founders>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
}
.founders>div>.founder-image{
    width: 50%;
}
.founders>div>.founder-image>img{
    width: 100%;
}
.staff{
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
}
.staff>div{
    width: 55%;
}
.staff>div>img{
    width: 100%;
}


/* media queries */
/* media queries for mobile */
@media screen and  (min-width: 320px) and (max-width: 768px) {
    :root{
        --hero-front-font-size: 3.5vw;
        --h1-font-size: 9vw;
        --h2-head-font-size: 4.2vw;
        --p-font-size: 3.6vw;   
        --lr-padding-small: 6vw;     
        --p-line-height: 4.5vw;    
    }
    /* hero logo section */
    .hero-section{
        margin-top: 5.2rem;
        height: 10vh;
    }
    /* main section */
    .section{
        padding: 3rem 0px;
    }
    .founders, .staff{
        padding-top: 2rem;
    }
    .founders{
        flex-direction: column;
        row-gap: 2rem;
    }
    .founders>div{
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 0.8rem;
    }
    .staff{
        row-gap: 0.8rem;
    }
    .staff>div{
        width: 70%;
    }
    
}
/* end media queries for mobile */