.ourteamherobannertitle {
    text-align: center;
}

.ourteam-herobanner {
    background-image: url(../images/ourteam-herobanner.jpg);


}

.ourteamintro-img {
    background-image: url(../images/about-ourteam.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1.3;
}

.ourteam-section1 {
    display: flex;
    gap: var(--row-img-paragraph);
    background-color: var(--medium-warm-gray);
}

.ourteam-intro {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ourteam-title {
    width: 60%;
}

.ourteam-intro {
    gap: var(--list-title-paragraph);
}

.ourteam-text {
    width: 90%;
}

.smallinfo {
    display: flex;
}

.craftsmanship {
    display: flex;
    gap: 15px;
}

.designbuild {
    display: flex;
    gap: 15px;

}

.number {
    font-family: var(--paragraph);
    color: var(--light-cream);
    font-size: 96px;
    font-weight: bold;
}

.number-title {
    margin-top: 50px;
}


.section2 {
    padding: var(--section-padding-mobile);
    text-align: center;
}

.meetteam-text {
    width: 60%;
    margin: auto;
}

.meetteam-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--list-title-paragraph);
}

.ourteam {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--row-list-img-three);
}



.section3 {
    background-color: var(--medium-warm-gray);
    padding: var(--section-padding-mobile);

}

.section3-logo {
    width: 10%;
    margin: auto;
}

/* 你这个影响到那个btn里面的p了 */
/* .section3-info p {
    width: 40%;
    margin: auto;
} */

.section3-info {
    display: flex;
    flex-direction: column;
    gap: var(--section-padding-mobile);
}


.section3-card {
    background-color: var(--warm-light-gray);
    aspect-ratio: 1 / 0.4;
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow);
    border-radius: var(--large-img);
    padding: var(--section-padding);
}

/* .get-btn p {
    color: var(--light-cream);

} */

.section3-btn {
    margin: auto;
}

/* .get-btn {
    background-color: var(--deep-cocoa-brown);
    padding: 20px 60px;
    border-radius: 25px;
} */

.section4 {
    display: flex;
    gap: var(--row-img-paragraph)
}

.team-benefits {
    background-image: url(../images/team\ benefits.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1;
}

.team-title {
    margin-left: 20px;
}

.team-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--list-title-paragraph);
}

.team-text div {
    display: flex;
    padding: 20px;
    gap: var(--list-title-paragraph);
    align-items: center;
}


.aboutintro-smalltitle-mobile {
    display: none;
}

.benefits-smalltitle-mobile {
    display: none;
}


@media screen and (max-width: 1210px) {
    .smallinfo {
        flex-direction: column;
        display: flex;
        gap: var(--list-title-paragraph);
    }


}

@media screen and (max-width: 1130px) {
    .smallinfo {
        flex-direction: column;
        display: flex;
    }

    .number {
        font-family: var(--paragraph);
        color: var(--light-cream);
        font-size: 86px;
        font-weight: bold;
    }



}


@media screen and (max-width: 1000px) {
    .team-member {
        flex-wrap: wrap;
    }

    .member-intro {
        width: calc(35% - 20.5px);
    }

    .member-img img {
        width: 100%;
    }

    .number {
        font-family: var(--paragraph);
        color: var(--light-cream);
        font-size: 76px;
        font-weight: bold;
    }

    .number-title {
        margin-top: 45px;
    }

    .ourteam-intro {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--clay-taupe);
        padding: 30px 30px 30px 0;
    }

    .ourteam-section1 {
        display: flex;
        gap: var(--row-img-paragraph-smaller);
        background-color: var(--medium-warm-gray);
    }

    .section4 {
        display: flex;
        gap: var(--row-img-paragraph-smaller)
    }
}

@media screen and (max-width: 800px) {
    .aboutintro-smalltitle-mobile {
        display: block;
    }


    .aboutintro-smalltitle {
        display: none;
    }

    .benefits-smalltitle-mobile {
        display: block;
    }

    .benefits-smalltitle {
        display: none;
    }

    .section3-logo {
        width: 30%;
        margin: auto;
    }

    .ourteam-intro {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--section-padding);
        text-align: center;
    }

    .smallinfo {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .craftsmanship {
        display: flex;
        gap: 0px;
    }

    .designbuild {
        display: flex;
        gap: 0px;

    }

    .number-title {
        margin-top: 20px;
        width: 50%;
        padding: 10px;
    }

    .number {
        font-family: var(--paragraph);
        color: var(--light-cream);
        font-size: 62px;
        font-weight: bold;
    }

    .ourteam {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--row-list-img-three-smaller);
    }

    .ourteam-title {
        width: 100%;
    }

    .ourteam-text {
        width: 100%;
    }

    .ourteam-section1 {
        flex-direction: column-reverse;
        gap: 0px;
    }

    .ourteamintro-img {
        background-image: url(../images/about-ourteam.jpg);
        width: 100%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1 / 0.8;
    }


    .section4 {
        flex-direction: column-reverse;
        gap: 0px;
    }

    .team-title {
        margin-left: 0px;
    }

    .team-text div {
        flex-direction: column;
        text-align: center;
    }

    .team-benefits {
        background-image: url(../images/team\ benefits.jpg);
        width: 100%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1 / 1;
    }


    .team-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--list-title-paragraph);
        text-align: center;
        padding: var(--section-padding-mobile);
    }


}


@media screen and (max-width: 700px) {
    .team-member {
        flex-wrap: column;
    }

    .team-member>div {
        width: 50%;
        margin: auto;
        margin-bottom: -61px;
    }
}

@media screen and (max-width: 520px) {
    .smallinfo {
        display: flex;
        flex-direction: column;
    }
}