/* banner */
.propertyBanner {
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;

    .propertySlider {
        width: 100%;
        height: 100%;
        z-index: 2;

        .swiper-slide {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 70%;
                z-index: 1;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #1B1C21 100%);
            }
        }

        .propSliderImg {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

    }

    .propertyBannerBtm {
        position: relative;
        z-index: 2;
        padding: 0 30px;
        left: 0;
        bottom: 160px;
        pointer-events: none;

        .propertySwiperThumb {
            overflow: hidden;
            pointer-events: auto;

            .propThumbImg {
                width: 100%;
                height: 160px;
                border: 5px solid #fff;
                pointer-events: auto;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .swiper-slide-thumb-active .propThumbImg {
                border-color: #E0B432;
            }
        }
    }

    .thumb-arrows {
        position: absolute;
        top: auto;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        bottom: 100px;
        pointer-events: auto;

        .thumb-prev,
        .thumb-next {
            position: absolute;
            margin-top: 0;
        }

        .thumb-prev {
            left: 35px;
        }

        .thumb-next {
            right: 35px;
        }
    }
}

/* property intro */
.propIntroSec {
    .headingWrap {
        text-align: center;

        .propIntroAdd {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding-bottom: 20px;
            margin-bottom: 20px;
            position: relative;

            .abtTxtCir {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #E0B432;
                padding: 8px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                height: 1px;
                width: 20%;
                min-width: 350px;
                background-color: rgba(255, 255, 255, 0.50);
            }

            p {
                color: #FFF;
                font-family: "Work Sans";
                font-size: 30px;
                font-style: normal;
                font-weight: 400;
            }
        }

        .propIntroPrice {
            p {
                font-size: 20px;
                line-height: 30px;

                span {
                    color: #E0B432;
                    font-size: 35px;
                    font-weight: 400;
                }
            }
        }
    }

    .propIntroSecInn {
        padding-top: 20px;

        .propIntroRow {
            row-gap: 30px;
        }

        .propIntroBlock {
            background-color: #131314;
            padding: 30px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            transition: all 0.5s;

            .propIntroBlockImg {
                width: 62px;
                height: 62px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    transition: all 0.5s;
                }
            }

            p {
                color: #FFF;
                font-family: "Work Sans";
                font-size: 35px;
                font-style: normal;
                font-weight: 400;
                transition: all 0.5s;
            }

            &:hover {
                background-color: #E0B432;

                .propIntroBlockImg {
                    img {
                        filter: brightness(0) saturate(100%)
                    }
                }

                p {
                    color: #1B1C21;
                }
            }
        }
    }
}

