* {
    font-family: "Poppins";
}
.main-details-container {
    width: calc(100%-470px);
    margin-left: 470px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    border-left: 1.5px solid rgba(215, 47, 47, 0.1);
    padding: 40px 60px;
}

select.verify-input {
    width: 400px;
    height: 60px;
    font-size: 16px;
    border-radius: 16px;
    padding: 19px 16px;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    font-family: "Poppins", sans-serif;
    color: #000e14;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

    .main-details-container.location {
        height: 900px;
    }

    .main-details-container.theme {
        height: 900px;
    }

main {
    position: relative;
}
.form-check-label{
    font-size:16px;
}
@media (max-width: 768px) {
    .main-details-container {
        position: relative;
        z-index: 1;
        width: 100%;
        overflow: hidden;
        margin-left: 10px;
    }
}

.profile-info-container {
    display: flex;
    flex-direction: row;
    width: 422px;
    column-gap: 10px;
    padding: 24px 0px;
}

.profile-info-image-container {
    justify-content: center;
    align-items: center;
    width: 97.5px;
}

    .profile-info-image-container > img {
        border-radius: 50%;
    }

.profile-person-detail-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 20px;
    width: 310.74px;
}

.details-and-edit-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.profile-details {
    display: block;
    row-gap: 20px;
}

.edit {
    width: 24px;
    height: 24px;
}

.black-heading {
    font-weight: 500;
    font-size: 18px;
    color: #000e14;
    font-style: inherit;
}

.secondary-black-heading {
    font-weight: 400;
    font-size: 14px;
    color: #000e14;
}

.edit-option {
    margin-right: 20px;
}

.profile-completion-status {
    padding: 2px 4px;
    width: fit-content;
    height: fit-content;
    background-color: rgba(215, 47, 47, 0.1);
}

.setting-options {
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.black-main-heading {
    font-weight: 600;
    font-size: 20px;
    color: #000e14;
}

.option-description {
    font-style: "poppins";
    font-weight: 400;
    font-size: 16px;
    color: #394553;
}

.arrow-nav {
    cursor: pointer;
}

.highlight-span {
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 10px;
    color: #d72f2f;
    background-color: rgba(215, 47, 47, 0.1);
}

.profile-top-option {
    display: flex;
    justify-content: space-between;
    border-radius: 8px 8px 0px 0px;
    border-top: 1px solid rgba(57, 69, 83, 0.3);
    border-left: 1px solid rgba(57, 69, 83, 0.3);
    border-right: 1px solid rgba(57, 69, 83, 0.3);
    padding: 4px 4px;
}

.profile-last-option {
    display: flex;
    justify-content: space-between;
    border-radius: 0px 0px 8px 8px;
    border-top: 1px solid rgba(57, 69, 83, 0.3);
    border-bottom: 1px solid rgba(57, 69, 83, 0.3);
    border-left: 1px solid rgba(57, 69, 83, 0.3);
    border-right: 1px solid rgba(57, 69, 83, 0.3);
    padding: 4px 4px;
}

.profile-middle-option {
    display: flex;
    justify-content: space-between;
    border-radius: 0px;
    border-top: 1px solid rgba(57, 69, 83, 0.3);
    border-left: 1px solid rgba(57, 69, 83, 0.3);
    border-right: 1px solid rgba(57, 69, 83, 0.3);
    padding: 4px 4px;
}

.profile-middle-2-option {
    display: flex;
    justify-content: space-between;
    border-radius: 0px;
    border-top: 1px solid rgba(57, 69, 83, 0.3);
    border-left: 1px solid rgba(57, 69, 83, 0.3);
    border-right: 1px solid rgba(57, 69, 83, 0.3);
    padding: 4px 4px;
}

.fa-chevron-right {
    font-size: 15px;
    color: rgba(57, 69, 83, 0.3);
}

.profile-top-option.active {
    background-color: rgba(215, 47, 47, 0.1);
}

    .profile-top-option.active .option-description {
        color: #d72f2f;
    }

.profile-middle-option.active {
    background-color: rgba(215, 47, 47, 0.1);
}

.profile-middle-2-option.active {
    background-color: rgba(215, 47, 47, 0.1);
}

    .profile-middle-2-option.active .option-description {
        color: #d72f2f;
    }

.profile-middle-option.active .option-description {
    color: #d72f2f;
}

.profile-last-option.active .option-description {
    color: #d72f2f;
}

.profile-middle-2-option:hover {
    color: #d72f2f;
}

.profile-middle-option:hover {
    color: #d72f2f;
}

.profile-last-option:hover {
    color: #d72f2f;
}

.profile-last-option.active {
    background-color: rgba(215, 47, 47, 0.1);
}
/*  */
.kyc-completion-status-container {
    display: flex;
    justify-content: space-between;
}

.completion-status {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kyc-title {
    font-style: "poppins";
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5;
    color: #d72f2f;

}

.grey-highlights {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    color: #7d7d7d;
}

.secondary-heading {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
}

.primary-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #000000;
}

.yellow-container {
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 190, 23, 0.1);
    border-radius: 10px;
    border: 1px solid #ffbe17;
    padding: 15px 2px;
    margin-top: 30px;
    justify-content: space-between;
}

.yellow-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
}

.yellow-alert-icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

.yellow-highlight {
    color: #ffbe17;
    font-size: 14px;
}
/*  */

.swap-button-row {
    display: flex;
    align-items: flex-start;
    padding-bottom: -1px;
    padding: 0px;
    margin-bottom: 0px;
    border-bottom: 0.5px solid rgba(215, 47, 47, 0.2);
}

.swap-btn {
    width: fit-content;
    height: 56px;
    border: 0px 0px 2px 0px;
    padding: 16px 22px 16px 22px;
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #000000;
}

    .swap-btn.active {
        color: #d72f2f;
        border-bottom: 2px solid #d72f2f;
    }

.content-container {
    padding: 20px;
    display: block;
}

