h2 {
    text-align: center;
}

/*--------------------------------------------------------------------*/
/*Top grid------------------------------------------------------------*/
/*--------------------------------------------------------------------*/

/*Separate grid into equal columns*/
.about-us-top {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2em 5em;
    row-gap: 20px;
}

/*Decorate the main header with a vertical bar to its left for emphasis*/
.about-us-top h2 {
    text-align: left;
    border-left: 4px solid var(--light-grey);
    padding-left: .4em;
}

/*Distinguish the subheader from the main header by applying a red vertical bar to its left*/
.about-us-top h3 {
    color: var(--dark-grey);
    border-left: 4px solid var(--dark-grey);
    /*Align the decorative line to the left of the subheader with the main header decorative vertical bar*/
    padding-left: .52em;
    /*Reduce clutter by providing whitespace between the top of the text description and the red vertical bar
        and subheader above*/
    margin-bottom: .5em;
}

/*Reduce the emphasis on the paragraph text relative to the headers and subheaders*/
.about-us-top p {
    font-size: 0.82em;
}

/*Give a fixed size to the image*/
.about-us-top img {
    height: 20em;
    width: 100%;
    /*Preserve image aspect ratio to prevent distortion*/
    object-fit: cover;
}

/*css for founding story*/
.about-us-top-item1 {
    margin-right: 2em;
}

/*css for vision*/
.about-us-top-item2 {
    margin-left: 2em;
}

/*---------------------------------------------------------------*/
/*Join Us--------------------------------------------------------*/
/*---------------------------------------------------------------*/

.Discord-Guilded {
    display: grid;
    padding: 2em 5em;
}

/*make the image less prominent by reducing opacity*/
.Discord-Guilded img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: auto;
    object-fit: cover;
    opacity: 0.7;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*---------------------------------------------------------------*/
/*Contact form---------------------------------------------------*/
/*---------------------------------------------------------------*/

/*styling the part where text is inserted as input*/
input[type=text],
select,
textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 7px;
    margin-bottom: 18px;
    resize: vertical;
}

/*Submit button of our contact form*/
input[type=submit] {
    background-color: var(--dark-grey);
    color: var(--white);
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: var(--light-grey);
}

/*contact form container*/
.contact-form {
    border-radius: 25px;
    width: 500px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
    margin-bottom: 50px;
}

/*---------------------------------------------------------------*/
/*'About Us' page: Desktop---------------------------------------*/
/*---------------------------------------------------------------*/

@media screen and (min-width: 1080px) {

    /*--------------------------------------------------------------------*/
    /*Sticky navigation bar on desktop------------------------------------*/
    /*--------------------------------------------------------------------*/

    /*Remove the page header to increase the main content viewport space when the navigation bar becomes sticky*/
    .nav-bar.sticky .company-name-JSON {
        display: none;
    }

}

/*---------------------------------------------------------------*/
/*'About Us' page: Mobile----------------------------------------*/
/*---------------------------------------------------------------*/

@media screen and (max-width: 700px) {

    .about-us-top {
        grid-template-columns: 1fr;
        padding: 1.5em;
        row-gap: 20px;
    }

    /*swap the position of about us item (vision) to the top of the image*/
    .about-us-top-item2 {
        margin-left: 0;
        grid-row: 3
    }

    .Discord-Guilded {
        padding: 2em 2em;
    }

    .contact-form {
       width: auto;
    }

}