html {
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    color: #242218;
    overflow-x: hidden;
}

.bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-contain {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

h1 {
    font-weight: 700;
}

h2 {
    font-weight: 700;
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

h3 {
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 3rem;
}

h4 {
    margin-bottom: 3rem;
}

h5 {
    font-weight: 700;
    font-size: 1.5rem;
}

.font-brown {
    color: #B07252;
}

.font-green {
    color: #656B4C;
}

.font-white {
    color: #fff;
}

.font-orange {
    color: #FF9D00;
}

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

section {
    padding: 6rem 0;
}

.line {
    width: 60%;
    height: 1px;
    background-color: #000;
    margin: 2rem 0;
}

.line-center {
    margin-left: auto;
    margin-right: auto;
}

.line-40 {
    width: 40%;
    margin: 3rem auto;
}

.line-white {
    background-color: #fff;
}

.btn {
    background-color: #C48868;
    background: linear-gradient(168deg,#f39c6e 0%, #d88758 41.33%, #c77a4f 98.11%);
    color: #fff;
    padding: 1.4rem 4rem;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 16px;
    margin-top: 3rem;
    border: none;
}

.btn:hover {
    background-color: #9B6B52;
    color: #fff;
    border: none;
}

.btn i {
    margin-right: 10px;
    point-events: none;
}

.owl-prev,
.owl-next {
    fill: #C48868;
}

.owl-theme .owl-nav .owl-prev:hover,
.owl-theme .owl-nav .owl-next:hover {
    background: #656B4C;
}

.owl-theme .owl-nav [class*=owl-]:hover svg {
    fill: #fff;
}

.content-img {
    margin-bottom: 2rem;
}

.content-img-left {
    padding-right: 4rem;
}

.content-img-right {
    padding-left: 4rem;
}

header {
    background-color: #E0D7CF;
}

.hero {
    width: 100%;
    height: 600px;
    background-image: url("../images/hero.jpg");
}

.header-left {
    margin-bottom: 3rem;
    padding: 0 2rem;
}

/* sqft */
.sqft h2 {
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 0rem;
    position: relative;
    width: auto;
    display: inline-block;
}

.sqft h2 span {
    background-color: #ca6328;
    color: white;
    padding: 3px 7px 6px;
    border-radius: 5px;
    position: absolute;
    transform: rotate(10deg);
    display: inline-block;
    top: -32px;
    right: -75px;
    font-size: 22px;
    line-height: 32px;
}

.sqft h3 {
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 20px;
}

.sqft .highlight {
    color: #CD9270;
}

.sqft .line-40 {
    margin: 30px auto 40px;
}

.sqft h4 {
    margin-bottom: 0px;
}

.sqft .ratio {
    margin-top: 35px;
}

.sqft .showroom-gallery {
    margin-top: 50px;
}

.sqft .showroom-gallery p {
    font-size: 24px;
    font-weight: 600;
}

/* Showroom */
.showroom {
    background-color: #F2F2F2;
    background-color: #1d1d1d;
}

.showroom .showroom-gallery img {
    width: 100%;
}

.showroom-gallery img {
    padding: 5px;
}

.showroom h2 {
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    color: #dcdcdc;
}

.showroom h3 {
    color: #d1d1d1;
    font-weight: 400;
    font-size: 26px;
}

.showroom h3 .highlight {
    color: #b3917e;
    /*color: #afa8a0;*/
}

/* Testi */
/* Reviews Box */
.ReviewsBox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 50px 30px;
}

.ReviewsBox .headBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    align-items: flex-end;
}

.ReviewsBox .headBox .left {
    display: flex;
    width: 50%;
    flex-direction: column;
}

.ReviewsBox .headBox .left .title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 11px;
}

.ReviewsBox .headBox .left .title .icon svg {
    width: auto;
    height: 30px;
    margin-right: 10px;
}

.ReviewsBox.googleReviews .headBox .left .title .icon svg {
    height: 40px;
    margin-bottom: -10px;
}

.ReviewsBox .headBox .left .title .text {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
}

.ReviewsBox .headBox .left .count {
    display: flex;
    align-items: center;
    height: 20px;
}

.ReviewsBox .headBox .left .count .number {
    font-size: 24px;
    font-weight: 700;
    margin-right: 7px;
}

.ReviewsBox .headBox .left .count .stars {
    display: flex;
    font-size: 18px;
    line-height: 28px;
}

