@font-face {
    font-family: "styled-font";
    src: url(/static/fonts/belinda_w00_regular_Regular.ttf) format("truetype");
}

:root {
    --accent-color: #f89320;
    --styling-color: #13248a;
    --background-color: white;
    --dark-gray: #2F2E2E;
    --foreground-color: whitesmoke;

}
.body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--background-color);
    color: var(--styling-color);
}

.col p {
    margin:0 auto;
    width: 90%;
}

#under_hero {
    max-width: 300px;
    padding: 0.875rem;
}

.grid-section {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto

}

.body div{
    margin: 1rem 0;
}

.body-content {
    width:60%;
    
}


.body-content h2 {
    padding: 1.5rem;
}

.body-content h3 {
    padding: 1.5rem;
    text-align: left;
}


.body-content .row {
    display: flex;
    justify-content: center;
    

}

.hero {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    background-image: url(/static/images/about_us_hero_img.webp);
    background-size: cover;

}

.quote {
    display: flex;
    border-left: solid var(--styling-color);
    padding: 1rem;
}

.quote p {
    font-weight: bold;


}

.flex-center {
    width: 90%;
    display: flex;
    align-items: center;
}

.flex-center img {

}