.verify-container {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.column-inputs {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.verify-label {
    font-size: 16px;
    color: #7d7d7d;
    font-family: "Poppins";
}

.verify-input {
    width: 400px;
    height: 60px;
    font-size: 16px;
    border-radius: 16px;
    padding: 19px 16px;
    border: 1px solid #d1d1d1;
}

    .verify-input::placeholder {
        color: #000e14;
        font-size: 16px;
        font-family: "Poppins";
    }

.document-input {
    width: 307px;
    font-size: 16px;
    height: 60px;
    border-radius: 16px;
    padding: 19px 16px;
    border: 1px solid #d1d1d1;
}

    .document-input::placeholder {
        color: #000e14;
        font-size: 16px;
    }

.attach-document {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    column-gap: 20px;
}

.attch-docs-input-container {
    position: relative;
}

.attach-icon {
    position: absolute;
    top: 50%;
    align-items: center;
    justify-content: center;
    left: 250px;
    transform: translateY(-50%);
}

.fa-paperclip {
    color: grey;
    font-size: 17px;
    cursor: pointer;
}

.camera-icon {
    color: grey;
    cursor: pointer;
}

.grey-text {
    color: grey;
    font-size: 17px;
}

.right-button-container {
    display: flex;
    border: none;
    text-align: right;
    justify-content: flex-end;
    margin-top: 50px;
}

.btn--primary {
    width: 312px;
    height: 60px;
    border-radius: 16px;
    padding: 20px 24px;
    background-color: #d72f2f;
    color: white;
    font-size: 18px;
    border: none;
}

    .btn--primary > a {
        color: white;
    }

@media (max-width: 768px) {
    .main-details-container {
        border-left: none;
    }
}

@media (max-width: 450px) {
    .right-button-container {
        margin-top: -50px;
    }

    .main-details-container {
        padding: 40px 30px;
    }

    .profile-info-container {
        display: flex;
        flex-direction: row;
        width: 332px;
        column-gap: 10px;
        padding: 24px 0px;
    }

    .profile-person-detail-container {
        width: 200px;
    }

    .kyc-title {
        font-weight: 400px;
        font-size: 20px;
    }

    .grey-highlights {
        font-size: 30px;
        line-height: 40px;
    }

    .verify-label {
        font-size: 15.5px;
    }

    .highlight-span {
        color: #d72f2f;
    }

    .verify-input {
        width: 340px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
        border: 1px solid #d1d1d1;
    }

        .verify-input::placeholder {
            font-size: 14px;
        }

    .document-input {
        width: 270px;
        height: 60px;
    }

    .content-container {
        padding: 0px;
        margin-bottom: 100px;
        display: block;
    }

    .btn--primary {
        width: 212px;
        height: 55px;
        padding: 20px 14px;
        font-size: 16px;
    }

        .btn--primary > a {
            font-size: 16px;
        }
}

@media (max-width: 380px) {
    .main-details-container {
        margin-left: 0px;
        padding: 40px 20px;
    }

    .profile-info-container {
        display: flex;
        flex-direction: row;
        width: 300px;
        column-gap: 10px;
        padding: 24px 0px;
    }

    .highlight-span {
        color: #d72f2f;
        margin-left: 20px;
    }

    .edit {
        width: 17px;
        height: 17px;
    }

    .primary-heading {
        font-size: 15px;
    }

    .verify-input {
        width: 340px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
        border: 1px solid #d1d1d1;
    }

        .verify-input::placeholder {
            font-size: 14px;
        }

    .verify-label {
        font-size: 15px;
    }

    .attach-document {
        column-gap: 10px;
    }

    .attach-icon {
        left: 230px;
    }

    .document-input {
        width: 270px;
        height: 60px;
    }

    .content-container {
        padding: 0px;
        margin-bottom: 100px;
        display: block;
    }
}

@media (max-width: 320px) {
    .main-details-container {
        margin-left: 0px;
        padding: 40px 20px;
    }

    .profile-info-container {
        display: flex;
        flex-direction: column;
        column-gap: 0px;
        padding: 24px 0px;
        width: 100%;
    }

    .primary-heading {
        font-size: 14px;
    }

    .edit {
        width: 17px;
        height: 17px;
    }

    .verify-input {
        width: 270px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
        border: 1px solid #d1d1d1;
    }

        .verify-input::placeholder {
            font-size: 14px;
        }

    .attach-document {
        column-gap: 10px;
    }

    .attach-icon {
        left: 190px;
    }

    .document-input {
        width: 220px;
        height: 60px;
    }

    .content-container {
        padding: 0px;
        margin-bottom: 100px;
        display: block;
    }

    .profile-info-image-container {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 200px;
    }

        .profile-info-image-container > img {
            border-radius: 50%;
            width: 100.5px;
            height: 100.5px;
        }

    .profile-person-detail-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 20px;
        width: 200.74px;
    }

    .verify-label {
        font-size: 14px;
    }

    .swap-btn {
        border: none;
        font-size: 13.5px;
    }

    .btn--primary {
        width: 212px;
        height: 45px;
        padding: 10px 14px;
        font-size: 14px;
    }

        .btn--primary > a {
            font-size: 14px;
        }

    .right-button-container {
        margin-top: -50px;
    }
}
/* topbar */
.topbar {
    background-color: #d72f2f;
    padding: 8px;
    height: 76px;
}

.topbar-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.topbar-actions {
    display: flex;
    align-items: center;
    height: 34px;
    padding-right: 16px;
}

.mobile-logo-anchor {
    display: none;
}

.topbar-actions .quick-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

    .topbar-actions .quick-info span {
        font-family: "poppins";
        font-size: 16px;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .topbar-actions .quick-info span.label {
            color: #ff9c9c;
        }

    .topbar-actions .quick-info.outlined {
        border: 1px solid #ff9c9c;
        border-radius: 4px;
    }

    .topbar-actions .quick-info span.value {
        color: #fff;
    }

.topbar-actions .divider {
    border-right: 1px solid #b8081e;
    height: 36px;
    width: 1px;
    display: block;
    margin: 0 16px;
}

.topbar-actions .action-group {
    display: flex;
    gap: 16px;
}

.btn.btn-small {
    height: 28px;
    width: 34px;
    padding: 8px 16px;
}

.btn.icon-btn {
    border: 0;
    background-color: transparent;
    position: relative;
}

.has-notifications {
    width: 8px;
    height: 8px;
    background-color: #ffbe17;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 4px;
}

.toggle-icon {
    display: none;
}

/* welcome-text */
.wrapper {
    display: flex;
    max-height: 740px;
    padding: 20vh;
    align-items: center;
    max-width: 1920px;
    justify-content: start;
    margin: 0 auto;
}

.primary-actions-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: fit-content;
    position: relative;
    z-index: 100;
}

.welcome-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 100px;
}

    .welcome-text h3 {
        font: 24px/1 Poppins;
        color: #d72f2f;
    }

        .welcome-text h3 span {
            color: #000e14;
        }

    .welcome-text h1 {
        font: 600 48px/1 Poppins;
        color: #d72f2f;
    }

/* btn-group */
.btn-group {
    display: flex;
    gap: 8px;
}

    .btn-group .btn {
        height: 54px;
        border-radius: 16px;
        background-color: #fff;
        min-width: 120px;
        padding: 16px;
        color: #000e14;
        font-size: 14px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        border: 0;
    }

        .btn-group .btn.active {
            box-shadow: none;
            background-color: rgba(215, 47, 47, 0.2);
            color: #d72f2f;
        }

.btn.active:hover {
    border: none;
}

/* search-large */
.search-large {
    display: flex;
    flex-direction: 0;
    border: 1px solid #ff9c9c;
    border-radius: 24px;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    width: fit-content;
}

.btn.btn-primary.no-glow {
    text-shadow: none;
}

.search-large .large-search {
    border: none;
    font-size: 16px;
}

    .search-large .large-search::placeholder {
        color: #f38383;
    }

.wrapper .background {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 700px;
    background: none;
    overflow: hidden;
}

    .wrapper .background .markers-map {
        width: 100%;
        position: relative;
        bottom: -300px;
        z-index: 0;
    }

.large-search:focus {
    outline: none;
}

.wrapper .background .action-bg {
    position: absolute;
    z-index: 10;
    bottom: -50px;
    right: calc(50% - 600px);
}

.wrapper .background .circle-1 {
    width: 540px;
    height: 540px;
    display: block;
    position: absolute;
    left: 60%;
    top: 30%;
    background-color: #d72f2f;
    border-radius: 50%;
    z-index: 1;
}

.wrapper .background .circle-2 {
    width: 640px;
    height: 640px;
    display: block;
    position: absolute;
    left: 48%;
    top: 18%;
    background-color: rgba(215, 47, 47, 0.2);
    border-radius: 50%;
    z-index: 2;
}

