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


.ourfurniture-herobannertitle {
    text-align: center;
}


.ourfurnitureintro-img {
    background-image: url(../images/top-pick.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1.1 / 1.2;
}

.ourfurniture-title-text {
    gap: var(--list-title-paragraph);
}

.ourfurniture-intro {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    gap: var(--row-img-paragraph-smaller);

}

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

.section2-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

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

.personal-intro {
    width: calc(22.5% - 30.75px);
}


.section2-title h6 {
    color: var(--deep-cocoa-brown);
}

.frame {
    width: calc(30.2% - 40.67px);
}

.lroom {
    background-image: url(../images/lroom-p.jpg);
}

.bedroom {
    background-image: url(../images/bedroom.jpg);
}

.kitchen {
    background-image: url(../images/kitchen.jpg);
}

.c-text h2 {
    color: var(--light-cream);
}

.section2-info {
    gap: var(--row-list-img-three);
    padding: var(--section-padding);
    display: flex;
    flex-direction: column;

}

.ourfurniture-section3 {
    background-color: var(--warm-light-gray);
}

.section3-img {
    background-image: url(../images/build\ to\ last.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1.1 / 1.2;
}

.section3-info {
    display: flex;
}

.section3-title {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 76px 0 42px;
    gap: var(--list-title-paragraph);
}

/* .section3-title h2 {
    width: 90%;
}

.section3-title p {
    width: 90%;
} */

.section4-img {
    background-image: url(../images/ourdifference.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1.1 / 1.2;
}

.section4-info {
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    padding-left: var(--row-img-paragraph);
    gap: var(--list-title-paragraph);

}

.section4-title-text {
    gap: var(--list-title-paragraph);
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}



.ourfurniture-section4 {
    display: flex;
}

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

.section4-text p {
    width: 80%;
}

.ourfurniture-section5 {
    background-color: var(--warm-light-gray);
    padding: var(--section-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--list-title-paragraph);
}

.section5-title h1 {
    color: var(--deep-cocoa-brown);
    display: flex;
    justify-content: center;
}

.promotion-card {
    display: flex;
    background-color: var(--light-cream);
    aspect-ratio: 1.2 / 0.6;
    width: 100%;
    margin: auto;
    box-shadow: var(--shadow);
    border-radius: var(--large-img);
}

.promotion-img1 {
    background-image: url(../images/20discount.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1.1 / 1.2;
    border-radius: var(--left-img);

}

.promotion-info-btn {
    width: 50%;
    padding: var(--section-padding);
    gap: var(--row-list-img-three);
    display: flex;
    flex-direction: column;
}

.promotion-img-overlap {
    width: 100%;
    aspect-ratio: 1.1 / 1.1;
    background: linear-gradient(to right, #fdf8f2, #fdf8f200);

}

.promotion-img2 {
    background-image: url(../images/30discount.jpg);
    width: 50%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1.1 / 1.2;
    border-radius: var(--left-img);
}

.promotion1 {
    width: 50%;
}

.promotion2 {
    width: 50%;
}

.promotion-discount {
    display: flex;
    gap: var(--row-img-paragraph);
    padding: var(--section-padding);
}

.difference-small-title-mobile {
    display: none;
}

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

    .promotion-info-btn {
        width: 50%;
        padding: 30px;
        gap: 50px;
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 1150px) {
    .promotion-info-btn {
        width: 50%;
        padding: 30px;
        gap: 40px;
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 1080px) {
    .promotion-info-btn {
        width: 50%;
        padding: 20px;
        gap: 20px;
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 1000px) {
    .ourfurniture-section1 {
        display: flex;
        gap: var(--row-img-paragraph-smaller);
        background-color: var(--warm-light-gray);
    }

    .section4-info {
        display: flex;
        flex-direction: column;
        width: 50%;
        justify-content: center;
        padding-left: var(--row-img-paragraph-smaller);
        gap: var(--list-title-paragraph);

    }
}

@media screen and (max-width: 940px) {
    .promotion-info-btn {
        width: 50%;
        padding: var(--section-padding);
        gap: 60%;
        display: flex;
        flex-direction: column;
    }

    .promotion-discount {
        display: flex;
        flex-direction: column;
        gap: var(--row-img-paragraph-smaller);
        padding: 0 70px 0 70px;
    }

    .promotion1 {
        width: 100%;
    }

    .promotion2 {
        width: 100%;
    }

    .promotion-img1 {
        background-image: url(../images/20discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);
    }

    .promotion-img2 {
        background-image: url(../images/30discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);

    }

    .section4-info {
        display: flex;
        flex-direction: column;
        width: 50%;
        justify-content: center;
        padding: var(--row-img-paragraph-smaller);
        gap: var(--list-title-paragraph);

    }
}

@media screen and (max-width: 800px) {
    .ourfurniture-intro {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 50px;
        gap: var(--row-img-paragraph-smaller);
        text-align: center;
    }

    .difference-small-title-mobile {
        display: block;
    }

    .difference-small-title {
        display: none;
    }

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

    .ourfurniture-section1 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        background-color: var(--warm-light-gray);
    }

    .ourfurniture-btn {
        margin: auto;
    }

    .ourfurnitureintro-img {
        background-image: url(../images/top-pick.jpg);
        width: 100%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.5 / 1.2;
    }

    .categories {
        gap: var(--row-list-img-three-smaller);
        top: 0;
        padding: 0 0;
    }

    .categories div {
        gap: var(--row-list-img-three-smaller);
    }

    .three-cat {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        width: 50%;
        text-align: center;
    }

    .three-cat div {
        width: 100%;
    }

    .section2-info {
        gap: var(--row-list-img-three-smaller);
        padding: var(--section-padding);
        display: flex;
        flex-direction: column;

    }


    .f-img {
        display: flex;
        flex-direction: column;
        gap: var(--row-list-img-three-smaller);
        align-items: center;
        margin: auto;
        width: 100%;
    }


    .living-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--row-list-img-three-smaller);
        padding: var(--section-padding);
    }

    .section3-info {
        display: flex;
        flex-direction: column;
    }

    .section3-img {
        background-image: url(../images/build\ to\ last.jpg);
        width: 100%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.9 / 1.7;
    }

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

    .ourfurniture-section4 {
        display: flex;
        flex-direction: column-reverse;
    }

    .section4-img {
        background-image: url(../images/ourdifference.jpg);
        width: 100%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.9 / 2;
    }

    .section4-info {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 100%;
        justify-content: center;
        padding-left: 0px;
        gap: var(--list-title-paragraph);
        padding: var(--section-padding);

    }

    .section4-text p {
        width: 80%;
        margin: auto;
    }

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

    .section4-title-text {
        gap: var(--list-title-paragraph);
        margin-left: 0px;
        display: flex;
        flex-direction: column;
    }

}

@media screen and (max-width: 710px) {
    .promotion-info-btn {
        width: 50%;
        padding: var(--section-padding);
        gap: 50%;
        display: flex;
        flex-direction: column;
    }

    .promotion-discount {
        display: flex;
        flex-direction: column;
        gap: var(--row-img-paragraph-smaller);
        padding: 0 70px 0 70px;
    }

    .promotion1 {
        width: 100%;
    }

    .promotion2 {
        width: 100%;
    }

    .promotion-img1 {
        background-image: url(../images/20discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);
    }

    .promotion-img2 {
        background-image: url(../images/30discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);

    }
}


@media screen and (max-width: 690px) {
    .promotion-info-btn {
        width: 50%;
        padding: 10%;
        gap: 30%;
        display: flex;
        flex-direction: column;
    }

    .promotion-discount {
        display: flex;
        flex-direction: column;
        gap: var(--row-img-paragraph-smaller);
        padding: 0 70px 0 70px;
    }

    .promotion1 {
        width: 100%;
    }

    .promotion2 {
        width: 100%;
    }

    .promotion-img1 {
        background-image: url(../images/20discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);
    }

    .promotion-img2 {
        background-image: url(../images/30discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);

    }
}


@media screen and (max-width: 600px) {
    .promotion-info-btn {
        width: 50%;
        padding: 5%;
        gap: 30%;
        display: flex;
        flex-direction: column;
    }

    .promotion-discount {
        display: flex;
        flex-direction: column;
        gap: var(--row-img-paragraph-smaller);
        padding: 0 70px 0 70px;
    }

    .promotion1 {
        width: 100%;
    }

    .promotion2 {
        width: 100%;
    }

    .promotion-img1 {
        background-image: url(../images/20discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);
    }

    .promotion-img2 {
        background-image: url(../images/30discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);

    }

    .promotion-card {
        display: flex;
        background-color: var(--light-cream);
        aspect-ratio: 1.2 / 0.8;
        width: 100%;
        margin: auto;
        box-shadow: var(--shadow);
        border-radius: var(--large-img);
    }

    .promotion-img-overlap {
        width: 100%;
        aspect-ratio: 1.1 / 1.464;
        background: linear-gradient(to right, #fdf8f2, #fdf8f200);

    }
}


@media screen and (max-width: 500px) {
    .promotion-info-btn {
        width: 50%;
        padding: 5%;
        gap: 40%;
        display: flex;
        flex-direction: column;
    }

    .promotion-discount {
        display: flex;
        flex-direction: column;
        gap: var(--row-img-paragraph-smaller);
        padding: 0 70px 0 70px;
    }

    .promotion1 {
        width: 100%;
    }

    .promotion2 {
        width: 100%;
    }

    .promotion-img1 {
        background-image: url(../images/20discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);
    }

    .promotion-img2 {
        background-image: url(../images/30discount.jpg);
        width: 50%;
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.1 / 1.2;
        border-radius: var(--left-img);

    }

    .promotion-card {
        display: flex;
        background-color: var(--light-cream);
        aspect-ratio: 1.2 / 1;
        width: 100%;
        margin: auto;
        box-shadow: var(--shadow);
        border-radius: var(--large-img);
    }

    .promotion-img-overlap {
        width: 100%;
        aspect-ratio: 1.1 / 1.833;
        background: linear-gradient(to right, #fdf8f2, #fdf8f200);

    }
}

@media screen and (max-width: 450px) {
    .promotion-info-btn {
        width: 50%;
        padding: 5%;
        gap: 30%;
        display: flex;
        flex-direction: column;
    }

}


@media screen and (max-width: 400px) {
    .promotion-info-btn {
        width: 50%;
        padding: 5%;
        gap: 10%;
        display: flex;
        flex-direction: column;
    }


}