/* global */
hr {
    width: 100%;
    border: none;
    height: 2px;
    background: linear-gradient(to right, rgba(50, 50, 50, 0), rgb(50, 50, 50), rgba(50, 50, 50, 0));
}

.nonTopParagraph {
    margin-top: 1.1em;
}

/*Hero section */
#aboutUsHeroSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

#heroSectionTopRow {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

#heroTextLeft {
    box-sizing: border-box;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 58%;
}

#heroTextLeft h1 {
    font-size: 3em;
    font-family: Satoshi;
    font-weight: bold;
}

#heroTextRight {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 40.5%;
    font-family: Inter;
    padding-bottom: .9em;
}

#heroTextRight p {
    width: 60%;
    font-size: 1.1em;
}

#heroSectionBottomRow {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 3em;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.heroContentLeft {
    width: 58%;
}

.heroContentLeft img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* or contain, depending on how you want them cropped */
    border-radius: 8px;
}

.heroContentRight {
    position: relative;
    width: 40.5%;
}

#heroBackgroundCircleGradient {

    position: absolute;
    /* This ensures it ignores flex layout */
    top: -5.5%;
    left: -20.5%;
    width: 125%;
    /* Adjust size */
    height: 115%;
    background: linear-gradient(to right, peachpuff, rgb(135, 106, 241));
    opacity: 0.6;
    border-radius: 40%;
    filter: blur(30px);
    /* Softens the edges */
    /*transform: translate(100%, -50%);*/
    /* Centers it properly */
    z-index: -1;
    /* Places it behind the hero images */
    pointer-events: none;
    /* Prevents accidental interactions */
}

.heroContentRight img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* or contain, depending on how you want them cropped */
    border-radius: 8px;
}

/*about us section*/

#aboutUsSection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 8%;
    padding-right: 8%;
    width: 100%;
    margin-top: 40px;
}

#aboutUsTopRowLeft h1,
#aboutUsMiddleRowLeft h1,
#aboutUsBottomRowLeft h1 {
    font-size: 2.5em;
    font-family: Satoshi;
    font-weight: bold;
}

#aboutUsTopRowRight p,
#aboutUsMiddleRowRight p,
#aboutUsBottomRowRight p {
    font-size: 1.1em;
    font-family: Inter;
}

#aboutUsTopRow,
#aboutUsMiddleRow,
#aboutUsBottomRow {
    display: flex;
    flex-direction: row;
    padding-top: 50px;
    padding-bottom: 50px;
    justify-content: space-between;
}

#aboutUsTopRowLeft {
    width: 35%;
}

#aboutUsTopRowRight {
    width: 60%;
}

/*
#aboutUsMiddleRow {
    display:flex;
    flex-direction:row;
    padding-top:40px;
    padding-bottom:40px;
}
*/
#aboutUsMiddleRowLeft {
    width: 35%;
}

#aboutUsMiddleRowRight {
    width: 60%;
}

/*
#aboutUsBottomRow {
    display:flex;
    flex-direction:row;
    box-sizing: border-box;
    padding-top:40px;
    padding-bottom:40px;
}
*/
#aboutUsBottomRowLeft {
    width: 35%;
}

#aboutUsBottomRowRight {
    width: 60%;
}

/* cta section */
#contactUsButton {
    background: white;
    color: black;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    margin-left: 16px;
}

/* MOBILE FORMATTING */

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

    /*Hero section */
    #aboutUsHeroSection {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        box-sizing: border-box;
        padding-left: 40px;
        padding-right: 40px;
    }

    #heroSectionTopRow {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    #heroTextLeft {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    #heroTextLeft h1 {
        font-size: 2em;
        font-family: Satoshi;
        font-weight: bold;
    }

    #heroTextRight {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        font-family: Inter;
        padding-bottom: .9em;
        text-align: center;
        margin-top: 40px;
    }

    #heroTextRight p {
        font-size: 1.1em;
    }

    #heroSectionBottomRow {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 3em;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    .heroContentLeft {
        width: 100%;
    }

    .heroContentLeft img {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* or contain, depending on how you want them cropped */
        border-radius: 8px;
    }

    .heroContentRight {
        position: relative;
        width: 40.5%;
        display: none;
    }

    #heroBackgroundCircleGradient {

        position: absolute;
        /* This ensures it ignores flex layout */
        top: -5.5%;
        left: -20.5%;
        width: 125%;
        /* Adjust size */
        height: 115%;
        background: linear-gradient(to right, peachpuff, rgb(135, 106, 241));
        opacity: 0.6;
        border-radius: 40%;
        filter: blur(30px);
        /* Softens the edges */
        /*transform: translate(100%, -50%);*/
        /* Centers it properly */
        z-index: -1;
        /* Places it behind the hero images */
        pointer-events: none;
        /* Prevents accidental interactions */
    }

    .heroContentRight img {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* or contain, depending on how you want them cropped */
        border-radius: 8px;
    }
}

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

    /*Hero section */
    #aboutUsHeroSection {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        box-sizing: border-box;
        padding-left: 0px;
        padding-right: 0px;
    }

    .heroContentLeft img {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* or contain, depending on how you want them cropped */
        border-radius: 8px;
        aspect-ratio: 3/4;
    }

    #heroTextLeft{
        padding-left:20px;
        padding-right:20px;
    }

    #heroTextRight{
        padding-left:20px;
        padding-right:20px;
    }

    #heroTextRight p{
        width:100%;
    }

    /*about us section*/

    #aboutUsSection {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        margin-top: 40px;
    }

    #aboutUsTopRowLeft h1,
    #aboutUsMiddleRowLeft h1,
    #aboutUsBottomRowLeft h1 {
        font-size: 2.5em;
        font-family: Satoshi;
        font-weight: bold;
        margin-bottom:30px;
        margin-top:20px;
    }

    #aboutUsTopRowRight p,
    #aboutUsMiddleRowRight p,
    #aboutUsBottomRowRight p {
        font-size: 1.1em;
        font-family: Inter;
    }

    #aboutUsTopRow,
    #aboutUsMiddleRow,
    #aboutUsBottomRow {
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        padding-bottom: 30px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        padding-left:16px;
        padding-right:16px;
        margin-top:30px;
    }

    hr{
        display:none;
    }


    #aboutUsTopRowLeft {
        width: 100%;
        text-align:center;
    }

    #aboutUsTopRowRight {
        width: 100%;
        text-align:center;
    }

    /*
#aboutUsMiddleRow {
    display:flex;
    flex-direction:row;
    padding-top:40px;
    padding-bottom:40px;
}
*/
    #aboutUsMiddleRowLeft {
        width: 100%;
        text-align:center;
    }

    #aboutUsMiddleRowRight {
        width: 100%;
        text-align:center;
    }

    /*
#aboutUsBottomRow {
    display:flex;
    flex-direction:row;
    box-sizing: border-box;
    padding-top:40px;
    padding-bottom:40px;
}
*/
    #aboutUsBottomRowLeft {
        width: 100%;
        text-align:center;
    }

    #aboutUsBottomRowRight {
        width: 100%;
        text-align:center;
    }

    /* cta section */
    #contactUsButton {
        background: white;
        color: black;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        font-weight: bold;
        margin-left: 16px;
    }
}