.action-link {
    display: flex;
    align-items: center;
    color: #486bf5;
    gap: 8px;
}

.section {
    padding: 64px 0;
    margin-bottom: 50px;
}

.section-wrapper > * {
    margin: 0 auto 24px;
}

.section-wrapper.type-1 {
    background-color: rgba(215, 47, 47, 0.03);
    padding-bottom: 24px;
}
/* tabs-container */
.tabs {
    display: flex;
    justify-content: center;
    margin-top: 200px;
    border-bottom: 1px solid rgba(215, 47, 47, 0.2);
    background-color: #fff;
    margin-bottom: 48px;
}

    .tabs ul {
        list-style: none;
        padding: none;
        display: flex;
    }

    .tabs .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 54px;
    }

li.tab a {
    font-size: 16px;
    font-family: "poppins";
    color: #000e14;
    display: flex;
    justify-content: stretch;
    align-items: center;
    height: 54px;
    padding: 24px;
}

li.tab.selected {
    background-color: rgba(215, 47, 47, 0.2);
    border-bottom: 1px solid #d72f2f;
}

li.tab:hover {
    background-color: rgba(215, 47, 47, 0.2);
}

li.tab.selected a {
    color: #d72f2f;
}

/* section-title */
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
}

    .section-title h2 {
        font-family: "poppins";
        font-size: 32px;
        font-weight: 600;
        color: #000e14;
        line-height: 1;
    }

    .section-title a {
        font-size: 16px;
        font-family: "poppins";
        line-height: 1;
        color: #d72f2f;
    }
/* property type1 */
.property-group.type1 {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    gap: 24px 24px;
    flex-direction: column;
    flex-wrap: wrap;
    height: 440px;
    padding-left: 4px;
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
}

    .property-group.type1::-webkit-scrollbar {
        display: none;
    }

.property.type1 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    position: relative;
}

    .property.type1:before {
        content: "";
        width: 4px;
        position: absolute;
        top: 30%;
        bottom: 30%;
        left: -2px;
        border-radius: 2px;
        background-color: #d72f2f;
        opacity: 0.3;
    }

    .property.type1:hover::before {
        opacity: 1;
    }

    .property.type1:hover {
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1);
    }

    .property.type1 .property-details {
        display: flex;
        flex-direction: column;
        width: 320px;
        gap: 8px;
    }

        .property.type1 .property-details .info-level-1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .property.type1 .property-details .info-level-1 .prop-name-location {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

    .property.type1 .info-level-1 .prop-name-location .property-name {
        font-weight: 600;
        font-size: 16px;
        color: black;
    }

    .property.type1 .info-level-1 .prop-name-location .property-location {
        font-weight: 300;
        font-size: 14px;
        color: black;
    }

    .property.type1 .property-details .info-level-1 .like-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .property.type1 .property-details .property-type {
        font-weight: 600;
        font-size: 14px;
        color: #486bf5;
    }

    .property.type1 .property-details .info-level-2 {
        display: flex;
        justify-content: space-between;
    }

        .property.type1 .property-details .info-level-2 .mini-info {
            display: flex;
            flex-direction: column;
            text-align: center;
            font-size: 14px;
            font-weight: 300;
            padding: 8px 0;
            gap: 4px;
        }

            .property.type1 .property-details .info-level-2 .mini-info .label {
                font-size: 14px;
                color: #7d7d7d;
            }

            .property.type1 .property-details .info-level-2 .mini-info .value {
                color: #d72f2f;
            }

/* property type2 */
.property-group.type2 {
    display: flex;
    align-items: center;
    height: 360px;
    max-width: 1240px;
    margin: 0 auto;
    gap: 0px;
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
}

    .property-group.type2::-webkit-scrollbar {
        display: none;
    }

.property.type2 {
    height: 270px;
    min-width: 200px;
    transition: all 0.2s ease-in;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    transform: perspective(400px) rotateY(10deg);
    background: linear-gradient( -59deg, rgba(112, 0, 0, 1) 0%, rgba(215, 47, 47, 1) 100% );
}

    .property.type2:hover {
        height: 310px;
        min-width: 270px;
        z-index: 100;
        margin-right: 8px;
        transform: perspective(400px) rotateY(0deg);
    }

    .property.type2 .prop-name-location {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
    }

    .property.type2 > img {
        transition: all 0.2s ease-in;
    }

    .property.type2:hover > img {
        width: 150px;
    }

    .property.type2 .property-name {
        font-weight: 600;
        font-size: 16px;
        color: #fff;
    }

    .property.type2 .property-location {
        opacity: 0.5;
    }

    .property.type2 .property-location,
    .property.type2 .mini-info {
        font-weight: 300;
        font-size: 14px;
        color: #fff;
    }

    .property.type2 .like-group .property-type {
        position: absolute;
        bottom: 16px;
        right: 16px;
        color: #e9db82;
        font-weight: 600;
        font-size: 16px;
        opacity: 0;
        transition: all 0.2s ease-in;
    }

    .property.type2:hover .like-group .property-type {
        opacity: 1;
    }

    .property.type2 .like-group .btn {
        position: absolute;
        top: 16px;
        right: 16px;
        opacity: 0;
        transition: all 0.2s ease-in;
    }

    .property.type2:hover .like-group .btn {
        opacity: 1;
    }

.buy--btn-primary > a {
    color: black;
}

.buy--btn-primary.active > a {
    color: #d72f2f;
}

.buy--btn-primary:hover {
    background: #d72f2fdd;
    border: 1px solid #d72f2fdd;
    color: #fff;
    text-shadow: 0 0 4px #fffc;
}

.buy--btn-primary :hover {
    color: #fff;
}

nav.mobile {
    display: none;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 0.8rem 0;
    background: #fefefe;
    border-top: 1px solid #ccc;
    z-index: 9999;
    margin: 0 auto;
}

.mobile {
    transition: 0.5s ease !important;
}

nav.mobile ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    justify-self: center;
    vertical-align: middle;
}

    nav.mobile ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.7rem;
        flex-grow: 1;
        margin: 0;
    }

        nav.mobile ul li a {
            color: #222;
            font-size: inherit;
            display: var(--prP3M8);
            flex-direction: var(--mZSq9k);
        }

            nav.mobile ul li a svg {
                width: 24px;
                height: 24px;
                display: block;
                margin: 0 auto;
            }

.mobile-topbar {
    background-color: #d72f2f;
}

.mobile-topbar-actions {
    display: none;
    flex-direction: row;
    padding: auto;
    justify-content: center;
    text-align: center;
}

    .mobile-topbar-actions > ul {
        display: flex;
        flex-direction: row;
        column-gap: 30px;
    }

        .mobile-topbar-actions > ul > li > a > img {
            width: 28px;
            height: 28px;
        }

        .mobile-topbar-actions > ul > li {
            padding: 5px;
            background-color: white;
            border-radius: 50%;
        }

@media (max-width: 5500px) {
    .wrapper .background .action-bg {
        position: absolute;
        z-index: 10;
        bottom: -50px;
        right: calc(50% - 650px);
    }

    .wrapper .background .circle-1 {
        width: 540px;
        height: 540px;
        display: block;
        position: absolute;
        left: 52%;
        top: 30%;
        background-color: #d72f2f;
        border-radius: 50%;
        z-index: 1;
    }

    .wrapper .background .circle-2 {
        width: 640px;
        height: 640px;
        display: block;
        position: absolute;
        left: 50%;
        top: 18%;
        background-color: rgba(215, 47, 47, 0.2);
        border-radius: 50%;
        z-index: 2;
    }
}

