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

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

}

@media (max-width: 90em) {
    .card {
    width: 90%;


}
}

.send-btn {
    width: 50%;
    height: 3rem;
    color: var(--styling-color);
    transition: all 400ms;
    margin: 2rem auto;
    background-color: var(--accent-color);
}



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

}

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


.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    width: 80%;
}

section .mb-3 {
    padding: 1rem 0 1rem 0;

}

.form-control {
    background-color: var(--foreground-color);
    border: solid var(--accent-color);

}