:root{
    --color-givia-main: #1E78C2;
    --color-givia-second: #3AB5E6;
    --color-givia-header: #C2681E;
    --color-givia-header-second: #E5C6B4;
    --color-background: #F6F5FD;
}

.about-us-container{
    /* min-height: calc(100vh - 60px - 160px - 80px - 60px); */
    height: fit-content;
    margin-top: 60px;

    display: grid;
    color: var(--color-givia-main);
    grid-template-columns: 70% 30%;
    grid-template-rows: min-content;
    grid-template-areas: 
    "about-givia our-divisions-button"
    "about-more-detail our-divisions-button"
    "contact-us-statement contact-us-statement";
    row-gap: 40px;
}


.height-fit-content{
    height: fit-content;
}

.about-us-container>div>p:nth-child(1){
    font-size: 32px;
    font-style: normal;
    font-weight: 700; 
    margin-bottom: 20px;
}

.about-us-container>div>p:nth-child(2){
    font-size: 24px;
    font-style: normal;
    font-weight: 400; 
}



.about-givia{
    grid-area: about-givia;
    margin-left: 20%;
}


.about-more-detail{
    grid-area: about-more-detail;
    margin-left: 20%;
}



.our-divisions-button{
    grid-area: our-divisions-button;
    place-self: center;
    width: 80%;
    max-width: 320px;
    height: 60%;
    max-height: 270px;
    padding: 10px;
    border-radius: 20px;
    background: var(--color-givia-main, #1E78C2);
    text-decoration: none;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.our-divisions-button>p:nth-child(1){
    font-size: 36px;
    font-style: normal;
    font-weight: 700; 
    color: var(--color-background);
}

.our-divisions-button>p:nth-child(2){
    font-size: 24px;
    font-style: normal;
    font-weight: 400; 
    color: var(--color-background);
}

.our-divisions-button>img{
    margin-top: 20px;
    height: 120px;
}

.contact-us-statement{
    grid-area: contact-us-statement;

    color: var(--color-givia-main);
    text-align: center;

    font-size: 20px;
    font-style: normal;
    font-weight: 400; 

    margin-bottom: 25px;
    margin-inline: 25px;
}

@media(max-width: 40em){
    .about-us-container{
        margin: 30px;
        grid-template-columns: 95%;
        grid-template-rows: auto;
        grid-template-areas: 
        "about-givia" 
        "about-more-detail"
        "our-divisions-button"
        "contact-us-statement";
    row-gap: 40px;
    }

    .about-givia{
        margin: 0;
    }

    .about-more-detail{
        margin:0;
    }

    .our-divisions-button{
        height: auto;
    }
}