@media (max-width: 1440px) {
    .wrapper .background .action-bg {
        position: absolute;
        z-index: 10;
        bottom: -50px;
        right: calc(50% - 600px);
    }

    .wrapper .background .circle-1 {
        width: 540px;
        height: 540px;
        display: block;
        position: absolute;
        left: 60%;
        top: 30%;
        background-color: #d72f2f;
        border-radius: 50%;
        z-index: 1;
    }

    .wrapper .background .circle-2 {
        width: 640px;
        height: 640px;
        display: block;
        position: absolute;
        left: 48%;
        top: 18%;
        background-color: rgba(215, 47, 47, 0.2);
        border-radius: 50%;
        z-index: 2;
    }

    .property-group.type1 {
        margin: 0 auto;
        display: flex;
        gap: 24px 50px;
        flex-direction: column;
        flex-wrap: wrap;
        height: 440px;
        overflow-x: scroll;
        padding-left: 40px;
    }
}

@media (max-width: 1024px) {
    .wrapper {
        display: flex;
        max-height: 740px;
        padding: 5vh;
        align-items: center;
        max-width: auto;
        width: 90%;
        margin: 0 auto;
    }

    .primary-actions-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: fit-content;
    }

    .welcome-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .welcome-text h3 {
            margin-top: 60px;
            font: 24px/1 "poppins";
        }

        .welcome-text h1 {
            font: 600 48px/1 "poppins";
        }

    /* btn-group */
    .btn-group {
        display: flex;
        gap: 8px;
    }

        .btn-group .btn {
            height: 54px;
            border-radius: 16px;
            min-width: 120px;
            padding: 16px;
            font-size: 14px;
        }

    /* search-large */
    .search-large {
        display: flex;
        flex-direction: 0;
        border-radius: 24px;
        gap: 8px;
        padding: 8px 8px 8px 16px;
        width: fit-content;
    }

    .wrapper .background {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        height: 100%;
    }

        .wrapper .background .markers-map {
            width: 100%;
            position: relative;
            bottom: -200px;
            z-index: 0;
        }

        .wrapper .background .action-bg {
            position: absolute;
            z-index: 10;
            bottom: -50px;
            top: 70px;
            width: 550px;
            right: calc(50% - 600px);
        }

        .wrapper .background .circle-1 {
            width: 440px;
            height: 440px;
            display: block;
            left: 58%;
            top: 30%;
            z-index: 1;
        }

        .wrapper .background .circle-2 {
            width: 540px;
            height: 540px;
            display: block;
            left: 55%;
            top: 13%;
            z-index: 2;
        }

    /* section */
    .section {
        padding: 44px 0;
        margin-bottom: 50px;
    }

    .section-wrapper > * {
        margin: 0 auto 24px;
    }

    .section-wrapper.type-1 {
        background-color: rgba(215, 47, 47, 0.03);
        padding-bottom: 24px;
    }
    /* tabs-container */
    .tabs {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 48px;
    }

        .tabs ul {
            list-style: none;
            padding: none;
            display: flex;
        }

        .tabs .tab {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 54px;
        }

    li.tab a {
        font-size: 16px;
        font-family: "poppins";
        color: #000e14;
        display: flex;
        justify-content: stretch;
        align-items: center;
        height: 54px;
        padding: 24px;
    }

    /* section-title */
    .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: auto;
        width: 95%;
    }

        .section-title h2 {
            font-size: 32px;
            font-weight: 600;
        }

        .section-title a {
            font-size: 16px;
            font-family: "poppins";
        }
    /* property type1 */
    .property-group.type1 {
        margin: 0 auto;
        display: flex;
        gap: 24px 50px;
        flex-direction: column;
        flex-wrap: wrap;
        height: 440px;
        overflow-x: scroll;
        padding-left: 40px;
    }

    .property.type1 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        background-color: #fff;
        padding: 8px;
        border-radius: 8px;
        position: relative;
    }

    /* property type2 */
    .property-group.type2 {
        display: flex;
        align-items: center;
        height: 360px;
        max-width: auto;
        width: 90%;
        margin: 0 auto;
        overflow-x: scroll;
        gap: 20px;
        padding: 0px 40px;
    }

    .property.type2 {
        height: 270px;
        min-width: 200px;
        /* transition: all 0.2s ease-in; */
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 8px;
        position: relative;
        z-index: 1;
        /* transform: perspective(400px) rotateY(10deg); */
        background: linear-gradient( rgba(112, 0, 0, 1) 0%, rgba(215, 47, 47, 1) 100% );
    }

        .property.type2:hover {
            height: 310px;
            min-width: 270px;
            z-index: 100;
            margin-right: 8px;
            transform: perspective(400px) rotateY(0deg);
        }

        .property.type2 .prop-name-location {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-bottom: 8px;
        }

        .property.type2 > img {
            transition: all 0.2s ease-in;
        }

        .property.type2:hover > img {
            width: 150px;
        }

        .property.type2 .property-name {
            font-weight: 600;
            font-size: 16px;
            color: #fff;
        }

        .property.type2 .property-location {
            opacity: 0.5;
        }

        .property.type2 .property-location,
        .property.type2 .mini-info {
            font-weight: 300;
            font-size: 14px;
            color: #fff;
        }

        .property.type2 .like-group .property-type {
            position: absolute;
            bottom: 16px;
            right: 16px;
            color: #e9db82;
            font-weight: 600;
            font-size: 16px;
            opacity: 0;
            transition: all 0.2s ease-in;
        }

        .property.type2:hover .like-group .property-type {
            opacity: 1;
        }

        .property.type2 .like-group .btn {
            position: absolute;
            top: 16px;
            right: 16px;
            opacity: 0;
            transition: all 0.2s ease-in;
        }

        .property.type2:hover .like-group .btn {
            opacity: 1;
        }
}