/* property details */
.propDetSec {
    .propDetRow {
        row-gap: 30px;

        .propDetSecInn {
            border: 1px solid rgba(0, 0, 0, 0.25);

            .propDetBlock {
                padding: 50px 30px;

                /* common */
                &:not(:last-child) {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                }

                .propDetBlockUl {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    li {
                        width: 48%;
                        font-size: 18px;
                        font-weight: 400;
                        letter-spacing: -0.36px;
                        position: relative;
                        margin-bottom: 20px;
                        display: flex;
                        gap: 20px;

                        .liHead {
                            color: #575757;
                            font-weight: 500;
                            width: 150px;
                        }

                        .liTxt {
                            width: calc(100% - 150px);
                        }

                        &:nth-child(odd) {
                            &::after {
                                content: '';
                                position: absolute;
                                right: 0;
                                width: 1px;
                                height: calc(100% + 20px);
                                background-color: rgba(0, 0, 0, 0.25);
                            }
                        }
                    }
                }

                .propGetArInn {
                    display: flex;
                    row-gap: 20px;

                    .propGetArInnCard {
                        display: flex;
                        gap: 15px;
                        align-items: center;
                        width: 33.33%;
                        padding: 0px 20px;

                        .propGetImg {
                            width: 70px;
                            height: 70px;
                            border-radius: 50%;
                            padding: 12px;
                            background-color: #E0B432;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }

                        .propGetCont {
                            width: calc(100% - 70px);

                            h6 {
                                color: #000;
                                font-family: "Work Sans";
                                font-weight: 500;
                                margin-bottom: 8px;
                                line-height: 1;
                            }

                            p {
                                color: #7B7B7B;
                                margin-bottom: 8px;
                                line-height: 1;
                            }
                        }
                    }
                }

                /* property description */
                &.propDetDes {
                    .propDetDesTxt {
                        margin-bottom: 30px;
                    }

                    .propDetMap {
                        width: 100%;
                        height: 450px;
                        margin-bottom: 30px;

                        iframe {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .propDetAdd {
                        h6 {
                            color: #4D2762;
                            font-family: "Work Sans";
                            font-size: 30px;
                            font-weight: 500;
                            line-height: 28px;
                            letter-spacing: -0.6px;
                            margin-bottom: 10px;
                        }

                        .propDetAddInn {
                            display: flex;
                            align-items: center;
                            gap: 10px;

                            .abtTxtCir {
                                min-width: 40px;
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                background-color: #E0B432;
                                padding: 8px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                }
                            }

                            p {
                                font-size: 22px;
                            }
                        }
                    }
                }

                /* Amenities */
                &.propAmenity {
                    .propDetBlockUl {
                        li {
                            align-items: center;
                            position: relative;
                            padding-right: 80px;

                            &::before {
                                content: '';
                                position: absolute;
                                right: 30px;
                                top: 50%;
                                transform: translateY(-50%);
                                background: url(../images/property/check.png);
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                width: 30px;
                                height: 30px;
                            }

                            .liHead {
                                width: calc(100% - 40px);
                                position: relative;
                                padding-right: 200px;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    width: 200px;
                                    height: 1px;
                                    background: rgba(0, 0, 0, 0.25);
                                    top: 50%;
                                    transform: translateY(-50%);
                                    right: 0;
                                }
                            }

                            img {
                                width: 30px;
                                height: 30px;
                                object-fit: contain;
                            }
                        }
                    }
                }

                /* floor plan */
                &.propFloorPlan {
                    .propFloorPlanTop {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 20px;

                        .floorTabWrap {
                            width: calc(100% - 600px);
                            display: flex;
                            justify-content: end;
                        }
                    }
                }

                /* getting around */
                &.propGetAround {
                    .propGetArInn {
                        .propGetArInnCard {
                            position: relative;
                            padding-right: 45px;

                            &:not(:nth-child(3n+3)) {
                                &::after {
                                    content: '';
                                    position: absolute;
                                    right: 15px;
                                    top: 0;
                                    bottom: 0;
                                    width: 1px;
                                    height: 100%;
                                    background: rgba(0, 0, 0, 0.25);
                                }
                            }
                        }
                    }
                }

                /* what's nearby */
                &.propNearby {
                    .propNearTabWrap {
                        .propNearContBox {
                            padding-top: 30px;
                        }
                    }
                }

                /* mortgage calculator */
                &.propCalculator {
                    .propCalculatorInn {
                        form {
                            .totalPayment {
                                text-align: right;
                                font-weight: 500;
                                letter-spacing: -0.36px;
                                margin-bottom: 10px;
                            }
                        }
                    }
                }
            }
        }

        /* form section */
        .propForm {
            background: #E0B432;
            padding: 50px 30px;
            position: sticky;
            top: 80px;

            .formHead {
                color: #000;
                text-align: center;
                font-family: 'Zolina';
                font-size: 50px;
                font-weight: 300;
                text-transform: uppercase;
                margin-bottom: 30px;
            }

            .inpSubWrap {
                margin-left: auto;

                &:hover {
                    border-color: transparent;
                    background-color: #fff;

                    &::after {
                        opacity: 1;
                        top: 10px;
                        left: -10px;
                        border-color: #fff;
                    }
                }
            }
        }
    }
}

/* related projects  */
.projectSec {
    .commonCardBtm {
        .commonCardWrap {
            .commonCard {
                .commonCardDet {
                    .commonCardDetHead {
                        color: #fff;
                    }

                    .commonCardDetPrice {
                        color: #fff;
                    }
                }

                &:hover {
                    .commonCardDet {
                        .commonCardDetHead {
                            color: #E0B432;
                        }

                        .commonCardDetPrice {
                            color: #fff;
                        }
                    }

                }
            }
        }
    }
}

/* Responsive */

@media (max-width: 1768px) {
    .propIntroSec {
        .propIntroSecInn {
            .propIntroBlock {
                .propIntroBlockImg {
                    width: 56px;
                    height: 56px;
                }

                p {
                    font-size: 30px;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    &.propDetDes {
                        .propDetMap {
                            height: 400px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1600px) {
    .propIntroSec {
        .headingWrap {
            .propIntroAdd {
                p {
                    font-size: 24px;
                }
            }

            .propIntroPrice {
                p {
                    span {
                        font-size: 28px;
                    }
                }
            }
        }

        .propIntroSecInn {
            .propIntroBlock {
                .propIntroBlockImg {
                    width: 50px;
                    height: 50px;
                }

                p {
                    font-size: 28px;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propForm {
                padding: 30px 20px;

                .formHead {
                    font-size: 38px;
                }
            }
        }
    }
}

@media (max-width: 1440px) {
    .propertyBanner {
        .propertyBannerBtm {
            bottom: 150px;

            .propertySwiperThumb {
                .propThumbImg {
                    height: 130px;
                }
            }
        }
    }

    .propIntroSec {
        .propIntroSecInn {
            .propIntroBlock {
                p {
                    font-size: 24px;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    padding: 30px 20px;

                    .secH {
                        font-size: 45px;
                    }

                    &.propDetDes {
                        .propDetAdd {
                            h6 {
                                font-size: 22px;
                            }

                            .propDetAddInn {
                                p {
                                    font-size: 18px;
                                }
                            }
                        }
                    }

                    &.propFloorPlan {
                        .propFloorPlanTop {
                            .floorTabWrap {
                                width: calc(100% - 450px);

                                .tabList {
                                    li {
                                        min-width: 130px;
                                        font-size: 16px;
                                    }
                                }
                            }
                        }
                    }

                    &.propAmenity {
                        .propDetBlockUl {
                            li {
                                .liHead {
                                    &::after {
                                        width: 120px;
                                    }
                                }
                            }
                        }
                    }

                    .propGetArInn {
                        .propGetArInnCard {
                            width: 50%;

                            .propGetImg {
                                width: 55px;
                                height: 55px;
                                padding: 10px;
                            }
                        }
                    }

                    &.propGetAround {
                        .propGetArInn {
                            .propGetArInnCard {
                                flex-direction: column;
                                text-align: center;

                                .propGetCont {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1366px) {
    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    .propDetBlockUl {
                        li {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1280px) {
    .propIntroSec {
        .headingWrap {
            .propIntroAdd {
                p {
                    font-size: 22px;
                }
            }
        }

        .propIntroSecInn {
            .propIntroBlock {
                .propIntroBlockImg {
                    width: 40px;
                    height: 40px;
                }

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

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    .secH {
                        font-size: 35px;
                    }

                    &.propDetDes {
                        .propDetMap {
                            height: 300px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .propertyBanner {
        height: 600px;
    }

    .propDetSec {
        .propDetRow {
            .propForm {
                .formHead {
                    font-size: 35px;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .propertyBanner {
        height: 550px;
    }
}

@media (max-width: 991px) {
    .propertyBanner {
        height: 490px;

        .thumb-arrows {
            .thumb-next, .thumb-prev {
                width: 35px;
                height: 35px;
            }
        }
    }

    .propIntroSec {
        .headingWrap {
            .propIntroAdd {
                p {
                    font-size: 18px;
                }
            }

            .propIntroPrice {
                p {
                    span {
                        font-size: 24px;
                    }
                }
            }
        }

        .propIntroSecInn {
            .propIntroBlock {
                background-color: #E0B432;
                padding: 18px 20px;

                .propIntroBlockImg {
                    img {
                        filter: brightness(0) saturate(100%);
                    }
                }

                p {
                    color: #000;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    &.propFloorPlan {
                        .propFloorPlanTop {
                            .secH {
                                width: 100%;
                                text-align: center;
                            }

                            .floorTabWrap {
                                display: none;
                            }
                        }

                        .floorContBox {
                            .tab_content {
                                display: block;
                                margin-bottom: 20px;

                                .accTrigger {
                                    display: block;
                                }

                                .floorCont {
                                    display: none;
                                }

                                &.active {
                                    .floorCont {
                                        display: block;
                                        border: 1px solid rgba(0, 0, 0, 0.25);
                                        padding: 15px;
                                    }
                                }
                            }
                        }
                    }

                    &.propGetAround {
                        .propGetArInn {
                            .propGetArInnCard {
                                padding: 0 !important;

                                &:not(:nth-child(3n+3)) {
                                    &::after {
                                        right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .propForm {
                .formHead {
                    font-size: 32px;
                }

                .inpSubWrap {
                    width: 210px;
                    border-color: transparent;
                    background-color: #fff;

                    input {
                        letter-spacing: 2.5px;
                        font-size: 14px;
                    }

                    &::after {
                        opacity: 1;
                        top: 10px;
                        left: -10px;
                        border-color: #fff;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .propertyBanner {
        height: 430px;

        .thumb-arrows {
            bottom: 70px;
        }

        .propertyBannerBtm {
            bottom: 100px;

            .propertySwiperThumb {
                .propThumbImg {
                    height: 100px;
                }
            }
        }
    }

    .propIntroSec {
        .propIntroSecInn {
            .propIntroRow {
                row-gap: 20px;
            }

            .propIntroBlock {
                justify-content: flex-start;

                p {
                    font-size: 18px;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    .propDetBlockUl {
                        li {
                            width: 100%;

                            &:nth-child(2n+1) {
                                &::after {
                                    content: normal;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    &.propAmenity {
                        .propDetBlockUl {
                            li {
                                padding-right: 40px;

                                &::before {
                                    right: 0;
                                }
                            }
                        }
                    }

                    .propGetArInn {
                        flex-wrap: wrap;
                        row-gap: 30px;

                        .propGetArInnCard {
                            width: 100%;
                            padding: 0;

                            &::after {
                                content: normal !important;
                            }
                        }
                    }
                }
            }
        }
    }

}

@media (max-width: 575px) {
    .propIntroSec {
        .headingWrap {
            .propIntroAdd {
                &::after {
                    width: 100%;
                }

                p {
                    width: calc(100% - 40px);
                    text-align: left;
                }
            }
        }
    }

    .propDetSec {
        .propDetRow {
            .propDetSecInn {
                .propDetBlock {
                    .secH {
                        font-size: 30px;
                    }

                    &.propAmenity {
                        .propDetBlockUl {
                            li {
                                .liHead {
                                    padding-right: 70px;

                                    &::after {
                                        width: 50px;
                                    }
                                }
                            }
                        }
                    }

                    &.propCalculator {
                        .propCalculatorInn {
                            form {
                                .totalPayment {
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}