@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: #D4CFB5;
    --dark-gray: #2F2E2E;
    --foreground-color: #D9D3BF;
    --dark-backgruond: #312610;

    --fs-xl: 3rem;
    --fs-600: 1.50rem;
    --fs-500: 1.25rem;
    --fs-400: 1rem;
 
} 

@media (max-width: 85em) {
    :root {
        --fs-xl: 2rem;
        --fs-600: 1.25rem;
        --fs-500: 0.9rem;
        --fs-400: 0.875rem;
    }
}

@media (max-width: 60em) {
    :root {
        --fs-xl: 2.5rem;
        --fs-600: 1rem;
        --fs-500: 0.8rem;
        --fs-400: 0.5rem;
    }
}

.grid-section img {
    width: clamp(2rem, 10vw, 4rem);
    padding-bottom: 2rem;
}

.grid-section p {
    width: 60%;
    padding: 1rem 0;
    font-weight: bold;

}

.grid-sec {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #004d26;   /* Inner vertical */
  border-bottom: 1px solid #004d26;  /* Inner horizontal */
}

/* Remove right border from rightmost items */
.grid-sec:nth-child(2),
.grid-sec:nth-child(4) {
  border-right: none;
}

/* Remove bottom border from bottom items */
.grid-sec:nth-child(3),
.grid-sec:nth-child(4) {
  border-bottom: none;
}


.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;
    background-position: center center;
    background-repeat: no-repeat;
}

.card {
    width: 60%;
    flex-direction: column;
    color: var(--styling-color);
    padding: 1rem;
    margin: -5rem auto 1rem auto;

}


.card img {
    width: 5rem;
    height: 100%;
    object-fit: cover;
    padding: 1rem 0;
}   

.card h1 {
    margin: 0.5rem 0;
}

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

.our-story {
    width: 60%;
    margin: 0 auto;
    font-weight: bold;

}

@media (max-width: 60em) {
    .our-story{
        width: 90%;
    }

    .grid-section p {
    width: 100%;
    font-size: var(--fs-400);

    }

    .card {
    width: 90%;

}
}
    

.our-story p {
    padding: 1rem 0;
    font-weight: 600;
    font: var(--fs-500);
}