@media (max-width: 768px) {
    .topbar-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        height: fit-content;
        padding-right: 16px;
    }

        .topbar-actions .quick-info {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
        }

            .topbar-actions .quick-info span {
                font-family: "poppins";
                font-size: 14px;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 8px;
            }

                .topbar-actions .quick-info span.label {
                    font-size: 14px;
                }

                .topbar-actions .quick-info span.value {
                    font-size: 14px;
                }

            .topbar-actions .quick-info.outlined span.value {
                font-size: 14px;
            }

            .topbar-actions .quick-info.outlined span.label {
                font-size: 14px;
            }

    .label-icon {
        font-size: 1px;
    }

    .topbar-actions > button > img {
        width: 50px;
        height: 30px;
    }

    .action-group > button > img {
        width: 50px;
        height: 30px;
    }

    .topbar-actions .divider {
        height: 30px;
        width: 1px;
        display: block;
        margin: 0 10px;
    }

    .topbar-actions .action-group {
        display: flex;
        gap: 4px;
    }
    /* 
.btn.btn-small {
  height: 8px;
  width: 40px;
  padding: 8px 16px;
} */

    .btn.icon-btn {
        border: 0;
        background-color: transparent;
        position: relative;
    }

    .has-notifications {
        width: 6px;
        height: 6px;
    }

    .section {
        padding: 44px 0;
        margin-bottom: -70px;
    }

    .wrapper {
        display: flex;
        max-height: 740px;
        padding: 5vh;
        align-items: center;
        max-width: auto;
        width: 90%;
        margin: 0 auto;
    }

    .primary-actions-container {
        display: flex;
        flex-direction: column;
        gap: 52px;
        width: fit-content;
    }

    .welcome-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .welcome-text h3 {
            margin-top: 60px;
            font: 22px/1 Poppins;
        }

        .welcome-text h1 {
            font: 600 38px/1 Poppins;
        }

    /* btn-group */
    .btn-group {
        display: flex;
        gap: 8px;
    }

        .btn-group .btn {
            height: 54px;
            border-radius: 16px;
            min-width: 120px;
            padding: 16px;
            font-size: 14px;
        }

    /* search-large */
    .search-large {
        display: flex;
        flex-direction: 0;
        border-radius: 24px;
        gap: 8px;
        background-color: white;
        padding: 8px 8px 8px 16px;
        width: fit-content;
    }

    .wrapper .background {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        height: 100%;
    }

        .wrapper .background .markers-map {
            width: 100%;
            position: relative;
            bottom: -280px;
            z-index: 0;
        }

        .wrapper .background .action-bg {
            position: absolute;
            z-index: 10;
            width: 450px;
            height: 450px;
            bottom: -50px;
            top: 20%;
            right: calc(50% - 470px);
        }

        .wrapper .background .circle-1 {
            width: 400px;
            height: 400px;
            display: none;
            left: 70%;
            top: 30%;
            z-index: 1;
        }

        .wrapper .background .circle-2 {
            width: 480px;
            height: 480px;
            display: none;
            left: 55%;
            top: 20%;
            z-index: 2;
        }

    /* section */
    .section {
        padding: 44px 0;
        margin-bottom: 50px;
    }

    .section-wrapper > * {
        margin: 0 auto 24px;
    }

    .section-wrapper.type-1 {
        background-color: rgba(215, 47, 47, 0.03);
        padding-bottom: 24px;
    }
    /* tabs-container */
    .tabs {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 48px;
    }

        .tabs ul {
            list-style: none;
            padding: none;
            display: flex;
        }

        .tabs .tab {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 54px;
        }

    li.tab a {
        font-size: 16px;
        display: flex;
        justify-content: stretch;
        align-items: center;
        height: 54px;
        padding: 24px;
    }

    /* section-title */
    .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: auto;
        width: 95%;
    }

        .section-title h2 {
            font-size: 32px;
            font-weight: 600;
        }

        .section-title a {
            font-size: 16px;
            font-family: "poppins";
        }
    /* property type1 */
    .property-group.type1 {
        margin: 0 auto;
        max-width: auto;
        width: 480px;
        display: flex;
        gap: 24px 44px;
        flex-direction: column;
        flex-wrap: wrap;
        height: 280px;
        overflow-y: scroll;
        padding-left: 10px;
    }

    .property.type1 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        background-color: #fff;
        padding: 8px;
        border-radius: 8px;
        position: relative;
    }
}

@media (max-width: 450px) {
    nav.mobile {
        display: flex;
    }

    .mobile-logo-anchor {
        display: block;
    }

    .topbar {
        display: none;
    }

    .markers-map {
        display: none !important;
    }

    .mobile-topbar-actions {
        flex-direction: row;
        justify-content: space-between;
    }

        .mobile-topbar-actions > ul {
            display: flex;
            flex-direction: row;
            padding: auto 20px;
            justify-content: space-between;
        }

            .mobile-topbar-actions > ul > li {
                padding: 5px;
                background-color: white;
                border-radius: 50%;
            }

                .mobile-topbar-actions > ul > li > a > i {
                    font-size: 20px;
                    padding: 5px;
                    background-color: white;
                    border-radius: 50%;
                    color: rgba(215, 47, 47, 0.2);
                }

    .mobile-topbar {
        padding: 10px 10px;
        justify-content: space-between;
    }

    .topbar.mobile-topbar.topbar-container {
        display: flex;
        justify-content: space-between;
    }

    .mobile-logo-anchor > img {
        width: 55px;
        height: 50px;
    }

    .logo-link.desktop-logo {
        display: none;
    }

    main {
        overflow: hidden;
        background-position: cover;
        background-color: rgb(250, 245, 245);
        opacity: 10;
    }

    .topbar-actions {
        width: 70%;
        display: none;
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: right;
        height: fit-content;
        padding-right: 6px;
    }

    .mobile-topbar-actions {
        display: flex;
    }

    .topbar-actions .quick-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
    }

        .topbar-actions .quick-info span {
            font-family: "poppins";
            font-size: 11px;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .topbar-actions .quick-info span.label {
                font-size: 11px;
            }

            .topbar-actions .quick-info span.value {
                font-size: 11px;
            }

        .topbar-actions .quick-info.outlined span.value {
            font-size: 11px;
        }

        .topbar-actions .quick-info.outlined span.label {
            font-size: 11px;
        }

    .wallet {
        width: 20px;
        height: 28px;
    }

    .topbar-actions .quick-info.outlined {
        padding: 1.5px 6px;
    }

    .label-icon {
        font-size: 1px;
    }

    .topbar-actions > button > img {
        width: 25px;
        height: 28px;
    }

    .action-group > button > img {
        width: 25px;
        height: 28px;
    }

    .topbar-actions .divider {
        height: 20px;
        margin: 0 6px;
    }

    .topbar-actions .action-group {
        display: flex;
        gap: 1px;
    }

    .has-notifications {
        width: 6px;
        height: 6px;
        top: 2px;
    }

    .section {
        padding: 44px 0;
        margin-bottom: 50px;
    }
    /* welcome-text */
    .wrapper {
        display: flex;
        max-height: 740px;
        padding: 2vh;
        align-items: center;
        max-width: 425px;
        justify-content: start;
        margin: 0 auto;
    }

    .coin_main {
        display: flex;
    }

    .primary-actions-container {
        display: flex;
        flex-direction: column;
        gap: 42px;
        width: fit-content;
        position: relative;
        z-index: 100;
    }

    .welcome-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .welcome-text h3 {
            font: 20px/1 Poppins;
        }

        .welcome-text h1 {
            font: 600 30px/1 Poppins;
            color: #d72f2f;
        }

    /* btn-group */
    .btn-group {
        display: flex;
        gap: 8px;
    }

        .btn-group .btn {
            height: 40px;
            min-width: 80px;
            padding: 10px;
            font-size: 14px;
        }

    .search-large {
        display: flex;
        flex-direction: 0;
        border-radius: 24px;
        gap: 0px;
        padding: 3px;
        width: fit-content;
    }

    .btn.btn-primary.no-glow {
        text-shadow: 0 0 4px #fffc;
        min-width: auto;
        width: 115px;
        font-size: 14px;
        padding: 0px 0px;
    }

    .search-large .large-search {
        border: none;
        font-size: 16px;
    }

        .search-large .large-search:placeholder-shown {
            color: #f38383;
        }

    .wrapper .background {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        height: 100%;
        background: none;
        overflow: hidden;
    }

        .wrapper .background .markers-map {
            width: 100%;
            position: relative;
            top: 250px;
            display: none;
            height: 400px;
            z-index: 0;
        }

        .wrapper .background .action-bg {
            display: none;
        }

        .wrapper .background .circle-1 {
            width: 640px;
            height: 640px;
            display: none;
            position: absolute;
            left: 50%;
            top: 30%;
            border-radius: 50%;
            z-index: 1;
        }

        .wrapper .background .circle-2 {
            width: 640px;
            height: 640px;
            display: none;
            position: absolute;
            left: 40%;
            top: 20%;
        }

    .section-title h2 {
        font-size: 24px;
        font-weight: 600;
    }

    .section-title a {
        font-size: 15px;
        font-family: "poppins";
    }

    .property-group.type1 {
        margin: 0 auto;
        max-width: auto;
        width: 420px;
        display: flex;
        gap: 24px 54px;
        flex-direction: row;
        flex-wrap: wrap;
        height: 380px;
        overflow-y: scroll;
        padding-left: 10px;
    }

    .property.type1 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        padding: 8px;
        border-radius: 8px;
        position: relative;
    }

    .coin {
        width: 50px;
        margin-top: 15px;
        margin-left: -5px;
    }

    /* property type2 */
    .property-group.type2 {
        display: flex;
        align-items: center;
        height: 360px;
        min-width: 400px;
        margin: 0px;
        overflow-x: scroll;
        gap: 20px;
    }

    .property.type2 {
        height: 250px;
        min-width: 150px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .property.type2:hover {
            height: 250px;
            min-width: 220px;
            z-index: 100;
            margin-right: 8px;
        }
}