.ReviewsBox .headBox .left .count .stars i {
    color: rgb(255, 191, 0);
    display: inline-block;
    margin-right: 3px;
}

.ReviewsBox.googleReviews .headBox .left .count .stars i {
    color: rgb(234, 136, 20);
}

.ReviewsBox .headBox .right {
    width: 50%;
}

.ReviewsBox .headBox .right .images {
    margin-bottom: 3px;
}

.ReviewsBox .headBox .right .images img {
    margin-right: 0px;
}

.ReviewsBox .headBox .right .fb-box img {
    width: 37px !important;
    height: 37px;
    border: 2px solid #fff;
    border-radius: 37px;
    position: absolute;
}

.ReviewsBox .headBox .right .fb-box img {
    z-index: 10;
    right: 106px;
}

.ReviewsBox .headBox .right .fb-box img+img {
    z-index: 4;
    right: 79px;
}

.ReviewsBox .headBox .right .fb-box img+img+img {
    z-index: 3;
    right: 53px;
}

.ReviewsBox .headBox .right .fb-box img+img+img+img {
    z-index: 2;
    right: 26px;
}

.ReviewsBox .headBox .right .fb-box img+img+img+img+.rate-box {
    z-index: 1;
    height: 37px;
    width: 37px !important;
    border: 3px solid #dedede;
    border-radius: 37px;
    background: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
}

.ReviewsBox .headBox .right .fb-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
}

.ReviewsBox .headBox .right .recommend-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ReviewsBox .headBox .right .recommend-tag .img {
    display: flex;
}

.ReviewsBox .headBox .right .recommend-tag .img svg {
    width: 20px;
    height: auto;
    margin-right: 7px;
}

.ReviewsBox .headBox .right .recommend-tag .text {
    letter-spacing: -0.5px;
    color: rgb(156, 158, 161) !important;
    font-size: 18px;
}

.ReviewsBox .headBox .right .recommend-tag .text u {
    color: rgba(17, 17, 17, 0.5);
    text-decoration-color: #f36b7f;
}

