* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

section>img {
    width: 40%;
}

main {
    max-width: 94em;
    margin: 0 auto;
    position: relative;
    z-index: -1;
}

li a {
    padding-left: 1rem;
}

li a:hover {
    border-radius: 4em 0 0 4em;
    background-color: #F1F2F3;
}

.active {
    border-radius: 4em 0 0 4e,;
    background-color: #F1F2F3;
}

.container-sm {
    max-width: 100%;
    height: 16em;
}

.hero-page {
    position: relative;
    background-color: #F9FAFA;
    width: auto;
    height: 25em;
}

.hero-page-image {
    position: absolute;
    bottom: 0;
    right: 5%;
}

.over-flow-team {
    position: absolute;
    right: 0;
    bottom: 0;
}

.header-container {
    background-color: white;
}

.position-fixed {
    position: fixed;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.justify-content-between {
    justify-content: space-between;
}

.space-evenly {
    justify-content: space-evenly;
}

.align-content-center {
    align-content: center;
}

.background-text {
    top: 19%;
    left: 15.5%;

}

.sidebar {
    height: 100%;
    width: 8em;
    top: 9%;
    background-color: white;
}

.sidebar-spaces {
    padding-top: 1.5em;
}

.header-wrapper {
    padding: 0 1rem;
    max-width: 94em;
    margin: 0 auto;
}

.card {
    max-width: 33rem;
    width: 100%;
    top: 14%;
    left: 5%;
}

.card h1 {
    font-size: 2.5rem;
}

.card p {
    font-size: 1rem;
    padding: 1.5em 0;
}

.header-wrapper img {
    width: 8em;
}

.workhere-section>img {
    width: 48%;
}

.main-content {
    margin-top: 5.5%;
    margin-left: 1em;
    position: absolute;
    top: 9%;
    left: 10%;
    right: 0;
    display: flex;
    flex-direction: column;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.z-index-negative {
    z-index: -1;
}

.align-center {
    align-items: center;
}

.border-blue {
    border: 1px solid #155CA2;
}

.border-gray {
    border: 1px solid #D6D9DC;
}

.border-none {
    border: none;
}

.btn {
    padding: 0.4em 0.4em;
    border-radius: 0.3em;
}

.btn-primary {
    background-color: #155CA2;
    color: white;
}

.border-bottom {
    border-bottom: 0.1em solid #D6D9DC;
}

.radius-end-end {
    border-end-end-radius: 1em;
}

.border-right {
    border-right: 0.1em solid #D6D9DC;
}

.bg-none {
    background-color: none;
}

.bg-semi-dark {
    background-color: #3B4045;
}

.bg-orange {
    background-color: #E7700D;
}

.text-decoration-none {
    text-decoration: none;
}

.list-style-none {
    list-style-type: none;
}

.text-gray {
    color: #D6D9DC;
}

.text-dark {
    color: #0C0D0E;
}

.custom-padding {
    padding: 3.7rem;
}

.text-secondary {
    color: #0C0D0E;
}

.text-white {
    color: white;
}

.text-blue {
    color: #155CA2;
}

.text-bold {
    font-weight: bold;
}

.form-min-width{
    min-width: 12rem;
}

.header-button-min-width{
    min-width: 3.5rem !important;
}

.text-lighter {
    font-weight: lighter;
}

.text-sm {
    font-size: small;
}

.uppercase {
    text-transform: uppercase;
}

.height-full {
    height: 100%;
}

.width-full {
    width: 100%;
}

.radius {
    border-radius: 5px;
}

.radius-2 {
    border-radius: 1em;
}

.pr-1 {
    padding-right: 0.5em;
}

.pr-2 {
    padding-right: 0.5em;
}

.p-1 {
    padding: 0.5em;
}

.p-2 {
    padding: 1.5em;
}

.px-1 {
    padding: 0 0.5em;
}

.px-2 {
    padding: 0 1em;
}

.px-3 {
    padding: 0 1.2em;
}

.px-4 {
    padding: 0 1.5em;
}
.ml-1 {
    margin-left: 0.5rem;
}

.py-1 {
    padding: 0.5em 0;
}

.py-2 {
    padding: 1em 0;
}

.py-3 {
    padding: 1.2em 0;
}

.py-4 {
    padding: 1.5em 0;
}

.mx-1 {
    margin: 0 0.5em;
}

.mx-2 {
    margin: 0 1em;
}

.mx-3 {
    margin: 0 1.2em;
}

.mx-4 {
    margin: 0 1.5em;
}

.my-1 {
    margin: 0.5em 0;
}

.my-2 {
    margin: 1em 0;
}

.my-3 {
    margin: 1.2em 0;
}

.my-4 {
    margin: 1.5em 0;
}

.mb-4 {
    margin-bottom: 8rem;
}

.gap-1 {
    gap: 1em;
}

.gap-2 {
    gap: 1.5em;
}

.lg-flex-row {
    flex-direction: row;
}

.fourth-main-section{
    display: flex;
}


@media (min-width: 1024px){
    .fourth-main-section {
        flex-direction: row !important;
    }
    .background-text{
        top: 19%;
        left: 16% !important;
    }


}

@media (min-width: 481px) and (max-height: 1023px) {
    .fourth-main-section {
        flex-direction: column;
    }

    .main-content{
        margin-left: 5rem;
    }

    .background-text{
        top: 19%;
        left: 33%;
        img{
            width: 80%;
        }
    }
    .card {
        width: 68%;

        h1{
            font-size: 2rem;
        }
    }
}

@media (max-width: 480px){
    .main-content {
        max-width: 36em;
        width: 100%;
        padding: auto 0;
        left: 0;
    }
    .sidebar{
        display: none;
    }

    .fourth-main-section {
        flex-direction: column;
    }
    section>img {
        width: 90%;
    }

    .container-sm {
        max-width: 36em;
        height: 26em;
    }
    .sm-display-none {
        display: none;
    }

    .hero-page{
        height: 36rem;
    }

    .card {
        width: 85%;
    }

    .card h1 {
        font-size: 1.8rem;
    }
    .background-text{
        top: 17.5%;
        left: 26.5%;

        img{
            width:80%;
        }
    }

    .workhere-section>img{
        width: 100%;
    }

    img{
        width: 50%;
    }
}