@media (max-width: 380px) {
    .section {
        padding: 44px 0;
        margin-bottom: 50px;
    }

    .property-group.type1 {
        margin: auto;
        padding-top: 10px;
        max-width: auto;
        width: 350px;
        display: flex;
        gap: 24px 54px;
        flex-direction: row;
        flex-wrap: wrap;
        height: 530px !important;
        overflow-y: scroll;
        padding-left: 10px;
    }

    .wrapper {
        display: flex;
        max-height: 740px;
        padding: 1px;
        align-items: center;
        max-width: 425px;
        justify-content: start;
        margin: 0 auto;
    }

    .property.type1 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        padding: 8px;
        border-radius: 8px;
        position: relative;
        padding-left: 10px;
    }

    .coin {
        display: flex;
    }

    .property.type1 .property-details {
        display: flex;
        flex-direction: column;
        width: 320px;
        font-size: 12px;
        gap: 8px;
    }

        .property.type1 .property-details .info-level-1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .property.type1 .property-details .info-level-1 .prop-name-location {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

    .property.type1 .info-level-1 .prop-name-location .property-name {
        font-weight: 600;
        font-size: 16px;
    }

    .property.type1 .info-level-1 .prop-name-location .property-location {
        font-weight: 300;
        font-size: 12px;
    }

    .property.type1 .property-details .info-level-1 .like-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .property.type1 .property-details .property-type {
        font-weight: 600;
        font-size: 12px;
        color: #486bf5;
    }

    .property.type1 .property-details .info-level-2 .mini-info {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        font-weight: 300;
        padding: 8px 0;
        gap: 4px;
    }

        .property.type1 .property-details .info-level-2 .mini-info .label {
            font-size: 12px;
        }
    /* property type2 */
    .property-group.type2 {
        display: flex;
        align-items: center;
        height: 300px;
        min-width: 370px;
        margin: 0px;
        overflow-x: scroll;
        gap: 0px;
        padding-left: 10px;
    }

    .property.type2 {
        height: 250px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .property.type2:hover {
            height: 250px;
            min-width: 220px;
            z-index: 100;
            margin-right: 8px;
        }

    /* search-large */
    .search-large {
        display: flex;
        flex-direction: 0;
        border: 1px solid #ff9c9c;
        border-radius: 24px;
        gap: 8px;
        padding: 3px;
        width: fit-content;
    }

    .btn.btn-primary.no-glow {
        text-shadow: none;
    }

    .search-large .large-search {
        border: none;
        font-size: 12px;
    }

    .btn.btn-primary.no-glow {
        font-size: 12px;
    }

    /* tabs-container */
    .tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 80px;
        margin-bottom: 80px;
    }

        .tabs ul {
            flex-direction: row;
            flex-wrap: wrap;
            column-gap: 5px;
        }

        .tabs .tab {
            width: 70px; /* Make tabs take full width */
            margin-bottom: 8px;
            padding: 10px;
        }

    li.tab a {
        padding: 12px; /* Adjust padding */
    }

    .tabs ul {
        list-style: none;
        padding: none;
        display: flex;
    }

    .tabs .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 54px;
    }

    li.tab a {
        font-size: 12px;
        display: flex;
        justify-content: stretch;
        align-items: center;
        height: 54px;
        padding: 24px;
    }

    .property.type2 .prop-name-location {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
    }

    .property.type2:hover > img {
        width: 150px;
    }

    .property.type2 .property-name {
        font-weight: 600;
        font-size: 12px;
    }

    .property.type2 .property-location {
        opacity: 0.5;
    }

    .property.type2 .property-location,
    .property.type2 .mini-info {
        font-weight: 300;
        font-size: 12px;
    }

    .property.type2 .like-group .property-type {
        position: absolute;
        bottom: 12px;
        right: 16px;
        font-weight: 600;
        font-size: 16px;
        opacity: 0;
        transition: all 0.2s ease-in;
    }

    .property.type2 .like-group .btn {
        position: absolute;
        top: 16px;
        right: 16px;
        opacity: 0;
        font-size: 12px;
        transition: all 0.2s ease-in;
    }

    .label {
        font-size: 12px;
    }

    .property.type2:hover .like-group .property-type {
        font-size: 12px;
    }

    .property.type2:hover .like-group .btn {
        opacity: 1;
    }
}