@media(max-width:500px) {
    .ReviewsBox {
        padding: 25px 0px 30px;
    }

    .ReviewsBox .headBox {
        margin-bottom: 20px;
    }

    .ReviewsBox .headBox .left {
        width: 42%;
    }

    .ReviewsBox .headBox .left .title {
        margin-bottom: 6px;
    }

    .ReviewsBox.googleReviews .headBox .left .title {
        margin-bottom: 2px;
    }

    .ReviewsBox .headBox .left .title .icon svg {
        height: 20px;
        margin-right: 7px;
    }

    .ReviewsBox.googleReviews .headBox .left .title .icon svg {
        height: 26px;
    }

    .ReviewsBox .headBox .left .title .text {
        font-size: 19px;
        line-height: 16px;
        display: none;
    }

    .ReviewsBox .headBox .left .count .number {
        font-size: 22px;
        margin-right: 5px;
    }

    .ReviewsBox .headBox .left .count .stars {
        font-size: 15px;
        line-height: 24px;
    }

    .ReviewsBox .headBox .right {
        width: 58%;
    }

    .ReviewsBox .headBox .right .fb-box {
        transform: scale(0.7) translate(40px, 14px);
    }

    .ReviewsBox .headBox .right .images img {
        height: 20px;
    }

    .ReviewsBox .headBox .right .recommend-tag .img svg {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .ReviewsBox .headBox .right .recommend-tag .text {
        font-size: 11px;
        line-height: 17px;
        margin-top: 5px;
    }
}

.UserReviewBox {
    display: block;
    margin: 0px 0px 30px;
    padding: 20px 25px;
    width: 100%;
    background: rgb(243, 245, 250);
}

.UserReviewBox.google {
    background: white;
}

.UserReviewBox .card-top {
    display: flex;
    margin: 0px 0px 10px;
    flex-direction: row;
    justify-content: flex-start;
}

.UserReviewBox .card-top .img {
    display: flex;
    margin-right: 8px;
    width: 40px;
    height: 40px;
}

.UserReviewBox .card-top .img img {
    border-radius: 50%;
}

.ReviewsBox.googleReviews .UserReviewBox .card-top .img img {
    border-radius: 0%;
}

.UserReviewBox .card-top .recom-top {
    display: flex;
    margin-top: -5px;
    margin-bottom: -5px;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

.UserReviewBox .card-top .recom-top .recommend {
    font-family: inherit;
    margin: 5px 0px;
    color: rgb(101, 103, 107);
    font-size: 15px;
    line-height: 20px;
}

.UserReviewBox .card-top .recom-top .recommend .name {
    font-weight: 600;
    color: rgb(5, 5, 5);
}

.UserReviewBox .card-top .recom-top .recommend .recom-icon {
    display: inline-block;
    vertical-align: -2.9px;
    margin-right: 4px;
    margin-left: 6px;
}

.UserReviewBox .card-top .recom-top .recommend .fbpage {
    color: rgb(25, 119, 243);
}

.UserReviewBox .card-top .recom-top .comment-date {
    font-size: 13px;
    line-height: 16px;
}

.UserReviewBox .card-top .recom-top .comment-date .stars {
    margin-right: 3px;
}

.UserReviewBox .card-top .recom-top .comment-date .stars i {
    display: inline-block;
    margin-right: 0px;
    color: rgb(234, 136, 20);
}

.UserReviewBox .card-top .recom-top .comment-date .earth {
    filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
    margin-bottom: 3px;
    display: inline-grid;
}

.UserReviewBox .card-top .logo {
    display: flex;
    align-self: flex-start;
    justify-content: flex-end;
}

.UserReviewBox .card-top .logo svg {
    width: 40px;
    height: 40px;
}

.UserReviewBox.google .card-top .logo svg {
    background: rgb(237, 238, 237);
    border-radius: 50%;
    padding: 7px;
}

.UserReviewBox .message .text {
    color: rgb(5, 5, 5);
}

.UserReviewBox .message .text.add-peer {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}

@media (max-width: 500px) {
    .UserReviewBox {
        margin: 0px 0px 20px;
        padding: 15px 15px;
    }

    .UserReviewBox .card-top {
        margin: 0px 0px 8px;
    }

    .UserReviewBox .card-top .img {
        width: 35px;
        height: 35px;
    }

    .UserReviewBox .card-top .recom-top .recommend {
        font-size: 13px;
        line-height: 15px;
        margin: 5px 0px 0px;
    }

    .UserReviewBox.google .card-top .recom-top .recommend {
        font-size: 14px;
        margin: 5px 0px 2px;
    }

    .UserReviewBox .card-top .recom-top .recommend .name {
        display: block;
        margin-bottom: 2px;
    }

    .UserReviewBox .card-top .recom-top .recommend .recom-icon {
        width: 14px;
        height: 14px;
        margin-left: 0px;
    }

    .UserReviewBox .card-top .recom-top .comment-date {
        font-size: 12px;
        line-height: 12px;
        display: none;
    }

    .UserReviewBox.google .card-top .recom-top .comment-date {
        display: block;
    }

    .UserReviewBox .card-top .logo svg {
        width: 33px;
        height: 33px;
    }

    .UserReviewBox .message .text {
        color: rgb(5, 5, 5);
        font-size: 14px;
        line-height: 22px;
    }

    .UserReviewBox .message .text.add-yenk {
        -webkit-line-clamp: 10;
    }
}

a.loadMore {
    display: flex;
    color: white;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background: #c48868;
    border-radius: 50px;
    padding: 12px 25px;
    margin: 0px auto;
    align-items: center;
    align-content: center;
    text-decoration: none;
}

a.loadMore i {
    margin-right: 10px;
}

a.loadMore.facebook i {
    font-size: 24px;
}

a.loadMore.google i {
    font-size: 20px;
}

a.loadMore span {
    color: white;
}

a.loadMore.mobile {
    display: none;
}

@media(max-width:500px) {
    a.loadMore {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    a.loadMore.desktop {
        display: none;
    }

    a.loadMore.mobile {
        display: flex;
    }
}

.testi {
    padding: 0;
}

.testi-header {
    background-image: url("../images/testi-bg.jpg");
    background-position: top;
    padding: 6rem 0 4.5rem;
}

.satisfy h2,
.install h2 {
    font-size: 46px;
    margin-bottom: 2rem;
}

.customer {
    background-color: #BFB5AC;
}

#Spc {
    padding: 6rem 0 0;
}

.spc-compare {
    margin: 1.5rem 0;
}

.spc .card {
    text-align: center;
}

.spc .card-header {
    background-color: transparent;
    border: none;
    padding-bottom: 0;
}

.spc h4 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: #656b4c;
}

.spc .line,
.fpanel .line {
    width: 20%;
}

.spc-icon img {
    width: 100px;
}

.spc i {
    font-size: 30px;
}

i.bi.bi-x-circle-fill {
    color: #D52828;
}

i.bi.bi-check-circle-fill {
    color: #23D55A;
}

.card-title {
    font-weight: 700;
    font-size: 20px;
}

.spc .card-text {
    font-size: 16px;
}

.card-no {
    background-color: #efefef;
}

.card-yes {
    background-color: #E5FFE7;
}

.spc-row {
    margin: 4rem 0 6rem;
}

/* SPC */
.spc h2 {
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 1.2rem;
}

.spc h3 {
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 20px;
}

.spc .container .row:nth-child(1) {}

.spc p {
    font-size: 20px;
}

/* Spec */
.spec {
    background-color: #896F50;
    background-color: #f3e6df;
}

.spec h2 {
    font-size: 32px;
    margin-bottom: 3rem;
}

.spec-item {
    text-align: center;
    margin-top: 1rem;
}

.spec-icon {
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    padding-top: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.spec-icon img {
    width: 50px;
    height: auto;
}

.spec-icon-h img {
    width: 60px;
}

.spec-item p {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.2;
}

.spec h3 {
    margin: 3rem 0rem 0rem;
    font-size: 26px;
}

/* F panel*/
.fpanel p {
    font-size: 20px;
}

.fpanel h2 {
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 0.8rem;
}

.fpanel h3 {
    font-weight: 400;
    font-size: 26px;
}

.fpanel .row:nth-child(1) {
    margin-bottom: 45px;
}

.fpanel h4 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: #c6aa7c;
}

/* F panel_ins */
.fpanel_ins {
    padding-top: 0px;
}

.fpanel_ins p,
.findus p {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: #6c3b21;
}

.fpanel_ins h3 {
    font-weight: 400;
    font-size: 26px;
    margin-bottom: 4rem;
}

/* MoreCase */
#MoreCase {
    padding: 0rem 0px 3rem;
}