@media (max-width: 330px) {
    .topbar-actions {
        padding-right: 2px;
        width: 80%;
    }

        .topbar-actions .quick-info {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 8px;
        }

            .topbar-actions .quick-info span {
                font-size: 11px;
                line-height: 1;
                display: flex;
                align-items: center;
                gap: 8px;
            }

                .topbar-actions .quick-info span.label {
                    font-size: 11px;
                }

                .topbar-actions .quick-info span.value {
                    font-size: 11px;
                }

            .topbar-actions .quick-info.outlined span.value {
                font-size: 11px;
            }

            .topbar-actions .quick-info.outlined span.label {
                font-size: 11px;
            }

    .wallet {
        width: 18px;
        height: 20px;
    }

    .topbar-actions .quick-info.outlined {
        padding: 2px;
    }

    .label-icon {
        font-size: 1px;
    }

    .topbar-actions > button > img {
        width: 20px;
        height: 28px;
    }

    .action-group > button > img {
        width: 20px;
        height: 28px;
    }

    .topbar-actions .divider {
        height: 15px;
        width: 1px;
        display: block;
        margin: 0 6px;
    }

    .topbar-actions .action-group {
        display: flex;
        gap: 1px;
    }

    .btn.icon-btn {
        border: 0;
        background-color: transparent;
        position: relative;
    }

    .has-notifications {
        width: 4px;
        height: 4px;
        top: 5px;
        right: 5px;
    }

    .property-group.type1 {
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        max-width: 320px;
        width: fit-content;
        display: flex;
        gap: 20px 4px;
        flex-direction: row;
        flex-wrap: wrap;
        height: 260px;
        overflow-y: scroll;
        overflow-x: hidden;
        padding-left: 0px;
    }

    .property.type1 {
        display: flex;
        align-items: center;
        gap: 0px;
        width: 320px;
        padding: 8px;
        border-radius: 8px;
        position: relative;
        padding-left: 5px;
        margin-right: 200px;
    }

    .coin {
        display: flex;
        width: 60px;
        margin-top: -5px;
    }

    .property.type1 .property-details {
        display: flex;
        flex-direction: column;
        width: 300px;
        font-size: 12px;
        gap: 8px;
    }

        .property.type1 .property-details .info-level-1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 250px;
        }

        .property.type1 .property-details .info-level-2 {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            column-gap: 34px;
        }

    .wrapper {
        display: flex;
        max-height: 740px;
        padding: 1px;
        align-items: center;
        max-width: 425px;
        justify-content: start;
        margin: 0 auto;
    }

    /* property type2 */
    .property-group.type2 {
        display: flex;
        align-items: center;
        height: 280px;
        min-width: 100%;
        margin: 0px;
        overflow-x: scroll;
        gap: 20px;
        padding-left: 10px;
    }

    .property.type2 {
        min-width: 150px;
        height: 210px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .property.type2:hover {
            height: 250px;
            min-width: 220px;
            z-index: 100;
            margin-right: 8px;
            /* display: none; */
        }

    /* search-large */
    .search-large {
        display: flex;
        flex-direction: 0;
        justify-content: center;
        border-radius: 24px;
        gap: 1px;
        padding: 4px;
        width: fit-content;
        height: 50px;
    }

        .search-large > img {
            width: 17px;
        }

    /* btn-group */
    .btn-group {
        display: flex;
        gap: 8px;
    }

        .btn-group .btn {
            height: 35px;
            min-width: 68px;
            padding: 10px;
            font-size: 14px;
        }

    .search-large .large-search {
        border: none;
        font-size: 12px;
    }

    .btn.btn-primary.no-glow {
        font-size: 12px;
        margin-left: -10px;
        height: 40px;
    }

    .action-link {
        font-size: 12px;
    }

    .property.type2 .prop-name-location {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
    }

    .property.type2:hover > img {
        width: 150px;
    }

    .property.type2 .property-name {
        font-weight: 600;
        font-size: 12px;
    }

    .property.type2 .property-location {
        opacity: 0.5;
    }

    .property.type2 .property-location,
    .property.type2 .mini-info {
        font-weight: 300;
        font-size: 12px;
    }

    .property.type2 .like-group .property-type {
        position: absolute;
        bottom: 12px;
        right: 16px;
        font-weight: 600;
        font-size: 16px;
        opacity: 0;
        transition: all 0.2s ease-in;
    }

    .property.type2 .like-group .btn {
        position: absolute;
        top: 16px;
        right: 16px;
        opacity: 0;
        font-size: 12px;
        transition: all 0.2s ease-in;
    }

    .label {
        font-size: 12px;
    }

    .property.type2:hover .like-group .property-type {
        font-size: 12px;
    }

    .property.type2:hover .like-group .btn {
        opacity: 1;
    }

    .section {
        padding: 44px 0;
        margin-bottom: 40px;
    }
}

.buy1-main {
    display: flex;
    flex-direction: row;
    column-gap: 0px;
}

.choose-token-container {
    width: 65%;
    height: 100%;
    padding: 20px;
}

.area-details {
    width: 35%;
    border-left: 1px solid rgba(215, 47, 47, 0.2);
}

.choosing-token-detail {
    padding: 10px 30px;
}

.choose-token-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 30px;
}

.progress-step {
    border: 1px solid pink;
    background-color: pink;
    padding: 10px 15px;
    border-radius: 50%;
}

.choose-token-title {
    font-weight: 600;
    font-size: 24px;
    color: #d72f2f;
}

.pricing-chart {
    margin: 10px 70px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.price-tittle {
    font-weight: 600;
    font-size: 24px;
    color: #000e14;
}

.price-detail-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.key-info {
    color: #394553;
    font-size: 14px;
}

.price-highlight {
    color: #d72f2f;
    font-size: 16px;
}

.top-price-detail-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.top-key-info {
    color: #394553;
    font-size: 14px;
    font-weight: 700;
}

.price-controls {
    display: flex;
    align-items: center;
    background-color: #f3cdcd;
    width: 100px;
    padding: 2px;
    justify-content: space-between;
    border-radius: 5px;
}

.decrement-btn,
.increment-btn {
    background-color: #d72f2f;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

    .decrement-btn:hover,
    .increment-btn:hover {
        background-color: #a61c1c;
    }

.price-highlight {
    margin: 0 10px;
}

.red-line {
    background: #d72f2f;
    height: 1px;
}

.checkbox-container {
    position: absolute;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-around;
    margin: 10px 50px;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    height: 32px;
    width: 32px;
    background-color: #f1f1f1;
    border-radius: 10px;
    border: 1px solid #d1d1d1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    input[type="checkbox"]:checked::after {
        content: "\f00c";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 15px;
        color: white;
        display: none;
    }
    /* input[type="checkbox"]:checked:hover {
  background-color: #a5a5a5;
} */
    input[type="checkbox"]:checked {
        background-color: #d72f2f;
    }

        input[type="checkbox"]:checked:after {
            display: block;
        }

label {
    color: grey;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
}

.button-container {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
    margin: 80px;
    justify-content: right;
    float: right;
}

.block-button {
    display: none;
}

.property-detail-map > iframe {
    width: 100%;
    height: 252px;
}

.buy1-token-details {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding: 50px 50px;
}

.buy1-token-overlay-background {
    position: absolute;
    margin-top: -100px;
    margin-left: 10px;
}

.buy1-token-background {
    position: relative;
    z-index: 10;
    width: 75px;
    height: 75px;
    border-radius: 15px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.25);
    border: 2px solid white;
    background-color: white;
}

.buy1-flex-buy-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.buy1-column-area {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.Buy-property-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
}

.Buy-property-location {
    font-size: 16px;
}

.buy1-property-type {
    border: 1px solid #486bf5;
    color: #486bf5;
    padding: 5px 5px;
    height: fit-content;
    background-color: #486bf549;
}
/* property details*/
.buy1-property-details {
    height: 204px;
    border-radius: 8px;
    padding: 16px;
    margin-top: 30px;
    gap: 8px;
    border: 2px solid #0000001d;
}

.details-frame {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.property-head {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #d72f2f;
    margin-bottom: 10px;
}

.row-frame {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4px, 0px, 4px, 0px;
    align-items: center;
}

.frame-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #000e14;
    font-family: poppins;
}

.price-highlight {
    color: #d72f2f;
    font-size: 14px;
}

/* confirm page */
.progress-success {
    border: 1px solid #f1fdef;
    background-color: #f1fdef;
    padding: 5px 7px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .progress-success > img {
        width: 20px;
    }

.choose-token-header_one {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 30px;
    margin-bottom: 15px;
}

.choose-token-title-success {
    font-weight: 600;
    font-size: 24px;
    color: black;
}

.black-highlight {
    font-weight: 600;
    color: black;
    font-size: 14px;
}

.yellow-notification-container {
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 190, 23, 0.1);
    border-radius: 10px;
    border: 1px solid #ffbe17;
    padding: 20px;
    margin-top: 30px;
    justify-content: space-between;
}

.yellow-notification-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
}