/* MoreCase Two*/
#MoreCaseTwo {
    padding: 0rem 0px 7rem;
}

/* MoreCase Three */
#MoreCaseThree {
    padding: 3rem 0px 1rem;
}

#MSPCMarble {}

#MSPCMarble h2 {
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

#MSPCMarble h2 span {
    padding: 0px 10px;
    color: #B07252;
    font-weight: 500;
}

#MSPCMarble .develop {
    font-size: 1.8rem;
    font-style: italic;
}

/* W Decking */
.wdecking {
    background-color: #efefef;
}

.wdecking .showroom-gallery img {
    width: 100%;
}

.wdecking h2 {
    font-size: 46px;
    margin-bottom: 0px;
}

.wdecking .develop {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.wdecking h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* OtherServices */
#OtherServices {
    padding: 6rem 0 0;
}

#OtherServices h3 {
    margin: 1rem 0rem 2rem;
}

@media(min-width:650px) {
    #OtherServices .container-fluid>.row>.col-md-6 {
        width: 49%;
    }
    
    #OtherServices .col-md-6>.col-inner {
        border: 1px solid black;
        border-radius: 5px;
        padding: 15px;
    }
}

/* findus */
.findus {
    background-color: #e0d7cf;
}

.findus h3 {
    margin-bottom: 1rem;
    font-size: 26px;
}

.findus h2 {
    font-size: 46px;
    line-height: 50px;
    margin-bottom: 3rem;
}

.findus .row:nth-child(2) {
    margin-top: 3rem;
}

.findus .showroom-gallery {
    margin-top: 2rem;
}

/* Grid Mix */
#workTeammate {
    padding: 0px;
}

.workTeammate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.workTeammate img {
    display: block;
    width: 100%;
}

footer {
    background-image: url("../images/direction-bg.jpg");
    position: relative;
    padding: 6rem 0;
}

footer h3 {
    font-weight: 500;
    font-size: 1.9rem;
    margin-bottom: 3rem;
}

.direction {
    font-weight: 400;
    font-size: 1.4rem;
    padding: 1rem 2rem;
    text-decoration: none;
    color: #fff;
    display: inline-block;
}

.direction:hover {
    color: #efefef;
}

.direction img {
    width: 40px;
}

.direction-waze {
    margin-right: 10px;
}