.yellow-notification-action {
    background: #fff;
    border: none;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

    .yellow-notification-action > a {
        color: #ffbe17;
        margin-left: 10px;
        font-size: 12px;
    }

.yellow-alert-icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

.yellow-highlight {
    color: #ffbe17;
    font-size: 14px;
}

.btn.buy-btn-secondary {
    background: #fff;
    color: #d72f2f;
    border: none;
    width: fit-content;
}

    .btn.buy-btn-secondary > a {
        color: #d72f2f;
    }

        .btn.buy-btn-secondary > a:hover {
            color: #d72f2f;
        }

@media screen and (max-width: 768px) {
    .choosing-token-detail {
        padding: 5px;
    }

    .choose-token-header {
        column-gap: 15px;
    }

    .choose-token-header_one {
        column-gap: 15px;
    }

    .choose-token-container {
        width: 60%;
        height: 100%;
        padding: 20px;
    }

    .area-details {
        width: 40%;
    }

    .pricing-chart {
        margin: 0;
        margin-left: 55px;
        margin-top: 10px;
        row-gap: 20px;
    }

    .buy1-token-details {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding: 60px 15px;
    }

    .buy1-property-details {
        height: 204px;
        border-radius: 8px;
        padding: 10px;
        margin-top: 30px;
    }

    .button-container {
        margin: 100px 0px 0px 0px;
    }

    .checkbox-container {
        margin: 30px 0px 0px 40px;
    }

    .btn-primary {
        font-size: 14px;
        height: 40px;
        max-width: auto;
        width: 300px;
    }

    .btn {
        max-width: auto;
        width: 30px;
    }
}

@media screen and (max-width: 450px) {
    .back {
        display: none;
    }

    .block-button {
        display: block;
        margin-top: 20px;
    }

    .choose-token-header {
        column-gap: 15px;
        margin-bottom: 30px;
    }

    .buy1-main {
        display: flex;
        flex-direction: column-reverse;
        column-gap: 0px;
    }

    .choose-token-container {
        width: 100%;
        height: 100%;
        padding: 20px;
    }

    .area-details {
        width: 100%;
    }

    .buy1-token-details {
        row-gap: 20px;
        padding: 20px 30px;
    }

    input[type="checkbox"] {
        height: 25px;
        width: 25px;
        border-radius: 5px;
    }

    label {
        font-size: 14px;
    }

    .buy1-token-overlay-background {
        position: absolute;
        margin-top: -70px;
        margin-left: 10px;
    }

    .pricing-chart {
        margin: 0;
        margin-left: 10px;
        margin-top: 30px;
        row-gap: 20px;
    }

    .price-tittle {
        font-weight: 600;
        font-size: 20px;
        color: #000e14;
    }

    .choose-token-title {
        font-weight: 600;
        font-size: 20px;
    }

    .choose-token-title-success {
        font-weight: 600;
        font-size: 20px;
    }

    .yellow-highlight {
        font-size: 10px;
    }

    .yellow-alert-icon {
        width: 20px;
        height: 20px;
    }

    .yellow-notification-container {
        margin-bottom: -30px;
        padding: 10px;
    }
}

@media screen and (max-width: 380px) {
    .choose-token-title {
        font-size: 18px;
    }

    .choose-token-title-success {
        font-size: 18px;
    }

    .btn.btn-primary {
        min-width: auto;
        width: 150px;
        font-size: 13px;
    }

    .btn.btn.buy-btn-secondary {
        min-width: auto;
        width: 70px;
        font-size: 13px;
        height: 40px;
    }

    .btn {
        max-width: auto;
        width: 50px;
        padding-left: 1px;
    }
}

@media screen and (max-width: 320px) {
    .buy1-token-overlay-background {
        margin-top: -55px;
        margin-left: -20px;
    }

    .choose-token-title {
        font-size: 15px;
    }

    .choose-token-title-success {
        font-size: 15px;
    }

    .progress-success > img {
        width: 15px;
        height: 15px;
    }

    .buy1-token-background {
        width: 60px;
        height: 60px;
    }

    .choosing-token-detail {
        padding: 0px;
    }

    .choose-token-header {
        column-gap: 20px;
    }

    .choose-token-container {
        height: 100%;
        padding: 10px;
    }

    .checkbox-container {
        margin: 30px 0px 0px 20px;
    }

    .pricing-chart {
        margin: 0;
        margin-left: 20px;
        margin-right: 10px;
        margin-top: 30px;
        row-gap: 20px;
    }

    .price-tittle {
        font-size: 17px;
    }

    .progress-step {
        padding: 5px 10px;
        font-size: 14px;
    }

    .yellow-highlight {
        padding: 10px;
        margin-left: -10px;
    }

    .yellow-alert-icon {
        width: 19px;
    }

    .yellow-notification-action > a {
        margin-left: -5px;
        padding: 1px;
    }
}
.icon-input-container {
    position: relative;
}

.lock-icon {
    position: absolute;
    top: 50%;
    right: 80px;
    align-items: center;
    justify-content: center;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1;
}

.lock-verify-input {
    width: 400px;
    height: 60px;
    border-radius: 16px;
    padding: 19px 50px;
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
}

    .lock-verify-input::placeholder {
        color: #000e14;
        font-size: 16px;
        font-family: "Poppins";
        padding-left: 40px;
    }

.lock .hidden {
    display: none;
}

.btn--secondary {
    width: 150px;
    height: 60px;
    border-radius: 16px;
    padding: 15px 24px;
    border: 1px solid #d72f2f;
    color: #d72f2f;
    background-color: white;
    font-size: 18px;
}

.green-container {
    display: flex;
    flex-direction: row;
    background-color: rgba(15, 166, 1, 0.1);
    border-radius: 10px;
    border: 1px solid #0fa601;
    padding: 15px 2px;
    margin-top:0px;
    justify-content: space-between;
}

.green-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
}

.green-alert-icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

.green-heading {
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #0fa601;
}

.green-highlights {
    font-family: "Poppins";
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    color: #0fa601;
}

@media (max-width: 768px) {
}

@media (max-width: 380px) {
    .lock-verify-input {
        width: 340px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
    }

        .lock-verify-input::placeholder {
            font-size: 14px;
        }
}

@media (max-width: 320px) {
    .green-heading {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .green-highlights {
        font-size: 30px;
        line-height: 40px;
    }

    .lock-verify-input {
        width: 340px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
    }

        .lock-verify-input::placeholder {
            font-size: 14px;
        }

    .btn--secondary {
        height: 55px;
        padding: 20px 14px;
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .green-heading {
        font-size: 15px;
    }

    .lock-verify-input {
        width: 340px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
        border: 1px solid #d1d1d1;
    }

        .lock-verify-input::placeholder {
            font-size: 14px;
        }

    .lock {
        width: 23px;
        height: 23px;
    }
}

@media (max-width: 320px) {
    .lock-verify-input {
        width: 270px;
        height: 60px;
        border-radius: 16px;
        padding: 19px 16px;
        border: 1px solid #d1d1d1;
    }

        .lock-verify-input::placeholder {
            font-size: 14px;
        }

    .lock {
        width: 20px;
        height: 20px;
    }

    .btn--secondary {
        height: 45px;
        padding: 10px 14px;
        font-size: 14px;
    }
}